projects/wvr-elements/src/lib/wvr-button/wvr-button.component.ts
| changeDetection | ChangeDetectionStrategy.Default |
| selector | wvr-button-component |
| styleUrls | ./wvr-button.component.scss |
| templateUrl | ./wvr-button.component.html |
constructor(injector: Injector)
|
||||||
|
Parameters :
|
| background | |
Type : string
|
|
|
Allows for the override of background |
|
| backgroundActive | |
Type : string
|
|
|
Allows for the override of active background |
|
| backgroundHover | |
Type : string
|
|
|
Allows for the override of hover background |
|
| borderActive | |
Type : string
|
|
|
Allows for the override of active border |
|
| borderColor | |
Type : string
|
|
|
Allows for the override of border |
|
| borderFocus | |
Type : string
|
|
|
Allows for the override of button border in focus state |
|
| borderHover | |
Type : string
|
|
|
Allows for the override of hover border |
|
| borderRadius | |
Type : any
|
|
|
Allows for the override of button border radius |
|
| boxShadowFocus | |
Type : string
|
|
|
Allows for override of box-shadow propery when the button is in focus state |
|
| btnSize | |
Type : "large" | "small" | "block"
|
|
|
Used to define the size for button component. |
|
| btnTxt | |
Type : string
|
|
| btnType | |
Type : "button" | "checkbox" | "radio" | "reset" | "submit" | "link"
|
|
Default value : 'button'
|
|
|
Used to define the type of a button. |
|
| color | |
Type : string
|
|
|
Allows for the override of color |
|
| colorActive | |
Type : string
|
|
|
Allows for the override of active color |
|
| colorHover | |
Type : string
|
|
|
Allows for the override of hover color |
|
| cursor | |
Type : any
|
|
|
Allows for the override of button cursor property |
|
| disabled | |
Type : boolean
|
|
Default value : false
|
|
| dispatchAction | |
Type : string
|
|
| dispatchActionProps | |
Type : string
|
|
| dispatchActions | |
Type : string
|
|
| emitEvent | |
Type : string
|
|
| fontFamily | |
Type : any
|
|
|
Allows for the override of button font family property |
|
| fontSize | |
Type : any
|
|
|
Allows for the override of button font size property |
|
| fontWeight | |
Type : any
|
|
|
Allows for the override of button font weight property |
|
| href | |
Type : string
|
|
|
Allows for the button component to be an anchor tag component if href property present. |
|
| lineHeight | |
Type : any
|
|
|
Allows for the override of button hover line height property |
|
| padding | |
Type : any
|
|
|
Allows for the override of button padding property |
|
| testInput | |
Type : boolean
|
|
| textAlign | |
Type : any
|
|
|
Allows for the override of button text align property |
|
| themeVariant | |
Type : ThemeVariantName
|
|
Default value : 'primary'
|
|
|
Inherited from
WvrBaseComponent
|
|
|
Defined in
WvrBaseComponent:19
|
|
|
Used to define the class type for button component. |
|
| verticalAlign | |
Type : any
|
|
|
Allows for the override of button vertical align property |
|
| 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. |
|
| 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
|
| ngAfterViewInit |
ngAfterViewInit()
|
|
Called after the view has been intialized. Handles the rendering of the projected content.
Returns :
void
|
| onClick |
onClick()
|
|
Returns :
void
|
| Private parseActionNameAndType | ||||||
parseActionNameAndType(nameAndType: string)
|
||||||
|
Parameters :
Returns :
any
|
| 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
|
| ngOnInit |
ngOnInit()
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:145
|
|
Used to setup this component for animating.
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
|
| Private _action |
Type : any
|
| Private _actionProps |
Type : any
|
| Private _dispatchActions |
Type : Array<ActionAndProps>
|
| Optional actionRegistry |
Type : ActionRegistryService
|
| htmlId |
Default value : `wvr-button-${this.id}`
|
| variantTypes |
Type : []
|
Default value : ['button']
|
|
Inherited from
WvrBaseComponent
|
|
Defined in
WvrBaseComponent:140
|
| 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 |
| 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 |
| background | ||||||
setbackground(value: string)
|
||||||
|
Allows for the override of background
Parameters :
Returns :
void
|
| backgroundActive | ||||||
setbackgroundActive(value: string)
|
||||||
|
Allows for the override of active background
Parameters :
Returns :
void
|
| backgroundHover | ||||||
setbackgroundHover(value: string)
|
||||||
|
Allows for the override of hover background
Parameters :
Returns :
void
|
| borderColor | ||||||
setborderColor(value: string)
|
||||||
|
Allows for the override of border
Parameters :
Returns :
void
|
| borderActive | ||||||
setborderActive(value: string)
|
||||||
|
Allows for the override of active border
Parameters :
Returns :
void
|
| borderHover | ||||||
setborderHover(value: string)
|
||||||
|
Allows for the override of hover border
Parameters :
Returns :
void
|
| borderFocus | ||||||
setborderFocus(value: string)
|
||||||
|
Allows for the override of button border in focus state
Parameters :
Returns :
void
|
| boxShadowFocus | ||||||
setboxShadowFocus(value: string)
|
||||||
|
Allows for override of box-shadow propery when the button is in focus state
Parameters :
Returns :
void
|
| color | ||||||
setcolor(value: string)
|
||||||
|
Allows for the override of color
Parameters :
Returns :
void
|
| colorActive | ||||||
setcolorActive(value: string)
|
||||||
|
Allows for the override of active color
Parameters :
Returns :
void
|
| colorHover | ||||||
setcolorHover(value: string)
|
||||||
|
Allows for the override of hover color
Parameters :
Returns :
void
|
| dispatchAction | ||||||
setdispatchAction(value: string)
|
||||||
|
Parameters :
Returns :
void
|
| dispatchActionProps | ||||||
setdispatchActionProps(value: string)
|
||||||
|
Parameters :
Returns :
void
|
| dispatchActions | ||||||
setdispatchActions(value: string)
|
||||||
|
Parameters :
Returns :
void
|
import { AfterViewInit, ChangeDetectionStrategy, Component, HostBinding, Injector, Input } from '@angular/core';
import * as JSON5 from 'json5';
import { ActionRegistryService } from '../core/action-registry.service';
import { ThemeVariantName } from '../shared/theme';
import { projectContent } from '../shared/utility/projection.utility';
import { WvrBaseComponent } from '../shared/wvr-base.component';
@Component({
selector: 'wvr-button-component',
templateUrl: './wvr-button.component.html',
styleUrls: ['./wvr-button.component.scss'],
changeDetection: ChangeDetectionStrategy.Default
})
export class WvrButtonComponent extends WvrBaseComponent implements AfterViewInit {
htmlId = `wvr-button-${this.id}`;
/** Used to define the class type for button component. */
@Input() themeVariant: ThemeVariantName = 'primary';
/** Used to define the size for button component. */
@Input() btnSize: 'large' | 'small' | 'block';
/** Used to define the type of a button. */
@Input() btnType: 'button' | 'checkbox' | 'radio' | 'reset' | 'submit' | 'link' = 'button';
/** Allows for the button component to be an anchor tag component if href property present. */
@Input() href: string;
@Input() disabled = false;
/** Allows for the override of background */
@Input() set background(value: string) {
this.applyThemeOverride(`--${this.themeVariant}-button-bg`, value);
}
/** Allows for the override of active background */
@Input() set backgroundActive(value: string) {
this.applyThemeOverride(`--${this.themeVariant}-button-active-bg`, value);
}
/** Allows for the override of hover background */
@Input() set backgroundHover(value: string) {
this.applyThemeOverride(`--${this.themeVariant}-button-hover-bg`, value);
}
/** Allows for the override of border */
@Input() set borderColor(value: string) {
this.applyThemeOverride(`--${this.themeVariant}-button-border`, value);
}
/** Allows for the override of active border */
@Input() set borderActive(value: string) {
this.applyThemeOverride(`--${this.themeVariant}-button-active-border`, value);
}
/** Allows for the override of hover border */
@Input() set borderHover(value: string) {
this.applyThemeOverride(`--${this.themeVariant}-button-hover-border`, value);
}
/** Allows for the override of button border in focus state */
@Input() set borderFocus(value: string) {
this.applyThemeOverride(`--${this.themeVariant}-button-focus-border`, value);
}
/** Allows for override of box-shadow propery when the button is in focus state */
@Input() set boxShadowFocus(value: string) {
this.applyThemeOverride(`--${this.themeVariant}-button-focus-box-shadow`, value);
}
/** Allows for the override of color */
@Input() set color(value: string) {
this.applyThemeOverride(`--${this.themeVariant}-button-color`, value);
}
/** Allows for the override of active color */
@Input() set colorActive(value: string) {
this.applyThemeOverride(`--${this.themeVariant}-button-active-color`, value);
}
/** Allows for the override of hover color */
@Input() set colorHover(value: string) {
this.applyThemeOverride(`--${this.themeVariant}-button-hover-color`, value);
}
/** Allows for the override of button border radius */
@HostBinding('style.--wvr-btn-border-radius') @Input() borderRadius;
/** Allows for the override of button cursor property */
@HostBinding('style.--wvr-btn-cursor') @Input() cursor;
/** Allows for the override of button font family property */
@HostBinding('style.--wvr-btn-font-family-sans-serif') @Input() fontFamily;
/** Allows for the override of button font size property */
@HostBinding('style.--wvr-btn-font-size') @Input() fontSize;
/** Allows for the override of button font weight property */
@HostBinding('style.--wvr-btn-font-weight') @Input() fontWeight;
/** Allows for the override of button hover line height property */
@HostBinding('style.--wvr-btn-line-height') @Input() lineHeight;
/** Allows for the override of button padding property */
@HostBinding('style.--wvr-btn-padding') @Input() padding;
/** Allows for the override of button text align property */
@HostBinding('style.--wvr-btn-text-align') @Input() textAlign;
/** Allows for the override of button vertical align property */
@HostBinding('style.--wvr-btn-vertical-align') @Input() verticalAlign;
private _action: any;
@Input() set dispatchAction(value: string) {
this._action = this.parseActionNameAndType(value);
}
private _actionProps: any;
@Input() set dispatchActionProps(value: string) {
this._actionProps = JSON5.parse(value);
}
private _dispatchActions: Array<ActionAndProps>;
@Input() set dispatchActions(value: string) {
const actionInputs = JSON5.parse(value);
this._dispatchActions = actionInputs.map(ai =>
({
action: this.parseActionNameAndType(ai.action),
props: ai.props
}));
}
@Input() emitEvent: string;
@Input() btnTxt: string;
@Input() testInput: boolean;
variantTypes = ['button'];
actionRegistry?: ActionRegistryService;
constructor(injector: Injector) {
super(injector);
this.actionRegistry = injector.get(ActionRegistryService);
}
/** Called after the view has been intialized. Handles the rendering of the projected content. */
ngAfterViewInit(): void {
projectContent(this.eRef, 'template[button-content]', 'span[button-content]');
}
onClick(): void {
if (this._dispatchActions) {
this._dispatchActions.forEach(actionAndProp => {
this.store.dispatch(actionAndProp.action(
actionAndProp.props
));
});
} else if (this._action) {
this._actionProps ?
this.store.dispatch(this._action(
this._actionProps
)) :
this.store.dispatch(this._action());
}
if (this.emitEvent) {
this.eRef.nativeElement.dispatchEvent(new CustomEvent(this.emitEvent, {
bubbles: true,
detail: {
data: (this.eRef.nativeElement as HTMLElement).dataset,
button: this
}
}));
}
}
// tslint:disable-next-line:prefer-function-over-method
private parseActionNameAndType(nameAndType: string): any {
const parts = nameAndType.split('.');
if (parts.length !== 2) {
console.warn(`'${nameAndType}' is not a valid value for 'dispatch-action'. Must in form '[ActionType].[ActionName]'`);
return;
}
const registeredActions = this.actionRegistry.getActions(parts[0]);
if (!registeredActions) {
console.warn(`No registered actions were found for '${nameAndType}'.`);
return;
}
if (!parts[1] || !registeredActions[parts[1]]) {
const actions = Object.keys(registeredActions)
.join(',');
console.warn(`'${parts[1]}' is not a known action of ${parts[0]} (${actions}).`);
return;
}
return registeredActions[parts[1]];
}
}
export interface ActionAndProps {
action: any;
props: Object;
}
<button-wrapper #animationRoot>
<button *ngIf="!href"
[attr.id]="htmlId"
[type]="btnType"
[ngClass]="{
'btn-lg': btnSize === 'large',
'btn-sm': btnSize === 'small',
'btn-block': btnSize === 'block',
'btn-link': btnType === 'link'
}"
[disabled]="disabled"
(click)="onClick()"
role="button"
class="wvr-components wvr-button btn {{btnType!=='link' ? 'btn-' + themeVariant : ''}}">
<ng-container *ngTemplateOutlet="content"></ng-container>
</button>
<a *ngIf="href"
[attr.id]="htmlId"
[attr.href]="disabled ? undefined : href"
[ngClass]="{
'btn-lg': btnSize === 'large',
'btn-sm': btnSize === 'small',
'btn-block': btnSize === 'block',
'btn-link': btnType === 'link',
'disabled': disabled
}"
role="button"
aria-label="button"
class="wvr-components wvr-button btn {{btnType!=='link' ? 'btn-' + themeVariant : ''}}">
<ng-container *ngTemplateOutlet="content"></ng-container>
</a>
</button-wrapper>
<ng-template #content>
<span button-content>
<ng-content select="template[button-content]"></ng-content>
</span>
{{btnTxt}}
</ng-template>
./wvr-button.component.scss
@import "../shared/styles/variables";
:host {
@extend .variables;
--wvr-btn-cursor-default: pointer;
--wvr-btn-font-family-sans-serif-default: var(--wvr-font-family-sans-serif);
--wvr-btn-font-size-default: 1rem;
--wvr-btn-font-weight-default: normal;
--wvr-btn-line-height-default: 1.5;
--wvr-btn-padding-default: .375rem .75rem;
--wvr-btn-text-align-default: center;
--wvr-btn-vertical-align-default: middle;
--wvr-btn-cursor: var(--wvr-btn-cursor-default);
--wvr-btn-font-family-sans-serif: var(--wvr-btn-font-family-sans-serif-default);
--wvr-btn-font-size: var(--wvr-btn-font-size-default);
--wvr-btn-font-weight: var(--wvr-btn-font-weight-default);
--wvr-btn-line-height: var(--wvr-btn-line-height-default);
--wvr-btn-padding: var(--wvr-btn-padding-default);
--wvr-btn-text-align: var(--wvr-btn-text-align-default);
--wvr-btn-vertical-align: var(--wvr-btn-vertical-align-default);
button-wrapper {
display: inline-block;
overflow: hidden;
a.disabled {
color: gray;
cursor: not-allowed;
text-decoration: underline;
}
span[button-content] {
display: inline-block;
}
}
.wvr-button.btn {
cursor: var(--wvr-btn-cursor-default);
font-family: var(--wvr-btn-font-family-sans-serif);
font-size: var(--wvr-btn-font-size);
font-weight: var(--wvr-btn-font-weight);
line-height: var(--wvr-btn-line-height);
padding: var(--wvr-btn-padding);
text-align: var(--wvr-btn-text-align);
vertical-align: var(--wvr-btn-vertical-align);
}
.wvr-button.btn:not(:disabled):not(.disabled) {
cursor: var(--wvr-btn-cursor);
}
.btn {
::ng-deep {
wvre-icon {
margin: 0px 5px 0px 0px;
svg {
vertical-align: middle;
}
}
}
}
}