projects/wvr-elements/src/lib/wvr-text/wvr-text.component.ts
The Weaver Text Component allows for a node based textual entry.
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | wvr-text-component |
| styleUrls | ./wvr-text.component.scss |
| templateUrl | ./wvr-text.component.html |
Properties |
|
Methods |
Inputs |
Outputs |
HostBindings |
Accessors |
| color | |
Type : string
|
|
| fontFamily | |
Type : any
|
|
|
Allows for the override of font-family property for wvre-text |
|
| fontSize | |
Type : any
|
|
|
Allows for the override of font-size property for wvre-text |
|
| fontStretch | |
Type : any
|
|
|
Allows for the override of font-stretch property for wvre-text |
|
| fontStyle | |
Type : any
|
|
|
Allows for the override of font-style property for wvre-text |
|
| fontVariant | |
Type : any
|
|
|
Allows for the override of font-variant property for wvre-text |
|
| fontWeight | |
Type : any
|
|
|
Allows for the override of font-weight property for wvre-text |
|
| letterSpacing | |
Type : any
|
|
|
Allows for the override of letter-spacing property for wvre-text |
|
| lineHeight | |
Type : any
|
|
|
Allows for the override of line-height property for wvre-text |
|
| textAlign | |
Type : any
|
|
|
Allows for the override of text-align property for wvre-text |
|
| textDecoration | |
Type : any
|
|
|
Allows for the override of text-decoration property for wvre-text |
|
| textDirection | |
Type : any
|
|
|
Allows for the override of direction property for wvre-text |
|
| textIndent | |
Type : any
|
|
|
Allows for the override of text-indent property for wvre-text |
|
| textShadow | |
Type : any
|
|
|
Allows for the override of text-shadow property for wvre-text |
|
| textTransform | |
Type : any
|
|
|
Allows for the override of text-transform property for wvre-text |
|
| themeVariant | |
Type : ThemeVariantName
|
|
|
Inherited from
WvrBaseComponent
|
|
|
Defined in
WvrBaseComponent:22
|
|
| value | |
Type : string
|
|
|
The text value to be displayed in the text node. |
|
| wordSpacing | |
Type : any
|
|
|
Allows for the override of word-spacing property for wvre-text |
|
| 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. |
|
| style.--wvr-text-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
|
| 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 _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 |
| textColor |
gettextColor()
|
import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
import { WvrBaseComponent } from '../shared/wvr-base.component';
import { ThemeVariantName } from '../shared/theme';
/**
* The Weaver Text Component allows for a node based textual entry.
*/
@Component({
selector: 'wvr-text-component',
templateUrl: './wvr-text.component.html',
styleUrls: ['./wvr-text.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class WvrTextComponent extends WvrBaseComponent {
/** The text value to be displayed in the text node. */
@Input() value: string;
@Input() themeVariant: ThemeVariantName;
@Input() color: string;
/** Allows for the override of font-size property for wvre-text */
@HostBinding('style.--wvr-text-font-size') @Input() fontSize;
/** Allows for the override of font-family property for wvre-text */
@HostBinding('style.--wvr-text-font-family') @Input() fontFamily;
/** Allows for the override of font-style property for wvre-text */
@HostBinding('style.--wvr-text-font-style') @Input() fontStyle;
/** Allows for the override of font-variant property for wvre-text */
@HostBinding('style.--wvr-text-font-variant') @Input() fontVariant;
/** Allows for the override of font-weight property for wvre-text */
@HostBinding('style.--wvr-text-font-weight') @Input() fontWeight;
/** Allows for the override of font-stretch property for wvre-text */
@HostBinding('style.--wvr-text-font-stretch') @Input() fontStretch;
/** Allows for the override of line-height property for wvre-text */
@HostBinding('style.--wvr-text-line-height') @Input() lineHeight;
@HostBinding('style.--wvr-text-color') get textColor(): string {
return this.themeVariant ? `var(--${this.themeVariant}-button-color)` : this.color;
}
/** Allows for the override of text-align property for wvre-text */
@HostBinding('style.--wvr-text-text-align') @Input() textAlign;
/** Allows for the override of text-decoration property for wvre-text */
@HostBinding('style.--wvr-text-text-decoration') @Input() textDecoration;
/** Allows for the override of text-transform property for wvre-text */
@HostBinding('style.--wvr-text-text-transform') @Input() textTransform;
/** Allows for the override of text-indent property for wvre-text */
@HostBinding('style.--wvr-text-text-indent') @Input() textIndent;
/** Allows for the override of letter-spacing property for wvre-text */
@HostBinding('style.--wvr-text-letter-spacing') @Input() letterSpacing;
/** Allows for the override of direction property for wvre-text */
@HostBinding('style.--wvr-text-direction') @Input() textDirection;
/** Allows for the override of text-shadow property for wvre-text */
@HostBinding('style.--wvr-text-text-shadow') @Input() textShadow;
/** Allows for the override of word-spacing property for wvre-text */
@HostBinding('style.--wvr-text-word-spacing') @Input() wordSpacing;
}
<wvre-text-node>{{value}}</wvre-text-node>
./wvr-text.component.scss
@import "../shared/styles/variables";
:host {
@extend .variables;
//font rules
--wvr-text-font-size: default;
--wvr-text-font-family: default;
--wvr-text-font-style: default;
--wvr-text-font-variant: default;
--wvr-text-font-weight: default;
--wvr-text-font-stretch: default;
--wvr-text-line-height: default;
//text rules
--wvr-text-color: default;
--wvr-text-direction:default;
--wvr-text-letter-spacing:default;
--wvr-text-text-align: default;
--wvr-text-text-decoration:default;
--wvr-text-text-transform:default;
--wvr-text-text-indent:default;
--wvr-text-text-shadow: default;
--wvr-text-word-spacing:default;
}
wvre-text-node {
//font rules
font-family: var(--wvr-text-font-family);
font-size: var(--wvr-text-font-size);
font-stretch: var(--wvr-text-font-stretch);
font-style: var(--wvr-text-font-style);
font-variant: var(--wvr-text-font-variant);
font-weight: var(--wvr-text-font-weight);
line-height: var(--wvr-text-line-height);
//text rules
color: var(--wvr-text-color);
direction: var(--wvr-text-direction);
letter-spacing: var(--wvr-text-letter-spacing);
text-align: var(--wvr-text-text-align);
text-decoration:var(--wvr-text-text-decoration);
text-indent: var(--wvr-text-text-indent);
text-shadow: var(--wvr-text-text-shadow);
text-transform: var(--wvr-text-text-transform);
word-spacing: var(--wvr-text-word-spacing);
}