import { ChangeDetectionStrategy, Component, EventEmitter, forwardRef, Input, Optional, Output, ViewChild, } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { ButtonComponent } from '../../components/atoms/button/button.component';
import { IconComponent } from '../../components/atoms/icon/icon.component';
import { OptionComponent } from '../option/option.component';
import { Subject, debounceTime } from 'rxjs';
import { LabelComponent } from '../label/label.component';
import { AlertComponent } from '../../components/atoms/alert/alert.component';
import { provideControlContainer, provideValueAccessor } from '../utils/form.util';
import { FormGenericComponent } from '../../services/form-generic.abstract';
import { FormErrorComponent } from '../error/error.component';
import { OverlayDirective } from '../../directives/overlay.directive';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
export class SelectComponent extends FormGenericComponent {
    constructor(formGroupDirective, destroyRef) {
        super(formGroupDirective);
        this.formGroupDirective = formGroupDirective;
        this.destroyRef = destroyRef;
        this.focusOut$ = new Subject();
        this.isOpen = false;
        this.option = '';
        this.key = '';
        this.options = [];
        this.label = '';
        this.helper = '';
        this.placeholder = '';
        this.value = '';
        this.disposition = 'vertical';
        this.fullSize = true;
        this.showError = false;
        this.selected = new EventEmitter();
    }
    ngOnInit() {
        this.selectOption(this.value, false);
        this.focusOut$.pipe(takeUntilDestroyed(this.destroyRef), debounceTime(200)).subscribe(() => {
            this.triggerMarkCheck();
            this.close();
        });
    }
    ngOnChanges(changes) {
        if (changes['options'])
            this.selectOption(this.value, false);
    }
    toggle() {
        this.isOpen = !this.isOpen;
        if (!this.isOpen) {
            this.triggerTouched();
        }
    }
    close() {
        this.isOpen = false;
        this.triggerTouched();
    }
    selectOption(key, propagate = true) {
        const selectedOption = this.options.find(option => option.key === key);
        this.option = key === null ? this.placeholder : selectedOption?.label;
        if (propagate) {
            this.selected.emit(key);
            this.triggerChange(selectedOption?.key ?? null);
            this.close();
        }
    }
    writeValue(value) {
        this.triggerMarkCheck();
        this.selectOption(value, false);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectComponent, deps: [{ token: i1.FormGroupDirective, optional: true }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SelectComponent, isStandalone: true, selector: "ct-select", inputs: { formControlName: "formControlName", key: "key", options: "options", label: "label", helper: "helper", placeholder: "placeholder", value: "value", disposition: "disposition", fullSize: "fullSize", showError: "showError" }, outputs: { selected: "selected" }, providers: [provideValueAccessor(forwardRef(() => SelectComponent))], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["triggerElement"], descendants: true }, { propertyName: "panel", first: true, predicate: ["optionsPanel"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"flex gap-1 font-primary\"\n  [class.items-start]=\"disposition === 'vertical'\"\n  [class.flex-col]=\"disposition === 'vertical'\">\n  @if (label) {\n    <ct-form-label\n      [class.grow]=\"disposition === 'horizontal'\"\n      [text]=\"label\"\n      [hasError]=\"hasErrors(formControl)\"\n      [showError]=\"showError\" />\n  }\n  <div class=\"flex flex-col\" [class.w-full]=\"fullSize\" [class.w-fit]=\"!fullSize\">\n    <div\n      tabindex=\"0\"\n      class=\"flex cursor-pointer flex-row items-center justify-between rounded-md border bg-surface px-4 py-2 text-sm text-on-surface dark:bg-surface-dark dark:text-on-surface-dark\"\n      [class.border-error]=\"hasErrors(formControl) && showError\"\n      [class.border-neutral-300]=\"!hasErrors(formControl) || !showError\"\n      [class.text-on-surface]=\"option !== placeholder\"\n      (focusout)=\"focusOut$.next($event)\"\n      (click)=\"toggle()\">\n      <span [class.text-neutral-500]=\"option === placeholder\">{{ option }}</span>\n      <ct-icon class=\"flex\" [size]=\"'sm'\" [icon]=\"isOpen ? 'chevron-up' : 'chevron-down'\" />\n    </div>\n    <!-- [ctOverlay]=\"dropDown\"\n    [ctOverlayCloseOnClick]=\"true\"\n    ctOverlayPosition=\"vertical\"\n    <ng-template #dropDown>\n      <div\n        [class.w-full]=\"fullSize\"\n        [class.w-fit]=\"!fullSize\"\n        class=\"flex max-h-72 flex-col overflow-y-auto rounded-md border border-neutral-400 bg-surface text-on-surface shadow-lg dark:bg-surface-dark dark:text-on-surface-dark\">\n        @if (placeholder) {\n          <ct-option (click)=\"selectOption(null)\" [label]=\"placeholder\" />\n        }\n        @for (option of options; track option) {\n          <ct-option (click)=\"selectOption(option.key)\" [label]=\"option.label\" [icon]=\"option.icon!\" />\n        }\n      </div>\n    </ng-template> -->\n    @if (isOpen) {\n      <div class=\"relative flex flex-col\">\n        <div\n          [class.w-full]=\"fullSize\"\n          [class.w-fit]=\"!fullSize\"\n          class=\"absolute top-0.5 z-10 flex max-h-72 flex-col overflow-y-auto rounded-md border border-neutral-400 bg-surface text-on-surface shadow-lg dark:bg-surface-dark dark:text-on-surface-dark\">\n          @if (placeholder) {\n            <ct-option (click)=\"selectOption(null)\" [label]=\"placeholder\" />\n          }\n          @for (option of options; track option) {\n            <ct-option (click)=\"selectOption(option.key)\" [label]=\"option.label\" [icon]=\"option.icon!\" />\n          }\n        </div>\n      </div>\n    }\n  </div>\n  @if (formControl) {\n    <ct-form-alert\n      [hasErrors]=\"hasErrors(formControl)\"\n      [helper]=\"helper\"\n      [errors]=\"formControl.errors ?? {}\"\n      size=\"xs\" />\n  }\n</div>\n", styles: ["vertical-overlay{width:100%}\n"], dependencies: [{ kind: "component", type: OptionComponent, selector: "ct-option", inputs: ["label", "icon"] }, { kind: "component", type: IconComponent, selector: "ct-icon", inputs: ["icon", "fill", "strokeWidth", "strokeColor", "size", "variant"] }, { kind: "component", type: LabelComponent, selector: "ct-form-label", inputs: ["text", "type", "formControlName", "hasError", "showError"] }, { kind: "component", type: FormErrorComponent, selector: "ct-form-alert", inputs: ["errors", "size", "hasErrors", "fullSize", "helper", "errorMessages"] }], viewProviders: [provideControlContainer()], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ct-select', standalone: true, imports: [
                        OptionComponent,
                        ButtonComponent,
                        IconComponent,
                        LabelComponent,
                        AlertComponent,
                        FormErrorComponent,
                        OverlayDirective,
                    ], providers: [provideValueAccessor(forwardRef(() => SelectComponent))], viewProviders: [provideControlContainer()], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"flex gap-1 font-primary\"\n  [class.items-start]=\"disposition === 'vertical'\"\n  [class.flex-col]=\"disposition === 'vertical'\">\n  @if (label) {\n    <ct-form-label\n      [class.grow]=\"disposition === 'horizontal'\"\n      [text]=\"label\"\n      [hasError]=\"hasErrors(formControl)\"\n      [showError]=\"showError\" />\n  }\n  <div class=\"flex flex-col\" [class.w-full]=\"fullSize\" [class.w-fit]=\"!fullSize\">\n    <div\n      tabindex=\"0\"\n      class=\"flex cursor-pointer flex-row items-center justify-between rounded-md border bg-surface px-4 py-2 text-sm text-on-surface dark:bg-surface-dark dark:text-on-surface-dark\"\n      [class.border-error]=\"hasErrors(formControl) && showError\"\n      [class.border-neutral-300]=\"!hasErrors(formControl) || !showError\"\n      [class.text-on-surface]=\"option !== placeholder\"\n      (focusout)=\"focusOut$.next($event)\"\n      (click)=\"toggle()\">\n      <span [class.text-neutral-500]=\"option === placeholder\">{{ option }}</span>\n      <ct-icon class=\"flex\" [size]=\"'sm'\" [icon]=\"isOpen ? 'chevron-up' : 'chevron-down'\" />\n    </div>\n    <!-- [ctOverlay]=\"dropDown\"\n    [ctOverlayCloseOnClick]=\"true\"\n    ctOverlayPosition=\"vertical\"\n    <ng-template #dropDown>\n      <div\n        [class.w-full]=\"fullSize\"\n        [class.w-fit]=\"!fullSize\"\n        class=\"flex max-h-72 flex-col overflow-y-auto rounded-md border border-neutral-400 bg-surface text-on-surface shadow-lg dark:bg-surface-dark dark:text-on-surface-dark\">\n        @if (placeholder) {\n          <ct-option (click)=\"selectOption(null)\" [label]=\"placeholder\" />\n        }\n        @for (option of options; track option) {\n          <ct-option (click)=\"selectOption(option.key)\" [label]=\"option.label\" [icon]=\"option.icon!\" />\n        }\n      </div>\n    </ng-template> -->\n    @if (isOpen) {\n      <div class=\"relative flex flex-col\">\n        <div\n          [class.w-full]=\"fullSize\"\n          [class.w-fit]=\"!fullSize\"\n          class=\"absolute top-0.5 z-10 flex max-h-72 flex-col overflow-y-auto rounded-md border border-neutral-400 bg-surface text-on-surface shadow-lg dark:bg-surface-dark dark:text-on-surface-dark\">\n          @if (placeholder) {\n            <ct-option (click)=\"selectOption(null)\" [label]=\"placeholder\" />\n          }\n          @for (option of options; track option) {\n            <ct-option (click)=\"selectOption(option.key)\" [label]=\"option.label\" [icon]=\"option.icon!\" />\n          }\n        </div>\n      </div>\n    }\n  </div>\n  @if (formControl) {\n    <ct-form-alert\n      [hasErrors]=\"hasErrors(formControl)\"\n      [helper]=\"helper\"\n      [errors]=\"formControl.errors ?? {}\"\n      size=\"xs\" />\n  }\n</div>\n", styles: ["vertical-overlay{width:100%}\n"] }]
        }], ctorParameters: () => [{ type: i1.FormGroupDirective, decorators: [{
                    type: Optional
                }] }, { type: i0.DestroyRef }], propDecorators: { formControlName: [{
                type: Input
            }], key: [{
                type: Input
            }], options: [{
                type: Input,
                args: [{ required: true }]
            }], label: [{
                type: Input
            }], helper: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], value: [{
                type: Input
            }], disposition: [{
                type: Input
            }], fullSize: [{
                type: Input
            }], showError: [{
                type: Input
            }], selected: [{
                type: Output
            }], trigger: [{
                type: ViewChild,
                args: ['triggerElement']
            }], panel: [{
                type: ViewChild,
                args: ['optionsPanel']
            }] } });
//# sourceMappingURL=data:application/json;base64,[encoded data, 13136 characters]