ngx-dev-toolbar 1.0.0-beta.2 → 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.
- package/README.md +254 -4
- package/eslint.config.cjs +47 -0
- package/ng-package.json +7 -0
- package/package.json +8 -23
- package/project.json +37 -0
- package/src/components/button/button.component.scss +49 -0
- package/src/components/button/button.component.ts +36 -0
- package/src/components/card/card.component.scss +18 -0
- package/src/components/card/card.component.ts +30 -0
- package/src/components/clickable-card/clickable-card.component.scss +39 -0
- package/src/components/clickable-card/clickable-card.component.ts +34 -0
- package/src/components/icons/angular-icon.component.ts +35 -0
- package/src/components/icons/bug-icon.component.ts +23 -0
- package/src/components/icons/code-icon.component.ts +24 -0
- package/src/components/icons/database-icon.component.ts +27 -0
- package/src/components/icons/discord-icon.component.ts +23 -0
- package/src/components/icons/docs-icon.component.ts +23 -0
- package/src/components/icons/export-icon.component.ts +23 -0
- package/src/components/icons/gauge-icon.component.ts +27 -0
- package/src/components/icons/gear-icon.component.ts +27 -0
- package/src/components/icons/git-branch-icon.component.ts +27 -0
- package/src/components/icons/icon.component.ts +129 -0
- package/src/components/icons/icon.models.ts +27 -0
- package/src/components/icons/import-icon.component.ts +23 -0
- package/src/components/icons/layout-icon.component.ts +24 -0
- package/src/components/icons/lightbulb-icon.component.ts +23 -0
- package/src/components/icons/lighting-icon.component.ts +24 -0
- package/src/components/icons/moon-icon.component.ts +27 -0
- package/src/components/icons/network-icon.component.ts +27 -0
- package/src/components/icons/puzzle-icon.component.ts +27 -0
- package/src/components/icons/refresh-icon.component.ts +27 -0
- package/src/components/icons/star-icon.component.ts +27 -0
- package/src/components/icons/sun-icon.component.ts +27 -0
- package/src/components/icons/terminal-icon.component.ts +27 -0
- package/src/components/icons/toggle-left-icon.component.ts +27 -0
- package/src/components/icons/translate-icon.component.ts +23 -0
- package/src/components/icons/trash-icon.component.ts +23 -0
- package/src/components/icons/users-icon.component.ts +27 -0
- package/src/components/input/input.component.ts +67 -0
- package/src/components/link-button/link-button.component.scss +36 -0
- package/src/components/link-button/link-button.component.ts +29 -0
- package/src/components/select/select.component.scss +162 -0
- package/src/components/select/select.component.ts +127 -0
- package/src/components/tool-button/tool-button.component.scss +67 -0
- package/src/components/tool-button/tool-button.component.ts +126 -0
- package/src/components/toolbar-tool/toolbar-tool.component.scss +9 -0
- package/src/components/toolbar-tool/toolbar-tool.component.ts +169 -0
- package/src/components/toolbar-tool/toolbar-tool.models.ts +33 -0
- package/src/components/window/window.component.scss +95 -0
- package/src/components/window/window.component.ts +69 -0
- package/src/dev-toolbar-state.service.ts +89 -0
- package/src/dev-toolbar.component.scss +22 -0
- package/src/dev-toolbar.component.ts +105 -0
- package/src/index.ts +10 -0
- package/src/models/dev-tools.interface.ts +19 -0
- package/src/styles.scss +342 -0
- package/src/test-setup.ts +12 -0
- package/src/tools/feature-flags-tool/feature-flags-internal.service.ts +96 -0
- package/src/tools/feature-flags-tool/feature-flags-tool.component.ts +261 -0
- package/src/tools/feature-flags-tool/feature-flags.models.ts +10 -0
- package/src/tools/feature-flags-tool/feature-flags.service.ts +28 -0
- package/src/tools/home-tool/home-tool.component.scss +67 -0
- package/src/tools/home-tool/home-tool.component.ts +197 -0
- package/{tools/settings-tool/settings.models.d.ts → src/tools/home-tool/settings.models.ts} +1 -1
- package/src/tools/home-tool/settings.service.spec.ts +59 -0
- package/src/tools/home-tool/settings.service.ts +21 -0
- package/src/tools/language-tool/language-internal.service.ts +51 -0
- package/src/tools/language-tool/language-tool.component.scss +7 -0
- package/src/tools/language-tool/language-tool.component.ts +71 -0
- package/src/tools/language-tool/language.models.ts +4 -0
- package/src/tools/language-tool/language.service.ts +26 -0
- package/src/utils/storage.service.spec.ts +179 -0
- package/src/utils/storage.service.ts +80 -0
- package/tsconfig.json +28 -0
- package/tsconfig.lib.json +28 -0
- package/tsconfig.lib.prod.json +9 -0
- package/tsconfig.spec.json +29 -0
- package/vite.config.mts +27 -0
- package/components/button/button.component.d.ts +0 -12
- package/components/icons/angular-icon.component.d.ts +0 -5
- package/components/icons/bug-icon.component.d.ts +0 -6
- package/components/icons/code-icon.component.d.ts +0 -6
- package/components/icons/database-icon.component.d.ts +0 -6
- package/components/icons/gauge-icon.component.d.ts +0 -6
- package/components/icons/gear-icon.component.d.ts +0 -6
- package/components/icons/git-branch-icon.component.d.ts +0 -6
- package/components/icons/icon.component.d.ts +0 -9
- package/components/icons/icon.models.d.ts +0 -1
- package/components/icons/layout-icon.component.d.ts +0 -6
- package/components/icons/lighting-icon.component.d.ts +0 -6
- package/components/icons/moon-icon.component.d.ts +0 -6
- package/components/icons/network-icon.component.d.ts +0 -6
- package/components/icons/puzzle-icon.component.d.ts +0 -6
- package/components/icons/refresh-icon.component.d.ts +0 -6
- package/components/icons/star-icon.component.d.ts +0 -6
- package/components/icons/sun-icon.component.d.ts +0 -6
- package/components/icons/terminal-icon.component.d.ts +0 -6
- package/components/icons/toggle-left-icon.component.d.ts +0 -6
- package/components/icons/users-icon.component.d.ts +0 -6
- package/components/input/input.component.d.ts +0 -10
- package/components/select/select.component.d.ts +0 -14
- package/components/tool-button/tool-button.component.d.ts +0 -23
- package/components/toolbar-tool/toolbar-tool.component.d.ts +0 -28
- package/components/window/window.component.d.ts +0 -16
- package/components/window/window.models.d.ts +0 -20
- package/dev-toolbar-state.service.d.ts +0 -18
- package/dev-toolbar.component.d.ts +0 -17
- package/fesm2022/ngx-dev-toolbar.mjs +0 -2073
- package/fesm2022/ngx-dev-toolbar.mjs.map +0 -1
- package/index.d.ts +0 -3
- package/tools/feature-flags-tool/feature-flags-tool.component.d.ts +0 -33
- package/tools/feature-flags-tool/feature-flags.models.d.ts +0 -9
- package/tools/feature-flags-tool/feature-flags.service.d.ts +0 -35
- package/tools/settings-tool/settings-tool.component.d.ts +0 -15
- package/tools/settings-tool/settings.service.d.ts +0 -10
- 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
|