@masterteam/components 0.0.100 → 0.0.102

package/types/masterteam-components-client-page.d.ts

@@ -3,6 +3,8 @@ import { TemplateRef } from '@angular/core';
 import { ClientPageMenuItem } from '@masterteam/components/client-page-menu';
 
 declare class ClientPage {
+    private readonly document;
+    private readonly destroyRef;
     /** Icon for the left sidebar header */
     readonly menuIcon: _angular_core.InputSignal<string | undefined>;
     /** Title for the left sidebar header */
@@ -11,11 +13,19 @@ declare class ClientPage {
     readonly menuItems: _angular_core.InputSignal<ClientPageMenuItem[]>;
     /** Whether menu items are loading */
     readonly menuItemsLoading: _angular_core.InputSignal<boolean>;
+    /** Enables responsive mobile stacking behavior */
+    readonly responsive: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** On mobile, choose between a drawer or inline stacked layout */
+    readonly mobileBehavior: _angular_core.InputSignal<"drawer" | "stack">;
+    /** On mobile, choose whether main content or sidebar is shown first */
+    readonly mobileStackOrder: _angular_core.InputSignal<"main-first" | "side-first">;
+    /** Breakpoint where mobile stacked mode starts */
+    readonly mobileBreakpoint: _angular_core.InputSignal<number>;
     /** Key of the active menu item (defaults to first item) */
     readonly activeItem: _angular_core.InputSignal<string | undefined>;
     /** Whether the sidebar menu is collapsed (two-way bindable) */
     readonly collapsed: _angular_core.ModelSignal<boolean>;
-    /** Template projected into the left sidebar header end */
+    /** Template projected into the content header actions area */
     readonly headerEnd: _angular_core.Signal<TemplateRef<any> | undefined>;
     /** Emitted when a menu item is clicked */
     readonly menuItemClick: _angular_core.OutputEmitterRef<ClientPageMenuItem>;
@@ -25,18 +35,42 @@ declare class ClientPage {
     readonly selectedItem: _angular_core.Signal<ClientPageMenuItem>;
     /** Whether the initial default selection has been emitted */
     private initialEmitted;
-    constructor();
+    /** Whether the mobile drawer menu is open */
+    readonly mobileMenuOpen: _angular_core.WritableSignal<boolean>;
+    /** Whether the page is currently in RTL mode */
+    readonly rtl: _angular_core.WritableSignal<boolean>;
     /** Whether the divider/toggle area is being hovered */
     readonly dividerHovered: _angular_core.WritableSignal<boolean>;
+    private readonly viewportWidth;
+    /** Whether page is in a responsive mobile state */
+    readonly isMobile: _angular_core.Signal<boolean>;
+    /** Whether the mobile menu should behave as a drawer */
+    readonly isMobileDrawer: _angular_core.Signal<boolean>;
+    /** Whether the mobile menu should stack with the content */
+    readonly isMobileStack: _angular_core.Signal<boolean>;
+    /** Whether the sidebar should remain inline in the layout flow */
+    readonly showInlineSidebar: _angular_core.Signal<boolean>;
+    /** Whether the desktop sidebar should use a compact rail */
+    readonly showCompactSidebar: _angular_core.Signal<boolean>;
+    readonly mobileDrawerTransform: _angular_core.Signal<"translateX(0)" | "translateX(100%)" | "translateX(-100%)">;
+    constructor();
     /** Sidebar width reacts to collapsed + hover */
-    readonly sidebarWidth: _angular_core.Signal<"12px" | "9px" | "15.8%" | "16%">;
+    readonly sidebarWidth: _angular_core.Signal<"100%" | "4.75rem" | "4.25rem" | "16.5%" | "16%">;
+    readonly sidebarOrder: _angular_core.Signal<1 | 2>;
+    readonly contentOrder: _angular_core.Signal<1 | 2>;
     /** Icon for the collapse toggle button */
-    readonly toggleIcon: _angular_core.Signal<"arrow.chevron-right" | "arrow.chevron-left">;
+    readonly toggleIcon: _angular_core.Signal<"arrow.chevron-left" | "arrow.chevron-right">;
     toggleCollapsed(): void;
+    toggleMobileMenu(): void;
+    closeMobileMenu(): void;
     selectItem(item: ClientPageMenuItem): void;
     getAvatarStyle(color: string): Record<string, string>;
+    onWindowResize(): void;
+    onEscapeKey(): void;
+    private getViewportWidth;
+    private getDirection;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClientPage, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClientPage, "mt-client-page", never, { "menuIcon": { "alias": "menuIcon"; "required": false; "isSignal": true; }; "menuTitle": { "alias": "menuTitle"; "required": false; "isSignal": true; }; "menuItems": { "alias": "menuItems"; "required": false; "isSignal": true; }; "menuItemsLoading": { "alias": "menuItemsLoading"; "required": false; "isSignal": true; }; "activeItem": { "alias": "activeItem"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; "menuItemClick": "menuItemClick"; }, ["headerEnd"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClientPage, "mt-client-page", never, { "menuIcon": { "alias": "menuIcon"; "required": false; "isSignal": true; }; "menuTitle": { "alias": "menuTitle"; "required": false; "isSignal": true; }; "menuItems": { "alias": "menuItems"; "required": false; "isSignal": true; }; "menuItemsLoading": { "alias": "menuItemsLoading"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "mobileBehavior": { "alias": "mobileBehavior"; "required": false; "isSignal": true; }; "mobileStackOrder": { "alias": "mobileStackOrder"; "required": false; "isSignal": true; }; "mobileBreakpoint": { "alias": "mobileBreakpoint"; "required": false; "isSignal": true; }; "activeItem": { "alias": "activeItem"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; "menuItemClick": "menuItemClick"; }, ["headerEnd"], ["*"], true, never>;
 }
 
 export { ClientPage };

package/types/masterteam-components-dynamic-drawer.d.ts

@@ -2,6 +2,7 @@ import * as _angular_core from '@angular/core';
 import { Type, InjectionToken, Injector } from '@angular/core';
 import { DynamicDialogRef } from 'primeng/dynamicdialog';
 
+type ResponsiveOverlayPreset = 'drawer-narrow' | 'drawer-default' | 'drawer-wide' | 'dialog-narrow' | 'dialog-default' | 'dialog-wide';
 interface DynamicDrawerConfigInterface {
     header?: string;
     position?: string;
@@ -14,6 +15,8 @@ interface DynamicDrawerConfigInterface {
     appendTo?: any;
     transitionOptions?: string;
     styleClass?: string;
+    responsive?: boolean;
+    responsivePreset?: ResponsiveOverlayPreset;
     inputValues?: any;
 }
 declare class DrawerService {
@@ -86,4 +89,4 @@ declare class DynamicDrawerHost {
 }
 
 export { DrawerController, DrawerService, DynamicDrawerConfig, DynamicDrawerHost };
-export type { DynamicDrawerConfigInterface };
+export type { DynamicDrawerConfigInterface, ResponsiveOverlayPreset };

package/types/masterteam-components-modal.d.ts

@@ -1,7 +1,12 @@
-import { DrawerService, DynamicDrawerConfigInterface } from '@masterteam/components/dynamic-drawer';
+import { DrawerService, DynamicDrawerConfigInterface, ResponsiveOverlayPreset } from '@masterteam/components/dynamic-drawer';
 import { DialogService, DynamicDialogConfig } from '@masterteam/components/dialog';
 import * as i0 from '@angular/core';
 
+type ResponsiveModalConfig = {
+    responsive?: boolean;
+    responsivePreset?: ResponsiveOverlayPreset;
+    styleClass?: string;
+};
 declare class ModalService {
     readonly drawerService: DrawerService;
     readonly dialogService: DialogService;
@@ -9,7 +14,10 @@ declare class ModalService {
     footerClass: string;
     contentClass: string;
     modalConfig: any;
-    openModal(component: any, modalType: 'drawer' | 'dialog', config: DynamicDialogConfig | DynamicDrawerConfigInterface): any;
+    openModal(component: any, modalType: 'drawer' | 'dialog', config: (DynamicDialogConfig | DynamicDrawerConfigInterface) & ResponsiveModalConfig): any;
+    private normalizeResponsiveConfig;
+    private getResponsiveClassName;
+    private mergeClassNames;
     handelStartEndPosition(position: string | undefined): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<ModalService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ModalService>;

package/types/masterteam-components-sidebar.d.ts

@@ -8,6 +8,8 @@ interface SidebarItem {
     routerLink?: any[] | string;
 }
 declare class Sidebar {
+    private readonly document;
+    private readonly destroyRef;
     items: _angular_core.InputSignal<SidebarItem[]>;
     logo: _angular_core.InputSignal<string | undefined>;
     logoLink: _angular_core.InputSignal<string | any[] | undefined>;
@@ -17,11 +19,26 @@ declare class Sidebar {
     bgImage: _angular_core.InputSignal<string | undefined>;
     bgRepeat: _angular_core.InputSignalWithTransform<boolean, unknown>;
     iconsColor: _angular_core.InputSignal<string>;
+    mobileBehavior: _angular_core.InputSignal<"overlay" | "inline">;
+    mobileBreakpoint: _angular_core.InputSignal<number>;
+    mobileOpen: _angular_core.ModelSignal<boolean>;
     expanded: _angular_core.WritableSignal<boolean>;
     expandedChange: _angular_core.OutputEmitterRef<boolean>;
+    private readonly viewportWidth;
+    readonly isMobile: _angular_core.Signal<boolean>;
+    readonly isOverlayMode: _angular_core.Signal<boolean>;
+    readonly labelsExpanded: _angular_core.Signal<boolean>;
+    readonly rtl: _angular_core.WritableSignal<boolean>;
+    readonly overlayTransform: _angular_core.Signal<"translateX(100%)" | "translateX(-100%)" | null>;
+    constructor();
     toggleSidebar(): void;
+    onItemClick(): void;
+    setMobileOpen(open: boolean): void;
+    onWindowResize(): void;
+    private getViewportWidth;
+    private getDirection;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Sidebar, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Sidebar, "mt-sidebar", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "logo": { "alias": "logo"; "required": false; "isSignal": true; }; "logoLink": { "alias": "logoLink"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subTitle": { "alias": "subTitle"; "required": false; "isSignal": true; }; "bgColor": { "alias": "bgColor"; "required": false; "isSignal": true; }; "bgImage": { "alias": "bgImage"; "required": false; "isSignal": true; }; "bgRepeat": { "alias": "bgRepeat"; "required": false; "isSignal": true; }; "iconsColor": { "alias": "iconsColor"; "required": false; "isSignal": true; }; }, { "expandedChange": "expandedChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Sidebar, "mt-sidebar", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "logo": { "alias": "logo"; "required": false; "isSignal": true; }; "logoLink": { "alias": "logoLink"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subTitle": { "alias": "subTitle"; "required": false; "isSignal": true; }; "bgColor": { "alias": "bgColor"; "required": false; "isSignal": true; }; "bgImage": { "alias": "bgImage"; "required": false; "isSignal": true; }; "bgRepeat": { "alias": "bgRepeat"; "required": false; "isSignal": true; }; "iconsColor": { "alias": "iconsColor"; "required": false; "isSignal": true; }; "mobileBehavior": { "alias": "mobileBehavior"; "required": false; "isSignal": true; }; "mobileBreakpoint": { "alias": "mobileBreakpoint"; "required": false; "isSignal": true; }; "mobileOpen": { "alias": "mobileOpen"; "required": false; "isSignal": true; }; }, { "mobileOpen": "mobileOpenChange"; "expandedChange": "expandedChange"; }, never, never, true, never>;
 }
 
 export { Sidebar };

package/types/masterteam-components-topbar.d.ts

@@ -1,6 +1,8 @@
 import * as _angular_core from '@angular/core';
 
 declare class Topbar {
+    private readonly document;
+    private readonly destroyRef;
     logo: _angular_core.InputSignal<string | undefined>;
     logoLink: _angular_core.InputSignal<string | any[] | undefined>;
     bgColor: _angular_core.InputSignal<string>;
@@ -10,8 +12,22 @@ declare class Topbar {
     title: _angular_core.InputSignal<string | undefined>;
     subTitle: _angular_core.InputSignal<string | undefined>;
     showBranding: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    responsive: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    showMenuButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    collapseActionsOnMobile: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    menuClick: _angular_core.OutputEmitterRef<void>;
+    private readonly viewportWidth;
+    private readonly mobileBreakpoint;
+    readonly rtl: _angular_core.WritableSignal<boolean>;
+    readonly isMobile: _angular_core.Signal<boolean>;
+    readonly showActions: _angular_core.Signal<boolean>;
+    constructor();
+    onMenuClick(): void;
+    onWindowResize(): void;
+    private getViewportWidth;
+    private getDirection;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Topbar, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Topbar, "mt-topbar", never, { "logo": { "alias": "logo"; "required": false; "isSignal": true; }; "logoLink": { "alias": "logoLink"; "required": false; "isSignal": true; }; "bgColor": { "alias": "bgColor"; "required": false; "isSignal": true; }; "bgImage": { "alias": "bgImage"; "required": false; "isSignal": true; }; "bgRepeat": { "alias": "bgRepeat"; "required": false; "isSignal": true; }; "textColor": { "alias": "textColor"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subTitle": { "alias": "subTitle"; "required": false; "isSignal": true; }; "showBranding": { "alias": "showBranding"; "required": false; "isSignal": true; }; }, {}, never, ["[start]", "[actions]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Topbar, "mt-topbar", never, { "logo": { "alias": "logo"; "required": false; "isSignal": true; }; "logoLink": { "alias": "logoLink"; "required": false; "isSignal": true; }; "bgColor": { "alias": "bgColor"; "required": false; "isSignal": true; }; "bgImage": { "alias": "bgImage"; "required": false; "isSignal": true; }; "bgRepeat": { "alias": "bgRepeat"; "required": false; "isSignal": true; }; "textColor": { "alias": "textColor"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subTitle": { "alias": "subTitle"; "required": false; "isSignal": true; }; "showBranding": { "alias": "showBranding"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; "showMenuButton": { "alias": "showMenuButton"; "required": false; "isSignal": true; }; "collapseActionsOnMobile": { "alias": "collapseActionsOnMobile"; "required": false; "isSignal": true; }; }, { "menuClick": "menuClick"; }, never, ["[start]", "[actions]"], true, never>;
 }
 
 export { Topbar };

package/types/masterteam-components.d.ts

@@ -134,6 +134,9 @@ declare class SelectFieldConfig extends BaseFieldConfig {
     options: any[];
     optionLabel: string;
     optionValue: string;
+    group: boolean;
+    optionGroupLabel: string;
+    optionGroupChildren: string;
     multiple: boolean;
     filter: boolean;
     filterBy: string;
@@ -146,6 +149,9 @@ declare class SelectFieldConfig extends BaseFieldConfig {
         options: any[];
         optionLabel?: string;
         optionValue?: string;
+        group?: boolean;
+        optionGroupLabel?: string;
+        optionGroupChildren?: string;
         multiple?: boolean;
         filter?: boolean;
         filterBy?: string;