","import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, Inject, Input, OnDestroy, ViewChild } from '@angular/core';\nimport { DestroyCtor, DestroyMixin } from '@usitsdasdesign/dds-ng/core/common-behaviors';\nimport { ListManager } from '@usitsdasdesign/dds-ng/core/list-manager';\nimport { AdditionalClass, KeyCodes } from '@usitsdasdesign/dds-ng/shared';\nimport { takeUntil } from 'rxjs/operators';\nimport { HEADER } from '../header.token';\nimport type { HeaderComponent } from '../header/header.component';\n\nconst IconsContainerBase: DestroyCtor = DestroyMixin();\n@Component({\n selector: 'dds-header-icons-container',\n templateUrl: './icons-container.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: true,\n imports: [],\n})\nexport class IconsContainerComponent extends IconsContainerBase implements AfterViewInit, OnDestroy {\n // Determines whether the icons should be shown in the sticker.\n @Input() showInSticker: boolean;\n\n // Reference to the icon buttons container element.\n @ViewChild('iconBtns') iconBtns: ElementRef;\n\n // Manages the keyboard interactions for the list of buttons.\n private keyManager: ListManager;\n\n constructor(@Inject(HEADER) private headerComponent: HeaderComponent) {\n super();\n }\n\n // Lifecycle hook that is called after the component's view has been fully initialized.\n // Initializes the key manager, sets attributes in the popup if needed, and sets the icons count.\n public ngAfterViewInit(): void {\n this.initKeyManager();\n if (this.showInSticker) {\n this.setAttributesInPopup();\n this.focus();\n }\n this.setIconsCount();\n }\n\n // Lifecycle hook that is called when the component is destroyed.\n // Focuses the mobile icons button if it exists and calls the base class's ngOnDestroy method.\n public ngOnDestroy(): void {\n const mobileIconsBtn = this.headerComponent.mobileIconsBtn;\n\n if (mobileIconsBtn) mobileIconsBtn.btnRef.nativeElement.focus();\n\n super.ngOnDestroy();\n }\n\n // Handles keydown events for the component.\n public handleKeydown(event: KeyboardEvent): void {\n if (!this.showInSticker) {\n return;\n }\n\n this.keyManager.onKeydown(event);\n\n if ((event.keyCode === KeyCodes.ENTER || event.keyCode === KeyCodes.SPACE) && this.keyManager.activeItem) {\n event.preventDefault();\n (this.keyManager.activeItem as HTMLElement).focus();\n }\n }\n\n // Focuses the icon buttons container and removes focus from the mobile icons button if it exists.\n private focus(): void {\n const mobileIconsBtn = this.headerComponent.mobileIconsBtn;\n\n this.iconBtns.nativeElement.focus();\n\n if (mobileIconsBtn) this.removeFocus(mobileIconsBtn.btnRef.nativeElement);\n }\n\n // Sets the necessary attributes for the popup.\n private setAttributesInPopup(): void {\n this.iconBtns.nativeElement.setAttribute('tabindex', '0');\n this.iconBtns.nativeElement.setAttribute('role', 'menu');\n }\n\n // Initializes the key manager for the list of buttons.\n private initKeyManager(): void {\n const items = this.iconBtns.nativeElement.querySelectorAll('button');\n\n this.keyManager = new ListManager(Array.from(items)).withHomeAndEnd();\n this.keyManager.change.pipe(takeUntil(this.destroy)).subscribe(() => {\n if (this.keyManager.previousActiveItem) {\n this.removeFocus(this.keyManager.previousActiveItem as HTMLElement);\n }\n if (this.keyManager.activeItem) (this.keyManager.activeItem as HTMLElement).focus();\n });\n\n this.keyManager.tabOut.pipe(takeUntil(this.destroy)).subscribe(() => {\n this.headerComponent.sticker?.hide();\n this.headerComponent.mobileIconsBtn?.btnRef.nativeElement.focus();\n });\n }\n\n // Removes the keyboard focus class from the given element.\n private removeFocus(el: HTMLElement): void {\n el.classList.remove(AdditionalClass.keyboardFocus);\n }\n\n // Sets the count of icons in the header component.\n private setIconsCount(): void {\n this.headerComponent.iconsCount = this.iconBtns.nativeElement.children?.length;\n }\n}\n","
\n \n
\n","import { ThemeClassesMap, ThemeMapEnum } from '@usitsdasdesign/dds-ng/core/theme';\nimport { Themes, WidthState } from '@usitsdasdesign/dds-ng/shared';\nimport { HeaderElmnts } from '../typings';\n\nexport const DEFAULT_RESPONSIVE_PRIORITY = [\n HeaderElmnts.logo,\n HeaderElmnts.projectName,\n HeaderElmnts.profile,\n HeaderElmnts.nav,\n HeaderElmnts.icons,\n HeaderElmnts.search,\n];\n\nexport const themeClassesMap: ThemeClassesMap = {\n [ThemeMapEnum.Themes]: {\n [Themes.blue]: 'dds-header_blue',\n },\n [ThemeMapEnum.WidthState]: {\n [WidthState.full]: 'dds-header__container_fluid',\n },\n};\n\nexport const MOBILE_NAV_ICON = 'dds-icon_list-24';\nexport const MOBILE_NAV_ACTIVE_ICON = 'dds-icon_close';\nexport const INVERSE_MODIFIER = '_inverse';\nexport const STICKER_WITH_SEARCH_INDENT = -44;\nexport const MOBILE_WIDTH = 600;\nexport const MOBILE_STICKER_INDENT = 4;\nexport const RESPONSIVE_SPACE = 40;\nexport const HEADER_MIN_WIDTH = 140;\n","import { CommonModule } from '@angular/common';\nimport {\n AfterContentInit,\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ContentChild,\n ContentChildren,\n ElementRef,\n HostListener,\n Input,\n OnChanges,\n QueryList,\n SimpleChanges,\n ViewChild,\n} from '@angular/core';\nimport { ButtonComponent, ButtonModule, ButtonOptions } from '@usitsdasdesign/dds-ng/button';\nimport { ContextMenuComponent } from '@usitsdasdesign/dds-ng/context-menu';\nimport { DestroyCtor, DestroyMixin, I18nCtor, I18nMixin } from '@usitsdasdesign/dds-ng/core/common-behaviors';\nimport { ThemeClassesMap, ThemeModule } from '@usitsdasdesign/dds-ng/core/theme';\nimport { DropdownComponent } from '@usitsdasdesign/dds-ng/dropdown';\nimport { ProfileComponent } from '@usitsdasdesign/dds-ng/profile';\nimport { SearchComponent } from '@usitsdasdesign/dds-ng/search';\nimport { PositionState, Size, Themes, WidthState } from '@usitsdasdesign/dds-ng/shared';\nimport { DdsConfigService } from '@usitsdasdesign/dds-ng/shared/dds-config';\nimport { I18nService, ITranslation } from '@usitsdasdesign/dds-ng/shared/i18n';\nimport { StickerDirective, StickerModule, StickerOptions } from '@usitsdasdesign/dds-ng/sticker';\nimport { HEADER } from '../header.token';\nimport { LogoComponent } from '../logo/logo.component';\nimport { IconsContainerComponent } from '../responsive/icons-container.component';\nimport { HeaderElmnts, HeaderElmntsInfo, LogoThemes } from '../typings';\nimport {\n DEFAULT_RESPONSIVE_PRIORITY,\n HEADER_MIN_WIDTH,\n INVERSE_MODIFIER,\n MOBILE_NAV_ACTIVE_ICON,\n MOBILE_NAV_ICON,\n MOBILE_STICKER_INDENT,\n MOBILE_WIDTH,\n RESPONSIVE_SPACE,\n STICKER_WITH_SEARCH_INDENT,\n themeClassesMap,\n} from './constants';\n\nconst HeaderBase: DestroyCtor & I18nCtor = DestroyMixin(I18nMixin());\n\n@Component({\n selector: 'dds-header',\n templateUrl: './header.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: HEADER,\n useExisting: HeaderComponent,\n },\n ],\n standalone: true,\n imports: [CommonModule, ThemeModule, ButtonModule, StickerModule, IconsContainerComponent],\n})\nexport class HeaderComponent extends HeaderBase implements OnChanges, AfterContentInit, AfterViewInit {\n // Input properties for the header component\n @Input() name: string | undefined;\n @Input() customClass: string | undefined;\n @Input() width: WidthState | string | undefined;\n @Input() theme: Themes | string | undefined = this.ddsConfig.getConfig().theme;\n @Input() isResponsive: boolean | undefined = this.ddsConfig.getConfig().isResponsive;\n @Input() isInverse: boolean | undefined;\n @Input() responsivePriority: HeaderElmnts[] | undefined = DEFAULT_RESPONSIVE_PRIORITY;\n\n // ViewChild properties to access DOM elements\n @ViewChild('header') header: ElementRef;\n @ViewChild('logo') logo: ElementRef;\n @ViewChild('projectName') projectName: ElementRef;\n @ViewChild('nav') nav: ElementRef;\n @ViewChild('search') search: ElementRef;\n @ViewChild('icons') icons: ElementRef;\n @ViewChild('profile') profile: ElementRef;\n @ViewChild('sticker') sticker: StickerDirective;\n @ViewChild('mobileIconsBtn') mobileIconsBtn: ButtonComponent;\n\n // ContentChild properties to access child components\n @ContentChild(LogoComponent) logoComponent: LogoComponent;\n @ContentChild(SearchComponent) searchComponent: SearchComponent;\n @ContentChild(ProfileComponent) profileComponent: ProfileComponent;\n @ContentChild(ContextMenuComponent) contextMenuComponent: ContextMenuComponent;\n @ContentChildren(ButtonComponent) buttons: QueryList;\n @ContentChildren(DropdownComponent) dropdowns: QueryList;\n\n // HostListener to handle window resize events\n @HostListener('window:resize') onResize(): void {\n this.hideSticker();\n this.fitCheck();\n }\n\n // Public properties for the header component\n public themeConfig: ThemeClassesMap = themeClassesMap;\n public headerElmntsInfo: HeaderElmntsInfo[] = [];\n public isMobile: boolean;\n public mobileStickerOptions: StickerOptions = {\n stickerIndent: MOBILE_STICKER_INDENT,\n stickerIsOutsideClick: true,\n stickerIsResponsive: false,\n };\n public mobileBtnOptions: ButtonOptions = {\n theme: Themes.dark,\n size: Size.lg,\n };\n public headerElmnts = HeaderElmnts;\n public positionState = PositionState;\n public stickerWithSearchIndent: number = STICKER_WITH_SEARCH_INDENT;\n\n // Aria labels for accessibility\n public headerAriaLabel: string;\n public additionalNavAriaLabel: string;\n public btnSearchAriaLabel: string;\n public btnAdditionalNavAriaLabel: string;\n public iconsCount: number;\n\n // Private properties for internal use\n private btnNavOpenAriaLabel: string;\n private btnNavCloseAriaLabel: string;\n private profileInverseState: boolean;\n\n // Getter for mobile navigation icon\n get mobileNavIcon(): string {\n return this.getActiveStatus(HeaderElmnts.nav) ? MOBILE_NAV_ACTIVE_ICON : MOBILE_NAV_ICON;\n }\n\n // Getter for mobile navigation aria label\n get mobileNavAriaLabel(): string {\n return this.getActiveStatus(HeaderElmnts.nav) ? this.btnNavCloseAriaLabel : this.btnNavOpenAriaLabel;\n }\n\n // Constructor to inject dependencies\n constructor(public cdr: ChangeDetectorRef, public i18n: I18nService, private ddsConfig: DdsConfigService) {\n super();\n }\n\n // Lifecycle hook for changes detection\n public ngOnChanges(changes: SimpleChanges): void {\n if (changes.isInverse) {\n this.setComponentsOption();\n }\n if (changes.isResponsive) {\n this.setLogoTheme();\n }\n }\n\n // Lifecycle hook after content initialization\n public ngAfterContentInit(): void {\n this.setLgSize(this.buttons.toArray());\n this.setLgSize(this.dropdowns.toArray());\n this.setLgSize([this.searchComponent]);\n this.setComponentsOption();\n }\n\n // Lifecycle hook after view initialization\n public ngAfterViewInit(): void {\n this.setAriaLabel();\n setTimeout(() => {\n this.setElmntsWidth();\n this.fitCheck();\n });\n }\n\n // Method to toggle sticker visibility\n public stickerToggle(el: HeaderElmnts, status = false): void {\n this.getHeaderEl(el).active = status;\n this.setAriaLabel();\n this.cdr.detectChanges();\n }\n\n // Method to get active status of an element\n public getActiveStatus(el: HeaderElmnts): boolean {\n const headerEl = this.getHeaderEl(el);\n return headerEl && headerEl.active;\n }\n\n // Method to get collapsed status of an element\n public getCollapsedStatus(el: HeaderElmnts): boolean {\n const headerEl = this.getHeaderEl(el);\n return headerEl && headerEl.collapsed;\n }\n\n // Method to get shown status of an element\n public getShownStatus(el: HeaderElmnts): boolean {\n return this.getHeaderEl(el)?.width && this.getCollapsedStatus(el);\n }\n\n // Method to get mobile sticker class\n public getMobileStickerClass(className: string): string {\n return this.isInverse ? className + INVERSE_MODIFIER : className;\n }\n\n // Method to handle search shown event\n public onShownSearch(): void {\n setTimeout(() => this.searchComponent?.focus());\n }\n\n // Method to handle search hidden event\n public onHiddenSearch(btn: ButtonComponent): void {\n btn.btnRef.nativeElement.focus();\n }\n\n // Method to get mobile active theme\n public mobileActiveTheme(el: HeaderElmnts): string {\n return this.getActiveStatus(el) ? this.theme : this.mobileBtnOptions.theme;\n }\n\n // Method to get mobile active inverse status\n public mobileActiveInverse(el: HeaderElmnts): boolean {\n if (this.getActiveStatus(el) && this.mobileActiveTheme(el) === Themes.dark) {\n return !this.isInverse;\n }\n\n return this.isInverse;\n }\n\n // Private method to set elements width\n private setElmntsWidth(): void {\n for (const key in HeaderElmnts) {\n if (HeaderElmnts[key]) {\n this.headerElmntsInfo.push({\n el: key,\n width: this.getElWidth(this[key]),\n });\n }\n }\n }\n\n // Private method to check fit of elements\n private fitCheck(): void {\n if (!this.isResponsive) return;\n\n this.collapseAllElmnts();\n\n const headerWidth = this.getElWidth(this.header);\n let sumElWidth = HEADER_MIN_WIDTH;\n\n this.responsivePriority.forEach((elName) => {\n const headerEl = this.getHeaderEl(elName);\n\n sumElWidth += headerEl.width;\n\n if (headerWidth < sumElWidth) {\n sumElWidth += RESPONSIVE_SPACE;\n }\n\n if (headerWidth >= sumElWidth) {\n headerEl.collapsed = false;\n }\n });\n\n this.isMobile = headerWidth <= MOBILE_WIDTH;\n this.setProfileMobileView();\n this.cdr.detectChanges();\n }\n\n // Private method to get header element info\n private getHeaderEl(elName: HeaderElmnts): HeaderElmntsInfo {\n return this.headerElmntsInfo.find((item) => item.el === elName);\n }\n\n // Private method to get element width\n private getElWidth(el: ElementRef): number {\n return el?.nativeElement.getBoundingClientRect().width;\n }\n\n // Private method to collapse all elements\n private collapseAllElmnts(): void {\n this.headerElmntsInfo.forEach((item) => (item.collapsed = true));\n this.cdr.detectChanges();\n }\n\n // Private method to set large size for components\n private setLgSize(components: ButtonComponent[] | SearchComponent[] | DropdownComponent[]): void {\n components.forEach((item) => {\n if (item) {\n item.size = Size.lg;\n item.cdr.detectChanges();\n }\n });\n }\n\n // Private method to set logo theme\n private setLogoTheme(): void {\n if (this.logoComponent) {\n this.logoComponent.theme = this.isInverse ? LogoThemes.dark : LogoThemes.white;\n this.logoComponent.cdr.detectChanges();\n }\n }\n\n // Private method to set inverse status for a component\n private setInverse(component): void {\n if (component) {\n component.isInverse = !this.isInverse;\n component.cdr.detectChanges();\n }\n }\n\n // Private method to set options for components\n private setComponentsOption(): void {\n this.setLogoTheme();\n this.setInverse(this.searchComponent);\n this.setInverse(this.contextMenuComponent);\n\n if (this.profileComponent) {\n this.profileInverseState = this.profileComponent.isInverse;\n }\n }\n\n // Private method to set profile mobile view\n private setProfileMobileView(): void {\n if (this.profileComponent) {\n this.profileComponent.isMobileHeader = this.isMobile;\n\n if (this.isMobile) {\n this.profileComponent.isInverse = !this.isInverse;\n } else {\n this.profileComponent.isInverse = this.profileInverseState === undefined ? !this.isInverse : this.profileInverseState;\n }\n\n this.profileComponent.stickerIndent = MOBILE_STICKER_INDENT;\n this.profileComponent.cdr.detectChanges();\n }\n }\n\n // Private method to hide sticker\n private hideSticker(): void {\n if (this.sticker) {\n this.sticker.hide();\n }\n }\n\n // Protected method to set i18n texts\n protected setI18nTexts(translation: ITranslation): void {\n this.headerAriaLabel = translation.HEADER.A11Y.HEADER_ARIA_LABEL;\n this.additionalNavAriaLabel = translation.HEADER.A11Y.ADDITIONAL_NAV_ARIA_LABEL;\n this.btnNavOpenAriaLabel = translation.HEADER.A11Y.BTN_NAV_OPEN_ARIA_LABEL;\n this.btnNavCloseAriaLabel = translation.HEADER.A11Y.BTN_NAV_CLOSE_ARIA_LABEL;\n this.btnSearchAriaLabel = translation.HEADER.A11Y.BTN_SEARCH_OPEN_ARIA_LABEL;\n this.btnAdditionalNavAriaLabel = translation.HEADER.A11Y.BTN_ADDITIONAL_NAV_OPEN_ARIA_LABEL;\n this.cdr.detectChanges();\n }\n\n // Private method to set aria label\n private setAriaLabel(): void {\n if (this.mobileIconsBtn) {\n const mobileIconsBtn = this.mobileIconsBtn.btnRef.nativeElement;\n\n mobileIconsBtn.setAttribute('aria-haspopup', 'true');\n mobileIconsBtn.setAttribute('aria-expanded', `${!!this.getActiveStatus(HeaderElmnts.icons)}`);\n }\n }\n}\n","