import { Component } from '@angular/core';
import { isValidUrl } from '@aztrix/helpers';
import { Subscription } from 'rxjs';
import { startWith } from 'rxjs/operators';
import { ValueEdit } from '../../value-edit';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
import * as i3 from "@angular/material/form-field";
import * as i4 from "@angular/material/input";
import * as i5 from "@aztrix/icons";
import * as i6 from "@angular/material/autocomplete";
import * as i7 from "@aztrix/components/clear-button";
import * as i8 from "@aztrix/components/autofocus";
export class UrlEditComponent extends ValueEdit {
    constructor() {
        super(...arguments);
        this._regexp = new RegExp('^([\\dA-Za-z\\.-]+)\\.([A-Za-z\\.]{2,6})([/\\w \\.-].*)*/?$');
        this.inputType = 'url';
        this.defaultAutocompleteAttr = 'url';
        this.numberConfig = undefined;
    }
    ngOnChanges(changes) {
        super.ngOnChanges(changes);
        if (changes.form && this.form) {
            this._subscriptions.unsubscribe();
            this._subscriptions = new Subscription();
            this._subscriptions.add(this.form.valueChanges.pipe(startWith(this.form.value)).subscribe((value) => {
                if (this.prefix) {
                    if (typeof value === 'string') {
                        const prefix = this.prefix.replace('www.', '');
                        this.form.setValue(value
                            .replace('https://', '')
                            .replace('http://', '')
                            .replace('www.', '')
                            .replace(prefix, ''), { emitEvent: false });
                    }
                }
                else {
                    if (this._regexp.test(value)) {
                        this.form.setValue(`https://${value}`);
                    }
                }
            }));
        }
    }
    ngOnInit() {
        if (!this.prefix && this.enableValidation) {
            this.form.addValidators([this._urlValidator()]);
        }
    }
    _urlValidator() {
        const isValidUrlFn = (control) => {
            const url = control.value;
            if (!url) {
                return null;
            }
            if (!isValidUrl(url)) {
                return { linkInvalid: true };
            }
            return null;
        };
        return isValidUrlFn;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UrlEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: UrlEditComponent, selector: "ax-url-edit", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ax-icon *ngIf=\"icon\" class=\"icon type-icon\" [name]=\"icon\"></ax-icon>\n<mat-form-field\n  class=\"c-input\"\n  [ngClass]=\"{'remove-subtext': !errorsTemplate && !hint, readonly: readonly}\"\n  appearance=\"outline\"\n  [floatLabel]=\"prefix ? 'always' : floatLabel\"\n  [subscriptSizing]=\"subscriptSizing\"\n>\n  <mat-label>{{ label }}</mat-label>\n  <div class=\"input-field\">\n    <span *ngIf=\"prefix\" class=\"custom-prefix\">\n      {{ prefix }}\n    </span>\n    <input\n      matInput\n      axAutofocus\n      [attr.inputmode]=\"inputType === 'number' && !numberConfig ? 'numeric' : undefined\"\n      [attr.pattern]=\"inputType === 'number' && !numberConfig ? '[0-9]*' : undefined\"\n      [name]=\"getName()\"\n      [type]=\"inputType\"\n      [min]=\"numberConfig?.min\"\n      [max]=\"numberConfig?.max\"\n      [step]=\"numberConfig?.step\"\n      [formControl]=\"form\"\n      [autofocus]=\"autofocus\"\n      [placeholder]=\"placeholder\"\n      [autocomplete]=\"\n        matAutocomplete?.options?.length\n          ? 'no-autocomplete'\n          : autocompleteAttr || defaultAutocompleteAttr\n      \"\n      [matAutocomplete]=\"autocomplete\"\n      [matAutocompleteDisabled]=\"!matAutocomplete\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      (focus)=\"focused.emit()\"\n    />\n    <span *ngIf=\"postfix\" class=\"custom-prefix\">\n      {{ postfix }}\n    </span>\n  </div>\n\n  <mat-hint class=\"hint\" align=\"end\">\n    {{ hint }}\n  </mat-hint>\n  <span class=\"suffix\" matSuffix>\n    <ax-clear-button\n      [form]=\"form\"\n      *ngIf=\"hasValue && !form.disabled && !readonly\"\n    ></ax-clear-button>\n    <ng-content></ng-content>\n  </span>\n\n  <mat-error *ngIf=\"errorsTemplate\">\n    <ng-template [ngTemplateOutlet]=\"errorsTemplate\"></ng-template>\n  </mat-error>\n</mat-form-field>\n", styles: [":host{display:block;position:relative}.type-icon{margin-top:20px}.input-field{display:flex;hyphens:auto}.custom-prefix{white-space:nowrap;color:var(--font-color);flex:1 0 auto}\n", ":host .type-icon{display:none}:host.showIcon{display:grid;grid-template-columns:38px 1fr}:host.showIcon .type-icon{display:inline}\n", "input::placeholder,area::placeholder{color:#0006}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i7.ClearButtonComponent, selector: "ax-clear-button", inputs: ["form"] }, { kind: "directive", type: i8.AutofocusDirective, selector: "[axAutofocus]", inputs: ["autofocus"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: UrlEditComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-url-edit', template: "<ax-icon *ngIf=\"icon\" class=\"icon type-icon\" [name]=\"icon\"></ax-icon>\n<mat-form-field\n  class=\"c-input\"\n  [ngClass]=\"{'remove-subtext': !errorsTemplate && !hint, readonly: readonly}\"\n  appearance=\"outline\"\n  [floatLabel]=\"prefix ? 'always' : floatLabel\"\n  [subscriptSizing]=\"subscriptSizing\"\n>\n  <mat-label>{{ label }}</mat-label>\n  <div class=\"input-field\">\n    <span *ngIf=\"prefix\" class=\"custom-prefix\">\n      {{ prefix }}\n    </span>\n    <input\n      matInput\n      axAutofocus\n      [attr.inputmode]=\"inputType === 'number' && !numberConfig ? 'numeric' : undefined\"\n      [attr.pattern]=\"inputType === 'number' && !numberConfig ? '[0-9]*' : undefined\"\n      [name]=\"getName()\"\n      [type]=\"inputType\"\n      [min]=\"numberConfig?.min\"\n      [max]=\"numberConfig?.max\"\n      [step]=\"numberConfig?.step\"\n      [formControl]=\"form\"\n      [autofocus]=\"autofocus\"\n      [placeholder]=\"placeholder\"\n      [autocomplete]=\"\n        matAutocomplete?.options?.length\n          ? 'no-autocomplete'\n          : autocompleteAttr || defaultAutocompleteAttr\n      \"\n      [matAutocomplete]=\"autocomplete\"\n      [matAutocompleteDisabled]=\"!matAutocomplete\"\n      [required]=\"required\"\n      [readonly]=\"readonly\"\n      (focus)=\"focused.emit()\"\n    />\n    <span *ngIf=\"postfix\" class=\"custom-prefix\">\n      {{ postfix }}\n    </span>\n  </div>\n\n  <mat-hint class=\"hint\" align=\"end\">\n    {{ hint }}\n  </mat-hint>\n  <span class=\"suffix\" matSuffix>\n    <ax-clear-button\n      [form]=\"form\"\n      *ngIf=\"hasValue && !form.disabled && !readonly\"\n    ></ax-clear-button>\n    <ng-content></ng-content>\n  </span>\n\n  <mat-error *ngIf=\"errorsTemplate\">\n    <ng-template [ngTemplateOutlet]=\"errorsTemplate\"></ng-template>\n  </mat-error>\n</mat-form-field>\n", styles: [":host{display:block;position:relative}.type-icon{margin-top:20px}.input-field{display:flex;hyphens:auto}.custom-prefix{white-space:nowrap;color:var(--font-color);flex:1 0 auto}\n", ":host .type-icon{display:none}:host.showIcon{display:grid;grid-template-columns:38px 1fr}:host.showIcon .type-icon{display:inline}\n", "input::placeholder,area::placeholder{color:#0006}\n"] }]
        }] });
//# sourceMappingURL=data:application/json;base64, 