import * as _angular_core from '@angular/core'; import { OnInit, TemplateRef, AfterViewInit, OnDestroy, ElementRef } from '@angular/core'; import * as dateFns from 'date-fns'; import { Title } from '@angular/platform-browser'; interface CalendarPanelSum { year: number; dayNames: String[]; daysAbsolute: CalendarExtendedDay[]; calendarPanels: CalendarPanel[]; } interface CalendarPanel { year: number; month: number; monthName: string; days: CalendarExtendedDay[]; render: [CalendarExtendedDay[]]; } interface CalendarMonth { name: string; year: number; days: CalendarExtendedDay[]; dayNames: String[]; } /** * selectedRange for Calendar Panels * @param {string} type type of event, in this case 'range' * @param {string} start first day of selected range * @param {string} end last day of selected range */ interface CalendarSelectedRange { type: 'range'; start: CalendarExtendedDay; end: CalendarExtendedDay; affectedDays: CalendarExtendedDay[]; } /** * selectedDate for Calendar Panels * @param {string} type type of event, in this case 'click' * @param {string} date selected date */ interface CalendarSelectedDate { type: 'click'; date: CalendarExtendedDay; } type CalendarEvent = CalendarSelectedRange | CalendarSelectedDate; interface DayX { dayNumber: string; date: Date; kw?: number; isWeekendDay?: boolean; type?: string; color?: string; backgroundColor?: string; badge?: boolean; badgeMode?: string; badgeInt?: number; badgeIcon?: string; toolTip?: string; } /** * dataSource for Calendar Panels * @param {string} config configurate your calendar panels * @param {string} data set custom days CalendarExtendedDay[] */ interface CalendarPanels { config: CalendarPanelsConfig; data: CalendarExtendedDay[]; } /** * @param {string} renderMode @default monthly choose render mode ('annual' or 'monthly') * @param {string} selectMode @default click choose select mode ('click' or 'range') * @param {boolean} calendarWeek @default false display the calendar week * @param {boolean} displayYear @default true displays the year next to the Month name * @param {boolean} switches @default true show arrows to navigate an month forward or backwards * @param {boolean} bluredDays @default false make an circle around the number of the day * @param {boolean} markWeekend @default true highlight weekends * @param {boolean} firstDayOfWeekMonday @default true set first day of week (monday or sunday) * @param {string} panelWidth @default 350px set a with for an single panel */ interface CalendarPanelsConfig { renderMode: 'monthly' | 'annual'; selectMode: 'click' | 'range'; calendarWeek: boolean; displayYear?: boolean; switches?: boolean; bluredDays?: boolean; markWeekend?: boolean; firstDayOfWeekMonday?: boolean; panelWidth?: string; } /** * dataSource for Calendar Table * @param {string} nameCol configurate first coloum name * @param {string} data set custom days CalendarExtendedDay[] */ interface CalendarTable { nameCol: string; entries: CalendarTableEntry[]; } /** * dataSource for Calendar Table * @param {string} name configurate first coloum name * @param {CalendarExtendedDay[]} data set custom days CalendarExtendedDay[] */ interface CalendarTableEntry { name: string; data: CalendarExtendedDay[]; } /** * Use this to customize your data in the calendar * For Calendar Table and Panels * @param {Date} date Date to match * @param {number} char single charater will be displayed in day * @param {string} colors.backgroundColor set a custom css backgroundColor for your date * @param {string} colors.color set a custom css color for your date * @param {boolean} isWeekendDay Boolean if day weekend (override not allowed) * @param {string} toolTip if set, this displays a mat-tooltip * @param {boolean} badge.badgeMode if you want to use a Badge, options: 'int' or 'icon' * @param {number} badge.badgeInt if badgeMode == 'int', set our Number here * @param {string} badge.badgeIcon if badgeMode == 'icon', set Icon (Material-Icons) * @param {Object} _meta can be ignored */ interface CalendarExtendedDay { date: Date; char?: string; colors?: { backgroundColor: string; color?: string; }; toolTip?: string; badge?: { badgeMode: 'int' | 'icon'; badgeInt?: number; badgeIcon?: string; }; _meta?: CalendarExtendedDayMeta; customData?: T; } type CalendarExtendedDayMetaType = 'cw' | 'plHolder' | 'day'; interface CalendarExtendedDayMeta { kw: number; type: CalendarExtendedDayMetaType; dayNumber: string; dayOfWeek: number; isWeekendDay: boolean; } declare class FsCalendarPanelsComponent implements OnInit { private readonly calendarService; dataSource: _angular_core.InputSignal>; month: _angular_core.InputSignal; year: _angular_core.InputSignal; monthsBefore: _angular_core.InputSignal; monthsAfter: _angular_core.InputSignal; placeholderDay: _angular_core.InputSignal; selection: _angular_core.OutputEmitterRef>; private readonly internalMonth; private readonly internalYear; protected readonly calendar: _angular_core.Signal; protected readonly today: Date; protected readonly selectedDayStart: _angular_core.WritableSignal | undefined>; protected readonly selectedDayBetween: _angular_core.WritableSignal[]>; protected readonly selectedDayEnd: _angular_core.WritableSignal | undefined>; protected readonly monthOverrride: _angular_core.WritableSignal; protected readonly isLoading: _angular_core.WritableSignal; protected readonly markWeekend: _angular_core.Signal; protected readonly bluredDays: _angular_core.Signal; protected readonly weekendColor = "rgba(0, 0, 0, .25)"; constructor(); keyEvent(event: KeyboardEvent): void; ngOnInit(): void; onClick(day: CalendarExtendedDay, type: string): void; onMouseOver(dateComp: Date): void; getAmIBetween(date: Date): boolean; isSelectedDayStart(date: Date): boolean; isSelectedDayEnd(date: Date): boolean; isToday(date: Date): boolean; getCanIBeHighlighted(date: Date): boolean; onMonthForward(): void; onMonthBackward(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } declare class FsCalendarTableComponent implements OnInit { private readonly calendarService; dataSource: _angular_core.InputSignal; month: _angular_core.InputSignal; year: _angular_core.InputSignal; monthChange: _angular_core.OutputEmitterRef; yearChange: _angular_core.OutputEmitterRef; private readonly internalMonth; private readonly internalYear; isLoading: _angular_core.WritableSignal; markWeekend: boolean; protected readonly currentMonth: _angular_core.Signal; protected readonly tableData: _angular_core.Signal; constructor(); ngOnInit(): void; onMonthForward(): void; onMonthBackward(): void; isToday(date: Date): boolean; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } declare class FsCalendarTableNameDirective { constructor(); static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } type StartsOn = 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined; declare class FsCalendarService { private readonly appLocale; dayNames: string[]; oneYearOfMonths: number[]; weekStartsOn: StartsOn; kwStartsOn: StartsOn; constructor(appLocale: dateFns.Locale); generateMatrix(mode: 'monthly' | 'annual', calendarWeek: boolean, customDays: CalendarExtendedDay[], year: number, currMonth: number, monthsBefore: number, monthsAfter: number): CalendarPanelSum; generatePanels(year: number, months: number[], calendarWeek: boolean, customDays: CalendarExtendedDay[]): CalendarPanel[]; generatePanel(year: number, month: number, calendarWeek: boolean, customDays: CalendarExtendedDay[]): CalendarPanel; generatePlaceholder(date: Date): CalendarExtendedDay; generateWeekNumber(date: Date): CalendarExtendedDay; generateMonth(year: number, month: number, customDays: CalendarExtendedDay[]): CalendarMonth; generateDay(dateToGenerate: Date, customDays: CalendarExtendedDay[]): CalendarExtendedDay; addDays(orig: CalendarExtendedDay, ammount: number): CalendarExtendedDay; generateMetaForCalExtDay(date: Date, type: CalendarExtendedDayMetaType): CalendarExtendedDayMeta; getWeekDayNames(): string[]; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵprov: _angular_core.ɵɵInjectableDeclaration; } /** * FsCalendarModule - Barrel Module for Calendar Components * * Import this single module to get all Calendar components and directives. * Follows Angular Material's module pattern for better DX. * * @example * ```typescript * import { FsCalendarModule } from '@fullstack-devops/ngx-mat-components'; * * @Component({ * imports: [FsCalendarModule] * }) * export class AppComponent {} * ``` */ /** * All Calendar related components and directives */ declare const FS_CALENDAR_COMPONENTS: readonly [typeof FsCalendarPanelsComponent, typeof FsCalendarTableComponent, typeof FsCalendarTableNameDirective]; /** * Convenience array for importing all Calendar components * * Use this in your component's imports array: * * @example * ```typescript * @Component({ * imports: [FsCalendarModule] * }) * export class AppComponent {} * ``` */ declare const FsCalendarModule: readonly [typeof FsCalendarPanelsComponent, typeof FsCalendarTableComponent, typeof FsCalendarTableNameDirective]; declare class FsNavFrameContentDirective { constructor(); static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } declare class FsNavFrameSidebar { static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * @interface NavFrameConfig * * @appName {string} displayed app name, shows only in opened mode * @appVersion {string} (optional) display app version * @logoSrc {string} (optional) link to logo, can be relative or full URL */ interface NavFrameConfig { appName?: string; appVersion?: string; logoSrc?: string; sizing?: NavFrameSizing; } interface NavFrameSizing { toolbarHeight?: number; sidebarWidthClosed?: number; sidebarWidthOpened?: number; } interface NavItem { title: string; path: string; } /** * @interface NavRoute * */ interface Navigation { icon: any; title: string; path: string; description: string; badgeNumber?: number; childrens?: NavItem[]; open?: boolean; [key: string]: any; } /** * @type NavRoutes * */ type NavRoutes = Navigation[]; declare enum MenuState { CLOSED = "closed", OPENED = "opened" } declare class FsNavFrameService { private readonly _menuState; private readonly _sizing; readonly menuState: _angular_core.Signal; readonly sizing: _angular_core.Signal; readonly isMenuClosed: _angular_core.Signal; readonly isMenuOpened: _angular_core.Signal; switchMenuState(): void; changeMenuStateToClosed(): void; openMenu(): void; setSizing(sizing: NavFrameSizing): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵprov: _angular_core.ɵɵInjectableDeclaration; } declare class FsNavFrameSidebarItemComponent { protected frameService: FsNavFrameService; readonly routerLink: _angular_core.InputSignal; readonly label: _angular_core.InputSignal; template: TemplateRef | undefined; protected readonly closed: _angular_core.Signal; constructor(frameService: FsNavFrameService); closeSidemenu(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } declare class FsNavFrameComponent implements AfterViewInit, OnDestroy { private elementRef; protected frameService: FsNavFrameService; private titleService; readonly navFrameConfig: _angular_core.InputSignal; readonly sizing: _angular_core.InputSignal; navLinks: TemplateRef | undefined; private readonly body; private profileContentElement; protected readonly isClosed: _angular_core.Signal; constructor(elementRef: ElementRef, frameService: FsNavFrameService, titleService: Title); ngAfterViewInit(): void; ngOnDestroy(): void; toggleSidemenu(): void; closeSidebar(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } declare class FsNavUserProfileActionsDirective { constructor(); static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } declare class FsNavUserProfileNameDirective { constructor(); static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } declare class FsNavUserProfileSubNameDirective { constructor(); static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } declare class FsNavUserProfileComponent { private frameService; readonly onClickProfile: _angular_core.OutputEmitterRef; readonly profilePicture: _angular_core.InputSignal; readonly opened: _angular_core.InputSignal; constructor(frameService: FsNavFrameService); toggleSidemenu(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } declare class FsNavFrameToolbarCenterDirective { constructor(); static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } declare class FsNavFrameToolbarEndDirective { constructor(); static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } declare class FsNavFrameToolbarStartDirective { constructor(); static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵdir: _angular_core.ɵɵDirectiveDeclaration; } declare class FsNavFrameToolbarComponent { private readonly frameService; tbcontent: TemplateRef | undefined; protected readonly isOpened: _angular_core.Signal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * FsNavFrameModule - Barrel Module for Nav Frame Components * * Import this single module to get all Nav Frame components and directives. * Follows Angular Material's module pattern for better DX. * * @example * ```typescript * import { FsNavFrameModule } from '@fullstack-devops/ngx-mat-components'; * * @Component({ * imports: [FsNavFrameModule] * }) * export class AppComponent {} * ``` */ /** * All Nav Frame related components and directives */ declare const FS_NAV_FRAME_COMPONENTS: readonly [typeof FsNavFrameComponent, typeof FsNavFrameSidebar, typeof FsNavFrameSidebarItemComponent, typeof FsNavUserProfileComponent, typeof FsNavUserProfileActionsDirective, typeof FsNavUserProfileNameDirective, typeof FsNavUserProfileSubNameDirective, typeof FsNavFrameToolbarComponent, typeof FsNavFrameToolbarStartDirective, typeof FsNavFrameToolbarCenterDirective, typeof FsNavFrameToolbarEndDirective, typeof FsNavFrameContentDirective]; /** * Convenience array for importing all Nav Frame components * * Use this in your component's imports array: * * @example * ```typescript * @Component({ * imports: [FsNavFrameModule] * }) * export class AppComponent {} * ``` */ declare const FsNavFrameModule: readonly [typeof FsNavFrameComponent, typeof FsNavFrameSidebar, typeof FsNavFrameSidebarItemComponent, typeof FsNavUserProfileComponent, typeof FsNavUserProfileActionsDirective, typeof FsNavUserProfileNameDirective, typeof FsNavUserProfileSubNameDirective, typeof FsNavFrameToolbarComponent, typeof FsNavFrameToolbarStartDirective, typeof FsNavFrameToolbarCenterDirective, typeof FsNavFrameToolbarEndDirective, typeof FsNavFrameContentDirective]; declare enum FsThemeColorSchemes { Auto = "auto", Light = "light-mode", Dark = "dark-mode" } declare class FsThemeMenu implements OnInit { private readonly document; readonly FsThemeColorSchemes: typeof FsThemeColorSchemes; localStorageKey: _angular_core.InputSignal; theme: _angular_core.InputSignal; themeChange: _angular_core.OutputEmitterRef; private readonly currentTheme; constructor(); ngOnInit(): void; isSelected(requested: FsThemeColorSchemes): boolean; onColorSchemeChange(value: FsThemeColorSchemes): void; loadThemeFromStorage(): void; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } declare class FsThemeIcon { theme: _angular_core.InputSignal; readonly FsThemeColorSchemes: typeof FsThemeColorSchemes; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } declare class FsCheckSvg { active: _angular_core.InputSignal; static ɵfac: _angular_core.ɵɵFactoryDeclaration; static ɵcmp: _angular_core.ɵɵComponentDeclaration; } /** * Array of all FsThemeMenu components and directives. * * Use this if you need to import components individually or create * a custom subset of components. */ declare const FS_THEME_MENU_COMPONENTS: readonly [typeof FsThemeMenu, typeof FsThemeIcon, typeof FsCheckSvg]; /** * Barrel module for FsThemeMenu - Import all theme menu components at once. * * This follows the Angular Material pattern where a single import gives you * all related components for a feature. * * @example * ```typescript * import { FsThemeMenuModule } from '@fsdevops/ngx-mat-components/fs-theme-menu'; * * @Component({ * imports: [FsThemeMenuModule], * template: ` * * * ` * }) * export class MyComponent { * currentTheme = signal(FsThemeColorSchemes.Auto); * onThemeChange(theme: FsThemeColorSchemes) { * this.currentTheme.set(theme); * } * } * ``` * * @remarks * Instead of importing: * - FsThemeMenu * - FsThemeIcon * - FsCheckSvg * * You can now import just `FsThemeMenuModule` to get all components. * * @public */ declare const FsThemeMenuModule: readonly [typeof FsThemeMenu, typeof FsThemeIcon, typeof FsCheckSvg]; export { FS_CALENDAR_COMPONENTS, FS_NAV_FRAME_COMPONENTS, FS_THEME_MENU_COMPONENTS, FsCalendarModule, FsCalendarPanelsComponent, FsCalendarService, FsCalendarTableComponent, FsCalendarTableNameDirective, FsNavFrameComponent, FsNavFrameContentDirective, FsNavFrameModule, FsNavFrameService, FsNavFrameSidebar, FsNavFrameSidebarItemComponent, FsNavFrameToolbarCenterDirective, FsNavFrameToolbarComponent, FsNavFrameToolbarEndDirective, FsNavFrameToolbarStartDirective, FsNavUserProfileActionsDirective, FsNavUserProfileComponent, FsNavUserProfileNameDirective, FsNavUserProfileSubNameDirective, FsThemeColorSchemes, FsThemeMenu, FsThemeMenuModule }; export type { CalendarEvent, CalendarExtendedDay, CalendarExtendedDayMeta, CalendarExtendedDayMetaType, CalendarMonth, CalendarPanel, CalendarPanelSum, CalendarPanels, CalendarPanelsConfig, CalendarSelectedDate, CalendarSelectedRange, CalendarTable, CalendarTableEntry, DayX, NavFrameConfig, NavFrameSizing, NavItem, NavRoutes, Navigation };