@yuuvis/material 2.17.0 → 2.19.0

package/fesm2022/yuuvis-material-panes.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, input, contentChild, inject, ElementRef, Renderer2, output, signal, computed, Directive, NgModule } from '@angular/core';
+import { Component, input, contentChild, inject, ElementRef, Renderer2, output, signal, computed, Directive, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/material/icon';
@@ -24,47 +24,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         }] });
 
 /**
- * Component for the pane header. It can be used to display a title,
- * subtitle and actions in the pane header.
+ * Header component for `ymt-pane`. Renders a two-row layout:
  *
- * The title and subtitle can be set via the `title` and `subtitle` inputs
- * or via the `yuvPaneHeaderTitle` and `yuvPaneHeaderSubtitle` template refs:
+ * - **Top row:** icon (optional), title, and actions area
+ * - **Bottom row:** subtitle and badges area
  *
+ * ## Title & Subtitle
+ *
+ * Can be set as plain strings via the `title` and `subtitle` inputs,
+ * or as rich content via the `#yuvPaneHeaderTitle` and `#yuvPaneHeaderSubtitle`
+ * content child templates. When a template is provided it takes precedence
+ * over the corresponding string input.
+ *
+ * ## Icon
+ *
+ * Set the `icon` input to a Material Icon ligature to display an icon
+ * to the left of the title row.
+ *
+ * ## Actions & Badges
+ *
+ * Pass a `TemplateRef` to the `actions` input to render action buttons
+ * aligned to the right of the title row. Similarly, pass a `TemplateRef`
+ * to the `badges` input to render badges aligned to the right of the
+ * subtitle row.
+ *
+ * @example
  * ```html
- * <!-- Using inputs -->
- * <ymt-pane-header [title]="'Pane Title'" [subtitle]="'Pane Subtitle'"></ymt-pane-header>
- * <!-- Using template refs -->
- * <ymt-pane-header>
- * <ng-template #yuvPaneHeaderTitle><h2>🦁Custom pane title</h2></ng-template>
- * <ng-template #yuvPaneHeaderSubtitle><ymt-badge severity="warning">locked</ymt-badge></ng-template>
+ * <!-- Simple usage with string inputs -->
+ * <ymt-pane-header
+ *   [title]="'Documents'"
+ *   [subtitle]="'12 items'"
+ *   [icon]="'folder'"
+ *   [actions]="headerActions"
+ *   [badges]="headerBadges">
+ * </ymt-pane-header>
+ *
+ * <ng-template #headerActions>
+ *   <button ymt-icon-button icon="add"></button>
+ * </ng-template>
+ *
+ * <ng-template #headerBadges>
+ *   <ymt-badge severity="info">active</ymt-badge>
+ * </ng-template>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Rich content via template projection -->
+ * <ymt-pane-header [icon]="'lock'">
+ *   <ng-template #yuvPaneHeaderTitle>Custom <strong>title</strong></ng-template>
+ *   <ng-template #yuvPaneHeaderSubtitle><ymt-badge severity="warning">locked</ymt-badge></ng-template>
  * </ymt-pane-header>
  * ```
  */
 class YmtPaneHeaderComponent {
-    /**
-     * Title of the pane
-     */
+    /** Plain-text title displayed in the top row. Ignored when a `#yuvPaneHeaderTitle` template is projected. */
     title = input();
-    /**
-     * Icon of the pane
-     */
+    /** Material Icon ligature rendered to the left of the title row (e.g. `'folder'`, `'lock'`). */
     icon = input();
-    /**
-     * Subtitle of the pane
-     */
+    /** Plain-text subtitle displayed in the bottom row. Ignored when a `#yuvPaneHeaderSubtitle` template is projected. */
     subtitle = input();
-    /**
-     * TemplateRef for actions area in the pane header.
-     */
+    /** Template rendered in the actions area, aligned to the right of the title row. */
     actions = input();
+    /** Template rendered in the badges area, aligned to the right of the subtitle row. */
+    badges = input();
+    /** Content child template for rich title content. Takes precedence over the `title` input. */
     titleSlot = contentChild('yuvPaneHeaderTitle');
+    /** Content child template for rich subtitle content. Takes precedence over the `subtitle` input. */
     subtitleSlot = contentChild('yuvPaneHeaderSubtitle');
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YmtPaneHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: YmtPaneHeaderComponent, isStandalone: true, selector: "ymt-pane-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "titleSlot", first: true, predicate: ["yuvPaneHeaderTitle"], descendants: true, isSignal: true }, { propertyName: "subtitleSlot", first: true, predicate: ["yuvPaneHeaderSubtitle"], descendants: true, isSignal: true }], ngImport: i0, template: "<header>\n  @if (icon()) {\n    <div class=\"icon\">\n      <mat-icon class=\"pane-icon\">{{ icon() }}</mat-icon>\n    </div>\n  }\n  <h2>\n    @let ts = titleSlot();\n    @if (ts) {\n      <ng-container *ngTemplateOutlet=\"ts\"></ng-container>\n    } @else {\n      {{ title() }}\n    }\n  </h2>\n  <small>\n    @let ss = subtitleSlot();\n    @if (ss) {\n      <ng-container *ngTemplateOutlet=\"ss\"></ng-container>\n    } @else {\n      {{ subtitle() }}\n    }\n  </small>\n  @let a = actions();\n  @if (a) {\n    <div class=\"actions\">\n      <ng-container *ngTemplateOutlet=\"a\"></ng-container>\n    </div>\n  }\n</header>\n", styles: [":host{--_header-padding: var(--header-padding, var(--ymt-spacing-xl));--_header-background: var(--header-background, transparent);--_header-border-color: var(--header-border-color, transparent);--_header-icon-background: var(--header-icon-background, var(--ymt-surface-container-high))}:host header{display:grid;align-items:center;grid-template-columns:var(--_header-padding) auto 1fr auto;grid-template-rows:var(--_header-padding) auto auto var(--_header-padding);grid-template-areas:\". icon . actions\" \". icon title actions\" \". icon subtitle actions\" \". . . actions\";flex:0 0 auto;background-color:var(--_header-background);border-block-end:1px solid var(--_header-border-color)}:host header .icon{grid-area:icon;margin-inline-end:var(--ymt-spacing-m);background-color:var(--_header-icon-background);border-radius:0 0 var(--ymt-corner-s) var(--ymt-corner-s);height:100%;width:var(--ymt-sizing-3xl);display:flex;align-items:center;justify-content:center}:host header h2{grid-area:title;margin:0;font:var(--ymt-font-title-large);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host header small{grid-area:subtitle;font:var(--ymt-font-body-subtle-font);font-weight:var(--ymt-font-body-subtle-weight);color:var(--ymt-on-surface-type-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host header .actions{grid-area:actions;padding-inline:var(--ymt-spacing-xl);display:flex;gap:var(--ymt-spacing-xs)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: YmtPaneHeaderComponent, isStandalone: true, selector: "ymt-pane-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, badges: { classPropertyName: "badges", publicName: "badges", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "titleSlot", first: true, predicate: ["yuvPaneHeaderTitle"], descendants: true, isSignal: true }, { propertyName: "subtitleSlot", first: true, predicate: ["yuvPaneHeaderSubtitle"], descendants: true, isSignal: true }], ngImport: i0, template: "<header>\n  @if (icon()) {\n    <div class=\"icon\" aria-hidden=\"true\">\n      <mat-icon class=\"pane-icon\">{{ icon() }}</mat-icon>\n    </div>\n  }\n  <!-- top row (title and actions) -->\n  <div class=\"row title-row\">\n    <h2>\n      @let ts = titleSlot();\n      @if (ts) {\n        <ng-container *ngTemplateOutlet=\"ts\" />\n      } @else {\n        {{ title() }}\n      }\n    </h2>\n    @let a = actions();\n    @if (a) {\n      <div class=\"actions\">\n        <ng-container *ngTemplateOutlet=\"a\" />\n      </div>\n    }\n  </div>\n\n  <!-- bottom row (subtitle and badges) -->\n  <div class=\"row subtitle-row\">\n    <small>\n      @let ss = subtitleSlot();\n      @if (ss) {\n        <ng-container *ngTemplateOutlet=\"ss\" />\n      } @else {\n        {{ subtitle() }}\n      }\n    </small>\n    @let b = badges();\n    @if (b) {\n      <div class=\"badges\">\n        <ng-container *ngTemplateOutlet=\"b\" />\n      </div>\n    }\n  </div>\n</header>\n", styles: [":host{--_header-padding: var(--header-padding, var(--ymt-spacing-xl));--_header-background: var(--header-background, transparent);--_header-border-color: var(--header-border-color, transparent);--_header-icon-background: var(--header-icon-background, var(--ymt-surface-container-high))}:host header{display:grid;align-items:center;grid-template-columns:var(--_header-padding) auto 1fr calc(var(--_header-padding) / 2);grid-template-rows:auto auto var(--_header-padding);grid-template-areas:\". icon titleRow .\" \". icon subtitleRow .\" \". . . .\";flex:0 0 auto;background-color:var(--_header-background);border-block-end:1px solid var(--_header-border-color)}:host header .row{display:flex;flex-flow:row nowrap;align-items:center}:host header .title-row{grid-area:titleRow}:host header .subtitle-row{grid-area:subtitleRow}:host header .icon{grid-area:icon;align-items:center;margin-inline-end:var(--ymt-spacing-m);background-color:var(--_header-icon-background);border-radius:0 0 var(--ymt-corner-s) var(--ymt-corner-s);height:100%;width:var(--ymt-sizing-3xl);display:flex;padding-block-start:calc(var(--_header-padding) + 2px);padding-block-end:var(--ymt-spacing-xs);align-items:start;justify-content:center}:host header h2{flex:1;margin:0;padding:var(--_header-padding) 0 0 0;font:var(--ymt-font-title-large);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-self:end}:host header small{flex:1;font:var(--ymt-font-body-subtle-font);font-weight:var(--ymt-font-body-subtle-weight);color:var(--ymt-on-surface-type-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-self:start}:host header .actions{grid-area:actions;display:flex;align-items:center;justify-content:end;gap:var(--ymt-spacing-xs)}:host header .badges{grid-area:badges;display:flex;gap:var(--ymt-spacing-xs)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YmtPaneHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ymt-pane-header', imports: [CommonModule, MatIconModule], template: "<header>\n  @if (icon()) {\n    <div class=\"icon\">\n      <mat-icon class=\"pane-icon\">{{ icon() }}</mat-icon>\n    </div>\n  }\n  <h2>\n    @let ts = titleSlot();\n    @if (ts) {\n      <ng-container *ngTemplateOutlet=\"ts\"></ng-container>\n    } @else {\n      {{ title() }}\n    }\n  </h2>\n  <small>\n    @let ss = subtitleSlot();\n    @if (ss) {\n      <ng-container *ngTemplateOutlet=\"ss\"></ng-container>\n    } @else {\n      {{ subtitle() }}\n    }\n  </small>\n  @let a = actions();\n  @if (a) {\n    <div class=\"actions\">\n      <ng-container *ngTemplateOutlet=\"a\"></ng-container>\n    </div>\n  }\n</header>\n", styles: [":host{--_header-padding: var(--header-padding, var(--ymt-spacing-xl));--_header-background: var(--header-background, transparent);--_header-border-color: var(--header-border-color, transparent);--_header-icon-background: var(--header-icon-background, var(--ymt-surface-container-high))}:host header{display:grid;align-items:center;grid-template-columns:var(--_header-padding) auto 1fr auto;grid-template-rows:var(--_header-padding) auto auto var(--_header-padding);grid-template-areas:\". icon . actions\" \". icon title actions\" \". icon subtitle actions\" \". . . actions\";flex:0 0 auto;background-color:var(--_header-background);border-block-end:1px solid var(--_header-border-color)}:host header .icon{grid-area:icon;margin-inline-end:var(--ymt-spacing-m);background-color:var(--_header-icon-background);border-radius:0 0 var(--ymt-corner-s) var(--ymt-corner-s);height:100%;width:var(--ymt-sizing-3xl);display:flex;align-items:center;justify-content:center}:host header h2{grid-area:title;margin:0;font:var(--ymt-font-title-large);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host header small{grid-area:subtitle;font:var(--ymt-font-body-subtle-font);font-weight:var(--ymt-font-body-subtle-weight);color:var(--ymt-on-surface-type-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host header .actions{grid-area:actions;padding-inline:var(--ymt-spacing-xl);display:flex;gap:var(--ymt-spacing-xs)}\n"] }]
+            args: [{ selector: 'ymt-pane-header', imports: [CommonModule, MatIconModule], template: "<header>\n  @if (icon()) {\n    <div class=\"icon\" aria-hidden=\"true\">\n      <mat-icon class=\"pane-icon\">{{ icon() }}</mat-icon>\n    </div>\n  }\n  <!-- top row (title and actions) -->\n  <div class=\"row title-row\">\n    <h2>\n      @let ts = titleSlot();\n      @if (ts) {\n        <ng-container *ngTemplateOutlet=\"ts\" />\n      } @else {\n        {{ title() }}\n      }\n    </h2>\n    @let a = actions();\n    @if (a) {\n      <div class=\"actions\">\n        <ng-container *ngTemplateOutlet=\"a\" />\n      </div>\n    }\n  </div>\n\n  <!-- bottom row (subtitle and badges) -->\n  <div class=\"row subtitle-row\">\n    <small>\n      @let ss = subtitleSlot();\n      @if (ss) {\n        <ng-container *ngTemplateOutlet=\"ss\" />\n      } @else {\n        {{ subtitle() }}\n      }\n    </small>\n    @let b = badges();\n    @if (b) {\n      <div class=\"badges\">\n        <ng-container *ngTemplateOutlet=\"b\" />\n      </div>\n    }\n  </div>\n</header>\n", styles: [":host{--_header-padding: var(--header-padding, var(--ymt-spacing-xl));--_header-background: var(--header-background, transparent);--_header-border-color: var(--header-border-color, transparent);--_header-icon-background: var(--header-icon-background, var(--ymt-surface-container-high))}:host header{display:grid;align-items:center;grid-template-columns:var(--_header-padding) auto 1fr calc(var(--_header-padding) / 2);grid-template-rows:auto auto var(--_header-padding);grid-template-areas:\". icon titleRow .\" \". icon subtitleRow .\" \". . . .\";flex:0 0 auto;background-color:var(--_header-background);border-block-end:1px solid var(--_header-border-color)}:host header .row{display:flex;flex-flow:row nowrap;align-items:center}:host header .title-row{grid-area:titleRow}:host header .subtitle-row{grid-area:subtitleRow}:host header .icon{grid-area:icon;align-items:center;margin-inline-end:var(--ymt-spacing-m);background-color:var(--_header-icon-background);border-radius:0 0 var(--ymt-corner-s) var(--ymt-corner-s);height:100%;width:var(--ymt-sizing-3xl);display:flex;padding-block-start:calc(var(--_header-padding) + 2px);padding-block-end:var(--ymt-spacing-xs);align-items:start;justify-content:center}:host header h2{flex:1;margin:0;padding:var(--_header-padding) 0 0 0;font:var(--ymt-font-title-large);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-self:end}:host header small{flex:1;font:var(--ymt-font-body-subtle-font);font-weight:var(--ymt-font-body-subtle-weight);color:var(--ymt-on-surface-type-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-self:start}:host header .actions{grid-area:actions;display:flex;align-items:center;justify-content:end;gap:var(--ymt-spacing-xs)}:host header .badges{grid-area:badges;display:flex;gap:var(--ymt-spacing-xs)}\n"] }]
         }] });
 
 /**
@@ -229,80 +262,190 @@ class YmtPaneTopBarComponent {
      */
     actions = input();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YmtPaneTopBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: YmtPaneTopBarComponent, isStandalone: true, selector: "ymt-pane-top-bar", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let ta = actions();\n@if (ta) {\n  <div class=\"top-bar\">\n    <div class=\"actions\">\n      <ng-container *ngTemplateOutlet=\"ta\"></ng-container>\n    </div>\n  </div>\n}\n", styles: [":host{border-block-end:1px solid var(--ymt-outline-variant)}:host .top-bar{flex:0 0 auto;padding:var(--ymt-spacing-4xs) var(--ymt-spacing-2xs);display:flex;align-items:center}:host .top-bar .actions{display:flex;flex:1;gap:var(--ymt-spacing-xs);align-items:center;justify-content:end}:host .top-bar .actions ::ng-deep>[align=start]{margin-inline-end:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: YmtPaneTopBarComponent, isStandalone: true, selector: "ymt-pane-top-bar", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let ta = actions();\n@if (ta) {\n  <div class=\"top-bar\">\n    <div class=\"actions\">\n      <ng-container *ngTemplateOutlet=\"ta\"></ng-container>\n    </div>\n  </div>\n}\n", styles: [":host{border-block-end:1px solid var(--ymt-outline-variant)}:host .top-bar{flex:0 0 auto;padding:var(--ymt-spacing-2xs) var(--ymt-spacing-xs);display:flex;align-items:center}:host .top-bar .actions{display:flex;flex:1;gap:var(--ymt-spacing-xs);align-items:center;justify-content:end}:host .top-bar .actions ::ng-deep>[align=start]{margin-inline-end:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YmtPaneTopBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ymt-pane-top-bar', imports: [CommonModule], template: "@let ta = actions();\n@if (ta) {\n  <div class=\"top-bar\">\n    <div class=\"actions\">\n      <ng-container *ngTemplateOutlet=\"ta\"></ng-container>\n    </div>\n  </div>\n}\n", styles: [":host{border-block-end:1px solid var(--ymt-outline-variant)}:host .top-bar{flex:0 0 auto;padding:var(--ymt-spacing-4xs) var(--ymt-spacing-2xs);display:flex;align-items:center}:host .top-bar .actions{display:flex;flex:1;gap:var(--ymt-spacing-xs);align-items:center;justify-content:end}:host .top-bar .actions ::ng-deep>[align=start]{margin-inline-end:auto}\n"] }]
+            args: [{ selector: 'ymt-pane-top-bar', imports: [CommonModule], template: "@let ta = actions();\n@if (ta) {\n  <div class=\"top-bar\">\n    <div class=\"actions\">\n      <ng-container *ngTemplateOutlet=\"ta\"></ng-container>\n    </div>\n  </div>\n}\n", styles: [":host{border-block-end:1px solid var(--ymt-outline-variant)}:host .top-bar{flex:0 0 auto;padding:var(--ymt-spacing-2xs) var(--ymt-spacing-xs);display:flex;align-items:center}:host .top-bar .actions{display:flex;flex:1;gap:var(--ymt-spacing-xs);align-items:center;justify-content:end}:host .top-bar .actions ::ng-deep>[align=start]{margin-inline-end:auto}\n"] }]
         }] });
 
 /**
- * Pane component.
+ * A pane is a container component that unifies the appearance and behavior of
+ * content areas in an app. It renders as a bordered, rounded card with a grid
+ * layout for its sub-components.
  *
- * A pane has a header and a main area. You may choose to not show a header at all:
+ * ## Structure
+ *
+ * A pane uses a vertical grid layout with four areas. All sub-components are optional:
+ *
+ * | Area     | Component          | Description                                        |
+ * |----------|--------------------|----------------------------------------------------|
+ * | top-bar  | *(internal)*       | Rendered automatically when `topBarActions` is set. |
+ * | header   | `ymt-pane-header`  | Title, subtitle, icon, and custom header actions.   |
+ * | main     | `ymt-pane-body`    | Scrollable main content area.                      |
+ * | footer   | `ymt-pane-footer`  | Right-aligned action bar with a top border.         |
  *
  * ```html
  * <ymt-pane>
- *  Pane content goes here.
+ *   <ymt-pane-header title="Users" subtitle="3 selected" [actions]="headerActions" />
+ *   <ymt-pane-body>Main content</ymt-pane-body>
+ *   <ymt-pane-footer>
+ *     <button ymt-button>Save</button>
+ *   </ymt-pane-footer>
  * </ymt-pane>
  * ```
  *
- * There are other components to be used within a pane:
- * - `ymt-pane-header`: Renders a pre-styled header area for the pane.
- * - `ymt-pane-body`: The main content area of the pane.
- * - `ymt-pane-footer`: A footer component to be used as footer area of the pane.
+ * ### `ymt-pane-header`
  *
- * You can change the appearance of the header area via CSS variables:
- * ```css
- * ymt-pane {
- *   --header-area-background: var(--ymt-surface-container-low);
- *   --header-area-border-color: var(--ymt-outline-variant);
- * }
- * ```
+ * Accepts `title`, `subtitle`, and `icon` as string inputs. For richer content,
+ * use the `#yuvPaneHeaderTitle` and `#yuvPaneHeaderSubtitle` template refs:
  *
- * The main area has a padding by default. You can customize or remove the padding via
- * CSS variables:
- * ```css
- * ymt-pane {
- *   --main-area-padding: 0;
- * }
+ * ```html
+ * <ymt-pane-header>
+ *   <ng-template #yuvPaneHeaderTitle><h2>Custom title</h2></ng-template>
+ *   <ng-template #yuvPaneHeaderSubtitle><ymt-badge severity="warning">locked</ymt-badge></ng-template>
+ * </ymt-pane-header>
  * ```
  *
- * Add actions to a pane:
+ * Header actions can be projected via the `[actions]` input (TemplateRef).
+ *
+ * ### Top bar actions
+ *
+ * Pass a `TemplateRef` to the `[topBarActions]` input to render icon buttons
+ * in a slim top bar above the header:
+ *
  * ```html
- * <ymt-pane title="My Pane" subTitle="Pane Subtitle">
- *   <ng-template #yuvPaneActions>
- *     <button ymt-icon-button><mat-icon>settings</mat-icon></button>
- *     <button ymt-icon-button><mat-icon>more</mat-icon></button>
- *   </ng-template>
+ * <ymt-pane [topBarActions]="actions">
+ *   <ymt-pane-body>Content</ymt-pane-body>
  * </ymt-pane>
+ *
+ * <ng-template #actions>
+ *   <button ymt-icon-button icon-button-size="small"><mat-icon>settings</mat-icon></button>
+ * </ng-template>
  * ```
  *
- * Toggle fullscreen mode:
+ * ## Fullscreen
+ *
+ * Every pane supports fullscreen mode. The pane expands to fill the viewport,
+ * background content becomes inert, and pressing <kbd>Escape</kbd> exits.
+ *
  * ```html
  * <ymt-pane #pane>
  *   <ymt-pane-body>
- *     <button (click)="pane.toggleFullscreen()">Fullscreen</button>
+ *     <button (click)="pane.toggleFullscreen()">Toggle fullscreen</button>
  *   </ymt-pane-body>
  * </ymt-pane>
  * ```
  *
+ * Programmatic API: `enterFullscreen()`, `exitFullscreen()`, `toggleFullscreen()`.
+ * Read the current state via the `fullscreenActive` signal.
+ * Listen to transitions via the `(fullscreenEnter)` and `(fullscreenExit)` outputs.
+ *
+ * ## Busy state
+ *
+ * Set `[busy]="true"` to replace the static border with a rotating
+ * conic-gradient border that signals a loading state:
+ *
+ * ```html
+ * <ymt-pane [busy]="isLoading()">
+ *   <ymt-pane-body>Content</ymt-pane-body>
+ * </ymt-pane>
+ * ```
+ *
+ * ## Enter animation
+ *
+ * Panes fade in on creation (0.15 s ease-out by default). Customize or delay
+ * the animation via CSS variables, or disable it entirely with the
+ * `[noAnimation]` input:
+ *
+ * ```css
+ * ymt-pane {
+ *   --enter-animation-duration: 0.3s;
+ *   --enter-animation-delay: 0.1s;
+ * }
+ * ```
+ *
+ * ```html
+ * <ymt-pane [noAnimation]="true"> ... </ymt-pane>
+ * ```
+ *
+ * ## Plain mode
+ *
+ * Set `[plain]="true"` to strip the border, border-radius, and background
+ * while keeping the inner grid structure. Useful when embedding a pane inside
+ * another styled container.
+ *
+ * ## CSS custom properties
+ *
+ * | Property                      | Default                       | Description                          |
+ * |-------------------------------|-------------------------------|--------------------------------------|
+ * | `--header-area-padding`       | `var(--ymt-spacing-xl)`       | Padding of the header area.          |
+ * | `--header-area-background`    | `transparent`                 | Background of the header area.       |
+ * | `--header-area-border-color`  | `transparent`                 | Bottom border of the header area.    |
+ * | `--main-area-padding`         | `0`                           | Padding of the body area.            |
+ * | `--pane-background-color`     | `var(--ymt-surface)`          | Background of the pane.              |
+ * | `--busy-border-width`         | `2px`                         | Width of the busy indicator border.  |
+ * | `--busy-border-color`         | `var(--ymt-primary)`          | Color of the busy indicator border.  |
+ * | `--enter-animation-duration`  | `0.15s`                       | Duration of the fade-in animation.   |
+ * | `--enter-animation-delay`     | `0s`                          | Delay before the fade-in starts.     |
  */
 class YmtPaneComponent {
+    /**
+     * This static block runs once when the class is first loaded (not per instance).
+     * It registers a custom CSS property (--busy-angle) with the browser's CSS engine via
+     * CSS.registerProperty().
+     * Why it's needed: Normally, CSS custom properties (e.g. --busy-angle) are just
+     * strings — the browser can't interpolate them in animations. By registering the
+     * property with syntax: '<angle>', the browser knows it's an angle value and can
+     * smoothly animate it from 0deg to 360deg in the keyframe.
+     * Why it's in JS instead of CSS: The standard CSS way is @property --busy-angle { ... }
+     * (which was in the original SCSS). But Angular's emulated view encapsulation doesn't
+     * pass @property at-rules through to the document correctly, so the property never got
+     * registered and the animation was static. CSS.registerProperty() is the JavaScript
+     * equivalent and works globally regardless of Angular's style scoping.
+     * The try/catch: CSS.registerProperty() throws if the same property name is registered
+     * twice. Since this component could be bundled in multiple chunks or the module re-evaluated,
+     * the catch silently ignores the duplicate registration error.
+     */
+    static {
+        try {
+            CSS.registerProperty({
+                name: '--busy-angle',
+                syntax: '<angle>',
+                initialValue: '0deg',
+                inherits: false
+            });
+        }
+        catch {
+            // Already registered or unsupported
+        }
+    }
     #fullscreen = inject(FullscreenDirective);
     /**
-     * TemplateRef for actions area in the top bar. These actions will be placed at the end of
-     * the top bar.
+     * Template for action buttons rendered in the top bar area of the pane.
+     * Use `icon-button-size="small"` or `icon-button-size="extra-small"` on icon
+     * buttons for proper alignment.
      *
      * ```html
-     * <ymt-pane title="My Pane" subTitle="Pane Subtitle" [topBarActions]="topBarActions"></ymt-pane>
-     * <ng-template #topBarActions>
+     * <ymt-pane [topBarActions]="actions">
+     *   <ymt-pane-body>Content</ymt-pane-body>
+     * </ymt-pane>
+     *
+     * <ng-template #actions>
      *   <button ymt-icon-button icon-button-size="small"><mat-icon>settings</mat-icon></button>
      * </ng-template>
      * ```
-     * Make sure to set the `icon-button-size="small"` for proper alignment in the top bar.
      */
     topBarActions = input();
+    /**
+     * When set to true, the pane border will be replaced with an animated
+     * conic-gradient border to indicate a busy/loading state.
+     */
+    busy = input(false);
+    /**
+     * Disable the default fade-in enter animation.
+     */
+    noAnimation = input(false);
     /**
      * Setting this to true will remove the default styles for the pane. So it will
      * render without border-radius, border and background color, but keep the inner
@@ -325,7 +468,7 @@ class YmtPaneComponent {
         this.#fullscreen.exit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YmtPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: YmtPaneComponent, isStandalone: true, selector: "ymt-pane", inputs: { topBarActions: { classPropertyName: "topBarActions", publicName: "topBarActions", isSignal: true, isRequired: false, transformFunction: null }, plain: { classPropertyName: "plain", publicName: "plain", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.plain": "plain()" } }, hostDirectives: [{ directive: FullscreenDirective, outputs: ["fullscreenEnter", "fullscreenEnter", "fullscreenExit", "fullscreenExit"] }], ngImport: i0, template: "@if (topBarActions()) {\n  <ymt-pane-top-bar [actions]=\"topBarActions()\"></ymt-pane-top-bar>\n}\n<ng-content></ng-content>\n", styles: [":host{--_header-area-padding: var(--header-area-padding, var(--ymt-spacing-xl));--_header-area-background: var(--header-area-background, transparent);--_header-area-border-color: var(--header-area-border-color, transparent);--_main-area-padding: var(--main-area-padding, 0);--_pane-background-color: var(--pane-background-color, var(--ymt-surface));background-color:var(--_pane-background-color);color:var(--ymt-on-surface);display:grid;grid-template-rows:auto auto 1fr auto;grid-template-columns:1fr;grid-template-areas:\"top-bar\" \"header\" \"main\" \"footer\";height:100%;overflow:hidden}:host.plain{--pane-background-color: transparent}:host:not(.fullscreen,.plain){border-radius:var(--ymt-corner-m);border:1px solid var(--ymt-outline-variant)}:host ymt-pane-top-bar{grid-area:top-bar}:host ::ng-deep ymt-pane-header{--header-padding: var(--_header-area-padding);--header-background: var(--_header-area-background);--header-border-color: var(--_header-area-border-color);grid-area:header}:host ::ng-deep ymt-pane-body{grid-area:main;overflow-y:auto;padding:var(--_main-area-padding)}:host ::ng-deep ymt-pane-footer{grid-area:footer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: YmtPaneTopBarComponent, selector: "ymt-pane-top-bar", inputs: ["actions"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: YmtPaneComponent, isStandalone: true, selector: "ymt-pane", inputs: { topBarActions: { classPropertyName: "topBarActions", publicName: "topBarActions", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null }, noAnimation: { classPropertyName: "noAnimation", publicName: "noAnimation", isSignal: true, isRequired: false, transformFunction: null }, plain: { classPropertyName: "plain", publicName: "plain", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.plain": "plain()", "class.busy": "busy()", "class.no-animation": "noAnimation()" } }, hostDirectives: [{ directive: FullscreenDirective, outputs: ["fullscreenEnter", "fullscreenEnter", "fullscreenExit", "fullscreenExit"] }], ngImport: i0, template: "@if (topBarActions()) {\n  <ymt-pane-top-bar [actions]=\"topBarActions()\"></ymt-pane-top-bar>\n}\n<ng-content></ng-content>\n", styles: [":host{--_header-area-padding: var(--header-area-padding, var(--ymt-spacing-xl));--_header-area-background: var(--header-area-background, transparent);--_header-area-border-color: var(--header-area-border-color, transparent);--_main-area-padding: var(--main-area-padding, 0);--_pane-background-color: var(--pane-background-color, var(--ymt-surface));--_busy-border-width: var(--busy-border-width, 2px);--_busy-border-color: var(--busy-border-color, var(--ymt-primary));--_enter-animation-duration: var(--enter-animation-duration, .15s);--_enter-animation-delay: var(--enter-animation-delay, 0s);position:relative;background-color:var(--_pane-background-color);color:var(--ymt-on-surface);display:grid;animation:pane-fade-in var(--_enter-animation-duration) ease-out var(--_enter-animation-delay) backwards;grid-template-rows:auto auto 1fr auto;grid-template-columns:1fr;grid-template-areas:\"top-bar\" \"header\" \"main\" \"footer\";height:100%;overflow:hidden}:host.no-animation{animation:none}:host.plain{--pane-background-color: transparent}:host:not(.fullscreen,.plain){border-radius:var(--ymt-corner-m);border:1px solid var(--ymt-outline-variant);transition:border-color .3s ease}:host:not(.fullscreen,.plain):before{content:\"\";position:absolute;inset:0;padding:var(--_busy-border-width);border-radius:calc(var(--ymt-corner-m) - 1px);background:conic-gradient(from var(--busy-angle),var(--ymt-outline-variant),var(--_busy-border-color),var(--ymt-outline-variant));mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:0;transition:opacity .3s ease}:host:not(.fullscreen,.plain).busy{border-color:transparent}:host:not(.fullscreen,.plain).busy:before{opacity:1;animation:rotate-busy-gradient 2s linear infinite}:host ymt-pane-top-bar{grid-area:top-bar}:host ::ng-deep ymt-pane-header{--header-padding: var(--_header-area-padding);--header-background: var(--_header-area-background);--header-border-color: var(--_header-area-border-color);grid-area:header}:host ::ng-deep ymt-pane-body{grid-area:main;overflow-y:auto;padding:var(--_main-area-padding)}:host ::ng-deep ymt-pane-footer{grid-area:footer}@keyframes pane-fade-in{0%{opacity:0}to{opacity:1}}@keyframes rotate-busy-gradient{to{--busy-angle: 360deg}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: YmtPaneTopBarComponent, selector: "ymt-pane-top-bar", inputs: ["actions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YmtPaneComponent, decorators: [{
             type: Component,
@@ -335,17 +478,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                             outputs: ['fullscreenEnter', 'fullscreenExit']
                         }
                     ], host: {
-                        '[class.plain]': 'plain()'
-                    }, template: "@if (topBarActions()) {\n  <ymt-pane-top-bar [actions]=\"topBarActions()\"></ymt-pane-top-bar>\n}\n<ng-content></ng-content>\n", styles: [":host{--_header-area-padding: var(--header-area-padding, var(--ymt-spacing-xl));--_header-area-background: var(--header-area-background, transparent);--_header-area-border-color: var(--header-area-border-color, transparent);--_main-area-padding: var(--main-area-padding, 0);--_pane-background-color: var(--pane-background-color, var(--ymt-surface));background-color:var(--_pane-background-color);color:var(--ymt-on-surface);display:grid;grid-template-rows:auto auto 1fr auto;grid-template-columns:1fr;grid-template-areas:\"top-bar\" \"header\" \"main\" \"footer\";height:100%;overflow:hidden}:host.plain{--pane-background-color: transparent}:host:not(.fullscreen,.plain){border-radius:var(--ymt-corner-m);border:1px solid var(--ymt-outline-variant)}:host ymt-pane-top-bar{grid-area:top-bar}:host ::ng-deep ymt-pane-header{--header-padding: var(--_header-area-padding);--header-background: var(--_header-area-background);--header-border-color: var(--_header-area-border-color);grid-area:header}:host ::ng-deep ymt-pane-body{grid-area:main;overflow-y:auto;padding:var(--_main-area-padding)}:host ::ng-deep ymt-pane-footer{grid-area:footer}\n"] }]
+                        '[class.plain]': 'plain()',
+                        '[class.busy]': 'busy()',
+                        '[class.no-animation]': 'noAnimation()'
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (topBarActions()) {\n  <ymt-pane-top-bar [actions]=\"topBarActions()\"></ymt-pane-top-bar>\n}\n<ng-content></ng-content>\n", styles: [":host{--_header-area-padding: var(--header-area-padding, var(--ymt-spacing-xl));--_header-area-background: var(--header-area-background, transparent);--_header-area-border-color: var(--header-area-border-color, transparent);--_main-area-padding: var(--main-area-padding, 0);--_pane-background-color: var(--pane-background-color, var(--ymt-surface));--_busy-border-width: var(--busy-border-width, 2px);--_busy-border-color: var(--busy-border-color, var(--ymt-primary));--_enter-animation-duration: var(--enter-animation-duration, .15s);--_enter-animation-delay: var(--enter-animation-delay, 0s);position:relative;background-color:var(--_pane-background-color);color:var(--ymt-on-surface);display:grid;animation:pane-fade-in var(--_enter-animation-duration) ease-out var(--_enter-animation-delay) backwards;grid-template-rows:auto auto 1fr auto;grid-template-columns:1fr;grid-template-areas:\"top-bar\" \"header\" \"main\" \"footer\";height:100%;overflow:hidden}:host.no-animation{animation:none}:host.plain{--pane-background-color: transparent}:host:not(.fullscreen,.plain){border-radius:var(--ymt-corner-m);border:1px solid var(--ymt-outline-variant);transition:border-color .3s ease}:host:not(.fullscreen,.plain):before{content:\"\";position:absolute;inset:0;padding:var(--_busy-border-width);border-radius:calc(var(--ymt-corner-m) - 1px);background:conic-gradient(from var(--busy-angle),var(--ymt-outline-variant),var(--_busy-border-color),var(--ymt-outline-variant));mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:0;transition:opacity .3s ease}:host:not(.fullscreen,.plain).busy{border-color:transparent}:host:not(.fullscreen,.plain).busy:before{opacity:1;animation:rotate-busy-gradient 2s linear infinite}:host ymt-pane-top-bar{grid-area:top-bar}:host ::ng-deep ymt-pane-header{--header-padding: var(--_header-area-padding);--header-background: var(--_header-area-background);--header-border-color: var(--_header-area-border-color);grid-area:header}:host ::ng-deep ymt-pane-body{grid-area:main;overflow-y:auto;padding:var(--_main-area-padding)}:host ::ng-deep ymt-pane-footer{grid-area:footer}@keyframes pane-fade-in{0%{opacity:0}to{opacity:1}}@keyframes rotate-busy-gradient{to{--busy-angle: 360deg}}\n"] }]
         }] });
 
 class YmtPaneFooterComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YmtPaneFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: YmtPaneFooterComponent, isStandalone: true, selector: "ymt-pane-footer", ngImport: i0, template: "<footer><ng-content></ng-content></footer>\n", styles: [":host footer{padding:var(--ymt-spacing-m) var(--ymt-spacing-xl);border-block-start:1px solid var(--ymt-outline-variant);background-color:var(--ymt-surface-variant);display:flex;gap:var(--ymt-spacing-m);justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: YmtPaneFooterComponent, isStandalone: true, selector: "ymt-pane-footer", ngImport: i0, template: "<footer><ng-content></ng-content></footer>\n", styles: [":host{--_footer-inline-padding: var(--footer-inline-padding, var(--ymt-spacing-xl));--_footer-block-padding: var(--footer-block-padding, var(--ymt-spacing-xl));--_footer-border-color: var(--footer-border-color, var(--ymt-outline-variant));--_footer-background: var(--footer-background, var(--ymt-surface-variant))}:host footer{padding:var(--_footer-block-padding) var(--_footer-inline-padding);border-block-start:1px solid var(--_footer-border-color);background-color:var(--_footer-background);display:flex;gap:var(--ymt-spacing-m);justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YmtPaneFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ymt-pane-footer', imports: [CommonModule], template: "<footer><ng-content></ng-content></footer>\n", styles: [":host footer{padding:var(--ymt-spacing-m) var(--ymt-spacing-xl);border-block-start:1px solid var(--ymt-outline-variant);background-color:var(--ymt-surface-variant);display:flex;gap:var(--ymt-spacing-m);justify-content:flex-end}\n"] }]
+            args: [{ selector: 'ymt-pane-footer', imports: [CommonModule], template: "<footer><ng-content></ng-content></footer>\n", styles: [":host{--_footer-inline-padding: var(--footer-inline-padding, var(--ymt-spacing-xl));--_footer-block-padding: var(--footer-block-padding, var(--ymt-spacing-xl));--_footer-border-color: var(--footer-border-color, var(--ymt-outline-variant));--_footer-background: var(--footer-background, var(--ymt-surface-variant))}:host footer{padding:var(--_footer-block-padding) var(--_footer-inline-padding);border-block-start:1px solid var(--_footer-border-color);background-color:var(--_footer-background);display:flex;gap:var(--ymt-spacing-m);justify-content:flex-end}\n"] }]
         }] });
 
 const cmp = [YmtPaneComponent, YmtPaneHeaderComponent, YmtPaneBodyComponent, YmtPaneFooterComponent, YmtPaneAsideComponent];

package/fesm2022/yuuvis-material-panes.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"yuuvis-material-panes.mjs","sources":["../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-aside/pane-aside.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-aside/pane-aside.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-body/pane-body.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-body/pane-body.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-header/pane-header.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-header/pane-header.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/fullscreen.directive.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-top-bar/pane-top-bar.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-top-bar/pane-top-bar.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-footer/pane-footer.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-footer/pane-footer.component.html","../../../../../libs/yuuvis/material/panes/src/lib/panes.module.ts","../../../../../libs/yuuvis/material/panes/src/yuuvis-material-panes.ts"],"sourcesContent":["import { Component } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n  selector: 'ymt-pane-aside',\n  imports: [CommonModule],\n  templateUrl: './pane-aside.component.html',\n  styleUrl: './pane-aside.component.scss'\n})\nexport class YmtPaneAsideComponent {}\n","<p>pane-aside works!</p>\n","import { Component } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n  selector: 'ymt-pane-body',\n  imports: [CommonModule],\n  templateUrl: './pane-body.component.html',\n  styleUrl: './pane-body.component.scss'\n})\nexport class YmtPaneBodyComponent {}\n","<ng-content></ng-content>\n","import { CommonModule } from '@angular/common';\nimport { Component, contentChild, input, TemplateRef } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\n\n/**\n * Component for the pane header. It can be used to display a title,\n * subtitle and actions in the pane header.\n *\n * The title and subtitle can be set via the `title` and `subtitle` inputs\n * or via the `yuvPaneHeaderTitle` and `yuvPaneHeaderSubtitle` template refs:\n *\n * ```html\n * <!-- Using inputs -->\n * <ymt-pane-header [title]=\"'Pane Title'\" [subtitle]=\"'Pane Subtitle'\"></ymt-pane-header>\n * <!-- Using template refs -->\n * <ymt-pane-header>\n * <ng-template #yuvPaneHeaderTitle><h2>🦁Custom pane title</h2></ng-template>\n * <ng-template #yuvPaneHeaderSubtitle><ymt-badge severity=\"warning\">locked</ymt-badge></ng-template>\n * </ymt-pane-header>\n * ```\n */\n@Component({\n  selector: 'ymt-pane-header',\n  imports: [CommonModule, MatIconModule],\n  templateUrl: './pane-header.component.html',\n  styleUrl: './pane-header.component.scss'\n})\nexport class YmtPaneHeaderComponent {\n  /**\n   * Title of the pane\n   */\n  title = input<string>();\n  /**\n   * Icon of the pane\n   */\n  icon = input<string>();\n  /**\n   * Subtitle of the pane\n   */\n  subtitle = input<string>();\n  /**\n   * TemplateRef for actions area in the pane header.\n   */\n  actions = input<TemplateRef<any>>();\n\n  titleSlot = contentChild<TemplateRef<any>>('yuvPaneHeaderTitle');\n  subtitleSlot = contentChild<TemplateRef<any>>('yuvPaneHeaderSubtitle');\n}\n","<header>\n  @if (icon()) {\n    <div class=\"icon\">\n      <mat-icon class=\"pane-icon\">{{ icon() }}</mat-icon>\n    </div>\n  }\n  <h2>\n    @let ts = titleSlot();\n    @if (ts) {\n      <ng-container *ngTemplateOutlet=\"ts\"></ng-container>\n    } @else {\n      {{ title() }}\n    }\n  </h2>\n  <small>\n    @let ss = subtitleSlot();\n    @if (ss) {\n      <ng-container *ngTemplateOutlet=\"ss\"></ng-container>\n    } @else {\n      {{ subtitle() }}\n    }\n  </small>\n  @let a = actions();\n  @if (a) {\n    <div class=\"actions\">\n      <ng-container *ngTemplateOutlet=\"a\"></ng-container>\n    </div>\n  }\n</header>\n","import {\n  computed,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n  OnDestroy,\n  output,\n  Renderer2,\n  signal\n} from '@angular/core';\n\n/**\n * Directive that enables any host element to toggle into a fullscreen overlay\n * covering the entire viewport. Background content is made inert and body scroll\n * is locked while fullscreen is active.\n *\n * @example\n * ```html\n * <div yuvFullscreen #fs=\"yuvFullscreen\">\n *   <button (click)=\"fs.toggle()\">Toggle</button>\n *   <p>Content</p>\n * </div>\n * ```\n */\n@Directive({\n  selector: '[yuvFullscreen]',\n  exportAs: 'yuvFullscreen',\n  host: {\n    '[class.yuv-fullscreen-active]': 'active()',\n    '(document:keydown.escape)': 'onEscape()'\n  }\n})\nexport class FullscreenDirective implements OnDestroy {\n  #elRef = inject(ElementRef);\n  #renderer = inject(Renderer2);\n\n  /** Whether the fullscreen toggle is disabled. */\n  disabled = input<boolean>(false);\n\n  /** Emitted when fullscreen mode is entered. */\n  fullscreenEnter = output<void>();\n  /** Emitted when fullscreen mode is exited. */\n  fullscreenExit = output<void>();\n\n  #isActive = signal(false);\n\n  /** Read-only signal indicating whether fullscreen is currently active. */\n  active = computed(() => this.#isActive());\n\n  #originalStyles: Record<string, string> = {};\n  #inertElements: HTMLElement[] = [];\n  #originalBodyOverflow = '';\n\n  /** Toggle fullscreen on/off. */\n  toggle(): void {\n    if (this.disabled()) return;\n    if (this.#isActive()) {\n      this.exit();\n    } else {\n      this.enter();\n    }\n  }\n\n  /** Enter fullscreen mode. No-op if already active or disabled. */\n  enter(): void {\n    if (this.#isActive() || this.disabled()) return;\n    this.#saveOriginalStyles();\n    this.#applyFullscreenStyles();\n    this.#makeBackgroundInert();\n    this.#lockBodyScroll();\n    this.#isActive.set(true);\n    this.fullscreenEnter.emit();\n  }\n\n  /** Exit fullscreen mode. No-op if not active. */\n  exit(): void {\n    if (!this.#isActive()) return;\n    this.#restoreOriginalStyles();\n    this.#restoreBackground();\n    this.#unlockBodyScroll();\n    this.#isActive.set(false);\n    this.fullscreenExit.emit();\n  }\n\n  /** @internal */\n  onEscape(): void {\n    if (this.#isActive()) {\n      this.exit();\n    }\n  }\n\n  #saveOriginalStyles(): void {\n    const style = this.#elRef.nativeElement.style;\n    this.#originalStyles = {\n      position: style.position,\n      inset: style.inset,\n      zIndex: style.zIndex,\n      width: style.width,\n      height: style.height,\n      overflow: style.overflow,\n      backgroundColor: style.backgroundColor\n    };\n  }\n\n  #applyFullscreenStyles(): void {\n    const el = this.#elRef.nativeElement;\n    this.#renderer.setStyle(el, 'position', 'fixed');\n    this.#renderer.setStyle(el, 'inset', '0');\n    this.#renderer.setStyle(el, 'z-index', '1000');\n    this.#renderer.setStyle(el, 'width', '100vw');\n    this.#renderer.setStyle(el, 'height', '100vh');\n    this.#renderer.setStyle(el, 'overflow', 'auto');\n    this.#renderer.setStyle(el, 'background-color', 'var(--ymt-surface, #fff)');\n  }\n\n  #restoreOriginalStyles(): void {\n    const el = this.#elRef.nativeElement;\n    for (const [prop, value] of Object.entries(this.#originalStyles)) {\n      if (value) {\n        this.#renderer.setStyle(el, prop, value);\n      } else {\n        this.#renderer.removeStyle(el, prop);\n      }\n    }\n    this.#originalStyles = {};\n  }\n\n  #makeBackgroundInert(): void {\n    this.#inertElements = [];\n    let current: HTMLElement = this.#elRef.nativeElement;\n\n    while (current.parentElement) {\n      const parent = current.parentElement;\n      for (let i = 0; i < parent.children.length; i++) {\n        const sibling = parent.children[i] as HTMLElement;\n        if (sibling !== current && !sibling.hasAttribute('inert')) {\n          this.#renderer.setAttribute(sibling, 'inert', '');\n          this.#inertElements.push(sibling);\n        }\n      }\n      if (parent === document.body) break;\n      current = parent;\n    }\n  }\n\n  #restoreBackground(): void {\n    for (const el of this.#inertElements) {\n      this.#renderer.removeAttribute(el, 'inert');\n    }\n    this.#inertElements = [];\n  }\n\n  #lockBodyScroll(): void {\n    this.#originalBodyOverflow = document.body.style.overflow;\n    this.#renderer.setStyle(document.body, 'overflow', 'hidden');\n  }\n\n  #unlockBodyScroll(): void {\n    if (this.#originalBodyOverflow) {\n      this.#renderer.setStyle(document.body, 'overflow', this.#originalBodyOverflow);\n    } else {\n      this.#renderer.removeStyle(document.body, 'overflow');\n    }\n    this.#originalBodyOverflow = '';\n  }\n\n  ngOnDestroy(): void {\n    if (this.#isActive()) {\n      this.exit();\n    }\n  }\n}\n","import { Component, input, TemplateRef } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n  selector: 'ymt-pane-top-bar',\n  imports: [CommonModule],\n  templateUrl: './pane-top-bar.component.html',\n  styleUrl: './pane-top-bar.component.scss',\n})\nexport class YmtPaneTopBarComponent {\n  /**\n   * TemplateRef for actions area in the top bar.\n   */\n  actions = input<TemplateRef<any>>();\n}\n","@let ta = actions();\n@if (ta) {\n  <div class=\"top-bar\">\n    <div class=\"actions\">\n      <ng-container *ngTemplateOutlet=\"ta\"></ng-container>\n    </div>\n  </div>\n}\n","import { CommonModule } from '@angular/common';\nimport { Component, inject, input, TemplateRef } from '@angular/core';\nimport { FullscreenDirective } from './fullscreen.directive';\nimport { YmtPaneTopBarComponent } from './pane-top-bar/pane-top-bar.component';\n\n/**\n * Pane component.\n *\n * A pane has a header and a main area. You may choose to not show a header at all:\n *\n * ```html\n * <ymt-pane>\n *  Pane content goes here.\n * </ymt-pane>\n * ```\n *\n * There are other components to be used within a pane:\n * - `ymt-pane-header`: Renders a pre-styled header area for the pane.\n * - `ymt-pane-body`: The main content area of the pane.\n * - `ymt-pane-footer`: A footer component to be used as footer area of the pane.\n *\n * You can change the appearance of the header area via CSS variables:\n * ```css\n * ymt-pane {\n *   --header-area-background: var(--ymt-surface-container-low);\n *   --header-area-border-color: var(--ymt-outline-variant);\n * }\n * ```\n *\n * The main area has a padding by default. You can customize or remove the padding via\n * CSS variables:\n * ```css\n * ymt-pane {\n *   --main-area-padding: 0;\n * }\n * ```\n *\n * Add actions to a pane:\n * ```html\n * <ymt-pane title=\"My Pane\" subTitle=\"Pane Subtitle\">\n *   <ng-template #yuvPaneActions>\n *     <button ymt-icon-button><mat-icon>settings</mat-icon></button>\n *     <button ymt-icon-button><mat-icon>more</mat-icon></button>\n *   </ng-template>\n * </ymt-pane>\n * ```\n *\n * Toggle fullscreen mode:\n * ```html\n * <ymt-pane #pane>\n *   <ymt-pane-body>\n *     <button (click)=\"pane.toggleFullscreen()\">Fullscreen</button>\n *   </ymt-pane-body>\n * </ymt-pane>\n * ```\n *\n */\n@Component({\n  selector: 'ymt-pane',\n  imports: [CommonModule, YmtPaneTopBarComponent],\n  templateUrl: './pane.component.html',\n  styleUrl: './pane.component.scss',\n  hostDirectives: [\n    {\n      directive: FullscreenDirective,\n      outputs: ['fullscreenEnter', 'fullscreenExit']\n    }\n  ],\n  host: {\n    '[class.plain]': 'plain()'\n  }\n})\nexport class YmtPaneComponent {\n  #fullscreen = inject(FullscreenDirective);\n\n  /**\n   * TemplateRef for actions area in the top bar. These actions will be placed at the end of\n   * the top bar.\n   *\n   * ```html\n   * <ymt-pane title=\"My Pane\" subTitle=\"Pane Subtitle\" [topBarActions]=\"topBarActions\"></ymt-pane>\n   * <ng-template #topBarActions>\n   *   <button ymt-icon-button icon-button-size=\"small\"><mat-icon>settings</mat-icon></button>\n   * </ng-template>\n   * ```\n   * Make sure to set the `icon-button-size=\"small\"` for proper alignment in the top bar.\n   */\n  topBarActions = input<TemplateRef<unknown>>();\n\n  /**\n   * Setting this to true will remove the default styles for the pane. So it will\n   * render without border-radius, border and background color, but keep the inner\n   * structure. This is useful when you want to use the pane inside another container\n   * and want to apply custom styles to the pane.\n   */\n  plain = input<boolean>(false);\n\n  /** Read-only signal indicating whether fullscreen is currently active. */\n  fullscreenActive = this.#fullscreen.active;\n\n  /** Toggle fullscreen mode on/off. */\n  toggleFullscreen(): void {\n    this.#fullscreen.toggle();\n  }\n\n  /** Enter fullscreen mode. */\n  enterFullscreen(): void {\n    this.#fullscreen.enter();\n  }\n\n  /** Exit fullscreen mode. */\n  exitFullscreen(): void {\n    this.#fullscreen.exit();\n  }\n}\n","@if (topBarActions()) {\n  <ymt-pane-top-bar [actions]=\"topBarActions()\"></ymt-pane-top-bar>\n}\n<ng-content></ng-content>\n","import { Component } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n  selector: 'ymt-pane-footer',\n  imports: [CommonModule],\n  templateUrl: './pane-footer.component.html',\n  styleUrl: './pane-footer.component.scss'\n})\nexport class YmtPaneFooterComponent {}\n","<footer><ng-content></ng-content></footer>\n","import { NgModule } from '@angular/core';\nimport { YmtPaneAsideComponent } from './pane/pane-aside/pane-aside.component';\nimport { YmtPaneBodyComponent } from './pane/pane-body/pane-body.component';\nimport { YmtPaneHeaderComponent } from './pane/pane-header/pane-header.component';\nimport { YmtPaneComponent } from './pane/pane.component';\nimport { YmtPaneFooterComponent } from './pane/pane-footer/pane-footer.component';\n\nconst cmp = [YmtPaneComponent, YmtPaneHeaderComponent, YmtPaneBodyComponent, YmtPaneFooterComponent, YmtPaneAsideComponent];\n\n@NgModule({\n  imports: cmp,\n  exports: cmp\n})\nexport class YmtPanesModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.FullscreenDirective"],"mappings":"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"}
+{"version":3,"file":"yuuvis-material-panes.mjs","sources":["../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-aside/pane-aside.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-aside/pane-aside.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-body/pane-body.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-body/pane-body.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-header/pane-header.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-header/pane-header.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/fullscreen.directive.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-top-bar/pane-top-bar.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-top-bar/pane-top-bar.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-footer/pane-footer.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-footer/pane-footer.component.html","../../../../../libs/yuuvis/material/panes/src/lib/panes.module.ts","../../../../../libs/yuuvis/material/panes/src/yuuvis-material-panes.ts"],"sourcesContent":["import { Component } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n  selector: 'ymt-pane-aside',\n  imports: [CommonModule],\n  templateUrl: './pane-aside.component.html',\n  styleUrl: './pane-aside.component.scss'\n})\nexport class YmtPaneAsideComponent {}\n","<p>pane-aside works!</p>\n","import { Component } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n  selector: 'ymt-pane-body',\n  imports: [CommonModule],\n  templateUrl: './pane-body.component.html',\n  styleUrl: './pane-body.component.scss'\n})\nexport class YmtPaneBodyComponent {}\n","<ng-content></ng-content>\n","import { CommonModule } from '@angular/common';\nimport { Component, contentChild, input, TemplateRef } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\n\n/**\n * Header component for `ymt-pane`. Renders a two-row layout:\n *\n * - **Top row:** icon (optional), title, and actions area\n * - **Bottom row:** subtitle and badges area\n *\n * ## Title & Subtitle\n *\n * Can be set as plain strings via the `title` and `subtitle` inputs,\n * or as rich content via the `#yuvPaneHeaderTitle` and `#yuvPaneHeaderSubtitle`\n * content child templates. When a template is provided it takes precedence\n * over the corresponding string input.\n *\n * ## Icon\n *\n * Set the `icon` input to a Material Icon ligature to display an icon\n * to the left of the title row.\n *\n * ## Actions & Badges\n *\n * Pass a `TemplateRef` to the `actions` input to render action buttons\n * aligned to the right of the title row. Similarly, pass a `TemplateRef`\n * to the `badges` input to render badges aligned to the right of the\n * subtitle row.\n *\n * @example\n * ```html\n * <!-- Simple usage with string inputs -->\n * <ymt-pane-header\n *   [title]=\"'Documents'\"\n *   [subtitle]=\"'12 items'\"\n *   [icon]=\"'folder'\"\n *   [actions]=\"headerActions\"\n *   [badges]=\"headerBadges\">\n * </ymt-pane-header>\n *\n * <ng-template #headerActions>\n *   <button ymt-icon-button icon=\"add\"></button>\n * </ng-template>\n *\n * <ng-template #headerBadges>\n *   <ymt-badge severity=\"info\">active</ymt-badge>\n * </ng-template>\n * ```\n *\n * @example\n * ```html\n * <!-- Rich content via template projection -->\n * <ymt-pane-header [icon]=\"'lock'\">\n *   <ng-template #yuvPaneHeaderTitle>Custom <strong>title</strong></ng-template>\n *   <ng-template #yuvPaneHeaderSubtitle><ymt-badge severity=\"warning\">locked</ymt-badge></ng-template>\n * </ymt-pane-header>\n * ```\n */\n@Component({\n  selector: 'ymt-pane-header',\n  imports: [CommonModule, MatIconModule],\n  templateUrl: './pane-header.component.html',\n  styleUrl: './pane-header.component.scss'\n})\nexport class YmtPaneHeaderComponent {\n  /** Plain-text title displayed in the top row. Ignored when a `#yuvPaneHeaderTitle` template is projected. */\n  title = input<string>();\n  /** Material Icon ligature rendered to the left of the title row (e.g. `'folder'`, `'lock'`). */\n  icon = input<string>();\n  /** Plain-text subtitle displayed in the bottom row. Ignored when a `#yuvPaneHeaderSubtitle` template is projected. */\n  subtitle = input<string>();\n  /** Template rendered in the actions area, aligned to the right of the title row. */\n  actions = input<TemplateRef<unknown>>();\n  /** Template rendered in the badges area, aligned to the right of the subtitle row. */\n  badges = input<TemplateRef<unknown>>();\n\n  /** Content child template for rich title content. Takes precedence over the `title` input. */\n  titleSlot = contentChild<TemplateRef<unknown>>('yuvPaneHeaderTitle');\n  /** Content child template for rich subtitle content. Takes precedence over the `subtitle` input. */\n  subtitleSlot = contentChild<TemplateRef<unknown>>('yuvPaneHeaderSubtitle');\n}\n","<header>\n  @if (icon()) {\n    <div class=\"icon\" aria-hidden=\"true\">\n      <mat-icon class=\"pane-icon\">{{ icon() }}</mat-icon>\n    </div>\n  }\n  <!-- top row (title and actions) -->\n  <div class=\"row title-row\">\n    <h2>\n      @let ts = titleSlot();\n      @if (ts) {\n        <ng-container *ngTemplateOutlet=\"ts\" />\n      } @else {\n        {{ title() }}\n      }\n    </h2>\n    @let a = actions();\n    @if (a) {\n      <div class=\"actions\">\n        <ng-container *ngTemplateOutlet=\"a\" />\n      </div>\n    }\n  </div>\n\n  <!-- bottom row (subtitle and badges) -->\n  <div class=\"row subtitle-row\">\n    <small>\n      @let ss = subtitleSlot();\n      @if (ss) {\n        <ng-container *ngTemplateOutlet=\"ss\" />\n      } @else {\n        {{ subtitle() }}\n      }\n    </small>\n    @let b = badges();\n    @if (b) {\n      <div class=\"badges\">\n        <ng-container *ngTemplateOutlet=\"b\" />\n      </div>\n    }\n  </div>\n</header>\n","import {\n  computed,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n  OnDestroy,\n  output,\n  Renderer2,\n  signal\n} from '@angular/core';\n\n/**\n * Directive that enables any host element to toggle into a fullscreen overlay\n * covering the entire viewport. Background content is made inert and body scroll\n * is locked while fullscreen is active.\n *\n * @example\n * ```html\n * <div yuvFullscreen #fs=\"yuvFullscreen\">\n *   <button (click)=\"fs.toggle()\">Toggle</button>\n *   <p>Content</p>\n * </div>\n * ```\n */\n@Directive({\n  selector: '[yuvFullscreen]',\n  exportAs: 'yuvFullscreen',\n  host: {\n    '[class.yuv-fullscreen-active]': 'active()',\n    '(document:keydown.escape)': 'onEscape()'\n  }\n})\nexport class FullscreenDirective implements OnDestroy {\n  #elRef = inject(ElementRef);\n  #renderer = inject(Renderer2);\n\n  /** Whether the fullscreen toggle is disabled. */\n  disabled = input<boolean>(false);\n\n  /** Emitted when fullscreen mode is entered. */\n  fullscreenEnter = output<void>();\n  /** Emitted when fullscreen mode is exited. */\n  fullscreenExit = output<void>();\n\n  #isActive = signal(false);\n\n  /** Read-only signal indicating whether fullscreen is currently active. */\n  active = computed(() => this.#isActive());\n\n  #originalStyles: Record<string, string> = {};\n  #inertElements: HTMLElement[] = [];\n  #originalBodyOverflow = '';\n\n  /** Toggle fullscreen on/off. */\n  toggle(): void {\n    if (this.disabled()) return;\n    if (this.#isActive()) {\n      this.exit();\n    } else {\n      this.enter();\n    }\n  }\n\n  /** Enter fullscreen mode. No-op if already active or disabled. */\n  enter(): void {\n    if (this.#isActive() || this.disabled()) return;\n    this.#saveOriginalStyles();\n    this.#applyFullscreenStyles();\n    this.#makeBackgroundInert();\n    this.#lockBodyScroll();\n    this.#isActive.set(true);\n    this.fullscreenEnter.emit();\n  }\n\n  /** Exit fullscreen mode. No-op if not active. */\n  exit(): void {\n    if (!this.#isActive()) return;\n    this.#restoreOriginalStyles();\n    this.#restoreBackground();\n    this.#unlockBodyScroll();\n    this.#isActive.set(false);\n    this.fullscreenExit.emit();\n  }\n\n  /** @internal */\n  onEscape(): void {\n    if (this.#isActive()) {\n      this.exit();\n    }\n  }\n\n  #saveOriginalStyles(): void {\n    const style = this.#elRef.nativeElement.style;\n    this.#originalStyles = {\n      position: style.position,\n      inset: style.inset,\n      zIndex: style.zIndex,\n      width: style.width,\n      height: style.height,\n      overflow: style.overflow,\n      backgroundColor: style.backgroundColor\n    };\n  }\n\n  #applyFullscreenStyles(): void {\n    const el = this.#elRef.nativeElement;\n    this.#renderer.setStyle(el, 'position', 'fixed');\n    this.#renderer.setStyle(el, 'inset', '0');\n    this.#renderer.setStyle(el, 'z-index', '1000');\n    this.#renderer.setStyle(el, 'width', '100vw');\n    this.#renderer.setStyle(el, 'height', '100vh');\n    this.#renderer.setStyle(el, 'overflow', 'auto');\n    this.#renderer.setStyle(el, 'background-color', 'var(--ymt-surface, #fff)');\n  }\n\n  #restoreOriginalStyles(): void {\n    const el = this.#elRef.nativeElement;\n    for (const [prop, value] of Object.entries(this.#originalStyles)) {\n      if (value) {\n        this.#renderer.setStyle(el, prop, value);\n      } else {\n        this.#renderer.removeStyle(el, prop);\n      }\n    }\n    this.#originalStyles = {};\n  }\n\n  #makeBackgroundInert(): void {\n    this.#inertElements = [];\n    let current: HTMLElement = this.#elRef.nativeElement;\n\n    while (current.parentElement) {\n      const parent = current.parentElement;\n      for (let i = 0; i < parent.children.length; i++) {\n        const sibling = parent.children[i] as HTMLElement;\n        if (sibling !== current && !sibling.hasAttribute('inert')) {\n          this.#renderer.setAttribute(sibling, 'inert', '');\n          this.#inertElements.push(sibling);\n        }\n      }\n      if (parent === document.body) break;\n      current = parent;\n    }\n  }\n\n  #restoreBackground(): void {\n    for (const el of this.#inertElements) {\n      this.#renderer.removeAttribute(el, 'inert');\n    }\n    this.#inertElements = [];\n  }\n\n  #lockBodyScroll(): void {\n    this.#originalBodyOverflow = document.body.style.overflow;\n    this.#renderer.setStyle(document.body, 'overflow', 'hidden');\n  }\n\n  #unlockBodyScroll(): void {\n    if (this.#originalBodyOverflow) {\n      this.#renderer.setStyle(document.body, 'overflow', this.#originalBodyOverflow);\n    } else {\n      this.#renderer.removeStyle(document.body, 'overflow');\n    }\n    this.#originalBodyOverflow = '';\n  }\n\n  ngOnDestroy(): void {\n    if (this.#isActive()) {\n      this.exit();\n    }\n  }\n}\n","import { Component, input, TemplateRef } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n  selector: 'ymt-pane-top-bar',\n  imports: [CommonModule],\n  templateUrl: './pane-top-bar.component.html',\n  styleUrl: './pane-top-bar.component.scss',\n})\nexport class YmtPaneTopBarComponent {\n  /**\n   * TemplateRef for actions area in the top bar.\n   */\n  actions = input<TemplateRef<any>>();\n}\n","@let ta = actions();\n@if (ta) {\n  <div class=\"top-bar\">\n    <div class=\"actions\">\n      <ng-container *ngTemplateOutlet=\"ta\"></ng-container>\n    </div>\n  </div>\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, inject, input, TemplateRef } from '@angular/core';\nimport { FullscreenDirective } from './fullscreen.directive';\nimport { YmtPaneTopBarComponent } from './pane-top-bar/pane-top-bar.component';\n\n/**\n * A pane is a container component that unifies the appearance and behavior of\n * content areas in an app. It renders as a bordered, rounded card with a grid\n * layout for its sub-components.\n *\n * ## Structure\n *\n * A pane uses a vertical grid layout with four areas. All sub-components are optional:\n *\n * | Area     | Component          | Description                                        |\n * |----------|--------------------|----------------------------------------------------|\n * | top-bar  | *(internal)*       | Rendered automatically when `topBarActions` is set. |\n * | header   | `ymt-pane-header`  | Title, subtitle, icon, and custom header actions.   |\n * | main     | `ymt-pane-body`    | Scrollable main content area.                      |\n * | footer   | `ymt-pane-footer`  | Right-aligned action bar with a top border.         |\n *\n * ```html\n * <ymt-pane>\n *   <ymt-pane-header title=\"Users\" subtitle=\"3 selected\" [actions]=\"headerActions\" />\n *   <ymt-pane-body>Main content</ymt-pane-body>\n *   <ymt-pane-footer>\n *     <button ymt-button>Save</button>\n *   </ymt-pane-footer>\n * </ymt-pane>\n * ```\n *\n * ### `ymt-pane-header`\n *\n * Accepts `title`, `subtitle`, and `icon` as string inputs. For richer content,\n * use the `#yuvPaneHeaderTitle` and `#yuvPaneHeaderSubtitle` template refs:\n *\n * ```html\n * <ymt-pane-header>\n *   <ng-template #yuvPaneHeaderTitle><h2>Custom title</h2></ng-template>\n *   <ng-template #yuvPaneHeaderSubtitle><ymt-badge severity=\"warning\">locked</ymt-badge></ng-template>\n * </ymt-pane-header>\n * ```\n *\n * Header actions can be projected via the `[actions]` input (TemplateRef).\n *\n * ### Top bar actions\n *\n * Pass a `TemplateRef` to the `[topBarActions]` input to render icon buttons\n * in a slim top bar above the header:\n *\n * ```html\n * <ymt-pane [topBarActions]=\"actions\">\n *   <ymt-pane-body>Content</ymt-pane-body>\n * </ymt-pane>\n *\n * <ng-template #actions>\n *   <button ymt-icon-button icon-button-size=\"small\"><mat-icon>settings</mat-icon></button>\n * </ng-template>\n * ```\n *\n * ## Fullscreen\n *\n * Every pane supports fullscreen mode. The pane expands to fill the viewport,\n * background content becomes inert, and pressing <kbd>Escape</kbd> exits.\n *\n * ```html\n * <ymt-pane #pane>\n *   <ymt-pane-body>\n *     <button (click)=\"pane.toggleFullscreen()\">Toggle fullscreen</button>\n *   </ymt-pane-body>\n * </ymt-pane>\n * ```\n *\n * Programmatic API: `enterFullscreen()`, `exitFullscreen()`, `toggleFullscreen()`.\n * Read the current state via the `fullscreenActive` signal.\n * Listen to transitions via the `(fullscreenEnter)` and `(fullscreenExit)` outputs.\n *\n * ## Busy state\n *\n * Set `[busy]=\"true\"` to replace the static border with a rotating\n * conic-gradient border that signals a loading state:\n *\n * ```html\n * <ymt-pane [busy]=\"isLoading()\">\n *   <ymt-pane-body>Content</ymt-pane-body>\n * </ymt-pane>\n * ```\n *\n * ## Enter animation\n *\n * Panes fade in on creation (0.15 s ease-out by default). Customize or delay\n * the animation via CSS variables, or disable it entirely with the\n * `[noAnimation]` input:\n *\n * ```css\n * ymt-pane {\n *   --enter-animation-duration: 0.3s;\n *   --enter-animation-delay: 0.1s;\n * }\n * ```\n *\n * ```html\n * <ymt-pane [noAnimation]=\"true\"> ... </ymt-pane>\n * ```\n *\n * ## Plain mode\n *\n * Set `[plain]=\"true\"` to strip the border, border-radius, and background\n * while keeping the inner grid structure. Useful when embedding a pane inside\n * another styled container.\n *\n * ## CSS custom properties\n *\n * | Property                      | Default                       | Description                          |\n * |-------------------------------|-------------------------------|--------------------------------------|\n * | `--header-area-padding`       | `var(--ymt-spacing-xl)`       | Padding of the header area.          |\n * | `--header-area-background`    | `transparent`                 | Background of the header area.       |\n * | `--header-area-border-color`  | `transparent`                 | Bottom border of the header area.    |\n * | `--main-area-padding`         | `0`                           | Padding of the body area.            |\n * | `--pane-background-color`     | `var(--ymt-surface)`          | Background of the pane.              |\n * | `--busy-border-width`         | `2px`                         | Width of the busy indicator border.  |\n * | `--busy-border-color`         | `var(--ymt-primary)`          | Color of the busy indicator border.  |\n * | `--enter-animation-duration`  | `0.15s`                       | Duration of the fade-in animation.   |\n * | `--enter-animation-delay`     | `0s`                          | Delay before the fade-in starts.     |\n */\n@Component({\n  selector: 'ymt-pane',\n  imports: [CommonModule, YmtPaneTopBarComponent],\n  templateUrl: './pane.component.html',\n  styleUrl: './pane.component.scss',\n  hostDirectives: [\n    {\n      directive: FullscreenDirective,\n      outputs: ['fullscreenEnter', 'fullscreenExit']\n    }\n  ],\n  host: {\n    '[class.plain]': 'plain()',\n    '[class.busy]': 'busy()',\n    '[class.no-animation]': 'noAnimation()'\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class YmtPaneComponent {\n  /**\n   * This static block runs once when the class is first loaded (not per instance).\n   * It registers a custom CSS property (--busy-angle) with the browser's CSS engine via\n   * CSS.registerProperty().\n   * Why it's needed: Normally, CSS custom properties (e.g. --busy-angle) are just\n   * strings — the browser can't interpolate them in animations. By registering the\n   * property with syntax: '<angle>', the browser knows it's an angle value and can\n   * smoothly animate it from 0deg to 360deg in the keyframe.\n   * Why it's in JS instead of CSS: The standard CSS way is @property --busy-angle { ... }\n   * (which was in the original SCSS). But Angular's emulated view encapsulation doesn't\n   * pass @property at-rules through to the document correctly, so the property never got\n   * registered and the animation was static. CSS.registerProperty() is the JavaScript\n   * equivalent and works globally regardless of Angular's style scoping.\n   * The try/catch: CSS.registerProperty() throws if the same property name is registered\n   * twice. Since this component could be bundled in multiple chunks or the module re-evaluated,\n   * the catch silently ignores the duplicate registration error.\n   */\n  static {\n    try {\n      CSS.registerProperty({\n        name: '--busy-angle',\n        syntax: '<angle>',\n        initialValue: '0deg',\n        inherits: false\n      });\n    } catch {\n      // Already registered or unsupported\n    }\n  }\n\n  #fullscreen = inject(FullscreenDirective);\n\n  /**\n   * Template for action buttons rendered in the top bar area of the pane.\n   * Use `icon-button-size=\"small\"` or `icon-button-size=\"extra-small\"` on icon\n   * buttons for proper alignment.\n   *\n   * ```html\n   * <ymt-pane [topBarActions]=\"actions\">\n   *   <ymt-pane-body>Content</ymt-pane-body>\n   * </ymt-pane>\n   *\n   * <ng-template #actions>\n   *   <button ymt-icon-button icon-button-size=\"small\"><mat-icon>settings</mat-icon></button>\n   * </ng-template>\n   * ```\n   */\n  topBarActions = input<TemplateRef<unknown>>();\n\n  /**\n   * When set to true, the pane border will be replaced with an animated\n   * conic-gradient border to indicate a busy/loading state.\n   */\n  busy = input<boolean>(false);\n\n  /**\n   * Disable the default fade-in enter animation.\n   */\n  noAnimation = input<boolean>(false);\n\n  /**\n   * Setting this to true will remove the default styles for the pane. So it will\n   * render without border-radius, border and background color, but keep the inner\n   * structure. This is useful when you want to use the pane inside another container\n   * and want to apply custom styles to the pane.\n   */\n  plain = input<boolean>(false);\n\n  /** Read-only signal indicating whether fullscreen is currently active. */\n  fullscreenActive = this.#fullscreen.active;\n\n  /** Toggle fullscreen mode on/off. */\n  toggleFullscreen(): void {\n    this.#fullscreen.toggle();\n  }\n\n  /** Enter fullscreen mode. */\n  enterFullscreen(): void {\n    this.#fullscreen.enter();\n  }\n\n  /** Exit fullscreen mode. */\n  exitFullscreen(): void {\n    this.#fullscreen.exit();\n  }\n}\n","@if (topBarActions()) {\n  <ymt-pane-top-bar [actions]=\"topBarActions()\"></ymt-pane-top-bar>\n}\n<ng-content></ng-content>\n","import { Component } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n  selector: 'ymt-pane-footer',\n  imports: [CommonModule],\n  templateUrl: './pane-footer.component.html',\n  styleUrl: './pane-footer.component.scss'\n})\nexport class YmtPaneFooterComponent {}\n","<footer><ng-content></ng-content></footer>\n","import { NgModule } from '@angular/core';\nimport { YmtPaneAsideComponent } from './pane/pane-aside/pane-aside.component';\nimport { YmtPaneBodyComponent } from './pane/pane-body/pane-body.component';\nimport { YmtPaneHeaderComponent } from './pane/pane-header/pane-header.component';\nimport { YmtPaneComponent } from './pane/pane.component';\nimport { YmtPaneFooterComponent } from './pane/pane-footer/pane-footer.component';\n\nconst cmp = [YmtPaneComponent, YmtPaneHeaderComponent, YmtPaneBodyComponent, YmtPaneFooterComponent, YmtPaneAsideComponent];\n\n@NgModule({\n  imports: cmp,\n  exports: cmp\n})\nexport class YmtPanesModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.FullscreenDirective"],"mappings":"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"}