UNPKG

sdk-tabs

Version:

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

1 lines 13.1 kB
{"version":3,"file":"sdk-tabs.mjs","sources":["../../../projects/sdk-tabs/src/lib/sdk-tabs.component.ts","../../../projects/sdk-tabs/src/lib/sdk-tabs.component.html","../../../projects/sdk-tabs/src/lib/sdk-tabs.module.ts","../../../projects/sdk-tabs/src/public-api.ts","../../../projects/sdk-tabs/src/sdk-tabs.ts"],"sourcesContent":["import { Component, ElementRef, EventEmitter, Input, Output, Type, ViewChild } from '@angular/core';\nimport { ActivatedRoute } from '@angular/router';\n\nexport interface SDKTab {\n title: string; // Name on the tab.\n type?: Type<any>; // The component to display when the tab is selected.\n inputs?: any; // Input properties for the component displayed.\n outputs?: any // Output properties for the component displayed.\n urlParams?: string // Parameters to be used when sharing the tab.\n}\n\n@Component({\n selector: 'sdk-tabs',\n templateUrl: './sdk-tabs.component.html',\n styleUrls: ['./sdk-tabs.component.scss']\n})\n\nexport class SDKTabsComponent {\n /**************************************************************************\n * Input/Output Parameters\n **************************************************************************/\n @Input() tabs: SDKTab[] = []; // List of tabs.\n @Input() activeTab: SDKTab | undefined; // Set the current active tab. This is used to load a tab from a share.\n @Input() fontFamily: string = \"\"; // Font to use for the tab titles.\n @Input() fontColor: string = \"\"; // Color to use for the tab titles.\n @Input() tabColor: string = \"\"; // Color of the tabs.\n @Input() tabBorderColor: string = \"\"; // Border color of the tabs.\n @Input() activeTabColor: string = \"\"; // Active tab color.\n @Input() activeFontColor: string = \"\"; // Active tab font color.\n @Input() height: string = \"\"; // Height of tabs. Default is auto.\n @Input() share: boolean = false; // Enable share icon.\n @Output() tabChangedEvent: EventEmitter<{ from: any, to: any }> = new EventEmitter(); // Callback when active tab changes.\n\n /**************************************************************************\n * Component Variables\n **************************************************************************/\n @ViewChild('sdktabs') sdktabs!: ElementRef<any>;\n @ViewChild('sdktabinfo') sdktabinfo!: ElementRef<any>;\n\n protected sharedUrl: string = \"\";\n protected message: string = \"\";\n\n constructor(\n private route: ActivatedRoute,\n ) {\n }\n\n //******************************************************************************\n // Component Life-cycle Methods\n //******************************************************************************\n protected ngOnInit() {\n this.route.queryParams.subscribe((params: any) => {\n if (params?.tab) {\n this.activeTab = this.tabs.find((tab: SDKTab) => tab.title === params.tab);\n }\n });\n }\n\n protected ngOnChanges(_args: any) {\n if (_args.activeTab) {\n if (_args.activeTab.firstChange && !_args.activeTab.currentValue) {\n this.activeTab = _args.tabs.currentValue[0];\n }\n\n if (this.activeTab) {\n this.setSharedUrl(this.activeTab);\n }\n }\n\n if (_args.tabs) {\n this.setSharedUrl(this.activeTab!);\n }\n }\n\n protected ngAfterViewInit() {\n setTimeout(() => {\n if (this.sdktabs) {\n this.sdktabs.nativeElement.style.setProperty(\"--sdk-tabs-font-family\", this.fontFamily);\n this.sdktabs.nativeElement.style.setProperty(\"--sdk-tabs-font-color\", this.fontColor);\n this.sdktabs.nativeElement.style.setProperty(\"--sdk-tabs-color\", this.tabColor);\n this.sdktabs.nativeElement.style.setProperty(\"--sdk-tabs-border-color\", this.tabBorderColor);\n this.sdktabs.nativeElement.style.setProperty(\"--sdk-tabs-active-color\", this.activeTabColor);\n this.sdktabs.nativeElement.style.setProperty(\"--sdk-tabs-active-font-color\", this.activeFontColor);\n this.sdktabs.nativeElement.style.setProperty(\"--sdk-tabs-height\", this.height);\n }\n }, 1);\n }\n\n //*************************************************************************\n // Protected Methods\n //*************************************************************************\n protected setActiveTab(tab: any) {\n if (tab != this.activeTab && this.tabChangedEvent.observed) {\n this.tabChangedEvent.emit({ from: this.activeTab, to: tab });\n } else {\n this.activeTab = tab;\n\n this.setSharedUrl(tab);\n }\n\n setTimeout(() => {\n if (this.sdktabinfo) {\n this.sdktabinfo.nativeElement.scrollTop = 0;\n }\n }, 10);\n }\n\n protected copied() {\n this.message = \"Link has been Copied!\";\n }\n\n //*************************************************************************\n // Private Methods\n //*************************************************************************\n private setSharedUrl(tab: SDKTab) {\n setTimeout(() => {\n this.sharedUrl = `${window.location.href.split('?')[0]}?tab=${tab?.title}`;\n\n if (tab && tab?.urlParams && tab?.urlParams !== \"\") {\n this.sharedUrl += (tab.urlParams?.startsWith(\"&\")) ? tab.urlParams : `&${tab.urlParams}`;\n }\n }, 100);\n }\n}\n","<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","import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ClipboardModule } from '@angular/cdk/clipboard';\n\nimport { DynamicIoModule } from 'ng-dynamic-component';\n\nimport { SDKTabsComponent } from './sdk-tabs.component';\n\nimport { SDKMessageModule } from 'sdk-message';\n\n@NgModule({\n declarations: [\n SDKTabsComponent,\n ],\n imports: [\n CommonModule,\n ClipboardModule,\n DynamicIoModule,\n SDKMessageModule,\n ],\n exports: [\n SDKTabsComponent,\n ],\n schemas: [\n NO_ERRORS_SCHEMA\n ]\n})\nexport class SDKTabsModule { }\n","/*\n * Public API Surface of sdk-tabs\n */\n\nexport { SDKTabsModule } from './lib/sdk-tabs.module';\nexport { SDKTabsComponent, SDKTab } from './lib/sdk-tabs.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}