@3ddv/software-division-components 1.0.0-alpha.3.9 → 1.0.0-alpha.4

package/README.md

@@ -1,14 +1,14 @@
-# Software Division Components
+# **Software Division Components**
 
-## Overview
+## **Overview**
 
 ![Angular Badge](https://img.shields.io/badge/Angular-18.2.13-dd0031?logo=angular&style=for-the-badge)
 ![PrimeNG Badge](https://img.shields.io/badge/PrimeNG-18.0.2-034efc?logo=primeng&style=for-the-badge)
 ![Storybook Badge](https://img.shields.io/badge/Storybook-8.4.5-ff4785?logo=storybook&style=for-the-badge)
 
-The Software Division Components library is a wrapper around the [PrimeNG](https://v18.primeng.org/installation) component library that provides extra functionality based on common needs within the Software Division department applications. It also uses [Angular](https://v18.angular.dev/) and [Storybook](https://storybook.js.org/).
+The Software Division Components library is a wrapper around the [PrimeNG](https://v18.primeng.org/installation) component library. It enhances PrimeNG components by providing additional functionality tailored to the common requirements of applications developed within the Software Division department. It also uses [Angular](https://v18.angular.dev/) for application development and [Storybook](https://storybook.js.org/) for interactive component documentation and testing.
 
-## Installation
+## **Installation**
 
 To install the library, use npm:
 
@@ -16,88 +16,216 @@ To install the library, use npm:
  npm install @3ddv/software-division-components
 ```
 
-## Usage
+## **Reporting issues**
+
+> **Note: This is a temporary workflow for reporting issues. As the usage of the library increases, we will reassess and scale the issue reporting system accordingly.**
+
+To report an issue, please visit [the following ticket](https://mmcbcn.atlassian.net/browse/TICKETING-598) and create a **Bug** ticket. Ensure that your report includes a clear and detailed description of the issue you are encountering..
+
+## **Project summary**
+
+The source folder of this project contains multiple subfolders. Below are the most important ones:
+
+- **Backoffice**
+  This folder contains components that are **exclusive to the backoffice setting**, such as tables or sidebars. These components do **not** receive any styling from the theme class passed on initialization (be it `generic` or `backoffice`).
+
+  Some components from the Generic folder can also be used in the backoffice, but in such cases, the backoffice theme must be passed to the library provider. This ensures that no additional styles are applied, keeping the default PrimeNG design intact.
+
+- **DVM**
+  This folder includes components specific to applications that use **DVM**. Many of these components share both style and functionality, and this module is designed to **maximize reusability**. Examples include the **section navigator buttons** and the **minimap**.
+
+- **Generic**
+  This folder contains components which can be used in **any** setting. The appearance of these components relies heavily on the parameter that is passed to the library provider (generic or backoffice).
+
+- **Shared**
+  This folder contains **initialization methods, directives and shared utilities, which are exposed to the library API**, like methods to aid with the usage of the library or debugging of the library.
+
+- **Utils**
+  This folder contains **internal tools** which can also be shared across the library, but this is more directed to functions used by the developer to **streamline processes and reuse common logic**.
+
+## **Common library errors**
+
+**❌ Error: `Invalid CSS class string found on ...`**
+
+This indicates that the `stylesClasses` input that you provided to the component does not have a valid format.
+
+**✅ Solution:**
+Ensure that the value assigned to `styleClasses` follows the correct format as documented in the respective component's guidelines.
+
+If the issue persists, refer to the documentation or check for any unintended modifications in the `styleClasses` input.
+
+---
+
+> Any future errors will be documented here
+
+---
+
+## **How to use the library from the consuming application**
 
 ### Theming and styling
 
-This library is a wrapper to an already existing component library, so there are some styles which are already present in all the components. These styles are kept intact whenever the `backoffice` theme parameter is passed. You also have the option of passing the `generic` parameter, which in turn makes the component align to the design that several ticketing applications share. You can check that design [here](https://xd.adobe.com/view/0ea7033e-8fdf-4fcd-8215-546d1df20d37-5bf4/) and [here](https://xd.adobe.com/view/c640d5a1-b5d3-4379-8684-fb860f95f052-9313/grid).
+This library is a wrapper to an already existing component library (PrimeNG), which means that there are some styles that are already present in all the exported components. These styles are kept intact whenever the `backoffice` theme parameter is passed to the `provideSdc` method. You also have the option of passing the `generic` parameter, which in turn makes the component align to the design that several ticketing applications share. If no parameter is passed, the `generic` is assigned as a fallback option. You can check that design [here](https://xd.adobe.com/view/0ea7033e-8fdf-4fcd-8215-546d1df20d37-5bf4/), [here](https://xd.adobe.com/view/c640d5a1-b5d3-4379-8684-fb860f95f052-9313/grid) and [here](https://xd.adobe.com/view/50a2d5c5-e2e1-413f-b7a5-8f3d61c88026-05f1/screen/65dee679-9942-4a63-b790-40e3b1fec39b/).
 
-Styling components works as if you were styling a usual HTML element. Every component has a `styleClasses` input which accepts a single or several whitespace-separated CSS class/classes declared within the using application.
+Styling components consist of passing down CSS classes that consist of PrimeNG variables. Go by as if you were styling a common HTML element. Every component has a `styleClasses` input which accepts a single or several whitespace-separated CSS class/classes declared within the using application. To see the variables that each component has, please check the official PrimeNG documentation per each component. Here you can see an example for the (button component)[https://primeng.org/button]. The column _Variable_ includes every single class that you can use within the your CSS classes which you will later pass into the library button to style it. The result looks as follows:
 
 ```css
 .my-class {
-  background-color: red;
+  --p-button-primary-background: red;
 }
 ```
 
-```typescript
- <sdc-button
-  styleClasses='my-class'
- ></sdc-button>
+```html
+<sdc-button styleClasses="my-class"></sdc-button>
+```
+
+#### Specifity issues
+
+If you are facing any specifity problems, each component also has an ID reference so you can later add them on your styles composition, giving advantage to the specifity algorithm to prioritize your styles:
 
+```css
+#sdc-button.my-class {
+  --p-button-primary-background: red;
+}
 ```
 
-Styles will pierce through the PrimeNG layer and directly style the underlying HTML element. If you are facing any problem styling any component, please check the [official PrimeNG documentation on theming](https://v18.primeng.org/theming) or the individual webpage for styling each component [as in this example for the button component](https://v18.primeng.org/button).
+#### Encapsulation issues
 
-### Importing the library
+Most of the time you will be declaring your styles with a CSS file declared within the component scope (my-component.component.css) and later import it with _styleUrl_ or _stylesUrl_ in your component. In that scenario, you will be dealing with the default (component View Encapsulation)[https://angular.dev/guide/components/styling] setting, which does not allow a parent component to apply styles to the child component. This brings a problem when it comes to passing down CSS classes to the library components. Following similar practices from other component librareis, we bring the option to bypass View Encapsulation for a certain CSS class by declaring your classes with a pseudo-class selector:
 
-#### Setting a theme
+Depending on the Encapsulation option that you are using in your component, some styles will not apply. In that scenario, declare the style as follows:
 
-```ts
-import { ApplicationConfig } from '@angular/core';
-import { provideSdComponentsTheme } from '@3ddv/software-division-components';
+```css
+::ng-deep.my-class {
+  --p-button-primary-background: red;
+}
+```
 
-export const appConfig: ApplicationConfig = {
-  // this can be generic or backoffice
-  providers: [provideSdComponentsTheme({ theme: 'generic' })],
-};
+You also have the option with SCSS to nest:
+
+```css
+::ng-deep {
+  &.my-class-1 {
+    --p-button-primary-background: red;
+  }
+  &.my-class-2 {
+    --p-button-primary-background: green;
+  }
+
+  &.my-class-3 {
+    --p-button-primary-background: blue;
+  }
+}
 ```
 
-#### Import from main entry
+Or declare the style in your root stylesheet to avoid any view encapsulation to affect your custom styles. (not recommended)
 
-```typescript
-import { TableComponent, ButtonComponent } from '@3ddv/software-division-components';
+#### Several styleClasses inputs
+
+Some components are composed of several underlying components, so a single `styleClass` input will not be enough. For those scenarios, some components require the `styleClasses` paramater to be composed of an object, with each key targetting different parts of the component:
+
+```html
+<sdc-neighbours
+  [currentSection]="..."
+  [sectionsMmcToTdc]="..."
+  [neigboursData]="..."
+  [styleClasses]=`{
+    sideButtonsClass: 'mock-side-button',
+    middleDivClass: 'mock-middle-div'
+  }`
+></sdc-neighbours>
 ```
 
-#### Import from secondary entry
+With this method, we are able to apply certain styles for the buttons on the sides ( with `sideButtonsClass`) and a different one for the `div` on the middle of the component template (with `middleDivClass`).
 
-```typescript
-import { ButtonComponent } from '@3ddv/software-division-components/generic/button';
+Styles will pierce through the PrimeNG layer and directly style the underlying HTML element. If you are facing any problem styling any component, please check the [official PrimeNG documentation on theming](https://v18.primeng.org/theming) or the individual webpage for styling each component [as in this example for the button component](https://v18.primeng.org/button).
+
+### What if I'm using Tailwind in my application?
+
+Tailwind does reset most of the styles that any other third party app is applying, so PrimeNG styles will be overriden. In that scenario, the component library exposes several layers to scope this overriding as much as posible. If you are using Tailwind, declare the Tailwind reset as follows in your root stylesheet:
+
+```css
+@layer tailwind-base {
+  @tailwind base;
+  @tailwind components;
+}
+
+@tailwind utilities;
 ```
 
-## **Reporting issues**
+TODO: DOCUMENT TAILWIND OPTION
 
-> **This is a temporary workflow to report issues until the usage of the library grows and we find ourselves in the need to scale this issue reporting system.**
+### Passing inputs to components that have a lot of props
 
-To report an issue, please visit [the following ticket](https://mmcbcn.atlassian.net/browse/TICKETING-598) and open a Bug ticket with a clear description of the issue you are facing.
+Besides all the documented inputs that components have, some components also have the option to pass all components in an object to end up with a more concise template markup, instead of using individual bindings.
 
-## **Project summary**
+> The components that provide this functionality are usually the ones that have a more direct representation within PrimeNG, as this is intended to solve the polution that the library creates due to it having so many inputs. An example would be the **ButtonComponent**.
 
-This project source folder contains multiple folders, the most important are the following:
+This is the old markup:
 
-- **Backoffice**
-  This folder contains components that are exclusive to the backoffice setting, such as tables or sidebars. These components do not receive any styling from the theme class passed on initialization (be it `generic` or `backoffice`). There are some components in the Generic folder which can also be used in the backoffice, but please do so by passing the `backoffice` theme to the library provider. The `backoffice` parameter tells the system to not apply any styles to the components, keeping the design to the one PrimeNG already has by default.
+```html
+<sdc-button
+  type="button"
+  label="Hover to trigger"
+  ariaLabel="Hover to trigger"
+  tooltip="You triggered the tooltip"
+  tooltipPos="right"
+  severity="primary"
+  styleClasses="tooltip-padding" />
+```
 
-- **DVM**
-  This folder contains components that are exclusive to an application that uses DVM. There are a lot of components that are common both in style and functionality, and this module aims to reuse those as much as posible. Some examples of these components are the section navigator buttons or the minimap.
+And this is the example with the configuration object:
 
-- **Generic**
-  This folder contains components which can be used in any setting. The appearance of these components relies heavily on the parameter that is passed to the library provider (generic or backoffice).
+```ts
+import { ButtonProps } from '@3ddv/software-division-components';
 
-- **Shared**
-  This folder contains initialization methods, directives and other methods to aid with the usage and debugging of the library.
+class MyComponent {
+  // You can of course declare, this where it better suits your use case
+  protected props = {
+    type: 'button',
+    label: 'Hover to trigger',
+    ariaLabel: 'Hover to trigger',
+    severity: 'primary',
+    tooltip: 'You triggered the tooltip',
+    tooltipPos: 'right',
+    styleClasses: 'tooltip-padding',
+  } satisfies ButtonProps;
+}
+```
 
-- **Utils**
-  This folder contains internal tools which can also be shared across the library, but this is more directed to functions used by the developer to streamline processes and reuse common logic.
+And the resulting HTML:
+
+```html
+<sdc-button [props]="{props}" />
+```
+
+### Importing the library
+
+#### Providing the library to the application
+
+```ts
+import { ApplicationConfig } from '@angular/core';
+import { provideSdc } from '@3ddv/software-division-components';
+
+export const appConfig: ApplicationConfig = {
+  // this provides the consuming app with all necessary modules
+  // to make it work
+  providers: [provideSdc({ theme: 'generic' })],
+};
+```
 
-### Common @3ddv/software-division-components errors
+#### Import from main entry
 
-#### Error console `Invalid CSS class string found on ...`
+```ts
+import { TableComponent, ButtonComponent } from '@3ddv/software-division-components';
+```
 
-This indicates that the `stylesClasses` input that you provided to the component does not have a valid format. Please make sure
-to adhere to a valid format documented in the component.
+#### Import from secondary entry
 
-## **How to collaborate**
+```ts
+import { ButtonComponent } from '@3ddv/software-division-components/generic/button';
+```
+
+## **How to collaborate to the library as a developer**
 
 ### Semantic versioning
 
@@ -136,8 +264,6 @@ If the commit message does not adhere to the Conventional Commits format, Commit
 
 - Rinse and repeat.
 
-## **How to document your changes**
-
 ### Documenting component files
 
 When documenting your code changes, we use JSDoc to ensure that all JavaScript functions and components are described comprehensively. This helps maintain clarity and understandability throughout the codebase.
@@ -177,12 +303,132 @@ export class ButtonComponent extends Button {
    */
   public handleClick(event: MouseEvent): void {
     // Implementation should document any steps that cannot be easily explained
-    // with variable names. Another scenario might be on documenting why things
+    // with variable names. Another scenario on why you would add comments includes documenting why things
     // are done the way they are done (there might be some framework or language limitation).
   }
 }
 ```
 
+### Internally overriding PrimeNG styles with component scope
+
+> First of all, we would like to clarify that this is a different feature from the previously mentioned `styleClasses` feature. Style classes are thought of as a styling interface for the users of the library. This feature is to be used for developers working on component development and wanting to override any styles of PrimeNG components, so custom components adhere to the styling required.
+
+In some cases, specially if we are developing a component placed within the `generic` scope, we will need to override any required native styles from PrimeNG to be able to adhere to the design provided by our design team.
+
+PrimeNG provides us with a tool called [Design Tokens](https://v18.primeng.org/theming), which consists of a CSS-in-JS solution that composes a nested object which targets several styles of each component. Here is an example corresponding to the Neighbours component:
+
+```ts
+// Import types from PrimeNG module
+import { ButtonDesignTokens } from '@primeng/themes/types/button';
+
+// Create an export an object which will later by used in neighbours.components.ts
+export const sideButtonTokens = {
+  root: {
+    primary: {
+      // Overwrite the theme  variables with PrimeNG existing variables
+      // Button text
+      color: '',
+      borderColor: '{zinc.50}',
+      hoverColor: '',
+      activeColor: '',
+      // Button background
+      background: '{zinc.50}',
+      hoverBackground: '{zinc.50}',
+      activeBackground: '{zinc.50}',
+      // Button border
+      activeBorderColor: '{zinc.50}',
+      hoverBorderColor: '{zinc.50}',
+    },
+  },
+} satisfies ButtonDesignTokens;
+```
+
+And we pass in the styles within the component template
+
+```ts
+import { sideButtonTokens } from './styles/side-button.tokens';
+....
+export class NeighboursComponent {
+  ...
+    protected readonly sideButtonStyle = sideButtonTokens;
+  ...
+}
+```
+
+Template example:
+
+```html
+<!-- [dt] is a default input which is present in all components to declare PrimeNG design tokens -->
+<sdc-button [dt]="sideButtonStyle" />
+```
+
+This way, we accomplished adhering to the styling that this component needed, which brings this result:
+
+<div style="display: flex; align-items: center; gap: 20px;">
+  <div style="text-align: center;">
+    <p>Before Styling</p>
+    <img src="./projects/software-division-components/public/neighbours-before.png" alt="Before styling neighbours." width="300">
+  </div>
+  <div style="text-align: center;">
+    <p>After Styling</p>
+    <img src="./projects/software-division-components/public/neighbours-after.png" alt="After styling neighbours." width="300">
+  </div>
+</div>
+
+### Styling native HTML elements
+
+For styling native HTML elements in our project, we adhere to the **Block-Element-Modifier (BEM)** methodology. This ensures that our styles remain modular, maintainable, and predictable.
+
+#### Guidelines for Using BEM
+
+- **Use BEM for anything that is not a design token.**
+
+  - Design tokens (e.g., colors, typography, spacing) should be handled via variables, custom properties, or a design system, not through BEM class names.
+
+- **Use design tokens for everything that involves styling a native PrimeNG component.**
+
+  - PrimeNG components already use design tokens, so we must align with them instead of defining custom BEM classes.
+
+- **Native HTML elements must always be styled using BEM classes.**
+  - Avoid styling elements directly by tag selectors (e.g., button {} or input {}), as this can lead to specificity conflicts and unintended side effects.
+- **Structure your class names properly:**
+  - Use meaningful blocks that represent standalone components.
+  - Define elements as child parts of blocks.
+  - Use modifiers to indicate variations in style or behavior.
+
+By following this approach, we ensure that:
+
+- Styles are reusable and scoped properly.
+- We avoid unnecessary global overrides.
+- We maintain consistency across the project.
+- PrimeNG components remain compatible with design tokens.
+
+Any further information regarding the BEM methodology can be found through the following links:
+
+- https://css-tricks.com/bem-101/
+- https://getbem.com/introduction/
+- https://stackoverflow.com/questions/36703546/what-is-bem-methodology
+- https://gauravmahlawat.github.io/online-bem-generator.html#google_vignette
+
+#### Why are we not internally using Tailwind or SCSS?
+
+###### Why no Tailwind?
+
+We are not internally using Tailwind because this project has the intention of having a long lifespan, we do not want to introduce an extra dependency that could cause compatibility issues with PrimeNG, Angular, and Storybook.
+Since our project already relies on component libraries that define their own styles and classes, Tailwind’s utility-based approach could lead to conflicts and unnecessary complexity. For all we know, Tailwind is more likely to not be that popular in the near future than native CSS :).
+
+However, we have included in the roadmap the ability to pass Tailwind classes within the `styleClasses` prop, present in most components so you can use Tailwind from your consuming application.
+
+###### Why no SCSS?
+
+We are not using SCSS because modern CSS now provides most of SCSS’s features natively.
+With CSS evolving rapidly (e.g., CSS variables, nesting, container queries, @layer, @scope, and :has()), there is little need for a preprocessor like SCSS.
+Additionally, relying on native CSS ensures:
+
+- Better browser compatibility.
+- No build-step dependencies.
+- Future-proof styling that aligns with upcoming CSS standards.
+
 ### Properly exporting a newly added component
 
 Whenever a newly added component is added, do not forget to add a secondary entrypoint to be able to uniquely import that component in the consuming app:

package/backoffice/table/directives/table.directive.d.ts

@@ -0,0 +1,10 @@
+import { Table } from 'primeng/table';
+import { TableComponent } from '../table.component';
+import * as i0 from "@angular/core";
+export declare class TableDirective {
+    private primeTable;
+    constructor(primeTable: Table, sdcTable: TableComponent);
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableDirective, [null, { optional: true; host: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TableDirective, "p-table", never, {}, {}, never, never, true, never>;
+}
+//# sourceMappingURL=table.directive.d.ts.map

package/backoffice/table/directives/table.directive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.directive.d.ts","sourceRoot":"","sources":["../../../../projects/software-division-components/src/backoffice/table/directives/table.directive.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;;AAEpD,qBAIa,cAAc;IAEvB,OAAO,CAAC,UAAU;gBAAV,UAAU,EAAE,KAAK,EACL,QAAQ,EAAE,cAAc;yCAHnC,cAAc;2CAAd,cAAc;CAgF1B"}

package/backoffice/table/table.component.d.ts

@@ -1,25 +1,37 @@
-import { OnInit } from '@angular/core';
+import { OnInit, TemplateRef } from '@angular/core';
 import { MenuItem } from 'primeng/api';
 import { Table } from 'primeng/table';
 import { ObjectColumnData } from './types';
 import * as i0 from "@angular/core";
-export declare function tableFactory(tableComponent: TableComponent): Table;
+/**
+ * A customizable table component built on PrimeNG's Table.
+ *
+ * This component extends the PrimeNG Table by introducing additional configurations and styling
+ * capabilities. It supports defining column data, enabling sorting, exporting data, and integrating
+ * context menu options for enhanced user interactions. Additionally, the component allows for dynamic
+ * styling through custom CSS classes and leverages Angular's standalone component pattern with OnPush
+ * change detection for performance optimization.
+ *
+ * @since 1.0.0-alpha.2
+ * @updated 1.0.0-alpha.2
+ */
 export declare class TableComponent extends Table implements OnInit {
-    primengTable: Table;
+    props: import("@angular/core").InputSignal<typeof Table | undefined>;
     /**
      * Single string or whitespace-separated string of additional style classes for the button.
      * Only accepts valid whitespace-separated class names.
      */
-    styleClasses: import("@angular/core").InputSignalWithTransform<string, string>;
+    styleClasses: import("@angular/core").InputSignalWithTransform<string | Record<string, string>, string | Record<string, string>>;
     columnData: import("@angular/core").InputSignal<ObjectColumnData[]>;
     sortable: import("@angular/core").InputSignal<boolean | undefined>;
     export: import("@angular/core").InputSignal<boolean | undefined>;
     exportButtonLabel: import("@angular/core").InputSignal<string>;
     contextMenuOptions: import("@angular/core").InputSignal<MenuItem[] | undefined>;
     projectedElementIdArray: import("@angular/core").InputSignal<string[] | undefined>;
+    customRowTemplate?: TemplateRef<any>;
     protected selectedRow: (typeof this.value)[number];
     protected cb(event: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TableComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TableComponent, "sdc-table", never, { "styleClasses": { "alias": "styleClasses"; "required": false; "isSignal": true; }; "columnData": { "alias": "columnData"; "required": true; "isSignal": true; }; "sortable": { "alias": "sortable"; "required": false; "isSignal": true; }; "export": { "alias": "export"; "required": false; "isSignal": true; }; "exportButtonLabel": { "alias": "exportButtonLabel"; "required": false; "isSignal": true; }; "contextMenuOptions": { "alias": "contextMenuOptions"; "required": false; "isSignal": true; }; "projectedElementIdArray": { "alias": "projectedElementIdArray"; "required": false; "isSignal": true; }; }, {}, never, ["*", "*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TableComponent, "sdc-table", never, { "props": { "alias": "props"; "required": false; "isSignal": true; }; "styleClasses": { "alias": "styleClasses"; "required": false; "isSignal": true; }; "columnData": { "alias": "columnData"; "required": true; "isSignal": true; }; "sortable": { "alias": "sortable"; "required": false; "isSignal": true; }; "export": { "alias": "export"; "required": false; "isSignal": true; }; "exportButtonLabel": { "alias": "exportButtonLabel"; "required": false; "isSignal": true; }; "contextMenuOptions": { "alias": "contextMenuOptions"; "required": false; "isSignal": true; }; "projectedElementIdArray": { "alias": "projectedElementIdArray"; "required": false; "isSignal": true; }; }, {}, ["customRowTemplate"], never, true, never>;
 }
 //# sourceMappingURL=table.component.d.ts.map

package/backoffice/table/table.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.component.d.ts","sourceRoot":"","sources":["../../../projects/software-division-components/src/backoffice/table/table.component.ts"],"names":[],"mappings":"AACA,OAAO,EAA6C,MAAM,EAAa,MAAM,eAAe,CAAC;AAG7F,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAIvC,OAAO,EAAE,KAAK,EAA6B,MAAM,eAAe,CAAC;AAGjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;;AAE3C,wBAAgB,YAAY,CAAC,cAAc,EAAE,cAAc,SAQ1D;AACD,qBAkBa,cAAe,SAAQ,KAAM,YAAW,MAAM;IACL,YAAY,EAAG,KAAK,CAAC;IAEzE;;;OAGG;IACI,YAAY,mEAA+E;IAC3F,UAAU,0DAAwC;IAClD,QAAQ,2DAAoB;IAC5B,MAAM,2DAAoB;IAC1B,iBAAiB,8CAA2B;IAC5C,kBAAkB,8DAAuB;IACzC,uBAAuB,4DAAqB;IAEnD,SAAS,CAAC,WAAW,EAAE,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;IAEnD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG;yCAjBZ,cAAc;2CAAd,cAAc;CAkB1B"}
+{"version":3,"file":"table.component.d.ts","sourceRoot":"","sources":["../../../projects/software-division-components/src/backoffice/table/table.component.ts"],"names":[],"mappings":"AACA,OAAO,EAA6C,MAAM,EAAE,WAAW,EAA2B,MAAM,eAAe,CAAC;AACxH,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAIvC,OAAO,EAAE,KAAK,EAA6B,MAAM,eAAe,CAAC;AAKjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;;AAE3C;;;;;;;;;;;GAWG;AACH,qBAkBa,cAAe,SAAQ,KAAM,YAAW,MAAM;IAClD,KAAK,gEAAyB;IACrC;;;OAGG;IACI,YAAY,qHAA+E;IAC3F,UAAU,0DAAwC;IAClD,QAAQ,2DAAoB;IAC5B,MAAM,2DAAoB;IAC1B,iBAAiB,8CAA2B;IAC5C,kBAAkB,8DAAuB;IACzC,uBAAuB,4DAAqB;IAEhB,iBAAiB,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;IAExE,SAAS,CAAC,WAAW,EAAE,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;IAEnD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG;yCAlBZ,cAAc;2CAAd,cAAc;CAmB1B"}

package/backoffice/table/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../projects/software-division-components/src/backoffice/table/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAExC,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;AAEjE,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;AAErD,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AACxD,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,UAAU,CAAC;IAEjB,IAAI,EAAE,GAAG,EAAE,CAAC;CACb;AACD,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,mBAAmB,CAAC;CAC/B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../projects/software-division-components/src/backoffice/table/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAE7C,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;AAEjE,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;AAErD,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AACxD,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,UAAU,CAAC;IAEjB,IAAI,EAAE,GAAG,EAAE,CAAC;CACb;AACD,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,mBAAmB,CAAC;CAC/B"}

package/dvm/neighbours/index.d.ts

@@ -0,0 +1,2 @@
+export * from './public-api';
+//# sourceMappingURL=index.d.ts.map

package/dvm/neighbours/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../projects/software-division-components/src/dvm/neighbours/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dvm/neighbours/neighbours.component.d.ts

@@ -0,0 +1,124 @@
+import { DirectionObjectKeys, NeighboursStyleClasses } from './types';
+import * as i0 from "@angular/core";
+/**
+ * Component used to navigate between neighbouring sections.
+ *
+ * It determines the next and previous available sections based on predefined mappings
+ * and emits navigation events when users attempt to move between them.
+ *
+ * @since 1.0.0-alpha.2
+ * @updated 1.0.0-alpha.2
+ */
+export declare class NeighboursComponent {
+    /**
+     * Predefined styles for the side button.
+     */
+    protected readonly sideButtonStyle: {
+        root: {
+            primary: {
+                color: string;
+                borderColor: string;
+                hoverColor: string;
+                activeColor: string;
+                background: string;
+                hoverBackground: string;
+                activeBackground: string;
+                activeBorderColor: string;
+                hoverBorderColor: string;
+            };
+        };
+    };
+    /**
+     * The current section identifier.
+     */
+    currentSection: import("@angular/core").InputSignal<string>;
+    /**
+     * Mapping of MMC section IDs to TDC section IDs.
+     */
+    sectionsMmcToTdc: import("@angular/core").InputSignal<Record<string, string>>;
+    /**
+     * Mapping of TDC section IDs to MMC section IDs.
+     */
+    sectionsTdcToMmc: import("@angular/core").InputSignal<Record<string, string>>;
+    /**
+     * Data structure defining neighboring relationships between sections.
+     */
+    neigboursData: import("@angular/core").InputSignal<Record<string, Record<DirectionObjectKeys, string>>>;
+    /**
+     * Icon for the next navigation button.
+     */
+    nextIcon: import("@angular/core").InputSignal<string>;
+    /**
+     * Icon for the previous navigation button.
+     */
+    previousIcon: import("@angular/core").InputSignal<string>;
+    /**
+     * Flag indicating whether navigation is restricted to available sections only.
+     * This requires the sectionsAvailability input to be passed, otherwise the initialization of
+     * the component will fail.
+     */
+    onlyNavigateToAvailable: import("@angular/core").InputSignal<boolean | undefined>;
+    /**
+     * Object defining the availability of sections. Required if you are wanting to allow navigation
+     * to available sections only.
+     */
+    sectionsAvailability: import("@angular/core").InputSignal<Record<string, any>>;
+    /**
+     * Custom styling classes for the component.
+     */
+    styleClasses: import("@angular/core").InputSignalWithTransform<NeighboursStyleClasses, NeighboursStyleClasses>;
+    /**
+     * Event emitter for section navigation.
+     */
+    sectionToNavigate: import("@angular/core").OutputEmitterRef<string>;
+    /**
+     * The ID of the previous available section.
+     */
+    protected previousAvailableSectionId: import("@angular/core").WritableSignal<string | null>;
+    /**
+     * The ID of the next available section.
+     */
+    protected nextAvailableSectionId: import("@angular/core").WritableSignal<string | null>;
+    /**
+     * Constant representing the absence of a neighboring section.
+     */
+    private NO_NEIGHBOUR_VALUE;
+    /**
+     * Key mappings for neighboring sections.
+     */
+    private neighboursKeys;
+    /**
+     * Key mappings for navigation directions.
+     */
+    private keyMapping;
+    constructor();
+    /**
+     * Handles navigation button clicks. Emits the new section identificator to navigate to.
+     * @param  goTo - The direction to navigate.
+     * @throws  If there is no valid section to navigate to.
+     */
+    onClick(goTo: 'prev' | 'next'): void;
+    /**
+     * Retrieves the TDC section ID based on the navigation direction.
+     * @param  direction - The navigation direction.
+     * @returns  The section ID to navigate to, or null if unavailable.
+     */
+    private getTdcIdFromDirection;
+    /**
+     * Determines and sets the available section for navigation in the specified direction.
+     * @param type - The navigation direction.
+     * @param [currentSection] - The current section ID (optional).
+     * @throws If navigation is restricted and sectionsAvailability is not provided.
+     */
+    private findAndSetAvailableSection;
+    /**
+     * Sets the previous or next section values to the passed value
+     *
+     * @param type - The navigation direction.
+     * @param value - Value to set to either previous or next available section
+     */
+    private setAvailableSection;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NeighboursComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NeighboursComponent, "sdc-neighbours", never, { "currentSection": { "alias": "currentSection"; "required": true; "isSignal": true; }; "sectionsMmcToTdc": { "alias": "sectionsMmcToTdc"; "required": true; "isSignal": true; }; "sectionsTdcToMmc": { "alias": "sectionsTdcToMmc"; "required": true; "isSignal": true; }; "neigboursData": { "alias": "neigboursData"; "required": true; "isSignal": true; }; "nextIcon": { "alias": "nextIcon"; "required": false; "isSignal": true; }; "previousIcon": { "alias": "previousIcon"; "required": false; "isSignal": true; }; "onlyNavigateToAvailable": { "alias": "onlyNavigateToAvailable"; "required": false; "isSignal": true; }; "sectionsAvailability": { "alias": "sectionsAvailability"; "required": false; "isSignal": true; }; "styleClasses": { "alias": "styleClasses"; "required": false; "isSignal": true; }; }, { "sectionToNavigate": "sectionToNavigate"; }, never, never, true, never>;
+}
+//# sourceMappingURL=neighbours.component.d.ts.map

package/dvm/neighbours/neighbours.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"neighbours.component.d.ts","sourceRoot":"","sources":["../../../projects/software-division-components/src/dvm/neighbours/neighbours.component.ts"],"names":[],"mappings":"AAIA,OAAO,EAAa,mBAAmB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;;AACjF;;;;;;;;GAQG;AACH,qBAQa,mBAAmB;IAC9B;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,eAAe;;;;;;;;;;;;;;MAAoB;IAEtD;;OAEG;IACI,cAAc,8CAA4B;IAEjD;;OAEG;IACI,gBAAgB,8DAA8C;IAErE;;OAEG;IACI,gBAAgB,8DAA8C;IAErE;;OAEG;IACI,aAAa,2FAA2E;IAE/F;;OAEG;IACI,QAAQ,8CAAqB;IAEpC;;OAEG;IACI,YAAY,8CAAqB;IAExC;;;;OAIG;IACI,uBAAuB,2DAAoB;IAElD;;;OAGG;IACI,oBAAoB,2DAAkC;IAE7D;;OAEG;IACI,YAAY,mGAKjB;IAEF;;OAEG;IACI,iBAAiB,mDAAoB;IAE5C;;OAEG;IACH,SAAS,CAAC,0BAA0B,wDAA+B;IAEnE;;OAEG;IACH,SAAS,CAAC,sBAAsB,wDAA+B;IAE/D;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAAmB;IAE7C;;OAEG;IACH,OAAO,CAAC,cAAc,CAG6B;IAEnD;;OAEG;IACH,OAAO,CAAC,UAAU,CAGP;;IAYX;;;;OAIG;IACI,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAUpC;;;;OAIG;IACH,OAAO,CAAC,qBAAqB;IAQ7B;;;;;OAKG;IACH,OAAO,CAAC,0BAA0B;IAyClC;;;;;OAKG;IACH,OAAO,CAAC,mBAAmB;yCA1LhB,mBAAmB;2CAAnB,mBAAmB;CAkM/B"}

package/dvm/neighbours/public-api.d.ts

@@ -0,0 +1,3 @@
+export { NeighboursComponent } from './neighbours.component';
+export type { Direction, DirectionObjectKeys, NeighboursData } from './types';
+//# sourceMappingURL=public-api.d.ts.map

package/dvm/neighbours/public-api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../../../projects/software-division-components/src/dvm/neighbours/public-api.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,YAAY,EAAE,SAAS,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC"}