\n \n `,\n standalone: true,\n imports: [CommonModule],\n})\nexport class VerticalNavCardComponent implements OnInit {\n @Input() label = '';\n @Input() active = false;\n @HostBinding('class') class = 'vertical-nav-card';\n\n public id = '';\n\n ngOnInit(): void {\n this.id = dasherize(this.label);\n }\n}\n", "import { Location } from '@angular/common';\nimport { HttpParams } from '@angular/common/http';\nimport {\n AfterContentInit,\n OnInit,\n Component,\n ContentChildren,\n HostBinding,\n Input,\n QueryList,\n inject,\n} from '@angular/core';\nimport { ActivatedRoute } from '@angular/router';\nimport { CommonModule } from '@angular/common';\nimport { MatSelectModule } from '@angular/material/select';\nimport { ObserversModule } from '@angular/cdk/observers';\nimport { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';\n\nimport { VerticalNavCardComponent } from './vertical-nav-card.component';\nimport { GalaxyFormFieldModule } from '@vendasta/galaxy/form-field';\n\n@Component({\n selector: 'crm-vertical-nav-tab',\n templateUrl: './vertical-nav-tab.component.html',\n styleUrls: ['./vertical-nav-tab.component.scss'],\n standalone: true,\n imports: [CommonModule, ObserversModule, MatSelectModule, GalaxyFormFieldModule],\n})\nexport class VerticalNavTabComponent implements OnInit, AfterContentInit {\n @HostBinding('class') class = 'vertical-nav-tab';\n\n @Input() useQueryParams = true;\n\n @ContentChildren(VerticalNavCardComponent) tabs?: QueryList;\n\n private readonly location = inject(Location);\n private activatedRoute = inject(ActivatedRoute);\n private tabActivated = false;\n isMobile = false;\n mobileSelectValue = '';\n\n constructor(private responsive: BreakpointObserver) {}\n\n ngOnInit() {\n this.responsive.observe([Breakpoints.Handset]).subscribe((result) => {\n this.isMobile = result.matches;\n });\n }\n\n ngAfterContentInit(): void {\n this.setActiveTab();\n }\n\n setActiveTab(): void {\n if (!this.tabActivated) {\n let queryParamHasMappedToATab = false;\n const activeTabParam = this.activatedRoute.snapshot.queryParams['tab'];\n if (!this.tabs) return;\n let activeTabs = this.tabs.filter((tab) => tab.active);\n\n if (activeTabParam && this.useQueryParams) {\n // check if tab id in query param, and set as first activeTabs if so\n this.tabs?.some((tab) => {\n if (tab.id === activeTabParam) {\n activeTabs = [];\n activeTabs.push(tab);\n queryParamHasMappedToATab = true;\n return true;\n }\n return false;\n });\n }\n\n if ((activeTabs && activeTabs.length === 0) || !activeTabs[0]) {\n // if no tabs marked active, either through manually setting\n // as active or via query param, make first tab active\n activeTabs = [];\n activeTabs.push(this.tabs.first);\n }\n\n if (!queryParamHasMappedToATab) {\n // If there is no active tab query param that is an id of an actual tab,\n // then set the url to include the correct tab in the query param\n if (activeTabs && activeTabs[0] && activeTabs[0].id) {\n this.addQueryString(activeTabs[0].id);\n }\n }\n\n // Select the active tab\n if (activeTabs && activeTabs[0]) {\n this.selectTab(activeTabs[0]);\n this.tabActivated = true;\n this.mobileSelectValue = activeTabs[0]?.id || '';\n }\n }\n }\n\n addQueryString(tabTitle: string): void {\n if (this.useQueryParams) {\n const params = new HttpParams().set('tab', tabTitle);\n this.location.replaceState(this.location.path().split('?')[0], params.toString(), false);\n }\n }\n\n selectTab(tab: VerticalNavCardComponent, scrolltarget?: HTMLElement): void {\n // deactivate all tabs\n this.tabs?.forEach((thisTab) => {\n thisTab.active = false;\n });\n\n // only scroll back to the top of the tab content if top of the content is not visible\n if (scrolltarget && scrolltarget?.getClientRects()[0]?.top < 0) {\n window.setTimeout(() => {\n scrolltarget.scrollIntoView({ behavior: 'instant' });\n }, 0);\n }\n\n // activate the tab the user has clicked on.\n tab.active = true;\n this.mobileSelectValue = tab?.id || '';\n }\n}\n", "\n\n