[{"__symbolic":"module","version":3,"metadata":{"SkyFlyoutComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-flyout","template":"<div\n  class=\"sky-flyout sky-shadow\"\n  tabindex=\"-1\"\n  [attr.role]=\"config?.ariaRole\"\n  [attr.aria-describedby]=\"config?.ariaDescribedBy\"\n  [attr.aria-labelledby]=\"config?.ariaLabelledBy\"\n  [ngClass]=\"{ 'sky-flyout-hidden': !isOpen && !isOpening }\"\n  (@flyoutState.done)=\"animationDone($event)\"\n  [@flyoutState]=\"getAnimationState()\"\n  [style.width.px]=\"flyoutWidth\">\n\n  <button\n    type=\"button\"\n    class=\"sky-flyout-resize-handle\"\n    aria-hidden=\"true\"\n    role=\"separator\"\n    tabindex=\"-1\"\n    (mousedown)=\"onMouseDown($event)\">\n  </button>\n\n  <div class=\"sky-flyout-header\" #flyoutHeader>\n    <div class=\"sky-flyout-header-content\"></div>\n    <div class=\"sky-flyout-header-buttons\">\n      <button\n        type=\"button\"\n        class=\"sky-btn sky-btn-default sky-flyout-btn-close\"\n        (click)=\"onCloseButtonClick()\"\n        [attr.aria-label]=\"'flyout_close' | skyResources\">\n        <i class=\"fa fa-close\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n  </div>\n  <div class=\"sky-flyout-content\">\n    <div #target></div>\n  </div>\n</div>\n","styles":[".sky-flyout {\n  position: fixed;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  height: 100%;\n  background-color: #fff;\n  border-left: 6px solid #00b4f1;\n  z-index: 1001;\n}\n\n.sky-flyout:focus {\n  outline: none;\n}\n\n@media (max-width: 768px) {\n  .sky-flyout {\n    min-width: 100%;\n    max-width: 100%;\n  }\n}\n\n.sky-flyout.sky-flyout-hidden {\n  visibility: hidden;\n}\n\n.sky-flyout-resize-handle {\n  height: 100%;\n  width: 14px;\n  position: absolute;\n  left: -10px;\n  cursor: ew-resize;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  display: block;\n  top: 0;\n  bottom: 0;\n}\n\n@media (max-width: 768px) {\n  .sky-flyout-resize-handle {\n    cursor: initial;\n  }\n}\n\n.sky-flyout-header {\n  border-bottom: 1px solid #cdcfd2;\n  width: 100%;\n  background: #eeeeef;\n  height: 50px;\n  padding: 8px 15px;\n  display: flex;\n  align-items: baseline;\n}\n\n.sky-flyout-header-content {\n  flex-grow: 1;\n}\n\n.sky-flyout-help-shim {\n  padding-right: 8px;\n}\n\n@media (min-width: 768px) {\n  .sky-flyout-help-shim {\n    padding-right: 50px;\n  }\n}\n\n.sky-flyout-content {\n  overflow-y: auto;\n  height: calc(100% - 50px);\n}\n"],"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger"},"arguments":["flyoutState",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state"},"arguments":["flyoutOpen",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"transform":"translateX(0)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state"},"arguments":["flyoutClosed",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"transform":"translateX(100%)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition"},"arguments":["void => *",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"transform":"translateX(100%)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate"},"arguments":[250]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition"},"arguments":["* <=> *",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate"},"arguments":["250ms ease-in"]}]}]]}],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"target":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["target",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"}}]}]}],"flyoutHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["flyoutHeader"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./flyout-adapter.service","name":"SkyFlyoutAdapterService"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"@angular/core","name":"Injector"},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onCloseButtonClick":[{"__symbolic":"method"}],"attach":[{"__symbolic":"method"}],"getAnimationState":[{"__symbolic":"method"}],"animationDone":[{"__symbolic":"method"}],"onMouseDown":[{"__symbolic":"method"}],"onMouseMove":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:mousemove",["$event"]]}]}],"onHandleRelease":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:mouseup",["$event"]]}]}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"createFlyoutInstance":[{"__symbolic":"method"}],"handleIncomingMessages":[{"__symbolic":"method"}],"notifyClosed":[{"__symbolic":"method"}],"cleanTemplate":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"SkyFlyoutComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-flyout","template":"<div\n  class=\"sky-flyout sky-shadow\"\n  tabindex=\"-1\"\n  [attr.role]=\"config?.ariaRole\"\n  [attr.aria-describedby]=\"config?.ariaDescribedBy\"\n  [attr.aria-labelledby]=\"config?.ariaLabelledBy\"\n  [ngClass]=\"{ 'sky-flyout-hidden': !isOpen && !isOpening }\"\n  (@flyoutState.done)=\"animationDone($event)\"\n  [@flyoutState]=\"getAnimationState()\"\n  [style.width.px]=\"flyoutWidth\">\n\n  <button\n    type=\"button\"\n    class=\"sky-flyout-resize-handle\"\n    aria-hidden=\"true\"\n    role=\"separator\"\n    tabindex=\"-1\"\n    (mousedown)=\"onMouseDown($event)\">\n  </button>\n\n  <div class=\"sky-flyout-header\" #flyoutHeader>\n    <div class=\"sky-flyout-header-content\"></div>\n    <div class=\"sky-flyout-header-buttons\">\n      <button\n        type=\"button\"\n        class=\"sky-btn sky-btn-default sky-flyout-btn-close\"\n        (click)=\"onCloseButtonClick()\"\n        [attr.aria-label]=\"'flyout_close' | skyResources\">\n        <i class=\"fa fa-close\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n  </div>\n  <div class=\"sky-flyout-content\">\n    <div #target></div>\n  </div>\n</div>\n","styles":[".sky-flyout {\n  position: fixed;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  height: 100%;\n  background-color: #fff;\n  border-left: 6px solid #00b4f1;\n  z-index: 1001;\n}\n\n.sky-flyout:focus {\n  outline: none;\n}\n\n@media (max-width: 768px) {\n  .sky-flyout {\n    min-width: 100%;\n    max-width: 100%;\n  }\n}\n\n.sky-flyout.sky-flyout-hidden {\n  visibility: hidden;\n}\n\n.sky-flyout-resize-handle {\n  height: 100%;\n  width: 14px;\n  position: absolute;\n  left: -10px;\n  cursor: ew-resize;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  display: block;\n  top: 0;\n  bottom: 0;\n}\n\n@media (max-width: 768px) {\n  .sky-flyout-resize-handle {\n    cursor: initial;\n  }\n}\n\n.sky-flyout-header {\n  border-bottom: 1px solid #cdcfd2;\n  width: 100%;\n  background: #eeeeef;\n  height: 50px;\n  padding: 8px 15px;\n  display: flex;\n  align-items: baseline;\n}\n\n.sky-flyout-header-content {\n  flex-grow: 1;\n}\n\n.sky-flyout-help-shim {\n  padding-right: 8px;\n}\n\n@media (min-width: 768px) {\n  .sky-flyout-help-shim {\n    padding-right: 50px;\n  }\n}\n\n.sky-flyout-content {\n  overflow-y: auto;\n  height: calc(100% - 50px);\n}\n"],"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger"},"arguments":["flyoutState",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state"},"arguments":["flyoutOpen",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"transform":"translateX(0)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state"},"arguments":["flyoutClosed",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"transform":"translateX(100%)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition"},"arguments":["void => *",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style"},"arguments":[{"transform":"translateX(100%)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate"},"arguments":[250]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition"},"arguments":["* <=> *",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate"},"arguments":["250ms ease-in"]}]}]]}],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"target":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["target",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef"}}]}]}],"flyoutHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["flyoutHeader"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./flyout-adapter.service","name":"SkyFlyoutAdapterService"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"@angular/core","name":"Injector"},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onCloseButtonClick":[{"__symbolic":"method"}],"attach":[{"__symbolic":"method"}],"getAnimationState":[{"__symbolic":"method"}],"animationDone":[{"__symbolic":"method"}],"onMouseDown":[{"__symbolic":"method"}],"onMouseMove":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:mousemove",["$event"]]}]}],"onHandleRelease":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:mouseup",["$event"]]}]}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"createFlyoutInstance":[{"__symbolic":"method"}],"handleIncomingMessages":[{"__symbolic":"method"}],"notifyClosed":[{"__symbolic":"method"}],"cleanTemplate":[{"__symbolic":"method"}]}}}}]