ngx-render-material-forms 2.5.0 → 2.5.1

package/fesm2020/ngx-render-material-forms.js

@@ -997,6 +997,7 @@ class MaterialButtonComponent extends MaterialComponent {
         this.error = false;
         this.disabled = false;
         this.clicked = false;
+        this.walkmeClass = '';
     }
     get color() {
         if (this.error) {
@@ -1023,6 +1024,12 @@ class MaterialButtonComponent extends MaterialComponent {
         let className = this.instance.component.block ? 'mat-formio-button-block' : '';
         className += this.instance.component.size ? ` mat-formio-button-${this.instance.component.size}` : '';
         className += !this.angularButtonTheme ? ` mat-formio-theme-${this.instance.component.theme}` : '';
+        const attributes = this.instance?.component?.attributes;
+        if (attributes) {
+            const buttonType = attributes.buttonType || '';
+            const programName = attributes.programName || '';
+            this.walkmeClass = `walkme-${buttonType}-${programName}`.toLowerCase();
+        }
         return className;
     }
     onClick(event) {
@@ -1063,10 +1070,10 @@ class MaterialButtonComponent extends MaterialComponent {
     }
 }
 MaterialButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-MaterialButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialButtonComponent, selector: "mat-formio-button", usesInheritance: true, ngImport: i0, template: "<button *ngIf=\"instance && instance.component.label != 'Click to add Products'\"\r\n        [ngClass]=\"buttonClass\"\r\n        type=\"{{ instance.component.action }}\"\r\n        mat-raised-button [color]=\"color\"\r\n        [disabled]=\"disabled\"\r\n        (click)=\"instance.onClick($event)\"\r\n>\r\n\r\n\r\n  <mat-icon *ngIf=\"instance.component.leftIcon\">{{instance.component.leftIcon}}</mat-icon>\r\n  <mat-icon *ngIf=\"done\">done</mat-icon>\r\n  <mat-icon *ngIf=\"error\">close</mat-icon>\r\n  <mat-icon class=\"mat-icon-spin\" *ngIf=\"loading\">autorenew</mat-icon>\r\n  {{ instance.component.label }}\r\n  <mat-icon *ngIf=\"instance.component.rightIcon\">{{instance.component.rightIcon}}</mat-icon>\r\n</button>\r\n", styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host .mat-icon-spin{-webkit-animation-name:spin;animation-name:spin;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}.mat-formio-theme-success{background-color:#63d644!important}.mat-formio-theme-info{background-color:#49d9f4!important}.mat-formio-button-sm{font-size:14px;padding:8px 12px}.mat-formio-button-xs{font-size:14px;padding:4px 6px}.mat-formio-button-md{font-size:15px;padding:8px 12px}.mat-formio-button-lg{font-size:19px;padding:16px 20px}.mat-formio-button-block{display:block;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
+MaterialButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialButtonComponent, selector: "mat-formio-button", usesInheritance: true, ngImport: i0, template: "<button *ngIf=\"instance && instance.component.label != 'Click to add Products'\"\r\n        [ngClass]=\"[buttonClass, walkmeClass]\"\r\n        type=\"{{ instance.component.action }}\"\r\n        mat-raised-button [color]=\"color\"\r\n        [disabled]=\"disabled\"\r\n        (click)=\"instance.onClick($event)\"\r\n>\r\n\r\n\r\n  <mat-icon *ngIf=\"instance.component.leftIcon\">{{instance.component.leftIcon}}</mat-icon>\r\n  <mat-icon *ngIf=\"done\">done</mat-icon>\r\n  <mat-icon *ngIf=\"error\">close</mat-icon>\r\n  <mat-icon class=\"mat-icon-spin\" *ngIf=\"loading\">autorenew</mat-icon>\r\n  {{ instance.component.label }}\r\n  <mat-icon *ngIf=\"instance.component.rightIcon\">{{instance.component.rightIcon}}</mat-icon>\r\n</button>\r\n", styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host .mat-icon-spin{-webkit-animation-name:spin;animation-name:spin;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}.mat-formio-theme-success{background-color:#63d644!important}.mat-formio-theme-info{background-color:#49d9f4!important}.mat-formio-button-sm{font-size:14px;padding:8px 12px}.mat-formio-button-xs{font-size:14px;padding:4px 6px}.mat-formio-button-md{font-size:15px;padding:8px 12px}.mat-formio-button-lg{font-size:19px;padding:16px 20px}.mat-formio-button-block{display:block;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mat-formio-button', template: "<button *ngIf=\"instance && instance.component.label != 'Click to add Products'\"\r\n        [ngClass]=\"buttonClass\"\r\n        type=\"{{ instance.component.action }}\"\r\n        mat-raised-button [color]=\"color\"\r\n        [disabled]=\"disabled\"\r\n        (click)=\"instance.onClick($event)\"\r\n>\r\n\r\n\r\n  <mat-icon *ngIf=\"instance.component.leftIcon\">{{instance.component.leftIcon}}</mat-icon>\r\n  <mat-icon *ngIf=\"done\">done</mat-icon>\r\n  <mat-icon *ngIf=\"error\">close</mat-icon>\r\n  <mat-icon class=\"mat-icon-spin\" *ngIf=\"loading\">autorenew</mat-icon>\r\n  {{ instance.component.label }}\r\n  <mat-icon *ngIf=\"instance.component.rightIcon\">{{instance.component.rightIcon}}</mat-icon>\r\n</button>\r\n", styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host .mat-icon-spin{-webkit-animation-name:spin;animation-name:spin;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}.mat-formio-theme-success{background-color:#63d644!important}.mat-formio-theme-info{background-color:#49d9f4!important}.mat-formio-button-sm{font-size:14px;padding:8px 12px}.mat-formio-button-xs{font-size:14px;padding:4px 6px}.mat-formio-button-md{font-size:15px;padding:8px 12px}.mat-formio-button-lg{font-size:19px;padding:16px 20px}.mat-formio-button-block{display:block;width:100%}\n"] }]
+            args: [{ selector: 'mat-formio-button', template: "<button *ngIf=\"instance && instance.component.label != 'Click to add Products'\"\r\n        [ngClass]=\"[buttonClass, walkmeClass]\"\r\n        type=\"{{ instance.component.action }}\"\r\n        mat-raised-button [color]=\"color\"\r\n        [disabled]=\"disabled\"\r\n        (click)=\"instance.onClick($event)\"\r\n>\r\n\r\n\r\n  <mat-icon *ngIf=\"instance.component.leftIcon\">{{instance.component.leftIcon}}</mat-icon>\r\n  <mat-icon *ngIf=\"done\">done</mat-icon>\r\n  <mat-icon *ngIf=\"error\">close</mat-icon>\r\n  <mat-icon class=\"mat-icon-spin\" *ngIf=\"loading\">autorenew</mat-icon>\r\n  {{ instance.component.label }}\r\n  <mat-icon *ngIf=\"instance.component.rightIcon\">{{instance.component.rightIcon}}</mat-icon>\r\n</button>\r\n", styles: ["@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host .mat-icon-spin{-webkit-animation-name:spin;animation-name:spin;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}.mat-formio-theme-success{background-color:#63d644!important}.mat-formio-theme-info{background-color:#49d9f4!important}.mat-formio-button-sm{font-size:14px;padding:8px 12px}.mat-formio-button-xs{font-size:14px;padding:4px 6px}.mat-formio-button-md{font-size:15px;padding:8px 12px}.mat-formio-button-lg{font-size:19px;padding:16px 20px}.mat-formio-button-block{display:block;width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.MatDialog }]; } });
 ButtonComponent.MaterialComponent = MaterialButtonComponent;