\n WARNING this is a BETA site! SOF and\n customer distinction information may not be up to date. Please refer to\n https://cxsof.dow.com for the most up to\n date SOF information.\n
\n\n Distinction Information is Dow Confidential - Internal and is not to be shared externally\n
\n","\n{{ link.subheading }}
\n \nLoading...
","// This is the logic for the left sidebar animations, using animation builder instead of DSL (Domain specific\n// language). These functions return AnimationPlayer instances, which can be used to run the animations on the\n// ElementRef, that was passed in as the second parameter.\n\n// The standard animation DSL (the array in the @Component decorator and the @trigger syntax in the templates)\n// has some bugs with the same animation using query(animateChild) on itself and with using that on grandchild\n// components. The programatic aproach does not block child animations, which does mean children must have\n// their exit animations timed properly to match this, or at least close, but that allows it to work in this\n// case while DSL would not work (believe me, I tried!!!).\n\nimport { animate, AnimationBuilder, AnimationPlayer, sequence, style } from '@angular/animations';\nimport { ElementRef } from '@angular/core';\n\nimport { SizeDependentState } from './page.models';\n\nconst leftBodyStyle = {\n marginLeft: '300px'\n};\nconst noneBodyStyle = {\n marginLeft: 0\n};\nconst contentBodyStyle = {\n marginLeft: 0\n};\n\nexport function buildLeftBodyAnimations(\n builder: AnimationBuilder,\n bodyRef: ElementRef,\n oldState: SizeDependentState,\n newState: SizeDependentState,\n isFirstRun: boolean = false\n): AnimationPlayer {\n if (!bodyRef) {\n return null;\n }\n\n const newSetting = newState.bodyAnimation.leftSidebar;\n const oldSetting = oldState ? oldState.bodyAnimation.leftSidebar : 'void';\n\n const applyDefault = (): AnimationPlayer => {\n let stateStyle = {};\n switch (newSetting) {\n case 'content':\n stateStyle = contentBodyStyle;\n break;\n case 'left':\n stateStyle = leftBodyStyle;\n break;\n case 'none':\n case 'null':\n default:\n stateStyle = noneBodyStyle;\n break;\n }\n return builder\n .build([style(stateStyle)])\n .create(bodyRef.nativeElement, {});\n };\n\n if (isFirstRun || newSetting === oldSetting) {\n //just apply the style\n return applyDefault();\n } else {\n switch (oldSetting) {\n case 'content':\n switch (newSetting) {\n case 'left':\n return builder\n .build([\n style({ marginLeft: '100%' }),\n animate(\n '550ms cubic-bezier(0, 0, 0.2, 1)',\n style(leftBodyStyle)\n )\n ])\n .create(bodyRef.nativeElement, {});\n }\n break;\n case 'left':\n switch (newSetting) {\n case 'content':\n return builder\n .build([\n style(leftBodyStyle),\n animate(\n '350ms cubic-bezier(0.4, 0, 1, 1)',\n style({ marginLeft: '100%' })\n ),\n style(contentBodyStyle)\n ])\n .create(bodyRef.nativeElement, {});\n case 'none':\n return builder\n .build([\n style(leftBodyStyle),\n animate(\n '250ms cubic-bezier(0.4, 0, 1, 1)',\n style(noneBodyStyle)\n )\n ])\n .create(bodyRef.nativeElement, {});\n }\n break;\n case 'none':\n switch (newSetting) {\n case 'left':\n return builder\n .build([\n style(noneBodyStyle),\n animate(\n '350ms cubic-bezier(0, 0, 0.2, 1)',\n style(leftBodyStyle)\n )\n ])\n .create(bodyRef.nativeElement, {});\n }\n break;\n }\n //if not transition animation\n return applyDefault();\n }\n}\n\nconst baseContentStyle = {\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n width: '301px',\n transform: 'none'\n};\n\nconst leftContentStyle = {\n ...baseContentStyle\n};\nconst noneContentStyle = {\n ...baseContentStyle,\n transform: 'translateX(-301px)'\n};\nconst contentContentStyle = {\n ...baseContentStyle,\n position: 'static'\n};\n\nexport function buildLeftContentAnimations(\n builder: AnimationBuilder,\n contentRef: ElementRef,\n oldState: SizeDependentState,\n newState: SizeDependentState,\n isFirstRun: boolean = false\n): AnimationPlayer {\n if (!contentRef) {\n return null;\n }\n\n const newSetting = newState.contentAnimation.leftSidebar;\n const oldSetting = oldState\n ? oldState.contentAnimation.leftSidebar\n : 'void';\n\n const applyDefault = (): AnimationPlayer => {\n let stateStyle = {};\n switch (newSetting) {\n case 'left':\n stateStyle = leftContentStyle;\n break;\n case 'none':\n stateStyle = noneContentStyle;\n break;\n\n case 'content':\n stateStyle = { width: '100%' };\n break;\n\n case 'null':\n default:\n stateStyle = '*';\n break;\n }\n return builder\n .build([style(stateStyle)])\n .create(contentRef.nativeElement, {});\n };\n\n if (isFirstRun || newSetting === oldSetting) {\n //just apply the style\n return applyDefault();\n } else {\n switch (oldSetting) {\n case 'content':\n switch (newSetting) {\n case 'left':\n return builder\n .build([\n style({\n ...baseContentStyle,\n width: '100%'\n }),\n animate('550ms cubic-bezier(0, 0, 0.2, 1)', style(leftContentStyle))\n ])\n .create(contentRef.nativeElement, {});\n }\n break;\n case 'left':\n switch (newSetting) {\n case 'content':\n return builder\n .build([\n sequence([\n style(leftContentStyle),\n animate(\n '350ms cubic-bezier(0.4, 0, 1, 1)',\n style({\n width: '100%'\n })\n )\n ])\n //style(contentStyle)\n ])\n .create(contentRef.nativeElement, {});\n case 'none':\n return builder\n .build([\n style(leftContentStyle),\n animate('250ms cubic-bezier(0.4, 0, 1, 1)', style(noneContentStyle))\n ])\n .create(contentRef.nativeElement, {});\n }\n break;\n case 'none':\n switch (newSetting) {\n case 'left':\n return builder\n .build([\n style(noneContentStyle),\n animate('350ms cubic-bezier(0, 0, 0.2, 1)', style(leftContentStyle))\n ])\n .create(contentRef.nativeElement, {});\n }\n break;\n }\n //if not transition animation\n return applyDefault();\n }\n}\n","/* This is the DSL animations for PageComponent. */\n\nimport {\n animate,\n animateChild,\n group,\n query,\n state,\n style,\n transition,\n trigger\n} from '@angular/animations';\n\n// These were not working with AOT, so I inlined all of them... :/\n// RIP maintainability (for now...)\n// export const contentMobileState = {\n// position: 'absolute',\n// top: 0,\n// bottom: 0,\n// right: 0,\n// left: 0,\n// opacity: 1,\n// zIndex: 0\n// };\n\n// export const rightSidebarStyles = {\n// position: 'absolute',\n// top: 0,\n// right: 0,\n// bottom: 0,\n// zIndex: 1,\n// width: '300px',\n// display: 'flex'\n// };\n\nexport const PageAnimations = [\n trigger('hostSink', [transition(':leave', [animate('100ms')])]),\n trigger('childrenMobile', [\n state('top', style({ opacity: 1 })),\n state('below', style({ opacity: 0 })),\n\n transition('below => top', [animate('250ms cubic-bezier(0, 0, 0.2, 1)')]),\n transition('top => below', [animate('200ms cubic-bezier(0.4, 0, 1, 1)')]),\n //handle how right sidebars on sm interact with this state\n transition('right => below', [\n style({ opacity: 1 }),\n animate('250ms cubic-bezier(0.4, 0, 1, 1)', style({ opacity: 1 }))\n ])\n ]),\n trigger('contentMobile', [\n state('top', style({ opacity: 1 })),\n state('below', style({ opacity: 1 })),\n\n transition('top => void, top => below', [\n style({\n position: 'absolute',\n top: 0,\n bottom: 0,\n right: 0,\n left: 0,\n opacity: 1,\n zIndex: 0\n }),\n animate(\n '250ms cubic-bezier(0, 0, 0.2, 1)',\n style({\n position: 'absolute',\n top: 0,\n bottom: 0,\n right: 0,\n left: 0,\n zIndex: 0,\n opacity: 0\n })\n )\n ]),\n transition('void => top, below => top', [\n style({\n position: 'absolute',\n top: 0,\n bottom: 0,\n right: 0,\n left: 0,\n zIndex: 0,\n opacity: 0\n }),\n animate(\n '200ms cubic-bezier(0.4, 0, 1, 1)',\n style({\n position: 'absolute',\n top: 0,\n bottom: 0,\n right: 0,\n left: 0,\n opacity: 1,\n zIndex: 0\n })\n )\n ]),\n transition('null => below, below => void', style({ display: 'none' }))\n ]),\n trigger('bodyRight', [\n state('show', style({ marginRight: '300px' })),\n state('hide', style({ marginRight: 0 })),\n\n transition('show => hide', [\n group([\n query('@childrenRight, @childrenMobile', [animateChild()], {\n optional: true\n }),\n animate('250ms cubic-bezier(0.4, 0, 1, 1)')\n ])\n ]),\n transition('hide => show', [\n group([\n query('@childrenRight', [animateChild()], { optional: true }),\n animate('350ms cubic-bezier(0, 0, 0.2, 1)')\n ])\n ])\n ]),\n trigger('childrenRight', [\n state(\n 'show',\n style({\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n zIndex: 1,\n width: '300px',\n display: 'flex',\n transform: 'none'\n })\n ),\n\n transition('show => hide', [\n animate(\n '250ms cubic-bezier(0.4, 0, 1, 1)',\n style({\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n zIndex: 1,\n width: '300px',\n display: 'flex',\n transform: 'translateX(301px)'\n })\n )\n ]),\n transition('hide => show', [\n style({\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n zIndex: 1,\n width: '300px',\n display: 'flex',\n transform: 'translateX(301px)'\n }),\n animate('350ms cubic-bezier(0, 0, 0.2, 1)')\n ])\n ])\n];\n","