@yuuvis/material 2.3.14 → 2.3.16

package/fesm2022/yuuvis-material-panes.mjs

@@ -0,0 +1,180 @@
+import * as i0 from '@angular/core';
+import { input, Component, output, signal, effect, contentChild, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1$1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import { YmtIconButtonDirective } from '@yuuvis/material';
+
+class YmtPaneHeaderComponent {
+    /**
+     * Title of the pane
+     */
+    title = input();
+    /**
+     * Subtitle of the pane
+     */
+    subtitle = input();
+    /**
+     * TemplateRef for actions area in the pane header.
+     */
+    actions = input();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtPaneHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: YmtPaneHeaderComponent, isStandalone: true, selector: "ymt-pane-header", inputs: { title: { classPropertyName: "title", publicName: "title", 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 } }, ngImport: i0, template: " <header>\n    <h2>{{ title() }}</h2>\n    <small>{{ subtitle() }}</small>\n    @let a = actions();\n    @if (a) {\n      <div class=\"actions\">\n        <ng-container *ngTemplateOutlet=\"a\"></ng-container>\n      </div>\n    }\n  </header>", 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)}:host header{display:grid;align-items:center;grid-template-columns:var(--_header-padding) 1fr auto;grid-template-rows:var(--_header-padding) auto auto var(--_header-padding);grid-template-areas:\". . actions\" \". title actions\" \". subtitle actions\" \". . actions\";flex:0 0 auto;background-color:var(--_header-background);border-block-end:1px solid var(--_header-border-color)}: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-subhead);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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtPaneHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ymt-pane-header', imports: [CommonModule], template: " <header>\n    <h2>{{ title() }}</h2>\n    <small>{{ subtitle() }}</small>\n    @let a = actions();\n    @if (a) {\n      <div class=\"actions\">\n        <ng-container *ngTemplateOutlet=\"a\"></ng-container>\n      </div>\n    }\n  </header>", 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)}:host header{display:grid;align-items:center;grid-template-columns:var(--_header-padding) 1fr auto;grid-template-rows:var(--_header-padding) auto auto var(--_header-padding);grid-template-areas:\". . actions\" \". title actions\" \". subtitle actions\" \". . actions\";flex:0 0 auto;background-color:var(--_header-background);border-block-end:1px solid var(--_header-border-color)}: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-subhead);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"] }]
+        }] });
+
+class YmtPaneTopBarComponent {
+    /**
+     * TemplateRef for actions area in the top bar.
+     */
+    actions = input();
+    /**
+     * Position of the pane toggle button (default: 'none')
+     * Set to 'none' the pane toggle button in the top bar is hidden.
+     */
+    paneToggle = input('none');
+    /**
+     * Event emitted when the pane toggle button is clicked.
+     */
+    paneToggled = output();
+    paneCollapsed = signal(false);
+    #paneCollapsedEffect = effect(() => {
+        this.paneToggled.emit(this.paneCollapsed());
+    });
+    togglePane() {
+        this.paneCollapsed.set(!this.paneCollapsed());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtPaneTopBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: YmtPaneTopBarComponent, isStandalone: true, selector: "ymt-pane-top-bar", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, paneToggle: { classPropertyName: "paneToggle", publicName: "paneToggle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { paneToggled: "paneToggled" }, host: { properties: { "class.inverse": "paneToggle() === \"end\"", "class.pane-toggle": "paneToggle() !== \"none\"" } }, ngImport: i0, template: " @let ta = actions();\n  <div class=\"top-bar\">\n    @if (paneToggle() != 'none') {\n      <button class=\"pane-toggle\" ymt-icon-button icon-button-size=\"small\" (click)=\"togglePane()\">\n        <mat-icon>{{ paneCollapsed() ? 'right_panel_open' : 'right_panel_close' }}</mat-icon>\n      </button>\n    }\n    @if (ta) {\n      <div class=\"actions\">\n        <ng-container *ngTemplateOutlet=\"ta\"></ng-container>\n      </div>\n    }\n  </div>", styles: [":host{border-block-end:1px solid var(--ymt-outline-variant)}:host.inverse .top-bar{--flow: row-reverse}:host.inverse .top-bar button.pane-toggle{rotate:180deg}:host.pane-toggle .top-bar{justify-content:space-between}:host .top-bar{--flow: row;flex:0 0 auto;flex-flow:var(--flow);padding:var(--ymt-spacing-xs) var(--ymt-spacing-s);display:flex;justify-content:end;align-items:center}:host .top-bar .actions{display:flex;flex-flow:var(--flow);gap:var(--ymt-spacing-xs);align-items:center;justify-self:end}\n"], dependencies: [{ kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtPaneTopBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ymt-pane-top-bar', imports: [YmtIconButtonDirective, MatIconModule, CommonModule], host: {
+                        '[class.inverse]': 'paneToggle() === "end"',
+                        '[class.pane-toggle]': 'paneToggle() !== "none"'
+                    }, template: " @let ta = actions();\n  <div class=\"top-bar\">\n    @if (paneToggle() != 'none') {\n      <button class=\"pane-toggle\" ymt-icon-button icon-button-size=\"small\" (click)=\"togglePane()\">\n        <mat-icon>{{ paneCollapsed() ? 'right_panel_open' : 'right_panel_close' }}</mat-icon>\n      </button>\n    }\n    @if (ta) {\n      <div class=\"actions\">\n        <ng-container *ngTemplateOutlet=\"ta\"></ng-container>\n      </div>\n    }\n  </div>", styles: [":host{border-block-end:1px solid var(--ymt-outline-variant)}:host.inverse .top-bar{--flow: row-reverse}:host.inverse .top-bar button.pane-toggle{rotate:180deg}:host.pane-toggle .top-bar{justify-content:space-between}:host .top-bar{--flow: row;flex:0 0 auto;flex-flow:var(--flow);padding:var(--ymt-spacing-xs) var(--ymt-spacing-s);display:flex;justify-content:end;align-items:center}:host .top-bar .actions{display:flex;flex-flow:var(--flow);gap:var(--ymt-spacing-xs);align-items:center;justify-self:end}\n"] }]
+        }] });
+
+class YmtPaneAsideComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtPaneAsideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: YmtPaneAsideComponent, isStandalone: true, selector: "ymt-pane-aside", ngImport: i0, template: "<p>pane-aside works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtPaneAsideComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ymt-pane-aside', imports: [CommonModule], template: "<p>pane-aside works!</p>\n" }]
+        }] });
+
+/**
+ * Pane component.
+ *
+ * A pane has a header and a main area. You may choose to not show a header at all:
+ *
+ * ```html
+ * <ymt-pane [header]="false">
+ *  Pane content goes here.
+ * </ymt-pane>
+ * ```
+ *
+ * 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);
+ * }
+ * ```
+ *
+ * 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;
+ * }
+ * ```
+ *
+ * Add actions to a pane:
+ * ```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>
+ * ```
+ *
+ */
+class YmtPaneComponent {
+    // paneHeader = contentChild(YmtPaneHeaderComponent);
+    // paneBody = contentChild(YmtPaneBodyComponent);
+    paneAside = contentChild(YmtPaneAsideComponent);
+    /**
+     * TemplateRef for actions area in the top bar.
+     * ```html
+     * <ymt-pane title="My Pane" subTitle="Pane Subtitle" [topBarActions]="topBarActions"></ymt-pane>
+     * <ng-template #topBarActions>
+     *   <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();
+    /**
+     * Whether to show the top bar (default: true)
+     */
+    topBar = input(true);
+    /**
+     * Position of the pane toggle button (default: 'none')
+     * Set to 'none' the pane toggle button in the top bar is hidden.
+     */
+    paneToggle = input('none');
+    /**
+     * Event emitted when the pane toggle button is clicked.
+     */
+    paneToggled = output();
+    collapsed = signal(false);
+    togglePane(collapsed) {
+        this.collapsed.set(collapsed);
+        this.paneToggled.emit(collapsed);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: YmtPaneComponent, isStandalone: true, selector: "ymt-pane", inputs: { topBarActions: { classPropertyName: "topBarActions", publicName: "topBarActions", isSignal: true, isRequired: false, transformFunction: null }, topBar: { classPropertyName: "topBar", publicName: "topBar", isSignal: true, isRequired: false, transformFunction: null }, paneToggle: { classPropertyName: "paneToggle", publicName: "paneToggle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { paneToggled: "paneToggled" }, host: { properties: { "class.collapsed": "collapsed()" } }, queries: [{ propertyName: "paneAside", first: true, predicate: YmtPaneAsideComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (topBar()) {\n  <ymt-pane-top-bar [actions]=\"topBarActions()\" [paneToggle]=\"paneToggle()\" \n  (paneToggled)=\"togglePane($event)\"></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, var(--ymt-spacing-xl));background-color:var(--ymt-surface);color:var(--ymt-on-surface);border:1px solid var(--ymt-outline-variant);display:grid;grid-template-rows:auto auto 1fr;grid-template-columns:1fr;grid-template-areas:\"top-bar\" \"header\" \"main\";height:100%;border-radius:var(--ymt-corner-m)}:host.collapsed{overflow:hidden}:host.collapsed ::ng-deep ymt-pane-header,:host.collapsed ::ng-deep ymt-pane-body{display:none!important}:host.collapsed ::ng-deep ymt-pane-top-bar .actions{display:none!important}:host ymt-pane-top-bar{grid-area:top-bar}:host 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 ymt-pane-body{grid-area:main;overflow:hidden;padding:var(--_main-area-padding)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: YmtPaneTopBarComponent, selector: "ymt-pane-top-bar", inputs: ["actions", "paneToggle"], outputs: ["paneToggled"] }, { kind: "ngmodule", type: MatIconModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtPaneComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ymt-pane', imports: [CommonModule, YmtPaneTopBarComponent, MatIconModule], host: {
+                        '[class.collapsed]': 'collapsed()'
+                    }, template: "@if (topBar()) {\n  <ymt-pane-top-bar [actions]=\"topBarActions()\" [paneToggle]=\"paneToggle()\" \n  (paneToggled)=\"togglePane($event)\"></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, var(--ymt-spacing-xl));background-color:var(--ymt-surface);color:var(--ymt-on-surface);border:1px solid var(--ymt-outline-variant);display:grid;grid-template-rows:auto auto 1fr;grid-template-columns:1fr;grid-template-areas:\"top-bar\" \"header\" \"main\";height:100%;border-radius:var(--ymt-corner-m)}:host.collapsed{overflow:hidden}:host.collapsed ::ng-deep ymt-pane-header,:host.collapsed ::ng-deep ymt-pane-body{display:none!important}:host.collapsed ::ng-deep ymt-pane-top-bar .actions{display:none!important}:host ymt-pane-top-bar{grid-area:top-bar}:host 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 ymt-pane-body{grid-area:main;overflow:hidden;padding:var(--_main-area-padding)}\n"] }]
+        }] });
+
+class YmtPaneBodyComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtPaneBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: YmtPaneBodyComponent, isStandalone: true, selector: "ymt-pane-body", ngImport: i0, template: "!<ng-content></ng-content>!\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtPaneBodyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ymt-pane-body', imports: [CommonModule], template: "!<ng-content></ng-content>!\n", styles: [":host{display:block}\n"] }]
+        }] });
+
+const cmp = [YmtPaneComponent, YmtPaneHeaderComponent, YmtPaneTopBarComponent, YmtPaneBodyComponent, YmtPaneAsideComponent];
+class YmtPanesModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtPanesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: YmtPanesModule, imports: [YmtPaneComponent, YmtPaneHeaderComponent, YmtPaneTopBarComponent, YmtPaneBodyComponent, YmtPaneAsideComponent], exports: [YmtPaneComponent, YmtPaneHeaderComponent, YmtPaneTopBarComponent, YmtPaneBodyComponent, YmtPaneAsideComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtPanesModule, imports: [cmp] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: YmtPanesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: cmp,
+                    exports: cmp
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { YmtPaneAsideComponent, YmtPaneBodyComponent, YmtPaneComponent, YmtPaneHeaderComponent, YmtPaneTopBarComponent, YmtPanesModule };
+//# sourceMappingURL=yuuvis-material-panes.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"yuuvis-material-panes.mjs","sources":["../../../../../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/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-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.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane.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/panes.module.ts","../../../../../libs/yuuvis/material/panes/src/yuuvis-material-panes.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, input, TemplateRef } from '@angular/core';\n\n@Component({\n  selector: 'ymt-pane-header',\n  imports: [CommonModule],\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   * 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"," <header>\n    <h2>{{ title() }}</h2>\n    <small>{{ subtitle() }}</small>\n    @let a = actions();\n    @if (a) {\n      <div class=\"actions\">\n        <ng-container *ngTemplateOutlet=\"a\"></ng-container>\n      </div>\n    }\n  </header>","import { Component, effect, input, output, signal, TemplateRef } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatIconModule } from '@angular/material/icon';\nimport { YmtIconButtonDirective } from '@yuuvis/material';\n\n@Component({\n  selector: 'ymt-pane-top-bar',\n  imports: [YmtIconButtonDirective, MatIconModule, CommonModule],\n  templateUrl: './pane-top-bar.component.html',\n  styleUrl: './pane-top-bar.component.scss',\n  host: {\n    '[class.inverse]': 'paneToggle() === \"end\"',\n    '[class.pane-toggle]': 'paneToggle() !== \"none\"'\n  }\n})\nexport class YmtPaneTopBarComponent {\n  /**\n   * TemplateRef for actions area in the top bar.\n   */\n  actions = input<TemplateRef<any>>();\n  /**\n   * Position of the pane toggle button (default: 'none')\n   * Set to 'none' the pane toggle button in the top bar is hidden.\n   */\n  paneToggle = input<'start' | 'end' | 'none'>('none');\n\n  /**\n   * Event emitted when the pane toggle button is clicked.\n   */\n  paneToggled = output<boolean>();\n\n  paneCollapsed = signal<boolean>(false);\n  #paneCollapsedEffect = effect(() => {\n    this.paneToggled.emit(this.paneCollapsed());\n  });\n\n  togglePane() {\n    this.paneCollapsed.set(!this.paneCollapsed());\n  }\n}\n"," @let ta = actions();\n  <div class=\"top-bar\">\n    @if (paneToggle() != 'none') {\n      <button class=\"pane-toggle\" ymt-icon-button icon-button-size=\"small\" (click)=\"togglePane()\">\n        <mat-icon>{{ paneCollapsed() ? 'right_panel_open' : 'right_panel_close' }}</mat-icon>\n      </button>\n    }\n    @if (ta) {\n      <div class=\"actions\">\n        <ng-container *ngTemplateOutlet=\"ta\"></ng-container>\n      </div>\n    }\n  </div>","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 { CommonModule } from '@angular/common';\nimport { Component, contentChild, input, output, signal, TemplateRef } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { YmtPaneAsideComponent } from './pane-aside/pane-aside.component';\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 [header]=\"false\">\n *  Pane content goes here.\n * </ymt-pane>\n * ```\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 */\n@Component({\n  selector: 'ymt-pane',\n  imports: [CommonModule, YmtPaneTopBarComponent, MatIconModule],\n  templateUrl: './pane.component.html',\n  styleUrl: './pane.component.scss',\n  host: {\n    '[class.collapsed]': 'collapsed()'\n  }\n})\nexport class YmtPaneComponent {\n\n  // paneHeader = contentChild(YmtPaneHeaderComponent);\n  // paneBody = contentChild(YmtPaneBodyComponent);\n  paneAside = contentChild(YmtPaneAsideComponent);\n\n  /**\n   * TemplateRef for actions area in the top bar.\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<any>>();\n  /**\n   * Whether to show the top bar (default: true)\n   */\n  topBar = input<boolean>(true);\n\n  /**\n   * Position of the pane toggle button (default: 'none')\n   * Set to 'none' the pane toggle button in the top bar is hidden.\n   */\n  paneToggle = input<'start' | 'end' | 'none'>('none');\n\n  /**\n   * Event emitted when the pane toggle button is clicked.\n   */\n  paneToggled = output<boolean>();\n\n  collapsed = signal<boolean>(false);\n\n  togglePane(collapsed: boolean) {\n    this.collapsed.set(collapsed);\n    this.paneToggled.emit(collapsed);\n  }\n}\n","@if (topBar()) {\n  <ymt-pane-top-bar [actions]=\"topBarActions()\" [paneToggle]=\"paneToggle()\" \n  (paneToggled)=\"togglePane($event)\"></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-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 { NgModule } from '@angular/core';\nimport { YmtPaneHeaderComponent } from './pane/pane-header/pane-header.component';\nimport { YmtPaneTopBarComponent } from './pane/pane-top-bar/pane-top-bar.component';\nimport { YmtPaneComponent } from './pane/pane.component';\nimport { YmtPaneBodyComponent } from './pane/pane-body/pane-body.component';\nimport { YmtPaneAsideComponent } from './pane/pane-aside/pane-aside.component';\n\nconst cmp = [YmtPaneComponent, YmtPaneHeaderComponent, YmtPaneTopBarComponent, YmtPaneBodyComponent, 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":["i2"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuuvis/material",
-  "version": "2.3.14",
+  "version": "2.3.16",
   "author": "OPTIMAL SYSTEMS GmbH <npm@optimal-systems.de>",
   "license": "MIT",
   "peerDependencies": {
@@ -19,6 +19,10 @@
     },
     "./package.json": {
       "default": "./package.json"
+    },
+    "./panes": {
+      "types": "./panes/index.d.ts",
+      "default": "./fesm2022/yuuvis-material-panes.mjs"
     }
   },
   "module": "fesm2022/yuuvis-material.mjs",

package/panes/README.md

@@ -0,0 +1,191 @@
+# @yuuvis/material/panes
+
+A collection of Angular components for creating structured pane layouts with headers, top bars, and customizable content areas.
+
+## Components
+
+### YmtPaneComponent
+
+The main pane component that provides a structured layout with optional header and top bar areas.
+
+#### Basic Usage
+
+```html
+<ymt-pane [title]="'My Pane'" [subtitle]="'Optional subtitle'">
+  Your pane content goes here.
+</ymt-pane>
+```
+
+#### Without Header
+
+```html
+<ymt-pane [header]="false">
+  Content without header area.
+</ymt-pane>
+```
+
+#### With Actions
+
+Add action buttons to either the header or top bar areas:
+
+```html
+<ymt-pane>
+  <!-- Top bar actions (use small icon buttons) -->
+  <ng-template #yuvPaneTopBarActions>
+    <button ymt-icon-button icon-button-size="small">
+      <mat-icon>close</mat-icon>
+    </button>
+  </ng-template>
+
+  <!-- Header actions (regular icon buttons) -->
+  <ng-template #yuvPaneActions>
+    <button ymt-icon-button>
+      <mat-icon>settings</mat-icon>
+    </button>
+    <button ymt-icon-button>
+      <mat-icon>more_vert</mat-icon>
+    </button>
+  </ng-template>
+
+  <!-- Pane content -->
+  <p>Settings content...</p>
+</ymt-pane>
+```
+
+#### With Pane Toggle
+
+Enable collapsible pane functionality:
+
+```html
+<ymt-pane 
+  title="Collapsible Pane" 
+  paneToggle="start"
+  (paneToggled)="onPaneToggled($event)">
+  Collapsible content here.
+</ymt-pane>
+```
+
+#### API
+
+##### Inputs
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `title` | `string` | - | Title displayed in the header |
+| `subtitle` | `string` | - | Subtitle displayed below the title |
+| `header` | `boolean` | `true` | Whether to show the header area |
+| `topBar` | `boolean` | `true` | Whether to show the top bar |
+| `paneToggle` | `'start' \| 'end' \| 'none'` | `'none'` | Position of the toggle button |
+
+##### Outputs
+
+| Output | Type | Description |
+|--------|------|-------------|
+| `paneToggled` | `boolean` | Emitted when pane is collapsed/expanded |
+
+##### Content Children
+
+| Template Reference | Description |
+|-------------------|-------------|
+| `#yuvPaneTopBarActions` | Actions for the top bar (use small buttons) |
+| `#yuvPaneActions` | Actions for the header area |
+
+#### Customization
+
+##### CSS Variables
+
+Customize the appearance using CSS custom properties:
+
+```css
+ymt-pane {
+  /* Header area styling */
+  --header-area-background: var(--ymt-surface-container-low);
+  --header-area-border-color: var(--ymt-outline-variant);
+  
+  /* Main content area padding */
+  --main-area-padding: 1rem;
+  
+  /* Remove padding entirely */
+  --main-area-padding: 0;
+}
+```
+
+##### Examples
+
+**Minimal pane without padding:**
+```css
+.minimal-pane {
+  --main-area-padding: 0;
+  --header-area-background: transparent;
+}
+```
+
+**Custom header styling:**
+```css
+.custom-header-pane {
+  --header-area-background: var(--ymt-primary-container);
+  --header-area-border-color: var(--ymt-primary);
+}
+```
+
+## Installation
+
+This is a secondary entry point of `@yuuvis/material`. Import it directly:
+
+```typescript
+import { YmtPaneComponent } from '@yuuvis/material/panes';
+
+@Component({
+  imports: [YmtPaneComponent],
+  // ...
+})
+export class MyComponent {}
+```
+
+## Related Components
+
+- **YmtPaneHeaderComponent**: Internal component for rendering pane headers
+- **YmtPaneTopBarComponent**: Internal component for rendering top bars with toggle functionality
+
+## Best Practices
+
+1. Use `icon-button-size="small"` for buttons in the top bar actions template
+2. Keep header and top bar actions minimal for better UX
+3. Use the pane toggle feature for space-constrained layouts
+4. Customize CSS variables instead of overriding component styles
+5. Consider accessibility when using toggle functionality
+
+## Examples
+
+### Dashboard Layout
+
+```html
+<div class="dashboard">
+  <ymt-pane title="Navigation" paneToggle="start" class="sidebar">
+    <nav>...</nav>
+  </ymt-pane>
+  
+  <ymt-pane title="Main Content" [topBar]="false" class="main">
+    <main>...</main>
+  </ymt-pane>
+</div>
+```
+
+### Settings Panel
+
+```html
+<ymt-pane title="User Settings" subtitle="Manage your preferences">
+  <ng-template #yuvPaneActions>
+    <button ymt-icon-button (click)="save()">
+      <mat-icon>save</mat-icon>
+    </button>
+    <button ymt-icon-button (click)="reset()">
+      <mat-icon>refresh</mat-icon>
+    </button>
+  </ng-template>
+  
+  <form>
+    <!-- Settings form content -->
+  </form>
+</ymt-pane>
+```

package/panes/index.d.ts

@@ -0,0 +1,8 @@
+export * from './lib/panes.module';
+export * from './lib/pane/pane.component';
+export * from './lib/pane/pane-header/pane-header.component';
+export * from './lib/pane/pane-body/pane-body.component';
+export * from './lib/pane/pane-aside/pane-aside.component';
+export * from './lib/pane/pane-top-bar/pane-top-bar.component';
+export * from './lib/pane/pane-body/pane-body.component';
+export * from './lib/pane/pane-aside/pane-aside.component';

package/panes/lib/pane/pane-aside/pane-aside.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class YmtPaneAsideComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<YmtPaneAsideComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<YmtPaneAsideComponent, "ymt-pane-aside", never, {}, {}, never, never, true, never>;
+}

package/panes/lib/pane/pane-body/pane-body.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class YmtPaneBodyComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<YmtPaneBodyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<YmtPaneBodyComponent, "ymt-pane-body", never, {}, {}, never, ["*"], true, never>;
+}

package/panes/lib/pane/pane-header/pane-header.component.d.ts

@@ -0,0 +1,18 @@
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class YmtPaneHeaderComponent {
+    /**
+     * Title of the pane
+     */
+    title: import("@angular/core").InputSignal<string | undefined>;
+    /**
+     * Subtitle of the pane
+     */
+    subtitle: import("@angular/core").InputSignal<string | undefined>;
+    /**
+     * TemplateRef for actions area in the pane header.
+     */
+    actions: import("@angular/core").InputSignal<TemplateRef<any> | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<YmtPaneHeaderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<YmtPaneHeaderComponent, "ymt-pane-header", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/panes/lib/pane/pane-top-bar/pane-top-bar.component.d.ts

@@ -0,0 +1,22 @@
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class YmtPaneTopBarComponent {
+    #private;
+    /**
+     * TemplateRef for actions area in the top bar.
+     */
+    actions: import("@angular/core").InputSignal<TemplateRef<any> | undefined>;
+    /**
+     * Position of the pane toggle button (default: 'none')
+     * Set to 'none' the pane toggle button in the top bar is hidden.
+     */
+    paneToggle: import("@angular/core").InputSignal<"start" | "end" | "none">;
+    /**
+     * Event emitted when the pane toggle button is clicked.
+     */
+    paneToggled: import("@angular/core").OutputEmitterRef<boolean>;
+    paneCollapsed: import("@angular/core").WritableSignal<boolean>;
+    togglePane(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<YmtPaneTopBarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<YmtPaneTopBarComponent, "ymt-pane-top-bar", never, { "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "paneToggle": { "alias": "paneToggle"; "required": false; "isSignal": true; }; }, { "paneToggled": "paneToggled"; }, never, never, true, never>;
+}

package/panes/lib/pane/pane.component.d.ts

@@ -0,0 +1,72 @@
+import { TemplateRef } from '@angular/core';
+import { YmtPaneAsideComponent } from './pane-aside/pane-aside.component';
+import * as i0 from "@angular/core";
+/**
+ * Pane component.
+ *
+ * A pane has a header and a main area. You may choose to not show a header at all:
+ *
+ * ```html
+ * <ymt-pane [header]="false">
+ *  Pane content goes here.
+ * </ymt-pane>
+ * ```
+ *
+ * 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);
+ * }
+ * ```
+ *
+ * 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;
+ * }
+ * ```
+ *
+ * Add actions to a pane:
+ * ```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>
+ * ```
+ *
+ */
+export declare class YmtPaneComponent {
+    paneAside: import("@angular/core").Signal<YmtPaneAsideComponent | undefined>;
+    /**
+     * TemplateRef for actions area in the top bar.
+     * ```html
+     * <ymt-pane title="My Pane" subTitle="Pane Subtitle" [topBarActions]="topBarActions"></ymt-pane>
+     * <ng-template #topBarActions>
+     *   <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: import("@angular/core").InputSignal<TemplateRef<any> | undefined>;
+    /**
+     * Whether to show the top bar (default: true)
+     */
+    topBar: import("@angular/core").InputSignal<boolean>;
+    /**
+     * Position of the pane toggle button (default: 'none')
+     * Set to 'none' the pane toggle button in the top bar is hidden.
+     */
+    paneToggle: import("@angular/core").InputSignal<"start" | "end" | "none">;
+    /**
+     * Event emitted when the pane toggle button is clicked.
+     */
+    paneToggled: import("@angular/core").OutputEmitterRef<boolean>;
+    collapsed: import("@angular/core").WritableSignal<boolean>;
+    togglePane(collapsed: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<YmtPaneComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<YmtPaneComponent, "ymt-pane", never, { "topBarActions": { "alias": "topBarActions"; "required": false; "isSignal": true; }; "topBar": { "alias": "topBar"; "required": false; "isSignal": true; }; "paneToggle": { "alias": "paneToggle"; "required": false; "isSignal": true; }; }, { "paneToggled": "paneToggled"; }, ["paneAside"], ["*"], true, never>;
+}

package/panes/lib/panes.module.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./pane/pane.component";
+import * as i2 from "./pane/pane-header/pane-header.component";
+import * as i3 from "./pane/pane-top-bar/pane-top-bar.component";
+import * as i4 from "./pane/pane-body/pane-body.component";
+import * as i5 from "./pane/pane-aside/pane-aside.component";
+export declare class YmtPanesModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<YmtPanesModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<YmtPanesModule, never, [typeof i1.YmtPaneComponent, typeof i2.YmtPaneHeaderComponent, typeof i3.YmtPaneTopBarComponent, typeof i4.YmtPaneBodyComponent, typeof i5.YmtPaneAsideComponent], [typeof i1.YmtPaneComponent, typeof i2.YmtPaneHeaderComponent, typeof i3.YmtPaneTopBarComponent, typeof i4.YmtPaneBodyComponent, typeof i5.YmtPaneAsideComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<YmtPanesModule>;
+}

package/scss/themes/yuuvis-standard/mat-theme-config.scss

@@ -23,7 +23,7 @@
 }
 @function _create-mat-sys-token-overrides(){
   @return (
-    'outline-variant': light-dark(map.get(theme-color.primary-palette(), 'neutral-variant', 90), map.get(theme-color.primary-palette(), 'neutral', 20)),
+    'outline-variant': light-dark(map.get(theme-color.primary-palette(), 'neutral-variant', 90), map.get(theme-color.primary-palette(), 'neutral', 12)),
     'surface-variant': var(--mat-sys-surface),
     'on-surface-variant': var(--mat-sys-on-surface),
 

package/scss/token/_token.scss

@@ -170,7 +170,7 @@ $_spacing-base: t.rem(16px);
     outline-width: 1px,
     outline: var(--mat-sys-outline),
     outline-variant: var(--mat-sys-outline-variant),
-    outline-variant-emphasized: light-dark(#{ map.get(theme-color.primary-palette(), neutral, 80)}, #{map.get(theme-color.primary-palette(), neutral, 80)}),
+    outline-variant-emphasized: light-dark(#{ map.get(theme-color.primary-palette(), neutral, 80)}, #{map.get(theme-color.primary-palette(), neutral, 25)}),
 
     // Level
     // Primary color (Could be used for text-color, surfaces, outlines)
@@ -183,7 +183,7 @@ $_spacing-base: t.rem(16px);
     on-primary-container: var(--mat-sys-on-primary-container),
 
     //Brand (Could be used for text-color, surfaces, outlines)
-    brand: light-dark(#{map.get(theme-color.primary-palette(), 'neutral', 10)}, #{map.get(theme-color.primary-palette(), 'neutral', 6)}),
+    brand: light-dark(#{map.get(theme-color.primary-palette(), 'neutral', 10)}, #{map.get(theme-color.primary-palette(), 'neutral', 4)}),
     on-brand: light-dark(#{map.get(theme-color.primary-palette(), 'neutral', 90)}, #{map.get(theme-color.primary-palette(), 'neutral', 90)}),
 
     //Status
@@ -229,7 +229,7 @@ $_spacing-base: t.rem(16px);
     //to ensure that the combination with on-surface-* is accessible
     //If you are using a custom color instead of make sure that this color is accessible with all on-surface-* token
     surface-panel: var(--mat-sys-surface-container-low),
-    surface-app: var(--mat-sys-surface-container-low),
+    surface-app: light-dark(var(--mat-sys-surface-container), var(--mat-sys-surface-container-lowest)),
 
     scrim: var(--mat-sys-scrim),
     scrim-opacity: 30,
@@ -252,7 +252,7 @@ $_spacing-base: t.rem(16px);
     pane-surface: var(--mat-sys-surface),
     pane-drag-handle: light-dark(#{map.get(theme-color.primary-palette(), 'neutral', 80)}, #{map.get(theme-color.primary-palette(), 'neutral', 80)}),
     pane-surface-blank: rgb(from #FFFFFF r g b / 0),
-    pane-surface-floating: var(--mat-sys-surface),
+    pane-surface-floating: light-dark(var(--mat-sys-surface), var(--mat-sys-surface-container-lowest)),
     on-pane-surface: var(--mat-sys-on-surface),
     pane-surface-floating-inverse:  rgb(from var(--mat-sys-inverse-surface) r g b / 0.9),
     on-pane-surface-floating-inverse: light-dark(#{map.get(theme-color.primary-palette(), 'neutral', 95)}, #{map.get(theme-color.primary-palette(), 'neutral', 10)}),