import { CdkListboxModule } from '@angular/cdk/listbox';
import { CommonModule } from '@angular/common';
import { Component, effect, inject, input, model } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgmDensityDirective, NgmI18nPipe } from '@metad/ocap-angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { NgxControlValueAccessor } from 'ngxtension/control-value-accessor';
import * as i0 from "@angular/core";
import * as i1 from "ngxtension/control-value-accessor";
import * as i2 from "@metad/ocap-angular/core";
import * as i3 from "@angular/forms";
import * as i4 from "@ngx-translate/core";
import * as i5 from "@angular/cdk/listbox";
export class NgmStepperComponent {
    constructor() {
        this.cva = inject(NgxControlValueAccessor);
        // Inputs
        this.steps = input();
        // States
        this.current = model([1]);
        effect(() => {
            if (this.cva.value$() != null && this.cva.value$() !== this.current()[0]) {
                this.current.set([this.cva.value$()]);
            }
        }, { allowSignalWrites: true });
    }
    onChange(index) {
        this.cva.writeValue(index);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NgmStepperComponent, isStandalone: true, selector: "ngm-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { current: "currentChange" }, hostDirectives: [{ directive: i1.NgxControlValueAccessor }, { directive: i2.NgmDensityDirective, inputs: ["small", "small", "large", "large"] }], ngImport: i0, template: "<ol class=\"overflow-hidden space-y-8\" cdkListbox [(ngModel)]=\"current\" (ngModelChange)=\"onChange($event[0])\">\n  @for (step of steps(); track step; let i = $index; let last = $last) {\n    <li class=\"step relative flex-1\"\n      [class.last]=\"last\"\n      [cdkOption]=\"i+1\">\n      <a class=\"flex items-center font-medium w-full\">\n        @if (current()[0] === i+1) {\n          <span class=\"w-8 h-8 bg-primary-50  border-2 border-primary-600 rounded-full flex justify-center items-center mr-3 text-sm text-primary-600 lg:w-10 lg:h-10\">\n            {{i+1}}</span>\n        } @else if(current()[0] > i) {\n          <span class=\"w-8 h-8 bg-primary-600 border-2 border-transparent rounded-full flex justify-center items-center mr-3 text-sm text-white lg:w-10 lg:h-10\">\n            <i class=\"ri-check-line text-white\"></i>\n          </span>\n        } @else {\n          <span class=\"w-8 h-8 bg-gray-50 border-2 border-gray-200 rounded-full flex justify-center items-center mr-3 text-sm  lg:w-10 lg:h-10\">\n            {{i+1}}\n          </span>\n        }\n        <div class=\"block\">\n          <h4 class=\"text-lg text-primary-600\" [class.text-primary-600]=\"current()[0] > i\">\n            {{'Ngm.Common.Step' | translate: {Default: 'Step'} }} {{i + 1}}</h4>\n          <span class=\"text-sm\">{{step.title | i18n}}</span>\n        </div>\n      </a>\n    </li>\n  }\n</ol>", styles: [".step:not(.last):after{position:absolute;bottom:-2.75rem;left:1rem;display:inline-block;height:100%;width:.125rem;--tw-bg-opacity: 1;background-color:rgb(79 70 229 / var(--tw-bg-opacity));--tw-content: \"\";content:var(--tw-content)}@media (min-width: 1024px){.step:not(.last):after{content:var(--tw-content);left:1.25rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: i5.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i5.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "pipe", type: NgmI18nPipe, name: "i18n" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmStepperComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, imports: [
                        CommonModule,
                        FormsModule,
                        TranslateModule,
                        CdkListboxModule,
                        NgmI18nPipe
                    ], selector: 'ngm-stepper', hostDirectives: [
                        NgxControlValueAccessor,
                        {
                            directive: NgmDensityDirective,
                            inputs: ['small', 'large']
                        }
                    ], template: "<ol class=\"overflow-hidden space-y-8\" cdkListbox [(ngModel)]=\"current\" (ngModelChange)=\"onChange($event[0])\">\n  @for (step of steps(); track step; let i = $index; let last = $last) {\n    <li class=\"step relative flex-1\"\n      [class.last]=\"last\"\n      [cdkOption]=\"i+1\">\n      <a class=\"flex items-center font-medium w-full\">\n        @if (current()[0] === i+1) {\n          <span class=\"w-8 h-8 bg-primary-50  border-2 border-primary-600 rounded-full flex justify-center items-center mr-3 text-sm text-primary-600 lg:w-10 lg:h-10\">\n            {{i+1}}</span>\n        } @else if(current()[0] > i) {\n          <span class=\"w-8 h-8 bg-primary-600 border-2 border-transparent rounded-full flex justify-center items-center mr-3 text-sm text-white lg:w-10 lg:h-10\">\n            <i class=\"ri-check-line text-white\"></i>\n          </span>\n        } @else {\n          <span class=\"w-8 h-8 bg-gray-50 border-2 border-gray-200 rounded-full flex justify-center items-center mr-3 text-sm  lg:w-10 lg:h-10\">\n            {{i+1}}\n          </span>\n        }\n        <div class=\"block\">\n          <h4 class=\"text-lg text-primary-600\" [class.text-primary-600]=\"current()[0] > i\">\n            {{'Ngm.Common.Step' | translate: {Default: 'Step'} }} {{i + 1}}</h4>\n          <span class=\"text-sm\">{{step.title | i18n}}</span>\n        </div>\n      </a>\n    </li>\n  }\n</ol>", styles: [".step:not(.last):after{position:absolute;bottom:-2.75rem;left:1rem;display:inline-block;height:100%;width:.125rem;--tw-bg-opacity: 1;background-color:rgb(79 70 229 / var(--tw-bg-opacity));--tw-content: \"\";content:var(--tw-content)}@media (min-width: 1024px){.step:not(.last):after{content:var(--tw-content);left:1.25rem}}\n"] }]
        }], ctorParameters: () => [] });
//# sourceMappingURL=data:application/json;base64, 