@ng-prism/plugin-figma 21.12.0 → 22.0.0-beta.0

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

@@ -147,10 +147,14 @@ 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" }] : []));
+    activeComponent = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeComponent" }] : /* istanbul ignore next */ []));
+    state = signal({ status: 'idle' }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    activeMode = signal('side-by-side', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeMode" }] : /* istanbul ignore next */ []));
+    overlayOpacity = signal(50, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overlayOpacity" }] : /* istanbul ignore next */ []));
     modes = [
         { value: 'side-by-side', label: 'Side-by-side' },
         { value: 'overlay', label: 'Overlay' },
@@ -159,15 +163,18 @@ export class FigmaDesignDiffPanelComponent {
     doneResult = computed(() => {
         const s = this.state();
         return s.status === 'done' ? s.result : null;
-    }, ...(ngDevMode ? [{ debugName: "doneResult" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "doneResult" }] : /* istanbul ignore next */ []));
     similarity = computed(() => {
         const r = this.doneResult();
         return r ? r.similarity.toFixed(1) : '0';
-    }, ...(ngDevMode ? [{ debugName: "similarity" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "similarity" }] : /* istanbul ignore next */ []));
     errorMessage = computed(() => {
         const s = this.state();
         return s.status === 'error-api' ? s.message : '';
-    }, ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
     activeVariantMeta = computed(() => {
         const comp = this.nav.activeComponent();
         if (!comp)
@@ -178,7 +185,8 @@ export class FigmaDesignDiffPanelComponent {
         if (variantFigma !== undefined)
             return parseFigmaMeta(variantFigma);
         return parseFigmaMeta(comp.meta.showcaseConfig.meta?.['figma']);
-    }, ...(ngDevMode ? [{ debugName: "activeVariantMeta" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeVariantMeta" }] : /* istanbul ignore next */ []));
     runDiff() {
         if (!this.config.accessToken) {
             this.state.set({ status: 'error-no-token' });
@@ -228,7 +236,7 @@ export class FigmaDesignDiffPanelComponent {
             let tmp_0_0;
             i0.ɵɵadvance();
             i0.ɵɵconditional((tmp_0_0 = ctx.state().status) === "error-no-token" ? 1 : tmp_0_0 === "error-no-node" ? 2 : tmp_0_0 === "error-api" ? 3 : tmp_0_0 === "idle" ? 4 : tmp_0_0 === "loading" ? 5 : tmp_0_0 === "done" ? 6 : -1);
-        } }, styles: [".diff-panel[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] { font-weight: 500; color: var(--prism-text-1); margin: 0; }\n    .diff-panel__empty-hint[_ngcontent-%COMP%] { color: var(--prism-text-muted); margin: 0; }\n    .diff-panel__empty--error[_ngcontent-%COMP%]   .diff-panel__empty-title[_ngcontent-%COMP%] { color: #ef4444; }\n\n    .diff-panel__idle[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n    }\n\n    .diff-panel__loading[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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: _ngcontent-%COMP%_spin 0.7s linear infinite;\n    }\n\n    @keyframes _ngcontent-%COMP%_spin { to { transform: rotate(360deg); } }\n\n    .diff-panel__run-btn[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover { opacity: 0.9; }\n    .diff-panel__run-btn--sm[_ngcontent-%COMP%] { padding: 5px 10px; font-size: 12px; }\n\n    .diff-panel__result[_ngcontent-%COMP%] { display: flex; flex-direction: column; height: 100%; }\n\n    .diff-panel__toolbar[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] { display: flex; gap: 2px; }\n\n    .diff-panel__mode-btn[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n      background: var(--prism-primary);\n      color: #fff;\n      border-color: var(--prism-primary);\n    }\n\n    .diff-panel__stats[_ngcontent-%COMP%] {\n      margin-left: auto;\n      color: var(--prism-text-muted);\n      font-variant-numeric: tabular-nums;\n    }\n\n    .diff-panel__canvas-area[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] { display: flex; gap: 16px; width: 100%; }\n\n    .diff-panel__split-side[_ngcontent-%COMP%] { flex: 1; display: flex; flex-direction: column; gap: 6px; }\n\n    .diff-panel__split-label[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   img[_ngcontent-%COMP%], \n   .diff-panel__canvas-area[_ngcontent-%COMP%]   img[_ngcontent-%COMP%] {\n      max-width: 100%;\n      border: 1px solid var(--prism-border);\n      border-radius: 4px;\n    }\n\n    .diff-panel__overlay-wrap[_ngcontent-%COMP%] { position: relative; display: inline-block; }\n\n    .diff-panel__overlay-top[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 0; left: 0;\n      width: 100%; height: 100%;\n    }\n\n    .diff-panel__opacity-slider[_ngcontent-%COMP%] { display: block; width: 200px; margin-top: 12px; }"], changeDetection: 0 });
+        } }, styles: [".diff-panel[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] { font-weight: 500; color: var(--prism-text-1); margin: 0; }\n    .diff-panel__empty-hint[_ngcontent-%COMP%] { color: var(--prism-text-muted); margin: 0; }\n    .diff-panel__empty--error[_ngcontent-%COMP%]   .diff-panel__empty-title[_ngcontent-%COMP%] { color: #ef4444; }\n\n    .diff-panel__idle[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n    }\n\n    .diff-panel__loading[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\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: _ngcontent-%COMP%_spin 0.7s linear infinite;\n    }\n\n    @keyframes _ngcontent-%COMP%_spin { to { transform: rotate(360deg); } }\n\n    .diff-panel__run-btn[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:hover { opacity: 0.9; }\n    .diff-panel__run-btn--sm[_ngcontent-%COMP%] { padding: 5px 10px; font-size: 12px; }\n\n    .diff-panel__result[_ngcontent-%COMP%] { display: flex; flex-direction: column; height: 100%; }\n\n    .diff-panel__toolbar[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] { display: flex; gap: 2px; }\n\n    .diff-panel__mode-btn[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n      background: var(--prism-primary);\n      color: #fff;\n      border-color: var(--prism-primary);\n    }\n\n    .diff-panel__stats[_ngcontent-%COMP%] {\n      margin-left: auto;\n      color: var(--prism-text-muted);\n      font-variant-numeric: tabular-nums;\n    }\n\n    .diff-panel__canvas-area[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] { display: flex; gap: 16px; width: 100%; }\n\n    .diff-panel__split-side[_ngcontent-%COMP%] { flex: 1; display: flex; flex-direction: column; gap: 6px; }\n\n    .diff-panel__split-label[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]   img[_ngcontent-%COMP%], \n   .diff-panel__canvas-area[_ngcontent-%COMP%]   img[_ngcontent-%COMP%] {\n      max-width: 100%;\n      border: 1px solid var(--prism-border);\n      border-radius: 4px;\n    }\n\n    .diff-panel__overlay-wrap[_ngcontent-%COMP%] { position: relative; display: inline-block; }\n\n    .diff-panel__overlay-top[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 0; left: 0;\n      width: 100%; height: 100%;\n    }\n\n    .diff-panel__opacity-slider[_ngcontent-%COMP%] { display: block; width: 200px; margin-top: 12px; }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FigmaDesignDiffPanelComponent, [{
         type: Component,

package/dist/figma-panel.component.js

@@ -18,15 +18,18 @@ function FigmaPanelComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
 } }
 export class FigmaPanelComponent {
     renderer = inject(Renderer2);
-    iframe = viewChild('iframe', ...(ngDevMode ? [{ debugName: "iframe" }] : []));
-    activeComponent = input(null, ...(ngDevMode ? [{ debugName: "activeComponent" }] : []));
+    iframe = viewChild('iframe', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iframe" }] : /* istanbul ignore next */ []));
+    activeComponent = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeComponent" }] : /* istanbul ignore next */ []));
     figmaUrl = computed(() => {
         const comp = this.activeComponent();
         if (!comp)
             return null;
         const url = comp.meta?.showcaseConfig?.meta?.['figma'];
         return typeof url === 'string' ? url : null;
-    }, ...(ngDevMode ? [{ debugName: "figmaUrl" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "figmaUrl" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             const url = this.figmaUrl();
@@ -45,7 +48,7 @@ export class FigmaPanelComponent {
             i0.ɵɵconditionalCreate(0, FigmaPanelComponent_Conditional_0_Template, 2, 0, "iframe", 1)(1, FigmaPanelComponent_Conditional_1_Template, 5, 2, "div", 2);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.figmaUrl() ? 0 : 1);
-        } }, styles: ["[_nghost-%COMP%] { display: block; width: 100%; height: 100%; }\n    .prism-figma-panel__iframe[_ngcontent-%COMP%] {\n      width: 100%; height: 100%; min-height: 400px; border: none;\n    }\n    .prism-figma-panel__empty[_ngcontent-%COMP%] {\n      display: flex; align-items: center; justify-content: center;\n      height: 100%; min-height: 200px;\n      color: var(--prism-text-muted); font-size: 14px;\n    }\n    .prism-figma-panel__empty[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n      color: var(--prism-primary);\n      padding: 2px 6px; border-radius: var(--radius-xs);\n      font-size: var(--fs-lg);\n    }"], changeDetection: 0 });
+        } }, styles: ["[_nghost-%COMP%] { display: block; width: 100%; height: 100%; }\n    .prism-figma-panel__iframe[_ngcontent-%COMP%] {\n      width: 100%; height: 100%; min-height: 400px; border: none;\n    }\n    .prism-figma-panel__empty[_ngcontent-%COMP%] {\n      display: flex; align-items: center; justify-content: center;\n      height: 100%; min-height: 200px;\n      color: var(--prism-text-muted); font-size: 14px;\n    }\n    .prism-figma-panel__empty[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n      color: var(--prism-primary);\n      padding: 2px 6px; border-radius: var(--radius-xs);\n      font-size: var(--fs-lg);\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FigmaPanelComponent, [{
         type: Component,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-prism/plugin-figma",
-  "version": "21.12.0",
+  "version": "22.0.0-beta.0",
   "description": "Figma design embed panel for ng-prism.",
   "ng-add": {
     "save": "devDependencies"
@@ -32,10 +32,10 @@
     "!**/*.tsbuildinfo"
   ],
   "peerDependencies": {
-    "@angular/core": ">=21.0.0",
+    "@angular/core": ">=20.0.0",
     "html2canvas": ">=1.4.0",
     "pixelmatch": ">=6.0.0",
-    "@ng-prism/core": "^21.12.0-0"
+    "@ng-prism/core": "^22.0.0-0"
   },
   "peerDependenciesMeta": {
     "html2canvas": {