@softheon/armature 17.12.7 → 17.13.1

package/lib/base-components/sof-utility-button/sof-utility-button.component.d.ts

@@ -1,6 +1,5 @@
-import { OnDestroy, OnInit } from '@angular/core';
 import * as i0 from "@angular/core";
-export declare class SofUtilityButtonComponent implements OnInit, OnDestroy {
+export declare class SofUtilityButtonComponent {
     buttonId: string;
     buttonColorText: string;
     buttonSize: string;
@@ -10,16 +9,10 @@ export declare class SofUtilityButtonComponent implements OnInit, OnDestroy {
     /** Individual Button Click  */
     buttonClick: Function;
     displayAdditionalComponent: any;
-    /** On component init */
-    constructor();
-    /** On Destroy  */
-    ngOnDestroy(): void;
-    /** Initialize component  **/
-    ngOnInit(): void;
     /** Any logic related to ag grid cell renderer data can be added here */
     agInit(params: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SofUtilityButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SofUtilityButtonComponent, "lib-sof-utility-button", never, { "buttonId": { "alias": "buttonId"; "required": false; }; "buttonColorText": { "alias": "buttonColorText"; "required": false; }; "buttonSize": { "alias": "buttonSize"; "required": false; }; "buttonDisabled": { "alias": "buttonDisabled"; "required": false; }; "buttonIconClass": { "alias": "buttonIconClass"; "required": false; }; "menuDropDown": { "alias": "menuDropDown"; "required": false; }; "buttonClick": { "alias": "buttonClick"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SofUtilityButtonComponent, "sof-utility-button", never, { "buttonId": { "alias": "buttonId"; "required": false; }; "buttonColorText": { "alias": "buttonColorText"; "required": false; }; "buttonSize": { "alias": "buttonSize"; "required": false; }; "buttonDisabled": { "alias": "buttonDisabled"; "required": false; }; "buttonIconClass": { "alias": "buttonIconClass"; "required": false; }; "menuDropDown": { "alias": "menuDropDown"; "required": false; }; "buttonClick": { "alias": "buttonClick"; "required": false; }; }, {}, never, never, false, never>;
 }
 export declare enum BUTTON_COLORS_VARIATIONS {
     PRIMARY = "primary",

package/lib/core/models/base-config.d.ts

@@ -4,6 +4,7 @@ import { HeaderConfig } from './header-config';
 import { NavigationConfig } from './navigation-config';
 import { OidcAuthSettings } from './oidc-auth-settings';
 import { SubdomainConfig } from './subdomain-config';
+import { NavPanelConfig } from './nav-panel-config';
 /** The base configuration interface */
 export interface BaseConfig {
     /** The oidc settings */
@@ -20,4 +21,8 @@ export interface BaseConfig {
     federatedModules?: {
         [key: string]: FederatedModuleConfig;
     };
+    /**
+     * The navigation panel configs
+    */
+    navigationPanel?: NavPanelConfig;
 }

package/lib/core/models/nav-panel-config.d.ts

@@ -0,0 +1,17 @@
+import { NavPanelNode } from "../../navigation/components/sof-navigation-panel/models/nav-panel-nodes";
+import { NavPanelSettings } from "../../navigation/components/sof-navigation-panel/models/nav-panel-settings";
+/**
+ * Navigation panel config
+ * @property `settings`: NavPanelSettings
+ * @property `nodes`: Array<NavPanelNode>
+ */
+export interface NavPanelConfig {
+    /**
+     * Navigation panel settings
+    */
+    settings: NavPanelSettings;
+    /**
+     * Navigation panel nodes
+    */
+    nodes: Array<NavPanelNode>;
+}

package/lib/navigation/components/sof-navigation-panel/models/nav-panel-nodes.d.ts

@@ -0,0 +1,99 @@
+/**
+ * Navigation panel nodes
+ * @example
+ * ```typescript
+ * // no subnodes ...
+ * node: NavPanelNode = {
+ *  label: 'Test Link',
+ *  iconClass: 'ph-bold ph-acorn',
+ *  route: '/test-link'
+ * };
+ *
+ * // with sub nodes ...
+ * node: NavPanelNode = {
+ *  label: 'Section Header',
+ *  subnodes: [
+ *    {
+ *      label: 'Test Link',
+ *      iconClass: 'ph-bold ph-acorn',
+ *      route: '/test-link'
+ *    }
+ *  ]
+ * };
+ * ```
+*/
+export interface NavPanelNode {
+    /**
+     * Node label
+     * @note can be a translation key
+     * @example 'armature.navigationPanel.node-labels.home'
+    */
+    label: string;
+    /**
+     * Node icon class
+     * @note we are currently using phosphor-icons type: bold, per design
+     * @example 'ph-bold ph-acorn'
+     * @tutorial
+     * - include the following script in the index.html of your app -
+     * ```html
+     * <script src="https://unpkg.com/@phosphor-icons/web"></script>
+     * ```
+     * - Setting the font-size for an icon automatically sets the height & width to match, which helps when aligning icons in a column or row.
+     * @see {@link [Phosphor Icons: Bold](https://phosphoricons.com/?weight=%22bold%22)}
+    */
+    iconClass?: string;
+    /**
+     * Node route url
+    */
+    route?: string;
+    /**
+     * Subnodes array
+     * @description If sub nodes are present,
+     * the parent node should not have a route or icon and will only include a label for the sub nodes,
+     * this parent node would not be included in the applications router-module as it is just a section header.
+     * @example
+     * ```typescript
+     * node: NavPanelNode = {
+     *  label: 'Section Header',
+     *  subnodes: [
+     *    {
+     *      label: 'Test Link',
+     *      iconClass: 'ph-bold ph-acorn',
+     *      route: '/test-link'
+     *    }
+     *  ]
+     * };
+     * ```
+    */
+    subnodes?: Array<NavPanelSubnode>;
+}
+/**
+ * Navigation panel subnodes
+ * @note subnodes cannot have there own subnodes
+*/
+interface NavPanelSubnode {
+    /**
+     * Subnode label
+     * @note can be a translation key
+     * @example 'armature.navigationPanel.node-labels.home'
+    */
+    label: string;
+    /**
+     * Subnode icon class
+     * @note we are currently using phosphor-icons, type: bold, per design
+     * @example 'ph-bold ph-acorn'
+     * @tutorial
+     * - include the following script in the index.html of your app -
+     * ```html
+     * <script src="https://unpkg.com/@phosphor-icons/web"></script>
+     * ```
+     * - Setting the font-size for an icon automatically sets the height & width to match, which helps when aligning icons in a column or row.
+     * @see {@link [Phosphor Icons: Bold](https://phosphoricons.com/?weight=%22bold%22)}
+    */
+    iconClass?: string;
+    /**
+     * Subnode route url
+    */
+    route?: string;
+}
+export {};

package/lib/navigation/components/sof-navigation-panel/models/nav-panel-settings.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Navigation panel settings
+*/
+export interface NavPanelSettings {
+    /**
+     * Can we collapse/expand the nav panel on desktop
+     * @note on mobile you always can.
+     * @default true
+    */
+    allowNavToggle?: boolean;
+    /**
+     * To show the login/logout button
+     * @default false
+    */
+    showAuthButton?: boolean;
+    /**
+     * To show the language settings button
+     * @default false
+    */
+    showLanguageButton?: boolean;
+    /**
+     * To show the whats new button
+     * @default false
+    */
+    showWhatsNewButton?: boolean;
+}

package/lib/navigation/components/sof-navigation-panel/sof-nav-panel.component.d.ts

@@ -0,0 +1,82 @@
+import { AfterViewInit, ElementRef, EventEmitter, OnInit, Signal, WritableSignal } from '@angular/core';
+import { BreakpointState } from '@angular/cdk/layout';
+import { NavPanelNode } from './models/nav-panel-nodes';
+import { NavPanelSettings } from './models/nav-panel-settings';
+import * as i0 from "@angular/core";
+/**
+ * The Navigation Panel Component - WIP
+ * @description Main navigation panel for Portals, part of the new Portal UI-shell.
+ * @todo `header` some adjustments will be needed depending on the new Header design, like the toggle button & mobile.
+ * @see [Figma/portal-ui-shell]({@link https://www.figma.com/design/W5HVNCcN9HafDRvc5N7Z28/%5BWIP%5D-Softheon-Unified-Design-System-v1.0?node-id=14089-118395&t=G5IKDvYHpwU0vOFq-0}) _- header design to the right of nav panel design_
+ * @todo `language settings` - awaiting design ( its own component, modal )
+ * @see [Figma/language-switcher]({@link https://www.figma.com/design/W5HVNCcN9HafDRvc5N7Z28/%5BWIP%5D-Softheon-Unified-Design-System-v1.0?node-id=14089-118249&t=qMyPFk9iMfbU6iRS-0})
+ * @todo `mobile styling` - awaiting design
+ * @todo `whats new` - awaiting design ( its own component, modal )
+ * @note _this component should need 2 data points when the 'what's new' flow is implemented_ -
+ * - does the user have unread release notes? - if so style the button appropriately
+ * - what is the current version? - to display on badge
+*/
+export declare class SofNavPanelComponent implements OnInit, AfterViewInit {
+    /**
+     * Component Input (required) - Navigation node data
+     * @see {@link NavPanelNode}
+    */
+    nodes: Array<NavPanelNode>;
+    /**
+     * Component Input - Basic navigation settings
+     * @see {@link NavPanelSettings}
+     * @note If any or all settings are not passed, defaults will be set.
+     * @see {@link initSettings()}
+    */
+    settings?: NavPanelSettings;
+    /**
+     * Component Input - Current language to display
+     * @see {@link [Figma/language-switcher](https://www.figma.com/design/W5HVNCcN9HafDRvc5N7Z28/%5BWIP%5D-Softheon-Unified-Design-System-v1.0?node-id=14089-118249&t=qMyPFk9iMfbU6iRS-0)}
+    */
+    currentLanguage: string;
+    /** Nav panels footer element reference */
+    navPanelFooter: ElementRef<HTMLElement>;
+    /** Emit this event to show the whats new modal */
+    showWhatsNewEvent: EventEmitter<void>;
+    /** Emit this event to show the language settings modal */
+    showLanguageEvent: EventEmitter<void>;
+    /** Utility for checking the matching state of media queries.*/
+    private breakpointObserver;
+    /** Has the small screen breakpoint been hit */
+    isSmallScreen: Signal<BreakpointState>;
+    /** Inject the auth service */
+    private authorizationService;
+    /**
+     * How much padding-bottom.px to add, depending on footer content/height
+     * @default 40
+    */
+    footerSpacePadding: WritableSignal<number>;
+    /** On Init - Initialize the settings */
+    ngOnInit(): void;
+    /** After View Init - Set the footer space */
+    ngAfterViewInit(): void;
+    /**
+     * Initializes the nav panel settings, defaults will be set if `null` or `undefined`
+     * @note The 'nullish coalescing assignment operator' `??=` assigns defaults for `boolean` and `number` types,
+     * for `number` types this will allow for `0` to be accepted. For a `string`, use 'logical OR assignment' `||=` operator,
+     * as this will also prevent empty strings `" "`.
+     * @see `??=` {@link [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_assignment#using_nullish_coalescing_assignment)}
+     * @see `||=` {@link [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR_assignment#try_it)}
+    */
+    private initSettings;
+    /**
+     * Calculate the padding based on the footer height depending on how many buttons are present
+     * @note If no buttons, the footer is removed and the default padding is returned
+     * @returns `padding: number` the number of pixels to add to the `<nav>` elements `[style.paddingBottom.px]`
+     * @default 40
+    */
+    private calcFooterSpacePadding;
+    /** Logs out the user, only logout is needed for portals as they have there own login page */
+    logout(): void;
+    /** Emits event to show the language settings modal */
+    showLanguageSettings(): void;
+    /** Emits event to show the whats new modal */
+    showWhatsNew(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SofNavPanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SofNavPanelComponent, "sof-nav-panel", never, { "nodes": { "alias": "nodes"; "required": true; }; "settings": { "alias": "settings"; "required": false; }; "currentLanguage": { "alias": "currentLanguage"; "required": false; }; }, { "showWhatsNewEvent": "showWhatsNewEvent"; "showLanguageEvent": "showLanguageEvent"; }, never, ["[sof-nav-panel-main-content]"], true, never>;
+}

package/lib/navigation/navigation-api.d.ts

@@ -4,8 +4,11 @@ export * from './models/navigation';
 export * from './models/nav.settings';
 export * from './models/nav-theme.settings';
 export * from './models/breadcrumb';
-export * from './components/side-navigation/navigation.component';
+export * from './components/sof-navigation-panel/models/nav-panel-nodes';
+export * from './components/sof-navigation-panel/models/nav-panel-settings';
+export * from './components/navigation/navigation.component';
 export * from './components/sof-breadcrumbs/sof-breadcrumbs-hierarchy/sof-breadcrumbs-hierarchy.component';
 export * from './components/sof-breadcrumbs/sof-breadcrumbs-history/sof-breadcrumbs-history.component';
 export * from './components/sof-tabs-navigation/sof-tabs.component';
 export * from './components/sof-sub-navigation/sof-sub-navigation.component';
+export * from './components/sof-navigation-panel/sof-nav-panel.component';

package/lib/navigation/navigation.module.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./components/side-navigation/navigation.component";
+import * as i1 from "./components/navigation/navigation.component";
 import * as i2 from "./components/sof-breadcrumbs/sof-breadcrumbs-hierarchy/sof-breadcrumbs-hierarchy.component";
 import * as i3 from "./components/sof-breadcrumbs/sof-breadcrumbs-history/sof-breadcrumbs-history.component";
 import * as i4 from "./components/sof-tabs-navigation/sof-tabs.component";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@softheon/armature",
-  "version": "17.12.7",
+  "version": "17.13.1",
   "dependencies": {
     "tslib": "^2.5.0"
   },