import { Component, HostBinding, input, signal } from '@angular/core';
import { Subject, interval, takeUntil } from 'rxjs';
import { carouselAnimation } from './carousel.animation';
import * as i0 from "@angular/core";
import * as i1 from "@angular/material/button";
import * as i2 from "@angular/material/icon";
import * as i3 from "@angular/material/radio";
import * as i4 from "@angular/forms";
/**
 * Component for image carousel
 */
export class CarouselComponent {
    constructor() {
        /**
         * Images list with their description
         */
        this.images = input([]);
        /**
         * Manage the autoplay of the carouse
         */
        this.autoPlay = input(false);
        /**
         * The amount of time to delay between automatically cycling an image
         */
        this.interval = input(5000);
        this.ariaRpleDescription = 'carousel';
        this.id = new Date().getTime().toString();
        this.currentIndex = signal(0);
        this.stopPlay = new Subject();
    }
    ngOnInit() {
        this.observable = interval(this.interval());
        if (this.autoPlay()) {
            this.setInterval();
        }
    }
    ngOnDestroy() {
        if (this.subscription) {
            this.subscription.unsubscribe();
        }
    }
    setInterval() {
        this.subscription = this.observable.pipe(takeUntil(this.stopPlay)).subscribe(() => {
            this.setIndex(this.currentIndex() + 1, false);
        });
    }
    setIndex(index, resetInterval = true) {
        this.currentIndex.set(index);
        if (this.currentIndex() >= this.images().length) {
            this.currentIndex.set(0);
        }
        if (this.currentIndex() < 0) {
            this.currentIndex.set(this.images().length - 1);
        }
        if (resetInterval && this.subscription && !this.subscription.closed) {
            this.stopPlay.next();
            this.setInterval();
        }
    }
    toggleAutoPlay() {
        if (this.subscription?.closed) {
            this.setInterval();
        }
        else {
            this.stopPlay.next();
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: CarouselComponent, selector: "mic-carousel", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: false, transformFunction: null }, autoPlay: { classPropertyName: "autoPlay", publicName: "autoPlay", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-roledescription": "this.ariaRpleDescription" } }, ngImport: i0, template: "<div\n  id=\"carousel-items-{{ id }}\"\n  class=\"mic-carousel\"\n  [@slideInOut]=\"currentIndex()\"\n  [attr.aria-live]=\"!autoPlay() ? 'polite' : subscription.closed ? 'polite' : 'off'\"\n>\n  @for (image of images(); track image; let i = $index) { @if (i === currentIndex()) {\n  <div\n    id=\"carousel-items-{{ id }}-{{ i + 1 }}\"\n    class=\"slide\"\n    role=\"tabpanel\"\n    aria-roledescription=\"slide\"\n    attr.aria-label=\"{{ i + 1 }} of {{ images().length }}\"\n  >\n    <img [src]=\"image.url\" alt=\"\" />\n    @if (image.description) {\n    <div class=\"description\">{{ image.description }}</div>\n    }\n  </div>\n  } }\n</div>\n<button\n  type=\"button\"\n  mat-mini-fab\n  color=\"primary\"\n  (click)=\"setIndex(currentIndex() - 1)\"\n  class=\"button-left\"\n  aria-label=\"Previous slide\"\n  aria-controls=\"carousel-items\"\n>\n  <mat-icon role=\"img\" aria-label=\"Previous slide\" aria-hidden=\"false\">chevron_left</mat-icon>\n</button>\n<button\n  type=\"button\"\n  mat-mini-fab\n  color=\"primary\"\n  (click)=\"setIndex(currentIndex() + 1)\"\n  class=\"button-right\"\n  aria-label=\"Next slide\"\n  aria-controls=\"carousel-items\"\n>\n  <mat-icon role=\"img\" aria-label=\"Next slide\" aria-hidden=\"false\">chevron_right</mat-icon>\n</button>\n<div class=\"flex flex-row justify-center mt-1\">\n  @if (autoPlay()) {\n  <button\n    type=\"button\"\n    mat-icon-button\n    color=\"primary\"\n    (click)=\"toggleAutoPlay()\"\n    attr.aria-label=\"{{ subscription.closed ? 'Start' : 'Stop' }} automatic slide show\"\n  >\n    @if (!subscription.closed) {\n    <mat-icon role=\"img\" aria-label=\"Stop automatic slide show\" Next slide>pause</mat-icon>\n    } @if (subscription.closed) {\n    <mat-icon role=\"img\" aria-label=\"Start automatic slide show\">play_arrow</mat-icon>\n    }\n  </button>\n  }\n  <mat-radio-group role=\"tablist\" aria-label=\"Slides\" [ngModel]=\"currentIndex()\" (ngModelChange)=\"setIndex($event)\">\n    @for (img of images(); track img; let i = $index) {\n    <mat-radio-button\n      type=\"button\"\n      role=\"tab\"\n      [value]=\"i\"\n      [attr.aria-label]=\"'Slide ' + (i + 1)\"\n      [attr.aria-selected]=\"i === currentIndex()\"\n      attr.aria-controls=\"carousel-items-{{ i + 1 }}\"\n    ></mat-radio-button>\n    }\n  </mat-radio-group>\n</div>\n", styles: [":host{width:100%;height:500px;position:relative}@media (max-width: 640px){:host{height:250px}}:host .mic-carousel{position:relative;height:calc(100% - 40px);overflow:hidden}:host .mic-carousel .slide{position:absolute;inset:0;height:100%;width:100%}:host .mic-carousel .slide img{display:block;object-fit:cover;height:100%;width:100%}:host .mic-carousel .slide .description{position:absolute;bottom:0;width:100%;padding:10px 0;text-align:center;opacity:.95}.button-left,.button-right{position:absolute;top:50%;margin-top:-20px}.button-left.button-left,.button-right.button-left{left:20px}.button-left.button-right,.button-right.button-right{right:20px}\n"], dependencies: [{ kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i1.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: carouselAnimation }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: CarouselComponent, decorators: [{
            type: Component,
            args: [{ selector: 'mic-carousel', animations: carouselAnimation, template: "<div\n  id=\"carousel-items-{{ id }}\"\n  class=\"mic-carousel\"\n  [@slideInOut]=\"currentIndex()\"\n  [attr.aria-live]=\"!autoPlay() ? 'polite' : subscription.closed ? 'polite' : 'off'\"\n>\n  @for (image of images(); track image; let i = $index) { @if (i === currentIndex()) {\n  <div\n    id=\"carousel-items-{{ id }}-{{ i + 1 }}\"\n    class=\"slide\"\n    role=\"tabpanel\"\n    aria-roledescription=\"slide\"\n    attr.aria-label=\"{{ i + 1 }} of {{ images().length }}\"\n  >\n    <img [src]=\"image.url\" alt=\"\" />\n    @if (image.description) {\n    <div class=\"description\">{{ image.description }}</div>\n    }\n  </div>\n  } }\n</div>\n<button\n  type=\"button\"\n  mat-mini-fab\n  color=\"primary\"\n  (click)=\"setIndex(currentIndex() - 1)\"\n  class=\"button-left\"\n  aria-label=\"Previous slide\"\n  aria-controls=\"carousel-items\"\n>\n  <mat-icon role=\"img\" aria-label=\"Previous slide\" aria-hidden=\"false\">chevron_left</mat-icon>\n</button>\n<button\n  type=\"button\"\n  mat-mini-fab\n  color=\"primary\"\n  (click)=\"setIndex(currentIndex() + 1)\"\n  class=\"button-right\"\n  aria-label=\"Next slide\"\n  aria-controls=\"carousel-items\"\n>\n  <mat-icon role=\"img\" aria-label=\"Next slide\" aria-hidden=\"false\">chevron_right</mat-icon>\n</button>\n<div class=\"flex flex-row justify-center mt-1\">\n  @if (autoPlay()) {\n  <button\n    type=\"button\"\n    mat-icon-button\n    color=\"primary\"\n    (click)=\"toggleAutoPlay()\"\n    attr.aria-label=\"{{ subscription.closed ? 'Start' : 'Stop' }} automatic slide show\"\n  >\n    @if (!subscription.closed) {\n    <mat-icon role=\"img\" aria-label=\"Stop automatic slide show\" Next slide>pause</mat-icon>\n    } @if (subscription.closed) {\n    <mat-icon role=\"img\" aria-label=\"Start automatic slide show\">play_arrow</mat-icon>\n    }\n  </button>\n  }\n  <mat-radio-group role=\"tablist\" aria-label=\"Slides\" [ngModel]=\"currentIndex()\" (ngModelChange)=\"setIndex($event)\">\n    @for (img of images(); track img; let i = $index) {\n    <mat-radio-button\n      type=\"button\"\n      role=\"tab\"\n      [value]=\"i\"\n      [attr.aria-label]=\"'Slide ' + (i + 1)\"\n      [attr.aria-selected]=\"i === currentIndex()\"\n      attr.aria-controls=\"carousel-items-{{ i + 1 }}\"\n    ></mat-radio-button>\n    }\n  </mat-radio-group>\n</div>\n", styles: [":host{width:100%;height:500px;position:relative}@media (max-width: 640px){:host{height:250px}}:host .mic-carousel{position:relative;height:calc(100% - 40px);overflow:hidden}:host .mic-carousel .slide{position:absolute;inset:0;height:100%;width:100%}:host .mic-carousel .slide img{display:block;object-fit:cover;height:100%;width:100%}:host .mic-carousel .slide .description{position:absolute;bottom:0;width:100%;padding:10px 0;text-align:center;opacity:.95}.button-left,.button-right{position:absolute;top:50%;margin-top:-20px}.button-left.button-left,.button-right.button-left{left:20px}.button-left.button-right,.button-right.button-right{right:20px}\n"] }]
        }], propDecorators: { ariaRpleDescription: [{
                type: HostBinding,
                args: ['attr.aria-roledescription']
            }] } });
//# sourceMappingURL=data:application/json;base64, 