import { EventEmitter } from "../../stencil-public-runtime"; import { DuetAnalyticsEvent, DuetLanguage, DuetTheme } from "../../common-types"; import { ThemeableComponent } from "../../common/themeable-component"; import { DuetLangObject } from "../../utils/language-utils"; export type DuetHeaderItem = { id?: string; href: string; label: string; analyticsId?: string; }; export type DuetHeaderContactItem = DuetHeaderItem & { external: boolean; }; export type DuetHeaderMainItem = DuetHeaderItem & { badge?: boolean; active?: boolean; external: boolean; icon?: string; items?: DuetHeaderMainItem[]; }; export type DuetHeaderLanguageItem = DuetHeaderItem & { country: DuetLanguage; }; export type DuetHeaderSession = DuetHeaderItem & { type: "login" | "logout"; sessionItems?: [{ label: string | undefined; items: DuetHeaderItem[]; }]; }; export type DuetHeaderSearch = DuetHeaderItem; export type DuetHeaderChangeEvent = { originalEvent: Event; data: DuetHeaderItem | DuetHeaderLanguageItem | DuetHeaderSession; component: "duet-header"; }; export type DuetHeaderAnalyticsEvent = DuetAnalyticsEvent<"duet-header">; export type DuetHeaderMobileNavToggleEvent = { originalEvent: Event; open: boolean; }; export interface I18nText { skipLabel: string; changeLanguage: string; activeLanguage: string; } /** * @slot utility - A slot for utilities, such as a notification drawer or shopping basket. * @slot logo-utility - A slot to place elements alongside the logo. This takes precedence over the **region** prop. Note: not available in multilevel header. * @part header - piercing selector for styling the header element. */ export declare class DuetHeader implements ThemeableComponent { /** * Own Properties */ private subMenuItemRefs; private subMenuButtonRefs; private contactItemsEl; private contactItemsButtonEl; private hasLanguageChanged; private languageItemsEl; private languageItemsButtonEl; private sessionItemsEl; private sessionItemsButtonEl; private segmentItemsEl; private segmentItemsButtonEl; private navigationEl; private navigationElButton; private logoEl; private mql; private boundMqlFunctions; /** * Reference to host HTML element. */ element: HTMLElement; /** * State() variables * Inlined decorator, alphabetical order. */ isContactOpen: boolean; isLanguageOpen: boolean; isSessionOpen: boolean; isSlideOutOpen: boolean; isSegmentOpen: boolean; openMenu: string; closedActives: string[]; processedItems: DuetHeaderMainItem[]; processedLanguageItems: DuetHeaderLanguageItem[]; processedContactItems: DuetHeaderContactItem[]; processedSession: DuetHeaderSession; processedSearch: DuetHeaderSearch; processedUser: DuetHeaderItem; processedBack: DuetHeaderItem; renderDesktopNav: boolean; /** * Theme of the header. */ theme: DuetTheme; /** * The currently active language. This setting also changes the logo to match * the chosen language. * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing * @default "fi" */ language: DuetLanguage; /** * Default strings for accessibleI18nLabels * @default { fi: { skipLabel: "Siirry pääsisältöön", changeLanguage: "Vaihda kieltä", activeLanguage: "Suomi valittuna", }, sv: { skipLabel: "Hoppa till huvudinnehåll", changeLanguage: "Ändra Språk", activeLanguage: "Svenska valt", }, en: { skipLabel: "Skip to main content", changeLanguage: "Change language", activeLanguage: "English selected", }, } */ accessibleI18nLabelsDefaults: string | Record; /** * Adds i18n translations of all internally used textStrings * @default { fi: { skipLabel: "Siirry pääsisältöön", changeLanguage: "Vaihda kieltä", activeLanguage: "Suomi valittuna", }, sv: { skipLabel: "Hoppa till huvudinnehåll", changeLanguage: "Ändra Språk", activeLanguage: "Svenska valt", }, en: { skipLabel: "Skip to main content", changeLanguage: "Change language", activeLanguage: "English selected", }, } */ accessibleI18nLabels: I18nText; /** * Property to change accessibleLabelExternal defaults on the component. * normally you would handle these strings on an application level and override accessibleLabelExternal when needed * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"} */ accessibleLabelExternalDefaults: DuetLangObject | string; /** * Adds accessible label for tooltip that is shown in external link (url & external have both been set) * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"} */ accessibleLabelExternal: string; /** * Property to change accessibleLabel defaults on the component. * normally you would handle these strings on an application level and override accessibleLabel when needed */ accessibleLabelDefaults: DuetLangObject | string; /** * Accessible label that is shown for screen reader users in the mobile * navigation toggle. Not visible for normal users. * @default { fi: "Valikko", sv: "Meny", en: "Menu", } */ accessibleLabel: string; /** * An object that includes mandatory "label" and "href" fields for the user * profile link. Additionally, you can pass an "id" that is added as an HTML * identifier for the element. If nothing is passed, user won’t be shown. * Note: not available in multilevel headers. */ user: any; /** * URL that the logo link points to. */ logoHref: string; /** * The href of the current page item that is shown as “active”. * Note: not available in multilevel headers. */ currentHref: string; /** * The ID of the element where "skip to content" link should take the user. * If empty, the functionality won’t be rendered in the DOM. */ skipToId: string; /** * An array of items for the main navigation. Items have to include mandatory * "label" and "href" fields to work. Additionally, you can pass an "id" that is * added as an HTML identifier for the element, "active" boolean that makes item active, * "badge" boolean to add notification badge next to the item and * "items" array consisting of sub items that are allowed up to three levels. * Two and three level menus are deprecated and you should instead use * Nav component to create multilevel navigations. */ items: any; /** * Region that is shown next to the logo. If empty, region will be hidden. * Note: not available in multilevel header. */ region: string; /** * An object that includes mandatory "label", "href" and "type" fields for the * session login/logout link. Additionally, you can pass an "id" that is added * as an HTML identifier for the element. * If nothing is passed, this link won’t be shown. */ session: any; /** * An object that includes mandatory "label" and "href" fields for the * search link. Additionally, you can pass an "id" that is added * as an HTML identifier for the element. If nothing is passed, this link won’t * be shown. */ search: any; /** * An object that includes mandatory "label" and "href" fields for the back link. * Additionally, you can pass an "id" that is added as an HTML identifier for the * element. If nothing is passed, back link won’t be shown. **NOTE: The back link * should be ONLY used in combination with language and logoHref props.** */ back: any; /** * Label of the contact menu. If empty, contact menu will be hidden. * Note: not available in multilevel headers. */ contact: string; /** * An array of items for the contact menu. "label" and "href" are mandatory. * Additionally, you can pass an "id" that is added as an HTML identifier for * the element, and pass an "external" flag if the link is to open in a new window. */ contactItems: any; /** * An array of items for the language menu. If empty, the language menu will * be hidden. "label", "country" and "href" are mandatory. Additionally you * can pass an "id" that is added as an HTML identifier for the element. */ languageItems: any; /** * @deprecated in favour of more specific events like duetLogoClick. * Callback for when a user is about to navigate to another page. You can prevent the * default browser functionality by calling **event.detail.originalEvent.preventDefault()** * inside your listener. Additionally, the passed data is available via **event.detail.data**. */ duetChange: EventEmitter; /** * Event for when a user has clicked the session link. You can prevent the * default browser functionality by calling **event.detail.originalEvent.preventDefault()** * inside your listener. Additionally, the passed data is available via **event.detail.data**. */ duetSessionClick: EventEmitter; /** * Event for when a user has clicked the search link. You can prevent the * default browser functionality by calling **event.detail.originalEvent.preventDefault()** * inside your listener. Additionally, the passed data is available via **event.detail.data**. */ duetSearchClick: EventEmitter; /** * Event raised when a user has clicked the user link. You can prevent the * default browser functionality by calling **event.detail.originalEvent.preventDefault()** * inside your listener. Additionally, the passed data is available via **event.detail.data**. */ duetUserClick: EventEmitter; /** * Event raised when a user has selected a language from the language dropdown. You can prevent the * default browser functionality by calling **event.detail.originalEvent.preventDefault()** * inside your listener. Additionally, the passed data is available via **event.detail.data**. */ duetLanguageSelect: EventEmitter; /** * Event raised when a user has clicked the logo. You can prevent the * default browser functionality by calling **event.detail.originalEvent.preventDefault()** * inside your listener. Additionally, the passed data is available via **event.detail.data**. */ duetLogoClick: EventEmitter; /** * Event raised when a user has clicked the back button. You can prevent the * default browser functionality by calling **event.detail.originalEvent.preventDefault()** * inside your listener. Additionally, the passed data is available via **event.detail.data**. */ duetBackClick: EventEmitter; /** * Event raised when a user has clicked an option from the contact dropdown. You can prevent the * default browser functionality by calling **event.detail.originalEvent.preventDefault()** * inside your listener. Additionally, the passed data is available via **event.detail.data**. */ duetContactClick: EventEmitter; /** * Event raised when a user has clicked a menu item. You can prevent the * default browser functionality by calling **event.detail.originalEvent.preventDefault()** * inside your listener. Additionally, the passed data is available via **event.detail.data**. */ duetItemClick: EventEmitter; /** * Event raised when a user has clicked the "skip to content" button. You can prevent the * default browser functionality by calling **event.detail.originalEvent.preventDefault()** * inside your listener. Additionally, the passed data is available via **event.detail.data**. */ duetSkipClick: EventEmitter; /** * Event raised when an items with an associated analytics ID is clicked. Analytics ID can be * accessed via **event.detail.analyticsId** */ duetAnalytics: EventEmitter; /** * Event raised mobile navigation is toggled. **event.detail.open** shows the current status of the navigation. */ duetMobileNavToggle: EventEmitter; /** * General event stream for the following events: * item: onMouseEnter, onTouchDown; * menuItem: onMouseEnter, onTouchDown;. * You can prevent * the default browser functionality by calling **event.detail.originalEvent.preventDefault()** * inside your listener. Additionally, the passed data is available via * **event.detail.data**. */ duetEvent: EventEmitter; /** * Component lifecycle events. */ componentWillLoad(): void; connectedCallback(): void; disconnectedCallback(): void; /** * Component event handling. */ handleKeyUp(ev: any): void; handleKeyDown(ev: any): void; handleDocumentClick(): void; private handleLanguageClick; private handleClick; private handleSessionClick; private handleSessionItemClick; private handleSearchClick; private handleUserClick; private handleBackClick; private handleContactClick; private handleItemClick; private handleSkipClick; private handleLogoClick; private handleArrowKeys; /** * Local methods. */ private refresh; private toggleMenu; /** * Closes mobile menu in header when called. */ private closeMobileNavigation; private emitDuetEvent; /** * Closes all dropdown menus in header when called. */ closeMenus(moveFocusToButton?: boolean): Promise; /** * Sets focus on the specified `duet-header`. Use this method instead of the global * `header.focus()`. */ setFocus(options?: FocusOptions): Promise; /** * render() function * Always the last one in the class. */ render(): any; }