import { Component } from '@angular/core';
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/legacy-form-field";
import * as i4 from "@angular/material/legacy-input";
import * as i5 from "@aztrix/icons";
import * as i6 from "@angular/material/legacy-autocomplete";
import * as i7 from "@aztrix/components/clear-button";
import * as i8 from "@aztrix/components/autofocus";
import * as i9 from "@aztrix/components/property-published-button";
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 (value) {
                        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.form.addValidators([this._urlValidator()]);
        }
    }
    _urlValidator() {
        const isValidUrlFn = (control) => {
            const url = control.value;
            if (!url) {
                return null;
            }
            const regex = '^(https?://(www.)?[\\dA-Za-z\\.-]+)\\.([A-Za-z\\.]{2,6})([/\\w \\.-].*)*/?$';
            const matchesRegex = url.match(regex);
            if (!matchesRegex) {
                return { linkInvalid: true };
            }
            return null;
        };
        return isValidUrlFn;
    }
}
UrlEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: UrlEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
UrlEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", 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}\"\n  appearance=\"outline\"\n  [floatLabel]=\"prefix ? 'always' : floatLabel\"\n>\n  <mat-label>\n    <span *ngIf=\"label\">{{ label }}</span>\n  </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 === 'number' && !numberConfig ? 'text' : inputType\"\n      [min]=\"numberConfig ? numberConfig.min : undefined\"\n      [max]=\"numberConfig ? numberConfig.max : undefined\"\n      [step]=\"numberConfig ? numberConfig.step : undefined\"\n      [formControl]=\"form\"\n      [autofocus]=\"autofocus\"\n      [placeholder]=\"placeholder\"\n      [autocomplete]=\"\n        matAutocomplete?.options?.length\n          ? 'no-autocomplete'\n          : autocompleteAttr || defaultAutocompleteAttr\n      \"\n      [matAutocomplete]=\"matAutocomplete\"\n      [matAutocompleteDisabled]=\"!matAutocomplete\"\n      [required]=\"required\"\n      (focus)=\"focused.emit()\"\n    />\n    <span *ngIf=\"postfix\" class=\"custom-prefix\">\n      {{ postfix }}\n    </span>\n  </div>\n\n  <mat-hint\n    [ngClass]=\"{collapsed}\"\n    (click)=\"collapsed = !collapsed\"\n    class=\"hint collapsible\"\n    align=\"end\"\n    #hintElement\n  >\n    <div><ax-icon *ngIf=\"isOverflowing()\" class=\"icon\" name=\"chevron-down\"></ax-icon></div>\n    <span [ngClass]=\"{overflowing: isOverflowing()}\">\n      {{ hint }}\n    </span>\n  </mat-hint>\n  <span class=\"suffix\" matSuffix>\n    <ax-clear-button [form]=\"form\" *ngIf=\"hasValue && !form.disabled\"></ax-clear-button>\n    <ng-content></ng-content>\n  </span>\n\n  <mat-error>\n    <ng-template [ngTemplateOutlet]=\"errorsTemplate\"></ng-template>\n  </mat-error>\n</mat-form-field>\n<ax-property-published-button *ngIf=\"published\"></ax-property-published-button>\n", styles: [":host{display:block;position:relative}.type-icon{margin-top:20px}.input-field{display:flex;-webkit-hyphens:auto;hyphens:auto}.custom-prefix{color:#0006;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"], 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.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLegacyHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatLegacyLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatLegacySuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i5.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "directive", type: i6.MatLegacyAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i7.ClearButtonComponent, selector: "ax-clear-button", inputs: ["form"] }, { kind: "directive", type: i8.AutofocusDirective, selector: "[axAutofocus]", inputs: ["autofocus"] }, { kind: "component", type: i9.PropertyPublishedButtonComponent, selector: "ax-property-published-button" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", 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}\"\n  appearance=\"outline\"\n  [floatLabel]=\"prefix ? 'always' : floatLabel\"\n>\n  <mat-label>\n    <span *ngIf=\"label\">{{ label }}</span>\n  </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 === 'number' && !numberConfig ? 'text' : inputType\"\n      [min]=\"numberConfig ? numberConfig.min : undefined\"\n      [max]=\"numberConfig ? numberConfig.max : undefined\"\n      [step]=\"numberConfig ? numberConfig.step : undefined\"\n      [formControl]=\"form\"\n      [autofocus]=\"autofocus\"\n      [placeholder]=\"placeholder\"\n      [autocomplete]=\"\n        matAutocomplete?.options?.length\n          ? 'no-autocomplete'\n          : autocompleteAttr || defaultAutocompleteAttr\n      \"\n      [matAutocomplete]=\"matAutocomplete\"\n      [matAutocompleteDisabled]=\"!matAutocomplete\"\n      [required]=\"required\"\n      (focus)=\"focused.emit()\"\n    />\n    <span *ngIf=\"postfix\" class=\"custom-prefix\">\n      {{ postfix }}\n    </span>\n  </div>\n\n  <mat-hint\n    [ngClass]=\"{collapsed}\"\n    (click)=\"collapsed = !collapsed\"\n    class=\"hint collapsible\"\n    align=\"end\"\n    #hintElement\n  >\n    <div><ax-icon *ngIf=\"isOverflowing()\" class=\"icon\" name=\"chevron-down\"></ax-icon></div>\n    <span [ngClass]=\"{overflowing: isOverflowing()}\">\n      {{ hint }}\n    </span>\n  </mat-hint>\n  <span class=\"suffix\" matSuffix>\n    <ax-clear-button [form]=\"form\" *ngIf=\"hasValue && !form.disabled\"></ax-clear-button>\n    <ng-content></ng-content>\n  </span>\n\n  <mat-error>\n    <ng-template [ngTemplateOutlet]=\"errorsTemplate\"></ng-template>\n  </mat-error>\n</mat-form-field>\n<ax-property-published-button *ngIf=\"published\"></ax-property-published-button>\n", styles: [":host{display:block;position:relative}.type-icon{margin-top:20px}.input-field{display:flex;-webkit-hyphens:auto;hyphens:auto}.custom-prefix{color:#0006;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"] }]
        }] });
//# sourceMappingURL=data:application/json;base64, 