@seniorsistemas/angular-components 17.1.0 → 17.1.2

package/fesm5/seniorsistemas-angular-components.js

@@ -1,10 +1,9 @@
 import { __decorate, __spread, __assign, __values, __extends, __rest, __awaiter, __generator, __param, __read } from 'tslib';
-import { EventEmitter, Input, Output, Component, ContentChildren, ɵɵdefineInjectable, Injectable, ElementRef, ApplicationRef, ComponentFactoryResolver, Injector, HostListener, Directive, NgModule, HostBinding, ViewChild, Renderer2, forwardRef, Pipe, ViewEncapsulation, InjectionToken, Inject, TemplateRef, ViewContainerRef, ChangeDetectorRef, Optional, ContentChild } from '@angular/core';
+import { EventEmitter, Input, Output, Component, ContentChildren, ViewChild, HostListener, forwardRef, NgModule, ɵɵdefineInjectable, Injectable, ElementRef, ApplicationRef, ComponentFactoryResolver, Injector, Directive, HostBinding, Renderer2, Pipe, ViewEncapsulation, InjectionToken, Inject, TemplateRef, ViewContainerRef, ChangeDetectorRef, Optional, ContentChild } from '@angular/core';
 import { trigger, transition, style as style$7, animate, state, group, query, animateChild } from '@angular/animations';
 import { CommonModule } from '@angular/common';
-import { FormsModule, ReactiveFormsModule, FormControl, NG_VALUE_ACCESSOR, FormGroup, NG_VALIDATORS, Validators, FormArray, ControlContainer } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, FormControl, FormGroup, NG_VALIDATORS, Validators, FormArray, ControlContainer } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { InputSwitchModule } from 'primeng/inputswitch';
 import { RouterModule, NavigationEnd, PRIMARY_OUTLET, ActivatedRoute, Router } from '@angular/router';
 import { BreadcrumbModule as BreadcrumbModule$1 } from 'primeng/breadcrumb';
 import { Subject, of, from, forkJoin, throwError, ReplaySubject } from 'rxjs';
@@ -142,7 +141,7 @@ var AccordionPanelComponent = /** @class */ (function () {
     AccordionPanelComponent = __decorate([
         Component({
             selector: "s-accordion-panel",
-            template: "<div\n    class=\"accordion-panel\"\n    [ngClass]=\"{\n        'accordion-panel--open': isOpen,\n        'accordion-panel--disabled': disabled\n    }\">\n    <div class=\"header\" (click)=\"onTabClick()\">\n        <div class=\"header__title\">\n            <span class=\"icon\" [ngClass]=\"isOpen ? 'fas fa-minus' : 'fas fa-plus'\"></span>\n            <span\n                *ngIf=\"validationMessage\"\n                class=\"exclamation-icon fas fa-exclamation-circle\"\n                [sTooltip]=\"validationMessage\">\n            </span>\n            <span class=\"title\">{{ header }}</span>\n        </div>\n        <div class=\"header__controls\">\n            <button\n                *ngFor=\"let button of buttons\"\n                class=\"icon-button\"\n                [ngClass]=\"button.icon\"\n                (click)=\"onIconButtonsClick($event, button.onClick)\">\n            </button>\n            <p-inputSwitch\n                *ngIf=\"switch\"\n                class=\"switch\"\n                [disabled]=\"disabled\"\n                [(ngModel)]=\"switchState\"\n                (click)=\"$event.stopPropagation()\"\n                (onChange)=\"switch.onChange($event)\">\n            </p-inputSwitch>\n        </div>\n    </div>\n    <ng-container *ngIf=\"cache; then cacheTemplate else cachelessTemplate\"></ng-container>\n</div>\n\n<ng-template #cacheTemplate>\n    <div\n        class=\"content\"\n        [@cacheAnimation]=\"isOpen\"\n        [@.disabled]=\"isContentAnimationDisabled\"\n        (@cacheAnimation.start)=\"onContentAnimationStart()\"\n        (@cacheAnimation.done)=\"onContentAnimationDone()\">\n        <div class=\"content-container\">\n            <ng-container [ngTemplateOutlet]=\"panelContent\"></ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #cachelessTemplate>\n    <div\n        *ngIf=\"isOpen\"\n        class=\"content\"\n        @cachelessAnimation\n        [@.disabled]=\"isContentAnimationDisabled\"\n        (@cachelessAnimation.start)=\"onContentAnimationStart()\"\n        (@cachelessAnimation.done)=\"onContentAnimationDone()\">\n        <div class=\"content-container\">\n            <ng-container [ngTemplateOutlet]=\"panelContent\"></ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #panelContent>\n    <ng-content></ng-content>\n</ng-template>",
+            template: "<div\n    class=\"accordion-panel\"\n    [ngClass]=\"{\n        'accordion-panel--open': isOpen,\n        'accordion-panel--disabled': disabled\n    }\">\n    <div class=\"header\" (click)=\"onTabClick()\">\n        <div class=\"header__title\">\n            <span class=\"icon\" [ngClass]=\"isOpen ? 'fas fa-minus' : 'fas fa-plus'\"></span>\n            <span\n                *ngIf=\"validationMessage\"\n                class=\"exclamation-icon fas fa-exclamation-circle\"\n                [sTooltip]=\"validationMessage\">\n            </span>\n            <span class=\"title\">{{ header }}</span>\n        </div>\n        <div class=\"header__controls\">\n            <button\n                *ngFor=\"let button of buttons\"\n                class=\"icon-button\"\n                [ngClass]=\"button.icon\"\n                (click)=\"onIconButtonsClick($event, button.onClick)\">\n            </button>\n            <s-switch\n                *ngIf=\"switch\"\n                class=\"switch\"\n                [disabled]=\"disabled\"\n                [(ngModel)]=\"switchState\"\n                (click)=\"$event.stopPropagation()\"\n                (valueChanged)=\"switch.onChange($event)\">\n            </s-switch>\n        </div>\n    </div>\n    <ng-container *ngIf=\"cache; then cacheTemplate else cachelessTemplate\"></ng-container>\n</div>\n\n<ng-template #cacheTemplate>\n    <div\n        class=\"content\"\n        [@cacheAnimation]=\"isOpen\"\n        [@.disabled]=\"isContentAnimationDisabled\"\n        (@cacheAnimation.start)=\"onContentAnimationStart()\"\n        (@cacheAnimation.done)=\"onContentAnimationDone()\">\n        <div class=\"content-container\">\n            <ng-container [ngTemplateOutlet]=\"panelContent\"></ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #cachelessTemplate>\n    <div\n        *ngIf=\"isOpen\"\n        class=\"content\"\n        @cachelessAnimation\n        [@.disabled]=\"isContentAnimationDisabled\"\n        (@cachelessAnimation.start)=\"onContentAnimationStart()\"\n        (@cachelessAnimation.done)=\"onContentAnimationDone()\">\n        <div class=\"content-container\">\n            <ng-container [ngTemplateOutlet]=\"panelContent\"></ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #panelContent>\n    <ng-content></ng-content>\n</ng-template>",
             animations: [
                 trigger("cachelessAnimation", [
                     transition(":enter", [style$7({ height: "0" }), animate("200ms linear", style$7({ height: "*" }))]),
@@ -154,7 +153,7 @@ var AccordionPanelComponent = /** @class */ (function () {
                     transition("* => *", animate("200ms")),
                 ]),
             ],
-            styles: [".accordion-panel{border-bottom:1px solid #c1c1cc}.accordion-panel .header{-ms-flex-align:center;align-items:center;background-color:#fff;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding:16px;-webkit-user-select:none;-ms-user-select:none;user-select:none}.accordion-panel .header .header__title{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.accordion-panel .header .header__title .icon{color:#212533;font-size:1rem;margin-right:12px}.accordion-panel .header .header__title .exclamation-icon{color:#c13018;font-size:1rem;margin-right:12px}.accordion-panel .header .header__title .title{font-family:\"Open Sans\" sans-serif;font-size:.875rem;font-weight:700;line-height:150%;text-transform:uppercase}.accordion-panel .header .header__controls{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;margin-left:16px}.accordion-panel .header .header__controls .icon-button{color:#212533;cursor:pointer;font-size:1rem;margin-left:16px;border:none;background:0 0}.accordion-panel .header .header__controls .switch{padding-left:16px}.accordion-panel .content{background-color:#fff;overflow:hidden}.accordion-panel .content .content-container{margin:20px}.accordion-panel--open .header{background-color:#eeebf2;border-bottom:1px solid #c1c1cc}.accordion-panel--disabled .header{cursor:auto}.accordion-panel--disabled .header .header__title .icon,.accordion-panel--disabled .header .header__title .title{color:#c1c1cc}.accordion-panel--disabled .header .header__controls .icon-button{color:#c1c1cc;cursor:auto}"]
+            styles: [".accordion-panel{border-bottom:1px solid #c1c1cc}.accordion-panel .header{-ms-flex-align:center;align-items:center;background-color:#fff;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding:16px;-webkit-user-select:none;-ms-user-select:none;user-select:none}.accordion-panel .header .header__title{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.accordion-panel .header .header__title .icon{color:#212533;font-size:1rem;margin-right:12px}.accordion-panel .header .header__title .exclamation-icon{color:#c13018;font-size:1rem;margin-right:12px}.accordion-panel .header .header__title .title{font-family:\"Open Sans\" sans-serif;font-size:.875rem;font-weight:700;line-height:150%;text-transform:uppercase}.accordion-panel .header .header__controls{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;margin-left:16px}.accordion-panel .header .header__controls .icon-button{color:#212533;cursor:pointer;font-size:1rem;margin-left:12px;padding:4px;border:none;background:0 0}.accordion-panel .header .header__controls .switch{padding-left:16px}.accordion-panel .content{background-color:#fff;overflow:hidden}.accordion-panel .content .content-container{margin:20px}.accordion-panel--open .header{background-color:#eeebf2;border-bottom:1px solid #c1c1cc}.accordion-panel--disabled .header{cursor:auto}.accordion-panel--disabled .header .header__title .icon,.accordion-panel--disabled .header .header__title .title{color:#c1c1cc}.accordion-panel--disabled .header .header__controls .icon-button{color:#c1c1cc;cursor:auto}"]
         })
     ], AccordionPanelComponent);
     return AccordionPanelComponent;
@@ -236,6 +235,105 @@ var AccordionComponent = /** @class */ (function () {
     return AccordionComponent;
 }());
 
+var SwitchComponent = /** @class */ (function () {
+    function SwitchComponent() {
+        this.readonly = false;
+        this.disabled = false;
+        this.valueChanged = new EventEmitter();
+        this.value = false;
+    }
+    SwitchComponent_1 = SwitchComponent;
+    SwitchComponent.prototype.onFocusIn = function () {
+        var switchElement = this.switchRef.nativeElement;
+        switchElement.classList.add("switch--focus");
+    };
+    SwitchComponent.prototype.onFocusOut = function () {
+        var switchElement = this.switchRef.nativeElement;
+        switchElement.classList.remove("switch--focus");
+    };
+    SwitchComponent.prototype.writeValue = function (value) {
+        if (!this.disabled) {
+            this.value = value;
+        }
+    };
+    SwitchComponent.prototype.registerOnChange = function (onChange) {
+        this._onChange = onChange;
+    };
+    SwitchComponent.prototype.registerOnTouched = function (onTouched) {
+        this._onTouched = onTouched;
+    };
+    SwitchComponent.prototype.setDisabledState = function (disabled) {
+        this.disabled = disabled;
+    };
+    SwitchComponent.prototype.toggleCheck = function () {
+        this.value = !this.value;
+        this.valueChanged.emit(this.value);
+        if (this._onChange) {
+            this._onChange(this.value);
+        }
+    };
+    var SwitchComponent_1;
+    __decorate([
+        Input()
+    ], SwitchComponent.prototype, "readonly", void 0);
+    __decorate([
+        Input()
+    ], SwitchComponent.prototype, "trueLabel", void 0);
+    __decorate([
+        Input()
+    ], SwitchComponent.prototype, "falseLabel", void 0);
+    __decorate([
+        Input()
+    ], SwitchComponent.prototype, "inputId", void 0);
+    __decorate([
+        Input()
+    ], SwitchComponent.prototype, "inputName", void 0);
+    __decorate([
+        Input()
+    ], SwitchComponent.prototype, "disabled", void 0);
+    __decorate([
+        Output()
+    ], SwitchComponent.prototype, "valueChanged", void 0);
+    __decorate([
+        Input()
+    ], SwitchComponent.prototype, "value", void 0);
+    __decorate([
+        ViewChild("switch", { static: true })
+    ], SwitchComponent.prototype, "switchRef", void 0);
+    __decorate([
+        HostListener('focusin')
+    ], SwitchComponent.prototype, "onFocusIn", null);
+    __decorate([
+        HostListener('focusout')
+    ], SwitchComponent.prototype, "onFocusOut", null);
+    SwitchComponent = SwitchComponent_1 = __decorate([
+        Component({
+            selector: 's-switch',
+            template: "<div #switch class=\"switch\" [ngClass]=\"{ 'switch--disabled': disabled }\">\n    <label class=\"switch-toggle\">\n        <input\n            #input\n            [id]=\"inputId\"\n            [name]=\"inputName\"\n            type=\"checkbox\"\n            [checked]=\"value\"\n            [disabled]=\"readonly || disabled\"\n            (change)=\"toggleCheck()\">\n        <span class=\"slider\"></span>\n    </label>\n    <span class=\"label\">\n        {{ value ? trueLabel : falseLabel }}\n    </span>\n</div>",
+            providers: [{
+                    provide: NG_VALUE_ACCESSOR,
+                    useExisting: forwardRef(function () { return SwitchComponent_1; }),
+                    multi: true,
+                }],
+            styles: [".switch{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}.switch .switch-toggle{display:inline-block;height:24px;margin:0;position:relative;width:40px}.switch .switch-toggle input{height:0;opacity:0;width:0}.switch .switch-toggle input:checked+.slider{background-color:#428bca;border-radius:15px}.switch .switch-toggle input:checked+.slider:before{transform:translateX(16px)}.switch .switch-toggle .slider{background-color:#a5a5b2;border-radius:15px;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;transition:.4s}.switch .switch-toggle .slider:before{background-color:#fff;border-radius:50%;bottom:4px;content:\"\";height:16px;left:4px;position:absolute;transition:.4s;width:16px}.switch .label{color:#212533;font-family:\"Open Sans\" sans-serif;font-size:.875rem;font-weight:400;line-height:150%;margin-left:12px}.switch--disabled{opacity:.5}.switch--focus .switch-toggle .slider{box-shadow:0 0 0 2px #428BCA80}"]
+        })
+    ], SwitchComponent);
+    return SwitchComponent;
+}());
+
+var SwitchModule = /** @class */ (function () {
+    function SwitchModule() {
+    }
+    SwitchModule = __decorate([
+        NgModule({
+            imports: [CommonModule],
+            declarations: [SwitchComponent],
+            exports: [SwitchComponent],
+        })
+    ], SwitchModule);
+    return SwitchModule;
+}());
+
 var TooltipPosition;
 (function (TooltipPosition) {
     TooltipPosition["Top"] = "top";
@@ -643,7 +741,7 @@ var AccordionModule = /** @class */ (function () {
                 FormsModule,
                 BrowserAnimationsModule,
                 TooltipModule,
-                InputSwitchModule,
+                SwitchModule,
             ],
             declarations: [
                 AccordionComponent,
@@ -2736,7 +2834,7 @@ var LocaleModule = /** @class */ (function () {
 var BignumberField = /** @class */ (function (_super) {
     __extends(BignumberField, _super);
     function BignumberField(config) {
-        var _a, _b;
+        var _a, _b, _c;
         var _this = _super.call(this, config) || this;
         _this.allowNegative = (_a = config.allowNegative) !== null && _a !== void 0 ? _a : true;
         _this.numberLocaleOptions = config.numberLocaleOptions || new NumberLocaleOptions();
@@ -2751,6 +2849,7 @@ var BignumberField = /** @class */ (function (_super) {
         _this.onFocus = config.onFocus;
         _this.onComplete = config.onComplete;
         _this.onInput = config.onInput;
+        _this.autoClear = (_c = config.autoClear) !== null && _c !== void 0 ? _c : true;
         return _this;
     }
     return BignumberField;
@@ -6160,6 +6259,7 @@ var TablePagingComponent = /** @class */ (function () {
     function TablePagingComponent(translate, hostProjectConfigs) {
         this.translate = translate;
         this.hostProjectConfigs = hostProjectConfigs;
+        this.exportable = true;
         this.enableExportSelectedRecords = true;
     }
     TablePagingComponent.prototype.ngOnChanges = function (changes) {
@@ -6361,6 +6461,9 @@ var TablePagingComponent = /** @class */ (function () {
     __decorate([
         Input()
     ], TablePagingComponent.prototype, "table", void 0);
+    __decorate([
+        Input()
+    ], TablePagingComponent.prototype, "exportable", void 0);
     __decorate([
         Input()
     ], TablePagingComponent.prototype, "enableExportSelectedRecords", void 0);
@@ -6381,7 +6484,7 @@ var TablePagingComponent = /** @class */ (function () {
     ], TablePagingComponent.prototype, "totalRecordsText", void 0);
     TablePagingComponent = __decorate([
         Component({
-            template: "<div class=\"paging-container\">\n    <span class=\"total-records\">\n        {{totalRecordsText}}\n    </span>\n    <s-button class=\"export-button\" \n        priority=\"default\" \n        iconClass=\"fa fa-fw fa-file-export\" \n        [disabled]=\"false\" \n        [auxiliary]=\"true\" \n        [tooltip]=\"getTooltipText()\" \n        [model]=\"getActions()\"></s-button>\n</div>\n",
+            template: "<div class=\"paging-container\">\n    <span class=\"total-records\">\n        {{totalRecordsText}}\n    </span>\n    <s-button\n        *ngIf=\"exportable\"\n        class=\"export-button\" \n        priority=\"default\" \n        iconClass=\"fa fa-fw fa-file-export\" \n        [disabled]=\"false\" \n        [auxiliary]=\"true\" \n        [tooltip]=\"getTooltipText()\" \n        [model]=\"getActions()\">\n    </s-button>\n</div>\n",
             selector: "s-table-paging",
             styles: [".paging-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.export-button{margin-left:6px}"]
         }),
@@ -6493,7 +6596,8 @@ var ChipsFieldComponent = /** @class */ (function () {
     ], ChipsFieldComponent.prototype, "formControl", void 0);
     ChipsFieldComponent = __decorate([
         Component({
-            template: "<p-chips\n    *ngIf=\"field.keyFilter\"\n    [inputId]=\"(field.id || field.name)\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"field.placeholder\"\n    [allowDuplicate]=\"false\"\n    [addOnTab]=\"true\"\n    [addOnBlur]=\"true\"\n    (onAdd)=\"field.onAdd ? field.onAdd($event) : null\"\n    (onRemove)=\"field.onRemove ? field.onRemove($event) : null\"\n    (onChipClick)=\"field.onChipClick ? field.onChipClick($event) : null\"\n    (onFocus)=\"field.onFocus ? field.onFocus($event) : null\"\n    (onBlur)=\"field.onBlur ? field.onBlur($event) : null\"\n    [pKeyFilter]=\"field.keyFilter\">\n</p-chips>\n\n<p-chips\n    *ngIf=\"!field.keyFilter\"\n    [inputId]=\"(field.id || field.name)\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"field.placeholder\"\n    [allowDuplicate]=\"false\"\n    [addOnTab]=\"true\"\n    [addOnBlur]=\"true\"\n    (onAdd)=\"field.onAdd ? field.onAdd($event) : null\"\n    (onRemove)=\"field.onRemove ? field.onRemove($event) : null\"\n    (onChipClick)=\"field.onChipClick ? field.onChipClick($event) : null\"\n    (onFocus)=\"field.onFocus ? field.onFocus($event) : null\"\n    (onBlur)=\"field.onBlur ? field.onBlur($event) : null\">\n</p-chips>\n"
+            template: "<p-chips\n    *ngIf=\"field.keyFilter\"\n    [inputId]=\"(field.id || field.name)\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"field.placeholder\"\n    [allowDuplicate]=\"false\"\n    [addOnTab]=\"true\"\n    [addOnBlur]=\"true\"\n    (onAdd)=\"field.onAdd ? field.onAdd($event) : null\"\n    (onRemove)=\"field.onRemove ? field.onRemove($event) : null\"\n    (onChipClick)=\"field.onChipClick ? field.onChipClick($event) : null\"\n    (onFocus)=\"field.onFocus ? field.onFocus($event) : null\"\n    (onBlur)=\"field.onBlur ? field.onBlur($event) : null\"\n    [pKeyFilter]=\"field.keyFilter\">\n    <ng-template let-item pTemplate=\"item\">\n        <span\n            class=\"chip-content\"\n            [sTooltip]=\"item\">\n            {{ item }}\n        </span>\n    </ng-template>\n</p-chips>\n\n<p-chips\n    *ngIf=\"!field.keyFilter\"\n    [inputId]=\"(field.id || field.name)\"\n    [formControl]=\"formControl\"\n    [placeholder]=\"field.placeholder\"\n    [allowDuplicate]=\"false\"\n    [addOnTab]=\"true\"\n    [addOnBlur]=\"true\"\n    (onAdd)=\"field.onAdd ? field.onAdd($event) : null\"\n    (onRemove)=\"field.onRemove ? field.onRemove($event) : null\"\n    (onChipClick)=\"field.onChipClick ? field.onChipClick($event) : null\"\n    (onFocus)=\"field.onFocus ? field.onFocus($event) : null\"\n    (onBlur)=\"field.onBlur ? field.onBlur($event) : null\">\n    <ng-template let-item pTemplate=\"item\">\n        <span\n            class=\"chip-content\"\n            [sTooltip]=\"item\">\n            {{ item }}\n        </span>\n    </ng-template>\n</p-chips>\n",
+            styles: [".chip-content{display:block;padding-right:1rem}"]
         })
     ], ChipsFieldComponent);
     return ChipsFieldComponent;
@@ -6949,7 +7053,7 @@ var BignumberFieldComponent = /** @class */ (function (_super) {
     ], BignumberFieldComponent.prototype, "onComplete", void 0);
     BignumberFieldComponent = __decorate([
         Component({
-            template: "<p-inputMask\n    *ngIf=\"field.mask; else noMask\"\n    type=\"text\"\n    [inputId]=\"(field.id || field.name)\"\n    [name]=\"field.name\"\n    [mask]=\"isFunction(field.mask) ? field.mask() : field.mask\"\n    [placeholder]=\"field.placeholder\"\n    slotChar=\"_\"\n    [sTooltip]=\"field.tooltip\"\n    tooltipPosition=\"top\"\n    [showDelay]=\"500\"\n    styleClass=\"mousetrap\"\n    (onBlur)=\"field.onBlur ? field.onBlur($event) : null\"\n    (onFocus)=\"onFocus.next($event)\"\n    (onComplete)=\"onComplete.next($event)\"\n    (onInput)=\"onInput.next($event)\"\n    [formControl]=\"formControl\">\n</p-inputMask>\n\n<ng-template #noMask>\n    <ng-container>\n        <div class=\"ui-inputgroup\">\n            <ng-container *ngIf=\"field.leftAddon\">\n                <span class=\"ui-inputgroup-addon\">\n                    <span *ngIf=\"field.leftAddon.label\">{{field.leftAddon.label}}</span>\n                    <span *ngIf=\"!field.leftAddon.label\" [ngClass]=\"field.leftAddon.icon\"></span>\n                </span>\n            </ng-container>\n\n            <input\n                [id]=\"(field.id || field.name)\"\n                type=\"text\"\n                [name]=\"field.name\"\n                sBignumberInput\n                [allowNegative]=\"field.allowNegative\"\n                [precision]=\"isFunction(field.precision) ? trigger(field.precision) : field.precision\"\n                [scale]=\"isFunction(field.scale) ? trigger(field.scale) : field.scale\"\n                [decimalSeparator]=\"field.numberLocaleOptions.decimalSeparator\"\n                [thousandsSeparator]=\"field.numberLocaleOptions.thousandsSeparator\"\n                [alignTo]=\"field.alignTo\"\n                [sTooltip]=\"field.tooltip\"\n                tooltipPosition=\"top\"\n                [placeholder]=\"field.placeholder\"\n                [showDelay]=\"500\"\n                pInputText\n                [autocomplete]=\"field.browserAutocomplete ? 'on' : 'off'\"\n                [ngClass]=\"'mousetrap'\"\n                (blur)=\"field.onBlur ? field.onBlur($event) : null\"\n                (focus)=\"onFocus.next($event)\"\n                [formControl]=\"formControl\" />\n            <ng-container *ngIf=\"field.rightAddon\">\n                <span class=\"ui-inputgroup-addon\">\n                    <span *ngIf=\"field.rightAddon.label\">{{field.rightAddon.label}}</span>\n                    <span *ngIf=\"!field.rightAddon.label\" [ngClass]=\"field.rightAddon.icon\"></span>\n                </span>\n            </ng-container>\n        </div>\n    </ng-container>\n</ng-template>",
+            template: "<p-inputMask\n    *ngIf=\"field.mask; else noMask\"\n    type=\"text\"\n    [inputId]=\"(field.id || field.name)\"\n    [name]=\"field.name\"\n    [mask]=\"isFunction(field.mask) ? field.mask() : field.mask\"\n    [placeholder]=\"field.placeholder\"\n    slotChar=\"_\"\n    [sTooltip]=\"field.tooltip\"\n    tooltipPosition=\"top\"\n    [showDelay]=\"500\"\n    styleClass=\"mousetrap\"\n    (onBlur)=\"field.onBlur ? field.onBlur($event) : null\"\n    (onFocus)=\"onFocus.next($event)\"\n    (onComplete)=\"onComplete.next($event)\"\n    (onInput)=\"onInput.next($event)\"\n    [formControl]=\"formControl\"\n    [autoClear]=\"field.autoClear\">\n</p-inputMask>\n\n<ng-template #noMask>\n    <ng-container>\n        <div class=\"ui-inputgroup\">\n            <ng-container *ngIf=\"field.leftAddon\">\n                <span class=\"ui-inputgroup-addon\">\n                    <span *ngIf=\"field.leftAddon.label\">{{field.leftAddon.label}}</span>\n                    <span *ngIf=\"!field.leftAddon.label\" [ngClass]=\"field.leftAddon.icon\"></span>\n                </span>\n            </ng-container>\n\n            <input\n                [id]=\"(field.id || field.name)\"\n                type=\"text\"\n                [name]=\"field.name\"\n                sBignumberInput\n                [allowNegative]=\"field.allowNegative\"\n                [precision]=\"isFunction(field.precision) ? trigger(field.precision) : field.precision\"\n                [scale]=\"isFunction(field.scale) ? trigger(field.scale) : field.scale\"\n                [decimalSeparator]=\"field.numberLocaleOptions.decimalSeparator\"\n                [thousandsSeparator]=\"field.numberLocaleOptions.thousandsSeparator\"\n                [alignTo]=\"field.alignTo\"\n                [sTooltip]=\"field.tooltip\"\n                tooltipPosition=\"top\"\n                [placeholder]=\"field.placeholder\"\n                [showDelay]=\"500\"\n                pInputText\n                [autocomplete]=\"field.browserAutocomplete ? 'on' : 'off'\"\n                [ngClass]=\"'mousetrap'\"\n                (blur)=\"field.onBlur ? field.onBlur($event) : null\"\n                (focus)=\"onFocus.next($event)\"\n                [formControl]=\"formControl\" />\n            <ng-container *ngIf=\"field.rightAddon\">\n                <span class=\"ui-inputgroup-addon\">\n                    <span *ngIf=\"field.rightAddon.label\">{{field.rightAddon.label}}</span>\n                    <span *ngIf=\"!field.rightAddon.label\" [ngClass]=\"field.rightAddon.icon\"></span>\n                </span>\n            </ng-container>\n        </div>\n    </ng-container>\n</ng-template>\n",
             encapsulation: ViewEncapsulation.None,
             styles: ["s-number-field.ng-dirty.ng-invalid .ui-inputtext{border-color:#c13018}s-number-field.ng-dirty.ng-invalid .ui-inputtext:hover{border-color:#e44328}"]
         })
@@ -6968,7 +7072,7 @@ var BooleanSwitchFieldComponent = /** @class */ (function () {
     ], BooleanSwitchFieldComponent.prototype, "formControl", void 0);
     BooleanSwitchFieldComponent = __decorate([
         Component({
-            template: "<div class=\"ui-grid ui-grid-responsive ui-grid-pad ui-fluid\">\n    <div class=\"ui-grid-row\">\n        <div class=\"i-grid-col-1\">\n            <p-inputSwitch [id]=\"(field.id || field.name)\" [name]=\"field.name\" [formControl]=\"formControl\"\n                [sTooltip]=\"field.tooltip\" tooltipPosition=\"top\"\n                (onChange)=\"field.onChange ? field.onChange($event) : null\">\n            </p-inputSwitch>\n        </div>\n        <div class=\"i-grid-col-1\" *ngIf=\"field.optionsLabel\">\n            <ng-container *ngIf=\"formControl.value; else caseFalse\">\n                <span>{{ field.optionsLabel.true }}</span>\n            </ng-container>\n            <ng-template #caseFalse>\n                <span>{{ field.optionsLabel.false }}</span>\n            </ng-template>\n        </div>\n    </div>\n</div>"
+            template: "<div class=\"ui-grid ui-grid-responsive ui-grid-pad ui-fluid\">\n    <div class=\"ui-grid-row\">\n        <div class=\"i-grid-col-1\">\n            <s-switch\n                [id]=\"(field.id || field.name)\"\n                [inputName]=\"field.name\"\n                [formControl]=\"formControl\"\n                [sTooltip]=\"field.tooltip\"\n                tooltipPosition=\"top\"\n                (valueChanged)=\"field.onChange ? field.onChange($event) : null\">\n            </s-switch>\n        </div>\n        <div class=\"i-grid-col-1\" *ngIf=\"field.optionsLabel\">\n            <ng-container *ngIf=\"formControl.value; else caseFalse\">\n                <span>{{ field.optionsLabel.true }}</span>\n            </ng-container>\n            <ng-template #caseFalse>\n                <span>{{ field.optionsLabel.false }}</span>\n            </ng-template>\n        </div>\n    </div>\n</div>"
         })
     ], BooleanSwitchFieldComponent);
     return BooleanSwitchFieldComponent;
@@ -7826,7 +7930,7 @@ var DynamicFormModule = /** @class */ (function () {
                 MaskFormatterModule,
                 HotkeyModule.forRoot(),
                 MouseEventsModule,
-                InputSwitchModule,
+                SwitchModule,
                 PasswordStrengthModule,
                 SliderModule,
             ],
@@ -14256,102 +14360,6 @@ var SplitButtonModule = /** @class */ (function () {
     return SplitButtonModule;
 }());
 
-var SwitchComponent = /** @class */ (function () {
-    function SwitchComponent() {
-        this.readonly = false;
-        this.disabled = false;
-        this.valueChanged = new EventEmitter();
-        this.value = false;
-    }
-    SwitchComponent_1 = SwitchComponent;
-    SwitchComponent.prototype.onFocusIn = function () {
-        var switchElement = this.switchRef.nativeElement;
-        switchElement.classList.add("switch--focus");
-    };
-    SwitchComponent.prototype.onFocusOut = function () {
-        var switchElement = this.switchRef.nativeElement;
-        switchElement.classList.remove("switch--focus");
-    };
-    SwitchComponent.prototype.writeValue = function (value) {
-        if (!this.disabled) {
-            this.value = value;
-        }
-    };
-    SwitchComponent.prototype.registerOnChange = function (onChange) {
-        this._onChange = onChange;
-    };
-    SwitchComponent.prototype.registerOnTouched = function (onTouched) {
-        this._onTouched = onTouched;
-    };
-    SwitchComponent.prototype.setDisabledState = function (disabled) {
-        this.disabled = disabled;
-    };
-    SwitchComponent.prototype.toggleCheck = function () {
-        this.value = !this.value;
-        this.valueChanged.emit(this.value);
-        if (this._onChange) {
-            this._onChange(this.value);
-        }
-    };
-    var SwitchComponent_1;
-    __decorate([
-        Input()
-    ], SwitchComponent.prototype, "readonly", void 0);
-    __decorate([
-        Input()
-    ], SwitchComponent.prototype, "trueLabel", void 0);
-    __decorate([
-        Input()
-    ], SwitchComponent.prototype, "falseLabel", void 0);
-    __decorate([
-        Input()
-    ], SwitchComponent.prototype, "inputId", void 0);
-    __decorate([
-        Input()
-    ], SwitchComponent.prototype, "disabled", void 0);
-    __decorate([
-        Output()
-    ], SwitchComponent.prototype, "valueChanged", void 0);
-    __decorate([
-        Input()
-    ], SwitchComponent.prototype, "value", void 0);
-    __decorate([
-        ViewChild("switch", { static: true })
-    ], SwitchComponent.prototype, "switchRef", void 0);
-    __decorate([
-        HostListener('focusin')
-    ], SwitchComponent.prototype, "onFocusIn", null);
-    __decorate([
-        HostListener('focusout')
-    ], SwitchComponent.prototype, "onFocusOut", null);
-    SwitchComponent = SwitchComponent_1 = __decorate([
-        Component({
-            selector: 's-switch',
-            template: "<div #switch class=\"switch\" [ngClass]=\"{ 'switch--disabled': disabled }\">\n    <label class=\"switch-toggle\">\n        <input\n            #input\n            [id]=\"inputId\"\n            type=\"checkbox\"\n            [checked]=\"value\"\n            [disabled]=\"readonly || disabled\"\n            (change)=\"toggleCheck()\">\n        <span class=\"slider\"></span>\n    </label>\n    <span class=\"label\">\n        {{ value ? trueLabel : falseLabel }}\n    </span>\n</div>",
-            providers: [{
-                    provide: NG_VALUE_ACCESSOR,
-                    useExisting: forwardRef(function () { return SwitchComponent_1; }),
-                    multi: true,
-                }],
-            styles: [".switch{display:-ms-inline-flexbox;display:inline-flex}.switch .switch-toggle{display:inline-block;height:24px;position:relative;width:40px}.switch .switch-toggle input{height:0;opacity:0;width:0}.switch .switch-toggle input:checked+.slider{background-color:#428bca;border-radius:15px}.switch .switch-toggle input:checked+.slider:before{transform:translateX(16px)}.switch .switch-toggle .slider{background-color:#a5a5b2;border-radius:15px;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;transition:.4s}.switch .switch-toggle .slider:before{background-color:#fff;border-radius:50%;bottom:4px;content:\"\";height:16px;left:4px;position:absolute;transition:.4s;width:16px}.switch .label{color:#212533;font-family:\"Open Sans\" sans-serif;font-size:.875rem;font-weight:400;line-height:150%;margin-left:12px}.switch--disabled{opacity:.5}.switch--focus .switch-toggle .slider{box-shadow:0 0 0 2px #428BCA80}"]
-        })
-    ], SwitchComponent);
-    return SwitchComponent;
-}());
-
-var SwitchModule = /** @class */ (function () {
-    function SwitchModule() {
-    }
-    SwitchModule = __decorate([
-        NgModule({
-            imports: [CommonModule],
-            declarations: [SwitchComponent],
-            exports: [SwitchComponent],
-        })
-    ], SwitchModule);
-    return SwitchModule;
-}());
-
 var PanelComponent = /** @class */ (function () {
     function PanelComponent() {
         this.toggleable = true;