@synergy-design-system/angular
Version:
Angular wrappers for the Synergy Design System
84 lines (81 loc) • 4.55 kB
TypeScript
import * as i0 from '@angular/core';
import { ElementRef, NgZone, EventEmitter } from '@angular/core';
import SynHeader from '@synergy-design-system/components/components/header/header.component.js';
import { SynBurgerMenuClosedEvent, SynBurgerMenuHiddenEvent, SynBurgerMenuOpenEvent } from '@synergy-design-system/components';
export { SynBurgerMenuClosedEvent, SynBurgerMenuHiddenEvent, SynBurgerMenuOpenEvent } from '@synergy-design-system/components';
/**
* @summary The <syn-header /> element provides a generic application header
* that can be used to add applications name, toolbar and primary navigation.
*
* @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-header--docs
* @status stable
* @since 1.10.0
*
* @slot label - The label for the header
* @slot logo - The logo that should be displayed. Will fall back to the SICK logo if not provided
* @slot meta-navigation - The meta-navigation is used to add various application toolbar icons
* Best used with `<syn-icon-button />` and `<syn-drop-down />`
* @slot navigation - This slot can be used to add an optional horizontal navigation
* @slot open-burger-menu-icon - An icon to use in lieu of the default burger-menu=open state.
* The default close icon is a 'x'.
* @slot closed-burger-menu-icon - An icon to use in lieu of the default burger-menu=closed state.
* The default open icon is a burger menu.
*
* @event syn-burger-menu-closed - Emitted when the burger menu is toggled to closed
* @event syn-burger-menu-hidden - Emitted when the burger menu is toggled to hidden
* @event syn-burger-menu-open - Emitted when the burger menu is toggled to open
*
* @csspart base - The component's base wrapper
* @csspart content - The wrapper most content items reside
* @csspart logo - The wrapper the application logo resides in
* @csspart label - The element wrapping the application name
* @csspart meta-navigation - The Item wrapping the optional application menu
* @csspart navigation - The wrapper that is holding the optional top navigation section
* @csspart burger-menu-toggle-button - The button that toggles the burger menu
*
* @cssproperty --sticky-position - The position of the sticky header from the top of the viewport. Defaults to the top of the screen.
* @cssproperty --metanavigation-item-size - The size of the items in the meta navigation. Also used for the height of dividers in the meta navigation. Defaults to var(--syn-font-size-x-large)
*/
declare class SynHeaderComponent {
nativeElement: SynHeader;
private _ngZone;
constructor(e: ElementRef, ngZone: NgZone);
/**
* The headers label.
* If you need to display HTML, use the `label` slot instead.
*/
set label(v: SynHeader['label']);
get label(): SynHeader['label'];
/**
* Defines the current visibility and icon of the burger-menu icon.
The menu button is added automatically if the component finds a syn-side-nav in
variant="default".
The following values can be used:
- hidden: The burger menu is not visible
- open: The burger menu is visible and shows the close icon
- closed: The burger menu is visible and shows the open icon
*/
set burgerMenu(v: SynHeader['burgerMenu']);
get burgerMenu(): SynHeader['burgerMenu'];
/**
* Makes the header stick to the top of the viewport when scrolling.
Also applies a shadow to the header when scrolling.
*/
set sticky(v: '' | SynHeader['sticky']);
get sticky(): SynHeader['sticky'];
/**
* Emitted when the burger menu is toggled to closed
*/
synBurgerMenuClosedEvent: EventEmitter<SynBurgerMenuClosedEvent>;
/**
* Emitted when the burger menu is toggled to hidden
*/
synBurgerMenuHiddenEvent: EventEmitter<SynBurgerMenuHiddenEvent>;
/**
* Emitted when the burger menu is toggled to open
*/
synBurgerMenuOpenEvent: EventEmitter<SynBurgerMenuOpenEvent>;
static ɵfac: i0.ɵɵFactoryDeclaration<SynHeaderComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<SynHeaderComponent, "syn-header", never, { "label": { "alias": "label"; "required": false; }; "burgerMenu": { "alias": "burgerMenu"; "required": false; }; "sticky": { "alias": "sticky"; "required": false; }; }, { "synBurgerMenuClosedEvent": "synBurgerMenuClosedEvent"; "synBurgerMenuHiddenEvent": "synBurgerMenuHiddenEvent"; "synBurgerMenuOpenEvent": "synBurgerMenuOpenEvent"; }, never, ["*"], true, never>;
}
export { SynHeaderComponent };