@ng-prism/plugin-figma 21.9.0 → 21.10.0

package/dist/diff/figma-design-diff-panel.component.d.ts

@@ -4,6 +4,7 @@ export declare class FigmaDesignDiffPanelComponent {
     private readonly config;
     private readonly nav;
     private readonly renderer;
+    readonly activeComponent: import("@angular/core").InputSignal<unknown>;
     protected readonly state: import("@angular/core").WritableSignal<DiffState>;
     protected readonly activeMode: import("@angular/core").WritableSignal<DiffMode>;
     protected readonly overlayOpacity: import("@angular/core").WritableSignal<number>;
@@ -21,6 +22,6 @@ export declare class FigmaDesignDiffPanelComponent {
     protected runDiff(): void;
     private executeDiff;
     static ɵfac: i0.ɵɵFactoryDeclaration<FigmaDesignDiffPanelComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FigmaDesignDiffPanelComponent, "prism-figma-design-diff-panel", never, {}, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FigmaDesignDiffPanelComponent, "prism-figma-design-diff-panel", never, { "activeComponent": { "alias": "activeComponent"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 //# sourceMappingURL=figma-design-diff-panel.component.d.ts.map

package/dist/diff/figma-design-diff-panel.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"figma-design-diff-panel.component.d.ts","sourceRoot":"","sources":["../../src/diff/figma-design-diff-panel.component.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAkC,MAAM,uBAAuB,CAAC;;AAEvH,qBAmPa,6BAA6B;IACxC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA+B;IACtD,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAkC;IACtD,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAgC;IAEzD,SAAS,CAAC,QAAQ,CAAC,KAAK,oDAAyC;IACjE,SAAS,CAAC,QAAQ,CAAC,UAAU,mDAAoC;IACjE,SAAS,CAAC,QAAQ,CAAC,cAAc,iDAAc;IAE/C,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,QAAQ,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAI5D;IAEF,SAAS,CAAC,QAAQ,CAAC,UAAU,oDAG1B;IAEH,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAG1B;IAEH,SAAS,CAAC,QAAQ,CAAC,YAAY,yCAG5B;IAEH,SAAS,CAAC,QAAQ,CAAC,iBAAiB;;;cAQjC;IAEH,SAAS,CAAC,OAAO,IAAI,IAAI;YAsBX,WAAW;yCA9Dd,6BAA6B;2CAA7B,6BAA6B;CAqFzC"}
+{"version":3,"file":"figma-design-diff-panel.component.d.ts","sourceRoot":"","sources":["../../src/diff/figma-design-diff-panel.component.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAkC,MAAM,uBAAuB,CAAC;;AAEvH,qBAmPa,6BAA6B;IACxC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA+B;IACtD,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAkC;IACtD,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAgC;IAEzD,QAAQ,CAAC,eAAe,+CAAwB;IAEhD,SAAS,CAAC,QAAQ,CAAC,KAAK,oDAAyC;IACjE,SAAS,CAAC,QAAQ,CAAC,UAAU,mDAAoC;IACjE,SAAS,CAAC,QAAQ,CAAC,cAAc,iDAAc;IAE/C,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,QAAQ,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAI5D;IAEF,SAAS,CAAC,QAAQ,CAAC,UAAU,oDAG1B;IAEH,SAAS,CAAC,QAAQ,CAAC,UAAU,yCAG1B;IAEH,SAAS,CAAC,QAAQ,CAAC,YAAY,yCAG5B;IAEH,SAAS,CAAC,QAAQ,CAAC,iBAAiB;;;cAQjC;IAEH,SAAS,CAAC,OAAO,IAAI,IAAI;YAsBX,WAAW;yCAhEd,6BAA6B;2CAA7B,6BAA6B;CAuFzC"}

package/dist/diff/figma-design-diff-panel.component.js

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input, signal } from '@angular/core';
 import { PrismNavigationService, PrismRendererService } from '@ng-prism/core';
 import { FIGMA_PLUGIN_CONFIG } from '../figma-config.token.js';
 import { extractFileKey, parseFigmaMeta } from './figma-diff.types.js';
@@ -147,6 +147,7 @@ export class FigmaDesignDiffPanelComponent {
     config = inject(FIGMA_PLUGIN_CONFIG);
     nav = inject(PrismNavigationService);
     renderer = inject(PrismRendererService);
+    activeComponent = input(null, ...(ngDevMode ? [{ debugName: "activeComponent" }] : []));
     state = signal({ status: 'idle' }, ...(ngDevMode ? [{ debugName: "state" }] : []));
     activeMode = signal('side-by-side', ...(ngDevMode ? [{ debugName: "activeMode" }] : []));
     overlayOpacity = signal(50, ...(ngDevMode ? [{ debugName: "overlayOpacity" }] : []));
@@ -219,7 +220,7 @@ export class FigmaDesignDiffPanelComponent {
         }
     }
     static ɵfac = function FigmaDesignDiffPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FigmaDesignDiffPanelComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FigmaDesignDiffPanelComponent, selectors: [["prism-figma-design-diff-panel"]], decls: 7, vars: 1, consts: [[1, "diff-panel"], [1, "diff-panel__empty"], [1, "diff-panel__empty", "diff-panel__empty--error"], [1, "diff-panel__idle"], [1, "diff-panel__loading"], [1, "diff-panel__result"], [1, "diff-panel__empty-title"], [1, "diff-panel__empty-hint"], [1, "diff-panel__run-btn", 3, "click"], [1, "diff-panel__spinner"], [1, "diff-panel__toolbar"], [1, "diff-panel__modes"], [1, "diff-panel__mode-btn", 3, "diff-panel__mode-btn--active"], [1, "diff-panel__stats"], [1, "diff-panel__run-btn", "diff-panel__run-btn--sm", 3, "click"], [1, "diff-panel__canvas-area"], [1, "diff-panel__split"], ["alt", "Pixel diff", 3, "src"], [1, "diff-panel__mode-btn", 3, "click"], [1, "diff-panel__split-side"], [1, "diff-panel__split-label"], ["alt", "Component screenshot", 3, "src"], ["alt", "Figma design", 3, "src"], [1, "diff-panel__overlay-wrap"], ["alt", "Component", 1, "diff-panel__overlay-base", 3, "src"], ["alt", "Figma overlay", 1, "diff-panel__overlay-top", 3, "src"], ["type", "range", "min", "0", "max", "100", 1, "diff-panel__opacity-slider", 3, "input", "value"]], template: function FigmaDesignDiffPanelComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FigmaDesignDiffPanelComponent, selectors: [["prism-figma-design-diff-panel"]], inputs: { activeComponent: [1, "activeComponent"] }, decls: 7, vars: 1, consts: [[1, "diff-panel"], [1, "diff-panel__empty"], [1, "diff-panel__empty", "diff-panel__empty--error"], [1, "diff-panel__idle"], [1, "diff-panel__loading"], [1, "diff-panel__result"], [1, "diff-panel__empty-title"], [1, "diff-panel__empty-hint"], [1, "diff-panel__run-btn", 3, "click"], [1, "diff-panel__spinner"], [1, "diff-panel__toolbar"], [1, "diff-panel__modes"], [1, "diff-panel__mode-btn", 3, "diff-panel__mode-btn--active"], [1, "diff-panel__stats"], [1, "diff-panel__run-btn", "diff-panel__run-btn--sm", 3, "click"], [1, "diff-panel__canvas-area"], [1, "diff-panel__split"], ["alt", "Pixel diff", 3, "src"], [1, "diff-panel__mode-btn", 3, "click"], [1, "diff-panel__split-side"], [1, "diff-panel__split-label"], ["alt", "Component screenshot", 3, "src"], ["alt", "Figma design", 3, "src"], [1, "diff-panel__overlay-wrap"], ["alt", "Component", 1, "diff-panel__overlay-base", 3, "src"], ["alt", "Figma overlay", 1, "diff-panel__overlay-top", 3, "src"], ["type", "range", "min", "0", "max", "100", 1, "diff-panel__opacity-slider", 3, "input", "value"]], template: function FigmaDesignDiffPanelComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵdomElementStart(0, "div", 0);
             i0.ɵɵconditionalCreate(1, FigmaDesignDiffPanelComponent_Case_1_Template, 11, 0, "div", 1)(2, FigmaDesignDiffPanelComponent_Case_2_Template, 8, 0, "div", 1)(3, FigmaDesignDiffPanelComponent_Case_3_Template, 5, 1, "div", 2)(4, FigmaDesignDiffPanelComponent_Case_4_Template, 3, 0, "div", 3)(5, FigmaDesignDiffPanelComponent_Case_5_Template, 4, 0, "div", 4)(6, FigmaDesignDiffPanelComponent_Case_6_Template, 13, 5, "div", 5);
             i0.ɵɵdomElementEnd();
@@ -328,5 +329,5 @@ export class FigmaDesignDiffPanelComponent {
       }
     </div>
   `, styles: ["\n    .diff-panel {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      font-family: var(--prism-font-sans);\n      font-size: 13px;\n      color: var(--prism-text-1);\n      background: var(--prism-bg-elevated);\n    }\n\n    .diff-panel__empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      gap: 8px;\n      padding: 24px;\n      text-align: center;\n    }\n\n    .diff-panel__empty-title { font-weight: 500; color: var(--prism-text-1); margin: 0; }\n    .diff-panel__empty-hint { color: var(--prism-text-muted); margin: 0; }\n    .diff-panel__empty--error .diff-panel__empty-title { color: #ef4444; }\n\n    .diff-panel__idle {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n    }\n\n    .diff-panel__loading {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 10px;\n      height: 100%;\n      color: var(--prism-text-muted);\n    }\n\n    .diff-panel__spinner {\n      width: 16px;\n      height: 16px;\n      border: 2px solid var(--prism-border);\n      border-top-color: var(--prism-primary);\n      border-radius: 50%;\n      animation: spin 0.7s linear infinite;\n    }\n\n    @keyframes spin { to { transform: rotate(360deg); } }\n\n    .diff-panel__run-btn {\n      padding: 8px 16px;\n      background: var(--prism-primary);\n      color: #fff;\n      border: none;\n      border-radius: 6px;\n      font-size: 13px;\n      font-family: var(--prism-font-sans);\n      cursor: pointer;\n    }\n\n    .diff-panel__run-btn:hover { opacity: 0.9; }\n    .diff-panel__run-btn--sm { padding: 5px 10px; font-size: 12px; }\n\n    .diff-panel__result { display: flex; flex-direction: column; height: 100%; }\n\n    .diff-panel__toolbar {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 8px 12px;\n      border-bottom: 1px solid var(--prism-border);\n      flex-shrink: 0;\n    }\n\n    .diff-panel__modes { display: flex; gap: 2px; }\n\n    .diff-panel__mode-btn {\n      padding: 4px 10px;\n      border: 1px solid var(--prism-border);\n      background: none;\n      font-size: 12px;\n      font-family: var(--prism-font-sans);\n      color: var(--prism-text-muted);\n      cursor: pointer;\n      border-radius: 4px;\n    }\n\n    .diff-panel__mode-btn--active {\n      background: var(--prism-primary);\n      color: #fff;\n      border-color: var(--prism-primary);\n    }\n\n    .diff-panel__stats {\n      margin-left: auto;\n      color: var(--prism-text-muted);\n      font-variant-numeric: tabular-nums;\n    }\n\n    .diff-panel__canvas-area {\n      flex: 1;\n      overflow: auto;\n      padding: 16px;\n      display: flex;\n      align-items: flex-start;\n      justify-content: center;\n    }\n\n    .diff-panel__split { display: flex; gap: 16px; width: 100%; }\n\n    .diff-panel__split-side { flex: 1; display: flex; flex-direction: column; gap: 6px; }\n\n    .diff-panel__split-label {\n      font-size: 11px;\n      font-weight: 500;\n      color: var(--prism-text-muted);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n    }\n\n    .diff-panel__split-side img,\n    .diff-panel__canvas-area img {\n      max-width: 100%;\n      border: 1px solid var(--prism-border);\n      border-radius: 4px;\n    }\n\n    .diff-panel__overlay-wrap { position: relative; display: inline-block; }\n\n    .diff-panel__overlay-top {\n      position: absolute;\n      top: 0; left: 0;\n      width: 100%; height: 100%;\n    }\n\n    .diff-panel__opacity-slider { display: block; width: 200px; margin-top: 12px; }\n  "] }]
-    }], null, null); })();
+    }], null, { activeComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeComponent", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FigmaDesignDiffPanelComponent, { className: "FigmaDesignDiffPanelComponent", filePath: "diff/figma-design-diff-panel.component.ts", lineNumber: 249 }); })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-prism/plugin-figma",
-  "version": "21.9.0",
+  "version": "21.10.0",
   "description": "Figma design embed panel for ng-prism.",
   "keywords": [
     "@ng-prism/core",