projects/wvr-elements/src/lib/wvr-card/wvr-card.component.ts
A component wrapper for the bootstrap card element.
| changeDetection | ChangeDetectionStrategy.Default |
| selector | wvr-card-component |
| styleUrls | ./wvr-card.component.scss |
| templateUrl | ./wvr-card.component.html |
Properties |
|
Methods |
Inputs |
Outputs |
HostBindings |
HostListeners |
Accessors |
constructor(injector: Injector)
|
||||||
|
The weaver card component constructor
Parameters :
|
| collapsed | |
Type : "true" | "false"
|
|
|
Update the element attribute when the boolean changes |
|
| collapseMethod | |
Type : "click" | "none"
|
|
|
Designate how to expand/collapse. |
|
| panelFormat | |
Type : "solid" | "outlined" | "mixed"
|
|
|
Used to describe the format of card. |
|
| selectorPrefix | |
Type : string
|
|
Default value : 'wvre'
|
|
|
Allows for the override of the default 'wvre' sufix for psudo components. |
|
| startCollapsed | |
Type : boolean
|
|
|
Designate the initial expanded/collapsed state. |
|
| textCenter | |
Type : boolean
|
|
Default value : false
|
|
|
Toggles the centering of header and footer texts. |
|
| themeVariant | |
Type : ThemeVariantName
|
|
|
Inherited from
WvrBaseComponent
|
|
|
Defined in
WvrBaseComponent:23
|
|
|
Used to describe the type of card. |
|
| 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
|
|
| 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. |
|
| attr.collapsed |
Type : "true" | "false"
|
|
The collapsed/uncollapsed state. |
| style.--card-body-color |
Type : string
|
| style.--card-header-color |
Type : string
|
| 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
|
| keydown.enter |
Arguments : '$event'
|
keydown.enter($event: Event)
|
|
A handler method for when the enter key is down. |
| keydown.space |
Arguments : '$event'
|
keydown.space($event: Event)
|
|
A handler method for when the space key is down. |
| enterKeyDown | ||||||
enterKeyDown($event: Event)
|
||||||
Decorators :
@HostListener('keydown.enter', ['$event'])
|
||||||
|
A handler method for when the enter key is down.
Parameters :
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:62
|
|
Initialize properties dependent on @Input.
Returns :
void
|
| spaceKeyDown | ||||||
spaceKeyDown($event: Event)
|
||||||
Decorators :
@HostListener('keydown.space', ['$event'])
|
||||||
|
A handler method for when the space key is down.
Parameters :
Returns :
void
|
| toggleCollapsibleClick |
toggleCollapsibleClick()
|
|
Toggle the collapsible state when clicked, if allowed.
Returns :
void
|
| 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
|
| _collapsed |
Type : "true" | "false"
|
Decorators :
@HostBinding('attr.collapsed')
|
|
The collapsed/uncollapsed state. |
| 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 |
| collapsed | ||||||
setcollapsed(value: "true" | "false")
|
||||||
|
Update the element attribute when the boolean changes
Parameters :
Returns :
void
|
| cardHeaderColor |
getcardHeaderColor()
|
| cardBodyColor |
getcardBodyColor()
|
| additionalCardClasses |
getadditionalCardClasses()
|
| additionalHeaderClasses |
getadditionalHeaderClasses()
|
import { ChangeDetectionStrategy, Component, HostBinding, HostListener, Injector, Input, OnInit } from '@angular/core';
import { ThemeVariantName } from '../shared/theme';
import { WvrBaseComponent } from '../shared/wvr-base.component';
/**
* A component wrapper for the bootstrap card element.
*/
@Component({
selector: 'wvr-card-component',
templateUrl: './wvr-card.component.html',
styleUrls: ['./wvr-card.component.scss'],
changeDetection: ChangeDetectionStrategy.Default
})
export class WvrCardComponent extends WvrBaseComponent implements OnInit {
/** Allows for the override of the default 'wvre' sufix for psudo components. */
@Input() selectorPrefix = 'wvre';
/** Toggles the centering of header and footer texts. */
@Input() textCenter = false;
/** Used to describe the type of card. */
@Input() themeVariant: ThemeVariantName;
/** Used to describe the format of card. */
@Input() panelFormat: 'solid' | 'outlined' | 'mixed';
/** Designate how to expand/collapse. */
@Input() collapseMethod: 'click' | 'none';
/** Designate the initial expanded/collapsed state. */
@Input() startCollapsed: boolean;
/** The collapsed/uncollapsed state. */
@HostBinding('attr.collapsed') _collapsed: 'true' | 'false';
/** Update the element attribute when the boolean changes */
@Input() set collapsed(value: 'true' | 'false') {
this._collapsed = value;
}
@HostBinding('style.--card-header-color') get cardHeaderColor(): string {
return this.panelFormat === 'outlined' ? 'var(--light-default-color)' : `var(--${this.themeVariant}-default-color)`;
}
@HostBinding('style.--card-body-color') get cardBodyColor(): string {
return this.panelFormat === 'solid' ? `var(--${this.themeVariant}-default-color)` : 'var(--light-default-color)';
}
/**
* The weaver card component constructor
*/
constructor(injector: Injector) {
super(injector);
this.themeVariant = 'primary';
this.collapseMethod = 'none';
}
/**
* Initialize properties dependent on @Input.
*/
ngOnInit(): void {
super.ngOnInit();
this._collapsed = !!this.startCollapsed ? 'true' : 'false';
}
/**
* A handler method for when the enter key is down.
*/
@HostListener('keydown.enter', ['$event']) enterKeyDown($event: Event): void {
$event.stopPropagation();
$event.preventDefault();
this.toggleCollapsibleClick();
}
/**
* A handler method for when the space key is down.
*/
@HostListener('keydown.space', ['$event']) spaceKeyDown($event: Event): void {
$event.stopPropagation();
$event.preventDefault();
this.toggleCollapsibleClick();
}
/**
* Toggle the collapsible state when clicked, if allowed.
*/
toggleCollapsibleClick(): void {
if (this.collapseMethod === 'click') {
this._collapsed = this._collapsed === 'true' ? 'false' : 'true';
}
}
get additionalCardClasses(): string {
let additionalClasses = '';
additionalClasses += ((!this.panelFormat || this.panelFormat === 'mixed') || this.panelFormat === 'outlined') ?
` border-${this.themeVariant} ` : '';
additionalClasses += this.panelFormat === 'solid' ? ` bg-${this.themeVariant}` : '';
return additionalClasses;
}
get additionalHeaderClasses(): string {
let additionalClasses = '';
additionalClasses += ((!this.panelFormat || this.panelFormat === 'mixed') || this.panelFormat === 'outlined') ?
` border-${this.themeVariant} ` : '';
additionalClasses += (this.panelFormat === 'solid' || this.panelFormat === 'mixed') ? ` bg-${this.themeVariant}` : '';
return additionalClasses;
}
}
<div #animationRoot class="wvr-components wvr-card card {{additionalCardClasses}}" [ngClass]="{ 'text-center': textCenter, 'collapsed': _collapsed === 'true' }">
<div class="card-header {{additionalHeaderClasses}}" [wvrContentProjection]="eRef" template="card-header" (click)="toggleCollapsibleClick()" [attr.tabindex]="collapseMethod === 'click' ? '0' : null"></div>
<div class="card-image" [wvrContentProjection]="eRef" template="card-image"></div>
<div [wvrContentProjection]="eRef" template="card-list-top"></div>
<div class="card-body">
<h5 class="card-title" [wvrContentProjection]="eRef" template="card-title"></h5>
<h6 class="card-subtitle" [wvrContentProjection]="eRef" template="card-subtitle"></h6>
<p class="card-text" [wvrContentProjection]="eRef" template="card-text"></p>
<div [wvrContentProjection]="eRef" template="card-content"></div>
</div>
<div [wvrContentProjection]="eRef" template="card-list-bottom"></div>
<div class="card-body card-links" [wvrContentProjection]="eRef" template="card-links"></div>
<div class="card-body card-buttons" [wvrContentProjection]="eRef" template="card-buttons"></div>
<div class="card-footer" [wvrContentProjection]="eRef" template="card-footer"></div>
</div>
<ng-content select="template"></ng-content>
./wvr-card.component.scss
@import "../shared/styles/variables";
:host {
@extend .variables;
--card-color: var(--wvr-white);
.wvr-card {
width: 18rem;
}
font-family: var(--wvr-font-family-sans-serif);
.wvr-card.collapsed .card-header {
border-bottom: 0px;
}
.wvr-card.collapsed .card-body,
.wvr-card.collapsed [template="card-buttons"],
.wvr-card.collapsed [template="card-image"],
.wvr-card.collapsed [template="card-links"],
.wvr-card.collapsed [template="card-list-top"],
.wvr-card.collapsed [template="card-list-bottom"],
.wvr-card.collapsed [template="card-footer"] {
visibility: collapse;
overflow: hidden;
height: 0px;
min-height: 0px;
max-height: 0px;
border: 0px;
margin: 0px;
padding: 0px;
outline: 0px;
}
::ng-deep {
.list-group-flush {
border-top: 1px solid rgba(0, 0, 0, 0.125);
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
.card-header {
color: var(--card-header-color)
}
.card-body {
color: var(--card-body-color)
}
}
}