@osovitny/anatoly 2.14.21 → 2.14.23

package/fesm2020/osovitny-anatoly.mjs

@@ -3890,32 +3890,46 @@ class UrlSlugComponent extends BaseEditComponent {
     constructor() {
         super();
         //Inputs
-        this.title = 'Permalink';
+        this.title = 'Permalink:';
         this.isTitleVisible = true;
+        this.isButtonVisible = true;
+        //Outputs
+        this.generating = new EventEmitter();
     }
     ngOnInit() {
         this.setWatchers();
     }
     setWatchers() {
-        this.formGroup.get(this.watchedControlName).valueChanges.subscribe(val => {
-            this.generateUrlSlug();
-        });
+        if (this.watchedControlName) {
+            this.formGroup.get(this.watchedControlName).valueChanges.subscribe(val => {
+                let text = this.getFormValue(this.watchedControlName);
+                this.generateUrlSlug(text);
+            });
+        }
     }
-    generateUrlSlug() {
-        let name = this.getFormValue(this.watchedControlName);
-        let slugedText = Utils.slugify(name);
-        this.setFormValue(this.controlName, slugedText);
+    generateUrlSlug(text) {
+        let slugedText = Utils.slugify(text);
+        let event = { urlSlug: slugedText };
+        this.generating.emit(event);
+        this.setFormValue(this.controlName, event.urlSlug);
+        this.hrefGo = `${event.urlSlug}`;
+    }
+    onUrlSlugChange() {
+        let text = this.getFormValue(this.controlName);
+        this.generateUrlSlug(text);
     }
 }
 UrlSlugComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: UrlSlugComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-UrlSlugComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: UrlSlugComponent, selector: "anatoly-forms-urlslug", inputs: { title: "title", isTitleVisible: "isTitleVisible", controlName: "controlName", controlTitle: "controlTitle", class: "class", watchedControlName: "watchedControlName", urlPrefix: "urlPrefix" }, usesInheritance: true, ngImport: i0, template: "<div [formGroup]='formGroup'  class=\"{'has-error': isControlInvalid(controlName)} form-group {{class}}\">\r\n  <label *ngIf='isTitleVisible' class='col-form-label'>{{ title }} <strong>{{ urlPrefix }} </strong></label>\r\n  <input [formControlName]='controlName' type='text' placeholder='Type url slug here' class='form-control' />\r\n  <anatoly-item-validation-summary [formGroup]='formGroup'\r\n                                   [formSubmitted]='formSubmitted'\r\n                                   [controlName]='controlName'\r\n                                   [controlTitle]='controlTitle'>\r\n  </anatoly-item-validation-summary>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.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: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NativeElementDirective, selector: "[formControl], [formControlName]" }, { kind: "component", type: ItemValidationSummaryComponent, selector: "anatoly-item-validation-summary", inputs: ["controlName", "controlTitle"] }] });
+UrlSlugComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: UrlSlugComponent, selector: "anatoly-forms-urlslug", inputs: { title: "title", isTitleVisible: "isTitleVisible", isButtonVisible: "isButtonVisible", controlName: "controlName", controlTitle: "controlTitle", class: "class", watchedControlName: "watchedControlName", urlPrefix: "urlPrefix" }, outputs: { generating: "generating" }, usesInheritance: true, ngImport: i0, template: "<div [formGroup]='formGroup'  class=\"d-flex permalink form-group {'has-error': isControlInvalid(controlName)}  {{class}}\">\r\n  <label *ngIf='isTitleVisible' class='col-form-label'> {{ title }} <span> {{ urlPrefix }} </span></label>\r\n  <input [formControlName]='controlName' type='text' placeholder='Type url slug here' class='form-control' (keyup)=onUrlSlugChange()/>\r\n  <a *ngIf=\"isButtonVisible\" href=\"{{urlPrefix}}{{hrefGo}}\" target=\"_blank\" class=\"btn btn-outline-primary\">Go</a>\r\n  <anatoly-item-validation-summary [formGroup]='formGroup'\r\n                                   [formSubmitted]='formSubmitted'\r\n                                   [controlName]='controlName'\r\n                                   [controlTitle]='controlTitle'>\r\n  </anatoly-item-validation-summary>\r\n</div>\r\n\r\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.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: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NativeElementDirective, selector: "[formControl], [formControlName]" }, { kind: "component", type: ItemValidationSummaryComponent, selector: "anatoly-item-validation-summary", inputs: ["controlName", "controlTitle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: UrlSlugComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'anatoly-forms-urlslug', template: "<div [formGroup]='formGroup'  class=\"{'has-error': isControlInvalid(controlName)} form-group {{class}}\">\r\n  <label *ngIf='isTitleVisible' class='col-form-label'>{{ title }} <strong>{{ urlPrefix }} </strong></label>\r\n  <input [formControlName]='controlName' type='text' placeholder='Type url slug here' class='form-control' />\r\n  <anatoly-item-validation-summary [formGroup]='formGroup'\r\n                                   [formSubmitted]='formSubmitted'\r\n                                   [controlName]='controlName'\r\n                                   [controlTitle]='controlTitle'>\r\n  </anatoly-item-validation-summary>\r\n</div>\r\n" }]
+            args: [{ selector: 'anatoly-forms-urlslug', template: "<div [formGroup]='formGroup'  class=\"d-flex permalink form-group {'has-error': isControlInvalid(controlName)}  {{class}}\">\r\n  <label *ngIf='isTitleVisible' class='col-form-label'> {{ title }} <span> {{ urlPrefix }} </span></label>\r\n  <input [formControlName]='controlName' type='text' placeholder='Type url slug here' class='form-control' (keyup)=onUrlSlugChange()/>\r\n  <a *ngIf=\"isButtonVisible\" href=\"{{urlPrefix}}{{hrefGo}}\" target=\"_blank\" class=\"btn btn-outline-primary\">Go</a>\r\n  <anatoly-item-validation-summary [formGroup]='formGroup'\r\n                                   [formSubmitted]='formSubmitted'\r\n                                   [controlName]='controlName'\r\n                                   [controlTitle]='controlTitle'>\r\n  </anatoly-item-validation-summary>\r\n</div>\r\n\r\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { title: [{
                 type: Input
             }], isTitleVisible: [{
                 type: Input
+            }], isButtonVisible: [{
+                type: Input
             }], controlName: [{
                 type: Input
             }], controlTitle: [{
@@ -3926,6 +3940,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                 type: Input
             }], urlPrefix: [{
                 type: Input
+            }], generating: [{
+                type: Output
             }] } });
 
 /*