sdk-tabs/README.md

Simple to use (Angular) component for organizing your content and UI layout.

<img src="https://www.soodohkohd.com/assets/images/logo.png" title="soo-doh-kohd" height="200"/>

## Description:
The sdk-tabs component is an easy way to organize and display infomation in your application which minimizes cognitive overload on the user.

## Angular Compatibility Chart

| Version | Compatibility |
|---------|---------------|
| >= 16   | ✔             |

**NOTE: This package leverages the [sdk-core-library](https://www.npmjs.com/package/sdk-core-library) for core configurations (i.e., colors, icons, etc.).**

## INSTALLATION:
Using NPM:

```bash
npm install --save sdk-tabs
```

## CONFIGURATION:
To configure the ```sdk-tabs``` for your application, add the following lines to your app.module.ts file:

```typescript
import { SDKTabsModule } from 'sdk-tabs';

@NgModule({
    imports: [
        SDKTabsModule
    ]
})
export class AppModule { }
```

## PROPERTIES:
```typescript
// Required properties.
tabs: SDKTab[] = []; // List of tabs. See properties list below.

// Optional properties.
activeTab: SDKTab | undefined; // Set the current active tab. This is used to load a tab from a share.
fontFamily: string = ""; // Font to use for the tab titles.
fontColor: string = ""; // Color to use for the tab titles.
tabColor: string = ""; // Color of the tabs.
tabBorderColor: string = ""; // Border color of the tabs.
activeTabColor: string = ""; // Active tab color.
activeFontColor: string = ""; // Active tab font color.
height: string = ""; // Height of tabs. Default is auto.
share: boolean = false; // Enable share icon.
tabChangedEvent: EventEmitter<{ from: any, to: any }> = new EventEmitter(); // Callback when active tab changes.

SDKTab {
    title: string; // Name on the tab.
    type?: Type<any>; // The component to display when the tab is selected.
    inputs?: any; // Input properties for the component displayed.
    outputs?: any // Output properties for the component displayed.
    urlParams?: string // Parameters to be used when sharing the tab.
}
```

## USAGE:
```html
<!-- Simple (out-of-the-box) -->
<sdk-tabs [tabs]="tabs"></sdk-tabs>

<!-- Advanced -->
<sdk-tabs
    [share]=true
    fontFamily="Courier New"
    fontColor="white"
    tabColor="green"
    tabBorderColor="black"
    activeFontColor="green"
    activeTabColor="white"
    height="100px"
    [tabs]="tabs">
</sdk-tabs>
```

```typescript
import { SDKTab } from 'sdk-tabs';

public tabs: SDKTab[] = [
    {
        title: "Introduction",
        type: <any>IntrodutionTabComponent,
        inputs: {
            "title": "Introducing TABS! The easiest way to organize your layout."
        },
        outputs: {}
    },
    {
        title: "The Basics",
        type: <any>TheBasicsTabComponent,
        inputs: {
            "title": "The Basics - A simple out-of-the-box design."
        },
        outputs: {},
        urlParams: "abc=123" // Set tab's url parameters explicitly
    },
    (() => {
        let tab: SDKTab = {
            title: "Advanced",
            type: <any>AdvancedTabComponent,
            inputs: {
                "title": "Advanced Options and Setup."
            },
            outputs: {},
            urlParams: ""
        };

        // Create a callback method to handle dynamic params.
        tab.outputs = {
            setUrlParamsEvent: (params: any) => {
                this.setUrlParams(tab, params);
            }
        };

        return tab;
    })()
];

public setUrlParams(tab: SDKTab, params: string) {
    let tmp: SDKTab[] = [...this.tabs];
    let ndx = tmp.findIndex((t: SDKTab)=> t.title === tab.title);

    if (ndx > -1) {
        tmp[ndx].urlParams = params;
    }

    this.tabs = [...tmp];
}
```

**NOTE:** ```setUrlParamsEvent``` is called from inside your ```AdvancedTabComponent``` passing back the parameters to be used when sharing the tab's url.

Example:
```typescript
import { Component, EventEmitter, Output } from '@angular/core';

@Component({
    selector: 'advanced-tab',
    templateUrl: './advanced-tab.component.html',
    styleUrls: ['./advanced-tab.component.scss']
})

export class AdvancedTabComponent {
    @Output() setUrlParamsEvent: EventEmitter<string> = new EventEmitter();

    protected ngAfterViewInit() {
        this.setUrlParamsEvent.emit("abc=123&xyz=789");
    }
}
```