src/app/shared/components/visibility-toggle/visibility-toggle.component.ts
Component for easily adding a visibility toggle with customizable label and pre set up emitter.
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | ccf-visibility-toggle |
| styleUrls | ./visibility-toggle.component.scss |
| templateUrl | ./visibility-toggle.component.html |
Properties |
|
Methods |
Inputs |
Outputs |
HostBindings |
constructor(ga: GoogleAnalyticsService)
|
||||||||
|
Creates an instance of visibility toggle component.
Parameters :
|
| disabled | |
Type : boolean
|
|
Default value : false
|
|
|
Whether or not the slider is disabled |
|
| toggleLabel | |
Type : string
|
|
Default value : ''
|
|
|
Input that allows the label to be set from outside the component, making it more reusable. |
|
| visible | |
Type : boolean
|
|
Default value : false
|
|
|
Keeps track of the current visibility state of the toggle. |
|
| visibilityChanged | |
Type : EventEmitter
|
|
|
Outputs the new visibility state whenever toggleVisibility() changes it. |
|
| class |
Type : "ccf-visibility-toggle"
|
Default value : 'ccf-visibility-toggle'
|
|
HTML class name |
| toggleVisibility |
toggleVisibility()
|
|
Toggles visibility and emits the new value.
Returns :
void
|
| Readonly clsName |
Type : string
|
Default value : 'ccf-visibility-toggle'
|
Decorators :
@HostBinding('class')
|
|
HTML class name |
import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
import { GoogleAnalyticsService } from 'ngx-google-analytics';
/**
* Component for easily adding a visibility toggle with customizable label and
* pre set up emitter.
*/
@Component({
selector: 'ccf-visibility-toggle',
templateUrl: './visibility-toggle.component.html',
styleUrls: ['./visibility-toggle.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class VisibilityToggleComponent {
/**
* HTML class name
*/
@HostBinding('class') readonly clsName = 'ccf-visibility-toggle';
/**
* Keeps track of the current visibility state of the toggle.
*/
@Input() visible = false;
/**
* Input that allows the label to be set from outside the component,
* making it more reusable.
*/
@Input() toggleLabel = '';
/**
* Whether or not the slider is disabled
*/
@Input() disabled = false;
/**
* Outputs the new visibility state whenever toggleVisibility()
* changes it.
*/
@Output() readonly visibilityChanged = new EventEmitter<boolean>();
/**
* Creates an instance of visibility toggle component.
*
* @param ga Analytics service
*/
constructor(private readonly ga: GoogleAnalyticsService) {}
/**
* Toggles visibility and emits the new value.
*/
toggleVisibility(): void {
this.visible = !this.visible;
this.ga.event('visibility_toggled', 'visibility_toggle', '' + this.visible);
this.visibilityChanged.emit(this.visible);
}
}
<div class="toggle-div">
<mat-chip (click)="toggleVisibility()" class="toggle-wrapper" [class.disabled]="disabled">
<div class="icon-background" [class.disabled]="disabled">
<mat-icon class="icon block" [class.hidden]="visible" svgIcon="app:visibility_off_cube"></mat-icon>
<mat-icon class="icon green" [class.hidden]="!visible">done</mat-icon>
</div>
<div class="toggle-label">{{ toggleLabel }}</div>
</mat-chip>
</div>
./visibility-toggle.component.scss
:host {
height: 3rem;
display: flex;
align-items: center;
::ng-deep .mat-mdc-chip {
padding: 0 !important;
&.disabled {
cursor: not-allowed !important;
pointer-events: none;
}
.mdc-evolution-chip__action--primary {
padding: 0;
cursor: pointer;
}
.mdc-evolution-chip__text-label {
display: flex;
align-items: center;
font-size: 14px;
}
}
.toggle-div {
width: 100%;
display: flex;
justify-content: center;
padding-top: 1.5rem;
.toggle-wrapper {
-webkit-user-select: none;
-moz-user-select: none;
cursor: pointer;
border-width: 0.075rem;
border-style: solid;
height: 2.25rem;
border-radius: 1.5rem;
transition: background-color 0.2s ease-in-out;
.icon-background {
border-radius: 1.5rem;
height: 2.06rem;
width: 2.06rem;
display: flex;
align-items: center;
justify-content: center;
.icon {
transition: 0.6s;
position: absolute;
&.block {
width: 1.125rem;
}
&.hidden {
opacity: 0;
}
}
}
.toggle-label {
font-weight: bold;
margin-left: 0.5rem;
padding-right: 1.25rem;
padding-left: 0.25rem;
}
}
}
}