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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (116) hide show
  1. package/README.md +254 -4
  2. package/eslint.config.cjs +47 -0
  3. package/ng-package.json +7 -0
  4. package/package.json +8 -23
  5. package/project.json +37 -0
  6. package/src/components/button/button.component.scss +49 -0
  7. package/src/components/button/button.component.ts +36 -0
  8. package/src/components/card/card.component.scss +18 -0
  9. package/src/components/card/card.component.ts +30 -0
  10. package/src/components/clickable-card/clickable-card.component.scss +39 -0
  11. package/src/components/clickable-card/clickable-card.component.ts +34 -0
  12. package/src/components/icons/angular-icon.component.ts +35 -0
  13. package/src/components/icons/bug-icon.component.ts +23 -0
  14. package/src/components/icons/code-icon.component.ts +24 -0
  15. package/src/components/icons/database-icon.component.ts +27 -0
  16. package/src/components/icons/discord-icon.component.ts +23 -0
  17. package/src/components/icons/docs-icon.component.ts +23 -0
  18. package/src/components/icons/export-icon.component.ts +23 -0
  19. package/src/components/icons/gauge-icon.component.ts +27 -0
  20. package/src/components/icons/gear-icon.component.ts +27 -0
  21. package/src/components/icons/git-branch-icon.component.ts +27 -0
  22. package/src/components/icons/icon.component.ts +129 -0
  23. package/src/components/icons/icon.models.ts +27 -0
  24. package/src/components/icons/import-icon.component.ts +23 -0
  25. package/src/components/icons/layout-icon.component.ts +24 -0
  26. package/src/components/icons/lightbulb-icon.component.ts +23 -0
  27. package/src/components/icons/lighting-icon.component.ts +24 -0
  28. package/src/components/icons/moon-icon.component.ts +27 -0
  29. package/src/components/icons/network-icon.component.ts +27 -0
  30. package/src/components/icons/puzzle-icon.component.ts +27 -0
  31. package/src/components/icons/refresh-icon.component.ts +27 -0
  32. package/src/components/icons/star-icon.component.ts +27 -0
  33. package/src/components/icons/sun-icon.component.ts +27 -0
  34. package/src/components/icons/terminal-icon.component.ts +27 -0
  35. package/src/components/icons/toggle-left-icon.component.ts +27 -0
  36. package/src/components/icons/translate-icon.component.ts +23 -0
  37. package/src/components/icons/trash-icon.component.ts +23 -0
  38. package/src/components/icons/users-icon.component.ts +27 -0
  39. package/src/components/input/input.component.ts +67 -0
  40. package/src/components/link-button/link-button.component.scss +36 -0
  41. package/src/components/link-button/link-button.component.ts +29 -0
  42. package/src/components/select/select.component.scss +162 -0
  43. package/src/components/select/select.component.ts +127 -0
  44. package/src/components/tool-button/tool-button.component.scss +67 -0
  45. package/src/components/tool-button/tool-button.component.ts +126 -0
  46. package/src/components/toolbar-tool/toolbar-tool.component.scss +9 -0
  47. package/src/components/toolbar-tool/toolbar-tool.component.ts +169 -0
  48. package/src/components/toolbar-tool/toolbar-tool.models.ts +33 -0
  49. package/src/components/window/window.component.scss +95 -0
  50. package/src/components/window/window.component.ts +69 -0
  51. package/src/dev-toolbar-state.service.ts +89 -0
  52. package/src/dev-toolbar.component.scss +22 -0
  53. package/src/dev-toolbar.component.ts +105 -0
  54. package/src/index.ts +10 -0
  55. package/src/models/dev-tools.interface.ts +19 -0
  56. package/src/styles.scss +342 -0
  57. package/src/test-setup.ts +12 -0
  58. package/src/tools/feature-flags-tool/feature-flags-internal.service.ts +96 -0
  59. package/src/tools/feature-flags-tool/feature-flags-tool.component.ts +261 -0
  60. package/src/tools/feature-flags-tool/feature-flags.models.ts +10 -0
  61. package/src/tools/feature-flags-tool/feature-flags.service.ts +28 -0
  62. package/src/tools/home-tool/home-tool.component.scss +67 -0
  63. package/src/tools/home-tool/home-tool.component.ts +197 -0
  64. package/{tools/settings-tool/settings.models.d.ts → src/tools/home-tool/settings.models.ts} +1 -1
  65. package/src/tools/home-tool/settings.service.spec.ts +59 -0
  66. package/src/tools/home-tool/settings.service.ts +21 -0
  67. package/src/tools/language-tool/language-internal.service.ts +51 -0
  68. package/src/tools/language-tool/language-tool.component.scss +7 -0
  69. package/src/tools/language-tool/language-tool.component.ts +71 -0
  70. package/src/tools/language-tool/language.models.ts +4 -0
  71. package/src/tools/language-tool/language.service.ts +26 -0
  72. package/src/utils/storage.service.spec.ts +179 -0
  73. package/src/utils/storage.service.ts +80 -0
  74. package/tsconfig.json +28 -0
  75. package/tsconfig.lib.json +28 -0
  76. package/tsconfig.lib.prod.json +9 -0
  77. package/tsconfig.spec.json +29 -0
  78. package/vite.config.mts +27 -0
  79. package/components/button/button.component.d.ts +0 -12
  80. package/components/icons/angular-icon.component.d.ts +0 -5
  81. package/components/icons/bug-icon.component.d.ts +0 -6
  82. package/components/icons/code-icon.component.d.ts +0 -6
  83. package/components/icons/database-icon.component.d.ts +0 -6
  84. package/components/icons/gauge-icon.component.d.ts +0 -6
  85. package/components/icons/gear-icon.component.d.ts +0 -6
  86. package/components/icons/git-branch-icon.component.d.ts +0 -6
  87. package/components/icons/icon.component.d.ts +0 -9
  88. package/components/icons/icon.models.d.ts +0 -1
  89. package/components/icons/layout-icon.component.d.ts +0 -6
  90. package/components/icons/lighting-icon.component.d.ts +0 -6
  91. package/components/icons/moon-icon.component.d.ts +0 -6
  92. package/components/icons/network-icon.component.d.ts +0 -6
  93. package/components/icons/puzzle-icon.component.d.ts +0 -6
  94. package/components/icons/refresh-icon.component.d.ts +0 -6
  95. package/components/icons/star-icon.component.d.ts +0 -6
  96. package/components/icons/sun-icon.component.d.ts +0 -6
  97. package/components/icons/terminal-icon.component.d.ts +0 -6
  98. package/components/icons/toggle-left-icon.component.d.ts +0 -6
  99. package/components/icons/users-icon.component.d.ts +0 -6
  100. package/components/input/input.component.d.ts +0 -10
  101. package/components/select/select.component.d.ts +0 -14
  102. package/components/tool-button/tool-button.component.d.ts +0 -23
  103. package/components/toolbar-tool/toolbar-tool.component.d.ts +0 -28
  104. package/components/window/window.component.d.ts +0 -16
  105. package/components/window/window.models.d.ts +0 -20
  106. package/dev-toolbar-state.service.d.ts +0 -18
  107. package/dev-toolbar.component.d.ts +0 -17
  108. package/fesm2022/ngx-dev-toolbar.mjs +0 -2073
  109. package/fesm2022/ngx-dev-toolbar.mjs.map +0 -1
  110. package/index.d.ts +0 -3
  111. package/tools/feature-flags-tool/feature-flags-tool.component.d.ts +0 -33
  112. package/tools/feature-flags-tool/feature-flags.models.d.ts +0 -9
  113. package/tools/feature-flags-tool/feature-flags.service.d.ts +0 -35
  114. package/tools/settings-tool/settings-tool.component.d.ts +0 -15
  115. package/tools/settings-tool/settings.service.d.ts +0 -10
  116. package/utils/storage.service.d.ts +0 -9
@@ -1,2073 +0,0 @@
1
- import { trigger, state, style, transition, animate } from '@angular/animations';
2
- import * as i0 from '@angular/core';
3
- import { signal, computed, Injectable, Component, ChangeDetectionStrategy, input, inject, ElementRef, output, model, ViewChild, ContentChild, DestroyRef } from '@angular/core';
4
- import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
5
- import { BehaviorSubject, combineLatest, map, fromEvent } from 'rxjs';
6
- import { filter, throttleTime } from 'rxjs/operators';
7
- import * as i1 from '@angular/forms';
8
- import { FormsModule } from '@angular/forms';
9
- import * as i1$1 from '@angular/cdk/overlay';
10
- import { CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
11
-
12
- class DevToolbarStateService {
13
- // Initial state
14
- state = signal({
15
- isHidden: true,
16
- activeToolId: null,
17
- delay: 3000,
18
- error: null,
19
- theme: 'dark',
20
- });
21
- // Selectors
22
- isVisible = computed(() => !this.state().isHidden);
23
- isDarkTheme = computed(() => this.state().theme === 'dark');
24
- activeToolId = computed(() => this.state().activeToolId);
25
- hasActiveTool = computed(() => this.state().activeToolId !== null);
26
- error = computed(() => this.state().error);
27
- theme = computed(() => this.state().theme);
28
- delay = computed(() => this.state().delay);
29
- // State updates
30
- setVisibility(isVisible) {
31
- if (isVisible) {
32
- this.state.update((state) => ({
33
- ...state,
34
- isHidden: false,
35
- }));
36
- }
37
- else {
38
- if (this.activeToolId() === null) {
39
- setTimeout(() => {
40
- this.state.update((state) => ({
41
- ...state,
42
- isHidden: true,
43
- }));
44
- }, this.state().delay);
45
- }
46
- }
47
- }
48
- setTheme(theme) {
49
- this.state.update((state) => ({
50
- ...state,
51
- theme,
52
- }));
53
- }
54
- setActiveTool(toolId) {
55
- this.state.update((state) => ({
56
- ...state,
57
- activeToolId: toolId,
58
- }));
59
- if (toolId === null) {
60
- this.setVisibility(false);
61
- }
62
- else {
63
- this.setVisibility(true);
64
- }
65
- }
66
- // Public actions
67
- toggleTool(toolId) {
68
- const currentToolId = this.activeToolId();
69
- this.setActiveTool(currentToolId === toolId ? null : toolId);
70
- }
71
- toggleVisibility() {
72
- this.state.update((state) => ({
73
- ...state,
74
- isHidden: !state.isHidden,
75
- }));
76
- }
77
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
78
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarStateService, providedIn: 'root' });
79
- }
80
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarStateService, decorators: [{
81
- type: Injectable,
82
- args: [{
83
- providedIn: 'root',
84
- }]
85
- }] });
86
-
87
- class AngularIconComponent {
88
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AngularIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
89
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AngularIconComponent, isStandalone: true, selector: "ndt-angular-icon", ngImport: i0, template: `
90
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
91
- <defs>
92
- <linearGradient
93
- id="angular-gradient"
94
- x1="6"
95
- x2="18"
96
- y1="20"
97
- y2="4"
98
- gradientUnits="userSpaceOnUse"
99
- >
100
- <stop offset="0" stop-color="#E40035" />
101
- <stop offset=".24" stop-color="#F60A48" />
102
- <stop offset=".352" stop-color="#F20755" />
103
- <stop offset=".494" stop-color="#DC087D" />
104
- <stop offset=".745" stop-color="#9717E7" />
105
- <stop offset="1" stop-color="#6C00F5" />
106
- </linearGradient>
107
- </defs>
108
- <g fill="url(#angular-gradient)">
109
- <polygon points="14.1,2.7 20.1,15.7 20.7,5.8" />
110
- <polygon points="15.6,16.4 8.4,16.4 7.4,18.6 12,21.2 16.6,18.6" />
111
- <polygon points="9.6,13.5 14.4,13.5 12,7.7" />
112
- <polygon points="9.9,2.7 3.3,5.8 3.9,15.7" />
113
- </g>
114
- </svg>
115
- `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
116
- }
117
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AngularIconComponent, decorators: [{
118
- type: Component,
119
- args: [{
120
- selector: 'ndt-angular-icon',
121
- standalone: true,
122
- changeDetection: ChangeDetectionStrategy.OnPush,
123
- template: `
124
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
125
- <defs>
126
- <linearGradient
127
- id="angular-gradient"
128
- x1="6"
129
- x2="18"
130
- y1="20"
131
- y2="4"
132
- gradientUnits="userSpaceOnUse"
133
- >
134
- <stop offset="0" stop-color="#E40035" />
135
- <stop offset=".24" stop-color="#F60A48" />
136
- <stop offset=".352" stop-color="#F20755" />
137
- <stop offset=".494" stop-color="#DC087D" />
138
- <stop offset=".745" stop-color="#9717E7" />
139
- <stop offset="1" stop-color="#6C00F5" />
140
- </linearGradient>
141
- </defs>
142
- <g fill="url(#angular-gradient)">
143
- <polygon points="14.1,2.7 20.1,15.7 20.7,5.8" />
144
- <polygon points="15.6,16.4 8.4,16.4 7.4,18.6 12,21.2 16.6,18.6" />
145
- <polygon points="9.6,13.5 14.4,13.5 12,7.7" />
146
- <polygon points="9.9,2.7 3.3,5.8 3.9,15.7" />
147
- </g>
148
- </svg>
149
- `,
150
- }]
151
- }] });
152
-
153
- class BugIconComponent {
154
- fill = input('#FFFF');
155
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BugIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
156
- static ɵ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: `
157
- <svg
158
- [attr.fill]="fill()"
159
- xmlns="http://www.w3.org/2000/svg"
160
- width="24"
161
- height="24"
162
- viewBox="0 0 256 256"
163
- >
164
- <path
165
- 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"
166
- opacity="0.2"
167
- ></path>
168
- <path
169
- 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"
170
- ></path>
171
- </svg>
172
- `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
173
- }
174
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BugIconComponent, decorators: [{
175
- type: Component,
176
- args: [{
177
- selector: 'ndt-bug-icon',
178
- standalone: true,
179
- changeDetection: ChangeDetectionStrategy.OnPush,
180
- template: `
181
- <svg
182
- [attr.fill]="fill()"
183
- xmlns="http://www.w3.org/2000/svg"
184
- width="24"
185
- height="24"
186
- viewBox="0 0 256 256"
187
- >
188
- <path
189
- 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"
190
- opacity="0.2"
191
- ></path>
192
- <path
193
- 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"
194
- ></path>
195
- </svg>
196
- `,
197
- }]
198
- }] });
199
-
200
- class CodeIconComponent {
201
- fill = input('#FFFF');
202
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CodeIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
203
- static ɵ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: `
204
- <svg
205
- [attr.fill]="fill()"
206
- xmlns="http://www.w3.org/2000/svg"
207
- width="24"
208
- height="24"
209
- viewBox="0 0 256 256"
210
- >
211
- <path d="M240,128l-48,40H64L16,128,64,88H192Z" opacity="0.2"></path>
212
- <path
213
- 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"
214
- ></path>
215
- </svg>
216
- `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
217
- }
218
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CodeIconComponent, decorators: [{
219
- type: Component,
220
- args: [{
221
- selector: 'ndt-code-icon',
222
- standalone: true,
223
- template: `
224
- <svg
225
- [attr.fill]="fill()"
226
- xmlns="http://www.w3.org/2000/svg"
227
- width="24"
228
- height="24"
229
- viewBox="0 0 256 256"
230
- >
231
- <path d="M240,128l-48,40H64L16,128,64,88H192Z" opacity="0.2"></path>
232
- <path
233
- 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"
234
- ></path>
235
- </svg>
236
- `,
237
- changeDetection: ChangeDetectionStrategy.OnPush,
238
- }]
239
- }] });
240
-
241
- class DatabaseIconComponent {
242
- fill = input('#FFFF');
243
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DatabaseIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
244
- static ɵ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: `
245
- <svg
246
- [attr.fill]="fill()"
247
- xmlns="http://www.w3.org/2000/svg"
248
- width="24"
249
- height="24"
250
- viewBox="0 0 256 256"
251
- >
252
- <path
253
- d="M216,80c0,26.51-39.4,48-88,48S40,106.51,40,80s39.4-48,88-48S216,53.49,216,80Z"
254
- opacity="0.2"
255
- ></path>
256
- <path
257
- 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"
258
- ></path>
259
- </svg>
260
- `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
261
- }
262
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DatabaseIconComponent, decorators: [{
263
- type: Component,
264
- args: [{
265
- selector: 'ndt-database-icon',
266
- standalone: true,
267
- changeDetection: ChangeDetectionStrategy.OnPush,
268
- template: `
269
- <svg
270
- [attr.fill]="fill()"
271
- xmlns="http://www.w3.org/2000/svg"
272
- width="24"
273
- height="24"
274
- viewBox="0 0 256 256"
275
- >
276
- <path
277
- d="M216,80c0,26.51-39.4,48-88,48S40,106.51,40,80s39.4-48,88-48S216,53.49,216,80Z"
278
- opacity="0.2"
279
- ></path>
280
- <path
281
- 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"
282
- ></path>
283
- </svg>
284
- `,
285
- }]
286
- }] });
287
-
288
- class GaugeIconComponent {
289
- fill = input('#FFFF');
290
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GaugeIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
291
- static ɵ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: `
292
- <svg
293
- [attr.fill]="fill()"
294
- xmlns="http://www.w3.org/2000/svg"
295
- width="24"
296
- height="24"
297
- viewBox="0 0 256 256"
298
- >
299
- <path
300
- 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"
301
- opacity="0.2"
302
- ></path>
303
- <path
304
- 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"
305
- ></path>
306
- </svg>
307
- `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
308
- }
309
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GaugeIconComponent, decorators: [{
310
- type: Component,
311
- args: [{
312
- selector: 'ndt-gauge-icon',
313
- standalone: true,
314
- changeDetection: ChangeDetectionStrategy.OnPush,
315
- template: `
316
- <svg
317
- [attr.fill]="fill()"
318
- xmlns="http://www.w3.org/2000/svg"
319
- width="24"
320
- height="24"
321
- viewBox="0 0 256 256"
322
- >
323
- <path
324
- 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"
325
- opacity="0.2"
326
- ></path>
327
- <path
328
- 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"
329
- ></path>
330
- </svg>
331
- `,
332
- }]
333
- }] });
334
-
335
- class GearIconComponent {
336
- fill = input('#FFFF');
337
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GearIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
338
- static ɵ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: `
339
- <svg
340
- [attr.fill]="fill()"
341
- xmlns="http://www.w3.org/2000/svg"
342
- width="24"
343
- height="24"
344
- viewBox="0 0 256 256"
345
- >
346
- <path
347
- 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"
348
- opacity="0.2"
349
- ></path>
350
- <path
351
- 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"
352
- ></path>
353
- </svg>
354
- `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
355
- }
356
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GearIconComponent, decorators: [{
357
- type: Component,
358
- args: [{
359
- selector: 'ndt-gear-icon',
360
- standalone: true,
361
- changeDetection: ChangeDetectionStrategy.OnPush,
362
- template: `
363
- <svg
364
- [attr.fill]="fill()"
365
- xmlns="http://www.w3.org/2000/svg"
366
- width="24"
367
- height="24"
368
- viewBox="0 0 256 256"
369
- >
370
- <path
371
- 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"
372
- opacity="0.2"
373
- ></path>
374
- <path
375
- 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"
376
- ></path>
377
- </svg>
378
- `,
379
- }]
380
- }] });
381
-
382
- class GitBranchIconComponent {
383
- fill = input('#FFFF');
384
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GitBranchIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
385
- static ɵ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: `
386
- <svg
387
- [attr.fill]="fill()"
388
- xmlns="http://www.w3.org/2000/svg"
389
- width="24"
390
- height="24"
391
- viewBox="0 0 256 256"
392
- >
393
- <path
394
- d="M224,64a24,24,0,1,1-24-24A24,24,0,0,1,224,64Z"
395
- opacity="0.2"
396
- ></path>
397
- <path
398
- 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"
399
- ></path>
400
- </svg>
401
- `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
402
- }
403
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GitBranchIconComponent, decorators: [{
404
- type: Component,
405
- args: [{
406
- selector: 'ndt-git-branch-icon',
407
- standalone: true,
408
- changeDetection: ChangeDetectionStrategy.OnPush,
409
- template: `
410
- <svg
411
- [attr.fill]="fill()"
412
- xmlns="http://www.w3.org/2000/svg"
413
- width="24"
414
- height="24"
415
- viewBox="0 0 256 256"
416
- >
417
- <path
418
- d="M224,64a24,24,0,1,1-24-24A24,24,0,0,1,224,64Z"
419
- opacity="0.2"
420
- ></path>
421
- <path
422
- 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"
423
- ></path>
424
- </svg>
425
- `,
426
- }]
427
- }] });
428
-
429
- class LayoutIconComponent {
430
- fill = input('#FFFF');
431
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LayoutIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
432
- static ɵ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: `
433
- <svg
434
- [attr.fill]="fill()"
435
- xmlns="http://www.w3.org/2000/svg"
436
- width="24"
437
- height="24"
438
- viewBox="0 0 256 256"
439
- >
440
- <path d="M104,104V208H40a8,8,0,0,1-8-8V104Z" opacity="0.2"></path>
441
- <path
442
- 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"
443
- ></path>
444
- </svg>
445
- `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
446
- }
447
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LayoutIconComponent, decorators: [{
448
- type: Component,
449
- args: [{
450
- selector: 'ndt-layout-icon',
451
- standalone: true,
452
- changeDetection: ChangeDetectionStrategy.OnPush,
453
- template: `
454
- <svg
455
- [attr.fill]="fill()"
456
- xmlns="http://www.w3.org/2000/svg"
457
- width="24"
458
- height="24"
459
- viewBox="0 0 256 256"
460
- >
461
- <path d="M104,104V208H40a8,8,0,0,1-8-8V104Z" opacity="0.2"></path>
462
- <path
463
- 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"
464
- ></path>
465
- </svg>
466
- `,
467
- }]
468
- }] });
469
-
470
- class LightingIconComponent {
471
- fill = input('#FFFF');
472
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LightingIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
473
- static ɵ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: `
474
- <svg
475
- [attr.fill]="fill()"
476
- xmlns="http://www.w3.org/2000/svg"
477
- width="24"
478
- height="24"
479
- viewBox="0 0 256 256"
480
- >
481
- <path d="M96,240l16-80L48,136,160,16,144,96l64,24Z" opacity="0.2"></path>
482
- <path
483
- 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"
484
- ></path>
485
- </svg>
486
- `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
487
- }
488
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LightingIconComponent, decorators: [{
489
- type: Component,
490
- args: [{
491
- selector: 'ndt-lighting-icon',
492
- standalone: true,
493
- changeDetection: ChangeDetectionStrategy.OnPush,
494
- template: `
495
- <svg
496
- [attr.fill]="fill()"
497
- xmlns="http://www.w3.org/2000/svg"
498
- width="24"
499
- height="24"
500
- viewBox="0 0 256 256"
501
- >
502
- <path d="M96,240l16-80L48,136,160,16,144,96l64,24Z" opacity="0.2"></path>
503
- <path
504
- 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"
505
- ></path>
506
- </svg>
507
- `,
508
- }]
509
- }] });
510
-
511
- class MoonIconComponent {
512
- fill = input('#FFFF');
513
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MoonIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
514
- static ɵ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: `
515
- <svg
516
- [attr.fill]="fill()"
517
- xmlns="http://www.w3.org/2000/svg"
518
- width="24"
519
- height="24"
520
- viewBox="0 0 256 256"
521
- >
522
- <path
523
- 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"
524
- opacity="0.2"
525
- />
526
- <path
527
- 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"
528
- />
529
- </svg>
530
- `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
531
- }
532
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MoonIconComponent, decorators: [{
533
- type: Component,
534
- args: [{
535
- selector: 'ndt-moon-icon',
536
- standalone: true,
537
- changeDetection: ChangeDetectionStrategy.OnPush,
538
- template: `
539
- <svg
540
- [attr.fill]="fill()"
541
- xmlns="http://www.w3.org/2000/svg"
542
- width="24"
543
- height="24"
544
- viewBox="0 0 256 256"
545
- >
546
- <path
547
- 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"
548
- opacity="0.2"
549
- />
550
- <path
551
- 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"
552
- />
553
- </svg>
554
- `,
555
- }]
556
- }] });
557
-
558
- class NetworkIconComponent {
559
- fill = input('#FFFF');
560
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NetworkIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
561
- static ɵ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: `
562
- <svg
563
- [attr.fill]="fill()"
564
- xmlns="http://www.w3.org/2000/svg"
565
- width="24"
566
- height="24"
567
- viewBox="0 0 256 256"
568
- >
569
- <path
570
- 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"
571
- opacity="0.2"
572
- ></path>
573
- <path
574
- 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"
575
- ></path>
576
- </svg>
577
- `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
578
- }
579
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NetworkIconComponent, decorators: [{
580
- type: Component,
581
- args: [{
582
- selector: 'ndt-network-icon',
583
- standalone: true,
584
- changeDetection: ChangeDetectionStrategy.OnPush,
585
- template: `
586
- <svg
587
- [attr.fill]="fill()"
588
- xmlns="http://www.w3.org/2000/svg"
589
- width="24"
590
- height="24"
591
- viewBox="0 0 256 256"
592
- >
593
- <path
594
- 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"
595
- opacity="0.2"
596
- ></path>
597
- <path
598
- 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"
599
- ></path>
600
- </svg>
601
- `,
602
- }]
603
- }] });
604
-
605
- class PuzzleIconComponent {
606
- fill = input('#FFFF');
607
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PuzzleIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
608
- static ɵ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: `
609
- <svg
610
- [attr.fill]="fill()"
611
- xmlns="http://www.w3.org/2000/svg"
612
- width="24"
613
- height="24"
614
- viewBox="0 0 256 256"
615
- >
616
- <path
617
- 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"
618
- opacity="0.2"
619
- ></path>
620
- <path
621
- 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"
622
- ></path>
623
- </svg>
624
- `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
625
- }
626
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PuzzleIconComponent, decorators: [{
627
- type: Component,
628
- args: [{
629
- selector: 'ndt-puzzle-icon',
630
- standalone: true,
631
- changeDetection: ChangeDetectionStrategy.OnPush,
632
- template: `
633
- <svg
634
- [attr.fill]="fill()"
635
- xmlns="http://www.w3.org/2000/svg"
636
- width="24"
637
- height="24"
638
- viewBox="0 0 256 256"
639
- >
640
- <path
641
- 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"
642
- opacity="0.2"
643
- ></path>
644
- <path
645
- 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"
646
- ></path>
647
- </svg>
648
- `,
649
- }]
650
- }] });
651
-
652
- class RefreshIconComponent {
653
- fill = input('#FFFF');
654
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RefreshIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
655
- static ɵ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: `
656
- <svg
657
- [attr.fill]="fill()"
658
- xmlns="http://www.w3.org/2000/svg"
659
- width="24"
660
- height="24"
661
- viewBox="0 0 256 256"
662
- >
663
- <path
664
- d="M216,128a88,88,0,1,1-88-88A88,88,0,0,1,216,128Z"
665
- opacity="0.2"
666
- ></path>
667
- <path
668
- 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"
669
- ></path>
670
- </svg>
671
- `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
672
- }
673
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RefreshIconComponent, decorators: [{
674
- type: Component,
675
- args: [{
676
- selector: 'ndt-refresh-icon',
677
- standalone: true,
678
- changeDetection: ChangeDetectionStrategy.OnPush,
679
- template: `
680
- <svg
681
- [attr.fill]="fill()"
682
- xmlns="http://www.w3.org/2000/svg"
683
- width="24"
684
- height="24"
685
- viewBox="0 0 256 256"
686
- >
687
- <path
688
- d="M216,128a88,88,0,1,1-88-88A88,88,0,0,1,216,128Z"
689
- opacity="0.2"
690
- ></path>
691
- <path
692
- 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"
693
- ></path>
694
- </svg>
695
- `,
696
- }]
697
- }] });
698
-
699
- class StarIconComponent {
700
- fill = input('#FFFF');
701
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: StarIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
702
- static ɵ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: `
703
- <svg
704
- [attr.fill]="fill()"
705
- xmlns="http://www.w3.org/2000/svg"
706
- width="24"
707
- height="24"
708
- viewBox="0 0 256 256"
709
- >
710
- <path
711
- 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"
712
- opacity="0.2"
713
- ></path>
714
- <path
715
- 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"
716
- ></path>
717
- </svg>
718
- `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
719
- }
720
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: StarIconComponent, decorators: [{
721
- type: Component,
722
- args: [{
723
- selector: 'ndt-star-icon',
724
- standalone: true,
725
- changeDetection: ChangeDetectionStrategy.OnPush,
726
- template: `
727
- <svg
728
- [attr.fill]="fill()"
729
- xmlns="http://www.w3.org/2000/svg"
730
- width="24"
731
- height="24"
732
- viewBox="0 0 256 256"
733
- >
734
- <path
735
- 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"
736
- opacity="0.2"
737
- ></path>
738
- <path
739
- 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"
740
- ></path>
741
- </svg>
742
- `,
743
- }]
744
- }] });
745
-
746
- class SunIconComponent {
747
- fill = input('#FFFF');
748
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SunIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
749
- static ɵ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: `
750
- <svg
751
- [attr.fill]="fill()"
752
- xmlns="http://www.w3.org/2000/svg"
753
- width="24"
754
- height="24"
755
- viewBox="0 0 256 256"
756
- >
757
- <path
758
- d="M128,60a68,68,0,1,0,68,68A68.07,68.07,0,0,0,128,60Z"
759
- opacity="0.2"
760
- />
761
- <path
762
- 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"
763
- />
764
- </svg>
765
- `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
766
- }
767
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SunIconComponent, decorators: [{
768
- type: Component,
769
- args: [{
770
- selector: 'ndt-sun-icon',
771
- standalone: true,
772
- changeDetection: ChangeDetectionStrategy.OnPush,
773
- template: `
774
- <svg
775
- [attr.fill]="fill()"
776
- xmlns="http://www.w3.org/2000/svg"
777
- width="24"
778
- height="24"
779
- viewBox="0 0 256 256"
780
- >
781
- <path
782
- d="M128,60a68,68,0,1,0,68,68A68.07,68.07,0,0,0,128,60Z"
783
- opacity="0.2"
784
- />
785
- <path
786
- 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"
787
- />
788
- </svg>
789
- `,
790
- }]
791
- }] });
792
-
793
- class TerminalIconComponent {
794
- fill = input('#FFFF');
795
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TerminalIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
796
- static ɵ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: `
797
- <svg
798
- [attr.fill]="fill()"
799
- xmlns="http://www.w3.org/2000/svg"
800
- width="24"
801
- height="24"
802
- viewBox="0 0 256 256"
803
- >
804
- <path
805
- 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"
806
- opacity="0.2"
807
- ></path>
808
- <path
809
- 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"
810
- ></path>
811
- </svg>
812
- `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
813
- }
814
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TerminalIconComponent, decorators: [{
815
- type: Component,
816
- args: [{
817
- selector: 'ndt-terminal-icon',
818
- standalone: true,
819
- changeDetection: ChangeDetectionStrategy.OnPush,
820
- template: `
821
- <svg
822
- [attr.fill]="fill()"
823
- xmlns="http://www.w3.org/2000/svg"
824
- width="24"
825
- height="24"
826
- viewBox="0 0 256 256"
827
- >
828
- <path
829
- 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"
830
- opacity="0.2"
831
- ></path>
832
- <path
833
- 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"
834
- ></path>
835
- </svg>
836
- `,
837
- }]
838
- }] });
839
-
840
- class ToggleLeftIconComponent {
841
- fill = input('#FFFF');
842
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ToggleLeftIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
843
- static ɵ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: `
844
- <svg
845
- [attr.fill]="fill()"
846
- xmlns="http://www.w3.org/2000/svg"
847
- width="24"
848
- height="24"
849
- viewBox="0 0 256 256"
850
- >
851
- <path
852
- d="M112,128A32,32,0,1,1,80,96,32,32,0,0,1,112,128Z"
853
- opacity="0.2"
854
- ></path>
855
- <path
856
- 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"
857
- ></path>
858
- </svg>
859
- `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
860
- }
861
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ToggleLeftIconComponent, decorators: [{
862
- type: Component,
863
- args: [{
864
- selector: 'ndt-toggle-left-icon',
865
- standalone: true,
866
- changeDetection: ChangeDetectionStrategy.OnPush,
867
- template: `
868
- <svg
869
- [attr.fill]="fill()"
870
- xmlns="http://www.w3.org/2000/svg"
871
- width="24"
872
- height="24"
873
- viewBox="0 0 256 256"
874
- >
875
- <path
876
- d="M112,128A32,32,0,1,1,80,96,32,32,0,0,1,112,128Z"
877
- opacity="0.2"
878
- ></path>
879
- <path
880
- 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"
881
- ></path>
882
- </svg>
883
- `,
884
- }]
885
- }] });
886
-
887
- class UsersIconComponent {
888
- fill = input('#FFFF');
889
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: UsersIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
890
- static ɵ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: `
891
- <svg
892
- [attr.fill]="fill()"
893
- xmlns="http://www.w3.org/2000/svg"
894
- width="24"
895
- height="24"
896
- viewBox="0 0 256 256"
897
- >
898
- <path
899
- 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"
900
- opacity="0.2"
901
- ></path>
902
- <path
903
- 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"
904
- ></path>
905
- </svg>
906
- `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
907
- }
908
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: UsersIconComponent, decorators: [{
909
- type: Component,
910
- args: [{
911
- selector: 'ndt-users-icon',
912
- standalone: true,
913
- changeDetection: ChangeDetectionStrategy.OnPush,
914
- template: `
915
- <svg
916
- [attr.fill]="fill()"
917
- xmlns="http://www.w3.org/2000/svg"
918
- width="24"
919
- height="24"
920
- viewBox="0 0 256 256"
921
- >
922
- <path
923
- 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"
924
- opacity="0.2"
925
- ></path>
926
- <path
927
- 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"
928
- ></path>
929
- </svg>
930
- `,
931
- }]
932
- }] });
933
-
934
- class DevToolbarIconComponent {
935
- stateService = inject(DevToolbarStateService);
936
- name = input.required();
937
- fill = computed(() => this.stateService.theme() === 'dark' ? '#FFFFFF' : '#000000');
938
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
939
- static ɵ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: `
940
- @switch (name()) {
941
- @case ('angular') {
942
- <ndt-angular-icon />
943
- }
944
- @case ('bug') {
945
- <ndt-bug-icon [fill]="fill()" />
946
- }
947
- @case ('code') {
948
- <ndt-code-icon [fill]="fill()" />
949
- }
950
- @case ('database') {
951
- <ndt-database-icon [fill]="fill()" />
952
- }
953
- @case ('gauge') {
954
- <ndt-gauge-icon [fill]="fill()" />
955
- }
956
- @case ('gear') {
957
- <ndt-gear-icon [fill]="fill()" />
958
- }
959
- @case ('git-branch') {
960
- <ndt-git-branch-icon [fill]="fill()" />
961
- }
962
- @case ('layout') {
963
- <ndt-layout-icon [fill]="fill()" />
964
- }
965
- @case ('lighting') {
966
- <ndt-lighting-icon [fill]="fill()" />
967
- }
968
- @case ('network') {
969
- <ndt-network-icon [fill]="fill()" />
970
- }
971
- @case ('puzzle') {
972
- <ndt-puzzle-icon [fill]="fill()" />
973
- }
974
- @case ('refresh') {
975
- <ndt-refresh-icon [fill]="fill()" />
976
- }
977
- @case ('star') {
978
- <ndt-star-icon [fill]="fill()" />
979
- }
980
- @case ('terminal') {
981
- <ndt-terminal-icon [fill]="fill()" />
982
- }
983
- @case ('toggle-left') {
984
- <ndt-toggle-left-icon [fill]="fill()" />
985
- }
986
- @case ('user') {
987
- <ndt-users-icon [fill]="fill()" />
988
- }
989
- @case ('sun') {
990
- <ndt-sun-icon [fill]="fill()" />
991
- }
992
- @case ('moon') {
993
- <ndt-moon-icon [fill]="fill()" />
994
- }
995
- }
996
- `, isInline: true, dependencies: [{ kind: "component", type: AngularIconComponent, selector: "ndt-angular-icon" }, { 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: 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: LayoutIconComponent, selector: "ndt-layout-icon", inputs: ["fill"] }, { kind: "component", type: LightingIconComponent, selector: "ndt-lighting-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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
997
- }
998
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarIconComponent, decorators: [{
999
- type: Component,
1000
- args: [{
1001
- selector: 'ndt-icon',
1002
- standalone: true,
1003
- imports: [
1004
- AngularIconComponent,
1005
- BugIconComponent,
1006
- CodeIconComponent,
1007
- DatabaseIconComponent,
1008
- GaugeIconComponent,
1009
- GearIconComponent,
1010
- GitBranchIconComponent,
1011
- LayoutIconComponent,
1012
- LightingIconComponent,
1013
- NetworkIconComponent,
1014
- PuzzleIconComponent,
1015
- RefreshIconComponent,
1016
- StarIconComponent,
1017
- TerminalIconComponent,
1018
- ToggleLeftIconComponent,
1019
- UsersIconComponent,
1020
- SunIconComponent,
1021
- MoonIconComponent,
1022
- ],
1023
- changeDetection: ChangeDetectionStrategy.OnPush,
1024
- template: `
1025
- @switch (name()) {
1026
- @case ('angular') {
1027
- <ndt-angular-icon />
1028
- }
1029
- @case ('bug') {
1030
- <ndt-bug-icon [fill]="fill()" />
1031
- }
1032
- @case ('code') {
1033
- <ndt-code-icon [fill]="fill()" />
1034
- }
1035
- @case ('database') {
1036
- <ndt-database-icon [fill]="fill()" />
1037
- }
1038
- @case ('gauge') {
1039
- <ndt-gauge-icon [fill]="fill()" />
1040
- }
1041
- @case ('gear') {
1042
- <ndt-gear-icon [fill]="fill()" />
1043
- }
1044
- @case ('git-branch') {
1045
- <ndt-git-branch-icon [fill]="fill()" />
1046
- }
1047
- @case ('layout') {
1048
- <ndt-layout-icon [fill]="fill()" />
1049
- }
1050
- @case ('lighting') {
1051
- <ndt-lighting-icon [fill]="fill()" />
1052
- }
1053
- @case ('network') {
1054
- <ndt-network-icon [fill]="fill()" />
1055
- }
1056
- @case ('puzzle') {
1057
- <ndt-puzzle-icon [fill]="fill()" />
1058
- }
1059
- @case ('refresh') {
1060
- <ndt-refresh-icon [fill]="fill()" />
1061
- }
1062
- @case ('star') {
1063
- <ndt-star-icon [fill]="fill()" />
1064
- }
1065
- @case ('terminal') {
1066
- <ndt-terminal-icon [fill]="fill()" />
1067
- }
1068
- @case ('toggle-left') {
1069
- <ndt-toggle-left-icon [fill]="fill()" />
1070
- }
1071
- @case ('user') {
1072
- <ndt-users-icon [fill]="fill()" />
1073
- }
1074
- @case ('sun') {
1075
- <ndt-sun-icon [fill]="fill()" />
1076
- }
1077
- @case ('moon') {
1078
- <ndt-moon-icon [fill]="fill()" />
1079
- }
1080
- }
1081
- `,
1082
- }]
1083
- }] });
1084
-
1085
- class DevToolbarToolButtonComponent {
1086
- // Injects
1087
- state = inject(DevToolbarStateService);
1088
- elementRef = inject(ElementRef);
1089
- // Inputs
1090
- title = input.required();
1091
- toolId = input.required();
1092
- // Outputs
1093
- // eslint-disable-next-line @angular-eslint/no-output-native
1094
- click = output();
1095
- // Signals
1096
- isActive = computed(() => this.state.activeToolId() === this.toolId());
1097
- isToolbarVisible = this.state.isVisible;
1098
- isFocused = signal(false);
1099
- tooltip = computed(() => this.elementRef.nativeElement.parentElement?.getAttribute('data-tooltip') ?? '');
1100
- isTooltipVisible = computed(() => this.tooltip() && !this.isActive());
1101
- // Properties
1102
- tooltipState = false;
1103
- hideDelay = 3000;
1104
- // Public methods
1105
- onClick() {
1106
- this.isFocused.set(false);
1107
- this.click.emit();
1108
- }
1109
- onMouseEnter() {
1110
- this.tooltipState = true;
1111
- }
1112
- onMouseLeave() {
1113
- this.tooltipState = false;
1114
- }
1115
- onEscape() {
1116
- this.isFocused.set(false);
1117
- }
1118
- onFocus() {
1119
- this.isFocused.set(true);
1120
- }
1121
- onBlur() {
1122
- this.isFocused.set(false);
1123
- }
1124
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarToolButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1125
- static ɵ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: { click: "click" }, ngImport: i0, template: `
1126
- <button
1127
- class="tool-button"
1128
- [class.tool-button--toolbar-visible]="isToolbarVisible()"
1129
- [class.tool-button--active]="isActive()"
1130
- [class.tool-button--focus]="isFocused()"
1131
- (mouseenter)="onMouseEnter()"
1132
- (focusin)="onFocus()"
1133
- (focusout)="onBlur()"
1134
- (mouseleave)="onMouseLeave()"
1135
- (keydown.escape)="onEscape()"
1136
- >
1137
- @if (isTooltipVisible()) {
1138
- <span
1139
- class="tooltip"
1140
- [@tooltipAnimation]="tooltipState ? 'visible' : 'hidden'"
1141
- >
1142
- {{ tooltip() }}
1143
- </span>
1144
- }
1145
- <ng-content />
1146
- </button>
1147
- `, isInline: true, styles: [".dev-toolbar{--devtools-border-radius-small: 4px;--devtools-border-radius-medium: 8px;--devtools-border-radius-large: 12px;--devtools-transition-default: all .2s ease-out;--devtools-transition-smooth: all .2s ease-in-out;--devtools-bg-primary: rgb(255, 255, 255);--devtools-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--devtools-text-primary: rgb(17, 24, 39);--devtools-text-secondary: rgb(55, 65, 81);--devtools-text-muted: rgb(107, 114, 128);--devtools-border-primary: #e5e7eb;--devtools-border-subtle: rgba(17, 24, 39, .1);--devtools-hover-bg: rgba(17, 24, 39, .05);--devtools-hover-danger: rgb(239, 68, 68);--devtools-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--devtools-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);--devtools-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);--devtools-spacing-xs: 4px;--devtools-spacing-sm: 8px;--devtools-spacing-md: 16px;--devtools-window-padding: 24px;--devtools-font-size-xs: .75rem;--devtools-font-size-sm: .875rem;--devtools-font-size-md: 1rem;--devtools-font-size-lg: 1.25rem;--devtools-font-size-xl: 2rem;--devtools-background-secondary: var(--devtools-bg-primary);--devtools-background-hover: var(--devtools-hover-bg);--devtools-primary: #df30d4;--devtools-text-on-primary: rgb(255, 255, 255);--devtools-border-color: var(--devtools-border-primary);--devtools-note-background: rgb(219, 234, 254);--devtools-note-border: rgba(37, 99, 235, .2);--devtools-warning-background: rgb(254, 249, 195);--devtools-warning-border: rgba(202, 138, 4, .2);--devtools-error-background: rgb(254, 226, 226);--devtools-error-border: rgba(220, 38, 38, .2)}.dev-toolbar h1,.dev-toolbar h2,.dev-toolbar h3,.dev-toolbar h4,.dev-toolbar h5{font-weight:600;color:var(--devtools-text-primary)}.dev-toolbar h1{font-size:var(--devtools-font-size-xl)}.dev-toolbar h2{font-size:var(--devtools-font-size-lg)}.dev-toolbar h3{font-size:var(--devtools-font-size-md)}.dev-toolbar h4{font-size:var(--devtools-font-size-sm)}.dev-toolbar h5{font-size:var(--devtools-font-size-xs)}.dev-toolbar hr{border:1px solid var(--devtools-border-subtle);margin:1em 0}.dev-toolbar p{line-height:1.5em}.dev-toolbar[data-theme=dark]{--devtools-bg-primary: rgb(17, 24, 39);--devtools-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--devtools-text-primary: rgb(255, 255, 255);--devtools-text-secondary: rgb(229, 231, 235);--devtools-text-muted: rgb(156, 163, 175);--devtools-border-primary: #343841;--devtools-border-subtle: rgba(255, 255, 255, .1);--devtools-hover-bg: rgba(255, 255, 255, .12);--devtools-hover-danger: rgb(220, 38, 38);--devtools-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--devtools-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);--devtools-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);--devtools-note-background: rgba(37, 99, 235, .15);--devtools-note-border: rgba(37, 99, 235, .3);--devtools-warning-background: rgba(202, 138, 4, .15);--devtools-warning-border: rgba(202, 138, 4, .3);--devtools-error-background: rgba(220, 38, 38, .15);--devtools-error-border: rgba(220, 38, 38, .3)}.tool-button{display:flex;justify-content:center;align-items:center;width:44px;height:40px;border:0;background:transparent;color:var(--devtools-text-primary);transition:var(--devtools-transition-default);cursor:pointer;opacity:.5;position:relative}.tool-button:hover{background:var(--devtools-hover-bg);opacity:1}.tool-button--toolbar-visible{background:transparent;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(--devtools-hover-danger);color:var(--devtools-text-primary);border-radius:var(--devtools-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(--devtools-bg-primary);color:var(--devtools-text-primary);padding:.5rem .75rem;border-radius:var(--devtools-border-radius-medium);font-size:.75rem;white-space:nowrap;pointer-events:none;z-index:1000;box-shadow:var(--devtools-shadow-tooltip)}\n"], animations: [
1148
- trigger('tooltipAnimation', [
1149
- state('hidden', style({
1150
- opacity: 0,
1151
- transform: 'translateX(-50%) translateY(1rem)',
1152
- })),
1153
- state('visible', style({
1154
- opacity: 1,
1155
- transform: 'translateX(-50%) translateY(0)',
1156
- })),
1157
- transition('hidden => visible', [animate('200ms ease-out')]),
1158
- transition('visible => hidden', [animate('150ms ease-in')]),
1159
- ]),
1160
- ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1161
- }
1162
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarToolButtonComponent, decorators: [{
1163
- type: Component,
1164
- args: [{ selector: 'ndt-tool-button', standalone: true, template: `
1165
- <button
1166
- class="tool-button"
1167
- [class.tool-button--toolbar-visible]="isToolbarVisible()"
1168
- [class.tool-button--active]="isActive()"
1169
- [class.tool-button--focus]="isFocused()"
1170
- (mouseenter)="onMouseEnter()"
1171
- (focusin)="onFocus()"
1172
- (focusout)="onBlur()"
1173
- (mouseleave)="onMouseLeave()"
1174
- (keydown.escape)="onEscape()"
1175
- >
1176
- @if (isTooltipVisible()) {
1177
- <span
1178
- class="tooltip"
1179
- [@tooltipAnimation]="tooltipState ? 'visible' : 'hidden'"
1180
- >
1181
- {{ tooltip() }}
1182
- </span>
1183
- }
1184
- <ng-content />
1185
- </button>
1186
- `, animations: [
1187
- trigger('tooltipAnimation', [
1188
- state('hidden', style({
1189
- opacity: 0,
1190
- transform: 'translateX(-50%) translateY(1rem)',
1191
- })),
1192
- state('visible', style({
1193
- opacity: 1,
1194
- transform: 'translateX(-50%) translateY(0)',
1195
- })),
1196
- transition('hidden => visible', [animate('200ms ease-out')]),
1197
- transition('visible => hidden', [animate('150ms ease-in')]),
1198
- ]),
1199
- ], changeDetection: ChangeDetectionStrategy.OnPush, styles: [".dev-toolbar{--devtools-border-radius-small: 4px;--devtools-border-radius-medium: 8px;--devtools-border-radius-large: 12px;--devtools-transition-default: all .2s ease-out;--devtools-transition-smooth: all .2s ease-in-out;--devtools-bg-primary: rgb(255, 255, 255);--devtools-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--devtools-text-primary: rgb(17, 24, 39);--devtools-text-secondary: rgb(55, 65, 81);--devtools-text-muted: rgb(107, 114, 128);--devtools-border-primary: #e5e7eb;--devtools-border-subtle: rgba(17, 24, 39, .1);--devtools-hover-bg: rgba(17, 24, 39, .05);--devtools-hover-danger: rgb(239, 68, 68);--devtools-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--devtools-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);--devtools-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);--devtools-spacing-xs: 4px;--devtools-spacing-sm: 8px;--devtools-spacing-md: 16px;--devtools-window-padding: 24px;--devtools-font-size-xs: .75rem;--devtools-font-size-sm: .875rem;--devtools-font-size-md: 1rem;--devtools-font-size-lg: 1.25rem;--devtools-font-size-xl: 2rem;--devtools-background-secondary: var(--devtools-bg-primary);--devtools-background-hover: var(--devtools-hover-bg);--devtools-primary: #df30d4;--devtools-text-on-primary: rgb(255, 255, 255);--devtools-border-color: var(--devtools-border-primary);--devtools-note-background: rgb(219, 234, 254);--devtools-note-border: rgba(37, 99, 235, .2);--devtools-warning-background: rgb(254, 249, 195);--devtools-warning-border: rgba(202, 138, 4, .2);--devtools-error-background: rgb(254, 226, 226);--devtools-error-border: rgba(220, 38, 38, .2)}.dev-toolbar h1,.dev-toolbar h2,.dev-toolbar h3,.dev-toolbar h4,.dev-toolbar h5{font-weight:600;color:var(--devtools-text-primary)}.dev-toolbar h1{font-size:var(--devtools-font-size-xl)}.dev-toolbar h2{font-size:var(--devtools-font-size-lg)}.dev-toolbar h3{font-size:var(--devtools-font-size-md)}.dev-toolbar h4{font-size:var(--devtools-font-size-sm)}.dev-toolbar h5{font-size:var(--devtools-font-size-xs)}.dev-toolbar hr{border:1px solid var(--devtools-border-subtle);margin:1em 0}.dev-toolbar p{line-height:1.5em}.dev-toolbar[data-theme=dark]{--devtools-bg-primary: rgb(17, 24, 39);--devtools-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--devtools-text-primary: rgb(255, 255, 255);--devtools-text-secondary: rgb(229, 231, 235);--devtools-text-muted: rgb(156, 163, 175);--devtools-border-primary: #343841;--devtools-border-subtle: rgba(255, 255, 255, .1);--devtools-hover-bg: rgba(255, 255, 255, .12);--devtools-hover-danger: rgb(220, 38, 38);--devtools-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--devtools-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);--devtools-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);--devtools-note-background: rgba(37, 99, 235, .15);--devtools-note-border: rgba(37, 99, 235, .3);--devtools-warning-background: rgba(202, 138, 4, .15);--devtools-warning-border: rgba(202, 138, 4, .3);--devtools-error-background: rgba(220, 38, 38, .15);--devtools-error-border: rgba(220, 38, 38, .3)}.tool-button{display:flex;justify-content:center;align-items:center;width:44px;height:40px;border:0;background:transparent;color:var(--devtools-text-primary);transition:var(--devtools-transition-default);cursor:pointer;opacity:.5;position:relative}.tool-button:hover{background:var(--devtools-hover-bg);opacity:1}.tool-button--toolbar-visible{background:transparent;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(--devtools-hover-danger);color:var(--devtools-text-primary);border-radius:var(--devtools-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(--devtools-bg-primary);color:var(--devtools-text-primary);padding:.5rem .75rem;border-radius:var(--devtools-border-radius-medium);font-size:.75rem;white-space:nowrap;pointer-events:none;z-index:1000;box-shadow:var(--devtools-shadow-tooltip)}\n"] }]
1200
- }] });
1201
-
1202
- class DevToolbarInputComponent {
1203
- value = model.required();
1204
- type = input('text');
1205
- placeholder = input('');
1206
- ariaLabel = input('');
1207
- inputClass = input('input');
1208
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1209
- static ɵ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: `
1210
- <input
1211
- [attr.aria-label]="ariaLabel()"
1212
- [type]="type()"
1213
- [class]="inputClass()"
1214
- [ngModel]="value()"
1215
- [placeholder]="placeholder()"
1216
- (ngModelChange)="value.set($event)"
1217
- />
1218
- `, isInline: true, styles: [":host{display:block}.input{width:100%;padding:var(--devtools-spacing-sm) var(--devtools-spacing-md);border:1px solid var(--devtools-border-primary);border-radius:var(--devtools-border-radius-small);background-color:var(--devtools-bg-primary);color:var(--devtools-text-primary);font-size:var(--devtools-font-size-sm);transition:var(--devtools-transition-default)}.input::placeholder{color:var(--devtools-text-muted)}.input:focus{outline:none;border-color:var(--devtools-primary);box-shadow:0 0 0 1px var(--devtools-primary)}.input:disabled{background-color:var(--devtools-background-secondary);cursor:not-allowed;color:var(--devtools-text-muted)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1219
- }
1220
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInputComponent, decorators: [{
1221
- type: Component,
1222
- args: [{ selector: 'ndt-input', standalone: true, imports: [FormsModule], template: `
1223
- <input
1224
- [attr.aria-label]="ariaLabel()"
1225
- [type]="type()"
1226
- [class]="inputClass()"
1227
- [ngModel]="value()"
1228
- [placeholder]="placeholder()"
1229
- (ngModelChange)="value.set($event)"
1230
- />
1231
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.input{width:100%;padding:var(--devtools-spacing-sm) var(--devtools-spacing-md);border:1px solid var(--devtools-border-primary);border-radius:var(--devtools-border-radius-small);background-color:var(--devtools-bg-primary);color:var(--devtools-text-primary);font-size:var(--devtools-font-size-sm);transition:var(--devtools-transition-default)}.input::placeholder{color:var(--devtools-text-muted)}.input:focus{outline:none;border-color:var(--devtools-primary);box-shadow:0 0 0 1px var(--devtools-primary)}.input:disabled{background-color:var(--devtools-background-secondary);cursor:not-allowed;color:var(--devtools-text-muted)}\n"] }]
1232
- }] });
1233
-
1234
- class DevToolbarSelectComponent {
1235
- value = model();
1236
- options = input.required();
1237
- ariaLabel = input('');
1238
- label = input('');
1239
- size = input('medium');
1240
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1241
- static ɵ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: `
1242
- <select
1243
- class="select"
1244
- [attr.aria-label]="ariaLabel()"
1245
- [class.small]="size() === 'small'"
1246
- [ngModel]="value()"
1247
- (ngModelChange)="value.set($event)"
1248
- >
1249
- @for (option of options(); track option.value) {
1250
- <option role="option" [value]="option.value">{{ option.label }}</option>
1251
- }
1252
- </select>
1253
- `, isInline: true, styles: [".select{width:100%;cursor:pointer;min-width:100px;display:flex;align-items:center;padding:var(--devtools-spacing-sm) var(--devtools-spacing-md);border:1px solid var(--devtools-border-primary);border-radius:var(--devtools-border-radius-small);background-color:var(--devtools-bg-primary);color:var(--devtools-text-primary);font-size:var(--devtools-font-size-sm);gap:var(--devtools-spacing-xs);appearance:none;background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E);background-repeat:no-repeat;background-position:right var(--devtools-spacing-sm) center;background-size:.65em auto;padding-right:2.5em;transition:var(--devtools-transition-default)}.select.small{padding:calc(var(--devtools-spacing-xs) / 2) var(--devtools-spacing-sm);font-size:var(--devtools-font-size-sm);height:24px;padding-right:2em}.select:hover{background-color:var(--devtools-background-hover)}.select:focus{outline:none;border-color:var(--devtools-primary);box-shadow:0 0 0 1px var(--devtools-primary)}.select:disabled{opacity:.6;cursor:not-allowed;background-color:var(--devtools-background-disabled)}.select:invalid{border-color:var(--devtools-border-error, #ff4444)}@-moz-document url-prefix(){.select{text-indent:.01px;text-overflow:\"\";padding-right:2.5em}}.select::-ms-expand{display:none}select::-ms-expand{display:none}select:-webkit-autofill,select:-webkit-autofill:hover,select:-webkit-autofill:focus{-webkit-box-shadow:0 0 0px 1000px var(--devtools-bg-primary) inset!important;-webkit-text-fill-color:var(--devtools-text-primary)!important}@-moz-document url-prefix(){.select option{background-color:var(--devtools-bg-primary)!important;color:var(--devtools-text-primary)!important}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1254
- }
1255
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarSelectComponent, decorators: [{
1256
- type: Component,
1257
- args: [{ selector: 'ndt-select', standalone: true, imports: [FormsModule], template: `
1258
- <select
1259
- class="select"
1260
- [attr.aria-label]="ariaLabel()"
1261
- [class.small]="size() === 'small'"
1262
- [ngModel]="value()"
1263
- (ngModelChange)="value.set($event)"
1264
- >
1265
- @for (option of options(); track option.value) {
1266
- <option role="option" [value]="option.value">{{ option.label }}</option>
1267
- }
1268
- </select>
1269
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".select{width:100%;cursor:pointer;min-width:100px;display:flex;align-items:center;padding:var(--devtools-spacing-sm) var(--devtools-spacing-md);border:1px solid var(--devtools-border-primary);border-radius:var(--devtools-border-radius-small);background-color:var(--devtools-bg-primary);color:var(--devtools-text-primary);font-size:var(--devtools-font-size-sm);gap:var(--devtools-spacing-xs);appearance:none;background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E);background-repeat:no-repeat;background-position:right var(--devtools-spacing-sm) center;background-size:.65em auto;padding-right:2.5em;transition:var(--devtools-transition-default)}.select.small{padding:calc(var(--devtools-spacing-xs) / 2) var(--devtools-spacing-sm);font-size:var(--devtools-font-size-sm);height:24px;padding-right:2em}.select:hover{background-color:var(--devtools-background-hover)}.select:focus{outline:none;border-color:var(--devtools-primary);box-shadow:0 0 0 1px var(--devtools-primary)}.select:disabled{opacity:.6;cursor:not-allowed;background-color:var(--devtools-background-disabled)}.select:invalid{border-color:var(--devtools-border-error, #ff4444)}@-moz-document url-prefix(){.select{text-indent:.01px;text-overflow:\"\";padding-right:2.5em}}.select::-ms-expand{display:none}select::-ms-expand{display:none}select:-webkit-autofill,select:-webkit-autofill:hover,select:-webkit-autofill:focus{-webkit-box-shadow:0 0 0px 1000px var(--devtools-bg-primary) inset!important;-webkit-text-fill-color:var(--devtools-text-primary)!important}@-moz-document url-prefix(){.select option{background-color:var(--devtools-bg-primary)!important;color:var(--devtools-text-primary)!important}}\n"] }]
1270
- }] });
1271
-
1272
- class DevToolbarWindowComponent {
1273
- devToolbarStateService = inject(DevToolbarStateService);
1274
- config = input.required();
1275
- close = output();
1276
- maximize = output();
1277
- minimize = output();
1278
- theme = computed(() => this.devToolbarStateService.theme());
1279
- onClose() {
1280
- this.close.emit();
1281
- }
1282
- onMaximize() {
1283
- this.maximize.emit();
1284
- }
1285
- onMinimize() {
1286
- this.minimize.emit();
1287
- }
1288
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarWindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1289
- static ɵ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: `
1290
- <div class="window dev-toolbar" [attr.data-theme]="theme()">
1291
- <div class="header">
1292
- <div class="header__content">
1293
- <div class="header__title">
1294
- <h1>{{ config().title }}</h1>
1295
- @if (config().isBeta) {
1296
- <span class="beta-tag">BETA</span>
1297
- }
1298
- </div>
1299
- <p class="header__description">{{ config().description }}</p>
1300
- </div>
1301
- <div class="header__controls">
1302
- @if (config().isMinimizable) {
1303
- <button
1304
- aria-label="Minimize"
1305
- class="control"
1306
- (click)="onMinimize()"
1307
- >
1308
-
1309
- </button>
1310
- }
1311
- @if (config().isMaximizable) {
1312
- <button
1313
- aria-label="Maximize"
1314
- class="control"
1315
- (click)="onMaximize()"
1316
- >
1317
-
1318
- </button>
1319
- }
1320
- @if (config().isClosable) {
1321
- <button
1322
- aria-label="Close"
1323
- class="control control--close"
1324
- (click)="onClose()"
1325
- >
1326
- ×
1327
- </button>
1328
- }
1329
- </div>
1330
- </div>
1331
-
1332
- <div class="divider"></div>
1333
- <div class="content">
1334
- <ng-content></ng-content>
1335
- </div>
1336
- </div>
1337
- `, isInline: true, styles: [".dev-toolbar{--devtools-border-radius-small: 4px;--devtools-border-radius-medium: 8px;--devtools-border-radius-large: 12px;--devtools-transition-default: all .2s ease-out;--devtools-transition-smooth: all .2s ease-in-out;--devtools-bg-primary: rgb(255, 255, 255);--devtools-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--devtools-text-primary: rgb(17, 24, 39);--devtools-text-secondary: rgb(55, 65, 81);--devtools-text-muted: rgb(107, 114, 128);--devtools-border-primary: #e5e7eb;--devtools-border-subtle: rgba(17, 24, 39, .1);--devtools-hover-bg: rgba(17, 24, 39, .05);--devtools-hover-danger: rgb(239, 68, 68);--devtools-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--devtools-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);--devtools-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);--devtools-spacing-xs: 4px;--devtools-spacing-sm: 8px;--devtools-spacing-md: 16px;--devtools-window-padding: 24px;--devtools-font-size-xs: .75rem;--devtools-font-size-sm: .875rem;--devtools-font-size-md: 1rem;--devtools-font-size-lg: 1.25rem;--devtools-font-size-xl: 2rem;--devtools-background-secondary: var(--devtools-bg-primary);--devtools-background-hover: var(--devtools-hover-bg);--devtools-primary: #df30d4;--devtools-text-on-primary: rgb(255, 255, 255);--devtools-border-color: var(--devtools-border-primary);--devtools-note-background: rgb(219, 234, 254);--devtools-note-border: rgba(37, 99, 235, .2);--devtools-warning-background: rgb(254, 249, 195);--devtools-warning-border: rgba(202, 138, 4, .2);--devtools-error-background: rgb(254, 226, 226);--devtools-error-border: rgba(220, 38, 38, .2)}.dev-toolbar h1,.dev-toolbar h2,.dev-toolbar h3,.dev-toolbar h4,.dev-toolbar h5{font-weight:600;color:var(--devtools-text-primary)}.dev-toolbar h1{font-size:var(--devtools-font-size-xl)}.dev-toolbar h2{font-size:var(--devtools-font-size-lg)}.dev-toolbar h3{font-size:var(--devtools-font-size-md)}.dev-toolbar h4{font-size:var(--devtools-font-size-sm)}.dev-toolbar h5{font-size:var(--devtools-font-size-xs)}.dev-toolbar hr{border:1px solid var(--devtools-border-subtle);margin:1em 0}.dev-toolbar p{line-height:1.5em}.dev-toolbar[data-theme=dark]{--devtools-bg-primary: rgb(17, 24, 39);--devtools-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--devtools-text-primary: rgb(255, 255, 255);--devtools-text-secondary: rgb(229, 231, 235);--devtools-text-muted: rgb(156, 163, 175);--devtools-border-primary: #343841;--devtools-border-subtle: rgba(255, 255, 255, .1);--devtools-hover-bg: rgba(255, 255, 255, .12);--devtools-hover-danger: rgb(220, 38, 38);--devtools-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--devtools-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);--devtools-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);--devtools-note-background: rgba(37, 99, 235, .15);--devtools-note-border: rgba(37, 99, 235, .3);--devtools-warning-background: rgba(202, 138, 4, .15);--devtools-warning-border: rgba(202, 138, 4, .3);--devtools-error-background: rgba(220, 38, 38, .15);--devtools-error-border: rgba(220, 38, 38, .3)}:host{display:block;width:100%}.window{box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%;background:var(--devtools-bg-primary);border:1px solid var(--devtools-border-primary);border-radius:var(--devtools-border-radius-large);padding:var(--devtools-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(--devtools-text-secondary);z-index:999999999;box-shadow:var(--devtools-shadow-window)}.header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start}.header__content{display:flex;flex-direction:column}.header__controls{display:flex;gap:var(--devtools-spacing-sm)}.header__description{font-size:var(--devtools-font-size-sm);color:var(--devtools-text-muted)}.header__title{display:flex;align-items:center;gap:var(--devtools-spacing-sm)}.header__title .beta-tag{font-size:var(--devtools-font-size-xxs, .65rem);background:var(--devtools-purple, #8b5cf6);color:var(--devtools-text-on-primary);padding:1px 4px;margin-left:var(--devtools-spacing-xs);border-radius:var(--devtools-border-radius-small);font-weight:500;text-transform:uppercase;letter-spacing:.5px}.content{flex:1;overflow:auto}.divider{height:1px;background-color:var(--devtools-border-primary);margin-bottom:var(--devtools-spacing-md);margin-top:var(--devtools-spacing-md)}.control{background:none;border:none;color:var(--devtools-text-secondary);cursor:pointer;padding:var(--devtools-spacing-xs) var(--devtools-spacing-sm);border-radius:var(--devtools-border-radius-small);font-size:var(--devtools-font-size-md);line-height:1;transition:var(--devtools-transition-smooth)}.control:hover{background:var(--devtools-hover-bg);color:var(--devtools-text-primary)}.control--close:hover{background:var(--devtools-hover-danger)}\n"] });
1338
- }
1339
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarWindowComponent, decorators: [{
1340
- type: Component,
1341
- args: [{ selector: 'ndt-window', standalone: true, template: `
1342
- <div class="window dev-toolbar" [attr.data-theme]="theme()">
1343
- <div class="header">
1344
- <div class="header__content">
1345
- <div class="header__title">
1346
- <h1>{{ config().title }}</h1>
1347
- @if (config().isBeta) {
1348
- <span class="beta-tag">BETA</span>
1349
- }
1350
- </div>
1351
- <p class="header__description">{{ config().description }}</p>
1352
- </div>
1353
- <div class="header__controls">
1354
- @if (config().isMinimizable) {
1355
- <button
1356
- aria-label="Minimize"
1357
- class="control"
1358
- (click)="onMinimize()"
1359
- >
1360
-
1361
- </button>
1362
- }
1363
- @if (config().isMaximizable) {
1364
- <button
1365
- aria-label="Maximize"
1366
- class="control"
1367
- (click)="onMaximize()"
1368
- >
1369
-
1370
- </button>
1371
- }
1372
- @if (config().isClosable) {
1373
- <button
1374
- aria-label="Close"
1375
- class="control control--close"
1376
- (click)="onClose()"
1377
- >
1378
- ×
1379
- </button>
1380
- }
1381
- </div>
1382
- </div>
1383
-
1384
- <div class="divider"></div>
1385
- <div class="content">
1386
- <ng-content></ng-content>
1387
- </div>
1388
- </div>
1389
- `, styles: [".dev-toolbar{--devtools-border-radius-small: 4px;--devtools-border-radius-medium: 8px;--devtools-border-radius-large: 12px;--devtools-transition-default: all .2s ease-out;--devtools-transition-smooth: all .2s ease-in-out;--devtools-bg-primary: rgb(255, 255, 255);--devtools-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--devtools-text-primary: rgb(17, 24, 39);--devtools-text-secondary: rgb(55, 65, 81);--devtools-text-muted: rgb(107, 114, 128);--devtools-border-primary: #e5e7eb;--devtools-border-subtle: rgba(17, 24, 39, .1);--devtools-hover-bg: rgba(17, 24, 39, .05);--devtools-hover-danger: rgb(239, 68, 68);--devtools-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--devtools-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);--devtools-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);--devtools-spacing-xs: 4px;--devtools-spacing-sm: 8px;--devtools-spacing-md: 16px;--devtools-window-padding: 24px;--devtools-font-size-xs: .75rem;--devtools-font-size-sm: .875rem;--devtools-font-size-md: 1rem;--devtools-font-size-lg: 1.25rem;--devtools-font-size-xl: 2rem;--devtools-background-secondary: var(--devtools-bg-primary);--devtools-background-hover: var(--devtools-hover-bg);--devtools-primary: #df30d4;--devtools-text-on-primary: rgb(255, 255, 255);--devtools-border-color: var(--devtools-border-primary);--devtools-note-background: rgb(219, 234, 254);--devtools-note-border: rgba(37, 99, 235, .2);--devtools-warning-background: rgb(254, 249, 195);--devtools-warning-border: rgba(202, 138, 4, .2);--devtools-error-background: rgb(254, 226, 226);--devtools-error-border: rgba(220, 38, 38, .2)}.dev-toolbar h1,.dev-toolbar h2,.dev-toolbar h3,.dev-toolbar h4,.dev-toolbar h5{font-weight:600;color:var(--devtools-text-primary)}.dev-toolbar h1{font-size:var(--devtools-font-size-xl)}.dev-toolbar h2{font-size:var(--devtools-font-size-lg)}.dev-toolbar h3{font-size:var(--devtools-font-size-md)}.dev-toolbar h4{font-size:var(--devtools-font-size-sm)}.dev-toolbar h5{font-size:var(--devtools-font-size-xs)}.dev-toolbar hr{border:1px solid var(--devtools-border-subtle);margin:1em 0}.dev-toolbar p{line-height:1.5em}.dev-toolbar[data-theme=dark]{--devtools-bg-primary: rgb(17, 24, 39);--devtools-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--devtools-text-primary: rgb(255, 255, 255);--devtools-text-secondary: rgb(229, 231, 235);--devtools-text-muted: rgb(156, 163, 175);--devtools-border-primary: #343841;--devtools-border-subtle: rgba(255, 255, 255, .1);--devtools-hover-bg: rgba(255, 255, 255, .12);--devtools-hover-danger: rgb(220, 38, 38);--devtools-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--devtools-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);--devtools-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);--devtools-note-background: rgba(37, 99, 235, .15);--devtools-note-border: rgba(37, 99, 235, .3);--devtools-warning-background: rgba(202, 138, 4, .15);--devtools-warning-border: rgba(202, 138, 4, .3);--devtools-error-background: rgba(220, 38, 38, .15);--devtools-error-border: rgba(220, 38, 38, .3)}:host{display:block;width:100%}.window{box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%;background:var(--devtools-bg-primary);border:1px solid var(--devtools-border-primary);border-radius:var(--devtools-border-radius-large);padding:var(--devtools-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(--devtools-text-secondary);z-index:999999999;box-shadow:var(--devtools-shadow-window)}.header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start}.header__content{display:flex;flex-direction:column}.header__controls{display:flex;gap:var(--devtools-spacing-sm)}.header__description{font-size:var(--devtools-font-size-sm);color:var(--devtools-text-muted)}.header__title{display:flex;align-items:center;gap:var(--devtools-spacing-sm)}.header__title .beta-tag{font-size:var(--devtools-font-size-xxs, .65rem);background:var(--devtools-purple, #8b5cf6);color:var(--devtools-text-on-primary);padding:1px 4px;margin-left:var(--devtools-spacing-xs);border-radius:var(--devtools-border-radius-small);font-weight:500;text-transform:uppercase;letter-spacing:.5px}.content{flex:1;overflow:auto}.divider{height:1px;background-color:var(--devtools-border-primary);margin-bottom:var(--devtools-spacing-md);margin-top:var(--devtools-spacing-md)}.control{background:none;border:none;color:var(--devtools-text-secondary);cursor:pointer;padding:var(--devtools-spacing-xs) var(--devtools-spacing-sm);border-radius:var(--devtools-border-radius-small);font-size:var(--devtools-font-size-md);line-height:1;transition:var(--devtools-transition-smooth)}.control:hover{background:var(--devtools-hover-bg);color:var(--devtools-text-primary)}.control--close:hover{background:var(--devtools-hover-danger)}\n"] }]
1390
- }] });
1391
-
1392
- class DevToolbarToolComponent {
1393
- state = inject(DevToolbarStateService);
1394
- trigger;
1395
- buttonComponent;
1396
- windowConfig = input.required();
1397
- icon = input.required();
1398
- title = input.required();
1399
- isActive = computed(() => this.state.activeToolId() === this.windowConfig().id);
1400
- height = computed(() => {
1401
- switch (this.windowConfig().size) {
1402
- case 'tall':
1403
- return 620;
1404
- case 'medium':
1405
- return 480;
1406
- default:
1407
- return 400;
1408
- }
1409
- });
1410
- width = computed(() => {
1411
- switch (this.windowConfig().size) {
1412
- case 'tall':
1413
- return 520;
1414
- case 'medium':
1415
- return 480;
1416
- default:
1417
- return 400;
1418
- }
1419
- });
1420
- positions = computed(() => [
1421
- {
1422
- originX: 'center',
1423
- originY: 'center',
1424
- overlayX: 'center',
1425
- overlayY: 'center',
1426
- offsetY: -(Math.ceil(this.height() / 2) + 36),
1427
- },
1428
- ]);
1429
- onOpen() {
1430
- this.state.setActiveTool(this.windowConfig().id);
1431
- }
1432
- onClose() {
1433
- this.state.setActiveTool(null);
1434
- }
1435
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1436
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarToolComponent, isStandalone: true, selector: "ndt-toolbar-tool", inputs: { windowConfig: { classPropertyName: "windowConfig", publicName: "windowConfig", 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: "trigger", first: true, predicate: ["trigger"], descendants: true }], ngImport: i0, template: `
1437
- <div #trigger="cdkOverlayOrigin" class="dev-toolbar-tool" cdkOverlayOrigin>
1438
- <div
1439
- class="dev-toolbar-tool__icon"
1440
- (click)="onOpen()"
1441
- (keydown.enter)="onOpen()"
1442
- (keydown.space)="onOpen()"
1443
- tabindex="0"
1444
- >
1445
- <div [attr.data-tooltip]="title()">
1446
- @if (icon()) {
1447
- <ndt-tool-button [title]="title()" [toolId]="windowConfig().id">
1448
- <ndt-icon [name]="icon()" />
1449
- </ndt-tool-button>
1450
- } @else {
1451
- <ng-content select="ndt-tool-button"></ng-content>
1452
- }
1453
- </div>
1454
- </div>
1455
-
1456
- @if (isActive()) {
1457
- <ng-template
1458
- #contentTemplate
1459
- [cdkConnectedOverlayOrigin]="trigger"
1460
- [cdkConnectedOverlayOpen]="isActive()"
1461
- [cdkConnectedOverlayPositions]="positions()"
1462
- [cdkConnectedOverlayWidth]="width()"
1463
- [cdkConnectedOverlayHeight]="height()"
1464
- cdkConnectedOverlay
1465
- >
1466
- <ndt-window [config]="windowConfig()" (close)="onClose()">
1467
- <ng-content />
1468
- </ndt-window>
1469
- </ng-template>
1470
- }
1471
- </div>
1472
- `, isInline: true, styles: [".dev-toolbar{--devtools-border-radius-small: 4px;--devtools-border-radius-medium: 8px;--devtools-border-radius-large: 12px;--devtools-transition-default: all .2s ease-out;--devtools-transition-smooth: all .2s ease-in-out;--devtools-bg-primary: rgb(255, 255, 255);--devtools-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--devtools-text-primary: rgb(17, 24, 39);--devtools-text-secondary: rgb(55, 65, 81);--devtools-text-muted: rgb(107, 114, 128);--devtools-border-primary: #e5e7eb;--devtools-border-subtle: rgba(17, 24, 39, .1);--devtools-hover-bg: rgba(17, 24, 39, .05);--devtools-hover-danger: rgb(239, 68, 68);--devtools-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--devtools-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);--devtools-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);--devtools-spacing-xs: 4px;--devtools-spacing-sm: 8px;--devtools-spacing-md: 16px;--devtools-window-padding: 24px;--devtools-font-size-xs: .75rem;--devtools-font-size-sm: .875rem;--devtools-font-size-md: 1rem;--devtools-font-size-lg: 1.25rem;--devtools-font-size-xl: 2rem;--devtools-background-secondary: var(--devtools-bg-primary);--devtools-background-hover: var(--devtools-hover-bg);--devtools-primary: #df30d4;--devtools-text-on-primary: rgb(255, 255, 255);--devtools-border-color: var(--devtools-border-primary);--devtools-note-background: rgb(219, 234, 254);--devtools-note-border: rgba(37, 99, 235, .2);--devtools-warning-background: rgb(254, 249, 195);--devtools-warning-border: rgba(202, 138, 4, .2);--devtools-error-background: rgb(254, 226, 226);--devtools-error-border: rgba(220, 38, 38, .2)}.dev-toolbar h1,.dev-toolbar h2,.dev-toolbar h3,.dev-toolbar h4,.dev-toolbar h5{font-weight:600;color:var(--devtools-text-primary)}.dev-toolbar h1{font-size:var(--devtools-font-size-xl)}.dev-toolbar h2{font-size:var(--devtools-font-size-lg)}.dev-toolbar h3{font-size:var(--devtools-font-size-md)}.dev-toolbar h4{font-size:var(--devtools-font-size-sm)}.dev-toolbar h5{font-size:var(--devtools-font-size-xs)}.dev-toolbar hr{border:1px solid var(--devtools-border-subtle);margin:1em 0}.dev-toolbar p{line-height:1.5em}.dev-toolbar[data-theme=dark]{--devtools-bg-primary: rgb(17, 24, 39);--devtools-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--devtools-text-primary: rgb(255, 255, 255);--devtools-text-secondary: rgb(229, 231, 235);--devtools-text-muted: rgb(156, 163, 175);--devtools-border-primary: #343841;--devtools-border-subtle: rgba(255, 255, 255, .1);--devtools-hover-bg: rgba(255, 255, 255, .12);--devtools-hover-danger: rgb(220, 38, 38);--devtools-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--devtools-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);--devtools-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);--devtools-note-background: rgba(37, 99, 235, .15);--devtools-note-border: rgba(37, 99, 235, .3);--devtools-warning-background: rgba(202, 138, 4, .15);--devtools-warning-border: rgba(202, 138, 4, .3);--devtools-error-background: rgba(220, 38, 38, .15);--devtools-error-border: rgba(220, 38, 38, .3)}.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$1.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: ["click"] }, { kind: "component", type: DevToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1473
- }
1474
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarToolComponent, decorators: [{
1475
- type: Component,
1476
- args: [{ selector: 'ndt-toolbar-tool', standalone: true, imports: [
1477
- CdkConnectedOverlay,
1478
- OverlayModule,
1479
- DevToolbarWindowComponent,
1480
- DevToolbarToolButtonComponent,
1481
- DevToolbarIconComponent,
1482
- ], template: `
1483
- <div #trigger="cdkOverlayOrigin" class="dev-toolbar-tool" cdkOverlayOrigin>
1484
- <div
1485
- class="dev-toolbar-tool__icon"
1486
- (click)="onOpen()"
1487
- (keydown.enter)="onOpen()"
1488
- (keydown.space)="onOpen()"
1489
- tabindex="0"
1490
- >
1491
- <div [attr.data-tooltip]="title()">
1492
- @if (icon()) {
1493
- <ndt-tool-button [title]="title()" [toolId]="windowConfig().id">
1494
- <ndt-icon [name]="icon()" />
1495
- </ndt-tool-button>
1496
- } @else {
1497
- <ng-content select="ndt-tool-button"></ng-content>
1498
- }
1499
- </div>
1500
- </div>
1501
-
1502
- @if (isActive()) {
1503
- <ng-template
1504
- #contentTemplate
1505
- [cdkConnectedOverlayOrigin]="trigger"
1506
- [cdkConnectedOverlayOpen]="isActive()"
1507
- [cdkConnectedOverlayPositions]="positions()"
1508
- [cdkConnectedOverlayWidth]="width()"
1509
- [cdkConnectedOverlayHeight]="height()"
1510
- cdkConnectedOverlay
1511
- >
1512
- <ndt-window [config]="windowConfig()" (close)="onClose()">
1513
- <ng-content />
1514
- </ndt-window>
1515
- </ng-template>
1516
- }
1517
- </div>
1518
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".dev-toolbar{--devtools-border-radius-small: 4px;--devtools-border-radius-medium: 8px;--devtools-border-radius-large: 12px;--devtools-transition-default: all .2s ease-out;--devtools-transition-smooth: all .2s ease-in-out;--devtools-bg-primary: rgb(255, 255, 255);--devtools-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--devtools-text-primary: rgb(17, 24, 39);--devtools-text-secondary: rgb(55, 65, 81);--devtools-text-muted: rgb(107, 114, 128);--devtools-border-primary: #e5e7eb;--devtools-border-subtle: rgba(17, 24, 39, .1);--devtools-hover-bg: rgba(17, 24, 39, .05);--devtools-hover-danger: rgb(239, 68, 68);--devtools-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--devtools-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);--devtools-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);--devtools-spacing-xs: 4px;--devtools-spacing-sm: 8px;--devtools-spacing-md: 16px;--devtools-window-padding: 24px;--devtools-font-size-xs: .75rem;--devtools-font-size-sm: .875rem;--devtools-font-size-md: 1rem;--devtools-font-size-lg: 1.25rem;--devtools-font-size-xl: 2rem;--devtools-background-secondary: var(--devtools-bg-primary);--devtools-background-hover: var(--devtools-hover-bg);--devtools-primary: #df30d4;--devtools-text-on-primary: rgb(255, 255, 255);--devtools-border-color: var(--devtools-border-primary);--devtools-note-background: rgb(219, 234, 254);--devtools-note-border: rgba(37, 99, 235, .2);--devtools-warning-background: rgb(254, 249, 195);--devtools-warning-border: rgba(202, 138, 4, .2);--devtools-error-background: rgb(254, 226, 226);--devtools-error-border: rgba(220, 38, 38, .2)}.dev-toolbar h1,.dev-toolbar h2,.dev-toolbar h3,.dev-toolbar h4,.dev-toolbar h5{font-weight:600;color:var(--devtools-text-primary)}.dev-toolbar h1{font-size:var(--devtools-font-size-xl)}.dev-toolbar h2{font-size:var(--devtools-font-size-lg)}.dev-toolbar h3{font-size:var(--devtools-font-size-md)}.dev-toolbar h4{font-size:var(--devtools-font-size-sm)}.dev-toolbar h5{font-size:var(--devtools-font-size-xs)}.dev-toolbar hr{border:1px solid var(--devtools-border-subtle);margin:1em 0}.dev-toolbar p{line-height:1.5em}.dev-toolbar[data-theme=dark]{--devtools-bg-primary: rgb(17, 24, 39);--devtools-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--devtools-text-primary: rgb(255, 255, 255);--devtools-text-secondary: rgb(229, 231, 235);--devtools-text-muted: rgb(156, 163, 175);--devtools-border-primary: #343841;--devtools-border-subtle: rgba(255, 255, 255, .1);--devtools-hover-bg: rgba(255, 255, 255, .12);--devtools-hover-danger: rgb(220, 38, 38);--devtools-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--devtools-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);--devtools-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);--devtools-note-background: rgba(37, 99, 235, .15);--devtools-note-border: rgba(37, 99, 235, .3);--devtools-warning-background: rgba(202, 138, 4, .15);--devtools-warning-border: rgba(202, 138, 4, .3);--devtools-error-background: rgba(220, 38, 38, .15);--devtools-error-border: rgba(220, 38, 38, .3)}.tool{position:relative}.trigger{cursor:pointer}\n"] }]
1519
- }], propDecorators: { trigger: [{
1520
- type: ViewChild,
1521
- args: ['trigger']
1522
- }], buttonComponent: [{
1523
- type: ContentChild,
1524
- args: [DevToolbarToolButtonComponent]
1525
- }] } });
1526
-
1527
- class DevToolsStorageService {
1528
- prefix = 'ndt-';
1529
- set(key, value) {
1530
- localStorage.setItem(this.prefix + key, JSON.stringify(value));
1531
- }
1532
- get(key) {
1533
- const item = localStorage.getItem(this.prefix + key);
1534
- return item ? JSON.parse(item) : null;
1535
- }
1536
- remove(key) {
1537
- localStorage.removeItem(this.prefix + key);
1538
- }
1539
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolsStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
1540
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolsStorageService, providedIn: 'root' });
1541
- }
1542
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolsStorageService, decorators: [{
1543
- type: Injectable,
1544
- args: [{ providedIn: 'root' }]
1545
- }] });
1546
-
1547
- class DevToolbarFeatureFlagsService {
1548
- STORAGE_KEY = 'feature-flags';
1549
- storageService = inject(DevToolsStorageService);
1550
- /**
1551
- * App flags are the flags that are currently in the app
1552
- */
1553
- appFlags$ = new BehaviorSubject([]);
1554
- /**
1555
- * Forced flags are the flags that are currently forced in the app
1556
- */
1557
- forcedFlagsSubject = new BehaviorSubject({
1558
- enabled: [],
1559
- disabled: [],
1560
- });
1561
- forcedFlags$ = this.forcedFlagsSubject.asObservable();
1562
- /**
1563
- * Flags with the forced flag status
1564
- */
1565
- flags$ = combineLatest([
1566
- this.appFlags$,
1567
- this.forcedFlags$,
1568
- ]).pipe(map(([appFlags, { enabled, disabled }]) => {
1569
- return appFlags.map((flag) => ({
1570
- ...flag,
1571
- isForced: enabled.includes(flag.id) || disabled.includes(flag.id),
1572
- isEnabled: enabled.includes(flag.id),
1573
- }));
1574
- }));
1575
- flags = toSignal(this.flags$, { initialValue: [] });
1576
- constructor() {
1577
- this.loadForcedFlags();
1578
- }
1579
- set(flags) {
1580
- this.appFlags$.next(flags);
1581
- }
1582
- /**
1583
- * This is used by the app that uses the dev toolbar and
1584
- * helps to set the flags that can be overridden by the dev toolbar
1585
- * @param flags - The flags to set
1586
- */
1587
- setAppFlags(flags) {
1588
- this.appFlags$.next(flags);
1589
- }
1590
- getAppFlags() {
1591
- return this.appFlags$.asObservable();
1592
- }
1593
- setFlag(flagId, isEnabled) {
1594
- const { enabled, disabled } = this.forcedFlagsSubject.value;
1595
- // Remove from both arrays first
1596
- const newEnabled = enabled.filter((id) => id !== flagId);
1597
- const newDisabled = disabled.filter((id) => id !== flagId);
1598
- // Add to appropriate array
1599
- if (isEnabled) {
1600
- newEnabled.push(flagId);
1601
- }
1602
- else {
1603
- newDisabled.push(flagId);
1604
- }
1605
- const newState = { enabled: newEnabled, disabled: newDisabled };
1606
- this.forcedFlagsSubject.next(newState);
1607
- this.storageService.set(this.STORAGE_KEY, newState);
1608
- }
1609
- removeFlagOverride(flagId) {
1610
- const { enabled, disabled } = this.forcedFlagsSubject.value;
1611
- const newState = {
1612
- enabled: enabled.filter((id) => id !== flagId),
1613
- disabled: disabled.filter((id) => id !== flagId),
1614
- };
1615
- this.forcedFlagsSubject.next(newState);
1616
- this.storageService.set(this.STORAGE_KEY, newState);
1617
- }
1618
- loadForcedFlags() {
1619
- const savedFlags = this.storageService.get(this.STORAGE_KEY);
1620
- if (savedFlags) {
1621
- this.forcedFlagsSubject.next(savedFlags);
1622
- }
1623
- }
1624
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarFeatureFlagsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
1625
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarFeatureFlagsService, providedIn: 'root' });
1626
- }
1627
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarFeatureFlagsService, decorators: [{
1628
- type: Injectable,
1629
- args: [{ providedIn: 'root' }]
1630
- }], ctorParameters: () => [] });
1631
-
1632
- class DevToolbarFeatureFlagsToolComponent {
1633
- // Injects
1634
- featureFlags = inject(DevToolbarFeatureFlagsService);
1635
- // Signals
1636
- activeFilter = signal('all');
1637
- searchQuery = signal('');
1638
- flags = this.featureFlags.flags;
1639
- hasNoFlags = computed(() => this.flags().length === 0);
1640
- filteredFlags = computed(() => {
1641
- return this.flags().filter((flag) => {
1642
- const searchTerm = this.searchQuery().toLowerCase();
1643
- const flagName = flag.name.toLowerCase();
1644
- const flagDescription = flag.description?.toLowerCase() ?? '';
1645
- const matchesSearch = !this.searchQuery() ||
1646
- flagName.toLowerCase().includes(searchTerm.toLowerCase()) ||
1647
- flagDescription.toLowerCase().includes(searchTerm.toLowerCase());
1648
- const matchesFilter = this.activeFilter() === 'all' ||
1649
- (this.activeFilter() === 'forced' && flag.isForced) ||
1650
- (this.activeFilter() === 'enabled' && flag.isEnabled) ||
1651
- (this.activeFilter() === 'disabled' && !flag.isEnabled);
1652
- return matchesSearch && matchesFilter;
1653
- });
1654
- });
1655
- // Other properties
1656
- windowConfig = {
1657
- title: 'Feature Flags',
1658
- description: 'Manage the feature flags for your current session',
1659
- isClosable: true,
1660
- size: 'tall',
1661
- id: 'ndt-feature-flags',
1662
- isBeta: true,
1663
- };
1664
- filterOptions = [
1665
- { value: 'all', label: 'All Flags' },
1666
- { value: 'forced', label: 'Forced' },
1667
- { value: 'enabled', label: 'Enabled' },
1668
- { value: 'disabled', label: 'Disabled' },
1669
- ];
1670
- flagValueOptions = [
1671
- { value: 'not-forced', label: 'Select an override' },
1672
- { value: 'off', label: 'Forced Off (false)' },
1673
- { value: 'on', label: 'Forced On (true)' },
1674
- ];
1675
- // Public methods
1676
- onFilterChange(value) {
1677
- const filter = this.filterOptions.find((f) => f.value === value);
1678
- if (filter) {
1679
- this.activeFilter.set(filter.value);
1680
- }
1681
- }
1682
- onFlagChange(flagId, value) {
1683
- switch (value) {
1684
- case 'not-forced':
1685
- this.featureFlags.removeFlagOverride(flagId);
1686
- break;
1687
- case 'on':
1688
- this.featureFlags.setFlag(flagId, true);
1689
- break;
1690
- case 'off':
1691
- this.featureFlags.setFlag(flagId, false);
1692
- break;
1693
- }
1694
- }
1695
- onSearchChange(query) {
1696
- this.searchQuery.set(query);
1697
- }
1698
- // Protected methods
1699
- getFlagValue(flag) {
1700
- if (!flag.isForced)
1701
- return '';
1702
- return flag.isEnabled ? 'on' : 'off';
1703
- }
1704
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarFeatureFlagsToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1705
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarFeatureFlagsToolComponent, isStandalone: true, selector: "ndt-feature-flags-tool", ngImport: i0, template: `
1706
- <ndt-toolbar-tool
1707
- [windowConfig]="windowConfig"
1708
- title="Feature Flags"
1709
- icon="toggle-left"
1710
- >
1711
- <div class="container">
1712
- <div class="header">
1713
- <ndt-input
1714
- [value]="searchQuery()"
1715
- (valueChange)="onSearchChange($event)"
1716
- placeholder="Search..."
1717
- />
1718
- <ndt-select
1719
- [value]="activeFilter()"
1720
- [options]="filterOptions"
1721
- [size]="'medium'"
1722
- (valueChange)="onFilterChange($event)"
1723
- />
1724
- </div>
1725
-
1726
- @if (hasNoFlags()) {
1727
- <div class="empty">
1728
- <p>No flags found</p>
1729
- </div>
1730
- } @else {
1731
- <div class="flag-list">
1732
- @for (flag of filteredFlags(); track flag.id) {
1733
- <div class="flag">
1734
- <div class="info">
1735
- <h3>{{ flag.name }}</h3>
1736
- <p>{{ flag?.description }}</p>
1737
- </div>
1738
-
1739
- <ndt-select
1740
- [value]="getFlagValue(flag)"
1741
- [options]="flagValueOptions"
1742
- [ariaLabel]="'Set value for ' + flag.name"
1743
- (valueChange)="onFlagChange(flag.id, $event ?? '')"
1744
- size="small"
1745
- />
1746
- </div>
1747
- }
1748
- </div>
1749
- }
1750
- </div>
1751
- </ndt-toolbar-tool>
1752
- `, isInline: true, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--devtools-spacing-sm);margin-bottom:var(--devtools-spacing-md)}.header ndt-input{flex:.65}.header ndt-select{flex:.35}.empty{display:flex;flex-direction:column;gap:var(--devtools-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--devtools-warning-border);border-radius:var(--devtools-border-radius-medium);padding:var(--devtools-spacing-md);background:var(--devtools-warning-background);color:var(--devtools-text-muted)}.flag-list{display:flex;flex-direction:column;gap:var(--devtools-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--devtools-spacing-sm);scrollbar-width:thin;scrollbar-color:var(--devtools-border-primary) var(--devtools-background-secondary)}.flag-list::-webkit-scrollbar{width:8px}.flag-list::-webkit-scrollbar-track{background:var(--devtools-background-secondary);border-radius:4px}.flag-list::-webkit-scrollbar-thumb{background:var(--devtools-border-primary);border-radius:4px}:is():hover{background:var(--devtools-hover-bg)}.flag{display:flex;flex-direction:row;gap:var(--devtools-spacing-sm);background:var(--devtools-background-secondary)}.flag .info{flex:0 0 65%}.flag .info h3{margin:0;font-size:var(--devtools-font-size-md);color:var(--devtools-text-primary)}.flag .info p{font-size:var(--devtools-font-size-xs);color:var(--devtools-text-muted)}.flag ndt-select{flex:0 0 35%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: DevToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["windowConfig", "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1753
- }
1754
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarFeatureFlagsToolComponent, decorators: [{
1755
- type: Component,
1756
- args: [{ selector: 'ndt-feature-flags-tool', standalone: true, imports: [
1757
- FormsModule,
1758
- DevToolbarToolComponent,
1759
- DevToolbarInputComponent,
1760
- DevToolbarSelectComponent,
1761
- ], template: `
1762
- <ndt-toolbar-tool
1763
- [windowConfig]="windowConfig"
1764
- title="Feature Flags"
1765
- icon="toggle-left"
1766
- >
1767
- <div class="container">
1768
- <div class="header">
1769
- <ndt-input
1770
- [value]="searchQuery()"
1771
- (valueChange)="onSearchChange($event)"
1772
- placeholder="Search..."
1773
- />
1774
- <ndt-select
1775
- [value]="activeFilter()"
1776
- [options]="filterOptions"
1777
- [size]="'medium'"
1778
- (valueChange)="onFilterChange($event)"
1779
- />
1780
- </div>
1781
-
1782
- @if (hasNoFlags()) {
1783
- <div class="empty">
1784
- <p>No flags found</p>
1785
- </div>
1786
- } @else {
1787
- <div class="flag-list">
1788
- @for (flag of filteredFlags(); track flag.id) {
1789
- <div class="flag">
1790
- <div class="info">
1791
- <h3>{{ flag.name }}</h3>
1792
- <p>{{ flag?.description }}</p>
1793
- </div>
1794
-
1795
- <ndt-select
1796
- [value]="getFlagValue(flag)"
1797
- [options]="flagValueOptions"
1798
- [ariaLabel]="'Set value for ' + flag.name"
1799
- (valueChange)="onFlagChange(flag.id, $event ?? '')"
1800
- size="small"
1801
- />
1802
- </div>
1803
- }
1804
- </div>
1805
- }
1806
- </div>
1807
- </ndt-toolbar-tool>
1808
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--devtools-spacing-sm);margin-bottom:var(--devtools-spacing-md)}.header ndt-input{flex:.65}.header ndt-select{flex:.35}.empty{display:flex;flex-direction:column;gap:var(--devtools-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--devtools-warning-border);border-radius:var(--devtools-border-radius-medium);padding:var(--devtools-spacing-md);background:var(--devtools-warning-background);color:var(--devtools-text-muted)}.flag-list{display:flex;flex-direction:column;gap:var(--devtools-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--devtools-spacing-sm);scrollbar-width:thin;scrollbar-color:var(--devtools-border-primary) var(--devtools-background-secondary)}.flag-list::-webkit-scrollbar{width:8px}.flag-list::-webkit-scrollbar-track{background:var(--devtools-background-secondary);border-radius:4px}.flag-list::-webkit-scrollbar-thumb{background:var(--devtools-border-primary);border-radius:4px}:is():hover{background:var(--devtools-hover-bg)}.flag{display:flex;flex-direction:row;gap:var(--devtools-spacing-sm);background:var(--devtools-background-secondary)}.flag .info{flex:0 0 65%}.flag .info h3{margin:0;font-size:var(--devtools-font-size-md);color:var(--devtools-text-primary)}.flag .info p{font-size:var(--devtools-font-size-xs);color:var(--devtools-text-muted)}.flag ndt-select{flex:0 0 35%}\n"] }]
1809
- }] });
1810
-
1811
- class DevToolbarButtonComponent {
1812
- type = input('button');
1813
- variant = input('default');
1814
- icon = input();
1815
- label = input();
1816
- ariaLabel = input();
1817
- isActive = input(false);
1818
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1819
- static ɵ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: `
1820
- <button
1821
- class="button"
1822
- [attr.aria-label]="ariaLabel()"
1823
- [type]="type()"
1824
- [class.button--active]="isActive()"
1825
- [class.button--icon]="variant() === 'icon'"
1826
- >
1827
- @if (icon()) {
1828
- <ndt-icon [name]="icon() || 'star'" />
1829
- }
1830
- @if (label()) {
1831
- <span class="button__label">{{ label() }}</span>
1832
- }
1833
- <ng-content />
1834
- </button>
1835
- `, isInline: true, styles: [".dev-toolbar{--devtools-border-radius-small: 4px;--devtools-border-radius-medium: 8px;--devtools-border-radius-large: 12px;--devtools-transition-default: all .2s ease-out;--devtools-transition-smooth: all .2s ease-in-out;--devtools-bg-primary: rgb(255, 255, 255);--devtools-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--devtools-text-primary: rgb(17, 24, 39);--devtools-text-secondary: rgb(55, 65, 81);--devtools-text-muted: rgb(107, 114, 128);--devtools-border-primary: #e5e7eb;--devtools-border-subtle: rgba(17, 24, 39, .1);--devtools-hover-bg: rgba(17, 24, 39, .05);--devtools-hover-danger: rgb(239, 68, 68);--devtools-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--devtools-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);--devtools-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);--devtools-spacing-xs: 4px;--devtools-spacing-sm: 8px;--devtools-spacing-md: 16px;--devtools-window-padding: 24px;--devtools-font-size-xs: .75rem;--devtools-font-size-sm: .875rem;--devtools-font-size-md: 1rem;--devtools-font-size-lg: 1.25rem;--devtools-font-size-xl: 2rem;--devtools-background-secondary: var(--devtools-bg-primary);--devtools-background-hover: var(--devtools-hover-bg);--devtools-primary: #df30d4;--devtools-text-on-primary: rgb(255, 255, 255);--devtools-border-color: var(--devtools-border-primary);--devtools-note-background: rgb(219, 234, 254);--devtools-note-border: rgba(37, 99, 235, .2);--devtools-warning-background: rgb(254, 249, 195);--devtools-warning-border: rgba(202, 138, 4, .2);--devtools-error-background: rgb(254, 226, 226);--devtools-error-border: rgba(220, 38, 38, .2)}.dev-toolbar h1,.dev-toolbar h2,.dev-toolbar h3,.dev-toolbar h4,.dev-toolbar h5{font-weight:600;color:var(--devtools-text-primary)}.dev-toolbar h1{font-size:var(--devtools-font-size-xl)}.dev-toolbar h2{font-size:var(--devtools-font-size-lg)}.dev-toolbar h3{font-size:var(--devtools-font-size-md)}.dev-toolbar h4{font-size:var(--devtools-font-size-sm)}.dev-toolbar h5{font-size:var(--devtools-font-size-xs)}.dev-toolbar hr{border:1px solid var(--devtools-border-subtle);margin:1em 0}.dev-toolbar p{line-height:1.5em}.dev-toolbar[data-theme=dark]{--devtools-bg-primary: rgb(17, 24, 39);--devtools-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--devtools-text-primary: rgb(255, 255, 255);--devtools-text-secondary: rgb(229, 231, 235);--devtools-text-muted: rgb(156, 163, 175);--devtools-border-primary: #343841;--devtools-border-subtle: rgba(255, 255, 255, .1);--devtools-hover-bg: rgba(255, 255, 255, .12);--devtools-hover-danger: rgb(220, 38, 38);--devtools-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--devtools-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);--devtools-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);--devtools-note-background: rgba(37, 99, 235, .15);--devtools-note-border: rgba(37, 99, 235, .3);--devtools-warning-background: rgba(202, 138, 4, .15);--devtools-warning-border: rgba(202, 138, 4, .3);--devtools-error-background: rgba(220, 38, 38, .15);--devtools-error-border: rgba(220, 38, 38, .3)}.button{display:flex;padding:var(--devtools-spacing-xs) var(--devtools-spacing-sm);border:1px solid var(--devtools-border-color);border-radius:var(--devtools-border-radius);background:var(--devtools-background-secondary);color:var(--devtools-text-primary);cursor:pointer;transition:var(--devtools-transition-fast)}.button:hover{background:var(--devtools-background-hover)}.button:focus{outline:none;background:var(--devtools-background-hover);box-shadow:0 0 0 2px var(--devtools-focus-ring)}.button--active{background:var(--devtools-primary);color:var(--devtools-text-on-primary);border-color:var(--devtools-primary)}.button--icon{padding:var(--devtools-spacing-xs)}.button__label{font-size:var(--devtools-font-size-sm)}\n"], dependencies: [{ kind: "component", type: DevToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1836
- }
1837
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarButtonComponent, decorators: [{
1838
- type: Component,
1839
- args: [{ selector: 'ndt-button', standalone: true, imports: [DevToolbarIconComponent], template: `
1840
- <button
1841
- class="button"
1842
- [attr.aria-label]="ariaLabel()"
1843
- [type]="type()"
1844
- [class.button--active]="isActive()"
1845
- [class.button--icon]="variant() === 'icon'"
1846
- >
1847
- @if (icon()) {
1848
- <ndt-icon [name]="icon() || 'star'" />
1849
- }
1850
- @if (label()) {
1851
- <span class="button__label">{{ label() }}</span>
1852
- }
1853
- <ng-content />
1854
- </button>
1855
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".dev-toolbar{--devtools-border-radius-small: 4px;--devtools-border-radius-medium: 8px;--devtools-border-radius-large: 12px;--devtools-transition-default: all .2s ease-out;--devtools-transition-smooth: all .2s ease-in-out;--devtools-bg-primary: rgb(255, 255, 255);--devtools-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--devtools-text-primary: rgb(17, 24, 39);--devtools-text-secondary: rgb(55, 65, 81);--devtools-text-muted: rgb(107, 114, 128);--devtools-border-primary: #e5e7eb;--devtools-border-subtle: rgba(17, 24, 39, .1);--devtools-hover-bg: rgba(17, 24, 39, .05);--devtools-hover-danger: rgb(239, 68, 68);--devtools-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--devtools-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);--devtools-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);--devtools-spacing-xs: 4px;--devtools-spacing-sm: 8px;--devtools-spacing-md: 16px;--devtools-window-padding: 24px;--devtools-font-size-xs: .75rem;--devtools-font-size-sm: .875rem;--devtools-font-size-md: 1rem;--devtools-font-size-lg: 1.25rem;--devtools-font-size-xl: 2rem;--devtools-background-secondary: var(--devtools-bg-primary);--devtools-background-hover: var(--devtools-hover-bg);--devtools-primary: #df30d4;--devtools-text-on-primary: rgb(255, 255, 255);--devtools-border-color: var(--devtools-border-primary);--devtools-note-background: rgb(219, 234, 254);--devtools-note-border: rgba(37, 99, 235, .2);--devtools-warning-background: rgb(254, 249, 195);--devtools-warning-border: rgba(202, 138, 4, .2);--devtools-error-background: rgb(254, 226, 226);--devtools-error-border: rgba(220, 38, 38, .2)}.dev-toolbar h1,.dev-toolbar h2,.dev-toolbar h3,.dev-toolbar h4,.dev-toolbar h5{font-weight:600;color:var(--devtools-text-primary)}.dev-toolbar h1{font-size:var(--devtools-font-size-xl)}.dev-toolbar h2{font-size:var(--devtools-font-size-lg)}.dev-toolbar h3{font-size:var(--devtools-font-size-md)}.dev-toolbar h4{font-size:var(--devtools-font-size-sm)}.dev-toolbar h5{font-size:var(--devtools-font-size-xs)}.dev-toolbar hr{border:1px solid var(--devtools-border-subtle);margin:1em 0}.dev-toolbar p{line-height:1.5em}.dev-toolbar[data-theme=dark]{--devtools-bg-primary: rgb(17, 24, 39);--devtools-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--devtools-text-primary: rgb(255, 255, 255);--devtools-text-secondary: rgb(229, 231, 235);--devtools-text-muted: rgb(156, 163, 175);--devtools-border-primary: #343841;--devtools-border-subtle: rgba(255, 255, 255, .1);--devtools-hover-bg: rgba(255, 255, 255, .12);--devtools-hover-danger: rgb(220, 38, 38);--devtools-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--devtools-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);--devtools-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);--devtools-note-background: rgba(37, 99, 235, .15);--devtools-note-border: rgba(37, 99, 235, .3);--devtools-warning-background: rgba(202, 138, 4, .15);--devtools-warning-border: rgba(202, 138, 4, .3);--devtools-error-background: rgba(220, 38, 38, .15);--devtools-error-border: rgba(220, 38, 38, .3)}.button{display:flex;padding:var(--devtools-spacing-xs) var(--devtools-spacing-sm);border:1px solid var(--devtools-border-color);border-radius:var(--devtools-border-radius);background:var(--devtools-background-secondary);color:var(--devtools-text-primary);cursor:pointer;transition:var(--devtools-transition-fast)}.button:hover{background:var(--devtools-background-hover)}.button:focus{outline:none;background:var(--devtools-background-hover);box-shadow:0 0 0 2px var(--devtools-focus-ring)}.button--active{background:var(--devtools-primary);color:var(--devtools-text-on-primary);border-color:var(--devtools-primary)}.button--icon{padding:var(--devtools-spacing-xs)}.button__label{font-size:var(--devtools-font-size-sm)}\n"] }]
1856
- }] });
1857
-
1858
- class SettingsService {
1859
- STORAGE_KEY = 'settings';
1860
- storageService = inject(DevToolsStorageService);
1861
- getSettings() {
1862
- return (this.storageService.get(this.STORAGE_KEY) || {
1863
- isDarkMode: false,
1864
- });
1865
- }
1866
- setSettings(settings) {
1867
- this.storageService.set(this.STORAGE_KEY, settings);
1868
- }
1869
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
1870
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SettingsService, providedIn: 'root' });
1871
- }
1872
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SettingsService, decorators: [{
1873
- type: Injectable,
1874
- args: [{ providedIn: 'root' }]
1875
- }] });
1876
-
1877
- class DevToolbarSettingsToolComponent {
1878
- state = inject(DevToolbarStateService);
1879
- settingsService = inject(SettingsService);
1880
- badge = input();
1881
- windowConfig = {
1882
- title: 'Settings',
1883
- isClosable: true,
1884
- id: 'ndt-settings',
1885
- description: 'Configure the settings for the Dev Toolbar',
1886
- isBeta: true,
1887
- };
1888
- onThemeSelect(theme) {
1889
- this.settingsService.setSettings({ isDarkMode: theme === 'dark' });
1890
- this.state.setTheme(theme);
1891
- }
1892
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarSettingsToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1893
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: DevToolbarSettingsToolComponent, isStandalone: true, selector: "ndt-settings-tool", inputs: { badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
1894
- <ndt-toolbar-tool
1895
- [windowConfig]="windowConfig"
1896
- title="Settings"
1897
- icon="gear"
1898
- >
1899
- <section class="settings">
1900
- <div class="instruction">
1901
- <div class="instruction__label">
1902
- <span class="instruction__label-text">Theme</span>
1903
- <span class="instruction__label-description">
1904
- Switch between light and dark mode
1905
- </span>
1906
- </div>
1907
- <div class="instruction__control">
1908
- <div class="theme">
1909
- <ndt-button
1910
- [isActive]="!state.isDarkTheme()"
1911
- (click)="onThemeSelect('light')"
1912
- variant="icon"
1913
- ariaLabel="Switch to light theme"
1914
- icon="sun"
1915
- />
1916
- <ndt-button
1917
- [isActive]="state.isDarkTheme()"
1918
- (click)="onThemeSelect('dark')"
1919
- variant="icon"
1920
- ariaLabel="Switch to dark theme"
1921
- icon="moon"
1922
- />
1923
- </div>
1924
- </div>
1925
- </div>
1926
- </section>
1927
- </ndt-toolbar-tool>
1928
- `, isInline: true, styles: [".dev-toolbar{--devtools-border-radius-small: 4px;--devtools-border-radius-medium: 8px;--devtools-border-radius-large: 12px;--devtools-transition-default: all .2s ease-out;--devtools-transition-smooth: all .2s ease-in-out;--devtools-bg-primary: rgb(255, 255, 255);--devtools-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--devtools-text-primary: rgb(17, 24, 39);--devtools-text-secondary: rgb(55, 65, 81);--devtools-text-muted: rgb(107, 114, 128);--devtools-border-primary: #e5e7eb;--devtools-border-subtle: rgba(17, 24, 39, .1);--devtools-hover-bg: rgba(17, 24, 39, .05);--devtools-hover-danger: rgb(239, 68, 68);--devtools-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--devtools-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);--devtools-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);--devtools-spacing-xs: 4px;--devtools-spacing-sm: 8px;--devtools-spacing-md: 16px;--devtools-window-padding: 24px;--devtools-font-size-xs: .75rem;--devtools-font-size-sm: .875rem;--devtools-font-size-md: 1rem;--devtools-font-size-lg: 1.25rem;--devtools-font-size-xl: 2rem;--devtools-background-secondary: var(--devtools-bg-primary);--devtools-background-hover: var(--devtools-hover-bg);--devtools-primary: #df30d4;--devtools-text-on-primary: rgb(255, 255, 255);--devtools-border-color: var(--devtools-border-primary);--devtools-note-background: rgb(219, 234, 254);--devtools-note-border: rgba(37, 99, 235, .2);--devtools-warning-background: rgb(254, 249, 195);--devtools-warning-border: rgba(202, 138, 4, .2);--devtools-error-background: rgb(254, 226, 226);--devtools-error-border: rgba(220, 38, 38, .2)}.dev-toolbar h1,.dev-toolbar h2,.dev-toolbar h3,.dev-toolbar h4,.dev-toolbar h5{font-weight:600;color:var(--devtools-text-primary)}.dev-toolbar h1{font-size:var(--devtools-font-size-xl)}.dev-toolbar h2{font-size:var(--devtools-font-size-lg)}.dev-toolbar h3{font-size:var(--devtools-font-size-md)}.dev-toolbar h4{font-size:var(--devtools-font-size-sm)}.dev-toolbar h5{font-size:var(--devtools-font-size-xs)}.dev-toolbar hr{border:1px solid var(--devtools-border-subtle);margin:1em 0}.dev-toolbar p{line-height:1.5em}.dev-toolbar[data-theme=dark]{--devtools-bg-primary: rgb(17, 24, 39);--devtools-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--devtools-text-primary: rgb(255, 255, 255);--devtools-text-secondary: rgb(229, 231, 235);--devtools-text-muted: rgb(156, 163, 175);--devtools-border-primary: #343841;--devtools-border-subtle: rgba(255, 255, 255, .1);--devtools-hover-bg: rgba(255, 255, 255, .12);--devtools-hover-danger: rgb(220, 38, 38);--devtools-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--devtools-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);--devtools-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);--devtools-note-background: rgba(37, 99, 235, .15);--devtools-note-border: rgba(37, 99, 235, .3);--devtools-warning-background: rgba(202, 138, 4, .15);--devtools-warning-border: rgba(202, 138, 4, .3);--devtools-error-background: rgba(220, 38, 38, .15);--devtools-error-border: rgba(220, 38, 38, .3)}.settings{padding:var(--devtools-spacing-md)}.instruction{display:flex;justify-content:space-between;align-items:center;gap:var(--devtools-spacing-md)}.instruction__label{display:flex;flex-direction:column;gap:var(--devtools-spacing-xs)}.instruction__label-text{color:var(--devtools-text-primary);font-size:var(--devtools-font-size-sm);font-weight:500}.instruction__label-description{color:var(--devtools-text-muted);font-size:var(--devtools-font-size-xs)}.theme{display:flex;gap:var(--devtools-spacing-xs)}.theme__button{display:flex;align-items:center;justify-content:center;padding:var(--devtools-spacing-xs);border-radius:var(--devtools-border-radius-small);border:1px solid var(--devtools-border-subtle);background:var(--devtools-bg-primary);color:var(--devtools-text-primary);cursor:pointer;transition:var(--devtools-transition-default)}.theme__button:hover{background:var(--devtools-hover-bg)}.theme__button--active{background:var(--devtools-primary);color:var(--devtools-text-on-primary);border-color:var(--devtools-primary)}.theme__button--active:hover{background:var(--devtools-primary)}\n"], dependencies: [{ kind: "component", type: DevToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["windowConfig", "icon", "title"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: DevToolbarButtonComponent, selector: "ndt-button", inputs: ["type", "variant", "icon", "label", "ariaLabel", "isActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1929
- }
1930
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarSettingsToolComponent, decorators: [{
1931
- type: Component,
1932
- args: [{ selector: 'ndt-settings-tool', standalone: true, imports: [DevToolbarToolComponent, FormsModule, DevToolbarButtonComponent], template: `
1933
- <ndt-toolbar-tool
1934
- [windowConfig]="windowConfig"
1935
- title="Settings"
1936
- icon="gear"
1937
- >
1938
- <section class="settings">
1939
- <div class="instruction">
1940
- <div class="instruction__label">
1941
- <span class="instruction__label-text">Theme</span>
1942
- <span class="instruction__label-description">
1943
- Switch between light and dark mode
1944
- </span>
1945
- </div>
1946
- <div class="instruction__control">
1947
- <div class="theme">
1948
- <ndt-button
1949
- [isActive]="!state.isDarkTheme()"
1950
- (click)="onThemeSelect('light')"
1951
- variant="icon"
1952
- ariaLabel="Switch to light theme"
1953
- icon="sun"
1954
- />
1955
- <ndt-button
1956
- [isActive]="state.isDarkTheme()"
1957
- (click)="onThemeSelect('dark')"
1958
- variant="icon"
1959
- ariaLabel="Switch to dark theme"
1960
- icon="moon"
1961
- />
1962
- </div>
1963
- </div>
1964
- </div>
1965
- </section>
1966
- </ndt-toolbar-tool>
1967
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".dev-toolbar{--devtools-border-radius-small: 4px;--devtools-border-radius-medium: 8px;--devtools-border-radius-large: 12px;--devtools-transition-default: all .2s ease-out;--devtools-transition-smooth: all .2s ease-in-out;--devtools-bg-primary: rgb(255, 255, 255);--devtools-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--devtools-text-primary: rgb(17, 24, 39);--devtools-text-secondary: rgb(55, 65, 81);--devtools-text-muted: rgb(107, 114, 128);--devtools-border-primary: #e5e7eb;--devtools-border-subtle: rgba(17, 24, 39, .1);--devtools-hover-bg: rgba(17, 24, 39, .05);--devtools-hover-danger: rgb(239, 68, 68);--devtools-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--devtools-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);--devtools-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);--devtools-spacing-xs: 4px;--devtools-spacing-sm: 8px;--devtools-spacing-md: 16px;--devtools-window-padding: 24px;--devtools-font-size-xs: .75rem;--devtools-font-size-sm: .875rem;--devtools-font-size-md: 1rem;--devtools-font-size-lg: 1.25rem;--devtools-font-size-xl: 2rem;--devtools-background-secondary: var(--devtools-bg-primary);--devtools-background-hover: var(--devtools-hover-bg);--devtools-primary: #df30d4;--devtools-text-on-primary: rgb(255, 255, 255);--devtools-border-color: var(--devtools-border-primary);--devtools-note-background: rgb(219, 234, 254);--devtools-note-border: rgba(37, 99, 235, .2);--devtools-warning-background: rgb(254, 249, 195);--devtools-warning-border: rgba(202, 138, 4, .2);--devtools-error-background: rgb(254, 226, 226);--devtools-error-border: rgba(220, 38, 38, .2)}.dev-toolbar h1,.dev-toolbar h2,.dev-toolbar h3,.dev-toolbar h4,.dev-toolbar h5{font-weight:600;color:var(--devtools-text-primary)}.dev-toolbar h1{font-size:var(--devtools-font-size-xl)}.dev-toolbar h2{font-size:var(--devtools-font-size-lg)}.dev-toolbar h3{font-size:var(--devtools-font-size-md)}.dev-toolbar h4{font-size:var(--devtools-font-size-sm)}.dev-toolbar h5{font-size:var(--devtools-font-size-xs)}.dev-toolbar hr{border:1px solid var(--devtools-border-subtle);margin:1em 0}.dev-toolbar p{line-height:1.5em}.dev-toolbar[data-theme=dark]{--devtools-bg-primary: rgb(17, 24, 39);--devtools-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--devtools-text-primary: rgb(255, 255, 255);--devtools-text-secondary: rgb(229, 231, 235);--devtools-text-muted: rgb(156, 163, 175);--devtools-border-primary: #343841;--devtools-border-subtle: rgba(255, 255, 255, .1);--devtools-hover-bg: rgba(255, 255, 255, .12);--devtools-hover-danger: rgb(220, 38, 38);--devtools-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--devtools-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);--devtools-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);--devtools-note-background: rgba(37, 99, 235, .15);--devtools-note-border: rgba(37, 99, 235, .3);--devtools-warning-background: rgba(202, 138, 4, .15);--devtools-warning-border: rgba(202, 138, 4, .3);--devtools-error-background: rgba(220, 38, 38, .15);--devtools-error-border: rgba(220, 38, 38, .3)}.settings{padding:var(--devtools-spacing-md)}.instruction{display:flex;justify-content:space-between;align-items:center;gap:var(--devtools-spacing-md)}.instruction__label{display:flex;flex-direction:column;gap:var(--devtools-spacing-xs)}.instruction__label-text{color:var(--devtools-text-primary);font-size:var(--devtools-font-size-sm);font-weight:500}.instruction__label-description{color:var(--devtools-text-muted);font-size:var(--devtools-font-size-xs)}.theme{display:flex;gap:var(--devtools-spacing-xs)}.theme__button{display:flex;align-items:center;justify-content:center;padding:var(--devtools-spacing-xs);border-radius:var(--devtools-border-radius-small);border:1px solid var(--devtools-border-subtle);background:var(--devtools-bg-primary);color:var(--devtools-text-primary);cursor:pointer;transition:var(--devtools-transition-default)}.theme__button:hover{background:var(--devtools-hover-bg)}.theme__button--active{background:var(--devtools-primary);color:var(--devtools-text-on-primary);border-color:var(--devtools-primary)}.theme__button--active:hover{background:var(--devtools-primary)}\n"] }]
1968
- }] });
1969
-
1970
- class DevToolbarComponent {
1971
- state = inject(DevToolbarStateService);
1972
- destroyRef = inject(DestroyRef);
1973
- settingsService = inject(SettingsService);
1974
- keyboardShortcut = fromEvent(window, 'keydown')
1975
- .pipe(filter((event) => event.ctrlKey && event.shiftKey && event.key === 'D'), takeUntilDestroyed(this.destroyRef))
1976
- .subscribe(() => this.toggleDevTools());
1977
- mouseLeave = fromEvent(document, 'mouseleave')
1978
- .pipe(throttleTime(3000), takeUntilDestroyed(this.destroyRef))
1979
- .subscribe(() => this.onMouseLeave());
1980
- ngOnInit() {
1981
- const settings = this.settingsService.getSettings();
1982
- this.state.setTheme(settings.isDarkMode ? 'dark' : 'light');
1983
- }
1984
- onMouseEnter() {
1985
- this.state.setVisibility(true);
1986
- }
1987
- onMouseLeave() {
1988
- setTimeout(() => this.state.setVisibility(false), this.state.delay());
1989
- }
1990
- toggleDevTools() {
1991
- this.state.setVisibility(!this.state.isVisible());
1992
- }
1993
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1994
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: DevToolbarComponent, isStandalone: true, selector: "ndt-toolbar", ngImport: i0, template: `
1995
- <div
1996
- aria-label="Developer tools"
1997
- role="toolbar"
1998
- class="dev-toolbar"
1999
- [@toolbarState]="state.isVisible() ? 'visible' : 'hidden'"
2000
- [attr.data-theme]="state.theme()"
2001
- [class.dev-toolbar--active]="state.isVisible()"
2002
- (mouseenter)="onMouseEnter()"
2003
- >
2004
- <ndt-tool-button title="Home" toolId="ndt-home">
2005
- <ndt-icon name="angular" />
2006
- </ndt-tool-button>
2007
- <ndt-tool-button title="Performance" toolId="ndt-performance">
2008
- <ndt-icon name="gauge" />
2009
- </ndt-tool-button>
2010
- <ndt-feature-flags-tool />
2011
- <ndt-settings-tool />
2012
- </div>
2013
- `, isInline: true, styles: [".dev-toolbar{--devtools-border-radius-small: 4px;--devtools-border-radius-medium: 8px;--devtools-border-radius-large: 12px;--devtools-transition-default: all .2s ease-out;--devtools-transition-smooth: all .2s ease-in-out;--devtools-bg-primary: rgb(255, 255, 255);--devtools-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--devtools-text-primary: rgb(17, 24, 39);--devtools-text-secondary: rgb(55, 65, 81);--devtools-text-muted: rgb(107, 114, 128);--devtools-border-primary: #e5e7eb;--devtools-border-subtle: rgba(17, 24, 39, .1);--devtools-hover-bg: rgba(17, 24, 39, .05);--devtools-hover-danger: rgb(239, 68, 68);--devtools-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--devtools-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);--devtools-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);--devtools-spacing-xs: 4px;--devtools-spacing-sm: 8px;--devtools-spacing-md: 16px;--devtools-window-padding: 24px;--devtools-font-size-xs: .75rem;--devtools-font-size-sm: .875rem;--devtools-font-size-md: 1rem;--devtools-font-size-lg: 1.25rem;--devtools-font-size-xl: 2rem;--devtools-background-secondary: var(--devtools-bg-primary);--devtools-background-hover: var(--devtools-hover-bg);--devtools-primary: #df30d4;--devtools-text-on-primary: rgb(255, 255, 255);--devtools-border-color: var(--devtools-border-primary);--devtools-note-background: rgb(219, 234, 254);--devtools-note-border: rgba(37, 99, 235, .2);--devtools-warning-background: rgb(254, 249, 195);--devtools-warning-border: rgba(202, 138, 4, .2);--devtools-error-background: rgb(254, 226, 226);--devtools-error-border: rgba(220, 38, 38, .2)}.dev-toolbar h1,.dev-toolbar h2,.dev-toolbar h3,.dev-toolbar h4,.dev-toolbar h5{font-weight:600;color:var(--devtools-text-primary)}.dev-toolbar h1{font-size:var(--devtools-font-size-xl)}.dev-toolbar h2{font-size:var(--devtools-font-size-lg)}.dev-toolbar h3{font-size:var(--devtools-font-size-md)}.dev-toolbar h4{font-size:var(--devtools-font-size-sm)}.dev-toolbar h5{font-size:var(--devtools-font-size-xs)}.dev-toolbar hr{border:1px solid var(--devtools-border-subtle);margin:1em 0}.dev-toolbar p{line-height:1.5em}.dev-toolbar[data-theme=dark]{--devtools-bg-primary: rgb(17, 24, 39);--devtools-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--devtools-text-primary: rgb(255, 255, 255);--devtools-text-secondary: rgb(229, 231, 235);--devtools-text-muted: rgb(156, 163, 175);--devtools-border-primary: #343841;--devtools-border-subtle: rgba(255, 255, 255, .1);--devtools-hover-bg: rgba(255, 255, 255, .12);--devtools-hover-danger: rgb(220, 38, 38);--devtools-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--devtools-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);--devtools-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);--devtools-note-background: rgba(37, 99, 235, .15);--devtools-note-border: rgba(37, 99, 235, .3);--devtools-warning-background: rgba(202, 138, 4, .15);--devtools-warning-border: rgba(202, 138, 4, .3);--devtools-error-background: rgba(220, 38, 38, .15);--devtools-error-border: rgba(220, 38, 38, .3)}.dev-toolbar{position:fixed;bottom:0;left:50%;z-index:999999;transform:translate(-50%);display:flex;pointer-events:auto;background:var(--devtools-bg-gradient);border:1px solid var(--devtools-border-primary);border-radius:9999px;box-shadow:var(--devtools-shadow-toolbar);height:40px}.dev-toolbar--active{opacity:1}\n"], dependencies: [{ kind: "component", type: DevToolbarToolButtonComponent, selector: "ndt-tool-button", inputs: ["title", "toolId"], outputs: ["click"] }, { kind: "component", type: DevToolbarFeatureFlagsToolComponent, selector: "ndt-feature-flags-tool" }, { kind: "component", type: DevToolbarSettingsToolComponent, selector: "ndt-settings-tool", inputs: ["badge"] }, { kind: "component", type: DevToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], animations: [
2014
- trigger('toolbarState', [
2015
- state('hidden', style({
2016
- transform: 'translate(-50%, calc(100% + -1.2rem))',
2017
- })),
2018
- state('visible', style({
2019
- transform: 'translate(-50%, -1rem)',
2020
- })),
2021
- transition('hidden <=> visible', [
2022
- animate('300ms cubic-bezier(0.4, 0, 0.2, 1)'),
2023
- ]),
2024
- ]),
2025
- ] });
2026
- }
2027
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarComponent, decorators: [{
2028
- type: Component,
2029
- args: [{ standalone: true, selector: 'ndt-toolbar', imports: [
2030
- DevToolbarToolButtonComponent,
2031
- DevToolbarFeatureFlagsToolComponent,
2032
- DevToolbarSettingsToolComponent,
2033
- DevToolbarIconComponent,
2034
- ], template: `
2035
- <div
2036
- aria-label="Developer tools"
2037
- role="toolbar"
2038
- class="dev-toolbar"
2039
- [@toolbarState]="state.isVisible() ? 'visible' : 'hidden'"
2040
- [attr.data-theme]="state.theme()"
2041
- [class.dev-toolbar--active]="state.isVisible()"
2042
- (mouseenter)="onMouseEnter()"
2043
- >
2044
- <ndt-tool-button title="Home" toolId="ndt-home">
2045
- <ndt-icon name="angular" />
2046
- </ndt-tool-button>
2047
- <ndt-tool-button title="Performance" toolId="ndt-performance">
2048
- <ndt-icon name="gauge" />
2049
- </ndt-tool-button>
2050
- <ndt-feature-flags-tool />
2051
- <ndt-settings-tool />
2052
- </div>
2053
- `, animations: [
2054
- trigger('toolbarState', [
2055
- state('hidden', style({
2056
- transform: 'translate(-50%, calc(100% + -1.2rem))',
2057
- })),
2058
- state('visible', style({
2059
- transform: 'translate(-50%, -1rem)',
2060
- })),
2061
- transition('hidden <=> visible', [
2062
- animate('300ms cubic-bezier(0.4, 0, 0.2, 1)'),
2063
- ]),
2064
- ]),
2065
- ], styles: [".dev-toolbar{--devtools-border-radius-small: 4px;--devtools-border-radius-medium: 8px;--devtools-border-radius-large: 12px;--devtools-transition-default: all .2s ease-out;--devtools-transition-smooth: all .2s ease-in-out;--devtools-bg-primary: rgb(255, 255, 255);--devtools-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--devtools-text-primary: rgb(17, 24, 39);--devtools-text-secondary: rgb(55, 65, 81);--devtools-text-muted: rgb(107, 114, 128);--devtools-border-primary: #e5e7eb;--devtools-border-subtle: rgba(17, 24, 39, .1);--devtools-hover-bg: rgba(17, 24, 39, .05);--devtools-hover-danger: rgb(239, 68, 68);--devtools-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--devtools-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);--devtools-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);--devtools-spacing-xs: 4px;--devtools-spacing-sm: 8px;--devtools-spacing-md: 16px;--devtools-window-padding: 24px;--devtools-font-size-xs: .75rem;--devtools-font-size-sm: .875rem;--devtools-font-size-md: 1rem;--devtools-font-size-lg: 1.25rem;--devtools-font-size-xl: 2rem;--devtools-background-secondary: var(--devtools-bg-primary);--devtools-background-hover: var(--devtools-hover-bg);--devtools-primary: #df30d4;--devtools-text-on-primary: rgb(255, 255, 255);--devtools-border-color: var(--devtools-border-primary);--devtools-note-background: rgb(219, 234, 254);--devtools-note-border: rgba(37, 99, 235, .2);--devtools-warning-background: rgb(254, 249, 195);--devtools-warning-border: rgba(202, 138, 4, .2);--devtools-error-background: rgb(254, 226, 226);--devtools-error-border: rgba(220, 38, 38, .2)}.dev-toolbar h1,.dev-toolbar h2,.dev-toolbar h3,.dev-toolbar h4,.dev-toolbar h5{font-weight:600;color:var(--devtools-text-primary)}.dev-toolbar h1{font-size:var(--devtools-font-size-xl)}.dev-toolbar h2{font-size:var(--devtools-font-size-lg)}.dev-toolbar h3{font-size:var(--devtools-font-size-md)}.dev-toolbar h4{font-size:var(--devtools-font-size-sm)}.dev-toolbar h5{font-size:var(--devtools-font-size-xs)}.dev-toolbar hr{border:1px solid var(--devtools-border-subtle);margin:1em 0}.dev-toolbar p{line-height:1.5em}.dev-toolbar[data-theme=dark]{--devtools-bg-primary: rgb(17, 24, 39);--devtools-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--devtools-text-primary: rgb(255, 255, 255);--devtools-text-secondary: rgb(229, 231, 235);--devtools-text-muted: rgb(156, 163, 175);--devtools-border-primary: #343841;--devtools-border-subtle: rgba(255, 255, 255, .1);--devtools-hover-bg: rgba(255, 255, 255, .12);--devtools-hover-danger: rgb(220, 38, 38);--devtools-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--devtools-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);--devtools-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);--devtools-note-background: rgba(37, 99, 235, .15);--devtools-note-border: rgba(37, 99, 235, .3);--devtools-warning-background: rgba(202, 138, 4, .15);--devtools-warning-border: rgba(202, 138, 4, .3);--devtools-error-background: rgba(220, 38, 38, .15);--devtools-error-border: rgba(220, 38, 38, .3)}.dev-toolbar{position:fixed;bottom:0;left:50%;z-index:999999;transform:translate(-50%);display:flex;pointer-events:auto;background:var(--devtools-bg-gradient);border:1px solid var(--devtools-border-primary);border-radius:9999px;box-shadow:var(--devtools-shadow-toolbar);height:40px}.dev-toolbar--active{opacity:1}\n"] }]
2066
- }] });
2067
-
2068
- /**
2069
- * Generated bundle index. Do not edit.
2070
- */
2071
-
2072
- export { DevToolbarComponent, DevToolbarFeatureFlagsService };
2073
- //# sourceMappingURL=ngx-dev-toolbar.mjs.map