import { ElementRef, OnInit } from '@angular/core';
import { CfCoreComponent } from '../core/core.component';
import { CfCoreGalleryImage } from '../../models/gallery/cf-core-gallery-image.model';
import { CfCoreGalleryOptions } from '../../models/gallery/cf-core-gallery-options.model';
import { GalleryModel } from '../../models/gallery/gallery.model';
import { GalleryStylingModel } from '../../models/gallery/gallery-styling.model';
import { TemplateService } from '../../services/template-service/template.service';
/**
 * <p>CF Gallery component is created using functionality from
 * <a href="https://github.com/lukasz-galka/ngx-gallery" target="_blank">Ngx-gallery</a></p>
 * <pre>
 * <code>
 * import {{'{'}} GalleryModel {{'}'}} from 'cedrus-fusion'
 * import {{'{'}} GalleryStylingModel {{'}'}} from 'cedrus-fusion'
 * <code><</code>cf-gallery<code>></code><code><</code><code>/</code>cf-gallery<code>></code>
 * </code>
 * </pre>
 */
export declare class CfGalleryComponent extends CfCoreComponent implements OnInit {
    elementRef: ElementRef;
    /**
     * <pre>{{'{'}}
     *  display: boolean,                      // True or False. Default: true
     *  options: {{'{'}}                        // Object with specific gallery library options
     *    width: string,                       // Default: 100% - gallery width
     *    height: string,                      // Default: 400px - gallery height
     *    fullWidth: boolean,                  // Default: false - sets the same width as browser
     *    image: boolean,                      // Default: true - enables or disables image
     *    imagePercent: number,                // Default: 75 - percentage height
     *    imageArrows: boolean,                // Default: true - enables or disables arrows
     *    imageArrowsAutoHide: boolean,        // Default: false - enables or disables arrows auto hide
     *    imageSwipe: boolean,                 // Default: false - enables or disables swipe
     *    imageAnimation: string,              // Default: fade - animation type. Types are: fade, slide, rotate, zoom.
     *    imageSize: string,                   // Default: cover - image size. Sizes are: cover and contain.
     *    thumbnails: boolean,                 // Default: true - enables or disables thumbnails
     *    thumbnailsColumns: number,           // Default: 4 - columns count
     *    thumbnailsRows: number,              // Default: 1 - rows count
     *    thumbnailsPercent: number,           // Default: 25 - percentage height
     *    thumbnailsMargin: number,            // Default: 10 - margin between thumbnails and image
     *    thumbnailsArrows: boolean,           // Default: true - enables or disables arrows
     *    thumbnailsArrowsAutoHide: boolean,   // Default: false - enables or disables arrows auto hide
     *    thumbnailsSwipe: boolean,            // Default: false - enables or disables swipe
     *    thumbnailMargin: number,             // Default: 10 - margin between images in thumbnails
     *    preview: boolean,                    // Default: true - enables or disables preview
     *    previewDescription: boolean,         // Default: true - enables or disables description for images
     *    previewSwipe: boolean,               // Default: false - enables or disables swipe
     *    previewCloseOnClick: boolean,        // Default: false - enables or disables closing preview by click
     *    previewKeyboardNavigation: boolean,  // Default: false - enables or disables navigation by keyboard
     *  {{'}'}},
     *  images: array                          // Array with image objects like in example below
     * </pre>
     * {{'}'}}
     * Example:
     * <pre>{{'{'}}
     *  options: {{'{'}}
     *    width: '100%',
     *    imagePercent: 75,
     *    imageArrowsAutoHide: true,
     *    thumbnailsPercent: 25,
     *    thumbnailsColumns: 3,
     *    thumbnailMargin: 8,
     *    thumbnailsMargin: 8,
     *    thumbnailsArrowsAutoHide: true,
     *    previewFullscreen: true
     *  {{'}'}},
     *  images: [
     *    {{'{'}}
     *      small: 'https://i1.wallpaperscraft.com/image/nature_waterfall_summer_lake_trees_90400_300x168.jpg',
     *      medium: 'https://i1.wallpaperscraft.com/image/nature_waterfall_summer_lake_trees_90400_602x339.jpg',
     *      big: 'https://wallpaperscraft.com/image/nature_waterfall_summer_lake_trees_90400_1920x1080.jpg',
     *      description: 'Nature waterfall summer lake_trees'
     *    {{'}'}},
     *    ...
     *  ]
     * {{'}'}}</pre>
     */
    properties: GalleryModel;
    /**
     *<p> dynamicClass: function() -> string,  // Function that returns name of the class </p>
     *<p> class: string                        // Name of the css class selector </p>
     *<pre>
     *{{'{'}}
     *  // Container surrounding the Gallery
     *  container:{{'{'}}
     *    dynamicClass,
     *    class
     *  {{'}'}}
     *{{'}'}}
     * </pre>
     */
    styling: GalleryStylingModel;
    /**
     * <p>Array with images of type CfCoreGalleryImage[]. Each image is an object with such properties:<p>
     * small: string,       // Url used in thumbnails
     * medium: string,      // Url used in image
     * big: string,         // Url used in preview
     * description: string  // Description text used in preview
     */
    images: CfCoreGalleryImage[];
    /**
     * <p>Gallery settings of type CfCoreGalleryOptions described in <b>properties</b><p>
     */
    options: CfCoreGalleryOptions;
    /** @hidden */
    constructor(elementRef: ElementRef, /**@hidden */ templateService: TemplateService);
    /** @hidden
     * It will be generated <b>cfGallery</b> object and rendered inside component template.
     */
    ngOnInit(): void;
}