cmat 0.0.3

package/components/navigation/horizontal/horizontal.component.scss

@@ -0,0 +1,167 @@
+/* Root navigation specific */
+cmat-horizontal-navigation {
+    .cmat-horizontal-navigation-wrapper {
+        display: flex;
+        align-items: center;
+
+        /* Basic, Branch */
+        cmat-horizontal-navigation-basic-item,
+        cmat-horizontal-navigation-branch-item {
+            @screen sm {
+                &:hover {
+                    .cmat-horizontal-navigation-item-wrapper {
+                        @apply bg-hover;
+                    }
+                }
+            }
+
+            .cmat-horizontal-navigation-item-wrapper {
+                border-radius: 4px;
+                overflow: hidden;
+
+                .cmat-horizontal-navigation-item {
+                    padding: 0 16px;
+                    cursor: pointer;
+                    user-select: none;
+
+                    .cmat-horizontal-navigation-item-icon {
+                        margin-right: 12px;
+                    }
+                }
+            }
+        }
+
+        /* Basic - When item active (current link) */
+        cmat-horizontal-navigation-basic-item {
+            .cmat-horizontal-navigation-item-active,
+            .cmat-horizontal-navigation-item-active-forced {
+                .cmat-horizontal-navigation-item-title {
+                    @apply text-primary #{'!important'};
+                }
+
+                .cmat-horizontal-navigation-item-subtitle {
+                    @apply text-primary-400 #{'!important'};
+
+                    .dark & {
+                        @apply text-primary-600 #{'!important'};
+                    }
+                }
+
+                .cmat-horizontal-navigation-item-icon {
+                    @apply text-primary #{'!important'};
+                }
+            }
+        }
+
+        /* Branch - When menu open */
+        cmat-horizontal-navigation-branch-item {
+            .cmat-horizontal-navigation-menu-active,
+            .cmat-horizontal-navigation-menu-active-forced {
+                .cmat-horizontal-navigation-item-wrapper {
+                    @apply bg-hover;
+                }
+            }
+        }
+
+        /* Spacer */
+        cmat-horizontal-navigation-spacer-item {
+            margin: 12px 0;
+        }
+    }
+}
+
+/* Menu panel specific */
+.cmat-horizontal-navigation-menu-panel {
+    .cmat-horizontal-navigation-menu-item {
+        height: auto;
+        min-height: 0;
+        line-height: normal;
+        white-space: normal;
+
+        /* Basic, Branch */
+        cmat-horizontal-navigation-basic-item,
+        cmat-horizontal-navigation-branch-item,
+        cmat-horizontal-navigation-divider-item {
+            display: flex;
+            flex: 1 1 auto;
+        }
+
+        /* Divider */
+        cmat-horizontal-navigation-divider-item {
+            margin: 8px -16px;
+
+            .cmat-horizontal-navigation-item-wrapper {
+                height: 1px;
+                box-shadow: 0 1px 0 0;
+            }
+        }
+    }
+}
+
+/* Navigation menu item common */
+.cmat-horizontal-navigation-menu-item {
+    /* Basic - When item active (current link) */
+    cmat-horizontal-navigation-basic-item {
+        .cmat-horizontal-navigation-item-active,
+        .cmat-horizontal-navigation-item-active-forced {
+            .cmat-horizontal-navigation-item-title {
+                @apply text-primary #{'!important'};
+            }
+
+            .cmat-horizontal-navigation-item-subtitle {
+                @apply text-primary-400 #{'!important'};
+
+                .dark & {
+                    @apply text-primary-600 #{'!important'};
+                }
+            }
+
+            .cmat-horizontal-navigation-item-icon {
+                @apply text-primary #{'!important'};
+            }
+        }
+    }
+
+    .cmat-horizontal-navigation-item-wrapper {
+        width: 100%;
+
+        &.cmat-horizontal-navigation-item-has-subtitle {
+            .cmat-horizontal-navigation-item {
+                min-height: 56px;
+            }
+        }
+
+        .cmat-horizontal-navigation-item {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            min-height: 48px;
+            width: 100%;
+            font-size: 13px;
+            font-weight: 500;
+            text-decoration: none;
+
+            .cmat-horizontal-navigation-item-title-wrapper {
+                @apply whitespace-nowrap;
+                .cmat-horizontal-navigation-item-subtitle {
+                    font-size: 12px;
+                }
+            }
+
+            .cmat-horizontal-navigation-item-badge {
+                margin-left: auto;
+
+                .cmat-horizontal-navigation-item-badge-content {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 10px;
+                    font-weight: 700;
+                    white-space: nowrap;
+                    height: 20px;
+                }
+            }
+        }
+    }
+}

package/components/navigation/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="cmat/components/navigation" />
+export * from './public-api';

package/components/navigation/navigation.service.d.ts

@@ -0,0 +1,71 @@
+import { CmatNavigationItem } from './navigation.types';
+import * as i0 from "@angular/core";
+export declare class CmatNavigationService {
+    private _componentRegistry;
+    private _navigationStore;
+    /**
+     * Register navigation component
+     *
+     * @param name
+     * @param component
+     */
+    registerComponent(name: string, component: any): void;
+    /**
+     * Deregister navigation component
+     *
+     * @param name
+     */
+    deregisterComponent(name: string): void;
+    /**
+     * Get navigation component from the registry
+     *
+     * @param name
+     */
+    getComponent<T>(name: string): T;
+    /**
+     * Store the given navigation with the given key
+     *
+     * @param key
+     * @param navigation
+     */
+    storeNavigation(key: string, navigation: CmatNavigationItem[]): void;
+    /**
+     * Get navigation from storage by key
+     *
+     * @param key
+     */
+    getNavigation(key: string): CmatNavigationItem[];
+    /**
+     * Delete the navigation from the storage
+     *
+     * @param key
+     */
+    deleteNavigation(key: string): void;
+    /**
+     * Utility function that returns a flattened
+     * version of the given navigation array
+     *
+     * @param navigation
+     * @param flatNavigation
+     */
+    getFlatNavigation(navigation: CmatNavigationItem[], flatNavigation?: CmatNavigationItem[]): CmatNavigationItem[];
+    /**
+     * Utility function that returns the item
+     * with the given id from given navigation
+     *
+     * @param id
+     * @param navigation
+     */
+    getItem(id: string, navigation: CmatNavigationItem[]): CmatNavigationItem | null;
+    /**
+     * Utility function that returns the item's parent
+     * with the given id from given navigation
+     *
+     * @param id
+     * @param navigation
+     * @param parent
+     */
+    getItemParent(id: string, navigation: CmatNavigationItem[], parent: CmatNavigationItem[] | CmatNavigationItem): CmatNavigationItem[] | CmatNavigationItem | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CmatNavigationService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<CmatNavigationService>;
+}

package/components/navigation/navigation.types.d.ts

@@ -0,0 +1,34 @@
+import { IsActiveMatchOptions } from '@angular/router';
+export declare class CmatNavigationItem {
+    id?: string;
+    title?: string;
+    subTitle?: string;
+    type: 'aside' | 'basic' | 'collapsable' | 'divider' | 'group' | 'spacer';
+    hidden?: (item: CmatNavigationItem) => boolean;
+    active?: boolean;
+    disabled?: boolean;
+    tooltip?: string;
+    link?: string;
+    externalLink?: boolean;
+    target?: '_blank' | '_self' | '_parent' | '_top' | string;
+    exactMatch?: boolean;
+    isActiveMatchOptions?: IsActiveMatchOptions;
+    function?: (item: CmatNavigationItem) => void;
+    classes?: {
+        title?: string;
+        subtitle?: string;
+        icon?: string;
+        wrapper?: string;
+    };
+    icon?: string;
+    badge?: {
+        title?: string;
+        classes?: string;
+    };
+    children?: CmatNavigationItem[];
+    meta?: any;
+    permission?: any;
+}
+export type CmatVerticalNavigationAppearance = 'default' | 'compact' | 'dense' | 'thin';
+export type CmatVerticalNavigationMode = 'over' | 'side';
+export type CmatVerticalNavigationPosition = 'left' | 'right';

package/components/navigation/public-api.d.ts

@@ -0,0 +1,4 @@
+export * from './horizontal/horizontal.component';
+export * from './vertical/vertical.component';
+export * from './navigation.service';
+export * from './navigation.types';

package/components/navigation/vertical/components/aside/aside.component.d.ts

@@ -0,0 +1,63 @@
+import { ChangeDetectorRef, EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { Router } from '@angular/router';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { CmatNavigationService } from '../../../navigation.service';
+import { CmatNavigationItem } from '../../../navigation.types';
+import * as i0 from "@angular/core";
+export declare class CmatVerticalNavigationAsideItemComponent implements OnChanges, OnInit, OnDestroy {
+    private _changeDetectorRef;
+    private _router;
+    private _cmatNavigationService;
+    static ngAcceptInputType_autoCollapse: BooleanInput;
+    static ngAcceptInputType_skipChildren: BooleanInput;
+    activeItemId: string | null;
+    autoCollapse: boolean;
+    item: CmatNavigationItem;
+    name: string;
+    skipChildren: boolean;
+    editMode: boolean;
+    readonly editSelectedItemChanged: EventEmitter<CmatNavigationItem>;
+    active: boolean;
+    private _cmatVerticalNavigationComponent;
+    private _unsubscribeAll;
+    constructor(_changeDetectorRef: ChangeDetectorRef, _router: Router, _cmatNavigationService: CmatNavigationService);
+    /**
+     * On changes
+     *
+     * @param changes
+     */
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * On init
+     */
+    ngOnInit(): void;
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void;
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index: number, item: any): any;
+    selectItem(item: CmatNavigationItem): void;
+    /**
+     * Check if the given item has the given url
+     * in one of its children
+     *
+     * @param item
+     * @param currentUrl
+     * @private
+     */
+    private _hasActiveChild;
+    /**
+     * Decide and mark if the item is active
+     *
+     * @private
+     */
+    private _markIfActive;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CmatVerticalNavigationAsideItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CmatVerticalNavigationAsideItemComponent, "cmat-vertical-navigation-aside-item", never, { "activeItemId": { "alias": "activeItemId"; "required": false; }; "autoCollapse": { "alias": "autoCollapse"; "required": false; }; "item": { "alias": "item"; "required": false; }; "name": { "alias": "name"; "required": false; }; "skipChildren": { "alias": "skipChildren"; "required": false; }; "editMode": { "alias": "editMode"; "required": false; }; }, { "editSelectedItemChanged": "editSelectedItemChanged"; }, never, never, true, never>;
+}

package/components/navigation/vertical/components/basic/basic.component.d.ts

@@ -0,0 +1,30 @@
+import { ChangeDetectorRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { IsActiveMatchOptions } from '@angular/router';
+import { CmatNavigationService } from '../../../navigation.service';
+import { CmatNavigationItem } from '../../../navigation.types';
+import { CmatUtilsService } from 'cmat/services/utils';
+import * as i0 from "@angular/core";
+export declare class CmatVerticalNavigationBasicItemComponent implements OnInit, OnDestroy {
+    private _changeDetectorRef;
+    private _cmatNavigationService;
+    private _cmatUtilsService;
+    item: CmatNavigationItem;
+    name: string;
+    editMode: boolean;
+    readonly editSelectedItemChanged: EventEmitter<CmatNavigationItem>;
+    isActiveMatchOptions: IsActiveMatchOptions;
+    private _cmatVerticalNavigationComponent;
+    private _unsubscribeAll;
+    constructor(_changeDetectorRef: ChangeDetectorRef, _cmatNavigationService: CmatNavigationService, _cmatUtilsService: CmatUtilsService);
+    /**
+     * On init
+     */
+    ngOnInit(): void;
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void;
+    selectItem(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CmatVerticalNavigationBasicItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CmatVerticalNavigationBasicItemComponent, "cmat-vertical-navigation-basic-item", never, { "item": { "alias": "item"; "required": false; }; "name": { "alias": "name"; "required": false; }; "editMode": { "alias": "editMode"; "required": false; }; }, { "editSelectedItemChanged": "editSelectedItemChanged"; }, never, never, true, never>;
+}

package/components/navigation/vertical/components/collapsable/collapsable.component.d.ts

@@ -0,0 +1,74 @@
+import { ChangeDetectorRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { CmatNavigationService } from '../../../navigation.service';
+import { CmatNavigationItem } from '../../../navigation.types';
+import * as i0 from "@angular/core";
+export declare class CmatVerticalNavigationCollapsableItemComponent implements OnInit, OnDestroy {
+    private _changeDetectorRef;
+    private _router;
+    private _cmatNavigationService;
+    static ngAcceptInputType_autoCollapse: BooleanInput;
+    autoCollapse: boolean;
+    item: CmatNavigationItem;
+    name: string;
+    editMode: boolean;
+    readonly editSelectedItemChanged: EventEmitter<CmatNavigationItem>;
+    isCollapsed: boolean;
+    isExpanded: boolean;
+    private _cmatVerticalNavigationComponent;
+    private _unsubscribeAll;
+    constructor(_changeDetectorRef: ChangeDetectorRef, _router: Router, _cmatNavigationService: CmatNavigationService);
+    /**
+     * Host binding for component classes
+     */
+    get classList(): any;
+    /**
+     * On init
+     */
+    ngOnInit(): void;
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void;
+    /**
+     * Collapse
+     */
+    collapse(): void;
+    /**
+     * Expand
+     */
+    expand(): void;
+    /**
+     * Toggle collapsable
+     */
+    toggleCollapsable(): void;
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index: number, item: any): any;
+    selectItem(item: CmatNavigationItem): void;
+    /**
+     * Check if the given item has the given url
+     * in one of its children
+     *
+     * @param item
+     * @param currentUrl
+     * @private
+     */
+    private _hasActiveChild;
+    /**
+     * Check if this is a children
+     * of the given item
+     *
+     * @param parent
+     * @param item
+     * @private
+     */
+    private _isChildrenOf;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CmatVerticalNavigationCollapsableItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CmatVerticalNavigationCollapsableItemComponent, "cmat-vertical-navigation-collapsable-item", never, { "autoCollapse": { "alias": "autoCollapse"; "required": false; }; "item": { "alias": "item"; "required": false; }; "name": { "alias": "name"; "required": false; }; "editMode": { "alias": "editMode"; "required": false; }; }, { "editSelectedItemChanged": "editSelectedItemChanged"; }, never, never, true, never>;
+}

package/components/navigation/vertical/components/divider/divider.component.d.ts

@@ -0,0 +1,26 @@
+import { ChangeDetectorRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { CmatNavigationService } from '../../../navigation.service';
+import { CmatNavigationItem } from '../../../navigation.types';
+import * as i0 from "@angular/core";
+export declare class CmatVerticalNavigationDividerItemComponent implements OnInit, OnDestroy {
+    private _changeDetectorRef;
+    private _cmatNavigationService;
+    item: CmatNavigationItem;
+    name: string;
+    editMode: boolean;
+    readonly editSelectedItemChanged: EventEmitter<CmatNavigationItem>;
+    private _cmatVerticalNavigationComponent;
+    private _unsubscribeAll;
+    constructor(_changeDetectorRef: ChangeDetectorRef, _cmatNavigationService: CmatNavigationService);
+    /**
+     * On init
+     */
+    ngOnInit(): void;
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void;
+    selectItem(item: CmatNavigationItem): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CmatVerticalNavigationDividerItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CmatVerticalNavigationDividerItemComponent, "cmat-vertical-navigation-divider-item", never, { "item": { "alias": "item"; "required": false; }; "name": { "alias": "name"; "required": false; }; "editMode": { "alias": "editMode"; "required": false; }; }, { "editSelectedItemChanged": "editSelectedItemChanged"; }, never, never, true, never>;
+}

package/components/navigation/vertical/components/group/group.component.d.ts

@@ -0,0 +1,36 @@
+import { ChangeDetectorRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { CmatNavigationService } from '../../../navigation.service';
+import { CmatNavigationItem } from '../../../navigation.types';
+import * as i0 from "@angular/core";
+export declare class CmatVerticalNavigationGroupItemComponent implements OnInit, OnDestroy {
+    private _changeDetectorRef;
+    private _cmatNavigationService;
+    static ngAcceptInputType_autoCollapse: BooleanInput;
+    autoCollapse: boolean;
+    item: CmatNavigationItem;
+    name: string;
+    editMode: boolean;
+    readonly editSelectedItemChanged: EventEmitter<CmatNavigationItem>;
+    private _cmatVerticalNavigationComponent;
+    private _unsubscribeAll;
+    constructor(_changeDetectorRef: ChangeDetectorRef, _cmatNavigationService: CmatNavigationService);
+    /**
+     * On init
+     */
+    ngOnInit(): void;
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void;
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index: number, item: any): any;
+    selectItem(item: CmatNavigationItem): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CmatVerticalNavigationGroupItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CmatVerticalNavigationGroupItemComponent, "cmat-vertical-navigation-group-item", never, { "autoCollapse": { "alias": "autoCollapse"; "required": false; }; "item": { "alias": "item"; "required": false; }; "name": { "alias": "name"; "required": false; }; "editMode": { "alias": "editMode"; "required": false; }; }, { "editSelectedItemChanged": "editSelectedItemChanged"; }, never, never, true, never>;
+}

package/components/navigation/vertical/components/spacer/spacer.component.d.ts

@@ -0,0 +1,26 @@
+import { ChangeDetectorRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { CmatNavigationService } from '../../../navigation.service';
+import { CmatNavigationItem } from '../../../navigation.types';
+import * as i0 from "@angular/core";
+export declare class CmatVerticalNavigationSpacerItemComponent implements OnInit, OnDestroy {
+    private _changeDetectorRef;
+    private _cmatNavigationService;
+    item: CmatNavigationItem;
+    name: string;
+    editMode: boolean;
+    readonly editSelectedItemChanged: EventEmitter<CmatNavigationItem>;
+    private _cmatVerticalNavigationComponent;
+    private _unsubscribeAll;
+    constructor(_changeDetectorRef: ChangeDetectorRef, _cmatNavigationService: CmatNavigationService);
+    /**
+     * On init
+     */
+    ngOnInit(): void;
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void;
+    selectItem(item: CmatNavigationItem): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CmatVerticalNavigationSpacerItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CmatVerticalNavigationSpacerItemComponent, "cmat-vertical-navigation-spacer-item", never, { "item": { "alias": "item"; "required": false; }; "name": { "alias": "name"; "required": false; }; "editMode": { "alias": "editMode"; "required": false; }; }, { "editSelectedItemChanged": "editSelectedItemChanged"; }, never, never, true, never>;
+}

package/components/navigation/vertical/styles/appearances/compact.scss

@@ -0,0 +1,103 @@
+/* Variables */
+$cmat-vertical-navigation-compact-width: 112;
+
+cmat-vertical-navigation {
+    /* Compact appearance overrides */
+    &.cmat-vertical-navigation-appearance-compact {
+        width: #{$cmat-vertical-navigation-compact-width}px;
+        min-width: #{$cmat-vertical-navigation-compact-width}px;
+        max-width: #{$cmat-vertical-navigation-compact-width}px;
+
+        /* Left positioned */
+        &.cmat-vertical-navigation-position-left {
+            /* Side mode */
+            &.cmat-vertical-navigation-mode-side {
+                margin-left: -#{$cmat-vertical-navigation-compact-width}px;
+            }
+
+            /* Opened */
+            &.cmat-vertical-navigation-opened {
+                margin-left: 0;
+            }
+        }
+
+        /* Right positioned */
+        &.cmat-vertical-navigation-position-right {
+            /* Side mode */
+            &.cmat-vertical-navigation-mode-side {
+                margin-right: -#{$cmat-vertical-navigation-compact-width}px;
+            }
+
+            /* Opened */
+            &.cmat-vertical-navigation-opened {
+                margin-right: 0;
+            }
+
+            /* Aside wrapper */
+            .cmat-vertical-navigation-aside-wrapper {
+                left: auto;
+                right: #{$cmat-vertical-navigation-compact-width}px;
+            }
+        }
+
+        /* Wrapper */
+        .cmat-vertical-navigation-wrapper {
+            /* Content */
+            .cmat-vertical-navigation-content {
+                > cmat-vertical-navigation-aside-item,
+                > cmat-vertical-navigation-basic-item {
+                    .cmat-vertical-navigation-item-wrapper {
+                        margin: 4px 8px 0 8px;
+
+                        .cmat-vertical-navigation-item {
+                            flex-direction: column;
+                            justify-content: center;
+                            padding: 12px;
+                            border-radius: 6px;
+
+                            .cmat-vertical-navigation-item-icon {
+                                margin-right: 0;
+                            }
+
+                            .cmat-vertical-navigation-item-title-wrapper {
+                                margin-top: 8px;
+
+                                .cmat-vertical-navigation-item-title {
+                                    font-size: 12px;
+                                    font-weight: 500;
+                                    text-align: center;
+                                    line-height: 16px;
+                                }
+
+                                .cmat-vertical-navigation-item-subtitle {
+                                    display: none !important;
+                                }
+                            }
+
+                            .cmat-vertical-navigation-item-badge {
+                                position: absolute;
+                                top: 12px;
+                                left: 64px;
+                            }
+                        }
+                    }
+
+                    > cmat-vertical-navigation-collapsable-item {
+                        display: none;
+                    }
+
+                    > cmat-vertical-navigation-group-item {
+                        > .cmat-vertical-navigation-item-wrapper {
+                            display: none;
+                        }
+                    }
+                }
+            }
+        }
+
+        /* Aside wrapper */
+        .cmat-vertical-navigation-aside-wrapper {
+            left: #{$cmat-vertical-navigation-compact-width}px;
+        }
+    }
+}