File

projects/wvr-elements/src/lib/wvr-it-works/wvr-it-works.component.ts

Description

Provides a simple component to prove the basic functionality of the Weaver Components.

Extends

WvrBaseComponent

Metadata

Index

Properties
Methods
Inputs
Outputs
HostBindings

Constructor

constructor(injector: Injector)
Parameters :
Name Type Optional
injector Injector No

Inputs

primary
Type : any

Allows for the override of the --wvr-primary css variable.

text
Type : string
Default value : 'Weaver Components'

The text value to be displayed in the title.

themeVariant
Type : ThemeVariantName
Default value : 'primary'
Inherited from WvrBaseComponent

Used to define the class type for button component.

animate
Type : string
Inherited from WvrBaseComponent

A setter which parses a json string describing animation instructions and stores the derived object in _animationSettings.

animateConfig
Type : string
Inherited from WvrBaseComponent

A setter which parses a json string describing animation setting and stores the derived object in _animationConfig.

animateId
Type : string
Inherited from WvrBaseComponent

An attribute input allowing for the designation of an animation identifier for the purpose of animation targeting.

animateTarget
Type : string
Inherited from WvrBaseComponent

An attribute input allowing for the designation of an animation target for animation events.

hiddenInMobile
Type : boolean
Default value : false
Inherited from WvrBaseComponent

An attribute input specifying if this component should be hidden in the mobile layout.

ngBindings
Type : string
Inherited from WvrBaseComponent
wvrData
Type : string
Inherited from WvrBaseComponent
wvrTheme
Type : string
Inherited from WvrBaseComponent

Allows for the override of theme for the particular component.

Outputs

animationEventTrigger
Type : EventEmitter
Inherited from WvrBaseComponent

An Output biding used for triggering animations.

HostBindings

class.wvr-bootstrap
Type : boolean
Default value : true
Inherited from WvrBaseComponent

A host binding used to ensure the presense of the wvr-bootstrap class.

class.wvr-hidden
Type : boolean
Inherited from WvrBaseComponent

A host bound accessor which applies the wvr-hidden class if both isMobileLayout and hiddenInMobile evaluate to true.

style
Type : any
Inherited from WvrBaseComponent

Methods

applyThemeOverride
applyThemeOverride(customProperty: string, value: string)
Inherited from WvrBaseComponent
Parameters :
Name Type Optional
customProperty string No
value string No
Returns : void
bootstrapNgBindings
bootstrapNgBindings()
Inherited from WvrBaseComponent
Returns : void
getWvrData
getWvrData()
Inherited from WvrBaseComponent
Returns : string
hasWvrData
hasWvrData()
Inherited from WvrBaseComponent
Returns : boolean
initializeAnimationElement
initializeAnimationElement()
Inherited from WvrBaseComponent
Returns : void
initializeAnimationRegistration
initializeAnimationRegistration()
Inherited from WvrBaseComponent
Returns : void
ngAfterContentInit
ngAfterContentInit()
Inherited from WvrBaseComponent

Used for post content initialization animation setup.

Returns : void
ngOnDestroy
ngOnDestroy()
Inherited from WvrBaseComponent

Handles the the unregistering of this component with the component registry.

Returns : void
ngOnInit
ngOnInit()
Inherited from WvrBaseComponent

Used to setup this component for animating.

Returns : void
onAnimationEvent
onAnimationEvent($event: Event)
Inherited from WvrBaseComponent

Trigger's the animation specified by the incoming event.

Parameters :
Name Type Optional
$event Event No
Returns : void
Private processData
processData()
Inherited from WvrBaseComponent
Returns : void
triggerAnimations
triggerAnimations(animationTriggerType: string)
Inherited from WvrBaseComponent

Plays the animation specified by the incoming animation trigger.

Parameters :
Name Type Optional
animationTriggerType string No
Returns : void

Properties

password
Type : string
Default value : ''
title
Type : string
Default value : 'it-works-component'

The text value to be displayed in the title.

username
Type : string
Default value : ''
Private _animationConfig
Type : any
Default value : {}
Inherited from WvrBaseComponent

An object representation of the settings specifying the specific behavior of the animation for this component.

Private Readonly _animationService
Type : AnimationService<WvrBaseComponent>
Inherited from WvrBaseComponent

A reference to the AnimationService

Private _animationSettings
Type : any
Default value : {}
Inherited from WvrBaseComponent

An object representation of the animation instructions for this component.

Private _ngBindings
Type : literal type
Inherited from WvrBaseComponent
animationRootElem
Type : ElementRef
Decorators :
@ViewChild('animationRoot')
Inherited from WvrBaseComponent

A view child of the template element containing the #animationRoot identifier.

Private animationStateId
Type : number
Inherited from WvrBaseComponent

An identifier used to access the animation state for this component.

Readonly appConfig
Type : AppConfig
Inherited from WvrBaseComponent

A reference to the AppConfig

Readonly cdRef
Type : ChangeDetectorRef
Inherited from WvrBaseComponent

A reference to the ChangeDetectorRef

Readonly componentRegistry
Type : ComponentRegistryService<WvrBaseComponent>
Inherited from WvrBaseComponent

A reference to the ComponentRegistryService

data
Type : literal type
Default value : {}
Inherited from WvrBaseComponent
Readonly eRef
Type : ElementRef
Inherited from WvrBaseComponent

A reference to the ElementRef

Readonly id
Type : number
Inherited from WvrBaseComponent

A generated unique identifier for this comonent.

isMobile
Type : Observable<boolean>
Inherited from WvrBaseComponent
isMobileLayout
Type : boolean
Inherited from WvrBaseComponent
Private Readonly kebabize
Default value : () => {...}
Inherited from WvrBaseComponent
Private Readonly ngBindingsService
Type : NgBindingsService
Inherited from WvrBaseComponent

A reference to the NgBindingsService

Readonly store
Type : Store<RootState>
Inherited from WvrBaseComponent

A reference to the Store

style
Decorators :
@HostBinding('style')
Inherited from WvrBaseComponent
Protected subscriptions
Type : Array<Subscription>
Inherited from WvrBaseComponent
themeOverrides
Type : object
Default value : {}
Inherited from WvrBaseComponent
Private Readonly themeService
Type : ThemeService
Inherited from WvrBaseComponent

A reference to the ThemeService

variantTypes
Type : []
Default value : []
Inherited from WvrBaseComponent
wvrBootstrap
Default value : true
Decorators :
@HostBinding('class.wvr-bootstrap')
Inherited from WvrBaseComponent

A host binding used to ensure the presense of the wvr-bootstrap class.

import { ChangeDetectionStrategy, Component, HostBinding, Injector, Input } from '@angular/core';
import { ThemeVariantName } from '../shared/theme';
import { WvrBaseComponent } from '../shared/wvr-base.component';

/**
 * Provides a simple component to prove the basic functionality of the Weaver Components.
 */
@Component({
  selector: 'wvr-it-works-component',
  templateUrl: './wvr-it-works.component.html',
  styleUrls: ['./wvr-it-works.component.scss'],
  changeDetection: ChangeDetectionStrategy.Default
})
export class WvrItWorksComponent extends WvrBaseComponent {

  /** Used to define the class type for button component.  */
  @Input() themeVariant: ThemeVariantName = 'primary';

  /** The text value to be displayed in the title. */
  title = 'it-works-component';

  /** The text value to be displayed in the title. */
  @Input() text = 'Weaver Components';

  /** Allows for the override of the --wvr-primary css variable. */
  @HostBinding('style.--wvr-primary') @Input() primary;

  username = '';

  password = '';

  constructor(injector: Injector) {
    super(injector);
  }

}
<div role="main" class="container" #animationRoot>
  <div class="jumbotron">
    <h1 class="it-works text-{{themeVariant}}">{{text}}</h1>
  </div>
</div>

./wvr-it-works.component.scss

@import "../shared/styles/variables";

:host {
  @extend .variables;

  font-family: var(--wvr-font-family-sans-serif);

  div.container {
    overflow: hidden;
  }

  .it-works {
    color: var(--wvr-primary);
  }
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""