/* tslint:disable:component-selector radix */
import { Component, Input } from '@angular/core';
import { FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/flex-layout/flex";
import * as i3 from "@angular/material/form-field";
import * as i4 from "@angular/material/input";
import * as i5 from "@angular/material/core";
import * as i6 from "@angular/material/select";
import * as i7 from "@angular/forms";
export class IpRangeSelectorComponent {
    constructor() {
        this.label = 'IP Range';
        this.subnetOptions = [
            { value: 32, range: 1 },
            { value: 31, range: 2 },
            { value: 30, range: 4 },
            { value: 29, range: 8 },
            { value: 28, range: 16 },
            { value: 27, range: 32 },
            { value: 26, range: 64 },
            { value: 25, range: 128 },
            { value: 24, range: 256 },
            { value: 23, range: 512 },
            { value: 22, range: 1024 },
            { value: 21, range: 2048 },
            { value: 20, range: 4096 },
            { value: 19, range: 8192 },
            { value: 18, range: 16384 },
            { value: 17, range: 32768 },
            { value: 16, range: 65536 },
            { value: 15, range: 131072 },
            { value: 14, range: 262144 },
            { value: 13, range: 524288 },
            { value: 12, range: 1048576 },
            { value: 11, range: 2096152 },
            { value: 10, range: 4194304 },
            { value: 9, range: 8388608 },
            { value: 8, range: 16777216 },
            { value: 7, range: 33554432 },
            { value: 6, range: 67108864 },
            { value: 5, range: 134217728 },
            { value: 4, range: 268435456 },
            { value: 3, range: 536870912 },
            { value: 2, range: 1073741824 },
            { value: 1, range: 2147483648 },
        ];
        this.disabled = false;
        this.ipAddressControl = new FormControl('');
        this.subnetControl = new FormControl(32);
        this.onChange = (value) => { };
        this.onTouched = () => { };
    }
    ngOnInit() {
        this.ipAddressControl.valueChanges.subscribe(() => this.updateValue());
        this.subnetControl.valueChanges.subscribe(() => this.updateValue());
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    writeValue(val) {
        if (val) {
            const [ipAddress, subnet] = val.split('/');
            this.ipAddressControl.setValue(ipAddress);
            this.subnetControl.setValue(Number.parseInt(subnet));
        }
        else {
            this.subnetControl.setValue(32);
        }
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
    }
    /**
     * Update the control value.
     * @private
     */
    updateValue() {
        const ipAddress = this.ipAddressControl.value;
        const subnet = this.subnetControl.value;
        this.onChange(ipAddress + '/' + subnet);
        this.onTouched();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IpRangeSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: IpRangeSelectorComponent, selector: "techlify-ip-range-selector", inputs: { label: "label" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                multi: true,
                useExisting: IpRangeSelectorComponent
            }
        ], ngImport: i0, template: "<div fxLayout fxLayoutGap=\"10px\" class=\"w-100\">\n  <mat-form-field fxFlex=\"calc(85% - 10px)\">\n    <mat-label>{{ label }}</mat-label>\n    <input type=\"text\" matInput placeholder=\"IP Range\" [formControl]=\"ipAddressControl\">\n    <mat-hint>\n      What is the ip address or range that we should block? Format can be either a single IP like\n      <code>192.175.32.133</code> OR a range specifying the subnet like <code>192.175.32.0/24</code>\n    </mat-hint>\n  </mat-form-field>\n  <mat-form-field fxFlex=\"calc(15% - 10px)\">\n    <mat-select [formControl]=\"subnetControl\">\n      <mat-option *ngFor=\"let subnet of subnetOptions\" [value]=\"subnet.value\">\n        /{{ subnet.value }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n</div>\n", styles: [".custom-suffix{background:gray;margin-top:-20px;position:absolute;right:0;top:20px;height:50px;border-radius:4px;padding-top:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: IpRangeSelectorComponent, decorators: [{
            type: Component,
            args: [{ selector: 'techlify-ip-range-selector', providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            multi: true,
                            useExisting: IpRangeSelectorComponent
                        }
                    ], template: "<div fxLayout fxLayoutGap=\"10px\" class=\"w-100\">\n  <mat-form-field fxFlex=\"calc(85% - 10px)\">\n    <mat-label>{{ label }}</mat-label>\n    <input type=\"text\" matInput placeholder=\"IP Range\" [formControl]=\"ipAddressControl\">\n    <mat-hint>\n      What is the ip address or range that we should block? Format can be either a single IP like\n      <code>192.175.32.133</code> OR a range specifying the subnet like <code>192.175.32.0/24</code>\n    </mat-hint>\n  </mat-form-field>\n  <mat-form-field fxFlex=\"calc(15% - 10px)\">\n    <mat-select [formControl]=\"subnetControl\">\n      <mat-option *ngFor=\"let subnet of subnetOptions\" [value]=\"subnet.value\">\n        /{{ subnet.value }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n</div>\n", styles: [".custom-suffix{background:gray;margin-top:-20px;position:absolute;right:0;top:20px;height:50px;border-radius:4px;padding-top:20px}\n"] }]
        }], ctorParameters: () => [], propDecorators: { label: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 