Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
border:10px solid black;
width:200px;
text-align:center;
line-height:100px;
font-size:50px;
box-sizing:border-box;
overflow:hidden;
}
`],
animations: [trigger(
'openClose',
[
state('collapsed, void', style({height: '0px', color: 'maroon', borderColor: 'maroon'})),
state('expanded', style({height: '*', borderColor: 'green', color: 'green'})),
transition(
'collapsed <=> expanded', [animate(500, style({height: '250px'})), animate(500)])
])],
template: `
<button>Open</button>
<button>Closed</button>
<hr>
<div class="toggle-container">
Look at this box
</div>
`
})
export class MyExpandoCmp {
// TODO(issue/24571): remove '!'.
stateExpression !: string;
constructor() { this.collapse(); }
expand() { this.stateExpression = 'expanded'; }
collapse() { this.stateExpression = 'collapsed'; }
@Component({
selector: 'eftouch-form-card',
templateUrl: './eftouch-form-card.component.html',
animations: [
trigger('cardStatus', [
state('INVALID', style({
backgroundColor: '#FFF',
transform: 'scale(1.0)'
})),
state('VALID', style({
backgroundColor: '#afd29a',
transform: 'scale(1.03)'
})),
transition('INVALID => VALID', animate('100ms ease-in')),
transition('VALID => INVALID', animate('100ms ease-out'))
])
],
// We use providers to link this class' superclass, TangerineBaseCardComponent, to its child EftouchFormCardComponent
// This enables the ContentChildren query in TangerineFormComponent to find its children.
// See https://github.com/Tangerine-Community/Tangerine/issues/369 for more information
providers: [{provide: TangerineBaseCardComponent, useExisting: forwardRef(() => EftouchFormCardComponent)}]
})
export class EftouchFormCardComponent extends TangerineBaseCardComponent implements OnInit {
constructor(fb: FormBuilder, el: ElementRef,service: TangerineFormDefinitionService) {
super(fb, el, service);
}
}
transition('* => void', [
style({
transform: 'scale(1)'
}),
animate(
'250ms ease',
style({
transform: 'scale(0)'
})
)
])
]),
trigger('labelAnim', [
transition('void => *', [
style({ width: '0', opacity: 0 }),
animate('140ms', style({ width: '*', opacity: 1 }))
]),
transition('* => void', [
style({ width: '*', opacity: 1 }),
animate('120ms', style({ width: 0, opacity: 0 }))
])
])
]
})
export class FivFab implements OnInit, OnDestroy, AfterContentInit {
@Input() vertical?: 'top' | 'middle' | 'bottom' | 'none' = 'none';
@Input() horizontal?: 'center' | 'start' | 'end' | 'none' = 'none';
@Input() mode?: 'normal' | 'edge' = 'normal';
@Input() slot: string;
@Input() icon: string;
@Input() spinColor = 'primary';
@Input() color: string;
selector: 'zjs-hint',
template: `
<div role="alert" class="alert alert-{{hintType}} alert-dismissible" id="zjs-hint">
<button class="close" type="button">
<span aria-hidden="true">×</span>
</button>
<strong>{{'warning' | translate}}</strong> {{hintMsg}}
</div>`,
styleUrls: ['./zjs-attachments.less'],
animations: [
trigger('toggleSlid', [
state('void', style({right: '-100%', display: 'none'})),
state('show', style({right: 0, display: 'block'})),
state('hide', style({right: '-100%', display: 'none'})),
transition('* => show', [
animate('0.5s ease')
]),
transition('* => hide', [
animate('0.5s ease')
])
])
],
})
export class ZjsHintComponent {
hintCtrl: 'show' | 'hide' = 'hide';
hintMsg: string;
hintType: string;
constructor(private broadcast: SharedBroadcastService) {
broadcast.hintStream.subscribe((hintInfo: HintInfo) => {
this.hintCtrl = 'show';
this.hintMsg = hintInfo.hintMsg;
import { AppState } from '../../../../shared/state/appState';
import { Store } from '@ngrx/store';
import { ProjectsActions } from '../../../../shared/state/project/projects.actions';
import { Md5 } from 'ts-md5/dist/md5';
import { ErrorService } from '../../../../core/error/error.service';
const EMAIL_REGEX = /^[a-zA-Z0-9+\._%-+]{1,256}@[a-zA-Z0-9][a-zA-Z0-9-]{0,64}(\.[a-zA-Z0-9][a-zA-Z0-9-]{0,25})+$/;
@Component({
selector: 'project-pending-invitations',
animations: [
trigger('slideInOut', [
transition(':enter', [
style({transform: 'translateY(-100%)', opacity: 0}),
animate('200ms ease-out', style({transform: 'translateY(0%)', opacity: 1}))
]),
transition(':leave', [
animate('200ms ease-out', style({transform: 'translateY(-100%)', opacity: 0}))
])
])
],
templateUrl: './project-pending-invitations.component.html',
styleUrls: ['./project-pending-invitations.component.sass']
})
export class ProjectPendingInvitationsComponent {
@Input() project: Project;
roles = ['team member', 'admin'];
cancelInvitationConfirmationViewIndex: Number = -1;
user = {email: null, role: this.roles[0]};
cancelButtonDisabled = false;
template: `
<div class="slider">
<div class="line"></div>
<div class="subline inc"></div>
<div class="subline fill"></div>
<div class="subline dec"></div>
</div>
`,
animations: [
trigger('progressAnim', [
transition('void => *', [
style({ height: '0px' }),
animate('250ms ease-out')
]),
transition('* => void', [
animate('299ms ease-in', style({ height: '0px' }))
])
]),
trigger('fillAnim', [
transition('void => *', [
style({ left: '-5%', width: '5%' }),
animate('850ms ease-out', style({ left: '0%', width: '100%' }))
]),
])
],
styles: [`.slider{position:absolute;width:100%;height:5px;overflow-x:hidden;z-index:5000}.line{position:absolute;opacity:.4;width:240%;height:5px;-webkit-animation:5.6s ease-in-out infinite colorspin;animation:5.6s ease-in-out infinite colorspin}.subline{position:absolute;height:5px;background:inherit}.inc{-webkit-animation:1.6s infinite increase,5.6s ease-in-out infinite colorspin;animation:1.6s infinite increase,5.6s ease-in-out infinite colorspin}.dec{-webkit-animation:1.6s .4s infinite decrease,5.6s ease-in-out infinite colorspin;animation:1.6s .4s infinite decrease,5.6s ease-in-out infinite colorspin}.fill{left:0;width:100%;-webkit-animation:5.6s ease-in-out infinite colorspin;animation:5.6s ease-in-out infinite colorspin}@-webkit-keyframes increase{from{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes increase{from{left:-5%;width:5%}to{left:130%;width:100%}}@-webkit-keyframes decrease{from{left:-80%;width:80%}to{left:110%;width:10%}}@keyframes decrease{from{left:-80%;width:80%}to{left:110%;width:10%}}@-webkit-keyframes colorspin{0%,100%{background-color:#4285f4}25%{background-color:#de3e35}50%{background-color:#f7c223}75%{background-color:#1b9a59}}@keyframes colorspin{0%,100%{background-color:#4285f4}25%{background-color:#de3e35}50%{background-color:#f7c223}75%{background-color:#1b9a59}}`]
}] }
];
/** @nocollapse */
ProgressBar.ctorParameters = () => [
{ type: LoadingService }
];
* usage: [\@tdFadeInOut]="{ value: true | false, params: { duration: 200 }}"
* @type {?}
*/
var tdFadeInOutAnimation = trigger('tdFadeInOut', [
state('0', style({
opacity: '0',
visibility: 'hidden',
})),
state('1', style({
opacity: AUTO_STYLE,
visibility: AUTO_STYLE,
})),
transition('0 => 1', [
group([
query('@*', animateChild(), { optional: true }),
animate('{{ duration }}ms {{ delay }}ms {{ easeOnIn }}'),
]),
], { params: { duration: 150, delay: '0', easeOnIn: 'ease-in' } }),
transition('1 => 0', [
group([
query('@*', animateChild(), { optional: true }),
animate('{{ duration }}ms {{ delay }}ms {{ easeOnOut }}'),
]),
], { params: { duration: 150, delay: '0', easeOnOut: 'ease-out' } }),
]);
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* const tdBounceAnimation
import { trigger, state, style, transition, animate, keyframes, AnimationTriggerMetadata } from '@angular/animations';
import { styles, params } from './timeline-entry-dot.styles';
export const animations: AnimationTriggerMetadata[] = [
trigger('expand', [
state('collapsed', style(styles.collapsed), { params: params.default }),
state('expanded', style(styles.expanded), { params: params.default }),
transition('collapsed => expanded', [
animate('300ms ease', keyframes([
style({ ...styles.collapsed }),
style({ ...styles.transition }),
style({ ...styles.expanded }),
]))
], { params: params.default }),
transition('expanded => collapsed', [
animate('150ms ease', keyframes([
style({ ...styles.expanded }),
style({ ...styles.transition }),
style({ ...styles.collapsed })
]))
], { params: params.default }),
])
]
* Returns an [AnimationTriggerMetadata] object with boolean states for a bounce animation.
*
* usage: [\@tdBounce]="{ value: true | false, params: { duration: 200 }}"
* @type {?}
*/
export var tdBounceAnimation = trigger('tdBounce', [
state('0', style({
transform: 'translate3d(0, 0, 0)',
})),
state('1', style({
transform: 'translate3d(0, 0, 0)',
})),
transition('0 <=> 1', [
group([
query('@*', animateChild(), { optional: true }),
animate('{{ duration }}ms {{ delay }}ms {{ ease }}', keyframes([
style({
animationTimingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',
transform: 'translate3d(0, 0, 0)',
offset: 0,
}),
style({
animationTimingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)',
transform: 'translate3d(0, 0, 0)',
offset: 0.2,
}),
style({
animationTimingFunction: 'cubic-bezier(0.755, 0.050, 0.855, 0.060)',
transform: 'translate3d(0, -30px, 0)',
offset: 0.4,
}),
style({
animate(300, keyframes([
style({ opacity: 1, transform: 'translateY(0)', offset: 0 }),
style({ opacity: 1, transform: 'translateY(-15px)', offset: 0.7 }),
style({ opacity: 0, transform: 'translateY(100%)', offset: 1 }),
]))
])
]),
trigger('itemEnter', [
state('in', style({ transform: 'translateY(0)' })),
transition('void => *', [
style({ transform: 'translateY(-100%)', opacity: 0 }),
animate('300ms ease-out')
]),
transition('* => void', [
animate('300ms ease-out', style({ transform: 'scaleY(0) translateY(200px)' }))
])
])
]
})
export class AnimationsRepeatingItemsComponent {
public state = 'inactive';
public ourItems = [
'Start the new app project',
'Work on blog',
'Lunch at 1'
];
public toggleFocus() {
this.state = (this.state === 'inactive' ? 'active' : 'inactive');
}