ngx-dev-toolbar 4.0.0 → 4.2.0

package/README.md

@@ -133,17 +133,17 @@ export class AppComponent {
 }
 ```
 
-### Language
+### i18n
 
 ```typescript
-import { ToolbarLanguageService } from 'ngx-dev-toolbar';
+import { ToolbarI18nService } from 'ngx-dev-toolbar';
 
 @Component({...})
 export class AppComponent {
-  private language = inject(ToolbarLanguageService);
+  private i18nService = inject(ToolbarI18nService);
 
   constructor() {
-    this.language.setAvailableOptions([
+    this.i18nService.setAvailableOptions([
       { code: 'en', name: 'English' },
       { code: 'es', name: 'Spanish' },
       { code: 'fr', name: 'French' },
@@ -161,7 +161,7 @@ provideToolbar({
   enabled: isDevMode(),
   showFeatureFlagsTool: true,
   showPermissionsTool: true,
-  showLanguageTool: true,
+  showI18nTool: true,
   showAppFeaturesTool: true,
   showPresetsTool: true,
 })

package/components/icon-button/icon-button.component.d.ts

@@ -0,0 +1,13 @@
+import { IconName } from '../icons/icon.models';
+import * as i0 from "@angular/core";
+export declare class ToolbarIconButtonComponent {
+    readonly icon: import("@angular/core").InputSignal<IconName | undefined>;
+    readonly tooltip: import("@angular/core").InputSignal<string | undefined>;
+    readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
+    readonly size: import("@angular/core").InputSignal<"sm" | "md">;
+    readonly variant: import("@angular/core").InputSignal<"ghost" | "outlined">;
+    protected isHovered: import("@angular/core").WritableSignal<boolean>;
+    protected isTooltipVisible: import("@angular/core").Signal<boolean>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarIconButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarIconButtonComponent, "ndt-icon-button", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/components/icons/globe-icon.component.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class GlobeIconComponent {
+    fill: import("@angular/core").InputSignal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GlobeIconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GlobeIconComponent, "ndt-globe-icon", never, { "fill": { "alias": "fill"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

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

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

package/components/icons/pin-icon.component.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class PinIconComponent {
+    fill: import("@angular/core").InputSignal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PinIconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PinIconComponent, "ndt-pin-icon", never, { "fill": { "alias": "fill"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/components/list-item/list-item.component.d.ts

@@ -1,3 +1,4 @@
+import { IconName } from '../icons/icon.models';
 import * as i0 from "@angular/core";
 /**
  * List item component with consistent layout, dot badge indicator,
@@ -39,6 +40,28 @@ export declare class ToolbarListItemComponent {
      * Original value before forcing (only present when isForced is true)
      */
     originalValue: import("@angular/core").InputSignal<boolean | undefined>;
+    /**
+     * Whether to show the "Apply to source" button
+     */
+    showApply: import("@angular/core").InputSignal<boolean>;
+    /**
+     * Current state of the apply operation
+     */
+    applyState: import("@angular/core").InputSignal<"idle" | "loading" | "success" | "error">;
+    /**
+     * Whether this item is pinned to the top of the list
+     */
+    isPinned: import("@angular/core").InputSignal<boolean>;
+    /**
+     * Emits when the user clicks the pin/unpin button
+     */
+    pinToggle: import("@angular/core").OutputEmitterRef<void>;
+    /**
+     * Emits when the user clicks "Apply to source"
+     */
+    applyToSource: import("@angular/core").OutputEmitterRef<void>;
+    protected pinIcon: import("@angular/core").Signal<IconName>;
+    protected pinAriaLabel: import("@angular/core").Signal<"Unpin item" | "Pin item">;
     /**
      * Value to display in the dot indicator.
      * For forced items: shows originalValue
@@ -50,5 +73,5 @@ export declare class ToolbarListItemComponent {
      */
     protected tooltipText: import("@angular/core").Signal<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarListItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarListItemComponent, "ndt-list-item", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "isForced": { "alias": "isForced"; "required": false; "isSignal": true; }; "currentValue": { "alias": "currentValue"; "required": true; "isSignal": true; }; "originalValue": { "alias": "originalValue"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarListItemComponent, "ndt-list-item", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "isForced": { "alias": "isForced"; "required": false; "isSignal": true; }; "currentValue": { "alias": "currentValue"; "required": true; "isSignal": true; }; "originalValue": { "alias": "originalValue"; "required": false; "isSignal": true; }; "showApply": { "alias": "showApply"; "required": false; "isSignal": true; }; "applyState": { "alias": "applyState"; "required": false; "isSignal": true; }; "isPinned": { "alias": "isPinned"; "required": false; "isSignal": true; }; }, { "pinToggle": "pinToggle"; "applyToSource": "applyToSource"; }, never, ["*"], true, never>;
 }

package/components/select/select.component.d.ts

@@ -13,7 +13,7 @@ export declare class ToolbarSelectComponent {
     label: import("@angular/core").InputSignal<string>;
     size: import("@angular/core").InputSignal<"small" | "medium">;
     placeholder: import("@angular/core").InputSignal<string>;
-    readonly theme: import("@angular/core").Signal<"dark" | "light">;
+    readonly theme: import("@angular/core").Signal<"light" | "dark">;
     protected readonly selectMenuId: string;
     isOpen: import("@angular/core").WritableSignal<boolean>;
     isPlaceholder: import("@angular/core").Signal<boolean>;

package/components/tool-button/tool-button.component.d.ts

@@ -1,16 +1,17 @@
+import { ToolbarPosition } from '../../models/toolbar-position.model';
 import * as i0 from "@angular/core";
 export declare class ToolbarToolButtonComponent {
     private readonly state;
-    private readonly elementRef;
-    readonly title: import("@angular/core").InputSignal<string>;
+    readonly toolLabel: import("@angular/core").InputSignal<string>;
     readonly toolId: import("@angular/core").InputSignal<string>;
     readonly badge: import("@angular/core").InputSignal<string | undefined>;
+    readonly position: import("@angular/core").InputSignal<ToolbarPosition>;
     readonly open: import("@angular/core").OutputEmitterRef<void>;
     readonly isActive: import("@angular/core").Signal<boolean>;
     readonly isToolbarVisible: import("@angular/core").Signal<boolean>;
     readonly isFocused: import("@angular/core").WritableSignal<boolean>;
-    readonly tooltip: import("@angular/core").Signal<any>;
-    readonly isTooltipVisible: import("@angular/core").Signal<any>;
+    readonly tooltip: import("@angular/core").Signal<string>;
+    readonly isTooltipVisible: import("@angular/core").Signal<boolean | "">;
     protected tooltipState: boolean;
     private readonly hideDelay;
     onClick(): void;
@@ -20,5 +21,5 @@ export declare class ToolbarToolButtonComponent {
     onFocus(): void;
     onBlur(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarToolButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarToolButtonComponent, "ndt-tool-button", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "toolId": { "alias": "toolId"; "required": true; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; }, { "open": "open"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarToolButtonComponent, "ndt-tool-button", never, { "toolLabel": { "alias": "toolLabel"; "required": true; "isSignal": true; }; "toolId": { "alias": "toolId"; "required": true; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; }, { "open": "open"; }, never, ["*"], true, never>;
 }

package/components/toolbar-tool/toolbar-tool.component.d.ts

@@ -1,3 +1,4 @@
+import { ConnectedPosition } from '@angular/cdk/overlay';
 import { ElementRef } from '@angular/core';
 import { ToolbarStateService } from '../../toolbar-state.service';
 import { IconName } from '../icons/icon.models';
@@ -10,22 +11,16 @@ export declare class ToolbarToolComponent {
     buttonComponent: import("@angular/core").Signal<ToolbarToolButtonComponent | undefined>;
     options: import("@angular/core").InputSignal<ToolbarWindowOptions>;
     icon: import("@angular/core").InputSignal<IconName>;
-    title: import("@angular/core").InputSignal<string>;
+    toolTitle: import("@angular/core").InputSignal<string>;
     badge: import("@angular/core").InputSignal<string | undefined>;
     isActive: import("@angular/core").Signal<boolean>;
+    slideDirection: import("@angular/core").Signal<"right" | "left" | "up" | "down">;
     height: import("@angular/core").Signal<320 | 480 | 620>;
     width: import("@angular/core").Signal<320 | 480 | 620 | 400>;
-    positions: import("@angular/core").Signal<{
-        originX: "center";
-        originY: "center";
-        overlayX: "center";
-        overlayY: "center";
-        offsetY: number;
-        offsetX: number;
-    }[]>;
+    positions: import("@angular/core").Signal<ConnectedPosition[]>;
     onOpen(): void;
     onClose(): void;
-    getButtonContainerXPosition(): number;
+    private getButtonContainerRect;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarToolComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarToolComponent, "ndt-toolbar-tool", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; }, {}, ["buttonComponent"], ["ndt-tool-button", "*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarToolComponent, "ndt-toolbar-tool", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "toolTitle": { "alias": "toolTitle"; "required": true; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; }, {}, ["buttonComponent"], ["ndt-tool-button", "*"], true, never>;
 }

package/components/window/window.component.d.ts

@@ -7,7 +7,7 @@ export declare class ToolbarWindowComponent {
     readonly closed: import("@angular/core").OutputEmitterRef<void>;
     readonly maximize: import("@angular/core").OutputEmitterRef<void>;
     readonly minimize: import("@angular/core").OutputEmitterRef<void>;
-    readonly theme: import("@angular/core").Signal<"dark" | "light">;
+    readonly theme: import("@angular/core").Signal<"light" | "dark">;
     protected onClose(): void;
     protected onMaximize(): void;
     protected onMinimize(): void;