projects/wvr-elements/src/lib/wvr-color-preview/wvr-color-preview.component.ts
| changeDetection | ChangeDetectionStrategy.Default |
| selector | wvr-color-preview-component |
| styleUrls | ./wvr-color-preview.component.scss |
| templateUrl | ./wvr-color-preview.component.html |
Properties |
|
Methods |
Inputs |
Outputs |
HostBindings |
constructor(injector: Injector)
|
||||||
|
Parameters :
|
| animate | |
Type : string
|
|
|
Inherited from
WvrBaseComponent
|
|
|
Defined in
WvrBaseComponent:68
|
|
|
A setter which parses a json string describing animation instructions and stores the derived object in |
|
| animateConfig | |
Type : string
|
|
|
Inherited from
WvrBaseComponent
|
|
|
Defined in
WvrBaseComponent:76
|
|
|
A setter which parses a json string describing animation setting and stores the derived object in |
|
| animateId | |
Type : string
|
|
|
Inherited from
WvrBaseComponent
|
|
|
Defined in
WvrBaseComponent:84
|
|
|
An attribute input allowing for the designation of an animation identifier for the purpose of animation targeting. |
|
| animateTarget | |
Type : string
|
|
|
Inherited from
WvrBaseComponent
|
|
|
Defined in
WvrBaseComponent:87
|
|
|
An attribute input allowing for the designation of an animation target for animation events. |
|
| hiddenInMobile | |
Type : boolean
|
|
Default value : false
|
|
|
Inherited from
WvrBaseComponent
|
|
|
Defined in
WvrBaseComponent:107
|
|
|
An attribute input specifying if this component should be hidden in the mobile layout. |
|
| ngBindings | |
Type : string
|
|
|
Inherited from
WvrBaseComponent
|
|
|
Defined in
WvrBaseComponent:116
|
|
| themeVariant | |
Type : ThemeVariantName
|
|
|
Inherited from
WvrBaseComponent
|
|
|
Defined in
WvrBaseComponent:55
|
|
|
Used to define the class type of an alert component. |
|
| wvrData | |
Type : string
|
|
|
Inherited from
WvrBaseComponent
|
|
|
Defined in
WvrBaseComponent:45
|
|
| wvrTheme | |
Type : string
|
|
|
Inherited from
WvrBaseComponent
|
|
|
Defined in
WvrBaseComponent:50
|
|
|
Allows for the override of theme for the particular component. |
|
| animationEventTrigger | |
Type : EventEmitter
|
|
|
Inherited from
WvrBaseComponent
|
|
|
Defined in
WvrBaseComponent:110
|
|
|
An Output biding used for triggering animations. |
|
| class.wvr-bootstrap |
Type : boolean
|
Default value : true
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:58
|
|
A host binding used to ensure the presense of the |
| class.wvr-hidden |
Type : boolean
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:102
|
|
A host bound accessor which applies the wvr-hidden class if both isMobileLayout and hiddenInMobile evaluate to true. |
| style |
Type : any
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:60
|
| index | |||||||||
index(index: number, themeVariant: ThemeVariant)
|
|||||||||
|
Parameters :
Returns :
number
|
| ngOnInit |
ngOnInit()
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:25
|
|
Returns :
void
|
| originalOrdering |
originalOrdering()
|
|
Returns :
number
|
| applyThemeOverride |
applyThemeOverride(customProperty: string, value: string)
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:237
|
|
Returns :
void
|
| bootstrapNgBindings |
bootstrapNgBindings()
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:175
|
|
Returns :
void
|
| getWvrData |
getWvrData()
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:262
|
|
Returns :
string
|
| hasWvrData |
hasWvrData()
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:258
|
|
Returns :
boolean
|
| initializeAnimationElement |
initializeAnimationElement()
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:267
|
|
Returns :
void
|
| initializeAnimationRegistration |
initializeAnimationRegistration()
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:273
|
|
Returns :
void
|
| ngAfterContentInit |
ngAfterContentInit()
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:160
|
|
Used for post content initialization animation setup.
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:166
|
|
Handles the the unregistering of this component with the component registry.
Returns :
void
|
| onAnimationEvent | ||||||
onAnimationEvent($event: Event)
|
||||||
|
Inherited from
WvrBaseComponent
|
||||||
|
Defined in
WvrBaseComponent:290
|
||||||
|
Trigger's the animation specified by the incoming event.
Parameters :
Returns :
void
|
| Private processData |
processData()
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:295
|
|
Returns :
void
|
| triggerAnimations | ||||||
triggerAnimations(animationTriggerType: string)
|
||||||
|
Inherited from
WvrBaseComponent
|
||||||
|
Defined in
WvrBaseComponent:244
|
||||||
|
Plays the animation specified by the incoming animation trigger.
Parameters :
Returns :
void
|
| currentTheme |
Type : Observable<ThemeVariants>
|
| Private _animationConfig |
Type : any
|
Default value : {}
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:73
|
|
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
|
|
Defined in
WvrBaseComponent:93
|
|
A reference to the AnimationService |
| Private _animationSettings |
Type : any
|
Default value : {}
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:65
|
|
An object representation of the animation instructions for this component. |
| Private _ngBindings |
Type : literal type
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:114
|
| animationRootElem |
Type : ElementRef
|
Decorators :
@ViewChild('animationRoot')
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:90
|
|
A view child of the template element containing the #animationRoot identifier. |
| Private animationStateId |
Type : number
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:81
|
|
An identifier used to access the animation state for this component. |
| Readonly appConfig |
Type : AppConfig
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:37
|
|
A reference to the AppConfig |
| Readonly cdRef |
Type : ChangeDetectorRef
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:34
|
|
A reference to the ChangeDetectorRef |
| Readonly componentRegistry |
Type : ComponentRegistryService<WvrBaseComponent>
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:25
|
|
A reference to the ComponentRegistryService |
| data |
Type : literal type
|
Default value : {}
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:42
|
| Readonly eRef |
Type : ElementRef
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:31
|
|
A reference to the ElementRef |
| Readonly id |
Type : number
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:28
|
|
A generated unique identifier for this comonent. |
| isMobile |
Type : Observable<boolean>
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:120
|
| isMobileLayout |
Type : boolean
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:112
|
| Private Readonly kebabize |
Default value : () => {...}
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:321
|
| Private Readonly ngBindingsService |
Type : NgBindingsService
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:99
|
|
A reference to the NgBindingsService |
| Readonly store |
Type : Store<RootState>
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:40
|
|
A reference to the Store |
| style |
Decorators :
@HostBinding('style')
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:60
|
| Protected subscriptions |
Type : Array<Subscription>
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:122
|
| themeOverrides |
Type : object
|
Default value : {}
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:47
|
| Private Readonly themeService |
Type : ThemeService
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:96
|
|
A reference to the ThemeService |
| variantTypes |
Type : []
|
Default value : []
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:62
|
| wvrBootstrap |
Default value : true
|
Decorators :
@HostBinding('class.wvr-bootstrap')
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:58
|
|
A host binding used to ensure the presense of the |
import { ChangeDetectionStrategy, Component, Injector, OnInit } from '@angular/core';
import { select } from '@ngrx/store';
import { Observable } from 'rxjs';
import { selectCurrentTheme } from '../core/store';
import { ThemeVariant, ThemeVariants } from '../shared/theme';
import { WvrBaseComponent } from '../shared/wvr-base.component';
@Component({
selector: 'wvr-color-preview-component',
templateUrl: './wvr-color-preview.component.html',
styleUrls: ['./wvr-color-preview.component.scss'],
changeDetection: ChangeDetectionStrategy.Default
})
export class WvrColorPreviewComponent extends WvrBaseComponent implements OnInit {
currentTheme: Observable<ThemeVariants>;
constructor(injector: Injector) {
super(injector);
}
ngOnInit(): void {
super.ngOnInit();
this.currentTheme = this.store
.pipe(select(selectCurrentTheme));
}
originalOrdering(): number {
return 0;
}
index(index: number, themeVariant: ThemeVariant): number {
return index;
}
}
<div class="inline-block">
<wvr-card-component
class="swatches"
[panelFormat]="'solid'"
[themeVariant]="tv.key"
*ngFor="let tv of currentTheme | async | keyvalue : originalOrdering; trackBy:index">
<template card-header>
<h3>{{tv.key}}</h3>
</template>
<template card-content>
{{tv.value.baseColor}}
</template>
</wvr-card-component>
</div>
./wvr-color-preview.component.scss
:host {
.swatches {
display: inline-block;
margin: 0 10px 10px 0;
}
}