@truenas/ui-components 0.8.9 → 0.8.11

package/types/truenas-ui-components.d.ts

@@ -17529,6 +17529,37 @@ export declare class TnSidePanelHeaderActionDirective {
   static ɵfac: i0.ɵɵFactoryDeclaration<TnSidePanelHeaderActionDirective, never>;
   static ɵdir: i0.ɵɵDirectiveDeclaration<TnSidePanelHeaderActionDirective, "[tnSidePanelHeaderAction]", never, {}, {}, never, never, true, never>;
 }
+/**
+ * Directive to mark an element as the side-panel's heading, for a heading that
+ * `title` cannot express — one with an image or a status beside the text (#372).
+ *
+ * It takes the place `title` takes: the start of the header, growing into the
+ * free space and shrinking below its content width, with the header actions
+ * and the close button still at the far end. It is not inside
+ * `.tn-side-panel__header-actions`, so a consumer has no private class to
+ * override to get it there.
+ *
+ * The panel renders no `<h2>` of its own unless `title` is set as well, so the
+ * heading is yours to write — and so is the dialog's name: point
+ * `ariaLabelledby` at it.
+ *
+ * @example
+ * ```html
+ * <tn-side-panel [(open)]="isOpen" ariaLabelledby="assistant-heading">
+ *   <div tnSidePanelTitle>
+ *     <h2 id="assistant-heading">
+ *       <img src="logo.svg" alt="TrueNAS" /> Assistant
+ *     </h2>
+ *     <span role="status">3 of 3 systems reachable</span>
+ *   </div>
+ *   Content here
+ * </tn-side-panel>
+ * ```
+ */
+export declare class TnSidePanelTitleDirective {
+  static ɵfac: i0.ɵɵFactoryDeclaration<TnSidePanelTitleDirective, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<TnSidePanelTitleDirective, "[tnSidePanelTitle]", never, {}, {}, never, never, true, never>;
+}
 /**
  * A modal side panel: `role="dialog"` with `aria-modal="true"`, focus trapped
  * while it is open and restored to the opener when it closes.
@@ -17723,6 +17754,13 @@ export declare class TnSidePanelComponent implements OnDestroy {
   closed: import("@angular/core").OutputEmitterRef<void>;
   private actionContent;
   protected hasActions: import("@angular/core").Signal<boolean>;
+  /**
+   * Whether a `tnSidePanelTitle` was projected (#372). The slot's wrapper is
+   * rendered only then, because it grows into the header's free space: an
+   * empty one beside a `title` heading would take half of the heading's room.
+   */
+  private titleSlotContent;
+  protected hasTitleSlot: import("@angular/core").Signal<boolean>;
   readonly panelId: string;
   readonly titleId: string;
   /**
@@ -17892,7 +17930,7 @@ export declare class TnSidePanelComponent implements OnDestroy {
     "open": "openChange";
     "opened": "opened";
     "closed": "closed";
-  }, ["actionContent"], ["[tnSidePanelHeaderAction]", "*", "[tnSidePanelAction]"], true, never>;
+  }, ["actionContent", "titleSlotContent"], ["[tnSidePanelTitle]", "[tnSidePanelHeaderAction]", "*", "[tnSidePanelAction]"], true, never>;
 }
 export interface SidePanelHarnessFilters extends BaseHarnessFilters {
   /** Filter by title text. */
@@ -17921,6 +17959,13 @@ export declare class TnSidePanelHarness extends ComponentHarness {
   /**
    * Get the panel title text, or `''` for a panel that renders no title.
    *
+   * The title is the `title` heading when there is one, and otherwise the
+   * heading inside a projected `tnSidePanelTitle` (#372) — the first `h1`–`h6`
+   * or `role="heading"` element there, which may be the projected element
+   * itself. Only the heading: a status beside it in the slot is not the title.
+   * Its text is the heading's text content, so an image's `alt` is not part of
+   * it.
+   *
    * `locatorForOptional`, not `locatorFor`: since #214 a panel with no `title`
    * renders no heading element at all — an `<h2>` with nothing in it is an
    * `empty-heading` violation — and `locatorFor` throws on a selector that