@yuuvis/material 2.3.16 → 2.3.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuuvis/material",
-  "version": "2.3.16",
+  "version": "2.3.18",
   "author": "OPTIMAL SYSTEMS GmbH <npm@optimal-systems.de>",
   "license": "MIT",
   "peerDependencies": {
@@ -8,7 +8,9 @@
     "@angular/core": "^19.2.1",
     "@angular/material": "^19.2.15",
     "modern-normalize": "^3.0.1",
-    "@ngx-translate/core": "^15.0.0"
+    "@ngx-translate/core": "^15.0.0",
+    "angular-split": "^19.0.0",
+    "ngx-device-detector": "^9.0.0"
   },
   "sideEffects": false,
   "exports": {
@@ -20,6 +22,10 @@
     "./package.json": {
       "default": "./package.json"
     },
+    "./layout": {
+      "types": "./layout/index.d.ts",
+      "default": "./fesm2022/yuuvis-material-layout.mjs"
+    },
     "./panes": {
       "types": "./panes/index.d.ts",
       "default": "./fesm2022/yuuvis-material-panes.mjs"

package/panes/index.d.ts

@@ -3,6 +3,6 @@ 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-footer/pane-footer.component';
 export * from './lib/pane/pane-aside/pane-aside.component';

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

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

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

@@ -6,17 +6,16 @@ export declare class YmtPaneTopBarComponent {
      * 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">;
+    modeAlign: import("@angular/core").InputSignal<"start" | "end">;
+    mode: import("@angular/core").InputSignal<"navigation" | "toggle" | undefined>;
     /**
      * Event emitted when the pane toggle button is clicked.
      */
     paneToggled: import("@angular/core").OutputEmitterRef<boolean>;
+    navigationClicked: import("@angular/core").OutputEmitterRef<boolean>;
     paneCollapsed: import("@angular/core").WritableSignal<boolean>;
     togglePane(): void;
+    navClick(): 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>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<YmtPaneTopBarComponent, "ymt-pane-top-bar", never, { "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "modeAlign": { "alias": "modeAlign"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, { "paneToggled": "paneToggled"; "navigationClicked": "navigationClicked"; }, never, never, true, never>;
 }

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

@@ -1,5 +1,4 @@
 import { TemplateRef } from '@angular/core';
-import { YmtPaneAsideComponent } from './pane-aside/pane-aside.component';
 import * as i0 from "@angular/core";
 /**
  * Pane component.
@@ -12,6 +11,11 @@ import * as i0 from "@angular/core";
  * </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.
+ *
  * You can change the appearance of the header area via CSS variables:
  * ```css
  * ymt-pane {
@@ -40,9 +44,10 @@ import * as i0 from "@angular/core";
  *
  */
 export declare class YmtPaneComponent {
-    paneAside: import("@angular/core").Signal<YmtPaneAsideComponent | undefined>;
     /**
-     * TemplateRef for actions area in the top bar.
+     * TemplateRef for actions area in the top bar. These actions will be placed at the end of
+     * the top bar.
+     *
      * ```html
      * <ymt-pane title="My Pane" subTitle="Pane Subtitle" [topBarActions]="topBarActions"></ymt-pane>
      * <ng-template #topBarActions>
@@ -53,20 +58,34 @@ export declare class YmtPaneComponent {
      */
     topBarActions: import("@angular/core").InputSignal<TemplateRef<any> | undefined>;
     /**
-     * Whether to show the top bar (default: true)
+     * 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
+     * structure. This is useful when you want to use the pane inside another container
+     * and want to apply custom styles to the pane.
      */
-    topBar: import("@angular/core").InputSignal<boolean>;
+    plain: 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.
+     * A pane may have different modes to control the behavior of the top bar.
+     * - `navigation`: Shows a back button on the left side of the top bar to close the pane or navigate back.
+     * - `toggle`: Shows a toggle button on the left side of the top bar to collapse/expand the pane.
      */
-    paneToggle: import("@angular/core").InputSignal<"start" | "end" | "none">;
+    mode: import("@angular/core").InputSignal<"navigation" | "toggle" | undefined>;
+    modeAlign: import("@angular/core").InputSignal<"start" | "end">;
     /**
-     * Event emitted when the pane toggle button is clicked.
+     * Event emitted when the pane toggle button is clicked. This toggle button is shown
+     * when mode is set to 'toggle'.
      */
     paneToggled: import("@angular/core").OutputEmitterRef<boolean>;
+    /**
+     * Event emitted when the navigation button is clicked. Navigation button is shown when
+     * mode is set to 'navigation'.
+     */
+    navigationClicked: import("@angular/core").OutputEmitterRef<boolean>;
+    /**
+     * Collapsed state of the pane. Only relevant when mode is set to 'toggle'.
+     */
     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>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<YmtPaneComponent, "ymt-pane", never, { "topBarActions": { "alias": "topBarActions"; "required": false; "isSignal": true; }; "plain": { "alias": "plain"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "modeAlign": { "alias": "modeAlign"; "required": false; "isSignal": true; }; }, { "paneToggled": "paneToggled"; "navigationClicked": "navigationClicked"; }, never, ["*"], true, never>;
 }

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

@@ -1,11 +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 i3 from "./pane/pane-body/pane-body.component";
+import * as i4 from "./pane/pane-footer/pane-footer.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 ɵmod: i0.ɵɵNgModuleDeclaration<YmtPanesModule, never, [typeof i1.YmtPaneComponent, typeof i2.YmtPaneHeaderComponent, typeof i3.YmtPaneBodyComponent, typeof i4.YmtPaneFooterComponent, typeof i5.YmtPaneAsideComponent], [typeof i1.YmtPaneComponent, typeof i2.YmtPaneHeaderComponent, typeof i3.YmtPaneBodyComponent, typeof i4.YmtPaneFooterComponent, typeof i5.YmtPaneAsideComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<YmtPanesModule>;
 }

package/scss/material-components/_dialog.scss

@@ -1,6 +1,12 @@
 @use './../token/token.tools' as t;
 
-.mdc-dialog--open .mat-mdc-dialog-surface{
+.mdc-dialog--open .mat-mdc-dialog-surface {
   border: 1px solid t.use-token(outline-variant);
 }
 
+.cdk-overlay-pane.ymt-dialog-fullscreen {
+  .mat-mdc-dialog-surface {
+    border: 0;
+    border-radius: 0;
+  }
+}