@cdf/cdf-ng-media/lib/components/media-slider/cdf-media-slider.component.metadata.json

Angular module for displaying media assets (images, videos)

[{"__symbolic":"module","version":3,"metadata":{"CdfMediaSliderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"cdf-media-slider","template":"\n\t<ul #mediaComponentContainer class=\"media-slider-flex-container\">\n\n\t\t<li class=\"media-slider-flex-item\" \n\t\t\t(click)=\"onMediaComponentClick($event, mediaModel)\" \n\t\t\t[@mediaListItemTrigger]=\"mediaModel.mediaPaneState\"\n\t\t\t*ngFor=\"let mediaModel of mediaModelList; let i = index\">\n\t\t\t\n\t\t\t\n\t\t\t<!--MEDIA PANE-->\n\t\t\t<section class=\"cdf-media-pane-container\" [@mediaStateTrigger]=\"mediaModel.mediaPaneState\">\t\t\n\t\t\t\t<!--MEDIA: IMAGE OR VIDEO-->\n\t\t\t\t<cdf-media [mediaModel]=\"mediaModel\"\n\t\t\t\t\t\t\t[showTitle]=\"showTitle\"\n\t\t\t\t\t\t\t[showType]=\"showType\"\n\t\t\t\t\t\t\t(onImageClick)=\"doImageClick(mediaModel)\"\n\t\t\t\t\t\t\t(onVideoBeforePlay)=\"onVideoBeforePlay(mediaModel)\"\n\t\t\t\t\t\t\t(onVideoStopPlay)=\"onVideoAfterStopPlay(mediaModel)\">\n\t\t\t\t\t<ng-content select=\".cdf-media-content\"></ng-content>\t\t\t\n\t\t\t\t</cdf-media>\t\t\n\t\t\t</section>\n\n\t\t\t<!--INFO PANE-->\n\t\t\t<section class=\"cdf-info-pane-container\" *ngIf=\"mediaModel.IsInfoPaneExpanded\" [@infoPaneSlideTrigger]=\"mediaModel.infoPaneExpandedState\">\n\t\t\t\t<section class=\"cdf-info-pane-container__wrapper\">\n\n\t\t\t\t\t<!--CLOSE BUTTON-->\n\t\t\t\t\t<a class=\"close-button\" (click)=\"onStopVideoClick(mediaModel)\">×</a>\n\n\t\t\t\t\t<h2 class=\"cdf-info-pane-container__title\">{{mediaModel.Title}}</h2>\n\t\t\t\t\t<p class=\"cdf-info-pane-container__description\" *ngIf=\"showDescription\">{{mediaModel.Description}}</p>\n\n\t\t\t\t\t<button class=\"button radius small hollow cdf-info-pane-container__button\" (click)=\"doImageClick(mediaModel)\">Learn More</button>\t\n\n\t\t\t\t</section>\n\t\t\t</section>\t\n\t\t\t\n\t\t</li>\n\t</ul>\n\t","styles":["\n\t:host\n\t{\n\t\tdisplay: block;\n\t\tmin-height: 10rem;\n\t\tposition: relative;\n\t}\n\n\t.media-slider-flex-container\n\t{\n\t\tdisplay: -webkit-box;\n\t\tdisplay: -moz-box;\n\t\tdisplay: -ms-flexbox;\n\t\tdisplay: -moz-flex;\n\t\tdisplay: -webkit-flex;\n\t\tdisplay: flex;\t\t\n\t\tflex-direction: row;\n\t\tflex-wrap: wrap;\n\t\tjustify-content: center;\n\t\tmin-height: 550px;\n\t\tmargin: auto;\n\t}\n\n\t@media only screen and (min-width : 842px)\n\t{\n\t\t.media-slider-flex-container\n\t\t{\n\t\t\tjustify-content: flex-start;\n\t\t\tmax-width: 825px;\n\t\t}\t\t\n\t}\t\n\n\t.media-slider-flex-item\n\t{\n\t\tlist-style: none;\n\t\twidth: 100vw;\n\t\theight: 30vh;\t\t\n\t\tposition: relative;\n\t}\n\n\t@media only screen and (min-width : 568px)\n\t{\n\t\t.media-slider-flex-item\n\t\t{\n\t\t\twidth: 48vw;\n\t\t\theight: 30vh;\t\n\t\t}\t\t\n\t}\t\n\n\t@media only screen and (min-width : 842px)\n\t{\n\t\t.media-slider-flex-item\n\t\t{\n\t\t\twidth: 275px;\n\t\t\theight: 275px;\n\t\t}\t\t\n\t}\t\t\n\n\tcdf-media\n\t{\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\n\t.cdf-media-pane-container\n\t{\n\t\tcursor: pointer;\n\t\tmargin: 0;\n\t\tmax-height: 100%;\n\t\tmin-height: 100%;\n\t\tpadding: 0;\n\t\tz-index: 10;\n\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\t\n\t}\n\t\t.cdf-media-pane-container__title\n\t\t{\n\t\t\tcolor: #000;\n\t\t\tfont-size: 3.25rem;\n\t\t\tmargin: auto;\n\t\t\ttransform: rotate(3deg);\n\t\t}\t\n\n\t\t.cdf-media-pane-container:nth-child(2n)\n\t\t{\n\t\t\t.feature-list-container__item__title\n\t\t\t{\n\t\t\t\ttransform: rotate(-3deg);\n\t\t\t}\t\t\t\t\t\t\t\n\t\t}\t\t\t\n\n\n\t.cdf-info-pane-container\n\t{\n\t\tbackground-color: #fff;\n\t\tborder: solid 2px #becbd2;\n\t\tbottom: 0;\n\t\theight: 100%;\n\t\tleft: 0;\t\n\t\toverflow: hidden;\n\t\tpadding: 2.75rem 1rem 1rem 1rem;\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t\twidth: 100%;\n\t\tz-index: 100;\n\t}\t\n\n\t\t.cdf-info-pane-container__wrapper\n\t\t{\n\t\t\tz-index: 0;\n\t\t}\n\n\t\t.cdf-info-pane-container__title\n\t\t{\n\t\t\tmargin: 0 0 1rem 0;\n\t\t}\n\n\t\t.cdf-info-pane-container__description\n\t\t{\n\t\t\tfont-size: 1rem;\n\t\t\tmargin: 0 0 1rem 0;\n\t\t}\n\n\t\t.cdf-info-pane-container__button\n\t\t{\n\t\t}\n\t"],"providers":[],"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["mediaListItemTrigger",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["inactive",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["active",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"overflow":"visible"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["dimmed",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":0.2,"filter":"blur(2px)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => dimmed, * => active",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["300ms ease-out"]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => inactive",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["700ms ease-out"]}]]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["mediaStateTrigger",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["inactive",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["active",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"zIndex":1000}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => inactive",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["500ms 350ms ease-in"]}]]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["infoPaneSlideTrigger",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["slideToTop",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"zIndex":11,"top":"-100%"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["slideToRight",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"zIndex":11,"left":"100%"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["slideToBottom",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"zIndex":11,"top":"100%"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["slideToLeft",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"zIndex":11,"left":"-100%"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["void => slideToTop",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["500ms 350ms ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"keyframes"},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"0","offset":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"-25%","offset":0.25}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"-50%","offset":0.5}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"-75%","offset":0.75}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"-100%","offset":1}]}]]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["slideToTop => *",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["500ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"keyframes"},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"-100%","offset":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"-75%","offset":0.25}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"-50%","offset":0.5}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"-25%","offset":0.75}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"0","offset":1}]}]]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["void => slideToRight",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["500ms 250ms ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"keyframes"},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"0","offset":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"25%","offset":0.25}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"50%","offset":0.5}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"75%","offset":0.75}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"100%","offset":1}]}]]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["slideToRight => *",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["500ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"keyframes"},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"100%","offset":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"75%","offset":0.25}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"50%","offset":0.5}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"25%","offset":0.75}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"0","offset":1}]}]]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["void => slideToBottom",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["500ms 350ms ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"keyframes"},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"0","offset":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"25%","offset":0.25}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"50%","offset":0.5}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"75%","offset":0.75}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"100%","offset":1}]}]]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["slideToBottom => *",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["500ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"keyframes"},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"100%","offset":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"75%","offset":0.25}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"50%","offset":0.5}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"25%","offset":0.75}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"0","offset":1}]}]]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["void => slideToLeft",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["500ms 350ms ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"keyframes"},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"0","offset":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"-25%","offset":0.25}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"-50%","offset":0.5}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"-75%","offset":0.75}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"-100%","offset":1}]}]]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["slideToLeft => *",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["500ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"keyframes"},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"-100%","offset":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"-75%","offset":0.25}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"-50%","offset":0.5}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"-25%","offset":0.75}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"0","offset":1}]}]]}]}]]}]]}]}]}],"members":{"mediaModelList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showDescription":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onImageClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"ULElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["mediaComponentContainer"]}]}],"mediaComponentList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren"},"arguments":[{"__symbolic":"reference","module":"../media/index","name":"CdfMediaComponent"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onMediaComponentClick":[{"__symbolic":"method"}],"onVideoBeforePlay":[{"__symbolic":"method"}],"onVideoAfterStopPlay":[{"__symbolic":"method"}],"onStopVideoClick":[{"__symbolic":"method"}],"doImageClick":[{"__symbolic":"method"}],"calculateVariance":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CdfMediaSliderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"cdf-media-slider","template":"\n\t<ul #mediaComponentContainer class=\"media-slider-flex-container\">\n\n\t\t<li class=\"media-slider-flex-item\" \n\t\t\t(click)=\"onMediaComponentClick($event, mediaModel)\" \n\t\t\t[@mediaListItemTrigger]=\"mediaModel.mediaPaneState\"\n\t\t\t*ngFor=\"let mediaModel of mediaModelList; let i = index\">\n\t\t\t\n\t\t\t\n\t\t\t<!--MEDIA PANE-->\n\t\t\t<section class=\"cdf-media-pane-container\" [@mediaStateTrigger]=\"mediaModel.mediaPaneState\">\t\t\n\t\t\t\t<!--MEDIA: IMAGE OR VIDEO-->\n\t\t\t\t<cdf-media [mediaModel]=\"mediaModel\"\n\t\t\t\t\t\t\t[showTitle]=\"showTitle\"\n\t\t\t\t\t\t\t[showType]=\"showType\"\n\t\t\t\t\t\t\t(onImageClick)=\"doImageClick(mediaModel)\"\n\t\t\t\t\t\t\t(onVideoBeforePlay)=\"onVideoBeforePlay(mediaModel)\"\n\t\t\t\t\t\t\t(onVideoStopPlay)=\"onVideoAfterStopPlay(mediaModel)\">\n\t\t\t\t\t<ng-content select=\".cdf-media-content\"></ng-content>\t\t\t\n\t\t\t\t</cdf-media>\t\t\n\t\t\t</section>\n\n\t\t\t<!--INFO PANE-->\n\t\t\t<section class=\"cdf-info-pane-container\" *ngIf=\"mediaModel.IsInfoPaneExpanded\" [@infoPaneSlideTrigger]=\"mediaModel.infoPaneExpandedState\">\n\t\t\t\t<section class=\"cdf-info-pane-container__wrapper\">\n\n\t\t\t\t\t<!--CLOSE BUTTON-->\n\t\t\t\t\t<a class=\"close-button\" (click)=\"onStopVideoClick(mediaModel)\">×</a>\n\n\t\t\t\t\t<h2 class=\"cdf-info-pane-container__title\">{{mediaModel.Title}}</h2>\n\t\t\t\t\t<p class=\"cdf-info-pane-container__description\" *ngIf=\"showDescription\">{{mediaModel.Description}}</p>\n\n\t\t\t\t\t<button class=\"button radius small hollow cdf-info-pane-container__button\" (click)=\"doImageClick(mediaModel)\">Learn More</button>\t\n\n\t\t\t\t</section>\n\t\t\t</section>\t\n\t\t\t\n\t\t</li>\n\t</ul>\n\t","styles":["\n\t:host\n\t{\n\t\tdisplay: block;\n\t\tmin-height: 10rem;\n\t\tposition: relative;\n\t}\n\n\t.media-slider-flex-container\n\t{\n\t\tdisplay: -webkit-box;\n\t\tdisplay: -moz-box;\n\t\tdisplay: -ms-flexbox;\n\t\tdisplay: -moz-flex;\n\t\tdisplay: -webkit-flex;\n\t\tdisplay: flex;\t\t\n\t\tflex-direction: row;\n\t\tflex-wrap: wrap;\n\t\tjustify-content: center;\n\t\tmin-height: 550px;\n\t\tmargin: auto;\n\t}\n\n\t@media only screen and (min-width : 842px)\n\t{\n\t\t.media-slider-flex-container\n\t\t{\n\t\t\tjustify-content: flex-start;\n\t\t\tmax-width: 825px;\n\t\t}\t\t\n\t}\t\n\n\t.media-slider-flex-item\n\t{\n\t\tlist-style: none;\n\t\twidth: 100vw;\n\t\theight: 30vh;\t\t\n\t\tposition: relative;\n\t}\n\n\t@media only screen and (min-width : 568px)\n\t{\n\t\t.media-slider-flex-item\n\t\t{\n\t\t\twidth: 48vw;\n\t\t\theight: 30vh;\t\n\t\t}\t\t\n\t}\t\n\n\t@media only screen and (min-width : 842px)\n\t{\n\t\t.media-slider-flex-item\n\t\t{\n\t\t\twidth: 275px;\n\t\t\theight: 275px;\n\t\t}\t\t\n\t}\t\t\n\n\tcdf-media\n\t{\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\n\t.cdf-media-pane-container\n\t{\n\t\tcursor: pointer;\n\t\tmargin: 0;\n\t\tmax-height: 100%;\n\t\tmin-height: 100%;\n\t\tpadding: 0;\n\t\tz-index: 10;\n\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\t\n\t}\n\t\t.cdf-media-pane-container__title\n\t\t{\n\t\t\tcolor: #000;\n\t\t\tfont-size: 3.25rem;\n\t\t\tmargin: auto;\n\t\t\ttransform: rotate(3deg);\n\t\t}\t\n\n\t\t.cdf-media-pane-container:nth-child(2n)\n\t\t{\n\t\t\t.feature-list-container__item__title\n\t\t\t{\n\t\t\t\ttransform: rotate(-3deg);\n\t\t\t}\t\t\t\t\t\t\t\n\t\t}\t\t\t\n\n\n\t.cdf-info-pane-container\n\t{\n\t\tbackground-color: #fff;\n\t\tborder: solid 2px #becbd2;\n\t\tbottom: 0;\n\t\theight: 100%;\n\t\tleft: 0;\t\n\t\toverflow: hidden;\n\t\tpadding: 2.75rem 1rem 1rem 1rem;\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t\twidth: 100%;\n\t\tz-index: 100;\n\t}\t\n\n\t\t.cdf-info-pane-container__wrapper\n\t\t{\n\t\t\tz-index: 0;\n\t\t}\n\n\t\t.cdf-info-pane-container__title\n\t\t{\n\t\t\tmargin: 0 0 1rem 0;\n\t\t}\n\n\t\t.cdf-info-pane-container__description\n\t\t{\n\t\t\tfont-size: 1rem;\n\t\t\tmargin: 0 0 1rem 0;\n\t\t}\n\n\t\t.cdf-info-pane-container__button\n\t\t{\n\t\t}\n\t"],"providers":[],"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["mediaListItemTrigger",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["inactive",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":1}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["active",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"overflow":"visible"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["dimmed",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":0.2,"filter":"blur(2px)"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => dimmed, * => active",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["300ms ease-out"]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => inactive",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["700ms ease-out"]}]]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["mediaStateTrigger",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["inactive",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["active",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"zIndex":1000}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => inactive",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["500ms 350ms ease-in"]}]]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["infoPaneSlideTrigger",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["slideToTop",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"zIndex":11,"top":"-100%"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["slideToRight",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"zIndex":11,"left":"100%"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["slideToBottom",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"zIndex":11,"top":"100%"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["slideToLeft",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"zIndex":11,"left":"-100%"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["void => slideToTop",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["500ms 350ms ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"keyframes"},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"0","offset":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"-25%","offset":0.25}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"-50%","offset":0.5}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"-75%","offset":0.75}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"-100%","offset":1}]}]]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["slideToTop => *",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["500ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"keyframes"},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"-100%","offset":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"-75%","offset":0.25}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"-50%","offset":0.5}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"-25%","offset":0.75}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"0","offset":1}]}]]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["void => slideToRight",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["500ms 250ms ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"keyframes"},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"0","offset":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"25%","offset":0.25}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"50%","offset":0.5}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"75%","offset":0.75}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"100%","offset":1}]}]]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["slideToRight => *",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["500ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"keyframes"},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"100%","offset":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"75%","offset":0.25}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"50%","offset":0.5}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"25%","offset":0.75}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"0","offset":1}]}]]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["void => slideToBottom",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["500ms 350ms ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"keyframes"},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"0","offset":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"25%","offset":0.25}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"50%","offset":0.5}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"75%","offset":0.75}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"100%","offset":1}]}]]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["slideToBottom => *",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["500ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"keyframes"},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"100%","offset":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"75%","offset":0.25}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"50%","offset":0.5}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"25%","offset":0.75}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"top":"0","offset":1}]}]]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["void => slideToLeft",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["500ms 350ms ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"keyframes"},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"0","offset":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"-25%","offset":0.25}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"-50%","offset":0.5}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"-75%","offset":0.75}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"-100%","offset":1}]}]]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["slideToLeft => *",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["500ms ease-out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"keyframes"},"arguments":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"-100%","offset":0}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"-75%","offset":0.25}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"-50%","offset":0.5}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"-25%","offset":0.75}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"left":"0","offset":1}]}]]}]}]]}]]}]}]}],"members":{"mediaModelList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showDescription":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onImageClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"ULElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["mediaComponentContainer"]}]}],"mediaComponentList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren"},"arguments":[{"__symbolic":"reference","module":"../media/index","name":"CdfMediaComponent"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onMediaComponentClick":[{"__symbolic":"method"}],"onVideoBeforePlay":[{"__symbolic":"method"}],"onVideoAfterStopPlay":[{"__symbolic":"method"}],"onStopVideoClick":[{"__symbolic":"method"}],"doImageClick":[{"__symbolic":"method"}],"calculateVariance":[{"__symbolic":"method"}]}}}}]