import { UntypedFormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
import { Component, Input, ViewChild } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/material/form-field";
import * as i3 from "@angular/material/icon";
import * as i4 from "@angular/material/input";
import * as i5 from "@angular/material/tooltip";
import * as i6 from "@angular/material/button-toggle";
import * as i7 from "@angular/forms";
// set the default value
export const DEFAULT_SELECTED_VALUE = 1;
export class NumberInputButtonComponent {
    constructor() {
        this.label = 'Select Value';
        this.showLabel = true;
        this.showCustomInput = false;
        this.options = [
            { title: '1', value: 1, type: 'text', hint: '' },
            { title: '2', value: 2, type: 'text', hint: '' },
            { title: '3', value: 3, type: 'text', hint: '' },
            { title: '4', value: 4, type: 'text', hint: '' },
            { title: '5', value: 5, type: 'text', hint: '' },
            { title: 'help', value: 'custom', type: 'icon', hint: 'Custom' },
        ];
        this.selectedOption = new UntypedFormControl();
        this.customValue = new UntypedFormControl(DEFAULT_SELECTED_VALUE);
        this.touched = false;
        this.disabled = false;
        this.onChange = (value) => { };
        this.onTouched = () => { };
    }
    ngOnInit() {
        this.selectedOption.valueChanges.subscribe((value) => {
            if (value == 'custom') {
                this.showCustomInput = true;
                value = DEFAULT_SELECTED_VALUE;
                setTimeout(() => {
                    this.customInput?.nativeElement?.focus();
                }, 100);
            }
            else {
                this.showCustomInput = false;
            }
            this.onChange(value);
            this.onTouched();
        });
        this.customValue.valueChanges.subscribe((value) => {
            this.onChange(value);
            this.onTouched();
        });
    }
    writeValue(obj) {
        const option = this.options.find((option) => {
            return option.value === obj;
        });
        if (!option) {
            this.showCustomInput = true;
            this.selectedOption.setValue('custom');
            this.customValue.setValue(obj);
        }
        else {
            this.showCustomInput = false;
            this.selectedOption.setValue(obj);
        }
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NumberInputButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NumberInputButtonComponent, selector: "app-number-input-button", inputs: { label: "label", appearance: "appearance", showLabel: "showLabel" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                multi: true,
                useExisting: NumberInputButtonComponent
            }
        ], viewQueries: [{ propertyName: "customInput", first: true, predicate: ["customInput"], descendants: true }], ngImport: i0, template: "<span *ngIf=\"showLabel\" class=\"mr-1\">{{ label }}</span> <br *ngIf=\"showLabel\">\n<mat-button-toggle-group [hideSingleSelectionIndicator]=\"true\" [hideMultipleSelectionIndicator]=\"true\"\n  [formControl]=\"selectedOption\">\n  <mat-button-toggle [matTooltip]=\"option?.hint || ''\" *ngFor=\"let option of options\" [value]=\"option?.value\">\n    <span *ngIf=\"option.type =='text'\">{{ option?.title }}</span>\n    <mat-icon class=\"small-icon\" *ngIf=\"option.type == 'icon'\">{{option?.title}}</mat-icon>\n  </mat-button-toggle>\n</mat-button-toggle-group>\n<mat-form-field class=\"mt-1 w-100\" *ngIf=\"showCustomInput\">\n  <mat-label>{{ label }}</mat-label>\n  <input type=\"number\" min=\"0\" #customInput matInput [formControl]=\"customValue\">\n</mat-form-field>", styles: [":host ::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{line-height:30px;padding:0 12px;font-size:12px}:host ::ng-deep .mat-button-toggle-checked{color:#fff!important}:host ::ng-deep .small-icon{height:18px;width:18px;font-size:18px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NumberInputButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-number-input-button', providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            multi: true,
                            useExisting: NumberInputButtonComponent
                        }
                    ], template: "<span *ngIf=\"showLabel\" class=\"mr-1\">{{ label }}</span> <br *ngIf=\"showLabel\">\n<mat-button-toggle-group [hideSingleSelectionIndicator]=\"true\" [hideMultipleSelectionIndicator]=\"true\"\n  [formControl]=\"selectedOption\">\n  <mat-button-toggle [matTooltip]=\"option?.hint || ''\" *ngFor=\"let option of options\" [value]=\"option?.value\">\n    <span *ngIf=\"option.type =='text'\">{{ option?.title }}</span>\n    <mat-icon class=\"small-icon\" *ngIf=\"option.type == 'icon'\">{{option?.title}}</mat-icon>\n  </mat-button-toggle>\n</mat-button-toggle-group>\n<mat-form-field class=\"mt-1 w-100\" *ngIf=\"showCustomInput\">\n  <mat-label>{{ label }}</mat-label>\n  <input type=\"number\" min=\"0\" #customInput matInput [formControl]=\"customValue\">\n</mat-form-field>", styles: [":host ::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{line-height:30px;padding:0 12px;font-size:12px}:host ::ng-deep .mat-button-toggle-checked{color:#fff!important}:host ::ng-deep .small-icon{height:18px;width:18px;font-size:18px}\n"] }]
        }], propDecorators: { label: [{
                type: Input
            }], appearance: [{
                type: Input
            }], showLabel: [{
                type: Input
            }], customInput: [{
                type: ViewChild,
                args: ['customInput']
            }] } });
//# sourceMappingURL=data:application/json;base64, 