Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
opacity: 0
})),
state('active', style({
opacity: 1
})),
transition('inactive => active', animate('750ms ease-in')),
transition('active => inactive', animate('750ms ease-out'))
]),
trigger(
'showHideAnimation',
[
transition(':enter', [ // :enter is alias to 'void => *'
style({opacity: 0}),
animate(750, style({opacity: 1}))
]),
transition(':leave', [ // :leave is alias to '* => void'
animate(750, style({opacity: 0}))
])
])
],
providers: [PropertyControlService]
})
export class DynamicFormComponent implements OnInit, AfterViewInit {
@Input() gadgetTags: any[];//todo - use to control what endpoints are displayed
@Input() propertyPages: any[];
@Input() instanceId: number;
@Output() updatePropertiesEvent: EventEmitter = new EventEmitter(true);
currentTab = 'run';
endPoints: EndPoint[];
state = 'inactive';
lastActiveTab = {};
/**
* This is the right sidebar, where attributes of nodes and relationships get displayed.
*/
@Component({
selector: 'winery-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.css'],
animations: [
trigger('sidebarAnimationStatus', [
state('in', style({ transform: 'translateX(0)' })),
transition('void => *', [
style({ transform: 'translateX(100%)' }),
animate('100ms cubic-bezier(0.86, 0, 0.07, 1)')
]),
transition('* => void', [
animate('200ms cubic-bezier(0.86, 0, 0.07, 1)', style({
opacity: 0,
transform: 'translateX(100%)'
}))
])
])
]
})
export class SidebarComponent implements OnInit, OnDestroy {
// ngRedux sidebarSubscription
sidebarSubscription;
sidebarState: any;
sidebarAnimationStatus: string;
maxInputEnabled = true;
propertyDefinitionType: string;
<div class="oc-collapsible-body">
</div>
`,
styleUrls: ['./oc-collapsible.scss'],
encapsulation: ViewEncapsulation.None,
animations: [
trigger('ocToggle', [
state('0', style({
height: 0
})),
state('1', style({
height: '*'
})),
transition('0 => 1', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
transition('1 => 0', animate('225ms cubic-bezier(0.4,0.0,0.2,1)'))
])
]
})
export class OCCollapsibleComponent implements AfterContentInit, OnChanges {
@ContentChild(OCCollapsibleHeaderComponent) public header: OCCollapsibleHeaderComponent;
@Input() showToggle: boolean = true;
@Input() showDivider: boolean = true;
@HostBinding('class.active')
@Input() active: boolean = false;
ngAfterContentInit(): void {
this.header.onClick.subscribe(() => this.toggle());
this.updateToggle(this.showToggle);
}
import { I18nPluralPipe } from '@angular/common';
@Component({
templateUrl: './identity.html',
styleUrls: [
],
animations: [
trigger('overlayState', [
state('hidden', style({
opacity: 0
})),
state('visible', style({
opacity: 1
})),
transition('visible => hidden', animate('400ms ease-in')),
transition('hidden => visible', animate('400ms ease-out'))
]),
trigger('notificationTopbar', [
state('hidden', style({
height: '0',
opacity: 0
})),
state('visible', style({
height: '*',
opacity: 1
})),
transition('visible => hidden', animate('400ms ease-in')),
transition('hidden => visible', animate('400ms ease-out'))
])
]
@Component({
selector: 'nm-slide',
templateUrl: './slide.component.html',
styleUrls: ['./slide.component.scss'],
animations: [
trigger('animate', [
state('show', style({
opacity: 1,
display: 'block'
})),
state('hide', style({
opacity: 0,
display: 'none'
})),
transition('hide => show', animate('1000ms ease')),
transition('show => hide', animate('800ms ease-out'))
])
]
})
export class NmSlideComponent implements OnInit, OnDestroy {
/**
* Slide 在 Carousel 中的索引
*/
@Input() public index: number;
/**
* Slide 方向
*/
@Input() public direction: Direction;
animate('150ms cubic-bezier(0.25, 0.8, 0.25, 1)')
]),
state('top', style({
opacity: 1,
transform: 'scaleY(1)',
transformOrigin: '0% 100%'
})),
transition('void => top', [
style({
opacity: 0,
transform: 'scaleY(0)',
transformOrigin: '0% 100%'
}),
animate('150ms cubic-bezier(0.25, 0.8, 0.25, 1)')
]),
transition('* => void', [
animate('250ms 100ms linear', style({opacity: 0}))
])
]);
@Component({
selector: 'ui-dialog',
templateUrl: './diolog.component.html',
animations: [
trigger('dialogAnimation', [
transition(':enter', animate('.1s', keyframes([
style({
transform: 'translateY(-100%)',
offset: 0
}),
style({
transform: 'translateY(0)',
offset: 1
})
]))),
transition(':leave', animate(100, keyframes([
style({
transform: 'translateY(0)',
offset: 0
}),
style({
transform: 'translateY(-100%)',
offset: 1
})
])))
])
]
})
export class DialogComponent implements OnInit, OnDestroy {
show: boolean = false;
export function fadeInDownBigAnimation(options?: IFadeInDownBigAnimationOptions): AnimationTriggerMetadata {
return trigger((options && options.anchor) || 'fadeInDownBig', [
transition(
'0 => 1',
[
...(options && options.animateChildren === 'before' ? [query('@*', animateChild(), { optional: true })] : []),
group([
useAnimation(fadeInDownBig),
...(!options || !options.animateChildren || options.animateChildren === 'together'
? [query('@*', animateChild(), { optional: true })]
: [])
]),
...(options && options.animateChildren === 'after' ? [query('@*', animateChild(), { optional: true })] : [])
],
{
params: {
delay: (options && options.delay) || 0,
duration: (options && options.duration) || DEFAULT_DURATION,
translate: (options && options.translate) || '2000px'
),
],
{
optional: true,
},
),
query(
':leave',
[style({ opacity: 1, width: '100%' }), animate('.35s ease-out', style({ opacity: 0 }))],
{
optional: true,
},
),
]),
]),
transition('DetailPage => HomePage', [
query(':enter, :leave', style({ position: 'absolute', left: 0, right: 0 }), {
optional: true,
}),
group([
query(
':enter',
[
style({
opacity: 0,
}),
animate(
'.35s ease-out',
style({
opacity: 1,
}),
),
style({
transform: 'translateX(0%)',
}))
], {optional: true}),
query('[previousTable]', [
style({
transform: 'translateX(0%)',
}),
animate('.35s ease-in-out',
style({
transform: 'translateX(-100%)',
}))
], {optional: true})
])
]),
transition('* => left', [
group([
query('[currentTable]', [
style({
transform: 'translateX(-100%)',
position: 'absolute'
}),
animate('.35s ease-in-out',
style({
transform: 'translateX(0%)',
}))
], {optional: true}),
query('[previousTable]', [
style({
transform: 'translateX(0%)',
}),
animate('.35s ease-in-out',