import { NgClass } from '@angular/common';
import * as i0 from '@angular/core';
import { EventEmitter, booleanAttribute, Output, Input, ChangeDetectionStrategy, Component } from '@angular/core';

class DotStepperComponent {
    interactive = true;
    index = 0;
    items = [];
    dotClick = new EventEmitter();
    currentItem = undefined;
    ngOnChanges() {
        this.currentItem = this.items[this.index];
    }
    /**
     * On dot click
     * @param event Dom click event
     * @param item Item clicked
     * @param index Index of the item clicked
     */
    onDotClick(event, item, index) {
        event.stopPropagation();
        if (!this.interactive) {
            return;
        }
        this.currentItem = item;
        this.index = index;
        this.dotClick.emit(this.index);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DotStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DotStepperComponent, isStandalone: true, selector: "ap-dot-stepper", inputs: { interactive: ["interactive", "interactive", booleanAttribute], index: "index", items: "items" }, outputs: { dotClick: "dotClick" }, usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"dots\">\n    @for (item of items; track item; let i = $index) {\n        <div\n            class=\"dot\"\n            tabindex=\"-1\"\n            [ngClass]=\"{\n                active: item === currentItem,\n                disabled: !interactive\n            }\"\n            (click)=\"onDotClick($event, item, i)\"\n            (keydown)=\"onDotClick($event, item, i)\"></div>\n    }\n</div>\n", styles: [".dots{align-items:stretch;box-sizing:border-box;display:flex;flex-direction:row;gap:var(--comp-dot-stepper-spacing);place-content:stretch center;width:100%}.dots .dot{position:relative;transition:all .2s ease-in-out;border:var(--comp-dot-stepper-dot-inactive-border-width) solid var(--comp-dot-stepper-dot-inactive-border-color);border-radius:50%;height:var(--comp-dot-stepper-dot-size);width:var(--comp-dot-stepper-dot-size);cursor:pointer}.dots .dot:hover{border:var(--comp-dot-stepper-dot-inactive-border-width) solid var(--ref-color-electric-blue-60);background:var(--comp-dot-stepper-dot-inactive-focused-background-color)}.dots .dot:focus{background:var(--comp-dot-stepper-dot-inactive-hovered-background-color)}.dots .dot:focus:after{content:\"\";width:calc(var(--comp-dot-stepper-dot-size) + var(--comp-dot-stepper-dot-inactive-border-width));height:calc(var(--comp-dot-stepper-dot-size) + var(--comp-dot-stepper-dot-inactive-border-width));top:calc(-1 * (var(--comp-dot-stepper-dot-inactive-border-width) * 2 + 1px));left:calc(-1 * (var(--comp-dot-stepper-dot-inactive-border-width) * 2 + 1px));position:absolute;border-radius:50%;border:var(--comp-dot-stepper-dot-inactive-border-width) solid var(--ref-color-electric-blue-100)}.dots .dot.active{background:var(--comp-dot-stepper-dot-active-background-color);border:var(--comp-dot-stepper-dot-inactive-border-width) solid var(--ref-color-electric-blue-150);cursor:initial}.dots .dot.disabled{cursor:initial;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DotStepperComponent, decorators: [{
            type: Component,
            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-dot-stepper', imports: [NgClass], template: "<div\n    class=\"dots\">\n    @for (item of items; track item; let i = $index) {\n        <div\n            class=\"dot\"\n            tabindex=\"-1\"\n            [ngClass]=\"{\n                active: item === currentItem,\n                disabled: !interactive\n            }\"\n            (click)=\"onDotClick($event, item, i)\"\n            (keydown)=\"onDotClick($event, item, i)\"></div>\n    }\n</div>\n", styles: [".dots{align-items:stretch;box-sizing:border-box;display:flex;flex-direction:row;gap:var(--comp-dot-stepper-spacing);place-content:stretch center;width:100%}.dots .dot{position:relative;transition:all .2s ease-in-out;border:var(--comp-dot-stepper-dot-inactive-border-width) solid var(--comp-dot-stepper-dot-inactive-border-color);border-radius:50%;height:var(--comp-dot-stepper-dot-size);width:var(--comp-dot-stepper-dot-size);cursor:pointer}.dots .dot:hover{border:var(--comp-dot-stepper-dot-inactive-border-width) solid var(--ref-color-electric-blue-60);background:var(--comp-dot-stepper-dot-inactive-focused-background-color)}.dots .dot:focus{background:var(--comp-dot-stepper-dot-inactive-hovered-background-color)}.dots .dot:focus:after{content:\"\";width:calc(var(--comp-dot-stepper-dot-size) + var(--comp-dot-stepper-dot-inactive-border-width));height:calc(var(--comp-dot-stepper-dot-size) + var(--comp-dot-stepper-dot-inactive-border-width));top:calc(-1 * (var(--comp-dot-stepper-dot-inactive-border-width) * 2 + 1px));left:calc(-1 * (var(--comp-dot-stepper-dot-inactive-border-width) * 2 + 1px));position:absolute;border-radius:50%;border:var(--comp-dot-stepper-dot-inactive-border-width) solid var(--ref-color-electric-blue-100)}.dots .dot.active{background:var(--comp-dot-stepper-dot-active-background-color);border:var(--comp-dot-stepper-dot-inactive-border-width) solid var(--ref-color-electric-blue-150);cursor:initial}.dots .dot.disabled{cursor:initial;pointer-events:none}\n"] }]
        }], propDecorators: { interactive: [{
                type: Input,
                args: [{
                        transform: booleanAttribute,
                    }]
            }], index: [{
                type: Input
            }], items: [{
                type: Input
            }], dotClick: [{
                type: Output
            }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { DotStepperComponent };
//# sourceMappingURL=agorapulse-ui-components-dot-stepper.mjs.map
