/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
 */
import * as tslib_1 from "tslib";
/*
 The MIT License (MIT)

 Copyright (c) 2017-2018 Stefano Cappa (Ks89)

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights
 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:

 The above copyright notice and this permission notice shall be included in all
 copies or substantial portions of the Software.

 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 */
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { AccessibleComponent } from '../accessible.component';
import { InternalLibImage } from '../../model/image-internal.class';
import { NEXT } from '../../utils/user-input.util';
import { getIndex } from '../../utils/image.util';
/**
 * Component with clickable dots (small circles) to navigate between images inside the modal gallery.
 */
var DotsComponent = /** @class */ (function (_super) {
    tslib_1.__extends(DotsComponent, _super);
    /**
     * Component with clickable dots (small circles) to navigate between images inside the modal gallery.
     */
    function DotsComponent() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        /**
         * Object of type `DotsConfig` to init DotsComponent's features.
         * For instance, it contains a param to show/hide this component.
         */
        _this.dotsConfig = { visible: true };
        /**
         * Output to emit clicks on dots. The payload contains a number that represent
         * the index of the clicked dot.
         */
        _this.clickDot = new EventEmitter();
        return _this;
    }
    /**
     * Method ´ngOnInit´ to build `configDots` applying a default value.
     * This is an Angular's lifecycle hook, so its called automatically by Angular itself.
     * In particular, it's called only one time!!!
     */
    /**
     * Method ´ngOnInit´ to build `configDots` applying a default value.
     * This is an Angular's lifecycle hook, so its called automatically by Angular itself.
     * In particular, it's called only one time!!!
     * @return {?}
     */
    DotsComponent.prototype.ngOnInit = /**
     * Method ´ngOnInit´ to build `configDots` applying a default value.
     * This is an Angular's lifecycle hook, so its called automatically by Angular itself.
     * In particular, it's called only one time!!!
     * @return {?}
     */
    function () {
        /** @type {?} */
        var defaultConfig = { visible: true };
        this.configDots = Object.assign(defaultConfig, this.dotsConfig);
    };
    /**
     * Method ´ngOnChanges´ to change `configDots` if the input dotsConfig is changed.
     * This is an Angular's lifecycle hook, so its called automatically by Angular itself.
     */
    /**
     * Method ´ngOnChanges´ to change `configDots` if the input dotsConfig is changed.
     * This is an Angular's lifecycle hook, so its called automatically by Angular itself.
     * @param {?} changes
     * @return {?}
     */
    DotsComponent.prototype.ngOnChanges = /**
     * Method ´ngOnChanges´ to change `configDots` if the input dotsConfig is changed.
     * This is an Angular's lifecycle hook, so its called automatically by Angular itself.
     * @param {?} changes
     * @return {?}
     */
    function (changes) {
        /** @type {?} */
        var dotsConfigChanges = changes.dotsConfig;
        if (dotsConfigChanges && dotsConfigChanges.currentValue !== dotsConfigChanges.previousValue) {
            this.configDots = dotsConfigChanges.currentValue;
        }
    };
    /**
     * Method to check if an image is active (i.e. the current image).
     * It checks currentImage and images to prevent errors.
     * @param number index of the image to check if it's active or not
     * @returns boolean true if is active (and input params are valid), false otherwise
     */
    /**
     * Method to check if an image is active (i.e. the current image).
     * It checks currentImage and images to prevent errors.
     * @param {?} index
     * @return {?} boolean true if is active (and input params are valid), false otherwise
     */
    DotsComponent.prototype.isActive = /**
     * Method to check if an image is active (i.e. the current image).
     * It checks currentImage and images to prevent errors.
     * @param {?} index
     * @return {?} boolean true if is active (and input params are valid), false otherwise
     */
    function (index) {
        if (!this.currentImage || !this.images || this.images.length === 0) {
            return false;
        }
        /** @type {?} */
        var imageIndex;
        try {
            imageIndex = getIndex(this.currentImage, this.images);
        }
        catch (err) {
            console.error("Internal error while trying to show the active 'dot'", err);
            return false;
        }
        return index === imageIndex;
    };
    /**
     * Method called by events from keyboard and mouse.
     * @param number index of the dot
     * @param KeyboardEvent | MouseEvent event payload
     */
    /**
     * Method called by events from keyboard and mouse.
     * @param {?} index
     * @param {?} event
     * @return {?}
     */
    DotsComponent.prototype.onDotEvent = /**
     * Method called by events from keyboard and mouse.
     * @param {?} index
     * @param {?} event
     * @return {?}
     */
    function (index, event) {
        /** @type {?} */
        var result = _super.prototype.handleImageEvent.call(this, event);
        if (result === NEXT) {
            this.clickDot.emit(index);
        }
    };
    /**
     * Method used in the template to track ids in ngFor.
     * @param number index of the array
     * @param Image item of the array
     * @returns number the id of the item
     */
    /**
     * Method used in the template to track ids in ngFor.
     * @param {?} index
     * @param {?} item
     * @return {?} number the id of the item
     */
    DotsComponent.prototype.trackById = /**
     * Method used in the template to track ids in ngFor.
     * @param {?} index
     * @param {?} item
     * @return {?} number the id of the item
     */
    function (index, item) {
        return item.id;
    };
    DotsComponent.decorators = [
        { type: Component, args: [{
                    selector: 'ks-dots',
                    template: "<nav class=\"dots-container\" [attr.aria-label]=\"accessibilityConfig?.dotsContainerAriaLabel\"\n     [title]=\"accessibilityConfig?.dotsContainerTitle\">\n  <ng-container *ngIf=\"!configDots || configDots?.visible\">\n    <div class=\"inside dot\"\n         *ngFor=\"let img of images; trackBy: trackById; let index = index\"\n         [ngClass]=\"{'active': isActive(index)}\"\n         [attr.aria-label]=\"accessibilityConfig?.dotAriaLabel + ' ' + (index + 1)\"\n         [tabindex]=\"0\" role=\"navigation\"\n         (click)=\"onDotEvent(index, $event)\" (keyup)=\"onDotEvent(index, $event)\"></div>\n  </ng-container>\n</nav>\n",
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    styles: [".dots-container{display:flex;flex-direction:row;justify-content:center;margin-bottom:30px}.dots-container>.dot{background:#fff;border-radius:5px;height:10px;margin-left:4px;margin-right:4px;width:10px;cursor:pointer;opacity:.5}.dots-container>.dot:hover{opacity:.9;transition:opacity .5s}.dots-container>.dot.active{cursor:pointer;opacity:.9}@-webkit-keyframes fadein-semi-visible05{from{opacity:0}to{opacity:.5}}@keyframes fadein-semi-visible05{from{opacity:0}to{opacity:.5}}@-webkit-keyframes fadein-semi-visible09{from{opacity:0}to{opacity:.9}}@keyframes fadein-semi-visible09{from{opacity:0}to{opacity:.9}}"]
                }] }
    ];
    DotsComponent.propDecorators = {
        currentImage: [{ type: Input }],
        images: [{ type: Input }],
        dotsConfig: [{ type: Input }],
        accessibilityConfig: [{ type: Input }],
        clickDot: [{ type: Output }]
    };
    return DotsComponent;
}(AccessibleComponent));
export { DotsComponent };
if (false) {
    /**
     * Object of type `InternalLibImage` that represent the visible image.
     * @type {?}
     */
    DotsComponent.prototype.currentImage;
    /**
     * Array of `InternalLibImage` that represent the model of this library with all images,
     * thumbs and so on.
     * @type {?}
     */
    DotsComponent.prototype.images;
    /**
     * Object of type `DotsConfig` to init DotsComponent's features.
     * For instance, it contains a param to show/hide this component.
     * @type {?}
     */
    DotsComponent.prototype.dotsConfig;
    /**
     * Object of type `AccessibilityConfig` to init custom accessibility features.
     * For instance, it contains titles, alt texts, aria-labels and so on.
     * @type {?}
     */
    DotsComponent.prototype.accessibilityConfig;
    /**
     * Output to emit clicks on dots. The payload contains a number that represent
     * the index of the clicked dot.
     * @type {?}
     */
    DotsComponent.prototype.clickDot;
    /**
     * Object of type `DotsConfig` exposed to the template. This field is initialized
     * applying transformations, default values and so on to the input of the same type.
     * @type {?}
     */
    DotsComponent.prototype.configDots;
}
//# sourceMappingURL=data:application/json;base64, 