CV Generator Documentation
  1. Components
  2. ContextSwitcherComponent

File

src/app/components/context-switcher/context-switcher.component.ts

Description

Context switcher "nav" component ~implements AfterViewInit

Implements

AfterViewInit

Metadata

selector app-context-switcher
styleUrls ./context-switcher.component.scss
templateUrl ./context-switcher.component.html

Index

Properties
Methods
Outputs
Accessors

Constructor

constructor(contextService: ContextService, uiService: UiService, inputService: InputService, persistenceService: PersistenceService)

Constructs the context switcher "nav" component.

Parameters :
Name Type Optional Description
contextService ContextService No

The context service injected dependency.
uiService UiService No

The ui service injected dependency.
inputService InputService No

The input service injected dependency.
persistenceService PersistenceService No

The persistence service injected dependency.

Outputs

navStateChanged

Nav state changed event emitter delegate.

Methods

Public getCaption
getCaption(item: Context)

Get context caption delegate.

Parameters :
Name Type Optional
item Context No
Returns : any
Public getTitle
getTitle(item: Context)

Get context tooltip title delegate.

Parameters :
Name Type Optional
item Context No
Returns : any
Initialize
Initialize()

Initialization

Returns : void
ngAfterViewInit
ngAfterViewInit()

Initialization

Returns : void
Public toggleNav
toggleNav(_event: MouseEvent)

Nav click event handler

Parameters :
Name Type Optional
_event MouseEvent No
Returns : void
Public toggleNavState
toggleNavState()

Toggle nav state

Returns : void

Properties

Public Readonly contextService
Type : ContextService
The context service injected dependency.
Public Readonly inputService
Type : InputService
The input service injected dependency.
Public Readonly NavState
Default value : NavState

Nav state enum accessor.
Public Readonly navStatePersistenceKey
Type : string
Default value : 'navState'

Nav state persistence key.
Public Readonly persistenceService
Type : PersistenceService
The persistence service injected dependency.
sidenav
Type : ElementRef<HTMLDivElement>
Decorators :
@ViewChild('sidenav')

Sidenav element.
Public Readonly uiService
Type : UiService
The ui service injected dependency.

Accessors

navState
getnavState()

Nav state getter delegate.
setnavState(value)

Nav state setter.

Parameters :
Name Optional
value No
Returns : void
navStateChanged
getnavStateChanged()

Nav state changed event emitter delegate.
contexts
getcontexts()
setcontexts(value: Context[])
Parameters :
Name Type Optional
value Context[] No
Returns : void
selectedContext
getselectedContext()

Selected context getter delegate.
setselectedContext(value: Context | undefined)

Selected context setter delegate.

Parameters :
Name Type Optional
value Context | undefined No
Returns : void
isEditing
getisEditing()

Whether context switcher is in editing mode getter delegate.
setisEditing(value: boolean)

Whether context switcher is in editing mode setter delegate.

Parameters :
Name Type Optional
value boolean No
Returns : void
navStateConfigurations
getnavStateConfigurations()

Nav state configurations delegate.

./context-switcher.component.scss 

@use "../stylesheets/stylesheets.component.scss" as component;
@use "../stylesheets/stylesheets.component.animation.scss" as animation;

.sidenav {
    height: 100%;
    width: 10px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    overflow: hidden;
    cursor: pointer;
    @include component.appearance3dAware();
    transition: animation.$transition;
}

.contexts {
    padding: 0.2em 1em 1em 1em;
    width: 100%;
    @include component.appearance3dAwareInset();
}

.detail {
    padding: 1em;
    width: 100%;
}

h1 {
    &.selected {
        font-weight: bolder;
    }
}

.caption {
    width: 100%;
}

.thumb {
    cursor: pointer;
    width: 100%;
    margin-bottom: 0.25em;
    font-size: 30px;
    overflow-x: visible;
}

.closed {
    padding-left: 1px;
}

.semi-open {
    text-align: center;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""