@synergy-design-system/angular
Version:
Angular wrappers for the Synergy Design System
218 lines (206 loc) • 9.78 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Output, Input, Component } from '@angular/core';
import '@synergy-design-system/components/components/side-nav/side-nav.js';
// ---------------------------------------------------------------------
// 🔒 AUTOGENERATED @synergy-design-system/angular wrappers for @synergy-design-system/components
// Please do not edit this file directly!
// It will get recreated when running pnpm build.
// ---------------------------------------------------------------------
/**
* @summary The <syn-side-nav /> element contains secondary navigation and fits below the header.
* It can be used to group multiple navigation items (<syn-nav-item />s) together.
*
* @example
* <syn-side-nav open>
* <syn-nav-item >Item 1</syn-nav-item>
* <syn-nav-item divider>Item 2</syn-nav-item>
* </syn-side-nav>
*
* @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-side-nav--docs
* @status stable
* @since 1.14.0
*
* @dependency syn-divider
* @dependency syn-drawer
* @dependency syn-icon
* @dependency syn-nav-item
*
* @slot - The main content of the side-nav. Used for <syn-nav-item /> elements.
* @slot footer - The footer content of the side-nav. Used for <syn-nav-item /> elements.
* Please avoid having to many nav-items as it can massively influence the user experience.
* @slot toggle-label - The label of the toggle nav-item for variant="sticky".
* @slot toggle-icon - An icon to use in lieu of the default icon for the toggle nav-item
* for variant="sticky".
*
* @event syn-show - Emitted when the side-nav opens.
* @event syn-after-show - Emitted after the side-nav opens and all animations are complete.
* @event syn-hide - Emitted when the side-nav closes.
* @event syn-after-hide - Emitted after the side-nav closes and all animations are complete.
*
* @csspart base - The components base wrapper
* @csspart drawer - The drawer that is used under the hood for creating the side-nav
* @csspart content-container - The components main content container
* @csspart content - The components main content
* @csspart footer-container - The components footer content container
(where the footer slot content is rendered)
* @csspart footer-divider - The components footer divider
* @csspart footer - The components footer content
* @csspart overlay - The overlay that covers the screen behind the side-nav.
* @csspart panel - The side-nav's panel (where the whole content is rendered).
* @csspart body - The side-nav's body (where the default slot content is rendered)
* @csspart drawer__base - The drawer's base wrapper
* @csspart toggle-nav-item - The nav-item to toggle open state for variant="sticky"
* @csspart toggle-icon - The icon of the toggle nav-item for variant="sticky"
* @csspart toggle-label - The label of the toggle nav-item for variant="sticky".
* @cssproperty --side-nav-open-width - The width of the side-nav if in open state
*
* @animation sideNav.showNonRail - The animation to use when showing the side-nav
* in variant="default".
* @animation sideNav.showRail - The animation to use when showing the side-nav in variant="rail"
* and variant="sticky".
* @animation sideNav.hideNonRail - The animation to use when hiding the side-nav
* in variant="default".
* @animation sideNav.hideRail - The animation to use when hiding the side-nav in variant="rail"
* and variant="sticky".
* @animation sideNav.overlay.show - The animation to use when showing the side-nav's overlay.
* @animation sideNav.overlay.hide - The animation to use when hiding the side-nav's overlay.
*/
class SynSideNavComponent {
nativeElement;
_ngZone;
constructor(e, ngZone) {
this.nativeElement = e.nativeElement;
this._ngZone = ngZone;
this.nativeElement.addEventListener('syn-show', (e) => {
this.synShowEvent.emit(e);
});
this.nativeElement.addEventListener('syn-after-show', (e) => {
this.synAfterShowEvent.emit(e);
});
this.nativeElement.addEventListener('syn-hide', (e) => {
this.synHideEvent.emit(e);
});
this.nativeElement.addEventListener('syn-after-hide', (e) => {
this.synAfterHideEvent.emit(e);
});
}
/**
* Indicates whether or not the side-nav is open.
You can toggle this attribute to show and hide the side-nav, or you can use the `show()` and
`hide()` methods and this attribute will reflect the side-nav's open state.
Depending on the "variant" attribute, the behavior will differ.
__Default__:
With `open` will show the side-nav with an overlay.
Without `open`, the side-nav will be hidden.
__Rail__:
With `open` will show the whole side-nav with an overlay for touch devices
or without an overlay for non-touch devices.
Without `open`, the side-nav will only show the prefix of nav-item's.
__Sticky__:
With `open` will show the whole side-nav with an overlay for touch devices
or without an overlay for non-touch devices.
Without `open`, the side-nav will only show the prefix of nav-item's.
*/
set open(v) {
this._ngZone.runOutsideAngular(() => (this.nativeElement.open = v === '' || v));
}
get open() {
return this.nativeElement.open;
}
/**
* Use the rail attribute to only show the prefix of navigation items in closed state.
This will open on hover on the rail navigation.
On touch devices the navigation opens on click and shows an overlay.
Note: The Rail is only an option if all Navigation Items on the first level have an Icon.
If this is not the case you should use a burger navigation.
@deprecated Use the `variant` attribute with `rail` instead.
Will be removed in synergy version 3.0
*/
set rail(v) {
this._ngZone.runOutsideAngular(() => (this.nativeElement.rail = v === '' || v));
}
get rail() {
return this.nativeElement.rail;
}
/**
* The variant that should be used to show the side navigation.
The following variants are supported:
- **default** (default): Always shows the whole content and additionally an overlay.
This makes especially sense for applications, where you navigate to a place and stay
there for a longer time.
- **rail**: Only show the prefix of navigation items in closed state.
This will open on hover on the rail navigation.
On touch devices the navigation opens on click and shows an overlay.
Note: The rail variant is only an option if all Navigation Items on the first level
have an Icon.
If this is not the case you should use a burger navigation.
- **sticky**: The side-nav has a pin button to show the side-nav in small (icon only)
and full width.
* This variant is only possible for non-nested navigation items.
Note: The sticky variant is only an option if all Navigation Items on the first level
have an Icon and if there are only "first level" items.
*/
set variant(v) {
this._ngZone.runOutsideAngular(() => (this.nativeElement.variant = v));
}
get variant() {
return this.nativeElement.variant;
}
/**
* By default, the side-nav traps the focus if in variant="default" and open.
To disable the focus trapping, set this attribute.
*/
set noFocusTrapping(v) {
this._ngZone.runOutsideAngular(() => (this.nativeElement.noFocusTrapping = v === '' || v));
}
get noFocusTrapping() {
return this.nativeElement.noFocusTrapping;
}
/**
* Emitted when the side-nav opens.
*/
synShowEvent = new EventEmitter();
/**
* Emitted after the side-nav opens and all animations are complete.
*/
synAfterShowEvent = new EventEmitter();
/**
* Emitted when the side-nav closes.
*/
synHideEvent = new EventEmitter();
/**
* Emitted after the side-nav closes and all animations are complete.
*/
synAfterHideEvent = new EventEmitter();
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SynSideNavComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.1", type: SynSideNavComponent, isStandalone: true, selector: "syn-side-nav", inputs: { open: "open", rail: "rail", variant: "variant", noFocusTrapping: "noFocusTrapping" }, outputs: { synShowEvent: "synShowEvent", synAfterShowEvent: "synAfterShowEvent", synHideEvent: "synHideEvent", synAfterHideEvent: "synAfterHideEvent" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.1", ngImport: i0, type: SynSideNavComponent, decorators: [{
type: Component,
args: [{
selector: 'syn-side-nav',
standalone: true,
template: '<ng-content></ng-content>',
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { open: [{
type: Input
}], rail: [{
type: Input
}], variant: [{
type: Input
}], noFocusTrapping: [{
type: Input
}], synShowEvent: [{
type: Output
}], synAfterShowEvent: [{
type: Output
}], synHideEvent: [{
type: Output
}], synAfterHideEvent: [{
type: Output
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { SynSideNavComponent };
//# sourceMappingURL=synergy-design-system-angular-components-side-nav.mjs.map