text: "use strict";(self.webpackChunkprimeng=self.webpackChunkprimeng||[]).push([[910],{910:(Xe,f,o)=>{o.r(f),o.d(f,{GalleriaDemoModule:()=>We});var d=o(6019),Z=o(1120),e=o(3668),g=o(3069),m=o(2060),c=o(2138),u=o(3362),s=o(3622),p=o(7290);function I(t,i){1&t&&e._UZ(0,"img",18),2&t&&e.Q6J("src",i.$implicit.previewImageSrc,e.LSH)}function w(t,i){if(1&t&&(e.TgZ(0,"div",19),e._UZ(1,"img",20),e.qZA()),2&t){const n=i.$implicit;e.xp6(1),e.Q6J("src",n.thumbnailImageSrc,e.LSH)}}const S=function(){return{"max-width":"640px"}},y=function(){return["/theming"]};let U=(()=>{class t{constructor(n){this.photoService=n,this.responsiveOptions=[{breakpoint:"1024px",numVisible:5},{breakpoint:"768px",numVisible:3},{breakpoint:"560px",numVisible:1}]}ngOnInit(){this.photoService.getImages().then(n=>this.images=n)}}return t.\u0275fac=function(n){return new(n||t)(e.Y36(g.T))},t.\u0275cmp=e.Xpm({type:t,selectors:[["ng-component"]],decls:440,vars:7,consts:[[1,"content-section","introduction"],[1,"feature-intro"],["github","galleria"],[1,"content-section","implementation"],[1,"card"],[3,"value","responsiveOptions","containerStyle","numVisible","valueChange"],["pTemplate","item"],["pTemplate","thumbnail"],[1,"content-section","documentation"],["header","Documentation"],["lang","typescript"],["lang","markup"],[2,"overflow","auto","height","400px","margin-bottom","1em"],[1,"doc-tablewrapper"],[1,"doc-table"],["href","#",3,"routerLink"],["header","Source"],["href","https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/galleria","target","_blank",1,"btn-viewsource"],[2,"width","100%",3,"src"],[1,"p-grid","p-nogutter","p-justify-center"],[3,"src"]],template:function(n,a){1&n&&(e.TgZ(0,"div",0),e.TgZ(1,"div",1),e.TgZ(2,"h1"),e._uU(3,"Galleria"),e.qZA(),e.TgZ(4,"p"),e._uU(5,"Galleria is an advanced content gallery component."),e.qZA(),e.qZA(),e._UZ(6,"app-demoActions",2),e.qZA(),e.TgZ(7,"div",3),e.TgZ(8,"div",4),e.TgZ(9,"p-galleria",5),e.NdJ("valueChange",function(l){return a.images=l}),e.YNc(10,I,1,1,"ng-template",6),e.YNc(11,w,2,1,"ng-template",7),e.qZA(),e.qZA(),e.qZA(),e.TgZ(12,"div",8),e.TgZ(13,"p-tabView"),e.TgZ(14,"p-tabPanel",9),e.TgZ(15,"h5"),e._uU(16,"Import"),e.qZA(),e.TgZ(17,"app-code",10),e.IAx(),e._uU(18,"\nimport {GalleriaModule} from 'primeng/galleria';\n"),e.fQ9(),e.qZA(),e.TgZ(19,"h5"),e._uU(20,"Getting Started"),e.qZA(),e.TgZ(21,"p"),e._uU(22,"Galleria requires item template and a value as an array of objects"),e.qZA(),e.TgZ(23,"app-code",11),e.IAx(),e._uU(24,'\n<p-galleria [value]="images">\n    <ng-template pTemplate="item" let-item>\n        <img [src]="item.previewImageSrc" [alt]="item.alt" />\n    </ng-template>\n</p-galleria>\n'),e.fQ9(),e.qZA(),e.TgZ(25,"p"),e._uU(26,"For the rest of the documentation, sample data below would be return from an example service e.g. PhotoService."),e.qZA(),e.TgZ(27,"div",12),e.TgZ(28,"app-code",10),e.IAx(),e._uU(29,'\n{\n    "data":[\n        {\n            "previewImageSrc": "demo/images/galleria/galleria1.jpg",\n            "thumbnailImageSrc": "demo/images/galleria/galleria1s.jpg",\n            "alt": "Description for Image 1",\n            "title": "Title 1"\n        },\n        {\n            "previewImageSrc": "demo/images/galleria/galleria2.jpg",\n            "thumbnailImageSrc": "demo/images/galleria/galleria2s.jpg",\n            "alt": "Description for Image 2",\n            "title": "Title 2"\n        },\n        {\n            "previewImageSrc": "demo/images/galleria/galleria3.jpg",\n            "thumbnailImageSrc": "demo/images/galleria/galleria3s.jpg",\n            "alt": "Description for Image 3",\n            "title": "Title 3"\n        },\n        {\n            "previewImageSrc": "demo/images/galleria/galleria4.jpg",\n            "thumbnailImageSrc": "demo/images/galleria/galleria4s.jpg",\n            "alt": "Description for Image 4",\n            "title": "Title 4"\n        },\n        {\n            "previewImageSrc": "demo/images/galleria/galleria5.jpg",\n            "thumbnailImageSrc": "demo/images/galleria/galleria5s.jpg",\n            "alt": "Description for Image 5",\n            "title": "Title 5"\n        },\n        {\n            "previewImageSrc": "demo/images/galleria/galleria6.jpg",\n            "thumbnailImageSrc": "demo/images/galleria/galleria6s.jpg",\n            "alt": "Description for Image 6",\n            "title": "Title 6"\n        },\n        {\n            "previewImageSrc": "demo/images/galleria/galleria7.jpg",\n            "thumbnailImageSrc": "demo/images/galleria/galleria7s.jpg",\n            "alt": "Description for Image 7",\n            "title": "Title 7"\n        },\n        {\n            "previewImageSrc": "demo/images/galleria/galleria8.jpg",\n            "thumbnailImageSrc": "demo/images/galleria/galleria8s.jpg",\n            "alt": "Description for Image 8",\n            "title": "Title 8"\n        },\n        {\n            "previewImageSrc": "demo/images/galleria/galleria9.jpg",\n            "thumbnailImageSrc": "demo/images/galleria/galleria9s.jpg",\n            "alt": "Description for Image 9",\n            "title": "Title 9"\n        },\n        {\n            "previewImageSrc": "demo/images/galleria/galleria10.jpg",\n            "thumbnailImageSrc": "demo/images/galleria/galleria10s.jpg",\n            "alt": "Description for Image 10",\n            "title": "Title 10"\n        },\n        {\n            "previewImageSrc": "demo/images/galleria/galleria11.jpg",\n            "thumbnailImageSrc": "demo/images/galleria/galleria11s.jpg",\n            "alt": "Description for Image 11",\n            "title": "Title 11"\n        },\n        {\n            "previewImageSrc": "demo/images/galleria/galleria12.jpg",\n            "thumbnailImageSrc": "demo/images/galleria/galleria12s.jpg",\n            "alt": "Description for Image 12",\n            "title": "Title 12"\n        },\n        {\n            "previewImageSrc": "demo/images/galleria/galleria13.jpg",\n            "thumbnailImageSrc": "demo/images/galleria/galleria13s.jpg",\n            "alt": "Description for Image 13",\n            "title": "Title 13"\n        },\n        {\n            "previewImageSrc": "demo/images/galleria/galleria14.jpg",\n            "thumbnailImageSrc": "demo/images/galleria/galleria14s.jpg",\n            "alt": "Description for Image 14",\n            "title": "Title 14"\n        },\n        {\n            "previewImageSrc": "demo/images/galleria/galleria15.jpg",\n            "thumbnailImageSrc": "demo/images/galleria/galleria15s.jpg",\n            "alt": "Description for Image 15",\n            "title": "Title 15"\n        }\n    ]\n}\n'),e.fQ9(),e.qZA(),e.qZA(),e.TgZ(30,"app-code",10),e.IAx(),e._uU(31,"\n@Injectable()\nexport class PhotoService {\n\n    constructor(private http: HttpClient) { }\n\n    getImages() {\n    return this.http.get<any>('assets/showcase/data/photos.json')\n      .toPromise()\n      .then(res => <Image[]>res.data)\n      .then(data => { return data; });\n    }\n}\n"),e.fQ9(),e.qZA(),e.TgZ(32,"app-code",10),e.IAx(),e._uU(33,"\nexport class GalleriaDemo implements OnInit {\n\n    images: any[];\n\n    constructor(private photoService: PhotoService) { }\n\n    responsiveOptions:any[] = [\n        {\n            breakpoint: '1024px',\n            numVisible: 5\n        },\n        {\n            breakpoint: '768px',\n            numVisible: 3\n        },\n        {\n            breakpoint: '560px',\n            numVisible: 1\n        }\n    ];\n    ngOnInit() {\n        this.photoService.getImages().then(images => this.images = images);\n    }\n}\n"),e.fQ9(),e.qZA(),e.TgZ(34,"h5"),e._uU(35,"Items per page"),e.qZA(),e.TgZ(36,"p"),e._uU(37,"Number of items per page is defined using the "),e.TgZ(38,"i"),e._uU(39,"numVisible"),e.qZA(),e._uU(40," property."),e.qZA(),e.TgZ(41,"app-code",11),e.IAx(),e._uU(42,'\n<p-galleria [value]="images" [numVisible]="5">\n    <ng-template pTemplate="item" let-item>\n        <img [src]="item.previewImageSrc" [alt]="item.alt" />\n    </ng-template>\n    <ng-template pTemplate="thumbnail" let-item>\n        <div class="p-grid p-nogutter p-justify-center">\n            <img [src]="item.thumbnailImageSrc" />\n        </div>\n    </ng-template>\n</p-galleria>\n'),e.fQ9(),e.qZA(),e.TgZ(43,"h5"),e._uU(44,"Responsive"),e.qZA(),e.TgZ(45,"p"),e._uU(46,"For responsive design, "),e.TgZ(47,"i"),e._uU(48,"numVisible"),e.qZA(),e._uU(49," can be defined using the "),e.TgZ(50,"i"),e._uU(51,"responsiveOptions"),e.qZA(),e._uU(52," property that should be an array of objects whose breakpoint defines the max-width to apply the settings."),e.qZA(),e.TgZ(53,"app-code",11),e.IAx(),e._uU(54,'\n<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [numVisible]="5">\n    <ng-template pTemplate="item" let-item>\n        <img [src]="item.previewImageSrc" style="width: 100%; display: block;"/>\n    </ng-template>\n    <ng-template pTemplate="thumbnail" let-item>\n        <div class="p-grid p-nogutter p-justify-center">\n            <img [src]="item.thumbnailImageSrc" style="display: block;"/>\n        </div>\n    </ng-template>\n</p-galleria>\n'),e.fQ9(),e.qZA(),e.TgZ(55,"app-code",10),e.IAx(),e._uU(56,"\nresponsiveOptions:any[] = [\n    {\n        breakpoint: '1024px',\n        numVisible: 5\n    },\n    {\n        breakpoint: '768px',\n        numVisible: 3\n    },\n    {\n        breakpoint: '560px',\n        numVisible: 1\n    }\n];\n"),e.fQ9(),e.qZA(),e.TgZ(57,"h5"),e._uU(58,"Header and Footer"),e.qZA(),e.TgZ(59,"p"),e._uU(60,"Custom content projection is available using the "),e.TgZ(61,"i"),e._uU(62,"header"),e.qZA(),e._uU(63," and "),e.TgZ(64,"i"),e._uU(65,"footer"),e.qZA(),e._uU(66," properties."),e.qZA(),e.TgZ(67,"app-code",11),e.IAx(),e._uU(68,'\n<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{\'max-width\': \'520px\'" [numVisible]="5">\n    <ng-template pTemplate="header">\n        <h1>\n            Header\n        </h1>\n    </ng-template>\n    <ng-template pTemplate="item" let-item>\n        <img [src]="item.previewImageSrc" style="width: 100%;" />\n    </ng-template>\n    <ng-template pTemplate="thumbnail" let-item>\n        <div class="p-grid p-nogutter p-justify-center">\n            <img [src]="item.thumbnailImageSrc" />\n        </div>\n    </ng-template>\n    <ng-template pTemplate="header">\n        <h1>\n            Footer\n        </h1>\n    </ng-template>\n</p-galleria>\n'),e.fQ9(),e.qZA(),e.TgZ(69,"h5"),e._uU(70,"Indicators"),e.qZA(),e.TgZ(71,"p"),e._uU(72,"Indicators allow quick navigation between the items. Set "),e.TgZ(73,"i"),e._uU(74,"showIndicators"),e.qZA(),e._uU(75," to display indicators which can be customized further with the "),e.TgZ(76,"i"),e._uU(77,"changeItemOnIndicatorHover"),e.qZA(),e._uU(78,", "),e.TgZ(79,"i"),e._uU(80,"showIndicatorsOnItem"),e.qZA(),e._uU(81," and "),e.TgZ(82,"i"),e._uU(83,"indicatorsPosition"),e.qZA(),e._uU(84," properties."),e.qZA(),e.TgZ(85,"app-code",11),e.IAx(),e._uU(86,'\n<p-galleria [value]="images" [indicators]="true">\n    <ng-template pTemplate="item" let-item>\n        <img [src]="item.previewImageSrc" [alt]="item.alt" />\n    </template>\n</p-galleria>\n'),e.fQ9(),e.qZA(),e.TgZ(87,"h5"),e._uU(88,"Properties"),e.qZA(),e.TgZ(89,"div",13),e.TgZ(90,"table",14),e.TgZ(91,"thead"),e.TgZ(92,"tr"),e.TgZ(93,"th"),e._uU(94,"Name"),e.qZA(),e.TgZ(95,"th"),e._uU(96,"Type"),e.qZA(),e.TgZ(97,"th"),e._uU(98,"Default"),e.qZA(),e.TgZ(99,"th"),e._uU(100,"Description"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(101,"tbody"),e.TgZ(102,"tr"),e.TgZ(103,"td"),e._uU(104,"id"),e.qZA(),e.TgZ(105,"td"),e._uU(106,"string"),e.qZA(),e.TgZ(107,"td"),e._uU(108,"null"),e.qZA(),e.TgZ(109,"td"),e._uU(110,"Unique identifier of the element."),e.qZA(),e.qZA(),e.TgZ(111,"tr"),e.TgZ(112,"td"),e._uU(113,"value"),e.qZA(),e.TgZ(114,"td"),e._uU(115,"array"),e.qZA(),e.TgZ(116,"td"),e._uU(117,"null"),e.qZA(),e.TgZ(118,"td"),e._uU(119,"An array of objects to display."),e.qZA(),e.qZA(),e.TgZ(120,"tr"),e.TgZ(121,"td"),e._uU(122,"activeIndex"),e.qZA(),e.TgZ(123,"td"),e._uU(124,"number"),e.qZA(),e.TgZ(125,"td"),e._uU(126,"0"),e.qZA(),e.TgZ(127,"td"),e._uU(128,"Index of the first item."),e.qZA(),e.qZA(),e.TgZ(129,"tr"),e.TgZ(130,"td"),e._uU(131,"fullScreen"),e.qZA(),e.TgZ(132,"td"),e._uU(133,"boolean"),e.qZA(),e.TgZ(134,"td"),e._uU(135,"false"),e.qZA(),e.TgZ(136,"td"),e._uU(137,"Whether to display the component on fullscreen."),e.qZA(),e.qZA(),e.TgZ(138,"tr"),e.TgZ(139,"td"),e._uU(140,"visible"),e.qZA(),e.TgZ(141,"td"),e._uU(142,"boolean"),e.qZA(),e.TgZ(143,"td"),e._uU(144,"false"),e.qZA(),e.TgZ(145,"td"),e._uU(146,"Specifies the visibility of the mask on fullscreen mode."),e.qZA(),e.qZA(),e.TgZ(147,"tr"),e.TgZ(148,"td"),e._uU(149,"numVisible"),e.qZA(),e.TgZ(150,"td"),e._uU(151,"number"),e.qZA(),e.TgZ(152,"td"),e._uU(153,"3"),e.qZA(),e.TgZ(154,"td"),e._uU(155,"Number of items per page."),e.qZA(),e.qZA(),e.TgZ(156,"tr"),e.TgZ(157,"td"),e._uU(158,"responsiveOptions"),e.qZA(),e.TgZ(159,"td"),e._uU(160,"any"),e.qZA(),e.TgZ(161,"td"),e._uU(162,"null"),e.qZA(),e.TgZ(163,"td"),e._uU(164,"An array of options for responsive design."),e.qZA(),e.qZA(),e.TgZ(165,"tr"),e.TgZ(166,"td"),e._uU(167,"showItemNavigators"),e.qZA(),e.TgZ(168,"td"),e._uU(169,"boolean"),e.qZA(),e.TgZ(170,"td"),e._uU(171,"false"),e.qZA(),e.TgZ(172,"td"),e._uU(173,"Whether to display navigation buttons in preview container."),e.qZA(),e.qZA(),e.TgZ(174,"tr"),e.TgZ(175,"td"),e._uU(176,"showThumbnailNavigators"),e.qZA(),e.TgZ(177,"td"),e._uU(178,"boolean"),e.qZA(),e.TgZ(179,"td"),e._uU(180,"true"),e.qZA(),e.TgZ(181,"td"),e._uU(182,"Whether to display navigation buttons in thumbnail container."),e.qZA(),e.qZA(),e.TgZ(183,"tr"),e.TgZ(184,"td"),e._uU(185,"showItemNavigatorsOnHover"),e.qZA(),e.TgZ(186,"td"),e._uU(187,"boolean"),e.qZA(),e.TgZ(188,"td"),e._uU(189,"false"),e.qZA(),e.TgZ(190,"td"),e._uU(191,"Whether to display navigation buttons on preview container's hover."),e.qZA(),e.qZA(),e.TgZ(192,"tr"),e.TgZ(193,"td"),e._uU(194,"changeItemOnIndicatorHover"),e.qZA(),e.TgZ(195,"td"),e._uU(196,"boolean"),e.qZA(),e.TgZ(197,"td"),e._uU(198,"false"),e.qZA(),e.TgZ(199,"td"),e._uU(200,"When enabled, preview item is changed on indicator item's hover."),e.qZA(),e.qZA(),e.TgZ(201,"tr"),e.TgZ(202,"td"),e._uU(203,"circular"),e.qZA(),e.TgZ(204,"td"),e._uU(205,"boolean"),e.qZA(),e.TgZ(206,"td"),e._uU(207,"false"),e.qZA(),e.TgZ(208,"td"),e._uU(209,"Defines if scrolling would be infinite."),e.qZA(),e.qZA(),e.TgZ(210,"tr"),e.TgZ(211,"td"),e._uU(212,"autoPlay"),e.qZA(),e.TgZ(213,"td"),e._uU(214,"boolean"),e.qZA(),e.TgZ(215,"td"),e._uU(216,"false"),e.qZA(),e.TgZ(217,"td"),e._uU(218,"Items are displayed with a slideshow in autoPlay mode."),e.qZA(),e.qZA(),e.TgZ(219,"tr"),e.TgZ(220,"td"),e._uU(221,"transitionInterval"),e.qZA(),e.TgZ(222,"td"),e._uU(223,"number"),e.qZA(),e.TgZ(224,"td"),e._uU(225,"4000"),e.qZA(),e.TgZ(226,"td"),e._uU(227,"Time in milliseconds to scroll items."),e.qZA(),e.qZA(),e.TgZ(228,"tr"),e.TgZ(229,"td"),e._uU(230,"showThumbnails"),e.qZA(),e.TgZ(231,"td"),e._uU(232,"boolean"),e.qZA(),e.TgZ(233,"td"),e._uU(234,"true"),e.qZA(),e.TgZ(235,"td"),e._uU(236,"Whether to display thumbnail container."),e.qZA(),e.qZA(),e.TgZ(237,"tr"),e.TgZ(238,"td"),e._uU(239,"thumbnailsPosition"),e.qZA(),e.TgZ(240,"td"),e._uU(241,"string"),e.qZA(),e.TgZ(242,"td"),e._uU(243,"bottom"),e.qZA(),e.TgZ(244,"td"),e._uU(245,'Position of thumbnails. Valid values are "bottom", "top", "left" and "right".'),e.qZA(),e.qZA(),e.TgZ(246,"tr"),e.TgZ(247,"td"),e._uU(248,"verticalThumbnailViewPortHeight"),e.qZA(),e.TgZ(249,"td"),e._uU(250,"string"),e.qZA(),e.TgZ(251,"td"),e._uU(252,"300px"),e.qZA(),e.TgZ(253,"td"),e._uU(254,"Height of the viewport in vertical thumbnail."),e.qZA(),e.qZA(),e.TgZ(255,"tr"),e.TgZ(256,"td"),e._uU(257,"showIndicators"),e.qZA(),e.TgZ(258,"td"),e._uU(259,"boolean"),e.qZA(),e.TgZ(260,"td"),e._uU(261,"false"),e.qZA(),e.TgZ(262,"td"),e._uU(263,"Whether to display indicator container."),e.qZA(),e.qZA(),e.TgZ(264,"tr"),e.TgZ(265,"td"),e._uU(266,"showIndicatorsOnItem"),e.qZA(),e.TgZ(267,"td"),e._uU(268,"boolean"),e.qZA(),e.TgZ(269,"td"),e._uU(270,"false"),e.qZA(),e.TgZ(271,"td"),e._uU(272,"When enabled, indicator container is displayed on preview container."),e.qZA(),e.qZA(),e.TgZ(273,"tr"),e.TgZ(274,"td"),e._uU(275,"indicatorsPosition"),e.qZA(),e.TgZ(276,"td"),e._uU(277,"string"),e.qZA(),e.TgZ(278,"td"),e._uU(279,"bottom"),e.qZA(),e.TgZ(280,"td"),e._uU(281,'Position of indicators. Valid values are "bottom", "top", "left" and "right".'),e.qZA(),e.qZA(),e.TgZ(282,"tr"),e.TgZ(283,"td"),e._uU(284,"baseZIndex"),e.qZA(),e.TgZ(285,"td"),e._uU(286,"number"),e.qZA(),e.TgZ(287,"td"),e._uU(288,"0"),e.qZA(),e.TgZ(289,"td"),e._uU(290,"Base zIndex value to use in layering."),e.qZA(),e.qZA(),e.TgZ(291,"tr"),e.TgZ(292,"td"),e._uU(293,"maskClass"),e.qZA(),e.TgZ(294,"td"),e._uU(295,"string"),e.qZA(),e.TgZ(296,"td"),e._uU(297,"null"),e.qZA(),e.TgZ(298,"td"),e._uU(299,"Style class of the mask on fullscreen mode."),e.qZA(),e.qZA(),e.TgZ(300,"tr"),e.TgZ(301,"td"),e._uU(302,"containerStyle"),e.qZA(),e.TgZ(303,"td"),e._uU(304,"string"),e.qZA(),e.TgZ(305,"td"),e._uU(306,"null"),e.qZA(),e.TgZ(307,"td"),e._uU(308,"Inline style of the component on fullscreen mode. Otherwise, the 'style' property can be used."),e.qZA(),e.qZA(),e.TgZ(309,"tr"),e.TgZ(310,"td"),e._uU(311,"galleriaClass"),e.qZA(),e.TgZ(312,"td"),e._uU(313,"string"),e.qZA(),e.TgZ(314,"td"),e._uU(315,"null"),e.qZA(),e.TgZ(316,"td"),e._uU(317,"Style class of the component on fullscreen mode. Otherwise, the 'class' property can be used."),e.qZA(),e.qZA(),e.TgZ(318,"tr"),e.TgZ(319,"td"),e._uU(320,"showTransitionOptions"),e.qZA(),e.TgZ(321,"td"),e._uU(322,"string"),e.qZA(),e.TgZ(323,"td"),e._uU(324,"150ms cubic-bezier(0, 0, 0.2, 1)/td> "),e.qZA(),e.TgZ(325,"td"),e._uU(326,"Transition options of the show animation."),e.qZA(),e.qZA(),e.TgZ(327,"tr"),e.TgZ(328,"td"),e._uU(329,"hideTransitionOptions"),e.qZA(),e.TgZ(330,"td"),e._uU(331,"string"),e.qZA(),e.TgZ(332,"td"),e._uU(333,"150ms cubic-bezier(0, 0, 0.2, 1)"),e.qZA(),e.TgZ(334,"td"),e._uU(335,"Transition options of the hide animation."),e.qZA(),e.qZA(),e.qZA(),e.qZA(),e.qZA(),e.TgZ(336,"h5"),e._uU(337,"Templates"),e.qZA(),e.TgZ(338,"div",13),e.TgZ(339,"table",14),e.TgZ(340,"thead"),e.TgZ(341,"tr"),e.TgZ(342,"th"),e._uU(343,"Name"),e.qZA(),e.TgZ(344,"th"),e._uU(345,"Parameters"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(346,"tbody"),e.TgZ(347,"tr"),e.TgZ(348,"td"),e._uU(349,"header"),e.qZA(),e.TgZ(350,"td"),e._uU(351,"-"),e.qZA(),e.qZA(),e.TgZ(352,"tr"),e.TgZ(353,"td"),e._uU(354,"indicator"),e.qZA(),e.TgZ(355,"td"),e._uU(356,"$implicit: Data of the item"),e.qZA(),e.qZA(),e.TgZ(357,"tr"),e.TgZ(358,"td"),e._uU(359,"caption"),e.qZA(),e.TgZ(360,"td"),e._uU(361,"-"),e.qZA(),e.qZA(),e.TgZ(362,"tr"),e.TgZ(363,"td"),e._uU(364,"footer"),e.qZA(),e.TgZ(365,"td"),e._uU(366,"-"),e.qZA(),e.qZA(),e.qZA(),e.qZA(),e.qZA(),e.TgZ(367,"h5"),e._uU(368,"Styling"),e.qZA(),e.TgZ(369,"p"),e._uU(370,"Following is the list of structural style classes, for theming classes visit "),e.TgZ(371,"a",15),e._uU(372,"theming page"),e.qZA(),e._uU(373,"."),e.qZA(),e.TgZ(374,"div",13),e.TgZ(375,"table",14),e.TgZ(376,"thead"),e.TgZ(377,"tr"),e.TgZ(378,"th"),e._uU(379,"Name"),e.qZA(),e.TgZ(380,"th"),e._uU(381,"Element"),e.qZA(),e.qZA(),e.qZA(),e.TgZ(382,"tbody"),e.TgZ(383,"tr"),e.TgZ(384,"td"),e._uU(385,"p-galleria"),e.qZA(),e.TgZ(386,"td"),e._uU(387,"Container element."),e.qZA(),e.qZA(),e.TgZ(388,"tr"),e.TgZ(389,"td"),e._uU(390,"p-galleria-header"),e.qZA(),e.TgZ(391,"td"),e._uU(392,"Header section."),e.qZA(),e.qZA(),e.TgZ(393,"tr"),e.TgZ(394,"td"),e._uU(395,"p-galleria-footer"),e.qZA(),e.TgZ(396,"td"),e._uU(397,"Footer section."),e.qZA(),e.qZA(),e.TgZ(398,"tr"),e.TgZ(399,"td"),e._uU(400,"p-galleria-item-wrapper"),e.qZA(),e.TgZ(401,"td"),e._uU(402,"Preview content element. It contains preview and indicator containers."),e.qZA(),e.qZA(),e.TgZ(403,"tr"),e.TgZ(404,"td"),e._uU(405,"p-galleria-item-container"),e.qZA(),e.TgZ(406,"td"),e._uU(407,"Container of the preview content. It contains navigation buttons, preview item and caption content."),e.qZA(),e.qZA(),e.TgZ(408,"tr"),e.TgZ(409,"td"),e._uU(410,"p-galleria-indicators"),e.qZA(),e.TgZ(411,"td"),e._uU(412,"Container of the indicators. It contains indicator items."),e.qZA(),e.qZA(),e.TgZ(413,"tr"),e.TgZ(414,"td"),e._uU(415,"p-galleria-thumbnail-wrapper"),e.qZA(),e.TgZ(416,"td"),e._uU(417,"Thumbnail content element."),e.qZA(),e.qZA(),e.TgZ(418,"tr"),e.TgZ(419,"td"),e._uU(420,"p-galleria-thumbnail-container"),e.qZA(),e.TgZ(421,"td"),e._uU(422,"Container of the thumbnail content. It contains navigation buttons and thumbnail items."),e.qZA(),e.qZA(),e.TgZ(423,"tr"),e.TgZ(424,"td"),e._uU(425,"p-galleria-caption"),e.qZA(),e.TgZ(426,"td"),e._uU(427,"Content of the preview caption."),e.qZA(),e.qZA(),e.qZA(),e.qZA(),e.qZA(),e.TgZ(428,"h5"),e._uU(429,"Dependencies"),e.qZA(),e.TgZ(430,"p"),e._uU(431,"None."),e.qZA(),e.qZA(),e.TgZ(432,"p-tabPanel",16),e.TgZ(433,"a",17),e.TgZ(434,"span"),e._uU(435,"View on GitHub"),e.qZA(),e.qZA(),e.TgZ(436,"app-code",11),e.IAx(),e._uU(437,'\n<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{\'max-width\': \'640px\'}" [numVisible]="5">\n    <ng-template pTemplate="item" let-item>\n        <img [src]="item.previewImageSrc" style="width: 100%;" />\n    </ng-template>\n    <ng-template pTemplate="thumbnail" let-item>\n        <div class="p-grid p-nogutter p-justify-center">\n            <img [src]="item.thumbnailImageSrc" />\n        </div>\n    </ng-template>\n</p-galleria>\n'),e.fQ9(),e.qZA(),e.TgZ(438,"app-code",10),e.IAx(),e._uU(439,"\nexport class GalleriaDemo {\n\n    images: any[];\n\n    constructor(private photoService: PhotoService) { }\n\n    responsiveOptions:any[] = [\n        {\n            breakpoint: '1024px',\n            numVisible: 5\n        },\n        {\n            breakpoint: '768px',\n            numVisible: 3\n        },\n        {\n            breakpoint: '560px',\n            numVisible: 1\n        }\n    ];\n    ngOnInit() {\n        this.photoService.getImages().then(images => this.images = images);\n    }\n}\n"),e.fQ9(),e.qZA(),e.qZA(),e.qZA(),e.qZA()),2&n&&(e.xp6(9),e.Q6J("value",a.images)("responsiveOptions",a.responsiveOptions)("containerStyle",e.DdM(5,S))("numVisible",5),e.xp6(362),e.Q6J("routerLink",e.DdM(6,y)))},directives:[m.P,c.dz,u.jx,s.xf,s.x4,p.h,Z.yS],encapsulation:2}),t})();function x(t,i){1&t&&e._UZ(0,"img",21),2&t&&e.Q6J("src",i.$implicit.previewImageSrc,e.LSH)}function O(t,i){if(1&t&&(e.TgZ(0,"div",22),e._UZ(1,"img",23),e.qZA()),2&t){const n=i.$implicit;e.xp6(1),e.Q6J("src",n.thumbnailImageSrc,e.LSH)}}function k(t,i){1&t&&e._UZ(0,"img",21),2&t&&e.Q6J("src",i.$implicit.previewImageSrc,e.LSH)}function D(t,i){if(1&t&&(e.TgZ(0,"div",22),e._UZ(1,"img",23),e.qZA()),2&t){const n=i.$implicit;e.xp6(1),e.Q6J("src",n.thumbnailImageSrc,e.LSH)}}function G(t,i){1&t&&e._UZ(0,"img",21),2&t&&e.Q6J("src",i.$implicit.previewImageSrc,e.LSH)}function V(t,i){if(1&t&&(e.TgZ(0,"div",22),e._UZ(1,"img",23),e.qZA()),2&t){const n=i.$implicit;e.xp6(1),e.Q6J("src",n.thumbnailImageSrc,e.LSH)}}function C(t,i){1&t&&e._UZ(0,"img",21),2&t&&e.Q6J("src",i.$implicit.previewImageSrc,e.LSH)}function N(t,i){if(1&t&&(e.TgZ(0,"div",22),e._UZ(1,"img",23),e.qZA()),2&t){const n=i.$implicit;e.xp6(1),e.Q6J("src",n.thumbnailImageSrc,e.LSH)}}function P(t,i){1&t&&e._UZ(0,"img",21),2&t&&e.Q6J("src",i.$implicit.previewImageSrc,e.LSH)}function F(t,i){if(1&t&&(e.TgZ(0,"div",22),e._UZ(1,"img",23),e.qZA()),2&t){const n=i.$implicit;e.xp6(1),e.Q6J("src",n.thumbnailImageSrc,e.LSH)}}function H(t,i){1&t&&e._UZ(0,"img",21),2&t&&e.Q6J("src",i.$implicit.previewImageSrc,e.LSH)}function J(t,i){if(1&t&&(e.TgZ(0,"div",22),e._UZ(1,"img",23),e.qZA()),2&t){const n=i.$implicit;e.xp6(1),e.Q6J("src",n.thumbnailImageSrc,e.LSH)}}function Q(t,i){1&t&&e._UZ(0,"img",21),2&t&&e.Q6J("src",i.$implicit.previewImageSrc,e.LSH)}function L(t,i){if(1&t&&(e.TgZ(0,"div",22),e._UZ(1,"img",23),e.qZA()),2&t){const n=i.$implicit;e.xp6(1),e.Q6J("src",n.thumbnailImageSrc,e.LSH)}}function j(t,i){if(1&t&&(e.TgZ(0,"span",24),e._uU(1),e.qZA()),2&t){const n=i.$implicit;e.xp6(1),e.hij(" ",n+1," ")}}const v=function(){return{"max-width":"640px"}},h=function(){return{"max-width":"640px","margin-top":"2em"}};let Y=(()=>{class t{constructor(n){this.photoService=n,this.responsiveOptions=[{breakpoint:"1024px",numVisible:5},{breakpoint:"768px",numVisible:3},{breakpoint:"560px",numVisible:1}]}ngOnInit(){this.photoService.getImages().then(n=>{this.images=n})}}return t.\u0275fac=function(n){return new(n||t)(e.Y36(g.T))},t.\u0275cmp=e.Xpm({type:t,selectors:[["ng-component"]],decls:67,vars:60,consts:[[1,"content-section","introduction"],[1,"feature-intro"],["github","galleria"],[1,"content-section","implementation"],[1,"card"],[3,"value","responsiveOptions","containerStyle","numVisible","showThumbnails","showIndicators","valueChange"],["pTemplate","item"],["pTemplate","thumbnail"],[3,"value","responsiveOptions","containerStyle","numVisible","showThumbnails","showIndicators","changeItemOnIndicatorHover","valueChange"],[3,"value","responsiveOptions","containerStyle","numVisible","showThumbnails","showIndicators","changeItemOnIndicatorHover","showIndicatorsOnItem","valueChange"],["indicatorsPosition","top",3,"value","responsiveOptions","containerStyle","numVisible","showThumbnails","showIndicators","changeItemOnIndicatorHover","showIndicatorsOnItem","valueChange"],["indicatorsPosition","left",3,"value","responsiveOptions","containerStyle","numVisible","showThumbnails","showIndicators","changeItemOnIndicatorHover","showIndicatorsOnItem","valueChange"],["indicatorsPosition","right",3,"value","responsiveOptions","containerStyle","numVisible","showThumbnails","showIndicators","changeItemOnIndicatorHover","showIndicatorsOnItem","valueChange"],["pTemplate","indicator"],[1,"content-section","documentation"],["header","galleriaindicatordemo.ts"],["href","https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/galleria/galleriaindicatordemo.ts","target","_blank",1,"btn-viewsource"],["lang","typescript"],["header","galleriaindicatordemo.html"],["href","https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/galleria/galleriaindicatordemo.html","target","_blank",1,"btn-viewsource"],["lang","markup"],[2,"width","100%","display","block",3,"src"],[1,"p-grid","p-nogutter","p-justify-center"],[2,"display","block",3,"src"],[2,"color","#e9ecef","cursor","pointer"]],template:function(n,a){1&n&&(e.TgZ(0,"div",0),e.TgZ(1,"div",1),e.TgZ(2,"h1"),e._uU(3,"Galleria "),e.TgZ(4,"span"),e._uU(5,"Indicator"),e.qZA(),e.qZA(),e.TgZ(6,"p"),e._uU(7,"Indicators allow quick navigation between the items."),e.qZA(),e.qZA(),e._UZ(8,"app-demoActions",2),e.qZA(),e.TgZ(9,"div",3),e.TgZ(10,"div",4),e.TgZ(11,"h5"),e._uU(12,"Indicators with Click Event"),e.qZA(),e.TgZ(13,"p-galleria",5),e.NdJ("valueChange",function(l){return a.images=l}),e.YNc(14,x,1,1,"ng-template",6),e.YNc(15,O,2,1,"ng-template",7),e.qZA(),e.qZA(),e.TgZ(16,"div",4),e.TgZ(17,"h5"),e._uU(18,"Indicators with Hover Event"),e.qZA(),e.TgZ(19,"p-galleria",8),e.NdJ("valueChange",function(l){return a.images=l}),e.YNc(20,k,1,1,"ng-template",6),e.YNc(21,D,2,1,"ng-template",7),e.qZA(),e.qZA(),e.TgZ(22,"div",4),e.TgZ(23,"h5"),e._uU(24,"Inside Content"),e.qZA(),e.TgZ(25,"p-galleria",9),e.NdJ("valueChange",function(l){return a.images=l}),e.YNc(26,G,1,1,"ng-template",6),e.YNc(27,V,2,1,"ng-template",7),e.qZA(),e.qZA(),e.TgZ(28,"div",4),e.TgZ(29,"h5"),e._uU(30,"Positioned at Top"),e.qZA(),e.TgZ(31,"p-galleria",10),e.NdJ("valueChange",function(l){return a.images=l}),e.YNc(32,C,1,1,"ng-template",6),e.YNc(33,N,2,1,"ng-template",7),e.qZA(),e.qZA(),e.TgZ(34,"div",4),e.TgZ(35,"h5"),e._uU(36,"Positioned at Left"),e.qZA(),e.TgZ(37,"p-galleria",11),e.NdJ("valueChange",function(l){return a.images=l}),e.YNc(38,P,1,1,"ng-template",6),e.YNc(39,F,2,1,"ng-template",7),e.qZA(),e.qZA(),e.TgZ(40,"div",4),e.TgZ(41,"h5"),e._uU(42,"Positioned at Right"),e.qZA(),e.TgZ(43,"p-galleria",12),e.NdJ("valueChange",function(l){return a.images=l}),e.YNc(44,H,1,1,"ng-template",6),e.YNc(45,J,2,1,"ng-template",7),e.qZA(),e.qZA(),e.TgZ(46,"div",4),e.TgZ(47,"h5"),e._uU(48,"Template"),e.qZA(),e.TgZ(49,"p-galleria",11),e.NdJ("valueChange",function(l){return a.images=l}),e.YNc(50,Q,1,1,"ng-template",6),e.YNc(51,L,2,1,"ng-template",7),e.YNc(52,j,2,1,"ng-template",13),e.qZA(),e.qZA(),e.qZA(),e.TgZ(53,"div",14),e.TgZ(54,"p-tabView"),e.TgZ(55,"p-tabPanel",15),e.TgZ(56,"a",16),e.TgZ(57,"span"),e._uU(58,"View on GitHub"),e.qZA(),e.qZA(),e.TgZ(59,"app-code",17),e.IAx(),e._uU(60,"\nexport class GalleriaIndicatorDemo implements OnInit {\n    images: any[];\n\n    responsiveOptions:any[] = [\n        {\n            breakpoint: '1024px',\n            numVisible: 5\n        },\n        {\n            breakpoint: '768px',\n            numVisible: 3\n        },\n        {\n            breakpoint: '560px',\n            numVisible: 1\n        }\n    ];\n\n    constructor(private photoService: PhotoService) { }\n\n    ngOnInit() {\n        this.photoService.getImages().then(images =>{ \n            this.images = images\n        })\n    }\n}\n"),e.fQ9(),e.qZA(),e.qZA(),e.TgZ(61,"p-tabPanel",18),e.TgZ(62,"a",19),e.TgZ(63,"span"),e._uU(64,"View on GitHub"),e.qZA(),e.qZA(),e.TgZ(65,"app-code",20),e.IAx(),e._uU(66,'\n<h5>Indicators with Click Event</h5>\n<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{\'max-width\': \'640px\'}" [numVisible]="5"\n    [showThumbnails]="false" [showIndicators]="true"> \n    <ng-template pTemplate="item" let-item>\n        <img [src]="item.previewImageSrc" style="width: 100%; display: block;" />\n    </ng-template>\n    <ng-template pTemplate="thumbnail" let-item>\n        <div class="p-grid p-nogutter p-justify-center">\n            <img [src]="item.thumbnailImageSrc" style="display: block;" />\n        </div>\n    </ng-template>\n</p-galleria>\n<h5>Indicators with Hover Event</h5>\n<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{\'max-width\': \'640px\'}" [numVisible]="5"\n    [showThumbnails]="false" [showIndicators]="true" [changeItemOnIndicatorHover]="true"> \n    <ng-template pTemplate="item" let-item>\n        <img [src]="item.previewImageSrc" style="width: 100%; display: block;" />\n    </ng-template>\n    <ng-template pTemplate="thumbnail" let-item>\n        <div class="p-grid p-nogutter p-justify-center">\n            <img [src]="item.thumbnailImageSrc" style="display: block;" />\n        </div>\n    </ng-template>\n</p-galleria>\n<h5>Inside Content</h5>\n<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{\'max-width\': \'640px\'}" [numVisible]="5"\n    [showThumbnails]="false" [showIndicators]="true" [changeItemOnIndicatorHover]="true" [showIndicatorsOnItem]="true"> \n    <ng-template pTemplate="item" let-item>\n        <img [src]="item.previewImageSrc" style="width: 100%; display: block;" />\n    </ng-template>\n    <ng-template pTemplate="thumbnail" let-item>\n        <div class="p-grid p-nogutter p-justify-center">\n            <img [src]="item.thumbnailImageSrc" style="display: block;" />\n        </div>\n    </ng-template>\n</p-galleria>\n<h5>Positioned at Top</h5>\n<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{\'max-width\': \'640px\',\'margin-top\': \'2em\'}" [numVisible]="5"\n    [showThumbnails]="false" [showIndicators]="true" [changeItemOnIndicatorHover]="true" [showIndicatorsOnItem]="true" indicatorsPosition="top">\n    <ng-template pTemplate="item" let-item>\n        <img [src]="item.previewImageSrc" style="width: 100%; display: block;" />\n    </ng-template>\n    <ng-template pTemplate="thumbnail" let-item>\n        <div class="p-grid p-nogutter p-justify-center">\n            <img [src]="item.thumbnailImageSrc" style="display: block;" />\n        </div>\n    </ng-template>\n</p-galleria>\n<h5>Positioned at Left</h5>\n<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{\'max-width\': \'640px\',\'margin-top\': \'2em\'}" [numVisible]="5"\n    [showThumbnails]="false" [showIndicators]="true" [changeItemOnIndicatorHover]="true" [showIndicatorsOnItem]="true" indicatorsPosition="left">\n    <ng-template pTemplate="item" let-item>\n        <img [src]="item.previewImageSrc" style="width: 100%; display: block;" />\n    </ng-template>\n    <ng-template pTemplate="thumbnail" let-item>\n        <div class="p-grid p-nogutter p-justify-center">\n            <img [src]="item.thumbnailImageSrc" style="display: block;" />\n        </div>\n    </ng-template>\n</p-galleria>\n<h5>Positioned at Right</h5>\n<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{\'max-width\': \'640px\',\'margin-top\': \'2em\'}" [numVisible]="5"\n    [showThumbnails]="false" [showIndicators]="true" [changeItemOnIndicatorHover]="true" [showIndicatorsOnItem]="true" indicatorsPosition="right">\n    <ng-template pTemplate="item" let-item>\n        <img [src]="item.previewImageSrc" style="width: 100%; display: block;" />\n    </ng-template>\n    <ng-template pTemplate="thumbnail" let-item>\n        <div class="p-grid p-nogutter p-justify-center">\n            <img [src]="item.thumbnailImageSrc" style="display: block;" />\n        </div>\n    </ng-template>\n</p-galleria>\n<h5>Template</h5>\n<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{\'max-width\': \'640px\',\'margin-top\': \'2em\'}" [numVisible]="5"\n    [showThumbnails]="false" [showIndicators]="true" [changeItemOnIndicatorHover]="true" [showIndicatorsOnItem]="true" indicatorsPosition="left">\n    <ng-template pTemplate="item" let-item>\n        <img [src]="item.previewImageSrc" style="width: 100%; display: block;" />\n    </ng-template>\n    <ng-template pTemplate="thumbnail" let-item>\n        <div class="p-grid p-nogutter p-justify-center">\n            <img [src]="item.thumbnailImageSrc" style="display: block;" />\n        </div>\n    </ng-template>\n    <ng-template pTemplate="indicator" let-index>\n        <span style="color: #e9ecef; cursor: pointer">\n            {{index + 1}}\n        </span>\n    </ng-template>\n</p-galleria>\n'),e.fQ9(),e.qZA(),e.qZA(),e.qZA(),e.qZA()),2&n&&(e.xp6(13),e.Q6J("value",a.images)("responsiveOptions",a.responsiveOptions)("containerStyle",e.DdM(53,v))("numVisible",5)("showThumbnails",!1)("showIndicators",!0),e.xp6(6),e.Q6J("value",a.images)("responsiveOptions",a.responsiveOptions)("containerStyle",e.DdM(54,v))("numVisible",5)("showThumbnails",!1)("showIndicators",!0)("changeItemOnIndicatorHover",!0),e.xp6(6),e.Q6J("value",a.images)("responsiveOptions",a.responsiveOptions)("containerStyle",e.DdM(55,v))("numVisible",5)("showThumbnails",!1)("showIndicators",!0)("changeItemOnIndicatorHover",!0)("showIndicatorsOnItem",!0),e.xp6(6),e.Q6J("value",a.images)("responsiveOptions",a.responsiveOptions)("containerStyle",e.DdM(56,h))("numVisible",5)("showThumbnails",!1)("showIndicators",!0)("changeItemOnIndicatorHover",!0)("showIndicatorsOnItem",!0),e.xp6(6),e.Q6J("value",a.images)("responsiveOptions",a.responsiveOptions)("containerStyle",e.DdM(57,h))("numVisible",5)("showThumbnails",!1)("showIndicators",!0)("changeItemOnIndicatorHover",!0)("showIndicatorsOnItem",!0),e.xp6(6),e.Q6J("value",a.images)("responsiveOptions",a.responsiveOptions)("containerStyle",e.DdM(58,h))("numVisible",5)("showThumbnails",!1)("showIndicators",!0)("changeItemOnIndicatorHover",!0)("showIndicatorsOnItem",!0),e.xp6(6),e.Q6J("value",a.images)("responsiveOptions",a.responsiveOptions)("containerStyle",e.DdM(59,h))("numVisible",5)("showThumbnails",!1)("showIndicators",!0)("changeItemOnIndicatorHover",!0)("showIndicatorsOnItem",!0))},directives:[m.P,c.dz,u.jx,s.xf,s.x4,p.h],encapsulation:2}),t})();function $(t,i){1&t&&e._UZ(0,"img",19),2&t&&e.Q6J("src",i.$implicit.previewImageSrc,e.LSH)}function M(t,i){if(1&t&&(e.TgZ(0,"div",20),e._UZ(1,"img",21),e.qZA()),2&t){const n=i.$implicit;e.xp6(1),e.Q6J("src",n.thumbnailImageSrc,e.LSH)}}function z(t,i){1&t&&e._UZ(0,"img",19),2&t&&e.Q6J("src",i.$implicit.previewImageSrc,e.LSH)}function E(t,i){if(1&t&&(e.TgZ(0,"div",20),e._UZ(1,"img",21),e.qZA()),2&t){const n=i.$implicit;e.xp6(1),e.Q6J("src",n.thumbnailImageSrc,e.LSH)}}function B(t,i){1&t&&e._UZ(0,"img",19),2&t&&e.Q6J("src",i.$implicit.previewImageSrc,e.LSH)}function R(t,i){if(1&t&&(e.TgZ(0,"div",20),e._UZ(1,"img",21),e.qZA()),2&t){const n=i.$implicit;e.xp6(1),e.Q6J("src",n.thumbnailImageSrc,e.LSH)}}function W(t,i){1&t&&e._UZ(0,"img",19),2&t&&e.Q6J("src",i.$implicit.previewImageSrc,e.LSH)}function X(t,i){if(1&t&&(e.TgZ(0,"div",20),e._UZ(1,"img",21),e.qZA()),2&t){const n=i.$implicit;e.xp6(1),e.Q6J("src",n.thumbnailImageSrc,e.LSH)}}function K(t,i){1&t&&e._UZ(0,"img",19),2&t&&e.Q6J("src",i.$implicit.previewImageSrc,e.LSH)}function ee(t,i){if(1&t&&(e.TgZ(0,"div",20),e._UZ(1,"img",21),e.qZA()),2&t){const n=i.$implicit;e.xp6(1),e.Q6J("src",n.thumbnailImageSrc,e.LSH)}}const A=function(){return{"max-width":"660px"}},_=function(){return{"max-width":"660px","margin-top":"2em"}};let te=(()=>{class t{constructor(n){this.photoService=n,this.responsiveOptions=[{breakpoint:"1024px",numVisible:5},{breakpoint:"768px",numVisible:3},{breakpoint:"560px",numVisible:1}]}ngOnInit(){this.photoService.getImages().then(n=>{this.images=n})}}return t.\u0275fac=function(n){return new(n||t)(e.Y36(g.T))},t.\u0275cmp=e.Xpm({type:t,selectors:[["ng-component"]],decls:54,vars:25,consts:[[1,"content-section","introduction"],[1,"feature-intro"],["github","galleria"],[1,"content-section","implementation"],[1,"card"],[3,"value","responsiveOptions","containerStyle","numVisible","valueChange"],["pTemplate","item"],["pTemplate","thumbnail"],["thumbnailsPosition","left",3,"value","responsiveOptions","containerStyle","numVisible","valueChange"],["thumbnailsPosition","right",3,"value","responsiveOptions","containerStyle","numVisible","valueChange"],["thumbnailsPosition","top",3,"value","responsiveOptions","containerStyle","numVisible","valueChange"],["thumbnailsPosition","bottom",3,"value","responsiveOptions","containerStyle","numVisible","valueChange"],[1,"content-section","documentation"],["header","galleriathumbnaildemo.ts"],["href","https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/galleria/galleriathumbnaildemo.ts","target","_blank",1,"btn-viewsource"],["lang","typescript"],["header","galleriathumbnaildemo.html"],["href","https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/galleria/galleriathumbnaildemo.html","target","_blank",1,"btn-viewsource"],["lang","markup"],[2,"width","100%","display","block",3,"src"],[1,"p-grid","p-nogutter","p-justify-center"],[3,"src"]],template:function(n,a){1&n&&(e.TgZ(0,"div",0),e.TgZ(1,"div",1),e.TgZ(2,"h1"),e._uU(3,"Galleria "),e.TgZ(4,"span"),e._uU(5,"Thumbnail"),e.qZA(),e.qZA(),e.TgZ(6,"p"),e._uU(7,"Thumbnails represent a smaller version of the actual content."),e.qZA(),e.qZA(),e._UZ(8,"app-demoActions",2),e.qZA(),e.TgZ(9,"div",3),e.TgZ(10,"div",4),e.TgZ(11,"h5"),e._uU(12,"Positioned at Bottom"),e.qZA(),e.TgZ(13,"p-galleria",5),e.NdJ("valueChange",function(l){return a.images=l}),e.YNc(14,$,1,1,"ng-template",6),e.YNc(15,M,2,1,"ng-template",7),e.qZA(),e.qZA(),e.TgZ(16,"div",4),e.TgZ(17,"h5"),e._uU(18,"Positioned at Left"),e.qZA(),e.TgZ(19,"p-galleria",8),e.NdJ("valueChange",function(l){return a.images=l}),e.YNc(20,z,1,1,"ng-template",6),e.YNc(21,E,2,1,"ng-template",7),e.qZA(),e.qZA(),e.TgZ(22,"div",4),e.TgZ(23,"h5"),e._uU(24,"Positioned at Right"),e.qZA(),e.TgZ(25,"p-galleria",9),e.NdJ("valueChange",function(l){return a.images=l}),e.YNc(26,B,1,1,"ng-template",6),e.YNc(27,R,2,1,"ng-template",7),e.qZA(),e.qZA(),e.TgZ(28,"div",4),e.TgZ(29,"h5"),e._uU(30,"Positioned at Top"),e.qZA(),e.TgZ(31,"p-galleria",10),e.NdJ("valueChange",function(l){return a.images=l}),e.YNc(32,W,1,1,"ng-template",6),e.YNc(33,X,2,1,"ng-template",7),e.qZA(),e.qZA(),e.TgZ(34,"div",4),e.TgZ(35,"h5"),e._uU(36,"Positioned at Bottom"),e.qZA(),e.TgZ(37,"p-galleria",11),e.NdJ("valueChange",function(l){return a.images=l}),e.YNc(38,K,1,1,"ng-template",6),e.YNc(39,ee,2,1,"ng-template",7),e.qZA(),e.qZA(),e.qZA(),e.TgZ(40,"div",12),e.TgZ(41,"p-tabView"),e.TgZ(42,"p-tabPanel",13),e.TgZ(43,"a",14),e.TgZ(44,"span"),e._uU(45,"View on GitHub"),e.qZA(),e.qZA(),e.TgZ(46,"app-code",15),e.IAx(),e._uU(47,"\nexport class GalleriaDemo implements OnInit {\n    images: any[];\n\n    responsiveOptions:any[] = [\n        }\n            breakpoint: '1024px',\n            numVisible: 5\n        },\n        }\n            breakpoint: '768px',\n            numVisible: 3\n        },\n        }\n            breakpoint: '560px',\n            numVisible: 1\n        }\n    ];\n\n    constructor(private photoService: PhotoService) } }\n\n    ngOnInit() }\n        this.photoService.getImages().then(images =>} \n            this.images = images\n        })\n    }\n}\n"),e.fQ9(),e.qZA(),e.qZA(),e.TgZ(48,"p-tabPanel",16),e.TgZ(49,"a",17),e.TgZ(50,"span"),e._uU(51,"View on GitHub"),e.qZA(),e.qZA(),e.TgZ(52,"app-code",18),e.IAx(),e._uU(53,'\n<h5>Positioned at Bottom</h5>\n<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{\'max-width\': \'660px\'}" [numVisible]="5"> \n    <ng-template pTemplate="item" let-item>\n        <img [src]="item.previewImageSrc" style="width: 100%; display: block;" />\n    </ng-template>\n    <ng-template pTemplate="thumbnail" let-item>\n        <div class="p-grid p-nogutter p-justify-center">\n            <img [src]="item.thumbnailImageSrc" />\n        </div>\n    </ng-template>\n</p-galleria>\n<h5>Positioned at Left</h5>\n<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{\'max-width\': \'660px\'}" [numVisible]="4"\n    thumbnailsPosition="left">\n    <ng-template pTemplate="item" let-item>\n        <img [src]="item.previewImageSrc" style="width: 100%; display: block;" />\n    </ng-template>\n    <ng-template pTemplate="thumbnail" let-item>\n        <div class="p-grid p-nogutter p-justify-center">\n            <img [src]="item.thumbnailImageSrc" />\n        </div>\n    </ng-template>\n</p-galleria>\n<h5>Positioned at Right</h5>\n<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{\'max-width\': \'660px\', \'margin-top\':\'2em\'}" [numVisible]="4"\n    thumbnailsPosition="right"> \n    <ng-template pTemplate="item" let-item>\n        <img [src]="item.previewImageSrc" style="width: 100%; display: block;" />\n    </ng-template>\n    <ng-template pTemplate="thumbnail" let-item>\n        <div class="p-grid p-nogutter p-justify-center">\n            <img [src]="item.thumbnailImageSrc" />\n        </div>\n    </ng-template>\n</p-galleria>\n<h5>Positioned at Top</h5>\n<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{\'max-width\': \'660px\', \'margin-top\':\'2em\'}" [numVisible]="5"\n    thumbnailsPosition="top">\n    <ng-template pTemplate="item" let-item>\n        <img [src]="item.previewImageSrc" style="width: 100%; display: block;" />\n    </ng-template>\n    <ng-template pTemplate="thumbnail" let-item>\n        <div class="p-grid p-nogutter p-justify-center">\n            <img [src]="item.thumbnailImageSrc" />\n        </div>\n    </ng-template>\n</p-galleria>\n<h5>Positioned at Bottom</h5>\n<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{\'max-width\': \'660px\', \'margin-top\':\'2em\'}" [numVisible]="5"\n    thumbnailsPosition="bottom">\n    <ng-template pTemplate="item" let-item>\n        <img [src]="item.previewImageSrc" style="width: 100%; display: block;" />\n    </ng-template>\n    <ng-template pTemplate="thumbnail" let-item>\n        <div class="p-grid p-nogutter p-justify-center">\n            <img [src]="item.thumbnailImageSrc" />\n        </div>\n    </ng-template>\n</p-galleria>\n'),e.fQ9(),e.qZA(),e.qZA(),e.qZA(),e.qZA()),2&n&&(e.xp6(13),e.Q6J("value",a.images)("responsiveOptions",a.responsiveOptions)("containerStyle",e.DdM(20,A))("numVisible",5),e.xp6(6),e.Q6J("value",a.images)("responsiveOptions",a.responsiveOptions)("containerStyle",e.DdM(21,A))("numVisible",4),e.xp6(6),e.Q6J("value",a.images)("responsiveOptions",a.responsiveOptions)("containerStyle",e.DdM(22,_))("numVisible",4),e.xp6(6),e.Q6J("value",a.images)("responsiveOptions",a.responsiveOptions)("containerStyle",e.DdM(23,_))("numVisible",5),e.xp6(6),e.Q6J("value",a.images)("responsiveOptions",a.responsiveOptions)("containerStyle",e.DdM(24,_))("numVisible",5))},directives:[m.P,c.dz,u.jx,s.xf,s.x4,p.h],encapsulation:2}),t})();function ne(t,i){1&t&&e._UZ(0,"img",18),2&t&&e.Q6J("src",i.$implicit.previewImageSrc,e.LSH)}function ie(t,i){if(1&t&&(e.TgZ(0,"div",19),e._UZ(1,"img",20),e.qZA()),2&t){const n=i.$implicit;e.xp6(1),e.Q6J("src",n.thumbnailImageSrc,e.LSH)}}function ae(t,i){1&t&&e._UZ(0,"img",18),2&t&&e.Q6J("src",i.$implicit.previewImageSrc,e.LSH)}function le(t,i){if(1&t&&(e.TgZ(0,"div",19),e._UZ(1,"img",20),e.qZA()),2&t){const n=i.$implicit;e.xp6(1),e.Q6J("src",n.thumbnailImageSrc,e.LSH)}}function re(t,i){1&t&&e._UZ(0,"img",18),2&t&&e.Q6J("src",i.$implicit.previewImageSrc,e.LSH)}function se(t,i){if(1&t&&(e.TgZ(0,"div",19),e._UZ(1,"img",20),e.qZA()),2&t){const n=i.$implicit;e.xp6(1),e.Q6J("src",n.thumbnailImageSrc,e.LSH)}}function oe(t,i){1&t&&e._UZ(0,"img",18),2&t&&e.Q6J("src",i.$implicit.previewImageSrc,e.LSH)}function me(t,i){if(1&t&&(e.TgZ(0,"div",19),e._UZ(1,"img",20),e.qZA()),2&t){const n=i.$implicit;e.xp6(1),e.Q6J("src",n.thumbnailImageSrc,e.LSH)}}const T=function(){return{"max-width":"640px"}},pe=function(){return{"max-width":"640px","margin-top":"2em"}};let ge=(()=>{class t{constructor(n){this.photoService=n,this.responsiveOptions=[{breakpoint:"1024px",numVisible:5},{breakpoint:"768px",numVisible:3},{breakpoint:"560px",numVisible:1}]}ngOnInit(){this.photoService.getImages().then(n=>{this.images=n})}}return t.\u0275fac=function(n){return new(n||t)(e.Y36(g.T))},t.\u0275cmp=e.Xpm({type:t,selectors:[["ng-component"]],decls:48,vars:34,consts:[[1,"content-section","introduction"],[1,"feature-intro"],["github","galleria"],[1,"content-section","implementation"],[1,"card"],[3,"value","responsiveOptions","containerStyle","numVisible","circular","showItemNavigators","valueChange"],["pTemplate","item"],["pTemplate","thumbnail"],[3,"value","responsiveOptions","containerStyle","numVisible","circular","showItemNavigators","showThumbnails","valueChange"],[3,"value","responsiveOptions","containerStyle","numVisible","circular","showItemNavigators","showItemNavigatorsOnHover","valueChange"],[3,"value","responsiveOptions","containerStyle","numVisible","circular","showItemNavigators","showThumbnails","showIndicators","showItemNavigatorsOnHover","showIndicatorsOnItem","valueChange"],[1,"content-section","documentation"],["header","gallerianavigatordemo.ts"],["href","https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/galleria/gallerianavigatordemo.ts","target","_blank",1,"btn-viewsource"],["lang","typescript"],["header","gallerianavigatordemo.html"],["href","https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/galleria/gallerianavigatordemo.html","target","_blank",1,"btn-viewsource"],["lang","markup"],[2,"width","100%","display","block",3,"src"],[1,"p-grid","p-nogutter","p-justify-center"],[2,"display","block",3,"src"]],template:function(n,a){1&n&&(e.TgZ(0,"div",0),e.TgZ(1,"div",1),e.TgZ(2,"h1"),e._uU(3,"Galleria "),e.TgZ(4,"span"),e._uU(5,"Navigator"),e.qZA(),e.qZA(),e.TgZ(6,"p"),e._uU(7,"Combining item navigators, thumbnails and indicators provide various UI alternatives."),e.qZA(),e.qZA(),e._UZ(8,"app-demoActions",2),e.qZA(),e.TgZ(9,"div",3),e.TgZ(10,"div",4),e.TgZ(11,"h5"),e._uU(12,"Item Navigators and Thumbnails"),e.qZA(),e.TgZ(13,"p-galleria",5),e.NdJ("valueChange",function(l){return a.images=l}),e.YNc(14,ne,1,1,"ng-template",6),e.YNc(15,ie,2,1,"ng-template",7),e.qZA(),e.qZA(),e.TgZ(16,"div",4),e.TgZ(17,"h5"),e._uU(18,"Item Navigators without Thumbnails"),e.qZA(),e.TgZ(19,"p-galleria",8),e.NdJ("valueChange",function(l){return a.images=l}),e.YNc(20,ae,1,1,"ng-template",6),e.YNc(21,le,2,1,"ng-template",7),e.qZA(),e.qZA(),e.TgZ(22,"div",4),e.TgZ(23,"h5"),e._uU(24,"Item Navigators on Hover"),e.qZA(),e.TgZ(25,"p-galleria",9),e.NdJ("valueChange",function(l){return a.images=l}),e.YNc(26,re,1,1,"ng-template",6),e.YNc(27,se,2,1,"ng-template",7),e.qZA(),e.qZA(),e.TgZ(28,"div",4),e.TgZ(29,"h5"),e._uU(30,"Item Navigators and Indicators"),e.qZA(),e.TgZ(31,"p-galleria",10),e.NdJ("valueChange",function(l){return a.images=l}),e.YNc(32,oe,1,1,"ng-template",6),e.YNc(33,me,2,1,"ng-template",7),e.qZA(),e.qZA(),e.qZA(),e.TgZ(34,"div",11),e.TgZ(35,"p-tabView"),e.TgZ(36,"p-tabPanel",12),e.TgZ(37,"a",13),e.TgZ(38,"span"),e._uU(39,"View on GitHub"),e.qZA(),e.qZA(),e.TgZ(40,"app-code",14),e.IAx(),e._uU(41,"\nexport class GalleriaNavigatorDemo implements OnInit {\n    images: any[];\n\n    responsiveOptions:any[] = [\n        {\n            breakpoint: '1024px',\n            numVisible: 5\n        },\n        {\n            breakpoint: '768px',\n            numVisible: 3\n        },\n        {\n            breakpoint: '560px',\n            numVisible: 1\n        }\n    ];\n\n    constructor(private photoService: PhotoService) { }\n\n    ngOnInit() {\n        this.photoService.getImages().then(images =>{ \n            this.images = images\n        })\n    }\n}\n"),e.fQ9(),e.qZA(),e.qZA(),e.TgZ(42,"p-tabPanel",15),e.TgZ(43,"a",16),e.TgZ(44,"span"),e._uU(45,"View on GitHub"),e.qZA(),e.qZA(),e.TgZ(46,"app-code",17),e.IAx(),e._uU(47,'\n<h5>Item Navigators and Thumbnails</h5>\n<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{\'max-width\': \'640px\'}" [numVisible]="5"\n    [circular]="true" [showItemNavigators]="true">\n    <ng-template pTemplate="item" let-item>\n        <img [src]="item.previewImageSrc" style="width: 100%; display: block;" />\n    </ng-template>\n    <ng-template pTemplate="thumbnail" let-item>\n        <div class="p-grid p-nogutter p-justify-center">\n            <img [src]="item.thumbnailImageSrc" style="display: block;" />\n        </div>\n    </ng-template>\n</p-galleria>\n<h5>Item Navigators without Thumbnails</h5>\n<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{\'max-width\': \'640px\'}" [numVisible]="5"\n    [circular]="true" [showItemNavigators]="true" [showThumbnails]="false">\n    <ng-template pTemplate="item" let-item>\n        <img [src]="item.previewImageSrc" style="width: 100%; display: block;" />\n    </ng-template>\n    <ng-template pTemplate="thumbnail" let-item>\n        <div class="p-grid p-nogutter p-justify-center">\n            <img [src]="item.thumbnailImageSrc" style="display: block;" />\n        </div>\n    </ng-template>\n</p-galleria>\n<h5>Item Navigators on Hover</h5>\n<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{\'max-width\': \'640px\'}" [numVisible]="5"\n    [circular]="true" [showItemNavigators]="true" [showItemNavigatorsOnHover]="true">\n    <ng-template pTemplate="item" let-item>\n        <img [src]="item.previewImageSrc" style="width: 100%; display: block;" />\n    </ng-template>\n    <ng-template pTemplate="thumbnail" let-item>\n        <div class="p-grid p-nogutter p-justify-center">\n            <img [src]="item.thumbnailImageSrc" style="display: block;" />\n        </div>\n    </ng-template>\n</p-galleria>\n<h5>Item Navigators and Indicators</h5>\n<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{\'max-width\': \'640px\', \'margin-top\':\'2em\'}" [numVisible]="5"\n    [circular]="true" [showItemNavigators]="true" [showThumbnails]="false" [showIndicators]="true" [showItemNavigatorsOnHover]="true"\n    [showIndicatorsOnItem]="true"> \n    <ng-template pTemplate="item" let-item>\n        <img [src]="item.previewImageSrc" style="width: 100%; display: block;" />\n    </ng-template>\n    <ng-template pTemplate="thumbnail" let-item>\n        <div class="p-grid p-nogutter p-justify-center">\n            <img [src]="item.thumbnailImageSrc" style="display: block;" />\n        </div>\n    </ng-template>\n</p-galleria>\n'),e.fQ9(),e.qZA(),e.qZA(),e.qZA(),e.qZA()),2&n&&(e.xp6(13),e.Q6J("value",a.images)("responsiveOptions",a.responsiveOptions)("containerStyle",e.DdM(30,T))("numVisible",5)("circular",!0)("showItemNavigators",!0),e.xp6(6),e.Q6J("value",a.images)("responsiveOptions",a.responsiveOptions)("containerStyle",e.DdM(31,T))("numVisible",5)("circular",!0)("showItemNavigators",!0)("showThumbnails",!1),e.xp6(6),e.Q6J("value",a.images)("responsiveOptions",a.responsiveOptions)("containerStyle",e.DdM(32,T))("numVisible",5)("circular",!0)("showItemNavigators",!0)("showItemNavigatorsOnHover",!0),e.xp6(6),e.Q6J("value",a.images)("responsiveOptions",a.responsiveOptions)("containerStyle",e.DdM(33,pe))("numVisible",5)("circular",!0)("showItemNavigators",!0)("showThumbnails",!1)("showIndicators",!0)("showItemNavigatorsOnHover",!0)("showIndicatorsOnItem",!0))},directives:[m.P,c.dz,u.jx,s.xf,s.x4,p.h],encapsulation:2}),t})();function ce(t,i){1&t&&e._UZ(0,"img",15),2&t&&e.Q6J("src",i.$implicit.previewImageSrc,e.LSH)}function ue(t,i){if(1&t&&(e.TgZ(0,"div",16),e._UZ(1,"img",17),e.qZA()),2&t){const n=i.$implicit;e.xp6(1),e.Q6J("src",n.thumbnailImageSrc,e.LSH)}}const de=function(){return{"max-width":"800px"}};let he=(()=>{class t{constructor(n){this.photoService=n,this.responsiveOptions=[{breakpoint:"1024px",numVisible:5},{breakpoint:"960px",numVisible:4},{breakpoint:"768px",numVisible:3},{breakpoint:"560px",numVisible:1}]}ngOnInit(){this.photoService.getImages().then(n=>{this.images=n})}}return t.\u0275fac=function(n){return new(n||t)(e.Y36(g.T))},t.\u0275cmp=e.Xpm({type:t,selectors:[["ng-component"]],decls:31,vars:6,consts:[[1,"content-section","introduction"],[1,"feature-intro"],["github","galleria"],[1,"content-section","implementation"],[1,"card"],[3,"value","responsiveOptions","containerStyle","numVisible","circular","valueChange"],["pTemplate","item"],["pTemplate","thumbnail"],[1,"content-section","documentation"],["header","galleriaresponsivedemo.ts"],["href","https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/galleria/galleriaresponsivedemo.ts","target","_blank",1,"btn-viewsource"],["lang","typescript"],["header","galleriaresponsivedemo.html"],["href","https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/galleria/galleriaresponsivedemo.html","target","_blank",1,"btn-viewsource"],["lang","markup"],[2,"width","100%","display","block",3,"src"],[1,"p-grid","p-nogutter","p-justify-center"],[2,"display","block",3,"src"]],template:function(n,a){1&n&&(e.TgZ(0,"div",0),e.TgZ(1,"div",1),e.TgZ(2,"h1"),e._uU(3,"Galleria "),e.TgZ(4,"span"),e._uU(5,"Responsive"),e.qZA(),e.qZA(),e.TgZ(6,"p"),e._uU(7,"Galleria responsiveness is defined with the "),e.TgZ(8,"b"),e._uU(9,"responsiveOptions"),e.qZA(),e._uU(10," property."),e.qZA(),e.qZA(),e._UZ(11,"app-demoActions",2),e.qZA(),e.TgZ(12,"div",3),e.TgZ(13,"div",4),e.TgZ(14,"p-galleria",5),e.NdJ("valueChange",function(l){return a.images=l}),e.YNc(15,ce,1,1,"ng-template",6),e.YNc(16,ue,2,1,"ng-template",7),e.qZA(),e.qZA(),e.qZA(),e.TgZ(17,"div",8),e.TgZ(18,"p-tabView"),e.TgZ(19,"p-tabPanel",9),e.TgZ(20,"a",10),e.TgZ(21,"span"),e._uU(22,"View on GitHub"),e.qZA(),e.qZA(),e.TgZ(23,"app-code",11),e.IAx(),e._uU(24,"\nexport class GalleriaResponsiveDemo implements OnInit {\n    images: any[];\n\n    responsiveOptions:any[] = [\n        {\n            breakpoint: '1024px',\n            numVisible: 5\n        },\n        {\n            breakpoint: '960px',\n            numVisible: 4\n        },\n        {\n            breakpoint: '768px',\n            numVisible: 3\n        },\n        {\n            breakpoint: '560px',\n            numVisible: 1\n        }\n    ];\n\n    constructor(private photoService: PhotoService) { }\n\n    ngOnInit() {\n        this.photoService.getImages().then(images =>{ \n            this.images = images\n        })\n    }\n}\n"),e.fQ9(),e.qZA(),e.qZA(),e.TgZ(25,"p-tabPanel",12),e.TgZ(26,"a",13),e.TgZ(27,"span"),e._uU(28,"View on GitHub"),e.qZA(),e.qZA(),e.TgZ(29,"app-code",14),e.IAx(),e._uU(30,'\n<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{\'max-width\': \'800px\'}" [numVisible]="7"> \n    <ng-template pTemplate="item" let-item>\n        <img [src]="item.previewImageSrc" style="width: 100%; display: block;"/>\n    </ng-template>\n    <ng-template pTemplate="thumbnail" let-item>\n        <div class="p-grid p-nogutter p-justify-center">\n            <img [src]="item.thumbnailImageSrc" style="display: block;"/>\n        </div>\n    </ng-template>\n</p-galleria>\n'),e.fQ9(),e.qZA(),e.qZA(),e.qZA(),e.qZA()),2&n&&(e.xp6(14),e.Q6J("value",a.images)("responsiveOptions",a.responsiveOptions)("containerStyle",e.DdM(5,de))("numVisible",7)("circular",!0))},directives:[m.P,c.dz,u.jx,s.xf,s.x4,p.h],encapsulation:2}),t})();var b=o(1919);function Ze(t,i){1&t&&e._UZ(0,"img",19),2&t&&e.Q6J("src",i.$implicit.previewImageSrc,e.LSH)}function ve(t,i){if(1&t&&(e.TgZ(0,"div",20),e._UZ(1,"img",21),e.qZA()),2&t){const n=i.$implicit;e.xp6(1),e.Q6J("src",n.thumbnailImageSrc,e.LSH)}}function _e(t,i){1&t&&e._UZ(0,"img",19),2&t&&e.Q6J("src",i.$implicit.previewImageSrc,e.LSH)}function Te(t,i){if(1&t&&(e.TgZ(0,"div",20),e._UZ(1,"img",21),e.qZA()),2&t){const n=i.$implicit;e.xp6(1),e.Q6J("src",n.thumbnailImageSrc,e.LSH)}}function be(t,i){if(1&t){const n=e.EpF();e.TgZ(0,"div",24),e.TgZ(1,"img",25),e.NdJ("click",function(){const l=e.CHM(n).index;return e.oxw(2).imageClick(l)}),e.qZA(),e.qZA()}if(2&t){const n=i.$implicit;e.xp6(1),e.Q6J("src",n.thumbnailImageSrc,e.LSH)("alt",n.alt)}}function fe(t,i){if(1&t&&(e.TgZ(0,"div",22),e.YNc(1,be,2,2,"div",23),e.qZA()),2&t){const n=e.oxw();e.xp6(1),e.Q6J("ngForOf",n.images)}}function Ae(t,i){1&t&&e._UZ(0,"img",19),2&t&&e.Q6J("src",i.$implicit.previewImageSrc,e.LSH)}function qe(t,i){if(1&t&&(e.TgZ(0,"div",20),e._UZ(1,"img",21),e.qZA()),2&t){const n=i.$implicit;e.xp6(1),e.Q6J("src",n.thumbnailImageSrc,e.LSH)}}const Ie=function(){return{"max-width":"50%"}},q=function(){return{"max-width":"850px"}};let we=(()=>{class t{constructor(n){this.photoService=n,this.responsiveOptions=[{breakpoint:"1024px",numVisible:5},{breakpoint:"768px",numVisible:3},{breakpoint:"560px",numVisible:1}],this.responsiveOptions2=[{breakpoint:"1500px",numVisible:5},{breakpoint:"1024px",numVisible:3},{breakpoint:"768px",numVisible:2},{breakpoint:"560px",numVisible:1}],this.activeIndex=0}ngOnInit(){this.photoService.getImages().then(n=>{this.images=n})}imageClick(n){this.activeIndex=n,this.displayCustom=!0}}return t.\u0275fac=function(n){return new(n||t)(e.Y36(g.T))},t.\u0275cmp=e.Xpm({type:t,selectors:[["ng-component"]],decls:45,vars:31,consts:[[1,"content-section","introduction"],[1,"feature-intro"],["github","galleria"],[1,"content-section","implementation"],[1,"card"],["pButton","","type","button","icon","pi pi-external-link","label","Show",3,"click"],[3,"value","visible","responsiveOptions","containerStyle","numVisible","circular","fullScreen","showItemNavigators","valueChange","visibleChange"],["pTemplate","item"],["pTemplate","thumbnail"],[3,"value","visible","responsiveOptions","containerStyle","numVisible","circular","fullScreen","showItemNavigators","showThumbnails","valueChange","visibleChange"],["class","p-grid","style","max-width: 400px;",4,"ngIf"],[3,"value","visible","activeIndex","responsiveOptions","containerStyle","numVisible","circular","fullScreen","showItemNavigators","showThumbnails","valueChange","visibleChange","activeIndexChange"],[1,"content-section","documentation"],["header","galleriafullscreendemo.ts"],["href","https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/galleria/galleriafullscreendemo.ts","target","_blank",1,"btn-viewsource"],["lang","typescript"],["header","galleriafullscreendemo.html"],["href","https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/galleria/galleriafullscreendemo.html","target","_blank",1,"btn-viewsource"],["lang","markup"],[2,"width","100%","display","block",3,"src"],[1,"p-grid","p-nogutter","p-justify-center"],[2,"display","block",3,"src"],[1,"p-grid",2,"max-width","400px"],["class","p-col-3","key","index",4,"ngFor","ngForOf"],["key","index",1,"p-col-3"],[2,"cursor","pointer",3,"src","alt","click"]],template:function(n,a){1&n&&(e.TgZ(0,"div",0),e.TgZ(1,"div",1),e.TgZ(2,"h1"),e._uU(3,"Galleria "),e.TgZ(4,"span"),e._uU(5,"FullScreen"),e.qZA(),e.qZA(),e.TgZ(6,"p"),e._uU(7,"In fullscreen mode content covers the whole page over a mask.."),e.qZA(),e.qZA(),e._UZ(8,"app-demoActions",2),e.qZA(),e.TgZ(9,"div",3),e.TgZ(10,"div",4),e.TgZ(11,"h5"),e._uU(12,"With Thumbnails"),e.qZA(),e.TgZ(13,"button",5),e.NdJ("click",function(){return a.displayBasic=!0}),e.qZA(),e.TgZ(14,"p-galleria",6),e.NdJ("valueChange",function(l){return a.images=l})("visibleChange",function(l){return a.displayBasic=l}),e.YNc(15,Ze,1,1,"ng-template",7),e.YNc(16,ve,2,1,"ng-template",8),e.qZA(),e.qZA(),e.TgZ(17,"div",4),e.TgZ(18,"h5"),e._uU(19,"Without Thumbnails"),e.qZA(),e.TgZ(20,"button",5),e.NdJ("click",function(){return a.displayBasic2=!0}),e.qZA(),e.TgZ(21,"p-galleria",9),e.NdJ("valueChange",function(l){return a.images=l})("visibleChange",function(l){return a.displayBasic2=l}),e.YNc(22,_e,1,1,"ng-template",7),e.YNc(23,Te,2,1,"ng-template",8),e.qZA(),e.qZA(),e.TgZ(24,"div",4),e.TgZ(25,"h5"),e._uU(26,"Custom Contents"),e.qZA(),e.YNc(27,fe,2,1,"div",10),e.TgZ(28,"p-galleria",11),e.NdJ("valueChange",function(l){return a.images=l})("visibleChange",function(l){return a.displayCustom=l})("activeIndexChange",function(l){return a.activeIndex=l}),e.YNc(29,Ae,1,1,"ng-template",7),e.YNc(30,qe,2,1,"ng-template",8),e.qZA(),e.qZA(),e.qZA(),e.TgZ(31,"div",12),e.TgZ(32,"p-tabView"),e.TgZ(33,"p-tabPanel",13),e.TgZ(34,"a",14),e.TgZ(35,"span"),e._uU(36,"View on GitHub"),e.qZA(),e.qZA(),e.TgZ(37,"app-code",15),e.IAx(),e._uU(38,"\nexport class GalleriaFullscreenDemo implements OnInit {\n    images: any[];\n\n    responsiveOptions:any[] = [\n        {\n            breakpoint: '1024px',\n            numVisible: 5\n        },\n        {\n            breakpoint: '768px',\n            numVisible: 3\n        },\n        {\n            breakpoint: '560px',\n            numVisible: 1\n        }\n    ];\n\n    responsiveOptions2:any[] = [\n        {\n            breakpoint: '1500px',\n            numVisible: 5\n        },\n        {\n            breakpoint: '1024px',\n            numVisible: 3\n        },\n        {\n            breakpoint: '768px',\n            numVisible: 2\n        },\n        {\n            breakpoint: '560px',\n            numVisible: 1\n        }\n    ];\n\n    displayBasic: boolean;\n\n    displayBasic2: boolean;\n\n    displayCustom: boolean;\n\n    activeIndex: number = 0;\n\n    constructor(private photoService: PhotoService) { }\n\n    ngOnInit() {\n        this.photoService.getImages().then(images =>{\n            this.images = images\n        })\n    }\n\n    imageClick(index: number) {\n        this.activeIndex = index;\n        this.displayCustom = true;\n    }\n}\n"),e.fQ9(),e.qZA(),e.qZA(),e.TgZ(39,"p-tabPanel",16),e.TgZ(40,"a",17),e.TgZ(41,"span"),e._uU(42,"View on GitHub"),e.qZA(),e.qZA(),e.TgZ(43,"app-code",18),e.IAx(),e._uU(44,'\n<h5>Basic</h5>\n<p-galleria [(value)]="images" [(visible)]="displayBasic" [responsiveOptions]="responsiveOptions2" [containerStyle]="{\'max-width\': \'50%\'}" [numVisible]="9"\n    [circular]="true" [fullScreen]="true" [showItemNavigators]="true" [baseZIndex]="100000">\n    <ng-template pTemplate="item" let-item>\n        <img [src]="item.previewImageSrc" style="width: 100%; display: block;"/>\n    </ng-template>\n    <ng-template pTemplate="thumbnail" let-item>\n        <div class="p-grid p-nogutter p-justify-center">\n            <img [src]="item.thumbnailImageSrc" style="display: block;"/>\n        </div>\n    </ng-template>\n</p-galleria>\n<button pButton type="button" icon="pi pi-external-link" label="Show" (click)="displayBasic = true"></button>\n<h5>Without Thumbnails</h5>\n<p-galleria [(value)]="images" [(visible)]="displayBasic2" [responsiveOptions]="responsiveOptions" [containerStyle]="{\'max-width\': \'850px\'}" [numVisible]="7"\n    [circular]="true" [fullScreen]="true" [showItemNavigators]="true" [showThumbnails]="false" [baseZIndex]="100000">\n    <ng-template pTemplate="item" let-item>\n        <img [src]="item.previewImageSrc" style="width: 100%; display: block;"/>\n    </ng-template>\n    <ng-template pTemplate="thumbnail" let-item>\n        <div class="p-grid p-nogutter p-justify-center">\n            <img [src]="item.thumbnailImageSrc" style="display: block;"/>\n        </div>\n    </ng-template>\n</p-galleria>\n<button pButton type="button" icon="pi pi-external-link" label="Show" (click)="displayBasic2 = true"></button>\n<h5>Custom Contents</h5>\n<p-galleria [(value)]="images" [(visible)]="displayCustom" [(activeIndex)]="activeIndex" [responsiveOptions]="responsiveOptions" [containerStyle]="{\'max-width\': \'850px\'}" [numVisible]="7"\n    [circular]="true" [fullScreen]="true" [showItemNavigators]="true" [showThumbnails]="false" [baseZIndex]="100000">\n    <ng-template pTemplate="item" let-item>\n        <img [src]="item.previewImageSrc" style="width: 100%; display: block;"/>\n    </ng-template>\n    <ng-template pTemplate="thumbnail" let-item>\n        <div class="p-grid p-nogutter p-justify-center">\n            <img [src]="item.thumbnailImageSrc" style="display: block;"/>\n        </div>\n    </ng-template>\n</p-galleria>\n<div *ngIf="images" class="p-grid" style="max-width: 400px;">\n    <div *ngFor="let image of images; let index = index;" class="p-col-3" key="index">\n        <img [src]="image.thumbnailImageSrc" [alt]="image.alt" style="cursor: pointer" (click)="imageClick(index)"/>\n    </div>\n</div>\n'),e.fQ9(),e.qZA(),e.qZA(),e.qZA(),e.qZA()),2&n&&(e.xp6(14),e.Q6J("value",a.images)("visible",a.displayBasic)("responsiveOptions",a.responsiveOptions2)("containerStyle",e.DdM(28,Ie))("numVisible",9)("circular",!0)("fullScreen",!0)("showItemNavigators",!0),e.xp6(7),e.Q6J("value",a.images)("visible",a.displayBasic2)("responsiveOptions",a.responsiveOptions)("containerStyle",e.DdM(29,q))("numVisible",7)("circular",!0)("fullScreen",!0)("showItemNavigators",!0)("showThumbnails",!1),e.xp6(6),e.Q6J("ngIf",a.images),e.xp6(1),e.Q6J("value",a.images)("visible",a.displayCustom)("activeIndex",a.activeIndex)("responsiveOptions",a.responsiveOptions)("containerStyle",e.DdM(30,q))("numVisible",7)("circular",!0)("fullScreen",!0)("showItemNavigators",!0)("showThumbnails",!1))},directives:[m.P,b.Hq,c.dz,u.jx,d.O5,s.xf,s.x4,p.h,d.sg],encapsulation:2}),t})();function Se(t,i){1&t&&e._UZ(0,"img",15),2&t&&e.Q6J("src",i.$implicit.previewImageSrc,e.LSH)}function ye(t,i){if(1&t&&(e.TgZ(0,"div",16),e._UZ(1,"img",17),e.qZA()),2&t){const n=i.$implicit;e.xp6(1),e.Q6J("src",n.thumbnailImageSrc,e.LSH)}}const Ue=function(){return{"max-width":"640px"}};let xe=(()=>{class t{constructor(n){this.photoService=n,this.responsiveOptions=[{breakpoint:"1024px",numVisible:5},{breakpoint:"768px",numVisible:3},{breakpoint:"560px",numVisible:1}]}ngOnInit(){this.photoService.getImages().then(n=>this.images=n)}}return t.\u0275fac=function(n){return new(n||t)(e.Y36(g.T))},t.\u0275cmp=e.Xpm({type:t,selectors:[["ng-component"]],decls:28,vars:8,consts:[[1,"content-section","introduction"],[1,"feature-intro"],["github","galleria"],[1,"content-section","implementation"],[1,"card"],[3,"value","responsiveOptions","containerStyle","numVisible","circular","autoPlay","transitionInterval","valueChange"],["pTemplate","item"],["pTemplate","thumbnail"],[1,"content-section","documentation"],["header","galleriaautoplaydemo.ts"],["href","https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/galleria/galleriaautoplaydemo.ts","target","_blank",1,"btn-viewsource"],["lang","typescript"],["header","galleriaautoplaydemo.html"],["href","https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/galleria/galleriaautoplaydemo.html","target","_blank",1,"btn-viewsource"],["lang","markup"],[2,"width","100%","display","block",3,"src"],[1,"p-grid","p-nogutter","p-justify-center"],[2,"display","block",3,"src"]],template:function(n,a){1&n&&(e.TgZ(0,"div",0),e.TgZ(1,"div",1),e.TgZ(2,"h1"),e._uU(3,"Galleria "),e.TgZ(4,"span"),e._uU(5,"AutoPlay"),e.qZA(),e.qZA(),e.TgZ(6,"p"),e._uU(7,"AutoPlay mode is used to implement slideshows."),e.qZA(),e.qZA(),e._UZ(8,"app-demoActions",2),e.qZA(),e.TgZ(9,"div",3),e.TgZ(10,"div",4),e.TgZ(11,"p-galleria",5),e.NdJ("valueChange",function(l){return a.images=l}),e.YNc(12,Se,1,1,"ng-template",6),e.YNc(13,ye,2,1,"ng-template",7),e.qZA(),e.qZA(),e.qZA(),e.TgZ(14,"div",8),e.TgZ(15,"p-tabView"),e.TgZ(16,"p-tabPanel",9),e.TgZ(17,"a",10),e.TgZ(18,"span"),e._uU(19,"View on GitHub"),e.qZA(),e.qZA(),e.TgZ(20,"app-code",11),e.IAx(),e._uU(21,"\nexport class GalleriaAutoplayDemo implements OnInit {\n    images: any[];\n\n    responsiveOptions:any[] = [\n        {\n            breakpoint: '1024px',\n            numVisible: 5\n        },\n        {\n            breakpoint: '768px',\n            numVisible: 3\n        },\n        {\n            breakpoint: '560px',\n            numVisible: 1\n        }\n    ];\n\n    constructor(private photoService: PhotoService) { }\n\n    ngOnInit() {\n        this.photoService.getImages().then(images => this.images = images)\n    }\n}\n"),e.fQ9(),e.qZA(),e.qZA(),e.TgZ(22,"p-tabPanel",12),e.TgZ(23,"a",13),e.TgZ(24,"span"),e._uU(25,"View on GitHub"),e.qZA(),e.qZA(),e.TgZ(26,"app-code",14),e.IAx(),e._uU(27,'\n<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{\'max-width\': \'640px\'}" [numVisible]="5" [circular]="true"\n        [autoPlay]="true" [transitionInterval]="2000"> \n        <ng-template pTemplate="item" let-item>\n            <img [src]="item.previewImageSrc" style="width: 100%; display: block;" />\n        </ng-template>\n        <ng-template pTemplate="thumbnail" let-item>\n            <div class="p-grid p-nogutter p-justify-center">\n                <img [src]="item.thumbnailImageSrc" style="display: block;" />\n            </div>\n        </ng-template>\n</p-galleria>\n'),e.fQ9(),e.qZA(),e.qZA(),e.qZA(),e.qZA()),2&n&&(e.xp6(11),e.Q6J("value",a.images)("responsiveOptions",a.responsiveOptions)("containerStyle",e.DdM(7,Ue))("numVisible",5)("circular",!0)("autoPlay",!0)("transitionInterval",2e3))},directives:[m.P,c.dz,u.jx,s.xf,s.x4,p.h],encapsulation:2}),t})();function Oe(t,i){1&t&&e._UZ(0,"img",16),2&t&&e.Q6J("src",i.$implicit.previewImageSrc,e.LSH)}function ke(t,i){if(1&t&&(e.TgZ(0,"div",17),e._UZ(1,"img",18),e.qZA()),2&t){const n=i.$implicit;e.xp6(1),e.Q6J("src",n.thumbnailImageSrc,e.LSH)}}function De(t,i){if(1&t&&(e.TgZ(0,"h4",19),e._uU(1),e.qZA(),e.TgZ(2,"p"),e._uU(3),e.qZA()),2&t){const n=i.$implicit;e.xp6(1),e.Oqu(n.title),e.xp6(2),e.Oqu(n.alt)}}const Ge=function(){return{"max-width":"640px"}};let Ve=(()=>{class t{constructor(n){this.photoService=n,this.responsiveOptions=[{breakpoint:"1024px",numVisible:5},{breakpoint:"768px",numVisible:3},{breakpoint:"560px",numVisible:1}]}ngOnInit(){this.photoService.getImages().then(n=>this.images=n)}}return t.\u0275fac=function(n){return new(n||t)(e.Y36(g.T))},t.\u0275cmp=e.Xpm({type:t,selectors:[["ng-component"]],decls:29,vars:5,consts:[[1,"content-section","introduction"],[1,"feature-intro"],["github","galleria"],[1,"content-section","implementation"],[1,"card"],[3,"value","responsiveOptions","containerStyle","numVisible","valueChange"],["pTemplate","item"],["pTemplate","thumbnail"],["pTemplate","caption"],[1,"content-section","documentation"],["header","galleriacaptiondemo.ts"],["href","https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/galleria/galleriacaptiondemo.ts","target","_blank",1,"btn-viewsource"],["lang","typescript"],["header","galleriacaptiondemo.html"],["href","https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/galleria/galleriacaptiondemo.html","target","_blank",1,"btn-viewsource"],["lang","markup"],[2,"width","100%","display","block",3,"src"],[1,"p-grid","p-nogutter","p-justify-center"],[2,"display","block",3,"src"],[2,"margin-bottom",".5rem","color","#ffffff"]],template:function(n,a){1&n&&(e.TgZ(0,"div",0),e.TgZ(1,"div",1),e.TgZ(2,"h1"),e._uU(3,"Galleria "),e.TgZ(4,"span"),e._uU(5,"Caption"),e.qZA(),e.qZA(),e.TgZ(6,"p"),e._uU(7,"Caption displays a description for an item."),e.qZA(),e.qZA(),e._UZ(8,"app-demoActions",2),e.qZA(),e.TgZ(9,"div",3),e.TgZ(10,"div",4),e.TgZ(11,"p-galleria",5),e.NdJ("valueChange",function(l){return a.images=l}),e.YNc(12,Oe,1,1,"ng-template",6),e.YNc(13,ke,2,1,"ng-template",7),e.YNc(14,De,4,2,"ng-template",8),e.qZA(),e.qZA(),e.qZA(),e.TgZ(15,"div",9),e.TgZ(16,"p-tabView"),e.TgZ(17,"p-tabPanel",10),e.TgZ(18,"a",11),e.TgZ(19,"span"),e._uU(20,"View on GitHub"),e.qZA(),e.qZA(),e.TgZ(21,"app-code",12),e.IAx(),e._uU(22,"\nexport class GalleriaCaptionDemo implements OnInit {\n    images: any[];\n\n    responsiveOptions:any[] = [\n        {\n            breakpoint: '1024px',\n            numVisible: 5\n        },\n        {\n            breakpoint: '768px',\n            numVisible: 3\n        },\n        {\n            breakpoint: '560px',\n            numVisible: 1\n        }\n    ];\n\n    constructor(private photoService: PhotoService) { }\n\n    ngOnInit() {\n        this.photoService.getImages().then(images => this.images = images)\n    }\n}\n"),e.fQ9(),e.qZA(),e.qZA(),e.TgZ(23,"p-tabPanel",13),e.TgZ(24,"a",14),e.TgZ(25,"span"),e._uU(26,"View on GitHub"),e.qZA(),e.qZA(),e.TgZ(27,"app-code",15),e.IAx(),e._uU(28,'\n<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{\'max-width\': \'640px\'}" [numVisible]="5"> \n    <ng-template pTemplate="item" let-item>\n        <img [src]="item.previewImageSrc" style="width: 100%; display: block;" />\n    </ng-template>\n    <ng-template pTemplate="thumbnail" let-item>\n        <div class="p-grid p-nogutter p-justify-center">\n            <img [src]="item.thumbnailImageSrc" style="display: block;" />\n        </div>\n    </ng-template>\n    <ng-template pTemplate="caption" let-item>\n        <h4 style="margin-bottom: .5rem; color: #ffffff;">{{item.title}}</h4>\n        <p>{{item.alt}}</p>\n    </ng-template>\n</p-galleria>\n'),e.fQ9(),e.qZA(),e.qZA(),e.qZA(),e.qZA()),2&n&&(e.xp6(11),e.Q6J("value",a.images)("responsiveOptions",a.responsiveOptions)("containerStyle",e.DdM(4,Ge))("numVisible",5))},directives:[m.P,c.dz,u.jx,s.xf,s.x4,p.h],encapsulation:2}),t})();function Ce(t,i){1&t&&e._UZ(0,"img",18),2&t&&e.Q6J("src",i.$implicit.previewImageSrc,e.LSH)}function Ne(t,i){if(1&t&&(e.TgZ(0,"div",19),e._UZ(1,"img",20),e.qZA()),2&t){const n=i.$implicit;e.xp6(1),e.Q6J("src",n.thumbnailImageSrc,e.LSH)}}const Pe=function(){return{"max-width":"640px"}};let Fe=(()=>{class t{constructor(n){this.photoService=n,this._activeIndex=2,this.responsiveOptions=[{breakpoint:"1024px",numVisible:5},{breakpoint:"768px",numVisible:3},{breakpoint:"560px",numVisible:1}]}get activeIndex(){return this._activeIndex}set activeIndex(n){this.images&&0<=n&&n<=this.images.length-1&&(this._activeIndex=n)}ngOnInit(){this.photoService.getImages().then(n=>this.images=n)}next(){this.activeIndex++}prev(){this.activeIndex--}}return t.\u0275fac=function(n){return new(n||t)(e.Y36(g.T))},t.\u0275cmp=e.Xpm({type:t,selectors:[["ng-component"]],decls:34,vars:6,consts:[[1,"content-section","introduction"],[1,"feature-intro"],["github","galleria"],[1,"content-section","implementation"],[1,"card"],[1,"p-py-2"],["type","button","icon","pi pi-plus","styleClass","p-button-secondary p-mr-2",3,"click"],["type","button","icon","pi pi-minus","styleClass","p-button-secondary",3,"click"],[3,"value","responsiveOptions","containerStyle","numVisible","activeIndex","valueChange","activeIndexChange"],["pTemplate","item"],["pTemplate","thumbnail"],[1,"content-section","documentation"],["header","galleriaprogrammaticdemo.ts"],["href","https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/galleria/galleriaprogrammaticdemo.ts","target","_blank",1,"btn-viewsource"],["lang","typescript"],["header","galleriaprogrammaticdemo.html"],["href","https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/galleria/galleriaprogrammaticdemo.html","target","_blank",1,"btn-viewsource"],["lang","markup"],[2,"width","100%",3,"src"],[1,"p-grid","p-nogutter","p-justify-center"],[3,"src"]],template:function(n,a){1&n&&(e.TgZ(0,"div",0),e.TgZ(1,"div",1),e.TgZ(2,"h1"),e._uU(3,"Galleria "),e.TgZ(4,"span"),e._uU(5,"Programmatic"),e.qZA(),e.qZA(),e.TgZ(6,"p"),e._uU(7,"Galleria can be controlled programmatically using the "),e.TgZ(8,"b"),e._uU(9,"activeIndex"),e.qZA(),e._uU(10," property."),e.qZA(),e.qZA(),e._UZ(11,"app-demoActions",2),e.qZA(),e.TgZ(12,"div",3),e.TgZ(13,"div",4),e.TgZ(14,"div",5),e.TgZ(15,"p-button",6),e.NdJ("click",function(){return a.next()}),e.qZA(),e.TgZ(16,"p-button",7),e.NdJ("click",function(){return a.prev()}),e.qZA(),e.qZA(),e.TgZ(17,"p-galleria",8),e.NdJ("valueChange",function(l){return a.images=l})("activeIndexChange",function(l){return a.activeIndex=l}),e.YNc(18,Ce,1,1,"ng-template",9),e.YNc(19,Ne,2,1,"ng-template",10),e.qZA(),e.qZA(),e.qZA(),e.TgZ(20,"div",11),e.TgZ(21,"p-tabView"),e.TgZ(22,"p-tabPanel",12),e.TgZ(23,"a",13),e.TgZ(24,"span"),e._uU(25,"View on GitHub"),e.qZA(),e.qZA(),e.TgZ(26,"app-code",14),e.IAx(),e._uU(27,"\nexport class GalleriaProgrammaticDemo implements OnInit {\n    images: any[];\n\n    get activeIndex(): number {\n        return this._activeIndex;\n    }\n\n    set activeIndex(newValue) {\n        if (this.images && 0 <= newValue && newValue <= (this.images.length - 1)) {\n            this._activeIndex = newValue;\n        }\n    }\n\n    _activeIndex: number = 2;\n\n    responsiveOptions:any[] = [\n        {\n            breakpoint: '1024px',\n            numVisible: 5\n        },\n        {\n            breakpoint: '768px',\n            numVisible: 3\n        },\n        {\n            breakpoint: '560px',\n            numVisible: 1\n        }\n    ];\n\n    constructor(private photoService: PhotoService) { }\n\n    ngOnInit() {\n        this.photoService.getImages().then(images => this.images = images)\n    }\n\n    next() {\n        this.activeIndex++;\n    }\n\n    prev() {\n        this.activeIndex--;\n    }\n}\n"),e.fQ9(),e.qZA(),e.qZA(),e.TgZ(28,"p-tabPanel",15),e.TgZ(29,"a",16),e.TgZ(30,"span"),e._uU(31,"View on GitHub"),e.qZA(),e.qZA(),e.TgZ(32,"app-code",17),e.IAx(),e._uU(33,'\n<p-galleria [images]="images" panelWidth="500" panelHeight="313" showCaption="true"></p-galleria>\n<div class="p-py-2">\n    <p-button type="button" icon="pi pi-plus" (click)="next()" styleClass="p-button-secondary p-mr-2"></p-button>\n    <p-button type="button" icon="pi pi-minus" (click)="prev()" styleClass="p-button-secondary"></p-button>\n</div>\n<p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{\'max-width\': \'520px\'}" [numVisible]="5" \n    [(activeIndex)]="activeIndex"> \n    <ng-template pTemplate="item" let-item>\n        <img [src]="item.previewImageSrc" style="width: 100%;" />\n    </ng-template>\n    <ng-template pTemplate="thumbnail" let-item>\n        <div class="p-grid p-nogutter p-justify-center">\n            <img [src]="item.thumbnailImageSrc" />\n        </div>\n    </ng-template>\n</p-galleria>\n'),e.fQ9(),e.qZA(),e.qZA(),e.qZA(),e.qZA()),2&n&&(e.xp6(17),e.Q6J("value",a.images)("responsiveOptions",a.responsiveOptions)("containerStyle",e.DdM(5,Pe))("numVisible",5)("activeIndex",a.activeIndex))},directives:[m.P,b.zx,c.dz,u.jx,s.xf,s.x4,p.h],encapsulation:2}),t})();var He=o(5088);const Je=["galleria"],Qe=function(t,i){return{width:t,display:i}};function Le(t,i){if(1&t&&e._UZ(0,"img",19),2&t){const n=i.$implicit,a=e.oxw();e.Q6J("src",n.previewImageSrc,e.LSH)("ngStyle",e.WLB(2,Qe,a.fullscreen?"":"100%",a.fullscreen?"":"block"))}}function je(t,i){if(1&t&&(e.TgZ(0,"div",20),e._UZ(1,"img",21),e.qZA()),2&t){const n=i.$implicit;e.xp6(1),e.Q6J("src",n.thumbnailImageSrc,e.LSH)}}function Ye(t,i){if(1&t&&(e.TgZ(0,"span",26),e.TgZ(1,"span"),e._uU(2),e.qZA(),e.TgZ(3,"span",27),e._uU(4),e.qZA(),e.TgZ(5,"span"),e._uU(6),e.qZA(),e.qZA()),2&t){const n=e.oxw(2);e.xp6(2),e.AsE("",n.activeIndex+1,"/",n.images.length,""),e.xp6(2),e.Oqu(n.images[n.activeIndex].title),e.xp6(2),e.Oqu(n.images[n.activeIndex].alt)}}function $e(t,i){if(1&t){const n=e.EpF();e.TgZ(0,"div",22),e.TgZ(1,"button",23),e.NdJ("click",function(){return e.CHM(n),e.oxw().onThumbnailButtonClick()}),e.qZA(),e.YNc(2,Ye,7,4,"span",24),e.TgZ(3,"button",25),e.NdJ("click",function(){return e.CHM(n),e.oxw().toggleFullScreen()}),e.qZA(),e.qZA()}if(2&t){const n=e.oxw();e.xp6(2),e.Q6J("ngIf",n.images),e.xp6(1),e.Q6J("icon",n.fullScreenIcon())}}const Me=function(){return{"max-width":"640px"}};let ze=(()=>{class t{constructor(n,a){this.photoService=n,this.cd=a,this.fullscreen=!1,this.activeIndex=0,this.responsiveOptions=[{breakpoint:"1024px",numVisible:5},{breakpoint:"768px",numVisible:3},{breakpoint:"560px",numVisible:1}]}ngOnInit(){this.photoService.getImages().then(n=>this.images=n),this.bindDocumentListeners()}onThumbnailButtonClick(){this.showThumbnails=!this.showThumbnails}toggleFullScreen(){this.fullscreen?this.closePreviewFullScreen():this.openPreviewFullScreen(),this.cd.detach()}openPreviewFullScreen(){let n=this.galleria.element.nativeElement.querySelector(".p-galleria");n.requestFullscreen?n.requestFullscreen():n.mozRequestFullScreen?n.mozRequestFullScreen():n.webkitRequestFullscreen?n.webkitRequestFullscreen():n.msRequestFullscreen&&n.msRequestFullscreen()}onFullScreenChange(){this.fullscreen=!this.fullscreen,this.cd.detectChanges(),this.cd.reattach()}closePreviewFullScreen(){document.exitFullscreen?document.exitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen&&document.msExitFullscreen()}bindDocumentListeners(){this.onFullScreenListener=this.onFullScreenChange.bind(this),document.addEventListener("fullscreenchange",this.onFullScreenListener),document.addEventListener("mozfullscreenchange",this.onFullScreenListener),document.addEventListener("webkitfullscreenchange",this.onFullScreenListener),document.addEventListener("msfullscreenchange",this.onFullScreenListener)}unbindDocumentListeners(){document.removeEventListener("fullscreenchange",this.onFullScreenListener),document.removeEventListener("mozfullscreenchange",this.onFullScreenListener),document.removeEventListener("webkitfullscreenchange",this.onFullScreenListener),document.removeEventListener("msfullscreenchange",this.onFullScreenListener),this.onFullScreenListener=null}ngOnDestroy(){this.unbindDocumentListeners()}galleriaClass(){return"custom-galleria "+(this.fullscreen?"fullscreen":"")}fullScreenIcon(){return"pi "+(this.fullscreen?"pi-window-minimize":"pi-window-maximize")}}return t.\u0275fac=function(n){return new(n||t)(e.Y36(g.T),e.Y36(e.sBO))},t.\u0275cmp=e.Xpm({type:t,selectors:[["ng-component"]],viewQuery:function(n,a){if(1&n&&e.Gf(Je,5),2&n){let r;e.iGM(r=e.CRH())&&(a.galleria=r.first)}},decls:33,vars:12,consts:[[1,"content-section","introduction"],[1,"feature-intro"],["github","galleria"],[1,"content-section","implementation"],[1,"card"],[3,"value","activeIndex","numVisible","containerStyle","containerClass","showThumbnails","showItemNavigators","showItemNavigatorsOnHover","circular","autoPlay","transitionInterval","valueChange","activeIndexChange"],["galleria",""],["pTemplate","item"],["pTemplate","thumbnail"],["pTemplate","footer"],[1,"content-section","documentation"],["header","galleriaadvanceddemo.ts"],["href","https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/galleria/galleriaadvanceddemo.ts","target","_blank",1,"btn-viewsource"],["lang","typescript"],["header","galleriaadvanceddemo.html"],["href","https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/galleria/galleriaadvanceddemo.html","target","_blank",1,"btn-viewsource"],["lang","markup"],["header","galleriaadvanceddemo.scss"],["lang","css"],[3,"src","ngStyle"],[1,"p-grid","p-nogutter","p-justify-center"],[3,"src"],[1,"custom-galleria-footer"],["type","button","pButton","","icon","pi pi-list",3,"click"],["class","title-container",4,"ngIf"],["type","button","pButton","",1,"fullscreen-button",3,"icon","click"],[1,"title-container"],[1,"title"]],template:function(n,a){1&n&&(e.TgZ(0,"div",0),e.TgZ(1,"div",1),e.TgZ(2,"h1"),e._uU(3,"Galleria "),e.TgZ(4,"span"),e._uU(5,"Advanced"),e.qZA(),e.qZA(),e.TgZ(6,"p"),e._uU(7,"Galleria can be extended further to implement complex requirements."),e.qZA(),e.qZA(),e._UZ(8,"app-demoActions",2),e.qZA(),e.TgZ(9,"div",3),e.TgZ(10,"div",4),e.TgZ(11,"p-galleria",5,6),e.NdJ("valueChange",function(l){return a.images=l})("activeIndexChange",function(l){return a.activeIndex=l}),e.YNc(13,Le,1,5,"ng-template",7),e.YNc(14,je,2,1,"ng-template",8),e.YNc(15,$e,4,2,"ng-template",9),e.qZA(),e.qZA(),e.qZA(),e.TgZ(16,"div",10),e.TgZ(17,"p-tabView"),e.TgZ(18,"p-tabPanel",11),e.TgZ(19,"a",12),e.TgZ(20,"span"),e._uU(21,"View on GitHub"),e.qZA(),e.qZA(),e.TgZ(22,"app-code",13),e.IAx(),e._uU(23,"\nexport class GalleriaAdvancedDemo implements OnInit {\n    images: any[];\n\n    showThumbnails: boolean;\n\n    fullscreen: boolean = false;\n\n    activeIndex: number = 0;\n\n    onFullScreenListener: any;\n\n    @ViewChild('galleria') galleria: Galleria;\n\n\n    constructor(private photoService: PhotoService) { }\n\n    responsiveOptions:any[] = [\n        {\n            breakpoint: '1024px',\n            numVisible: 5\n        },\n        {\n            breakpoint: '768px',\n            numVisible: 3\n        },\n        {\n            breakpoint: '560px',\n            numVisible: 1\n        }\n    ];\n    ngOnInit() {\n        this.photoService.getImages().then(images => this.images = images);\n        this.bindDocumentListeners();\n    }\n\n    onThumbnailButtonClick() {\n        this.showThumbnails = !this.showThumbnails;\n    }\n\n    toggleFullScreen() {\n        if (this.fullscreen) {\n            this.closePreviewFullScreen();\n        }\n        else {\n            this.openPreviewFullScreen();\n        }\n    }\n\n    openPreviewFullScreen() {\n        let elem = this.galleria.element.nativeElement.querySelector(\".p-galleria\");\n        if (elem.requestFullscreen) {\n            elem.requestFullscreen();\n        }\n        else if (elem['mozRequestFullScreen']) { /* Firefox */\n            elem['mozRequestFullScreen']();\n        }\n        else if (elem['webkitRequestFullscreen']) { /* Chrome, Safari & Opera */\n            elem['webkitRequestFullscreen']();\n        }\n        else if (elem['msRequestFullscreen']) { /* IE/Edge */\n            elem['msRequestFullscreen']();\n        }\n    }\n\n    onFullScreenChange() {\n        this.fullscreen = !this.fullscreen;\n    }\n\n    closePreviewFullScreen() {\n        if (document.exitFullscreen) {\n            document.exitFullscreen();\n        }\n        else if (document['mozCancelFullScreen']) {\n            document['mozCancelFullScreen']();\n        }\n        else if (document['webkitExitFullscreen']) {\n            document['webkitExitFullscreen']();\n        }\n        else if (document['msExitFullscreen']) {\n            document['msExitFullscreen']();\n        }\n    }\n\n    bindDocumentListeners() {\n        this.onFullScreenListener = this.onFullScreenChange.bind(this);\n        document.addEventListener(\"fullscreenchange\", this.onFullScreenListener);\n        document.addEventListener(\"mozfullscreenchange\", this.onFullScreenListener);\n        document.addEventListener(\"webkitfullscreenchange\", this.onFullScreenListener);\n        document.addEventListener(\"msfullscreenchange\", this.onFullScreenListener);\n    }\n\n    unbindDocumentListeners() {\n        document.removeEventListener(\"fullscreenchange\", this.onFullScreenListener);\n        document.removeEventListener(\"mozfullscreenchange\", this.onFullScreenListener);\n        document.removeEventListener(\"webkitfullscreenchange\", this.onFullScreenListener);\n        document.removeEventListener(\"msfullscreenchange\", this.onFullScreenListener);\n        this.onFullScreenListener = null;\n    }\n\n    ngOnDestroy() {\n        this.unbindDocumentListeners();\n    }\n\n    galleriaClass() {\n        return `custom-galleria ${this.fullscreen ? 'fullscreen' : ''}`;\n    }\n\n    fullScreenIcon() {\n        return `pi ${this.fullscreen ? 'pi-window-minimize' : 'pi-window-maximize'}`;\n    }\n}\n"),e.fQ9(),e.qZA(),e.qZA(),e.TgZ(24,"p-tabPanel",14),e.TgZ(25,"a",15),e.TgZ(26,"span"),e._uU(27,"View on GitHub"),e.qZA(),e.qZA(),e.TgZ(28,"app-code",16),e.IAx(),e._uU(29,'\n<p-galleria #galleria [(value)]="images" [(activeIndex)]="activeIndex" [numVisible]="5" [containerStyle]="{\'max-width\':\'640px\'}" [containerClass]="galleriaClass()" [showThumbnails]="showThumbnails"\n    [showItemNavigators]="true" [showItemNavigatorsOnHover]="true" [circular]="true" [autoPlay]="true" [transitionInterval]="3000"> \n<ng-template pTemplate="item" let-item>\n    <img [src]="item.previewImageSrc" [ngStyle]="{\'width\': !fullscreen ? \'100%\' : \'\', \'display\': !fullscreen ? \'block\' : \'\'}" />\n</ng-template>\n<ng-template pTemplate="thumbnail" let-item>\n    <div class="p-grid p-nogutter p-justify-center">\n        <img [src]="item.thumbnailImageSrc" />\n    </div>\n</ng-template>\n<ng-template pTemplate="footer" let-item>\n    <div class="custom-galleria-footer">\n        <button type="button" pButton icon="pi pi-list" (click)="onThumbnailButtonClick()"></button>\n        <span *ngIf="images"  class="title-container">\n            <span>{{activeIndex + 1}}/{{images.length}}</span>\n            <span class="title">{{images[activeIndex].title}}</span>\n            <span>{{images[activeIndex].alt}}</span>\n        </span>\n        <button type="button" pButton [icon]="fullScreenIcon()" (click)="toggleFullScreen()" class="fullscreen-button"></button>\n    </div>\n</ng-template>\n</p-galleria>\n'),e.fQ9(),e.qZA(),e.qZA(),e.TgZ(30,"p-tabPanel",17),e.TgZ(31,"app-code",18),e._uU(32," :host ::ng-deep .custom-galleria { &.p-galleria { &.fullscreen { display: flex; flex-direction: column; .p-galleria-content { flex-grow: 1; justify-content: center; } } .p-galleria-content { position: relative; } .p-galleria-thumbnail-wrapper { position: absolute; bottom: 0; left: 0; width: 100%; } .p-galleria-thumbnail-items-container { width: 100%; } .custom-galleria-footer { display: flex; align-items: center; background-color: rgba(0, 0, 0, .9); color: #ffffff; > button { background-color: transparent; color: #ffffff; border: 0 none; border-radius: 0; margin: .2rem 0; &.fullscreen-button { margin-left: auto; } &:hover { background-color: rgba(255, 255, 255, 0.1); } } } .title-container { > span { font-size: .9rem; padding-left: .829rem; &.title { font-weight: bold; } } } } } "),e.qZA(),e.qZA(),e.qZA(),e.qZA()),2&n&&(e.xp6(11),e.Q6J("value",a.images)("activeIndex",a.activeIndex)("numVisible",5)("containerStyle",e.DdM(11,Me))("containerClass",a.galleriaClass())("showThumbnails",a.showThumbnails)("showItemNavigators",!0)("showItemNavigatorsOnHover",!0)("circular",!0)("autoPlay",!0)("transitionInterval",3e3))},directives:[m.P,c.dz,u.jx,s.xf,s.x4,p.h,d.PC,b.Hq,d.O5],styles:["[_nghost-%COMP%]     .custom-galleria.p-galleria.fullscreen{display:flex;flex-direction:column}[_nghost-%COMP%]     .custom-galleria.p-galleria.fullscreen .p-galleria-content{flex-grow:1;justify-content:center}[_nghost-%COMP%]     .custom-galleria.p-galleria .p-galleria-content{position:relative}[_nghost-%COMP%]     .custom-galleria.p-galleria .p-galleria-thumbnail-wrapper{position:absolute;bottom:0;left:0;width:100%}[_nghost-%COMP%]     .custom-galleria.p-galleria .p-galleria-thumbnail-items-container{width:100%}[_nghost-%COMP%]     .custom-galleria.p-galleria .custom-galleria-footer{display:flex;align-items:center;background-color:#000000e6;color:#fff}[_nghost-%COMP%]     .custom-galleria.p-galleria .custom-galleria-footer>button{background-color:transparent;color:#fff;border:0 none;border-radius:0;margin:.2rem 0}[_nghost-%COMP%]     .custom-galleria.p-galleria .custom-galleria-footer>button.fullscreen-button{margin-left:auto}[_nghost-%COMP%]     .custom-galleria.p-galleria .custom-galleria-footer>button:hover{background-color:#ffffff1a}[_nghost-%COMP%]     .custom-galleria.p-galleria .title-container>span{font-size:.9rem;padding-left:.829rem}[_nghost-%COMP%]     .custom-galleria.p-galleria .title-container>span.title{font-weight:bold}"]}),t})(),Ee=(()=>{class t{}return t.\u0275fac=function(n){return new(n||t)},t.\u0275mod=e.oAB({type:t}),t.\u0275inj=e.cJS({imports:[[Z.Bz.forChild([{path:"",component:U},{path:"programmatic",component:Fe},{path:"indicator",component:Y},{path:"thumbnail",component:te},{path:"navigator",component:ge},{path:"responsive",component:he},{path:"fullscreen",component:we},{path:"autoplay",component:xe},{path:"caption",component:Ve},{path:"advanced",component:ze}])],Z.Bz]}),t})();var Be=o(2340),Re=o(5472);let We=(()=>{class t{}return t.\u0275fac=function(n){return new(n||t)},t.\u0275mod=e.oAB({type:t}),t.\u0275inj=e.cJS({imports:[[d.ez,Ee,He.kT,Be.LU,p.a,m.L,Re.hJ]]}),t})()}}]);