@foxeltech/angular-ui 0.7.108 → 0.7.131

package/src/lib/ui/components/drawer/drawer.component.scss

@@ -30,7 +30,7 @@
    trước đó là 16px, tức 24px tổng). Brand nằm NGOÀI container nên phải tự
    cộng đủ 16px. */
 .drawer-brand {
-  @apply h-[60px] shrink-0 flex items-center gap-3 no-underline overflow-hidden;
+  @apply h-[60px] shrink-0 flex items-center gap-[10px] no-underline overflow-hidden;
   padding-left: 16px;
   padding-right: 8px;
   transition: padding 300ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -51,8 +51,38 @@
   }
 }
 
+/* Sunken tile behind the mark (reference `.sb-logo`, measured 16/09: 6px pad,
+   radius-control, --og-surface-sunken). The border is declared TRANSPARENT and
+   only takes a colour on hover — declaring it here rather than adding one on
+   :hover is what keeps the row from shifting 1px when the pointer arrives. */
+.drawer-brand-logo {
+  @apply inline-flex items-center justify-center shrink-0;
+  padding: 6px;
+  border-radius: var(--og-radius-control);
+  background: rgb(var(--og-surface-sunken));
+  border: 1px solid transparent;
+  transition:
+    padding 220ms cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 150ms ease;
+}
+
+/* The whole brand row is one link, so the tile lights up for a hover anywhere
+   on it — the reference's `.sb-logo:hover` sits on a non-clickable span, where
+   pointer-over-the-mark is the only hover there is. */
+.drawer-brand:hover .drawer-brand-logo {
+  border-color: rgb(var(--og-border));
+}
+
+.drawer-brand.is-collapsed .drawer-brand-logo {
+  padding: 4px;
+}
+
 .drawer-brand-mark {
-  @apply h-[20px] w-auto shrink-0;
+  @apply h-[21px] w-auto shrink-0;
+}
+
+.drawer-brand.is-collapsed .drawer-brand-mark {
+  @apply h-[19px];
 }
 
 /* Cột chữ: title + subtitle xếp dọc. min-w-0 để truncate hoạt động khi
@@ -63,21 +93,26 @@
 
 /* Wordmark: dùng CHỮ THẬT chứ không phải ảnh text_logo.png — ảnh đó là
    navy đặc nên chìm hẳn trên theme dark; chữ ăn --og-text nên đúng cả 6. */
+/* Reference: --og-fs-lg / weight 500 / -0.015em / line-height 1 (measured 16/09).
+   It was 600 at -0.01em, which read a notch heavier and wider than the design. */
 .drawer-brand-text {
-  @apply truncate text-[15px] font-semibold text-text-primary select-none;
+  @apply truncate text-[length:var(--og-fs-lg)] font-medium text-text-primary select-none;
   font-family: var(--og-font-display);
-  letter-spacing: -0.01em;
+  letter-spacing: -0.015em;
+  line-height: 1;
 }
 
-/* Subtitle: 11px muted, cùng cỡ với .drawer-version và caption
-   ADMINISTRATION nên không tự sinh ra một bậc typography mới. */
-/* line-clamp-2 chứ không phải truncate: tagline dài (VD "Binary Exploit
-   Intelligence Platform") không lọt một dòng trong cột chữ ~188px của drawer
-   260px, truncate sẽ cắt mất chữ. Hai dòng vẫn nằm gọn trong 60px của
-   .drawer-brand (18.75 + 1 + 27.5 = 47px). */
+/* Subtitle: 9px / weight 400 / +0.02em / line-height 1.2, --og-text-muted
+   (reference, measured 16/09).
+   MỘT DÒNG truncate chứ không còn line-clamp-2: ở 11px thì "Binary Exploit
+   Intelligence Platform" không lọt cột chữ ~188px nên phải cho xuống hai dòng;
+   ở 9px nó lọt (~157px), và một dòng mới đúng bản gốc. Đổi cỡ mà quên đổi chỗ
+   này thì subtitle lại tự ngắt dòng. */
 .drawer-brand-subtext {
-  @apply line-clamp-2 text-[11px] text-text-placeholder select-none mt-[1px];
-  letter-spacing: var(--og-tracking-label);
+  @apply truncate text-[9px] font-normal select-none mt-[2px];
+  color: rgb(var(--og-text-muted));
+  letter-spacing: 0.02em;
+  line-height: 1.2;
 }
 
 .drawer-container {
@@ -90,14 +125,30 @@
 .toggle-btn {
   @apply absolute top-1/2 -translate-y-1/2 z-50 flex items-center justify-center w-6 h-6 rounded-full bg-bg-primary border border-border-default cursor-pointer shadow-sm;
   right: -12px; /* half of button width to straddle the border */
-  transition: all 200ms ease;
+  transition: background-color 200ms ease, box-shadow 200ms ease;
+
+  /* An invisible 40px hit area over the 24px circle. The visible button is a
+     circle whose CORNERS are dead, and half of it hangs over the content pane,
+     so the reliable target was ~20px across — small enough that an off-centre
+     press missed (anh Tú: "đôi lúc không hoạt động"). The look does not
+     change; only what the pointer can hit. */
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -8px;
+    border-radius: 9999px;
+  }
 
   &:hover {
     @apply bg-bg-hover shadow-md;
   }
 
+  /* NO scale on :active. Shrinking the button under a pressed pointer moves its
+     edge inward mid-press; a press that started near the rim then released
+     outside the element, and the browser fires no `click` at all for a
+     mousedown/mouseup pair on different targets. Press feedback is the fill. */
   &:active {
-    transform: translateY(-50%) scale(0.9);
+    @apply bg-bg-hover;
   }
 
   &:focus-visible {
@@ -203,18 +254,64 @@
   @apply outline-none;
 }
 
+/* 9px icon-to-label, per the reference's nav row (measured 16/09). It was
+   `gap-3` = 12px. */
 .item-content {
-  @apply flex items-center gap-3 w-full overflow-hidden;
+  @apply flex items-center gap-[9px] w-full overflow-hidden;
+}
+
+/* 18px, in an 18px box — the reference's glyph is 12.5px inside an 18px span.
+   At 20px the icon alone made the row 32px tall, so the `min-height: 30px` on
+   .drawer-item was never the height that actually shipped. The gap lives on
+   .item-content; do NOT add a margin here as well or the two compound. */
+/* Collapsed the label is gone and the icon is the only thing in the row, so it
+   carries the row on its own and goes back up to 18px (anh Tú 16/09). Expanded
+   it stays at the reference's 13px mark. */
+.drawer-item.is-collapsed .item-icon {
+  width: 18px;
+  height: 18px;
+  margin-right: 0;
+}
+
+/* A solid mark: lucide draws outlines, and filling the shape turns the diamond
+   into the reference's filled lozenge.
+   The descendant selector is REQUIRED: lucide renders an <svg> INSIDE the
+   element carrying `.item-icon`, and it is that inner svg that holds
+   `fill="none"` — styling only the outer one left the mark hollow (MEASURED
+   16/09). Paths are named too, for the nesting lucide may skip. */
+.item-icon--solid {
+  fill: currentColor;
+}
+
+/* ::ng-deep is REQUIRED for the descendants, not a shortcut: lucide builds its
+   <svg> (and the `fill="none"` on it) at runtime with Renderer2, so those nodes
+   never carry this component's [_ngcontent] attribute and a scoped selector
+   matches nothing. The host element above is in the template and does get it —
+   which is why the outer fill applied while the mark stayed hollow. */
+:host ::ng-deep .item-icon--solid svg,
+:host ::ng-deep .item-icon--solid path,
+:host ::ng-deep .item-icon--solid polygon {
+  fill: currentColor;
 }
 
 .item-icon {
   @apply flex-shrink-0;
   color: inherit;
+  /* The reference's mark is a 12.5px glyph sitting in an 18px slot, so the
+     ICON is 13px and the 5px below restores the slot: 13 + 5 + the container's
+     9px gap = 27px from the icon's left edge to the label, exactly as in the
+     design. Sizing the icon itself 18px drew it half again too large. */
+  width: 13px;
+  height: 13px;
+  margin-right: 5px;
 }
 
 .item-label {
-  /* Size comes from .drawer-item (12.5px, 0.7.107) — no second scale here. */
-  @apply flex-1 whitespace-nowrap overflow-hidden text-ellipsis leading-5 text-left;
+  /* Size comes from .drawer-item (12.5px, 0.7.107) — no second scale here.
+     Leading is 18px, not `leading-5`'s 20px: the label is the tallest thing in
+     the row, so 20 + 6 + 6 padding made every row 32px and the declared
+     `min-height: 30px` never applied. The reference's row is 30. */
+  @apply flex-1 whitespace-nowrap overflow-hidden text-ellipsis leading-[18px] text-left;
   font-size: inherit;
 }
 

package/src/lib/ui/components/filter-pills/filter-pills.component.html

@@ -3,10 +3,13 @@
     <button
       type="button"
       [attr.aria-pressed]="isActive(option)"
-      class="flex items-center gap-small px-[11px] py-[4px] rounded-full border txt-utility-caption font-bold cursor-pointer transition-colors"
+      class="fx-pill flex items-center rounded-full border cursor-pointer transition-colors"
       [ngClass]="pillClass(option)"
       (click)="valueChange.emit(option.value)"
     >
+      @if (option.icon) {
+        <lucide-icon [img]="option.icon" [size]="14" class="flex shrink-0" />
+      }
       {{ option.label }}
       @if (option.count !== null && option.count !== undefined) {
         <span [ngClass]="countClass(option)" style="font-family: var(--og-font-figure)">{{ option.count }}</span>

package/src/lib/ui/components/filter-pills/filter-pills.component.scss

@@ -0,0 +1,23 @@
+@reference '../../../styles/tailwind.css';
+
+/* Pill metrics to the reference (measured in the browser 16/09): 29px tall,
+   6px/12px padding, --og-fs-xs at weight 600, 7px between label and count.
+   It was 26px at 4px/11px, 12px/700 and a 4px gap — a step smaller, a step
+   heavier and a step tighter than the design at every point. */
+.fx-pill {
+  padding: 6px 12px;
+  gap: 7px;
+  font-size: var(--og-fs-xs);
+  font-weight: 600;
+  /* 15px, not a ratio: 6+6 padding + 2 border + 15 = the reference's 29px.
+     `1.4` on 11.5px renders 16.1 and the pill came out 30. */
+  line-height: 15px;
+}
+
+/* Hover lift, matching the reference's `.bi-filter-pill:hover` — the same
+   0 2px 7px rgba(0,0,0,.12) every other button in that design gets
+   (`.og-button:hover`, which `.btn-alternative` already carries here).
+   Measured 16/09; the pill had no hover affordance at all before. */
+.fx-pill:hover {
+  box-shadow: 0 2px 7px rgb(0 0 0 / 0.12);
+}

package/src/lib/ui/components/master-detail/master-detail.component.css

@@ -73,9 +73,21 @@
     min-height: 420px;
   }
 
-  /* Panes CO GIÃN: facets/list nhường chỗ để cụm detail luôn có sàn 400px.
-     `--fx-md-list-width` (input `listWidth`) giờ là bề rộng MONG MUỐN kiêm
-     tối đa của cụm list, không còn là con số cứng. */
+  /* Track widths are the DESIGN'S own: every three-column screen in the demo
+     bundle is `204px minmax(0,1fr) 340px` — measured on Results, License and
+     Relationships, 17/09. So the rail and the DETAIL are the fixed tracks and
+     the LIST takes what is left.
+
+     It used to be the other way round: the list was capped at 420px and the
+     detail was `flex: 1 1 360px`, so every pixel of a wide window went to the
+     reading pane — ~930px of it at 1920, against a list that never grew past
+     420 (anh Tú 17/09: kéo rộng cột list ra và thu nhỏ cột detail lại).
+
+     All three still SHRINK below their track (`flex-basis` + a floor, not a
+     hard width): with the rail open the three floors add up past the 720px
+     where this query starts, and a pane that refuses to give way would push
+     the frame into a horizontal scrollbar instead. Collapsed, the rail is
+     40px and 40 + 260 + 300 fits. */
   /* Hairline to the RIGHT of rail and list instead of below. */
   .fx-md-facets,
   .fx-md-list {
@@ -91,10 +103,10 @@
     max-width: 40px;
   }
   .fx-md-facets--open {
-    flex: 0 1 230px;
+    flex: 0 1 204px;
     width: auto;
-    min-width: 200px;
-    max-width: 260px;
+    min-width: 180px;
+    max-width: 204px;
   }
   .fx-md-rail-toggle {
     height: 100%;
@@ -109,14 +121,30 @@
 
   .fx-md-list {
     width: auto;
-    flex: 0 1 var(--fx-md-list-width, 420px);
+    flex: 1 1 0;
     min-width: 260px;
-    max-width: var(--fx-md-list-width, 420px);
+    /* Uncapped unless a caller asks for one — see the `listWidth` input. */
+    max-width: var(--fx-md-list-width, none);
   }
 
   .fx-md-detail {
+    width: auto;
+    flex: 0 1 var(--fx-md-detail-width, 340px);
+    min-width: 300px;
+    max-width: var(--fx-md-detail-width, 340px);
+  }
+
+  /* `detailWidth="auto"`: the pre-0.7.130 split, kept for the panes that need
+     the room (Binaries, Remediation — anh Tú 17/09). The detail takes the
+     spare width and the LIST goes back to being the capped one. */
+  .fx-md-row--detail-fluid .fx-md-list {
+    flex: 0 1 var(--fx-md-list-width, 420px);
+    max-width: var(--fx-md-list-width, 420px);
+  }
+  .fx-md-row--detail-fluid .fx-md-detail {
     flex: 1 1 360px;
     min-width: 360px;
+    max-width: none;
   }
 }
 

package/src/lib/ui/components/master-detail/master-detail.component.html

@@ -6,6 +6,8 @@
   class="fx-md-row flex flex-col items-stretch"
   [class.fx-md-row--rail-open]="railOpen()"
   [style.--fx-md-list-width]="listWidth()"
+  [class.fx-md-row--detail-fluid]="detailFluid()"
+  [style.--fx-md-detail-width]="detailFluid() ? null : detailWidth()"
   [style.--fx-md-pane-h]="paneHeight()"
 >
   <!-- Facets rail — collapsible (» / «), collapsed = 40px strip with the label
@@ -108,7 +110,7 @@
         <div class="flex gap-small">
           <button
             type="button"
-            class="btn-alternative !h-8 !px-semi text-sm"
+            class="btn-alternative"
             [disabled]="!paginator().hasPreviousPage()"
             (click)="paginator().previousPage()"
           >
@@ -116,7 +118,7 @@
           </button>
           <button
             type="button"
-            class="btn-alternative !h-8 !px-semi text-sm"
+            class="btn-alternative"
             [disabled]="!paginator().hasNextPage()"
             (click)="paginator().nextPage()"
           >

package/src/lib/ui/components/section-card/section-card.component.html

@@ -1,20 +1,25 @@
 <!-- flex column filling the host: cards in one grid row share a height and a
      projected footer can sit at the bottom with `mt-auto` (design 01). -->
-<div class="card-common bg-surface flex flex-col flex-1 min-h-0">
+<!-- The card itself carries NO padding: the reference pads the header and the
+     body separately (10px 12px 4px / 10px 12px, measured 16/09), which is what
+     lets the header rule sit flush and the body start tight under it. -->
+<div class="card-common fx-section-card bg-surface flex flex-col flex-1 min-h-0">
   @if (titleStyle() === 'eyebrow') {
-    <div class="flex items-baseline justify-between gap-normal mb-large">
+    <div class="fx-section-card__head flex items-baseline justify-between gap-normal">
       <span class="txt-eyebrow">{{ title() }}</span>
       @if (aside()) {
-        <span class="txt-utility-description text-right">{{ aside() }}</span>
+        <span class="fx-section-card__aside text-right">{{ aside() }}</span>
       }
     </div>
   } @else {
-    <div class="flex items-center gap-normal mb-large">
+    <div class="fx-section-card__head flex items-center gap-normal">
       @if (icon) {
         <fx-ui-hero-icon [ngClass]="iconClass" [icon]="icon" [size]="18"></fx-ui-hero-icon>
       }
       <span class="txt-heading-06">{{ title() }}</span>
     </div>
   }
-  <ng-content></ng-content>
+  <div class="fx-section-card__body flex flex-col flex-1 min-h-0">
+    <ng-content></ng-content>
+  </div>
 </div>

package/src/lib/ui/components/section-card/section-card.component.scss

@@ -0,0 +1,28 @@
+@reference '../../../styles/tailwind.css';
+
+/* Card padding, to the reference (measured in the browser 16/09).
+   `card-common` pads 20px/16px uniformly, which the design never does: there
+   the card has none, the header carries 10px 12px 4px and the body 10px 12px.
+   The uniform 16/20 is what made every panel on the page read roomier than the
+   design and pushed each section's first row 6px further from its title. */
+.fx-section-card {
+  padding: 0;
+}
+
+.fx-section-card__head {
+  padding: 10px 12px 4px;
+}
+
+.fx-section-card__body {
+  padding: 10px 12px;
+}
+
+/* Section caption ("ranked by risk · across all projects"): 11.5px/400 in
+   --og-text-faint. `txt-utility-description` is 12px/300 in --og-text-secondary
+   — a size too large, a weight too light and a shade too dark. */
+.fx-section-card__aside {
+  font-size: var(--og-fs-xs);
+  font-weight: 400;
+  line-height: 1.4;
+  color: rgb(var(--og-text-faint));
+}

package/src/lib/ui/components/stat-cards/stat-cards.component.css

@@ -16,3 +16,51 @@
     grid-template-columns: minmax(0, 1fr) !important;
   }
 }
+
+/* The ruled KPI strip, to the reference (`.og-statgrid--ruled`, measured in the
+   browser 16/09): one bordered, rounded, softly-shadowed panel with NO gap,
+   its cells padded 10px 12px and separated by a hairline on every cell but the
+   last. Same treatment the Exploit Intelligence page already hand-rolled. */
+.fx-stat-grid--ruled {
+  gap: 0;
+  border: 1px solid rgb(var(--og-border));
+  border-radius: var(--og-radius-control);
+  background: rgb(var(--og-surface));
+  box-shadow:
+    0 1px 2px rgb(0 0 0 / 0.04),
+    0 3px 8px rgb(0 0 0 / 0.05);
+  overflow: hidden;
+}
+
+.fx-stat-grid--ruled .fx-stat-cell {
+  padding: 10px 12px;
+  border-right: 1px solid rgb(var(--og-border));
+}
+
+.fx-stat-grid--ruled .fx-stat-cell--last {
+  border-right: 0;
+}
+
+/* Cell type: 10.5px faint label, a 32px mono figure 6px below it, an 11.5px
+   muted sub 4px below that. */
+.fx-stat-cell__label {
+  font-size: var(--og-fs-2xs);
+  font-weight: 400;
+  color: rgb(var(--og-text-faint));
+}
+
+.fx-stat-cell__figure {
+  font-family: var(--og-font-figure);
+  font-size: 32px;
+  font-weight: 400;
+  line-height: 1.1;
+  color: rgb(var(--og-text));
+  margin-top: 6px;
+}
+
+.fx-stat-cell__sub {
+  font-size: var(--og-fs-xs);
+  font-weight: 400;
+  color: rgb(var(--og-text-muted));
+  margin-top: 4px;
+}

package/src/lib/ui/components/stat-cards/stat-cards.component.html

@@ -1,16 +1,25 @@
-<div class="fx-stat-grid grid gap-normal" [ngStyle]="{ 'grid-template-columns': gridColumns }">
-  @for (card of cards(); track card.label) {
+<!-- variant="figure" is ONE ruled panel, not N cards: the reference draws the
+     KPI strip as a single bordered box divided by hairlines (`.og-statgrid
+     --ruled`, measured 16/09). It was four separate `card-common` boxes with an
+     8px gap, which read as four objects where the design has one. The other
+     variant keeps its own cards. -->
+<div
+  class="fx-stat-grid grid"
+  [class.fx-stat-grid--ruled]="variant() === 'figure'"
+  [class.gap-normal]="variant() !== 'figure'"
+  [ngStyle]="{ 'grid-template-columns': gridColumns }"
+>
+  @for (card of cards(); track card.label; let last = $last) {
     @if (variant() === 'figure') {
-      <div class="card-common flex flex-col gap-small min-w-0">
-        <span class="txt-utility-caption text-text-secondary truncate">{{ card.label }}</span>
+      <div class="fx-stat-cell flex flex-col min-w-0" [class.fx-stat-cell--last]="last">
+        <span class="fx-stat-cell__label truncate">{{ card.label }}</span>
         <span
-          class="txt-heading-03"
+          class="fx-stat-cell__figure"
           [ngClass]="numClass(card)"
-          style="font-family: var(--og-font-figure)"
           ><span [fxCountUp]="card.value"></span></span
         >
         @if (card.sub) {
-          <span class="txt-utility-caption" [ngClass]="subClass(card)">{{ card.sub }}</span>
+          <span class="fx-stat-cell__sub" [ngClass]="subClass(card)">{{ card.sub }}</span>
         }
         @if (card.spark?.length) {
           <fx-ui-sparkbar class="mt-xs" [values]="card.spark!" [height]="16" [tone]="card.tone ?? null" />

package/tokens.css

@@ -53,6 +53,9 @@
 
   --color-cta: #c2582a;
   --color-cta-hover: #b34e24;
+  /* Border of the CTA while hovered — the reference's `.bi-newbtn:hover`
+     darkens the edge one more step than the fill (16/09). */
+  --color-cta-hover-border: #a3461f;
 
   /* ---- Legacy colour names (@deprecated — remove after the V2 campaign;
      they resolve through the alias layer in theme.css, so every existing

package/types/foxeltech-angular-ui-flow.d.ts

@@ -51,14 +51,36 @@ declare class FlowCanvasComponent {
     readonly height: _angular_core.InputSignal<string>;
     /** Caller-translated hint shown when the graph is empty. */
     readonly emptyText: _angular_core.InputSignal<string>;
+    /**
+     * Work is running against this chain — validation, typically.
+     *
+     * The edges become a travelling dashed line ("marching ants") so the canvas
+     * says something is in flight without a spinner sitting on top of the graph.
+     * Purely presentational: the caller owns what "busy" means and when it ends.
+     */
+    readonly busy: _angular_core.InputSignal<boolean>;
     readonly nodeClick: _angular_core.OutputEmitterRef<string>;
     private readonly flow;
     private readonly host;
     private readonly destroyRef;
     constructor();
     private fitHandle;
-    /** Coalesces fit requests into one frame after vflow has measured its nodes. */
+    /**
+     * Coalesces fit requests, then fits TWICE — one frame apart.
+     *
+     * vflow frames the graph from `getNodesBounds`, which sums each node's
+     * `point()` and its `size()`. For an html-template node that size is the
+     * MEASURED box and is still 0 on the frame the nodes are created, so the
+     * first fit sees a bounds box running origin-to-origin: five 176px cards
+     * measured 864px instead of 1040px, and the graph was framed 88px — half a
+     * card — too far right, clipping the last one (MEASURED 16/09).
+     *
+     * The second pass runs once the cards have been laid out and measured, and
+     * is what actually frames them. The first is kept so a slow frame still
+     * shows something sensible rather than the graph pinned top-left.
+     */
     private scheduleFit;
+    private fit;
     /** Column index per node: pinned value, else longest path from a source. */
     private readonly columns;
     /** ngx-vflow nodes: html-template cards positioned by the derived layout. */
@@ -86,7 +108,7 @@ declare class FlowCanvasComponent {
     isEdgeActive(edge: Edge): boolean;
     isEdgeDimmed(edge: Edge): boolean;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FlowCanvasComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FlowCanvasComponent, "fx-ui-flow-canvas", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "edges": { "alias": "edges"; "required": false; "isSignal": true; }; "activeId": { "alias": "activeId"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; }, { "nodeClick": "nodeClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FlowCanvasComponent, "fx-ui-flow-canvas", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "edges": { "alias": "edges"; "required": false; "isSignal": true; }; "activeId": { "alias": "activeId"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "busy": { "alias": "busy"; "required": false; "isSignal": true; }; }, { "nodeClick": "nodeClick"; }, never, never, true, never>;
 }
 
 declare class FlowConnection {