ngx-dev-toolbar 1.0.5 → 2.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/components/icons/icon.component.d.ts +1 -1
- package/dev-toolbar.component.d.ts +3 -2
- package/fesm2022/ngx-dev-toolbar.mjs +758 -354
- package/fesm2022/ngx-dev-toolbar.mjs.map +1 -1
- package/index.d.ts +4 -3
- package/models/dev-toolbar-config.interface.d.ts +31 -0
- package/package.json +1 -1
- package/tools/feature-flags-tool/feature-flags-internal.service.d.ts +15 -0
- package/tools/language-tool/language-internal.service.d.ts +10 -0
- package/tools/presets-tool/presets-internal.service.d.ts +57 -0
- package/tools/presets-tool/presets-tool.component.d.ts +33 -0
- package/tools/presets-tool/presets.models.d.ts +24 -0
- package/tools/presets-tool/presets.service.d.ts +51 -0
- package/tools/network-mocker-tool/network-mocker-tool.component.d.ts +0 -23
- package/tools/network-mocker-tool/network-mocker.models.d.ts +0 -16
- package/tools/network-mocker-tool/network-mocker.service.d.ts +0 -16
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { signal, computed, Injectable, Component, ChangeDetectionStrategy, input, inject, ElementRef, output, ViewChild, ContentChild, model, DestroyRef
|
|
2
|
+
import { signal, computed, Injectable, Component, ChangeDetectionStrategy, input, inject, ElementRef, output, ViewEncapsulation, ViewChild, ContentChild, model, DestroyRef } from '@angular/core';
|
|
3
3
|
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
4
4
|
import * as i1 from '@angular/cdk/overlay';
|
|
5
5
|
import { CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
|
|
@@ -1618,7 +1618,7 @@ class DevToolbarToolButtonComponent {
|
|
|
1618
1618
|
}
|
|
1619
1619
|
<ng-content />
|
|
1620
1620
|
</button>
|
|
1621
|
-
`, isInline: true, styles: [".
|
|
1621
|
+
`, isInline: true, styles: [".tool-button{display:flex;justify-content:center;align-items:center;width:44px;height:40px;border:0;background:transparent;color:var(--ndt-text-primary);transition:var(--ndt-transition-default);cursor:pointer;opacity:.5;position:relative}.tool-button--active,.tool-button:hover{background:var(--ndt-hover-bg);opacity:1}.tool-button ::ng-deep svg{width:24px;height:24px;display:block;margin:auto}.tool-button__badge{position:absolute;top:-.25rem;right:-.25rem;background-color:var(--ndt-hover-danger);color:var(--ndt-text-primary);border-radius:var(--ndt-border-radius-full);min-width:1rem;height:1rem;font-size:.75rem;display:flex;align-items:center;justify-content:center;padding:.125rem}.tooltip{position:absolute;bottom:calc(100% + 1.2rem);left:50%;transform:translate(-50%);background:var(--ndt-bg-primary);color:var(--ndt-text-primary);padding:.5rem .75rem;border-radius:var(--ndt-border-radius-medium);font-size:.75rem;white-space:nowrap;pointer-events:none;z-index:1000;box-shadow:var(--ndt-shadow-tooltip)}\n"], animations: [
|
|
1622
1622
|
trigger('tooltipAnimation', [
|
|
1623
1623
|
state('hidden', style({
|
|
1624
1624
|
opacity: 0,
|
|
@@ -1669,7 +1669,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
1669
1669
|
transition('hidden => visible', [animate('200ms ease-out')]),
|
|
1670
1670
|
transition('visible => hidden', [animate('150ms ease-in')]),
|
|
1671
1671
|
]),
|
|
1672
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, styles: [".
|
|
1672
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, styles: [".tool-button{display:flex;justify-content:center;align-items:center;width:44px;height:40px;border:0;background:transparent;color:var(--ndt-text-primary);transition:var(--ndt-transition-default);cursor:pointer;opacity:.5;position:relative}.tool-button--active,.tool-button:hover{background:var(--ndt-hover-bg);opacity:1}.tool-button ::ng-deep svg{width:24px;height:24px;display:block;margin:auto}.tool-button__badge{position:absolute;top:-.25rem;right:-.25rem;background-color:var(--ndt-hover-danger);color:var(--ndt-text-primary);border-radius:var(--ndt-border-radius-full);min-width:1rem;height:1rem;font-size:.75rem;display:flex;align-items:center;justify-content:center;padding:.125rem}.tooltip{position:absolute;bottom:calc(100% + 1.2rem);left:50%;transform:translate(-50%);background:var(--ndt-bg-primary);color:var(--ndt-text-primary);padding:.5rem .75rem;border-radius:var(--ndt-border-radius-medium);font-size:.75rem;white-space:nowrap;pointer-events:none;z-index:1000;box-shadow:var(--ndt-shadow-tooltip)}\n"] }]
|
|
1673
1673
|
}] });
|
|
1674
1674
|
|
|
1675
1675
|
class DevToolbarWindowComponent {
|
|
@@ -1729,11 +1729,11 @@ class DevToolbarWindowComponent {
|
|
|
1729
1729
|
<ng-content></ng-content>
|
|
1730
1730
|
</div>
|
|
1731
1731
|
</div>
|
|
1732
|
-
`, isInline: true, styles: ["
|
|
1732
|
+
`, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2);display:block;width:100%;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\"}:host[data-theme=dark]{--ndt-bg-primary: rgb(17, 24, 39);--ndt-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--ndt-text-primary: rgb(255, 255, 255);--ndt-text-secondary: rgb(229, 231, 235);--ndt-text-muted: rgb(156, 163, 175);--ndt-border-primary: #343841;--ndt-border-subtle: rgba(255, 255, 255, .1);--ndt-hover-bg: rgba(255, 255, 255, .12);--ndt-hover-danger: rgb(220, 38, 38);--ndt-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--ndt-shadow-tooltip: 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 8px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--ndt-shadow-window: 0px 0px 0px 0px rgba(19, 21, 26, .3), 0px 1px 2px 0px rgba(19, 21, 26, .29), 0px 4px 4px 0px rgba(19, 21, 26, .26), 0px 10px 6px 0px rgba(19, 21, 26, .15), 0px 17px 7px 0px rgba(19, 21, 26, .04), 0px 26px 7px 0px rgba(19, 21, 26, .01);--ndt-note-background: rgba(37, 99, 235, .15);--ndt-note-border: rgba(37, 99, 235, .3);--ndt-warning-background: rgba(202, 138, 4, .15);--ndt-warning-border: rgba(202, 138, 4, .3);--ndt-error-background: rgba(220, 38, 38, .15);--ndt-error-border: rgba(220, 38, 38, .3)}.window{box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%;background:var(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-large);padding:var(--ndt-window-padding);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";color:var(--ndt-text-secondary);z-index:999999999;box-shadow:var(--ndt-shadow-window)}.header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start}.header h1{font-size:var(--ndt-font-size-lg);line-height:1.2;margin:0}.header__title{display:flex;align-items:center;gap:var(--ndt-spacing-sm)}.header__title .beta-tag{font-size:var(--ndt-font-size-xxs, .65rem);background:var(--ndt-purple, #8b5cf6);color:var(--ndt-text-on-primary);padding:1px 4px;margin-left:var(--ndt-spacing-xs);border-radius:var(--ndt-border-radius-small);font-weight:500;text-transform:uppercase;letter-spacing:.5px}.header__description{font-size:var(--ndt-font-size-sm);color:var(--ndt-text-muted);word-wrap:break-word;overflow-wrap:break-word;max-width:100%;line-height:1.4;margin:0}.header__content{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.header__controls{display:flex;gap:var(--ndt-spacing-sm)}.content{flex:1;overflow:auto}.divider{height:1px;background-color:var(--ndt-border-primary);margin-bottom:var(--ndt-spacing-md);margin-top:var(--ndt-spacing-md)}.control{background:none;border:none;color:var(--ndt-text-secondary);cursor:pointer;padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-small);font-size:var(--ndt-font-size-md);line-height:1;transition:var(--ndt-transition-smooth)}.control:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.control--close:hover{background:var(--ndt-hover-danger)}\n"], encapsulation: i0.ViewEncapsulation.ShadowDom }); }
|
|
1733
1733
|
}
|
|
1734
1734
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarWindowComponent, decorators: [{
|
|
1735
1735
|
type: Component,
|
|
1736
|
-
args: [{ selector: 'ndt-window', standalone: true, template: `
|
|
1736
|
+
args: [{ selector: 'ndt-window', standalone: true, encapsulation: ViewEncapsulation.ShadowDom, template: `
|
|
1737
1737
|
<div class="window dev-toolbar" [attr.data-theme]="theme()">
|
|
1738
1738
|
<div class="header">
|
|
1739
1739
|
<div class="header__content">
|
|
@@ -1771,7 +1771,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
1771
1771
|
<ng-content></ng-content>
|
|
1772
1772
|
</div>
|
|
1773
1773
|
</div>
|
|
1774
|
-
`, styles: ["
|
|
1774
|
+
`, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2);display:block;width:100%;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\"}:host[data-theme=dark]{--ndt-bg-primary: rgb(17, 24, 39);--ndt-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--ndt-text-primary: rgb(255, 255, 255);--ndt-text-secondary: rgb(229, 231, 235);--ndt-text-muted: rgb(156, 163, 175);--ndt-border-primary: #343841;--ndt-border-subtle: rgba(255, 255, 255, .1);--ndt-hover-bg: rgba(255, 255, 255, .12);--ndt-hover-danger: rgb(220, 38, 38);--ndt-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--ndt-shadow-tooltip: 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 8px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--ndt-shadow-window: 0px 0px 0px 0px rgba(19, 21, 26, .3), 0px 1px 2px 0px rgba(19, 21, 26, .29), 0px 4px 4px 0px rgba(19, 21, 26, .26), 0px 10px 6px 0px rgba(19, 21, 26, .15), 0px 17px 7px 0px rgba(19, 21, 26, .04), 0px 26px 7px 0px rgba(19, 21, 26, .01);--ndt-note-background: rgba(37, 99, 235, .15);--ndt-note-border: rgba(37, 99, 235, .3);--ndt-warning-background: rgba(202, 138, 4, .15);--ndt-warning-border: rgba(202, 138, 4, .3);--ndt-error-background: rgba(220, 38, 38, .15);--ndt-error-border: rgba(220, 38, 38, .3)}.window{box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%;background:var(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-large);padding:var(--ndt-window-padding);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";color:var(--ndt-text-secondary);z-index:999999999;box-shadow:var(--ndt-shadow-window)}.header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start}.header h1{font-size:var(--ndt-font-size-lg);line-height:1.2;margin:0}.header__title{display:flex;align-items:center;gap:var(--ndt-spacing-sm)}.header__title .beta-tag{font-size:var(--ndt-font-size-xxs, .65rem);background:var(--ndt-purple, #8b5cf6);color:var(--ndt-text-on-primary);padding:1px 4px;margin-left:var(--ndt-spacing-xs);border-radius:var(--ndt-border-radius-small);font-weight:500;text-transform:uppercase;letter-spacing:.5px}.header__description{font-size:var(--ndt-font-size-sm);color:var(--ndt-text-muted);word-wrap:break-word;overflow-wrap:break-word;max-width:100%;line-height:1.4;margin:0}.header__content{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.header__controls{display:flex;gap:var(--ndt-spacing-sm)}.content{flex:1;overflow:auto}.divider{height:1px;background-color:var(--ndt-border-primary);margin-bottom:var(--ndt-spacing-md);margin-top:var(--ndt-spacing-md)}.control{background:none;border:none;color:var(--ndt-text-secondary);cursor:pointer;padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);border-radius:var(--ndt-border-radius-small);font-size:var(--ndt-font-size-md);line-height:1;transition:var(--ndt-transition-smooth)}.control:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.control--close:hover{background:var(--ndt-hover-danger)}\n"] }]
|
|
1775
1775
|
}] });
|
|
1776
1776
|
|
|
1777
1777
|
class DevToolbarToolComponent {
|
|
@@ -1872,7 +1872,7 @@ class DevToolbarToolComponent {
|
|
|
1872
1872
|
</ng-template>
|
|
1873
1873
|
}
|
|
1874
1874
|
</div>
|
|
1875
|
-
`, isInline: true, styles: [".
|
|
1875
|
+
`, isInline: true, styles: [".tool{position:relative}.trigger{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: DevToolbarWindowComponent, selector: "ndt-window", inputs: ["config"], outputs: ["close", "maximize", "minimize"] }, { kind: "component", type: DevToolbarToolButtonComponent, selector: "ndt-tool-button", inputs: ["title", "toolId"], outputs: ["open"] }, { kind: "component", type: DevToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], animations: [
|
|
1876
1876
|
trigger('slideAnimation', [
|
|
1877
1877
|
transition(':enter', [
|
|
1878
1878
|
style({
|
|
@@ -1964,7 +1964,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
1964
1964
|
})),
|
|
1965
1965
|
]),
|
|
1966
1966
|
]),
|
|
1967
|
-
], styles: [".
|
|
1967
|
+
], styles: [".tool{position:relative}.trigger{cursor:pointer}\n"] }]
|
|
1968
1968
|
}], propDecorators: { buttonContainer: [{
|
|
1969
1969
|
type: ViewChild,
|
|
1970
1970
|
args: ['buttonContainer']
|
|
@@ -1991,7 +1991,7 @@ class DevToolbarInputComponent {
|
|
|
1991
1991
|
[placeholder]="placeholder()"
|
|
1992
1992
|
(ngModelChange)="value.set($event)"
|
|
1993
1993
|
/>
|
|
1994
|
-
`, isInline: true, styles: [":host{display:block}.input{width:100%;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);background-color:var(--ndt-bg-primary);color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);transition:var(--ndt-transition-default);box-sizing:border-box}.input::placeholder{color:var(--ndt-text-muted)}.input:focus{outline:none;border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.input:disabled{background-color:var(--ndt-bg-secondary);cursor:not-allowed;color:var(--ndt-text-muted)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1994
|
+
`, isInline: true, styles: [":host{display:block}.input{width:100%;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);background-color:var(--ndt-bg-primary);color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);transition:var(--ndt-transition-default);box-sizing:border-box;min-height:36px}.input::placeholder{color:var(--ndt-text-muted)}.input:focus{outline:none;border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.input:disabled{background-color:var(--ndt-bg-secondary);cursor:not-allowed;color:var(--ndt-text-muted)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1995
1995
|
}
|
|
1996
1996
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInputComponent, decorators: [{
|
|
1997
1997
|
type: Component,
|
|
@@ -2004,7 +2004,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
2004
2004
|
[placeholder]="placeholder()"
|
|
2005
2005
|
(ngModelChange)="value.set($event)"
|
|
2006
2006
|
/>
|
|
2007
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.input{width:100%;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);background-color:var(--ndt-bg-primary);color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);transition:var(--ndt-transition-default);box-sizing:border-box}.input::placeholder{color:var(--ndt-text-muted)}.input:focus{outline:none;border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.input:disabled{background-color:var(--ndt-bg-secondary);cursor:not-allowed;color:var(--ndt-text-muted)}\n"] }]
|
|
2007
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.input{width:100%;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);background-color:var(--ndt-bg-primary);color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);transition:var(--ndt-transition-default);box-sizing:border-box;min-height:36px}.input::placeholder{color:var(--ndt-text-muted)}.input:focus{outline:none;border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.input:disabled{background-color:var(--ndt-bg-secondary);cursor:not-allowed;color:var(--ndt-text-muted)}\n"] }]
|
|
2008
2008
|
}] });
|
|
2009
2009
|
|
|
2010
2010
|
class DevToolbarSelectComponent {
|
|
@@ -2101,11 +2101,11 @@ class DevToolbarSelectComponent {
|
|
|
2101
2101
|
}
|
|
2102
2102
|
</div>
|
|
2103
2103
|
</ng-template>
|
|
2104
|
-
`, isInline: true, styles: ["
|
|
2104
|
+
`, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2);display:inline-block;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\"}:host[data-theme=dark]{--ndt-bg-primary: rgb(17, 24, 39);--ndt-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--ndt-text-primary: rgb(255, 255, 255);--ndt-text-secondary: rgb(229, 231, 235);--ndt-text-muted: rgb(156, 163, 175);--ndt-border-primary: #343841;--ndt-border-subtle: rgba(255, 255, 255, .1);--ndt-hover-bg: rgba(255, 255, 255, .12);--ndt-hover-danger: rgb(220, 38, 38);--ndt-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--ndt-shadow-tooltip: 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 8px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--ndt-shadow-window: 0px 0px 0px 0px rgba(19, 21, 26, .3), 0px 1px 2px 0px rgba(19, 21, 26, .29), 0px 4px 4px 0px rgba(19, 21, 26, .26), 0px 10px 6px 0px rgba(19, 21, 26, .15), 0px 17px 7px 0px rgba(19, 21, 26, .04), 0px 26px 7px 0px rgba(19, 21, 26, .01);--ndt-note-background: rgba(37, 99, 235, .15);--ndt-note-border: rgba(37, 99, 235, .3);--ndt-warning-background: rgba(202, 138, 4, .15);--ndt-warning-border: rgba(202, 138, 4, .3);--ndt-error-background: rgba(220, 38, 38, .15);--ndt-error-border: rgba(220, 38, 38, .3)}.select{position:relative;width:100%;min-width:120px;display:flex;align-items:center;justify-content:space-between;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);background-color:var(--ndt-bg-primary);color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--ndt-transition-default);outline:none;min-height:36px;box-sizing:border-box}.select:hover{background-color:var(--ndt-hover-bg);border-color:var(--ndt-primary)}.select:focus-visible{outline:none;border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.select.small{padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);font-size:var(--ndt-font-size-sm);height:24px}.select.open{border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.select.open .select__arrow{transform:rotate(180deg)}.select__value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;margin-right:var(--ndt-spacing-sm);min-width:0;display:flex;align-items:center}.select__arrow{width:16px;height:16px;flex-shrink:0;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:center;background-size:contain;transition:transform .2s ease;opacity:.9}.select-menu{display:inline-flex;flex-direction:column;min-width:180px;background-color:var(--ndt-bg-primary);padding:var(--ndt-spacing-xs) 0;border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);box-shadow:var(--ndt-shadow-window);color:var(--ndt-text-primary);max-height:min(400px,70vh);overflow-y:auto;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.select-menu::-webkit-scrollbar{width:8px;height:8px}.select-menu::-webkit-scrollbar-track{background:transparent}.select-menu::-webkit-scrollbar-thumb{background-color:var(--ndt-border-primary);border-radius:4px;border:2px solid var(--ndt-bg-primary)}.select-menu-item{background-color:transparent;cursor:pointer;border:none;color:inherit;-webkit-user-select:none;user-select:none;min-width:64px;line-height:36px;padding:0 var(--ndt-spacing-md);display:flex;align-items:center;flex-direction:row;flex:1;font-size:var(--ndt-font-size-sm);font-family:inherit;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.select-menu-item:hover{background-color:var(--ndt-hover-bg)}.select-menu-item:active{background-color:rgba(var(--ndt-primary-rgb),.15)}.select-menu-item.selected{color:var(--ndt-primary);background-color:rgba(var(--ndt-primary-rgb),.1);font-weight:500}.select-menu-item.selected:hover{background-color:rgba(var(--ndt-primary-rgb),.15)}.select-menu-item.selected:before{content:\"\";position:absolute;left:0;top:8px;width:3px;height:calc(100% - 16px);background-color:var(--ndt-primary);border-radius:2px}.select-menu-item:focus-visible{outline:none;background-color:var(--ndt-hover-bg)}.select-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i2.CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: i2.CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom }); }
|
|
2105
2105
|
}
|
|
2106
2106
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarSelectComponent, decorators: [{
|
|
2107
2107
|
type: Component,
|
|
2108
|
-
args: [{ selector: 'ndt-select', standalone: true, imports: [CommonModule, FormsModule, OverlayModule, CdkMenuModule], template: `
|
|
2108
|
+
args: [{ selector: 'ndt-select', standalone: true, encapsulation: ViewEncapsulation.ShadowDom, imports: [CommonModule, FormsModule, OverlayModule, CdkMenuModule], template: `
|
|
2109
2109
|
<div
|
|
2110
2110
|
class="dev-toolbar select"
|
|
2111
2111
|
[class.small]="size() === 'small'"
|
|
@@ -2154,7 +2154,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
2154
2154
|
}
|
|
2155
2155
|
</div>
|
|
2156
2156
|
</ng-template>
|
|
2157
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["
|
|
2157
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2);display:inline-block;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\"}:host[data-theme=dark]{--ndt-bg-primary: rgb(17, 24, 39);--ndt-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--ndt-text-primary: rgb(255, 255, 255);--ndt-text-secondary: rgb(229, 231, 235);--ndt-text-muted: rgb(156, 163, 175);--ndt-border-primary: #343841;--ndt-border-subtle: rgba(255, 255, 255, .1);--ndt-hover-bg: rgba(255, 255, 255, .12);--ndt-hover-danger: rgb(220, 38, 38);--ndt-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--ndt-shadow-tooltip: 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 8px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--ndt-shadow-window: 0px 0px 0px 0px rgba(19, 21, 26, .3), 0px 1px 2px 0px rgba(19, 21, 26, .29), 0px 4px 4px 0px rgba(19, 21, 26, .26), 0px 10px 6px 0px rgba(19, 21, 26, .15), 0px 17px 7px 0px rgba(19, 21, 26, .04), 0px 26px 7px 0px rgba(19, 21, 26, .01);--ndt-note-background: rgba(37, 99, 235, .15);--ndt-note-border: rgba(37, 99, 235, .3);--ndt-warning-background: rgba(202, 138, 4, .15);--ndt-warning-border: rgba(202, 138, 4, .3);--ndt-error-background: rgba(220, 38, 38, .15);--ndt-error-border: rgba(220, 38, 38, .3)}.select{position:relative;width:100%;min-width:120px;display:flex;align-items:center;justify-content:space-between;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);background-color:var(--ndt-bg-primary);color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);cursor:pointer;-webkit-user-select:none;user-select:none;transition:var(--ndt-transition-default);outline:none;min-height:36px;box-sizing:border-box}.select:hover{background-color:var(--ndt-hover-bg);border-color:var(--ndt-primary)}.select:focus-visible{outline:none;border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.select.small{padding:var(--ndt-spacing-xs) var(--ndt-spacing-sm);font-size:var(--ndt-font-size-sm);height:24px}.select.open{border-color:var(--ndt-primary);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.select.open .select__arrow{transform:rotate(180deg)}.select__value{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4;margin-right:var(--ndt-spacing-sm);min-width:0;display:flex;align-items:center}.select__arrow{width:16px;height:16px;flex-shrink:0;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:center;background-size:contain;transition:transform .2s ease;opacity:.9}.select-menu{display:inline-flex;flex-direction:column;min-width:180px;background-color:var(--ndt-bg-primary);padding:var(--ndt-spacing-xs) 0;border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small);box-shadow:var(--ndt-shadow-window);color:var(--ndt-text-primary);max-height:min(400px,70vh);overflow-y:auto;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.select-menu::-webkit-scrollbar{width:8px;height:8px}.select-menu::-webkit-scrollbar-track{background:transparent}.select-menu::-webkit-scrollbar-thumb{background-color:var(--ndt-border-primary);border-radius:4px;border:2px solid var(--ndt-bg-primary)}.select-menu-item{background-color:transparent;cursor:pointer;border:none;color:inherit;-webkit-user-select:none;user-select:none;min-width:64px;line-height:36px;padding:0 var(--ndt-spacing-md);display:flex;align-items:center;flex-direction:row;flex:1;font-size:var(--ndt-font-size-sm);font-family:inherit;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.select-menu-item:hover{background-color:var(--ndt-hover-bg)}.select-menu-item:active{background-color:rgba(var(--ndt-primary-rgb),.15)}.select-menu-item.selected{color:var(--ndt-primary);background-color:rgba(var(--ndt-primary-rgb),.1);font-weight:500}.select-menu-item.selected:hover{background-color:rgba(var(--ndt-primary-rgb),.15)}.select-menu-item.selected:before{content:\"\";position:absolute;left:0;top:8px;width:3px;height:calc(100% - 16px);background-color:var(--ndt-primary);border-radius:2px}.select-menu-item:focus-visible{outline:none;background-color:var(--ndt-hover-bg)}.select-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}\n"] }]
|
|
2158
2158
|
}] });
|
|
2159
2159
|
|
|
2160
2160
|
class DevToolsStorageService {
|
|
@@ -2626,7 +2626,7 @@ class DevToolbarAppFeaturesToolComponent {
|
|
|
2626
2626
|
}
|
|
2627
2627
|
</div>
|
|
2628
2628
|
</ndt-toolbar-tool>
|
|
2629
|
-
`, isInline: true, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md)}.header ndt-input{flex
|
|
2629
|
+
`, isInline: true, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md)}.header ndt-input{flex:1}.header .filter-wrapper{flex:0 0 auto;display:flex;align-items:center;gap:var(--ndt-spacing-md)}.header .filter-wrapper .filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}.header .filter-wrapper ndt-select{flex:0 0 auto;min-width:180px}.empty{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-warning-border);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:var(--ndt-warning-background);color:var(--ndt-text-muted)}.empty p{margin:0;font-size:var(--ndt-font-size-md)}.empty small{font-size:var(--ndt-font-size-xs);opacity:.8}.feature-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-sm);scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.feature-list::-webkit-scrollbar{width:8px}.feature-list::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}.feature-list::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px}:is():hover{background:var(--ndt-hover-bg)}.feature{display:flex;flex-direction:row;gap:var(--ndt-spacing-sm);background:var(--ndt-background-secondary);padding:var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-medium)}.feature .info{flex:0 0 65%}.feature .info h3{margin:0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.feature .info p{margin:var(--ndt-spacing-xs) 0 0 0;font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted)}.feature ndt-select{flex:0 0 35%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: DevToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "title"] }, { kind: "component", type: DevToolbarInputComponent, selector: "ndt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2630
2630
|
}
|
|
2631
2631
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarAppFeaturesToolComponent, decorators: [{
|
|
2632
2632
|
type: Component,
|
|
@@ -2693,7 +2693,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
2693
2693
|
}
|
|
2694
2694
|
</div>
|
|
2695
2695
|
</ndt-toolbar-tool>
|
|
2696
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md)}.header ndt-input{flex
|
|
2696
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md)}.header ndt-input{flex:1}.header .filter-wrapper{flex:0 0 auto;display:flex;align-items:center;gap:var(--ndt-spacing-md)}.header .filter-wrapper .filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}.header .filter-wrapper ndt-select{flex:0 0 auto;min-width:180px}.empty{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-warning-border);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:var(--ndt-warning-background);color:var(--ndt-text-muted)}.empty p{margin:0;font-size:var(--ndt-font-size-md)}.empty small{font-size:var(--ndt-font-size-xs);opacity:.8}.feature-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-sm);scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.feature-list::-webkit-scrollbar{width:8px}.feature-list::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}.feature-list::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px}:is():hover{background:var(--ndt-hover-bg)}.feature{display:flex;flex-direction:row;gap:var(--ndt-spacing-sm);background:var(--ndt-background-secondary);padding:var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-medium)}.feature .info{flex:0 0 65%}.feature .info h3{margin:0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.feature .info p{margin:var(--ndt-spacing-xs) 0 0 0;font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted)}.feature ndt-select{flex:0 0 35%}\n"] }]
|
|
2697
2697
|
}] });
|
|
2698
2698
|
|
|
2699
2699
|
class DevToolbarInternalFeatureFlagService {
|
|
@@ -2713,7 +2713,11 @@ class DevToolbarInternalFeatureFlagService {
|
|
|
2713
2713
|
return appFlags.map((flag) => ({
|
|
2714
2714
|
...flag,
|
|
2715
2715
|
isForced: enabled.includes(flag.id) || disabled.includes(flag.id),
|
|
2716
|
-
isEnabled: enabled.includes(flag.id)
|
|
2716
|
+
isEnabled: enabled.includes(flag.id)
|
|
2717
|
+
? true
|
|
2718
|
+
: disabled.includes(flag.id)
|
|
2719
|
+
? false
|
|
2720
|
+
: flag.isEnabled,
|
|
2717
2721
|
}));
|
|
2718
2722
|
}));
|
|
2719
2723
|
this.flags = toSignal(this.flags$, { initialValue: [] });
|
|
@@ -2757,6 +2761,21 @@ class DevToolbarInternalFeatureFlagService {
|
|
|
2757
2761
|
this.forcedFlagsSubject.next(savedFlags);
|
|
2758
2762
|
}
|
|
2759
2763
|
}
|
|
2764
|
+
/**
|
|
2765
|
+
* Apply feature flags from a preset (used by Presets Tool)
|
|
2766
|
+
* This method directly sets the forced flags state without user interaction
|
|
2767
|
+
*/
|
|
2768
|
+
applyPresetFlags(presetState) {
|
|
2769
|
+
this.forcedFlagsSubject.next(presetState);
|
|
2770
|
+
this.storageService.set(this.STORAGE_KEY, presetState);
|
|
2771
|
+
}
|
|
2772
|
+
/**
|
|
2773
|
+
* Get current forced state for saving to preset
|
|
2774
|
+
* Returns the raw state of enabled and disabled flag IDs
|
|
2775
|
+
*/
|
|
2776
|
+
getCurrentForcedState() {
|
|
2777
|
+
return this.forcedFlagsSubject.value;
|
|
2778
|
+
}
|
|
2760
2779
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalFeatureFlagService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2761
2780
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalFeatureFlagService, providedIn: 'root' }); }
|
|
2762
2781
|
}
|
|
@@ -2895,7 +2914,7 @@ class DevToolbarFeatureFlagsToolComponent {
|
|
|
2895
2914
|
}
|
|
2896
2915
|
</div>
|
|
2897
2916
|
</ndt-toolbar-tool>
|
|
2898
|
-
`, isInline: true, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md)}.header ndt-input{flex
|
|
2917
|
+
`, isInline: true, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md)}.header ndt-input{flex:1}.header .filter-wrapper{flex:0 0 auto;display:flex;align-items:center;gap:var(--ndt-spacing-md)}.header .filter-wrapper .filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}.header .filter-wrapper ndt-select{flex:0 0 auto;min-width:180px}.empty{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-warning-border);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:var(--ndt-warning-background);color:var(--ndt-text-muted)}.flag-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-sm);scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.flag-list::-webkit-scrollbar{width:8px}.flag-list::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}.flag-list::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px}:is():hover{background:var(--ndt-hover-bg)}.flag{display:flex;flex-direction:row;gap:var(--ndt-spacing-sm);background:var(--ndt-background-secondary)}.flag .info{flex:0 0 65%}.flag .info h3{margin:0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.flag .info p{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted)}.flag ndt-select{flex:0 0 35%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: DevToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "title"] }, { kind: "component", type: DevToolbarInputComponent, selector: "ndt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2899
2918
|
}
|
|
2900
2919
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarFeatureFlagsToolComponent, decorators: [{
|
|
2901
2920
|
type: Component,
|
|
@@ -2959,7 +2978,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
2959
2978
|
}
|
|
2960
2979
|
</div>
|
|
2961
2980
|
</ndt-toolbar-tool>
|
|
2962
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md)}.header ndt-input{flex
|
|
2981
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md)}.header ndt-input{flex:1}.header .filter-wrapper{flex:0 0 auto;display:flex;align-items:center;gap:var(--ndt-spacing-md)}.header .filter-wrapper .filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}.header .filter-wrapper ndt-select{flex:0 0 auto;min-width:180px}.empty{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-warning-border);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:var(--ndt-warning-background);color:var(--ndt-text-muted)}.flag-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-sm);scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.flag-list::-webkit-scrollbar{width:8px}.flag-list::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}.flag-list::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px}:is():hover{background:var(--ndt-hover-bg)}.flag{display:flex;flex-direction:row;gap:var(--ndt-spacing-sm);background:var(--ndt-background-secondary)}.flag .info{flex:0 0 65%}.flag .info h3{margin:0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.flag .info p{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted)}.flag ndt-select{flex:0 0 35%}\n"] }]
|
|
2963
2982
|
}] });
|
|
2964
2983
|
|
|
2965
2984
|
class DevToolbarButtonComponent {
|
|
@@ -2988,7 +3007,7 @@ class DevToolbarButtonComponent {
|
|
|
2988
3007
|
}
|
|
2989
3008
|
<ng-content />
|
|
2990
3009
|
</button>
|
|
2991
|
-
`, isInline: true, styles: [".
|
|
3010
|
+
`, isInline: true, styles: [".button{display:inline-flex;align-items:center;gap:var(--ndt-spacing-xs);padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);min-height:36px;border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);background:var(--ndt-bg-primary);color:var(--ndt-text-primary);cursor:pointer;transition:var(--ndt-transition-default);outline:none;font-family:inherit}.button:hover{background:var(--ndt-hover-bg);border-color:var(--ndt-primary)}.button:focus-visible{outline:none;background:var(--ndt-hover-bg);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.button.primary{background:var(--ndt-primary);color:var(--ndt-text-on-primary);border-color:var(--ndt-primary)}.button.primary:hover{background:var(--ndt-primary);border-color:var(--ndt-primary)}.button.icon-only{padding:var(--ndt-spacing-xs);width:32px;height:32px;justify-content:center}.button.small{font-size:var(--ndt-font-size-sm)}\n"], dependencies: [{ kind: "component", type: DevToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2992
3011
|
}
|
|
2993
3012
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarButtonComponent, decorators: [{
|
|
2994
3013
|
type: Component,
|
|
@@ -3008,7 +3027,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
3008
3027
|
}
|
|
3009
3028
|
<ng-content />
|
|
3010
3029
|
</button>
|
|
3011
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".
|
|
3030
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".button{display:inline-flex;align-items:center;gap:var(--ndt-spacing-xs);padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);min-height:36px;border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium);background:var(--ndt-bg-primary);color:var(--ndt-text-primary);cursor:pointer;transition:var(--ndt-transition-default);outline:none;font-family:inherit}.button:hover{background:var(--ndt-hover-bg);border-color:var(--ndt-primary)}.button:focus-visible{outline:none;background:var(--ndt-hover-bg);box-shadow:0 0 0 2px rgba(var(--ndt-primary-rgb),.2)}.button.primary{background:var(--ndt-primary);color:var(--ndt-text-on-primary);border-color:var(--ndt-primary)}.button.primary:hover{background:var(--ndt-primary);border-color:var(--ndt-primary)}.button.icon-only{padding:var(--ndt-spacing-xs);width:32px;height:32px;justify-content:center}.button.small{font-size:var(--ndt-font-size-sm)}\n"] }]
|
|
3012
3031
|
}] });
|
|
3013
3032
|
|
|
3014
3033
|
class DevToolbarCardComponent {
|
|
@@ -3078,7 +3097,7 @@ class DevToolbarClickableCardComponent {
|
|
|
3078
3097
|
</div>
|
|
3079
3098
|
</div>
|
|
3080
3099
|
</ndt-card>
|
|
3081
|
-
`, isInline: true, styles: [".clickable-card{display:flex;flex-direction:column;gap:var(--ndt-spacing-
|
|
3100
|
+
`, isInline: true, styles: [".clickable-card{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);height:100%}.clickable-card__icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--ndt-border-radius-medium);background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.clickable-card__content{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.clickable-card__title{color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);font-weight:500}.clickable-card__subtitle{color:var(--ndt-text-muted);font-size:var(--ndt-font-size-xs);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}\n"], dependencies: [{ kind: "component", type: DevToolbarCardComponent, selector: "ndt-card" }, { kind: "component", type: DevToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }] }); }
|
|
3082
3101
|
}
|
|
3083
3102
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarClickableCardComponent, decorators: [{
|
|
3084
3103
|
type: Component,
|
|
@@ -3094,7 +3113,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
3094
3113
|
</div>
|
|
3095
3114
|
</div>
|
|
3096
3115
|
</ndt-card>
|
|
3097
|
-
`, styles: [".clickable-card{display:flex;flex-direction:column;gap:var(--ndt-spacing-
|
|
3116
|
+
`, styles: [".clickable-card{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs);height:100%}.clickable-card__icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--ndt-border-radius-medium);background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.clickable-card__content{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.clickable-card__title{color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);font-weight:500}.clickable-card__subtitle{color:var(--ndt-text-muted);font-size:var(--ndt-font-size-xs);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}\n"] }]
|
|
3098
3117
|
}] });
|
|
3099
3118
|
|
|
3100
3119
|
class DevToolbarLinkButtonComponent {
|
|
@@ -3321,7 +3340,7 @@ class DevToolbarHomeToolComponent {
|
|
|
3321
3340
|
</div>
|
|
3322
3341
|
</section>
|
|
3323
3342
|
</ndt-toolbar-tool>
|
|
3324
|
-
`, isInline: true, styles: [".
|
|
3343
|
+
`, isInline: true, styles: [".settings{display:flex;flex-direction:column;justify-content:space-between;min-height:100%}.instruction{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--ndt-spacing-sm)}.instruction__label{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.instruction__label-text{color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);font-weight:500}.instruction__label-description{color:var(--ndt-text-muted);font-size:var(--ndt-font-size-xs)}.instruction__control{flex:1}.instruction__control-button{display:flex;gap:var(--ndt-spacing-xs);justify-content:flex-end}.settings-container{display:flex;flex-direction:column}.settings-container .settings-actions{display:flex;gap:var(--ndt-spacing-md);padding-block:var(--ndt-spacing-sm)}.settings-container .settings-actions>*{width:50%;min-width:0}.footer-links{border-top:1px solid var(--ndt-border-subtle);padding-top:1em;display:flex;flex-direction:row;justify-content:space-between;gap:var(--ndt-spacing-lg)}\n"], dependencies: [{ kind: "component", type: DevToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "title"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: DevToolbarButtonComponent, selector: "ndt-button", inputs: ["type", "variant", "icon", "label", "ariaLabel", "isActive"] }, { kind: "component", type: DevToolbarClickableCardComponent, selector: "ndt-clickable-card", inputs: ["icon", "title", "subtitle"] }, { kind: "component", type: DevToolbarLinkButtonComponent, selector: "ndt-link-button", inputs: ["url", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3325
3344
|
}
|
|
3326
3345
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarHomeToolComponent, decorators: [{
|
|
3327
3346
|
type: Component,
|
|
@@ -3402,7 +3421,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
3402
3421
|
</div>
|
|
3403
3422
|
</section>
|
|
3404
3423
|
</ndt-toolbar-tool>
|
|
3405
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".
|
|
3424
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".settings{display:flex;flex-direction:column;justify-content:space-between;min-height:100%}.instruction{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--ndt-spacing-sm)}.instruction__label{display:flex;flex-direction:column;gap:var(--ndt-spacing-xs)}.instruction__label-text{color:var(--ndt-text-primary);font-size:var(--ndt-font-size-sm);font-weight:500}.instruction__label-description{color:var(--ndt-text-muted);font-size:var(--ndt-font-size-xs)}.instruction__control{flex:1}.instruction__control-button{display:flex;gap:var(--ndt-spacing-xs);justify-content:flex-end}.settings-container{display:flex;flex-direction:column}.settings-container .settings-actions{display:flex;gap:var(--ndt-spacing-md);padding-block:var(--ndt-spacing-sm)}.settings-container .settings-actions>*{width:50%;min-width:0}.footer-links{border-top:1px solid var(--ndt-border-subtle);padding-top:1em;display:flex;flex-direction:row;justify-content:space-between;gap:var(--ndt-spacing-lg)}\n"] }]
|
|
3406
3425
|
}] });
|
|
3407
3426
|
|
|
3408
3427
|
class DevToolbarInternalLanguageService {
|
|
@@ -3437,6 +3456,32 @@ class DevToolbarInternalLanguageService {
|
|
|
3437
3456
|
this.forcedLanguage$.next(savedLanguage);
|
|
3438
3457
|
}
|
|
3439
3458
|
}
|
|
3459
|
+
/**
|
|
3460
|
+
* Apply language from a preset (used by Presets Tool)
|
|
3461
|
+
* Accepts a language ID and finds the corresponding Language object from available languages
|
|
3462
|
+
*/
|
|
3463
|
+
async applyPresetLanguage(languageId) {
|
|
3464
|
+
if (languageId === null) {
|
|
3465
|
+
this.removeForcedLanguage();
|
|
3466
|
+
return;
|
|
3467
|
+
}
|
|
3468
|
+
// Get available languages and find matching one
|
|
3469
|
+
const languages = await firstValueFrom(this.languages$);
|
|
3470
|
+
const language = languages.find((lang) => lang.id === languageId);
|
|
3471
|
+
if (language) {
|
|
3472
|
+
this.setForcedLanguage(language);
|
|
3473
|
+
}
|
|
3474
|
+
else {
|
|
3475
|
+
console.warn(`Language ${languageId} not found in available languages. Skipping.`);
|
|
3476
|
+
}
|
|
3477
|
+
}
|
|
3478
|
+
/**
|
|
3479
|
+
* Get current forced language ID for saving to preset
|
|
3480
|
+
* Returns the language ID or null if no language is forced
|
|
3481
|
+
*/
|
|
3482
|
+
getCurrentForcedLanguage() {
|
|
3483
|
+
return this.forcedLanguage$.value?.id ?? null;
|
|
3484
|
+
}
|
|
3440
3485
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalLanguageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3441
3486
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalLanguageService, providedIn: 'root' }); }
|
|
3442
3487
|
}
|
|
@@ -3510,312 +3555,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
3510
3555
|
`, styles: [".language-select{display:flex;flex-direction:row;gap:.5rem;align-items:center;justify-content:space-between}\n"] }]
|
|
3511
3556
|
}] });
|
|
3512
3557
|
|
|
3513
|
-
class DevToolbarNetworkMockerService {
|
|
3514
|
-
constructor() {
|
|
3515
|
-
this.mockRequests = signal([]);
|
|
3516
|
-
this.isMockingEnabled = signal(false);
|
|
3517
|
-
}
|
|
3518
|
-
getMockRequests() {
|
|
3519
|
-
return this.mockRequests.asReadonly();
|
|
3520
|
-
}
|
|
3521
|
-
getIsMockingEnabled() {
|
|
3522
|
-
return this.isMockingEnabled.asReadonly();
|
|
3523
|
-
}
|
|
3524
|
-
addMockRequest(config) {
|
|
3525
|
-
const mockRequest = {
|
|
3526
|
-
id: crypto.randomUUID(),
|
|
3527
|
-
url: config.url,
|
|
3528
|
-
method: config.method,
|
|
3529
|
-
status: config.status || 200,
|
|
3530
|
-
response: config.response || {},
|
|
3531
|
-
isActive: true,
|
|
3532
|
-
createdAt: new Date(),
|
|
3533
|
-
};
|
|
3534
|
-
this.mockRequests.update((requests) => [mockRequest, ...requests]);
|
|
3535
|
-
}
|
|
3536
|
-
removeMockRequest(id) {
|
|
3537
|
-
this.mockRequests.update((requests) => requests.filter((request) => request.id !== id));
|
|
3538
|
-
}
|
|
3539
|
-
toggleMockRequest(id) {
|
|
3540
|
-
this.mockRequests.update((requests) => requests.map((request) => request.id === id
|
|
3541
|
-
? { ...request, isActive: !request.isActive }
|
|
3542
|
-
: request));
|
|
3543
|
-
}
|
|
3544
|
-
enableMocking() {
|
|
3545
|
-
this.isMockingEnabled.set(true);
|
|
3546
|
-
console.log('Network mocking enabled');
|
|
3547
|
-
}
|
|
3548
|
-
disableMocking() {
|
|
3549
|
-
this.isMockingEnabled.set(false);
|
|
3550
|
-
console.log('Network mocking disabled');
|
|
3551
|
-
}
|
|
3552
|
-
clearAllMocks() {
|
|
3553
|
-
this.mockRequests.set([]);
|
|
3554
|
-
this.isMockingEnabled.set(false);
|
|
3555
|
-
}
|
|
3556
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarNetworkMockerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3557
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarNetworkMockerService, providedIn: 'root' }); }
|
|
3558
|
-
}
|
|
3559
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarNetworkMockerService, decorators: [{
|
|
3560
|
-
type: Injectable,
|
|
3561
|
-
args: [{
|
|
3562
|
-
providedIn: 'root',
|
|
3563
|
-
}]
|
|
3564
|
-
}] });
|
|
3565
|
-
|
|
3566
|
-
class DevToolbarNetworkMockerToolComponent {
|
|
3567
|
-
constructor() {
|
|
3568
|
-
// Injects
|
|
3569
|
-
this.networkMockerService = inject(DevToolbarNetworkMockerService);
|
|
3570
|
-
// Signals
|
|
3571
|
-
this.newMockUrl = signal('');
|
|
3572
|
-
this.newMockMethod = signal('GET');
|
|
3573
|
-
this.newMockStatus = signal('200');
|
|
3574
|
-
this.newMockResponse = signal('');
|
|
3575
|
-
// Computed values
|
|
3576
|
-
this.mockRequests = this.networkMockerService.getMockRequests();
|
|
3577
|
-
this.isMockingEnabled = this.networkMockerService.getIsMockingEnabled();
|
|
3578
|
-
this.hasNoMocks = computed(() => this.mockRequests().length === 0);
|
|
3579
|
-
// Window options
|
|
3580
|
-
this.options = {
|
|
3581
|
-
title: 'Network Mocker',
|
|
3582
|
-
description: 'Intercept and mock HTTP requests for testing and development',
|
|
3583
|
-
isClosable: true,
|
|
3584
|
-
size: 'tall',
|
|
3585
|
-
id: 'ndt-network-mocker',
|
|
3586
|
-
isBeta: true,
|
|
3587
|
-
};
|
|
3588
|
-
// Other properties
|
|
3589
|
-
this.httpMethods = [
|
|
3590
|
-
{ value: 'GET', label: 'GET' },
|
|
3591
|
-
{ value: 'POST', label: 'POST' },
|
|
3592
|
-
{ value: 'PUT', label: 'PUT' },
|
|
3593
|
-
{ value: 'DELETE', label: 'DELETE' },
|
|
3594
|
-
{ value: 'PATCH', label: 'PATCH' },
|
|
3595
|
-
];
|
|
3596
|
-
}
|
|
3597
|
-
// Public methods
|
|
3598
|
-
onAddMock() {
|
|
3599
|
-
const url = this.newMockUrl().trim();
|
|
3600
|
-
if (!url)
|
|
3601
|
-
return;
|
|
3602
|
-
const config = {
|
|
3603
|
-
url,
|
|
3604
|
-
method: this.newMockMethod(),
|
|
3605
|
-
status: parseInt(this.newMockStatus()) || 200,
|
|
3606
|
-
response: this.newMockResponse()
|
|
3607
|
-
? JSON.parse(this.newMockResponse())
|
|
3608
|
-
: {},
|
|
3609
|
-
};
|
|
3610
|
-
this.networkMockerService.addMockRequest(config);
|
|
3611
|
-
// Reset form
|
|
3612
|
-
this.newMockUrl.set('');
|
|
3613
|
-
this.newMockMethod.set('GET');
|
|
3614
|
-
this.newMockStatus.set('200');
|
|
3615
|
-
this.newMockResponse.set('');
|
|
3616
|
-
}
|
|
3617
|
-
onToggleMocking() {
|
|
3618
|
-
if (this.isMockingEnabled()) {
|
|
3619
|
-
this.networkMockerService.disableMocking();
|
|
3620
|
-
}
|
|
3621
|
-
else {
|
|
3622
|
-
this.networkMockerService.enableMocking();
|
|
3623
|
-
}
|
|
3624
|
-
}
|
|
3625
|
-
onToggleMock(mockId) {
|
|
3626
|
-
this.networkMockerService.toggleMockRequest(mockId);
|
|
3627
|
-
}
|
|
3628
|
-
onRemoveMock(mockId) {
|
|
3629
|
-
this.networkMockerService.removeMockRequest(mockId);
|
|
3630
|
-
}
|
|
3631
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarNetworkMockerToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3632
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarNetworkMockerToolComponent, isStandalone: true, selector: "ndt-network-mocker-tool", ngImport: i0, template: `
|
|
3633
|
-
<ndt-toolbar-tool [options]="options" title="Network Mocker" icon="network">
|
|
3634
|
-
<div class="container">
|
|
3635
|
-
<div class="header">
|
|
3636
|
-
<h3>Mock Network Requests</h3>
|
|
3637
|
-
<p>Intercept and mock HTTP requests for testing and development.</p>
|
|
3638
|
-
</div>
|
|
3639
|
-
|
|
3640
|
-
<div class="form">
|
|
3641
|
-
<div class="form-row">
|
|
3642
|
-
<ndt-input
|
|
3643
|
-
[(value)]="newMockUrl"
|
|
3644
|
-
placeholder="Enter URL pattern (e.g., /api/users/*)"
|
|
3645
|
-
ariaLabel="Mock URL"
|
|
3646
|
-
/>
|
|
3647
|
-
<ndt-select
|
|
3648
|
-
[(value)]="newMockMethod"
|
|
3649
|
-
[options]="httpMethods"
|
|
3650
|
-
size="small"
|
|
3651
|
-
ariaLabel="HTTP Method"
|
|
3652
|
-
/>
|
|
3653
|
-
</div>
|
|
3654
|
-
|
|
3655
|
-
<div class="form-row">
|
|
3656
|
-
<ndt-input
|
|
3657
|
-
[(value)]="newMockStatus"
|
|
3658
|
-
placeholder="Status code (default: 200)"
|
|
3659
|
-
type="number"
|
|
3660
|
-
ariaLabel="Status Code"
|
|
3661
|
-
/>
|
|
3662
|
-
<ndt-input
|
|
3663
|
-
[(value)]="newMockResponse"
|
|
3664
|
-
placeholder="Response JSON (optional)"
|
|
3665
|
-
ariaLabel="Response JSON"
|
|
3666
|
-
/>
|
|
3667
|
-
</div>
|
|
3668
|
-
|
|
3669
|
-
<div class="actions">
|
|
3670
|
-
<ndt-button label="Add Mock" icon="import" (click)="onAddMock()" />
|
|
3671
|
-
<ndt-button
|
|
3672
|
-
[label]="
|
|
3673
|
-
isMockingEnabled() ? 'Disable Mocking' : 'Enable Mocking'
|
|
3674
|
-
"
|
|
3675
|
-
[icon]="isMockingEnabled() ? 'trash' : 'network'"
|
|
3676
|
-
(click)="onToggleMocking()"
|
|
3677
|
-
/>
|
|
3678
|
-
</div>
|
|
3679
|
-
</div>
|
|
3680
|
-
|
|
3681
|
-
@if (hasNoMocks()) {
|
|
3682
|
-
<div class="empty">
|
|
3683
|
-
<p>No mock requests configured. Add your first mock above.</p>
|
|
3684
|
-
</div>
|
|
3685
|
-
} @else {
|
|
3686
|
-
<div class="mocks-list">
|
|
3687
|
-
<h4>Configured Mocks</h4>
|
|
3688
|
-
@for (mock of mockRequests(); track mock.id) {
|
|
3689
|
-
<div class="mock-item">
|
|
3690
|
-
<div class="mock-info">
|
|
3691
|
-
<div class="mock-method">{{ mock.method }}</div>
|
|
3692
|
-
<div class="mock-url">{{ mock.url }}</div>
|
|
3693
|
-
<div class="mock-status">{{ mock.status }}</div>
|
|
3694
|
-
</div>
|
|
3695
|
-
<div class="mock-actions">
|
|
3696
|
-
<ndt-button
|
|
3697
|
-
variant="icon"
|
|
3698
|
-
[icon]="mock.isActive ? 'star' : 'moon'"
|
|
3699
|
-
[ariaLabel]="mock.isActive ? 'Disable mock' : 'Enable mock'"
|
|
3700
|
-
(click)="onToggleMock(mock.id)"
|
|
3701
|
-
/>
|
|
3702
|
-
<ndt-button
|
|
3703
|
-
variant="icon"
|
|
3704
|
-
icon="trash"
|
|
3705
|
-
ariaLabel="Remove mock"
|
|
3706
|
-
(click)="onRemoveMock(mock.id)"
|
|
3707
|
-
/>
|
|
3708
|
-
</div>
|
|
3709
|
-
</div>
|
|
3710
|
-
}
|
|
3711
|
-
</div>
|
|
3712
|
-
} @if (isMockingEnabled()) {
|
|
3713
|
-
<div class="status">
|
|
3714
|
-
<p>✅ Network mocking is active</p>
|
|
3715
|
-
</div>
|
|
3716
|
-
}
|
|
3717
|
-
</div>
|
|
3718
|
-
</ndt-toolbar-tool>
|
|
3719
|
-
`, isInline: true, styles: [".container{display:flex;flex-direction:column;height:100%;gap:var(--ndt-spacing-md);padding:var(--ndt-spacing-md)}.header{text-align:center;flex-shrink:0}.header h3{margin:0 0 var(--ndt-spacing-sm) 0;font-size:var(--ndt-font-size-lg);color:var(--ndt-text-primary);font-weight:600}.header p{margin:0;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-muted)}.form{display:flex;flex-direction:column;gap:var(--ndt-spacing-sm);flex-shrink:0;padding:var(--ndt-spacing-md);background:var(--ndt-background-secondary);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium)}.form-row{display:flex;gap:var(--ndt-spacing-sm)}.form-row ndt-input{flex:1}.form-row ndt-select{flex:0 0 120px}.actions{display:flex;gap:var(--ndt-spacing-sm);margin-top:var(--ndt-spacing-sm)}.empty{display:flex;align-items:center;justify-content:center;flex:1;color:var(--ndt-text-muted);text-align:center;font-size:var(--ndt-font-size-sm)}.mocks-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-sm);flex:1;min-height:0;overflow-y:auto}.mocks-list h4{margin:0 0 var(--ndt-spacing-sm) 0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary);font-weight:600}.mocks-list::-webkit-scrollbar{width:8px}.mocks-list::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}.mocks-list::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px}:is():hover{background:var(--ndt-hover-bg)}.mock-item{display:flex;align-items:center;gap:var(--ndt-spacing-sm);padding:var(--ndt-spacing-sm);background:var(--ndt-background-secondary);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small)}.mock-item .mock-info{flex:1;display:flex;align-items:center;gap:var(--ndt-spacing-sm)}.mock-item .mock-method{font-weight:600;font-size:var(--ndt-font-size-xs);color:var(--ndt-primary);background:var(--ndt-primary-background);padding:2px 6px;border-radius:var(--ndt-border-radius-small);min-width:40px;text-align:center}.mock-item .mock-url{flex:1;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-primary);font-family:monospace}.mock-item .mock-status{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted);min-width:30px;text-align:center}.mock-item .mock-actions{display:flex;gap:var(--ndt-spacing-xs)}.status{text-align:center;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);background:var(--ndt-success-background);border:1px solid var(--ndt-success-border);border-radius:var(--ndt-border-radius-small);color:var(--ndt-success-text);font-size:var(--ndt-font-size-sm);flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: DevToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "title"] }, { kind: "component", type: DevToolbarButtonComponent, selector: "ndt-button", inputs: ["type", "variant", "icon", "label", "ariaLabel", "isActive"] }, { kind: "component", type: DevToolbarInputComponent, selector: "ndt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3720
|
-
}
|
|
3721
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarNetworkMockerToolComponent, decorators: [{
|
|
3722
|
-
type: Component,
|
|
3723
|
-
args: [{ selector: 'ndt-network-mocker-tool', standalone: true, imports: [
|
|
3724
|
-
FormsModule,
|
|
3725
|
-
DevToolbarToolComponent,
|
|
3726
|
-
DevToolbarButtonComponent,
|
|
3727
|
-
DevToolbarInputComponent,
|
|
3728
|
-
DevToolbarSelectComponent,
|
|
3729
|
-
], template: `
|
|
3730
|
-
<ndt-toolbar-tool [options]="options" title="Network Mocker" icon="network">
|
|
3731
|
-
<div class="container">
|
|
3732
|
-
<div class="header">
|
|
3733
|
-
<h3>Mock Network Requests</h3>
|
|
3734
|
-
<p>Intercept and mock HTTP requests for testing and development.</p>
|
|
3735
|
-
</div>
|
|
3736
|
-
|
|
3737
|
-
<div class="form">
|
|
3738
|
-
<div class="form-row">
|
|
3739
|
-
<ndt-input
|
|
3740
|
-
[(value)]="newMockUrl"
|
|
3741
|
-
placeholder="Enter URL pattern (e.g., /api/users/*)"
|
|
3742
|
-
ariaLabel="Mock URL"
|
|
3743
|
-
/>
|
|
3744
|
-
<ndt-select
|
|
3745
|
-
[(value)]="newMockMethod"
|
|
3746
|
-
[options]="httpMethods"
|
|
3747
|
-
size="small"
|
|
3748
|
-
ariaLabel="HTTP Method"
|
|
3749
|
-
/>
|
|
3750
|
-
</div>
|
|
3751
|
-
|
|
3752
|
-
<div class="form-row">
|
|
3753
|
-
<ndt-input
|
|
3754
|
-
[(value)]="newMockStatus"
|
|
3755
|
-
placeholder="Status code (default: 200)"
|
|
3756
|
-
type="number"
|
|
3757
|
-
ariaLabel="Status Code"
|
|
3758
|
-
/>
|
|
3759
|
-
<ndt-input
|
|
3760
|
-
[(value)]="newMockResponse"
|
|
3761
|
-
placeholder="Response JSON (optional)"
|
|
3762
|
-
ariaLabel="Response JSON"
|
|
3763
|
-
/>
|
|
3764
|
-
</div>
|
|
3765
|
-
|
|
3766
|
-
<div class="actions">
|
|
3767
|
-
<ndt-button label="Add Mock" icon="import" (click)="onAddMock()" />
|
|
3768
|
-
<ndt-button
|
|
3769
|
-
[label]="
|
|
3770
|
-
isMockingEnabled() ? 'Disable Mocking' : 'Enable Mocking'
|
|
3771
|
-
"
|
|
3772
|
-
[icon]="isMockingEnabled() ? 'trash' : 'network'"
|
|
3773
|
-
(click)="onToggleMocking()"
|
|
3774
|
-
/>
|
|
3775
|
-
</div>
|
|
3776
|
-
</div>
|
|
3777
|
-
|
|
3778
|
-
@if (hasNoMocks()) {
|
|
3779
|
-
<div class="empty">
|
|
3780
|
-
<p>No mock requests configured. Add your first mock above.</p>
|
|
3781
|
-
</div>
|
|
3782
|
-
} @else {
|
|
3783
|
-
<div class="mocks-list">
|
|
3784
|
-
<h4>Configured Mocks</h4>
|
|
3785
|
-
@for (mock of mockRequests(); track mock.id) {
|
|
3786
|
-
<div class="mock-item">
|
|
3787
|
-
<div class="mock-info">
|
|
3788
|
-
<div class="mock-method">{{ mock.method }}</div>
|
|
3789
|
-
<div class="mock-url">{{ mock.url }}</div>
|
|
3790
|
-
<div class="mock-status">{{ mock.status }}</div>
|
|
3791
|
-
</div>
|
|
3792
|
-
<div class="mock-actions">
|
|
3793
|
-
<ndt-button
|
|
3794
|
-
variant="icon"
|
|
3795
|
-
[icon]="mock.isActive ? 'star' : 'moon'"
|
|
3796
|
-
[ariaLabel]="mock.isActive ? 'Disable mock' : 'Enable mock'"
|
|
3797
|
-
(click)="onToggleMock(mock.id)"
|
|
3798
|
-
/>
|
|
3799
|
-
<ndt-button
|
|
3800
|
-
variant="icon"
|
|
3801
|
-
icon="trash"
|
|
3802
|
-
ariaLabel="Remove mock"
|
|
3803
|
-
(click)="onRemoveMock(mock.id)"
|
|
3804
|
-
/>
|
|
3805
|
-
</div>
|
|
3806
|
-
</div>
|
|
3807
|
-
}
|
|
3808
|
-
</div>
|
|
3809
|
-
} @if (isMockingEnabled()) {
|
|
3810
|
-
<div class="status">
|
|
3811
|
-
<p>✅ Network mocking is active</p>
|
|
3812
|
-
</div>
|
|
3813
|
-
}
|
|
3814
|
-
</div>
|
|
3815
|
-
</ndt-toolbar-tool>
|
|
3816
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{display:flex;flex-direction:column;height:100%;gap:var(--ndt-spacing-md);padding:var(--ndt-spacing-md)}.header{text-align:center;flex-shrink:0}.header h3{margin:0 0 var(--ndt-spacing-sm) 0;font-size:var(--ndt-font-size-lg);color:var(--ndt-text-primary);font-weight:600}.header p{margin:0;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-muted)}.form{display:flex;flex-direction:column;gap:var(--ndt-spacing-sm);flex-shrink:0;padding:var(--ndt-spacing-md);background:var(--ndt-background-secondary);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-medium)}.form-row{display:flex;gap:var(--ndt-spacing-sm)}.form-row ndt-input{flex:1}.form-row ndt-select{flex:0 0 120px}.actions{display:flex;gap:var(--ndt-spacing-sm);margin-top:var(--ndt-spacing-sm)}.empty{display:flex;align-items:center;justify-content:center;flex:1;color:var(--ndt-text-muted);text-align:center;font-size:var(--ndt-font-size-sm)}.mocks-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-sm);flex:1;min-height:0;overflow-y:auto}.mocks-list h4{margin:0 0 var(--ndt-spacing-sm) 0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary);font-weight:600}.mocks-list::-webkit-scrollbar{width:8px}.mocks-list::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}.mocks-list::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px}:is():hover{background:var(--ndt-hover-bg)}.mock-item{display:flex;align-items:center;gap:var(--ndt-spacing-sm);padding:var(--ndt-spacing-sm);background:var(--ndt-background-secondary);border:1px solid var(--ndt-border-primary);border-radius:var(--ndt-border-radius-small)}.mock-item .mock-info{flex:1;display:flex;align-items:center;gap:var(--ndt-spacing-sm)}.mock-item .mock-method{font-weight:600;font-size:var(--ndt-font-size-xs);color:var(--ndt-primary);background:var(--ndt-primary-background);padding:2px 6px;border-radius:var(--ndt-border-radius-small);min-width:40px;text-align:center}.mock-item .mock-url{flex:1;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-primary);font-family:monospace}.mock-item .mock-status{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted);min-width:30px;text-align:center}.mock-item .mock-actions{display:flex;gap:var(--ndt-spacing-xs)}.status{text-align:center;padding:var(--ndt-spacing-sm) var(--ndt-spacing-md);background:var(--ndt-success-background);border:1px solid var(--ndt-success-border);border-radius:var(--ndt-border-radius-small);color:var(--ndt-success-text);font-size:var(--ndt-font-size-sm);flex-shrink:0}\n"] }]
|
|
3817
|
-
}] });
|
|
3818
|
-
|
|
3819
3558
|
class DevToolbarInternalPermissionsService {
|
|
3820
3559
|
constructor() {
|
|
3821
3560
|
this.STORAGE_KEY = 'permissions';
|
|
@@ -4075,7 +3814,7 @@ class DevToolbarPermissionsToolComponent {
|
|
|
4075
3814
|
}
|
|
4076
3815
|
</div>
|
|
4077
3816
|
</ndt-toolbar-tool>
|
|
4078
|
-
`, isInline: true, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md)}.header ndt-input{flex
|
|
3817
|
+
`, isInline: true, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md)}.header ndt-input{flex:1}.header .filter-wrapper{flex:0 0 auto;display:flex;align-items:center;gap:var(--ndt-spacing-md)}.header .filter-wrapper .filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}.header .filter-wrapper ndt-select{flex:0 0 auto;min-width:180px}.empty{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-warning-border);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:var(--ndt-warning-background);color:var(--ndt-text-muted)}.empty p{margin:0}.empty .hint{font-size:var(--ndt-font-size-xs)}.permission-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-sm);scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.permission-list::-webkit-scrollbar{width:8px}.permission-list::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}.permission-list::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px}:is():hover{background:var(--ndt-hover-bg)}.permission{display:flex;flex-direction:row;gap:var(--ndt-spacing-sm);background:var(--ndt-background-secondary)}.permission .info{flex:0 0 65%}.permission .info h3{margin:0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.permission .info p{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted)}.permission ndt-select{flex:0 0 35%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: DevToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "title"] }, { kind: "component", type: DevToolbarInputComponent, selector: "ndt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarSelectComponent, selector: "ndt-select", inputs: ["value", "options", "ariaLabel", "label", "size"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4079
3818
|
}
|
|
4080
3819
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarPermissionsToolComponent, decorators: [{
|
|
4081
3820
|
type: Component,
|
|
@@ -4142,7 +3881,583 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
4142
3881
|
}
|
|
4143
3882
|
</div>
|
|
4144
3883
|
</ndt-toolbar-tool>
|
|
4145
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md)}.header ndt-input{flex
|
|
3884
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md)}.header ndt-input{flex:1}.header .filter-wrapper{flex:0 0 auto;display:flex;align-items:center;gap:var(--ndt-spacing-md)}.header .filter-wrapper .filter-icon{width:18px;height:18px;flex-shrink:0;opacity:.6}.header .filter-wrapper ndt-select{flex:0 0 auto;min-width:180px}.empty{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-warning-border);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:var(--ndt-warning-background);color:var(--ndt-text-muted)}.empty p{margin:0}.empty .hint{font-size:var(--ndt-font-size-xs)}.permission-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-sm);scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.permission-list::-webkit-scrollbar{width:8px}.permission-list::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}.permission-list::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px}:is():hover{background:var(--ndt-hover-bg)}.permission{display:flex;flex-direction:row;gap:var(--ndt-spacing-sm);background:var(--ndt-background-secondary)}.permission .info{flex:0 0 65%}.permission .info h3{margin:0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary)}.permission .info p{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted)}.permission ndt-select{flex:0 0 35%}\n"] }]
|
|
3885
|
+
}] });
|
|
3886
|
+
|
|
3887
|
+
/**
|
|
3888
|
+
* Internal service for managing presets state.
|
|
3889
|
+
* Handles CRUD operations, captures current toolbar config, and applies presets.
|
|
3890
|
+
*/
|
|
3891
|
+
class DevToolbarInternalPresetsService {
|
|
3892
|
+
constructor() {
|
|
3893
|
+
this.STORAGE_KEY = 'presets';
|
|
3894
|
+
this.storageService = inject(DevToolsStorageService);
|
|
3895
|
+
// Inject all other tool internal services (for reading/writing state)
|
|
3896
|
+
this.featureFlagsService = inject(DevToolbarInternalFeatureFlagService);
|
|
3897
|
+
this.languageService = inject(DevToolbarInternalLanguageService);
|
|
3898
|
+
this.permissionsService = inject(DevToolbarInternalPermissionsService);
|
|
3899
|
+
this.appFeaturesService = inject(DevToolbarInternalAppFeaturesService);
|
|
3900
|
+
this.presetsSubject = new BehaviorSubject([]);
|
|
3901
|
+
this.presets$ = this.presetsSubject.asObservable();
|
|
3902
|
+
this.presets = toSignal(this.presets$, { initialValue: [] });
|
|
3903
|
+
this.loadPresets();
|
|
3904
|
+
}
|
|
3905
|
+
/**
|
|
3906
|
+
* Capture current toolbar state as a new preset
|
|
3907
|
+
*/
|
|
3908
|
+
saveCurrentAsPreset(name, description) {
|
|
3909
|
+
const preset = {
|
|
3910
|
+
id: this.generateId(),
|
|
3911
|
+
name,
|
|
3912
|
+
description,
|
|
3913
|
+
createdAt: new Date().toISOString(),
|
|
3914
|
+
updatedAt: new Date().toISOString(),
|
|
3915
|
+
config: this.captureCurrentConfig(),
|
|
3916
|
+
};
|
|
3917
|
+
const presets = [...this.presetsSubject.value, preset];
|
|
3918
|
+
this.presetsSubject.next(presets);
|
|
3919
|
+
this.storageService.set(this.STORAGE_KEY, presets);
|
|
3920
|
+
return preset;
|
|
3921
|
+
}
|
|
3922
|
+
/**
|
|
3923
|
+
* Apply a preset to all tools (THIS IS THE KEY METHOD)
|
|
3924
|
+
*/
|
|
3925
|
+
async applyPreset(presetId) {
|
|
3926
|
+
const preset = this.presetsSubject.value.find((p) => p.id === presetId);
|
|
3927
|
+
if (!preset)
|
|
3928
|
+
return;
|
|
3929
|
+
// Apply to each tool's internal service
|
|
3930
|
+
this.featureFlagsService.applyPresetFlags(preset.config.featureFlags);
|
|
3931
|
+
await this.languageService.applyPresetLanguage(preset.config.language);
|
|
3932
|
+
this.permissionsService.applyPresetPermissions(preset.config.permissions);
|
|
3933
|
+
this.appFeaturesService.applyForcedState(preset.config.appFeatures);
|
|
3934
|
+
}
|
|
3935
|
+
/**
|
|
3936
|
+
* Update an existing preset with current toolbar state
|
|
3937
|
+
*/
|
|
3938
|
+
updatePreset(presetId) {
|
|
3939
|
+
const presets = this.presetsSubject.value.map((preset) => {
|
|
3940
|
+
if (preset.id === presetId) {
|
|
3941
|
+
return {
|
|
3942
|
+
...preset,
|
|
3943
|
+
updatedAt: new Date().toISOString(),
|
|
3944
|
+
config: this.captureCurrentConfig(),
|
|
3945
|
+
};
|
|
3946
|
+
}
|
|
3947
|
+
return preset;
|
|
3948
|
+
});
|
|
3949
|
+
this.presetsSubject.next(presets);
|
|
3950
|
+
this.storageService.set(this.STORAGE_KEY, presets);
|
|
3951
|
+
}
|
|
3952
|
+
/**
|
|
3953
|
+
* Delete a preset
|
|
3954
|
+
*/
|
|
3955
|
+
deletePreset(presetId) {
|
|
3956
|
+
const presets = this.presetsSubject.value.filter((p) => p.id !== presetId);
|
|
3957
|
+
this.presetsSubject.next(presets);
|
|
3958
|
+
this.storageService.set(this.STORAGE_KEY, presets);
|
|
3959
|
+
}
|
|
3960
|
+
/**
|
|
3961
|
+
* Add a preset (used for import)
|
|
3962
|
+
*/
|
|
3963
|
+
addPreset(preset) {
|
|
3964
|
+
// Generate new ID to avoid conflicts
|
|
3965
|
+
const newPreset = {
|
|
3966
|
+
...preset,
|
|
3967
|
+
id: this.generateId(),
|
|
3968
|
+
createdAt: new Date().toISOString(),
|
|
3969
|
+
updatedAt: new Date().toISOString(),
|
|
3970
|
+
};
|
|
3971
|
+
const presets = [...this.presetsSubject.value, newPreset];
|
|
3972
|
+
this.presetsSubject.next(presets);
|
|
3973
|
+
this.storageService.set(this.STORAGE_KEY, presets);
|
|
3974
|
+
return newPreset;
|
|
3975
|
+
}
|
|
3976
|
+
/**
|
|
3977
|
+
* Get a preset by ID
|
|
3978
|
+
*/
|
|
3979
|
+
getPresetById(presetId) {
|
|
3980
|
+
return this.presetsSubject.value.find((p) => p.id === presetId);
|
|
3981
|
+
}
|
|
3982
|
+
/**
|
|
3983
|
+
* Capture current configuration from all tools
|
|
3984
|
+
*/
|
|
3985
|
+
captureCurrentConfig() {
|
|
3986
|
+
return {
|
|
3987
|
+
featureFlags: this.featureFlagsService.getCurrentForcedState(),
|
|
3988
|
+
language: this.languageService.getCurrentForcedLanguage(),
|
|
3989
|
+
permissions: this.permissionsService.getCurrentForcedState(),
|
|
3990
|
+
appFeatures: this.appFeaturesService.getCurrentForcedState(),
|
|
3991
|
+
};
|
|
3992
|
+
}
|
|
3993
|
+
/**
|
|
3994
|
+
* Load presets from localStorage
|
|
3995
|
+
*/
|
|
3996
|
+
loadPresets() {
|
|
3997
|
+
try {
|
|
3998
|
+
const saved = this.storageService.get(this.STORAGE_KEY);
|
|
3999
|
+
if (saved && Array.isArray(saved)) {
|
|
4000
|
+
this.presetsSubject.next(saved);
|
|
4001
|
+
}
|
|
4002
|
+
}
|
|
4003
|
+
catch (error) {
|
|
4004
|
+
console.error('Failed to load presets from localStorage:', error);
|
|
4005
|
+
}
|
|
4006
|
+
}
|
|
4007
|
+
/**
|
|
4008
|
+
* Generate unique preset ID
|
|
4009
|
+
*/
|
|
4010
|
+
generateId() {
|
|
4011
|
+
return `preset-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
|
|
4012
|
+
}
|
|
4013
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalPresetsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4014
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalPresetsService, providedIn: 'root' }); }
|
|
4015
|
+
}
|
|
4016
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarInternalPresetsService, decorators: [{
|
|
4017
|
+
type: Injectable,
|
|
4018
|
+
args: [{ providedIn: 'root' }]
|
|
4019
|
+
}], ctorParameters: () => [] });
|
|
4020
|
+
|
|
4021
|
+
class DevToolbarPresetsToolComponent {
|
|
4022
|
+
constructor() {
|
|
4023
|
+
// Injects
|
|
4024
|
+
this.presetsService = inject(DevToolbarInternalPresetsService);
|
|
4025
|
+
this.featureFlagsService = inject(DevToolbarInternalFeatureFlagService);
|
|
4026
|
+
this.permissionsService = inject(DevToolbarInternalPermissionsService);
|
|
4027
|
+
this.appFeaturesService = inject(DevToolbarInternalAppFeaturesService);
|
|
4028
|
+
this.languageService = inject(DevToolbarInternalLanguageService);
|
|
4029
|
+
// Signals
|
|
4030
|
+
this.viewMode = signal('list');
|
|
4031
|
+
this.searchQuery = signal('');
|
|
4032
|
+
this.presetName = signal('');
|
|
4033
|
+
this.presetDescription = signal('');
|
|
4034
|
+
this.presets = this.presetsService.presets;
|
|
4035
|
+
this.filteredPresets = computed(() => {
|
|
4036
|
+
const query = this.searchQuery().toLowerCase();
|
|
4037
|
+
return this.presets().filter((preset) => preset.name.toLowerCase().includes(query) ||
|
|
4038
|
+
preset.description?.toLowerCase().includes(query));
|
|
4039
|
+
});
|
|
4040
|
+
this.hasNoPresets = computed(() => this.presets().length === 0);
|
|
4041
|
+
this.hasNoFilteredPresets = computed(() => this.filteredPresets().length === 0);
|
|
4042
|
+
// Other properties
|
|
4043
|
+
this.options = {
|
|
4044
|
+
title: 'Presets',
|
|
4045
|
+
description: 'Save and load toolbar configurations',
|
|
4046
|
+
isClosable: true,
|
|
4047
|
+
size: 'tall',
|
|
4048
|
+
id: 'ndt-presets',
|
|
4049
|
+
isBeta: true,
|
|
4050
|
+
};
|
|
4051
|
+
}
|
|
4052
|
+
// Public methods
|
|
4053
|
+
onSearchChange(query) {
|
|
4054
|
+
this.searchQuery.set(query);
|
|
4055
|
+
}
|
|
4056
|
+
onSwitchToCreateMode() {
|
|
4057
|
+
this.viewMode.set('create');
|
|
4058
|
+
this.presetName.set('');
|
|
4059
|
+
this.presetDescription.set('');
|
|
4060
|
+
}
|
|
4061
|
+
onSwitchToListMode() {
|
|
4062
|
+
this.viewMode.set('list');
|
|
4063
|
+
}
|
|
4064
|
+
onSavePreset(event) {
|
|
4065
|
+
event.preventDefault();
|
|
4066
|
+
if (!this.presetName())
|
|
4067
|
+
return;
|
|
4068
|
+
this.presetsService.saveCurrentAsPreset(this.presetName(), this.presetDescription());
|
|
4069
|
+
this.onSwitchToListMode();
|
|
4070
|
+
}
|
|
4071
|
+
onApplyPreset(presetId) {
|
|
4072
|
+
this.presetsService.applyPreset(presetId);
|
|
4073
|
+
}
|
|
4074
|
+
onUpdatePreset(presetId) {
|
|
4075
|
+
this.presetsService.updatePreset(presetId);
|
|
4076
|
+
}
|
|
4077
|
+
onExportPreset(presetId) {
|
|
4078
|
+
const preset = this.presets().find((p) => p.id === presetId);
|
|
4079
|
+
if (!preset)
|
|
4080
|
+
return;
|
|
4081
|
+
const json = JSON.stringify(preset, null, 2);
|
|
4082
|
+
const blob = new Blob([json], { type: 'application/json' });
|
|
4083
|
+
const url = URL.createObjectURL(blob);
|
|
4084
|
+
const link = document.createElement('a');
|
|
4085
|
+
link.href = url;
|
|
4086
|
+
link.download = `preset-${preset.name.toLowerCase().replace(/\s+/g, '-')}.json`;
|
|
4087
|
+
link.click();
|
|
4088
|
+
URL.revokeObjectURL(url);
|
|
4089
|
+
}
|
|
4090
|
+
onDeletePreset(presetId) {
|
|
4091
|
+
if (confirm('Are you sure you want to delete this preset?')) {
|
|
4092
|
+
this.presetsService.deletePreset(presetId);
|
|
4093
|
+
}
|
|
4094
|
+
}
|
|
4095
|
+
// Protected methods
|
|
4096
|
+
getCurrentFlagsCount() {
|
|
4097
|
+
const state = this.featureFlagsService.getCurrentForcedState();
|
|
4098
|
+
return state.enabled.length + state.disabled.length;
|
|
4099
|
+
}
|
|
4100
|
+
getCurrentPermissionsCount() {
|
|
4101
|
+
const state = this.permissionsService.getCurrentForcedState();
|
|
4102
|
+
return state.granted.length + state.denied.length;
|
|
4103
|
+
}
|
|
4104
|
+
getCurrentAppFeaturesCount() {
|
|
4105
|
+
const state = this.appFeaturesService.getCurrentForcedState();
|
|
4106
|
+
return state.enabled.length + state.disabled.length;
|
|
4107
|
+
}
|
|
4108
|
+
getCurrentLanguage() {
|
|
4109
|
+
return this.languageService.getCurrentForcedLanguage() || 'Not Forced';
|
|
4110
|
+
}
|
|
4111
|
+
formatDate(isoString) {
|
|
4112
|
+
return new Date(isoString).toLocaleDateString();
|
|
4113
|
+
}
|
|
4114
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarPresetsToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4115
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarPresetsToolComponent, isStandalone: true, selector: "ndt-presets-tool", ngImport: i0, template: `
|
|
4116
|
+
<ndt-toolbar-tool [options]="options" title="Presets" icon="layout">
|
|
4117
|
+
<div class="container">
|
|
4118
|
+
<!-- Mode Toggle -->
|
|
4119
|
+
@if (!hasNoPresets() || viewMode() === 'create') {
|
|
4120
|
+
<div class="header">
|
|
4121
|
+
@if (viewMode() === 'list') {
|
|
4122
|
+
<ndt-input
|
|
4123
|
+
[value]="searchQuery()"
|
|
4124
|
+
(valueChange)="onSearchChange($event)"
|
|
4125
|
+
placeholder="Search presets..."
|
|
4126
|
+
[ariaLabel]="'Search presets'"
|
|
4127
|
+
/>
|
|
4128
|
+
<ndt-button
|
|
4129
|
+
(click)="onSwitchToCreateMode()"
|
|
4130
|
+
[ariaLabel]="'Create new preset'"
|
|
4131
|
+
>
|
|
4132
|
+
New Preset
|
|
4133
|
+
</ndt-button>
|
|
4134
|
+
} @else {
|
|
4135
|
+
<ndt-button
|
|
4136
|
+
(click)="onSwitchToListMode()"
|
|
4137
|
+
[ariaLabel]="'Back to list'"
|
|
4138
|
+
>
|
|
4139
|
+
← Back to List
|
|
4140
|
+
</ndt-button>
|
|
4141
|
+
}
|
|
4142
|
+
</div>
|
|
4143
|
+
}
|
|
4144
|
+
|
|
4145
|
+
<!-- Create Form -->
|
|
4146
|
+
@if (viewMode() === 'create') {
|
|
4147
|
+
<form (submit)="onSavePreset($event)" class="preset-form">
|
|
4148
|
+
<ndt-input
|
|
4149
|
+
label="Preset Name"
|
|
4150
|
+
[value]="presetName()"
|
|
4151
|
+
(valueChange)="presetName.set($event)"
|
|
4152
|
+
placeholder="e.g., Admin User - Full Access"
|
|
4153
|
+
[ariaLabel]="'Preset name'"
|
|
4154
|
+
/>
|
|
4155
|
+
<ndt-input
|
|
4156
|
+
label="Description (optional)"
|
|
4157
|
+
[value]="presetDescription()"
|
|
4158
|
+
(valueChange)="presetDescription.set($event)"
|
|
4159
|
+
placeholder="Brief description of this preset"
|
|
4160
|
+
[ariaLabel]="'Preset description'"
|
|
4161
|
+
/>
|
|
4162
|
+
|
|
4163
|
+
<!-- Summary of what will be saved -->
|
|
4164
|
+
<div class="preset-summary">
|
|
4165
|
+
<h4>Configuration to Save:</h4>
|
|
4166
|
+
<ul>
|
|
4167
|
+
<li>Feature Flags: {{ getCurrentFlagsCount() }} forced</li>
|
|
4168
|
+
<li>Permissions: {{ getCurrentPermissionsCount() }} forced</li>
|
|
4169
|
+
<li>App Features: {{ getCurrentAppFeaturesCount() }} forced</li>
|
|
4170
|
+
<li>Language: {{ getCurrentLanguage() }}</li>
|
|
4171
|
+
</ul>
|
|
4172
|
+
</div>
|
|
4173
|
+
|
|
4174
|
+
<div class="form-actions">
|
|
4175
|
+
<ndt-button type="submit">Save Preset</ndt-button>
|
|
4176
|
+
</div>
|
|
4177
|
+
</form>
|
|
4178
|
+
}
|
|
4179
|
+
|
|
4180
|
+
<!-- Empty State -->
|
|
4181
|
+
@if (viewMode() === 'list' && hasNoPresets()) {
|
|
4182
|
+
<div class="empty">
|
|
4183
|
+
<p>No presets saved yet</p>
|
|
4184
|
+
<p class="hint">
|
|
4185
|
+
Save the current toolbar configuration as a preset for quick access
|
|
4186
|
+
</p>
|
|
4187
|
+
<ndt-button (click)="onSwitchToCreateMode()">
|
|
4188
|
+
Create Your First Preset
|
|
4189
|
+
</ndt-button>
|
|
4190
|
+
</div>
|
|
4191
|
+
} @else if (viewMode() === 'list' && hasNoFilteredPresets()) {
|
|
4192
|
+
<div class="empty">
|
|
4193
|
+
<p>No presets match your search</p>
|
|
4194
|
+
</div>
|
|
4195
|
+
} @else if (viewMode() === 'list') {
|
|
4196
|
+
<!-- Preset List -->
|
|
4197
|
+
<div class="preset-list">
|
|
4198
|
+
@for (preset of filteredPresets(); track preset.id) {
|
|
4199
|
+
<div class="preset-card">
|
|
4200
|
+
<div class="preset-card__header">
|
|
4201
|
+
<h3>{{ preset.name }}</h3>
|
|
4202
|
+
<div class="preset-card__actions">
|
|
4203
|
+
<button
|
|
4204
|
+
class="icon-button"
|
|
4205
|
+
(click)="onApplyPreset(preset.id)"
|
|
4206
|
+
[attr.aria-label]="'Apply preset ' + preset.name"
|
|
4207
|
+
title="Apply preset"
|
|
4208
|
+
>
|
|
4209
|
+
<ndt-icon name="refresh" />
|
|
4210
|
+
</button>
|
|
4211
|
+
<button
|
|
4212
|
+
class="icon-button"
|
|
4213
|
+
(click)="onUpdatePreset(preset.id)"
|
|
4214
|
+
[attr.aria-label]="'Update preset ' + preset.name"
|
|
4215
|
+
title="Update with current state"
|
|
4216
|
+
>
|
|
4217
|
+
<ndt-icon name="gear" />
|
|
4218
|
+
</button>
|
|
4219
|
+
<button
|
|
4220
|
+
class="icon-button"
|
|
4221
|
+
(click)="onExportPreset(preset.id)"
|
|
4222
|
+
[attr.aria-label]="'Export preset ' + preset.name"
|
|
4223
|
+
title="Export as JSON"
|
|
4224
|
+
>
|
|
4225
|
+
<ndt-icon name="export" />
|
|
4226
|
+
</button>
|
|
4227
|
+
<button
|
|
4228
|
+
class="icon-button"
|
|
4229
|
+
(click)="onDeletePreset(preset.id)"
|
|
4230
|
+
[attr.aria-label]="'Delete preset ' + preset.name"
|
|
4231
|
+
title="Delete preset"
|
|
4232
|
+
>
|
|
4233
|
+
<ndt-icon name="trash" />
|
|
4234
|
+
</button>
|
|
4235
|
+
</div>
|
|
4236
|
+
</div>
|
|
4237
|
+
@if (preset.description) {
|
|
4238
|
+
<p class="preset-card__description">{{ preset.description }}</p>
|
|
4239
|
+
}
|
|
4240
|
+
<div class="preset-card__meta">
|
|
4241
|
+
<span>Updated: {{ formatDate(preset.updatedAt) }}</span>
|
|
4242
|
+
</div>
|
|
4243
|
+
<!-- Preview of preset config -->
|
|
4244
|
+
<div class="preset-card__preview">
|
|
4245
|
+
@if (preset.config.featureFlags.enabled.length > 0 ||
|
|
4246
|
+
preset.config.featureFlags.disabled.length > 0) {
|
|
4247
|
+
<span class="badge">
|
|
4248
|
+
{{
|
|
4249
|
+
preset.config.featureFlags.enabled.length +
|
|
4250
|
+
preset.config.featureFlags.disabled.length
|
|
4251
|
+
}}
|
|
4252
|
+
flags
|
|
4253
|
+
</span>
|
|
4254
|
+
} @if (preset.config.permissions.granted.length > 0 ||
|
|
4255
|
+
preset.config.permissions.denied.length > 0) {
|
|
4256
|
+
<span class="badge">
|
|
4257
|
+
{{
|
|
4258
|
+
preset.config.permissions.granted.length +
|
|
4259
|
+
preset.config.permissions.denied.length
|
|
4260
|
+
}}
|
|
4261
|
+
perms
|
|
4262
|
+
</span>
|
|
4263
|
+
} @if (preset.config.appFeatures.enabled.length > 0 ||
|
|
4264
|
+
preset.config.appFeatures.disabled.length > 0) {
|
|
4265
|
+
<span class="badge">
|
|
4266
|
+
{{
|
|
4267
|
+
preset.config.appFeatures.enabled.length +
|
|
4268
|
+
preset.config.appFeatures.disabled.length
|
|
4269
|
+
}}
|
|
4270
|
+
features
|
|
4271
|
+
</span>
|
|
4272
|
+
} @if (preset.config.language) {
|
|
4273
|
+
<span class="badge">{{ preset.config.language }}</span>
|
|
4274
|
+
}
|
|
4275
|
+
</div>
|
|
4276
|
+
</div>
|
|
4277
|
+
}
|
|
4278
|
+
</div>
|
|
4279
|
+
}
|
|
4280
|
+
</div>
|
|
4281
|
+
</ndt-toolbar-tool>
|
|
4282
|
+
`, isInline: true, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md)}.header ndt-input{flex:1}.header ndt-button{flex-shrink:0}.empty{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-border-subtle);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:transparent;color:var(--ndt-text-muted);text-align:center}.empty p{margin:0}.empty .hint{font-size:var(--ndt-font-size-xs)}.preset-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-sm);scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.preset-list::-webkit-scrollbar{width:8px}.preset-list::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}.preset-list::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px}:is():hover{background:var(--ndt-hover-bg)}.preset-card{background:var(--ndt-background-secondary);padding:var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-medium);display:flex;flex-direction:column;gap:var(--ndt-spacing-sm)}.preset-card__header{display:flex;justify-content:space-between;align-items:center;gap:var(--ndt-spacing-sm)}.preset-card__header h3{margin:0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary);flex:1}.preset-card__actions{display:flex;gap:var(--ndt-spacing-xs)}.icon-button{background:transparent;border:none;cursor:pointer;padding:var(--ndt-spacing-xs);border-radius:var(--ndt-border-radius-small);color:var(--ndt-text-secondary);display:flex;align-items:center;justify-content:center}.icon-button:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.icon-button ndt-icon{width:16px;height:16px}.preset-card__description{margin:0;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-secondary)}.preset-card__meta{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted)}.preset-card__meta span{margin-right:var(--ndt-spacing-sm)}.preset-card__preview{display:flex;gap:var(--ndt-spacing-xs);flex-wrap:wrap}.badge{background:var(--ndt-primary-color);color:#fff;padding:2px 8px;border-radius:12px;font-size:var(--ndt-font-size-xs);font-weight:500}.preset-form{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--ndt-spacing-md);padding:var(--ndt-spacing-md)}.preset-form ndt-input{width:100%}.preset-summary{background:var(--ndt-background-secondary);padding:var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-medium)}.preset-summary h4{margin:0 0 var(--ndt-spacing-sm) 0;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-primary)}.preset-summary ul{margin:0;padding-left:var(--ndt-spacing-md);color:var(--ndt-text-secondary);font-size:var(--ndt-font-size-sm)}.preset-summary ul li{margin-bottom:var(--ndt-spacing-xs)}.form-actions{display:flex;justify-content:flex-end;gap:var(--ndt-spacing-sm)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DevToolbarToolComponent, selector: "ndt-toolbar-tool", inputs: ["options", "icon", "title"] }, { kind: "component", type: DevToolbarInputComponent, selector: "ndt-input", inputs: ["value", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange"] }, { kind: "component", type: DevToolbarButtonComponent, selector: "ndt-button", inputs: ["type", "variant", "icon", "label", "ariaLabel", "isActive"] }, { kind: "component", type: DevToolbarIconComponent, selector: "ndt-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4283
|
+
}
|
|
4284
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarPresetsToolComponent, decorators: [{
|
|
4285
|
+
type: Component,
|
|
4286
|
+
args: [{ selector: 'ndt-presets-tool', standalone: true, imports: [
|
|
4287
|
+
FormsModule,
|
|
4288
|
+
DevToolbarToolComponent,
|
|
4289
|
+
DevToolbarInputComponent,
|
|
4290
|
+
DevToolbarButtonComponent,
|
|
4291
|
+
DevToolbarIconComponent,
|
|
4292
|
+
DevToolbarWindowComponent,
|
|
4293
|
+
], template: `
|
|
4294
|
+
<ndt-toolbar-tool [options]="options" title="Presets" icon="layout">
|
|
4295
|
+
<div class="container">
|
|
4296
|
+
<!-- Mode Toggle -->
|
|
4297
|
+
@if (!hasNoPresets() || viewMode() === 'create') {
|
|
4298
|
+
<div class="header">
|
|
4299
|
+
@if (viewMode() === 'list') {
|
|
4300
|
+
<ndt-input
|
|
4301
|
+
[value]="searchQuery()"
|
|
4302
|
+
(valueChange)="onSearchChange($event)"
|
|
4303
|
+
placeholder="Search presets..."
|
|
4304
|
+
[ariaLabel]="'Search presets'"
|
|
4305
|
+
/>
|
|
4306
|
+
<ndt-button
|
|
4307
|
+
(click)="onSwitchToCreateMode()"
|
|
4308
|
+
[ariaLabel]="'Create new preset'"
|
|
4309
|
+
>
|
|
4310
|
+
New Preset
|
|
4311
|
+
</ndt-button>
|
|
4312
|
+
} @else {
|
|
4313
|
+
<ndt-button
|
|
4314
|
+
(click)="onSwitchToListMode()"
|
|
4315
|
+
[ariaLabel]="'Back to list'"
|
|
4316
|
+
>
|
|
4317
|
+
← Back to List
|
|
4318
|
+
</ndt-button>
|
|
4319
|
+
}
|
|
4320
|
+
</div>
|
|
4321
|
+
}
|
|
4322
|
+
|
|
4323
|
+
<!-- Create Form -->
|
|
4324
|
+
@if (viewMode() === 'create') {
|
|
4325
|
+
<form (submit)="onSavePreset($event)" class="preset-form">
|
|
4326
|
+
<ndt-input
|
|
4327
|
+
label="Preset Name"
|
|
4328
|
+
[value]="presetName()"
|
|
4329
|
+
(valueChange)="presetName.set($event)"
|
|
4330
|
+
placeholder="e.g., Admin User - Full Access"
|
|
4331
|
+
[ariaLabel]="'Preset name'"
|
|
4332
|
+
/>
|
|
4333
|
+
<ndt-input
|
|
4334
|
+
label="Description (optional)"
|
|
4335
|
+
[value]="presetDescription()"
|
|
4336
|
+
(valueChange)="presetDescription.set($event)"
|
|
4337
|
+
placeholder="Brief description of this preset"
|
|
4338
|
+
[ariaLabel]="'Preset description'"
|
|
4339
|
+
/>
|
|
4340
|
+
|
|
4341
|
+
<!-- Summary of what will be saved -->
|
|
4342
|
+
<div class="preset-summary">
|
|
4343
|
+
<h4>Configuration to Save:</h4>
|
|
4344
|
+
<ul>
|
|
4345
|
+
<li>Feature Flags: {{ getCurrentFlagsCount() }} forced</li>
|
|
4346
|
+
<li>Permissions: {{ getCurrentPermissionsCount() }} forced</li>
|
|
4347
|
+
<li>App Features: {{ getCurrentAppFeaturesCount() }} forced</li>
|
|
4348
|
+
<li>Language: {{ getCurrentLanguage() }}</li>
|
|
4349
|
+
</ul>
|
|
4350
|
+
</div>
|
|
4351
|
+
|
|
4352
|
+
<div class="form-actions">
|
|
4353
|
+
<ndt-button type="submit">Save Preset</ndt-button>
|
|
4354
|
+
</div>
|
|
4355
|
+
</form>
|
|
4356
|
+
}
|
|
4357
|
+
|
|
4358
|
+
<!-- Empty State -->
|
|
4359
|
+
@if (viewMode() === 'list' && hasNoPresets()) {
|
|
4360
|
+
<div class="empty">
|
|
4361
|
+
<p>No presets saved yet</p>
|
|
4362
|
+
<p class="hint">
|
|
4363
|
+
Save the current toolbar configuration as a preset for quick access
|
|
4364
|
+
</p>
|
|
4365
|
+
<ndt-button (click)="onSwitchToCreateMode()">
|
|
4366
|
+
Create Your First Preset
|
|
4367
|
+
</ndt-button>
|
|
4368
|
+
</div>
|
|
4369
|
+
} @else if (viewMode() === 'list' && hasNoFilteredPresets()) {
|
|
4370
|
+
<div class="empty">
|
|
4371
|
+
<p>No presets match your search</p>
|
|
4372
|
+
</div>
|
|
4373
|
+
} @else if (viewMode() === 'list') {
|
|
4374
|
+
<!-- Preset List -->
|
|
4375
|
+
<div class="preset-list">
|
|
4376
|
+
@for (preset of filteredPresets(); track preset.id) {
|
|
4377
|
+
<div class="preset-card">
|
|
4378
|
+
<div class="preset-card__header">
|
|
4379
|
+
<h3>{{ preset.name }}</h3>
|
|
4380
|
+
<div class="preset-card__actions">
|
|
4381
|
+
<button
|
|
4382
|
+
class="icon-button"
|
|
4383
|
+
(click)="onApplyPreset(preset.id)"
|
|
4384
|
+
[attr.aria-label]="'Apply preset ' + preset.name"
|
|
4385
|
+
title="Apply preset"
|
|
4386
|
+
>
|
|
4387
|
+
<ndt-icon name="refresh" />
|
|
4388
|
+
</button>
|
|
4389
|
+
<button
|
|
4390
|
+
class="icon-button"
|
|
4391
|
+
(click)="onUpdatePreset(preset.id)"
|
|
4392
|
+
[attr.aria-label]="'Update preset ' + preset.name"
|
|
4393
|
+
title="Update with current state"
|
|
4394
|
+
>
|
|
4395
|
+
<ndt-icon name="gear" />
|
|
4396
|
+
</button>
|
|
4397
|
+
<button
|
|
4398
|
+
class="icon-button"
|
|
4399
|
+
(click)="onExportPreset(preset.id)"
|
|
4400
|
+
[attr.aria-label]="'Export preset ' + preset.name"
|
|
4401
|
+
title="Export as JSON"
|
|
4402
|
+
>
|
|
4403
|
+
<ndt-icon name="export" />
|
|
4404
|
+
</button>
|
|
4405
|
+
<button
|
|
4406
|
+
class="icon-button"
|
|
4407
|
+
(click)="onDeletePreset(preset.id)"
|
|
4408
|
+
[attr.aria-label]="'Delete preset ' + preset.name"
|
|
4409
|
+
title="Delete preset"
|
|
4410
|
+
>
|
|
4411
|
+
<ndt-icon name="trash" />
|
|
4412
|
+
</button>
|
|
4413
|
+
</div>
|
|
4414
|
+
</div>
|
|
4415
|
+
@if (preset.description) {
|
|
4416
|
+
<p class="preset-card__description">{{ preset.description }}</p>
|
|
4417
|
+
}
|
|
4418
|
+
<div class="preset-card__meta">
|
|
4419
|
+
<span>Updated: {{ formatDate(preset.updatedAt) }}</span>
|
|
4420
|
+
</div>
|
|
4421
|
+
<!-- Preview of preset config -->
|
|
4422
|
+
<div class="preset-card__preview">
|
|
4423
|
+
@if (preset.config.featureFlags.enabled.length > 0 ||
|
|
4424
|
+
preset.config.featureFlags.disabled.length > 0) {
|
|
4425
|
+
<span class="badge">
|
|
4426
|
+
{{
|
|
4427
|
+
preset.config.featureFlags.enabled.length +
|
|
4428
|
+
preset.config.featureFlags.disabled.length
|
|
4429
|
+
}}
|
|
4430
|
+
flags
|
|
4431
|
+
</span>
|
|
4432
|
+
} @if (preset.config.permissions.granted.length > 0 ||
|
|
4433
|
+
preset.config.permissions.denied.length > 0) {
|
|
4434
|
+
<span class="badge">
|
|
4435
|
+
{{
|
|
4436
|
+
preset.config.permissions.granted.length +
|
|
4437
|
+
preset.config.permissions.denied.length
|
|
4438
|
+
}}
|
|
4439
|
+
perms
|
|
4440
|
+
</span>
|
|
4441
|
+
} @if (preset.config.appFeatures.enabled.length > 0 ||
|
|
4442
|
+
preset.config.appFeatures.disabled.length > 0) {
|
|
4443
|
+
<span class="badge">
|
|
4444
|
+
{{
|
|
4445
|
+
preset.config.appFeatures.enabled.length +
|
|
4446
|
+
preset.config.appFeatures.disabled.length
|
|
4447
|
+
}}
|
|
4448
|
+
features
|
|
4449
|
+
</span>
|
|
4450
|
+
} @if (preset.config.language) {
|
|
4451
|
+
<span class="badge">{{ preset.config.language }}</span>
|
|
4452
|
+
}
|
|
4453
|
+
</div>
|
|
4454
|
+
</div>
|
|
4455
|
+
}
|
|
4456
|
+
</div>
|
|
4457
|
+
}
|
|
4458
|
+
</div>
|
|
4459
|
+
</ndt-toolbar-tool>
|
|
4460
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".container{display:flex;flex-direction:column;height:100%}.header{flex-shrink:0;display:flex;gap:var(--ndt-spacing-sm);margin-bottom:var(--ndt-spacing-md)}.header ndt-input{flex:1}.header ndt-button{flex-shrink:0}.empty{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;justify-content:center;align-items:center;border:1px solid var(--ndt-border-subtle);border-radius:var(--ndt-border-radius-medium);padding:var(--ndt-spacing-md);background:transparent;color:var(--ndt-text-muted);text-align:center}.empty p{margin:0}.empty .hint{font-size:var(--ndt-font-size-xs)}.preset-list{display:flex;flex-direction:column;gap:var(--ndt-spacing-md);flex:1;min-height:0;overflow-y:auto;padding-right:var(--ndt-spacing-sm);scrollbar-width:thin;scrollbar-color:var(--ndt-border-primary) var(--ndt-background-secondary)}.preset-list::-webkit-scrollbar{width:8px}.preset-list::-webkit-scrollbar-track{background:var(--ndt-background-secondary);border-radius:4px}.preset-list::-webkit-scrollbar-thumb{background:var(--ndt-border-primary);border-radius:4px}:is():hover{background:var(--ndt-hover-bg)}.preset-card{background:var(--ndt-background-secondary);padding:var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-medium);display:flex;flex-direction:column;gap:var(--ndt-spacing-sm)}.preset-card__header{display:flex;justify-content:space-between;align-items:center;gap:var(--ndt-spacing-sm)}.preset-card__header h3{margin:0;font-size:var(--ndt-font-size-md);color:var(--ndt-text-primary);flex:1}.preset-card__actions{display:flex;gap:var(--ndt-spacing-xs)}.icon-button{background:transparent;border:none;cursor:pointer;padding:var(--ndt-spacing-xs);border-radius:var(--ndt-border-radius-small);color:var(--ndt-text-secondary);display:flex;align-items:center;justify-content:center}.icon-button:hover{background:var(--ndt-hover-bg);color:var(--ndt-text-primary)}.icon-button ndt-icon{width:16px;height:16px}.preset-card__description{margin:0;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-secondary)}.preset-card__meta{font-size:var(--ndt-font-size-xs);color:var(--ndt-text-muted)}.preset-card__meta span{margin-right:var(--ndt-spacing-sm)}.preset-card__preview{display:flex;gap:var(--ndt-spacing-xs);flex-wrap:wrap}.badge{background:var(--ndt-primary-color);color:#fff;padding:2px 8px;border-radius:12px;font-size:var(--ndt-font-size-xs);font-weight:500}.preset-form{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--ndt-spacing-md);padding:var(--ndt-spacing-md)}.preset-form ndt-input{width:100%}.preset-summary{background:var(--ndt-background-secondary);padding:var(--ndt-spacing-md);border-radius:var(--ndt-border-radius-medium)}.preset-summary h4{margin:0 0 var(--ndt-spacing-sm) 0;font-size:var(--ndt-font-size-sm);color:var(--ndt-text-primary)}.preset-summary ul{margin:0;padding-left:var(--ndt-spacing-md);color:var(--ndt-text-secondary);font-size:var(--ndt-font-size-sm)}.preset-summary ul li{margin-bottom:var(--ndt-spacing-xs)}.form-actions{display:flex;justify-content:flex-end;gap:var(--ndt-spacing-sm)}\n"] }]
|
|
4146
4461
|
}] });
|
|
4147
4462
|
|
|
4148
4463
|
class DevToolbarComponent {
|
|
@@ -4150,7 +4465,7 @@ class DevToolbarComponent {
|
|
|
4150
4465
|
this.state = inject(DevToolbarStateService);
|
|
4151
4466
|
this.destroyRef = inject(DestroyRef);
|
|
4152
4467
|
this.settingsService = inject(SettingsService);
|
|
4153
|
-
this.
|
|
4468
|
+
this.config = input({});
|
|
4154
4469
|
this.keyboardShortcut = fromEvent(window, 'keydown')
|
|
4155
4470
|
.pipe(filter((event) => event.ctrlKey && event.shiftKey && event.key === 'D'), takeUntilDestroyed(this.destroyRef))
|
|
4156
4471
|
.subscribe(() => this.toggleDevTools());
|
|
@@ -4172,8 +4487,7 @@ class DevToolbarComponent {
|
|
|
4172
4487
|
this.state.setVisibility(!this.state.isVisible());
|
|
4173
4488
|
}
|
|
4174
4489
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4175
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarComponent, isStandalone: true, selector: "ndt-toolbar", ngImport: i0, template: `
|
|
4176
|
-
@if (isDevMode) {
|
|
4490
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DevToolbarComponent, isStandalone: true, selector: "ndt-toolbar", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
4177
4491
|
<div
|
|
4178
4492
|
aria-label="Developer tools"
|
|
4179
4493
|
role="toolbar"
|
|
@@ -4184,15 +4498,24 @@ class DevToolbarComponent {
|
|
|
4184
4498
|
(mouseenter)="onMouseEnter()"
|
|
4185
4499
|
>
|
|
4186
4500
|
<ndt-home-tool />
|
|
4187
|
-
|
|
4188
|
-
|
|
4189
|
-
|
|
4190
|
-
|
|
4191
|
-
|
|
4501
|
+
@if (config().showLanguageTool ?? true) {
|
|
4502
|
+
<ndt-language-tool />
|
|
4503
|
+
}
|
|
4504
|
+
@if (config().showFeatureFlagsTool ?? true) {
|
|
4505
|
+
<ndt-feature-flags-tool />
|
|
4506
|
+
}
|
|
4507
|
+
@if (config().showAppFeaturesTool ?? true) {
|
|
4508
|
+
<ndt-app-features-tool />
|
|
4509
|
+
}
|
|
4510
|
+
@if (config().showPermissionsTool ?? true) {
|
|
4511
|
+
<ndt-permissions-tool />
|
|
4512
|
+
}
|
|
4513
|
+
@if (config().showPresetsTool ?? true) {
|
|
4514
|
+
<ndt-presets-tool />
|
|
4515
|
+
}
|
|
4192
4516
|
<ng-content />
|
|
4193
4517
|
</div>
|
|
4194
|
-
|
|
4195
|
-
`, isInline: true, styles: [".dev-toolbar{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 8px;--ndt-spacing-md: 16px;--ndt-window-padding: 24px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2)}.dev-toolbar[data-theme=dark]{--ndt-bg-primary: rgb(17, 24, 39);--ndt-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--ndt-text-primary: rgb(255, 255, 255);--ndt-text-secondary: rgb(229, 231, 235);--ndt-text-muted: rgb(156, 163, 175);--ndt-border-primary: #343841;--ndt-border-subtle: rgba(255, 255, 255, .1);--ndt-hover-bg: rgba(255, 255, 255, .12);--ndt-hover-danger: rgb(220, 38, 38);--ndt-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--ndt-shadow-tooltip: 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 8px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--ndt-shadow-window: 0px 0px 0px 0px rgba(19, 21, 26, .3), 0px 1px 2px 0px rgba(19, 21, 26, .29), 0px 4px 4px 0px rgba(19, 21, 26, .26), 0px 10px 6px 0px rgba(19, 21, 26, .15), 0px 17px 7px 0px rgba(19, 21, 26, .04), 0px 26px 7px 0px rgba(19, 21, 26, .01);--ndt-note-background: rgba(37, 99, 235, .15);--ndt-note-border: rgba(37, 99, 235, .3);--ndt-warning-background: rgba(202, 138, 4, .15);--ndt-warning-border: rgba(202, 138, 4, .3);--ndt-error-background: rgba(220, 38, 38, .15);--ndt-error-border: rgba(220, 38, 38, .3)}.dev-toolbar h1,.dev-toolbar h2,.dev-toolbar h3,.dev-toolbar h4,.dev-toolbar h5{font-weight:600;color:var(--ndt-text-primary);margin:0}.dev-toolbar h1{font-size:var(--ndt-font-size-xl)}.dev-toolbar h2{font-size:var(--ndt-font-size-lg)}.dev-toolbar h3{font-size:var(--ndt-font-size-md)}.dev-toolbar h4{font-size:var(--ndt-font-size-sm)}.dev-toolbar h5{font-size:var(--ndt-font-size-xs)}.dev-toolbar hr{border:1px solid var(--ndt-border-subtle);margin:1em 0}.dev-toolbar p{line-height:1.5em;margin:0}.dev-toolbar{position:fixed;bottom:0;left:50%;z-index:999999;transform:translate(-50%);display:flex;pointer-events:auto;background:var(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:9999px;box-shadow:var(--ndt-shadow-toolbar);height:40px;overflow:hidden}.dev-toolbar--active{opacity:1}\n"], dependencies: [{ kind: "component", type: DevToolbarHomeToolComponent, selector: "ndt-home-tool", inputs: ["badge"] }, { kind: "component", type: DevToolbarLanguageToolComponent, selector: "ndt-language-tool" }, { kind: "component", type: DevToolbarFeatureFlagsToolComponent, selector: "ndt-feature-flags-tool" }, { kind: "component", type: DevToolbarAppFeaturesToolComponent, selector: "ndt-app-features-tool" }, { kind: "component", type: DevToolbarNetworkMockerToolComponent, selector: "ndt-network-mocker-tool" }, { kind: "component", type: DevToolbarPermissionsToolComponent, selector: "ndt-permissions-tool" }], animations: [
|
|
4518
|
+
`, isInline: true, styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2);display:contents;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\"}:host[data-theme=dark]{--ndt-bg-primary: rgb(17, 24, 39);--ndt-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--ndt-text-primary: rgb(255, 255, 255);--ndt-text-secondary: rgb(229, 231, 235);--ndt-text-muted: rgb(156, 163, 175);--ndt-border-primary: #343841;--ndt-border-subtle: rgba(255, 255, 255, .1);--ndt-hover-bg: rgba(255, 255, 255, .12);--ndt-hover-danger: rgb(220, 38, 38);--ndt-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--ndt-shadow-tooltip: 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 8px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--ndt-shadow-window: 0px 0px 0px 0px rgba(19, 21, 26, .3), 0px 1px 2px 0px rgba(19, 21, 26, .29), 0px 4px 4px 0px rgba(19, 21, 26, .26), 0px 10px 6px 0px rgba(19, 21, 26, .15), 0px 17px 7px 0px rgba(19, 21, 26, .04), 0px 26px 7px 0px rgba(19, 21, 26, .01);--ndt-note-background: rgba(37, 99, 235, .15);--ndt-note-border: rgba(37, 99, 235, .3);--ndt-warning-background: rgba(202, 138, 4, .15);--ndt-warning-border: rgba(202, 138, 4, .3);--ndt-error-background: rgba(220, 38, 38, .15);--ndt-error-border: rgba(220, 38, 38, .3)}.dev-toolbar{position:fixed;bottom:0;left:50%;z-index:999999;transform:translate(-50%);display:flex;pointer-events:auto;background:var(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:9999px;box-shadow:var(--ndt-shadow-toolbar);height:40px;overflow:hidden}.dev-toolbar--active{opacity:1}h1,h2,h3,h4,h5{font-weight:600;color:var(--ndt-text-primary);margin:0}h1{font-size:var(--ndt-font-size-xl)}h2{font-size:var(--ndt-font-size-lg)}h3{font-size:var(--ndt-font-size-md)}h4{font-size:var(--ndt-font-size-sm)}h5{font-size:var(--ndt-font-size-xs)}hr{border:1px solid var(--ndt-border-subtle);margin:1em 0}p{line-height:1.5em;margin:0}\n"], dependencies: [{ kind: "component", type: DevToolbarHomeToolComponent, selector: "ndt-home-tool", inputs: ["badge"] }, { kind: "component", type: DevToolbarLanguageToolComponent, selector: "ndt-language-tool" }, { kind: "component", type: DevToolbarFeatureFlagsToolComponent, selector: "ndt-feature-flags-tool" }, { kind: "component", type: DevToolbarAppFeaturesToolComponent, selector: "ndt-app-features-tool" }, { kind: "component", type: DevToolbarPermissionsToolComponent, selector: "ndt-permissions-tool" }, { kind: "component", type: DevToolbarPresetsToolComponent, selector: "ndt-presets-tool" }], animations: [
|
|
4196
4519
|
trigger('toolbarState', [
|
|
4197
4520
|
state('hidden', style({
|
|
4198
4521
|
transform: 'translate(-50%, calc(100% + -1.2rem))',
|
|
@@ -4204,19 +4527,18 @@ class DevToolbarComponent {
|
|
|
4204
4527
|
animate('300ms cubic-bezier(0.4, 0, 0.2, 1)'),
|
|
4205
4528
|
]),
|
|
4206
4529
|
]),
|
|
4207
|
-
] }); }
|
|
4530
|
+
], encapsulation: i0.ViewEncapsulation.ShadowDom }); }
|
|
4208
4531
|
}
|
|
4209
4532
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarComponent, decorators: [{
|
|
4210
4533
|
type: Component,
|
|
4211
|
-
args: [{ standalone: true, selector: 'ndt-toolbar', imports: [
|
|
4534
|
+
args: [{ standalone: true, selector: 'ndt-toolbar', encapsulation: ViewEncapsulation.ShadowDom, imports: [
|
|
4212
4535
|
DevToolbarHomeToolComponent,
|
|
4213
4536
|
DevToolbarLanguageToolComponent,
|
|
4214
4537
|
DevToolbarFeatureFlagsToolComponent,
|
|
4215
4538
|
DevToolbarAppFeaturesToolComponent,
|
|
4216
|
-
DevToolbarNetworkMockerToolComponent,
|
|
4217
4539
|
DevToolbarPermissionsToolComponent,
|
|
4540
|
+
DevToolbarPresetsToolComponent,
|
|
4218
4541
|
], template: `
|
|
4219
|
-
@if (isDevMode) {
|
|
4220
4542
|
<div
|
|
4221
4543
|
aria-label="Developer tools"
|
|
4222
4544
|
role="toolbar"
|
|
@@ -4227,14 +4549,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
4227
4549
|
(mouseenter)="onMouseEnter()"
|
|
4228
4550
|
>
|
|
4229
4551
|
<ndt-home-tool />
|
|
4230
|
-
|
|
4231
|
-
|
|
4232
|
-
|
|
4233
|
-
|
|
4234
|
-
|
|
4552
|
+
@if (config().showLanguageTool ?? true) {
|
|
4553
|
+
<ndt-language-tool />
|
|
4554
|
+
}
|
|
4555
|
+
@if (config().showFeatureFlagsTool ?? true) {
|
|
4556
|
+
<ndt-feature-flags-tool />
|
|
4557
|
+
}
|
|
4558
|
+
@if (config().showAppFeaturesTool ?? true) {
|
|
4559
|
+
<ndt-app-features-tool />
|
|
4560
|
+
}
|
|
4561
|
+
@if (config().showPermissionsTool ?? true) {
|
|
4562
|
+
<ndt-permissions-tool />
|
|
4563
|
+
}
|
|
4564
|
+
@if (config().showPresetsTool ?? true) {
|
|
4565
|
+
<ndt-presets-tool />
|
|
4566
|
+
}
|
|
4235
4567
|
<ng-content />
|
|
4236
4568
|
</div>
|
|
4237
|
-
}
|
|
4238
4569
|
`, animations: [
|
|
4239
4570
|
trigger('toolbarState', [
|
|
4240
4571
|
state('hidden', style({
|
|
@@ -4247,7 +4578,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
4247
4578
|
animate('300ms cubic-bezier(0.4, 0, 0.2, 1)'),
|
|
4248
4579
|
]),
|
|
4249
4580
|
]),
|
|
4250
|
-
], styles: ["
|
|
4581
|
+
], styles: [":host{--ndt-border-radius-small: 4px;--ndt-border-radius-medium: 8px;--ndt-border-radius-large: 12px;--ndt-transition-default: all .2s ease-out;--ndt-transition-smooth: all .2s ease-in-out;--ndt-bg-primary: rgb(255, 255, 255);--ndt-bg-gradient: linear-gradient(180deg, rgb(243, 244, 246) 0%, rgba(243, 244, 246, .88) 100%);--ndt-text-primary: rgb(17, 24, 39);--ndt-text-secondary: rgb(55, 65, 81);--ndt-text-muted: rgb(107, 114, 128);--ndt-border-primary: #e5e7eb;--ndt-border-subtle: rgba(17, 24, 39, .1);--ndt-hover-bg: rgba(17, 24, 39, .05);--ndt-hover-danger: rgb(239, 68, 68);--ndt-shadow-toolbar: 0 2px 8px rgba(156, 163, 175, .2);--ndt-shadow-tooltip: 0 0 0 1px rgba(17, 24, 39, .05), 0 4px 8px rgba(107, 114, 128, .15), 0 2px 4px rgba(107, 114, 128, .1);--ndt-shadow-window: 0px 0px 0px 0px rgba(156, 163, 175, .1), 0px 1px 2px 0px rgba(156, 163, 175, .12), 0px 4px 4px 0px rgba(156, 163, 175, .1), 0px 10px 6px 0px rgba(156, 163, 175, .08), 0px 17px 7px 0px rgba(156, 163, 175, .05), 0px 26px 7px 0px rgba(156, 163, 175, .02);--ndt-spacing-xs: 4px;--ndt-spacing-sm: 6px;--ndt-spacing-md: 12px;--ndt-window-padding: 16px;--ndt-font-size-xs: .75rem;--ndt-font-size-sm: .875rem;--ndt-font-size-md: 1rem;--ndt-font-size-lg: 1.25rem;--ndt-font-size-xl: 2rem;--ndt-background-secondary: var(--ndt-bg-primary);--ndt-background-hover: var(--ndt-hover-bg);--ndt-primary: #df30d4;--ndt-primary-rgb: 223, 48, 212;--ndt-text-on-primary: rgb(255, 255, 255);--ndt-border-color: var(--ndt-border-primary);--ndt-note-background: rgb(219, 234, 254);--ndt-note-border: rgba(37, 99, 235, .2);--ndt-warning-background: rgb(254, 249, 195);--ndt-warning-border: rgba(202, 138, 4, .2);--ndt-error-background: rgb(254, 226, 226);--ndt-error-border: rgba(220, 38, 38, .2);display:contents;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\"}:host[data-theme=dark]{--ndt-bg-primary: rgb(17, 24, 39);--ndt-bg-gradient: linear-gradient(180deg, rgb(19, 21, 26) 0%, rgba(19, 21, 26, .88) 100%);--ndt-text-primary: rgb(255, 255, 255);--ndt-text-secondary: rgb(229, 231, 235);--ndt-text-muted: rgb(156, 163, 175);--ndt-border-primary: #343841;--ndt-border-subtle: rgba(255, 255, 255, .1);--ndt-hover-bg: rgba(255, 255, 255, .12);--ndt-hover-danger: rgb(220, 38, 38);--ndt-shadow-toolbar: 0 2px 8px rgba(19, 21, 26, .3);--ndt-shadow-tooltip: 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 8px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--ndt-shadow-window: 0px 0px 0px 0px rgba(19, 21, 26, .3), 0px 1px 2px 0px rgba(19, 21, 26, .29), 0px 4px 4px 0px rgba(19, 21, 26, .26), 0px 10px 6px 0px rgba(19, 21, 26, .15), 0px 17px 7px 0px rgba(19, 21, 26, .04), 0px 26px 7px 0px rgba(19, 21, 26, .01);--ndt-note-background: rgba(37, 99, 235, .15);--ndt-note-border: rgba(37, 99, 235, .3);--ndt-warning-background: rgba(202, 138, 4, .15);--ndt-warning-border: rgba(202, 138, 4, .3);--ndt-error-background: rgba(220, 38, 38, .15);--ndt-error-border: rgba(220, 38, 38, .3)}.dev-toolbar{position:fixed;bottom:0;left:50%;z-index:999999;transform:translate(-50%);display:flex;pointer-events:auto;background:var(--ndt-bg-primary);border:1px solid var(--ndt-border-primary);border-radius:9999px;box-shadow:var(--ndt-shadow-toolbar);height:40px;overflow:hidden}.dev-toolbar--active{opacity:1}h1,h2,h3,h4,h5{font-weight:600;color:var(--ndt-text-primary);margin:0}h1{font-size:var(--ndt-font-size-xl)}h2{font-size:var(--ndt-font-size-lg)}h3{font-size:var(--ndt-font-size-md)}h4{font-size:var(--ndt-font-size-sm)}h5{font-size:var(--ndt-font-size-xs)}hr{border:1px solid var(--ndt-border-subtle);margin:1em 0}p{line-height:1.5em;margin:0}\n"] }]
|
|
4251
4582
|
}] });
|
|
4252
4583
|
|
|
4253
4584
|
class DevToolbarFeatureFlagService {
|
|
@@ -4562,9 +4893,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
4562
4893
|
args: [{ providedIn: 'root' }]
|
|
4563
4894
|
}] });
|
|
4564
4895
|
|
|
4896
|
+
/**
|
|
4897
|
+
* Public service for managing dev toolbar presets.
|
|
4898
|
+
* Allows developers to programmatically save, load, and manage presets.
|
|
4899
|
+
*/
|
|
4900
|
+
class DevToolbarPresetsService {
|
|
4901
|
+
constructor() {
|
|
4902
|
+
this.internalService = inject(DevToolbarInternalPresetsService);
|
|
4903
|
+
}
|
|
4904
|
+
/**
|
|
4905
|
+
* Get all saved presets as an Observable
|
|
4906
|
+
*/
|
|
4907
|
+
getPresets() {
|
|
4908
|
+
return this.internalService.presets$;
|
|
4909
|
+
}
|
|
4910
|
+
/**
|
|
4911
|
+
* Save current toolbar state as a preset
|
|
4912
|
+
* @param name - Name for the preset
|
|
4913
|
+
* @param description - Optional description
|
|
4914
|
+
* @returns The created preset
|
|
4915
|
+
*/
|
|
4916
|
+
savePreset(name, description) {
|
|
4917
|
+
return this.internalService.saveCurrentAsPreset(name, description);
|
|
4918
|
+
}
|
|
4919
|
+
/**
|
|
4920
|
+
* Apply a preset (load its configuration into all tools)
|
|
4921
|
+
* @param presetId - ID of the preset to apply
|
|
4922
|
+
*/
|
|
4923
|
+
async applyPreset(presetId) {
|
|
4924
|
+
return this.internalService.applyPreset(presetId);
|
|
4925
|
+
}
|
|
4926
|
+
/**
|
|
4927
|
+
* Update a preset with current toolbar state
|
|
4928
|
+
* @param presetId - ID of the preset to update
|
|
4929
|
+
*/
|
|
4930
|
+
updatePreset(presetId) {
|
|
4931
|
+
this.internalService.updatePreset(presetId);
|
|
4932
|
+
}
|
|
4933
|
+
/**
|
|
4934
|
+
* Delete a preset
|
|
4935
|
+
* @param presetId - ID of the preset to delete
|
|
4936
|
+
*/
|
|
4937
|
+
deletePreset(presetId) {
|
|
4938
|
+
this.internalService.deletePreset(presetId);
|
|
4939
|
+
}
|
|
4940
|
+
/**
|
|
4941
|
+
* Export a preset as JSON string
|
|
4942
|
+
* @param presetId - ID of the preset to export
|
|
4943
|
+
* @returns JSON string representation of the preset
|
|
4944
|
+
*/
|
|
4945
|
+
exportPreset(presetId) {
|
|
4946
|
+
const preset = this.internalService.getPresetById(presetId);
|
|
4947
|
+
if (!preset)
|
|
4948
|
+
return null;
|
|
4949
|
+
return JSON.stringify(preset, null, 2);
|
|
4950
|
+
}
|
|
4951
|
+
/**
|
|
4952
|
+
* Import a preset from JSON string
|
|
4953
|
+
* @param json - JSON string representation of a preset
|
|
4954
|
+
* @returns The imported preset
|
|
4955
|
+
* @throws Error if JSON is invalid
|
|
4956
|
+
*/
|
|
4957
|
+
importPreset(json) {
|
|
4958
|
+
const preset = JSON.parse(json);
|
|
4959
|
+
return this.internalService.addPreset(preset);
|
|
4960
|
+
}
|
|
4961
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarPresetsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4962
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarPresetsService, providedIn: 'root' }); }
|
|
4963
|
+
}
|
|
4964
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DevToolbarPresetsService, decorators: [{
|
|
4965
|
+
type: Injectable,
|
|
4966
|
+
args: [{ providedIn: 'root' }]
|
|
4967
|
+
}] });
|
|
4968
|
+
|
|
4565
4969
|
/**
|
|
4566
4970
|
* Generated bundle index. Do not edit.
|
|
4567
4971
|
*/
|
|
4568
4972
|
|
|
4569
|
-
export { DevToolbarAppFeaturesService, DevToolbarAppFeaturesToolComponent, DevToolbarComponent, DevToolbarFeatureFlagService, DevToolbarIconComponent, DevToolbarLanguageService,
|
|
4973
|
+
export { DevToolbarAppFeaturesService, DevToolbarAppFeaturesToolComponent, DevToolbarComponent, DevToolbarFeatureFlagService, DevToolbarIconComponent, DevToolbarLanguageService, DevToolbarPermissionsService, DevToolbarPermissionsToolComponent, DevToolbarPresetsService, DevToolbarPresetsToolComponent, DevToolbarToolComponent };
|
|
4570
4974
|
//# sourceMappingURL=ngx-dev-toolbar.mjs.map
|