sdk-tabs/fesm2022/sdk-tabs.mjs

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

import * as i0 from '@angular/core';
import { EventEmitter, ViewChild, Output, Input, Component, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from '@angular/cdk/clipboard';
import { ClipboardModule } from '@angular/cdk/clipboard';
import * as i4 from 'ng-dynamic-component';
import { DynamicIoModule } from 'ng-dynamic-component';
import * as i1 from '@angular/router';
import * as i5 from 'sdk-message';
import { SDKMessageModule } from 'sdk-message';

class SDKTabsComponent {
    constructor(route) {
        this.route = route;
        /**************************************************************************
        * Input/Output Parameters
        **************************************************************************/
        this.tabs = []; // List of tabs.
        this.fontFamily = ""; // Font to use for the tab titles.
        this.fontColor = ""; // Color to use for the tab titles.
        this.tabColor = ""; // Color of the tabs.
        this.tabBorderColor = ""; // Border color of the tabs.
        this.activeTabColor = ""; // Active tab color.
        this.activeFontColor = ""; // Active tab font color.
        this.height = ""; // Height of tabs. Default is auto.
        this.share = false; // Enable share icon.
        this.tabChangedEvent = new EventEmitter(); // Callback when active tab changes.
        this.sharedUrl = "";
        this.message = "";
    }
    //******************************************************************************
    //  Component Life-cycle Methods
    //******************************************************************************
    ngOnInit() {
        this.route.queryParams.subscribe((params) => {
            if (params?.tab) {
                this.activeTab = this.tabs.find((tab) => tab.title === params.tab);
            }
        });
    }
    ngOnChanges(_args) {
        if (_args.activeTab) {
            if (_args.activeTab.firstChange && !_args.activeTab.currentValue) {
                this.activeTab = _args.tabs.currentValue[0];
            }
            if (this.activeTab) {
                this.setSharedUrl(this.activeTab);
            }
        }
        if (_args.tabs) {
            this.setSharedUrl(this.activeTab);
        }
    }
    ngAfterViewInit() {
        setTimeout(() => {
            if (this.sdktabs) {
                this.sdktabs.nativeElement.style.setProperty("--sdk-tabs-font-family", this.fontFamily);
                this.sdktabs.nativeElement.style.setProperty("--sdk-tabs-font-color", this.fontColor);
                this.sdktabs.nativeElement.style.setProperty("--sdk-tabs-color", this.tabColor);
                this.sdktabs.nativeElement.style.setProperty("--sdk-tabs-border-color", this.tabBorderColor);
                this.sdktabs.nativeElement.style.setProperty("--sdk-tabs-active-color", this.activeTabColor);
                this.sdktabs.nativeElement.style.setProperty("--sdk-tabs-active-font-color", this.activeFontColor);
                this.sdktabs.nativeElement.style.setProperty("--sdk-tabs-height", this.height);
            }
        }, 1);
    }
    //*************************************************************************
    //  Protected Methods
    //*************************************************************************
    setActiveTab(tab) {
        if (tab != this.activeTab && this.tabChangedEvent.observed) {
            this.tabChangedEvent.emit({ from: this.activeTab, to: tab });
        }
        else {
            this.activeTab = tab;
            this.setSharedUrl(tab);
        }
        setTimeout(() => {
            if (this.sdktabinfo) {
                this.sdktabinfo.nativeElement.scrollTop = 0;
            }
        }, 10);
    }
    copied() {
        this.message = "Link has been Copied!";
    }
    //*************************************************************************
    //  Private Methods
    //*************************************************************************
    setSharedUrl(tab) {
        setTimeout(() => {
            this.sharedUrl = `${window.location.href.split('?')[0]}?tab=${tab?.title}`;
            if (tab && tab?.urlParams && tab?.urlParams !== "") {
                this.sharedUrl += (tab.urlParams?.startsWith("&")) ? tab.urlParams : `&${tab.urlParams}`;
            }
        }, 100);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SDKTabsComponent, deps: [{ token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SDKTabsComponent, selector: "sdk-tabs", inputs: { tabs: "tabs", activeTab: "activeTab", fontFamily: "fontFamily", fontColor: "fontColor", tabColor: "tabColor", tabBorderColor: "tabBorderColor", activeTabColor: "activeTabColor", activeFontColor: "activeFontColor", height: "height", share: "share" }, outputs: { tabChangedEvent: "tabChangedEvent" }, viewQueries: [{ propertyName: "sdktabs", first: true, predicate: ["sdktabs"], descendants: true }, { propertyName: "sdktabinfo", first: true, predicate: ["sdktabinfo"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #sdktabs *ngIf=\"tabs.length > 0\" class=\"sdk-tabs\">\n    <div class=\"tabs\">\n        <div *ngFor=\"let tab of tabs\" class=\"tab\" (click)=\"setActiveTab(tab)\" [ngClass]=\"{'active': activeTab && activeTab.title === tab.title}\">\n            <div class=\"title\">{{ tab.title }}</div>\n            <div *ngIf=\"share && activeTab && activeTab.title === tab.title\" title=\"Share Information\" class=\"sdk-icon\" [cdkCopyToClipboard]=\"sharedUrl\" [cdkCopyToClipboardAttempts]=\"2\" (click)=\"copied()\">share</div>\n        </div>\n        <div class=\"tab empty\"></div>\n        <sdk-message [(message)]=\"message\" height=\"100%\"></sdk-message>\n    </div>\n    <div #sdktabinfo *ngIf=\"activeTab && activeTab.type\" class=\"tab-info\">\n        <ng-container [ngComponentOutlet]=\"activeTab.type\" [ndcDynamicInputs]=\"activeTab.inputs\" [ndcDynamicOutputs]=\"activeTab.outputs\"></ng-container>\n    </div>\n</div>\n", styles: [".sdk-tabs{position:absolute;inset:0;z-index:1;overflow:hidden}.sdk-tabs .tabs{position:absolute;top:0;left:0;right:0;height:var(--sdk-tabs-height, 35px);display:flex}.sdk-tabs .tabs .tab{display:flex;align-items:center;justify-content:center;color:var(--sdk-tabs-font-color, rgb(219, 220, 221));background-color:var(--sdk-tabs-color, rgb(0, 102, 178));border:.5px solid var(--sdk-tabs-border-color, rgb(219, 220, 221));border-bottom:1px solid var(--sdk-tabs-border-color, rgb(219, 220, 221));padding:5px 20px;cursor:pointer}.sdk-tabs .tabs .tab *{cursor:pointer}.sdk-tabs .tabs .tab.active{color:var(--sdk-tabs-active-font-color, rgb(11, 45, 113));background-color:var(--sdk-tabs-active-color, rgb(255, 255, 255));border-bottom:none;cursor:default!important}.sdk-tabs .tabs .tab.active *{cursor:default!important}.sdk-tabs .tabs .tab.active:hover{border-bottom:none}.sdk-tabs .tabs .tab:hover{color:var(--sdk-tabs-active-font-color, rgb(11, 45, 113));background-color:var(--sdk-tabs-active-color, rgb(255, 255, 255))}.sdk-tabs .tabs .tab.empty{width:100%;cursor:default;border:.5px solid var(--sdk-tabs-border-color, rgb(219, 220, 221))}.sdk-tabs .tabs .tab.empty:hover{background-color:var(--sdk-tabs-color, rgb(0, 102, 178))}.sdk-tabs .tabs .tab .title{font-family:var(--sdk-tabs-font-family, unset);white-space:nowrap}.sdk-tabs .tabs .tab .sdk-icon{padding-left:10px;font-size:1.2em;font-weight:800;cursor:pointer!important}.sdk-tabs .tabs:hover{overflow-x:scroll;height:calc(var(--sdk-tabs-height, 35px) + 2px)}.sdk-tabs .tabs::-webkit-scrollbar{display:block;height:2px;width:0;background-color:#fff}.sdk-tabs .tabs::-webkit-scrollbar-thumb{display:block;height:2px;width:0;background-color:gray}.sdk-tabs .tab-info{position:absolute;top:calc(var(--sdk-tabs-height, 35px) + 2px);left:0;right:0;bottom:0;padding:10px;border:.5px solid var(--sdk-tabs-border-color, rgb(219, 220, 221));background-color:var(--sdk-tabs-active-color, rgb(255, 255, 255));border-top:none;vertical-align:top;overflow:auto}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "directive", type: i4.DynamicIoDirective, selector: "[ndcDynamicInputs],[ndcDynamicOutputs]", inputs: ["ndcDynamicInputs", "ndcDynamicOutputs"], exportAs: ["ndcDynamicIo"] }, { kind: "directive", type: i4.ComponentOutletInjectorDirective, selector: "[ngComponentOutlet]", exportAs: ["ndcComponentOutletInjector"] }, { kind: "component", type: i5.SDKMessageComponent, selector: "sdk-message", inputs: ["message", "height", "style", "timer"], outputs: ["messageChange"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SDKTabsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'sdk-tabs', template: "<div #sdktabs *ngIf=\"tabs.length > 0\" class=\"sdk-tabs\">\n    <div class=\"tabs\">\n        <div *ngFor=\"let tab of tabs\" class=\"tab\" (click)=\"setActiveTab(tab)\" [ngClass]=\"{'active': activeTab && activeTab.title === tab.title}\">\n            <div class=\"title\">{{ tab.title }}</div>\n            <div *ngIf=\"share && activeTab && activeTab.title === tab.title\" title=\"Share Information\" class=\"sdk-icon\" [cdkCopyToClipboard]=\"sharedUrl\" [cdkCopyToClipboardAttempts]=\"2\" (click)=\"copied()\">share</div>\n        </div>\n        <div class=\"tab empty\"></div>\n        <sdk-message [(message)]=\"message\" height=\"100%\"></sdk-message>\n    </div>\n    <div #sdktabinfo *ngIf=\"activeTab && activeTab.type\" class=\"tab-info\">\n        <ng-container [ngComponentOutlet]=\"activeTab.type\" [ndcDynamicInputs]=\"activeTab.inputs\" [ndcDynamicOutputs]=\"activeTab.outputs\"></ng-container>\n    </div>\n</div>\n", styles: [".sdk-tabs{position:absolute;inset:0;z-index:1;overflow:hidden}.sdk-tabs .tabs{position:absolute;top:0;left:0;right:0;height:var(--sdk-tabs-height, 35px);display:flex}.sdk-tabs .tabs .tab{display:flex;align-items:center;justify-content:center;color:var(--sdk-tabs-font-color, rgb(219, 220, 221));background-color:var(--sdk-tabs-color, rgb(0, 102, 178));border:.5px solid var(--sdk-tabs-border-color, rgb(219, 220, 221));border-bottom:1px solid var(--sdk-tabs-border-color, rgb(219, 220, 221));padding:5px 20px;cursor:pointer}.sdk-tabs .tabs .tab *{cursor:pointer}.sdk-tabs .tabs .tab.active{color:var(--sdk-tabs-active-font-color, rgb(11, 45, 113));background-color:var(--sdk-tabs-active-color, rgb(255, 255, 255));border-bottom:none;cursor:default!important}.sdk-tabs .tabs .tab.active *{cursor:default!important}.sdk-tabs .tabs .tab.active:hover{border-bottom:none}.sdk-tabs .tabs .tab:hover{color:var(--sdk-tabs-active-font-color, rgb(11, 45, 113));background-color:var(--sdk-tabs-active-color, rgb(255, 255, 255))}.sdk-tabs .tabs .tab.empty{width:100%;cursor:default;border:.5px solid var(--sdk-tabs-border-color, rgb(219, 220, 221))}.sdk-tabs .tabs .tab.empty:hover{background-color:var(--sdk-tabs-color, rgb(0, 102, 178))}.sdk-tabs .tabs .tab .title{font-family:var(--sdk-tabs-font-family, unset);white-space:nowrap}.sdk-tabs .tabs .tab .sdk-icon{padding-left:10px;font-size:1.2em;font-weight:800;cursor:pointer!important}.sdk-tabs .tabs:hover{overflow-x:scroll;height:calc(var(--sdk-tabs-height, 35px) + 2px)}.sdk-tabs .tabs::-webkit-scrollbar{display:block;height:2px;width:0;background-color:#fff}.sdk-tabs .tabs::-webkit-scrollbar-thumb{display:block;height:2px;width:0;background-color:gray}.sdk-tabs .tab-info{position:absolute;top:calc(var(--sdk-tabs-height, 35px) + 2px);left:0;right:0;bottom:0;padding:10px;border:.5px solid var(--sdk-tabs-border-color, rgb(219, 220, 221));background-color:var(--sdk-tabs-active-color, rgb(255, 255, 255));border-top:none;vertical-align:top;overflow:auto}\n"] }]
        }], ctorParameters: () => [{ type: i1.ActivatedRoute }], propDecorators: { tabs: [{
                type: Input
            }], activeTab: [{
                type: Input
            }], fontFamily: [{
                type: Input
            }], fontColor: [{
                type: Input
            }], tabColor: [{
                type: Input
            }], tabBorderColor: [{
                type: Input
            }], activeTabColor: [{
                type: Input
            }], activeFontColor: [{
                type: Input
            }], height: [{
                type: Input
            }], share: [{
                type: Input
            }], tabChangedEvent: [{
                type: Output
            }], sdktabs: [{
                type: ViewChild,
                args: ['sdktabs']
            }], sdktabinfo: [{
                type: ViewChild,
                args: ['sdktabinfo']
            }] } });

class SDKTabsModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SDKTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: SDKTabsModule, declarations: [SDKTabsComponent], imports: [CommonModule,
            ClipboardModule,
            DynamicIoModule,
            SDKMessageModule], exports: [SDKTabsComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SDKTabsModule, imports: [CommonModule,
            ClipboardModule,
            DynamicIoModule,
            SDKMessageModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SDKTabsModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        SDKTabsComponent,
                    ],
                    imports: [
                        CommonModule,
                        ClipboardModule,
                        DynamicIoModule,
                        SDKMessageModule,
                    ],
                    exports: [
                        SDKTabsComponent,
                    ],
                    schemas: [
                        NO_ERRORS_SCHEMA
                    ]
                }]
        }] });

/*
 * Public API Surface of sdk-tabs
 */

/**
 * Generated bundle index. Do not edit.
 */

export { SDKTabsComponent, SDKTabsModule };
//# sourceMappingURL=sdk-tabs.mjs.map