@seniorsistemas/angular-components 17.13.1 → 17.14.0

package/bundles/seniorsistemas-angular-components.umd.js

@@ -3209,6 +3209,124 @@
         return CardModule;
     }());
 
+    var CheckboxComponent = /** @class */ (function () {
+        function CheckboxComponent() {
+            this.state = {
+                checked: false,
+                indeterminate: false,
+                children: {},
+            };
+            this._onChange = function () { };
+            this._onTouched = function () { };
+        }
+        CheckboxComponent_1 = CheckboxComponent;
+        CheckboxComponent.prototype.writeValue = function (value) {
+            if (value) {
+                this.state = value;
+            }
+            else {
+                this.state = {
+                    checked: false,
+                    indeterminate: false,
+                    disabled: false,
+                    children: this._initializeChildren(this.data),
+                };
+            }
+        };
+        CheckboxComponent.prototype.registerOnChange = function (onChange) {
+            this._onChange = onChange;
+        };
+        CheckboxComponent.prototype.registerOnTouched = function (onTouched) {
+            this._onTouched = onTouched;
+        };
+        CheckboxComponent.prototype._initializeChildren = function (item) {
+            var _this = this;
+            var childrenState = {};
+            if (item.children) {
+                item.children.forEach(function (child) {
+                    childrenState[child.label] = {
+                        checked: false,
+                        indeterminate: false,
+                        children: _this._initializeChildren(child),
+                    };
+                });
+            }
+            return childrenState;
+        };
+        CheckboxComponent.prototype.updateParent = function () {
+            var _this = this;
+            if (this.data.children && this.data.children.length > 0) {
+                var allChecked = this.data.children.every(function (child) { var _a; return (_a = _this.state.children[child.label]) === null || _a === void 0 ? void 0 : _a.checked; });
+                var someChecked = this.data.children.some(function (child) { var _a, _b; return ((_a = _this.state.children[child.label]) === null || _a === void 0 ? void 0 : _a.checked) || ((_b = _this.state.children[child.label]) === null || _b === void 0 ? void 0 : _b.indeterminate); });
+                this.state.checked = allChecked;
+                this.state.indeterminate = !allChecked && someChecked;
+            }
+            this._onChange(this.state);
+            this._onTouched();
+        };
+        CheckboxComponent.prototype.onCheckboxChange = function () {
+            if (this.state.disabled)
+                return;
+            this.state.checked = !this.state.checked;
+            this.state.indeterminate = false;
+            this._toggleChildrenCheck(this.data, this.state, this.state.checked);
+            this._onChange(this.state);
+            this._onTouched();
+        };
+        CheckboxComponent.prototype._toggleChildrenCheck = function (item, state, checked) {
+            var _this = this;
+            var _a;
+            if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
+                item.children.forEach(function (child) {
+                    if (!state.children[child.label]) {
+                        state.children[child.label] = {
+                            checked: false,
+                            indeterminate: false,
+                            children: _this._initializeChildren(child),
+                        };
+                    }
+                    state.children[child.label].checked = checked;
+                    state.children[child.label].indeterminate = false;
+                    if (child.children) {
+                        _this._toggleChildrenCheck(child, state.children[child.label], checked);
+                    }
+                });
+            }
+        };
+        var CheckboxComponent_1;
+        __decorate([
+            core.Input()
+        ], CheckboxComponent.prototype, "data", void 0);
+        CheckboxComponent = CheckboxComponent_1 = __decorate([
+            core.Component({
+                selector: "s-checkbox",
+                template: "<div class=\"checkbox\">\n    <label>\n        <div\n            class=\"checkbox-wrapper\"\n            [ngClass]=\"{ 'checkbox-wrapper--disabled': state.disabled }\">\n            <input\n                type=\"checkbox\"\n                class=\"checkbox-input\"\n                [disabled]=\"state.disabled\"\n                [ngClass]=\"{\n                    'checkbox-input--checked': state.checked,\n                    'checkbox-input--indeterminate': state.indeterminate\n                }\"\n                (change)=\"onCheckboxChange()\"\n                [attr.aria-checked]=\"state.indeterminate ? 'mixed' : state.checked\"\n                [attr.aria-disabled]=\"state.disabled\"\n                role=\"checkbox\" />\n            {{ data.label }}\n        </div>\n    </label>\n    <div *ngIf=\"data.children && data.children.length\" class=\"checkbox-children\">\n        <s-checkbox\n            *ngFor=\"let child of data.children\"\n            [data]=\"child\"\n            [ngModel]=\"state.children[child.label]\"\n            (ngModelChange)=\"updateParent()\">\n        </s-checkbox>\n    </div>\n</div>\n",
+                providers: [
+                    {
+                        provide: forms.NG_VALUE_ACCESSOR,
+                        useExisting: core.forwardRef(function () { return CheckboxComponent_1; }),
+                        multi: true,
+                    },
+                ],
+                styles: [".checkbox{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:10px;margin-bottom:10px}.checkbox .checkbox-wrapper{-ms-flex-align:center;align-items:center;color:#212533;display:-ms-flexbox;display:flex;font-family:\"Open Sans\" sans-serif;font-size:14px;gap:12px}.checkbox .checkbox-wrapper .checkbox-input{-webkit-appearance:none;appearance:none;background-color:#fff;border:1px solid #c1c1cc;border-radius:4px;cursor:pointer;-ms-flex-negative:0;flex-shrink:0;height:20px;width:20px;position:relative}.checkbox .checkbox-wrapper .checkbox-input--checked{background-color:#428bca;border-color:#428bca}.checkbox .checkbox-wrapper .checkbox-input--checked::after{border:solid #fff;border-width:0 2px 2px 0;content:\"\";height:12px;left:6px;position:absolute;top:2px;transform:rotate(45deg);width:6px}.checkbox .checkbox-wrapper .checkbox-input--indeterminate{background-color:#428bca;border-color:#428bca}.checkbox .checkbox-wrapper .checkbox-input--indeterminate::after{background-color:#fff;content:\"\";height:2px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:10px}.checkbox .checkbox-wrapper:not(.checkbox-wrapper--disabled) .checkbox-input:not(.checkbox-input--checked):hover{background-color:#e5eaea;border-color:#ccc}.checkbox .checkbox-wrapper--disabled{opacity:.5;cursor:auto}.checkbox .checkbox-children{margin-left:20px}"]
+            })
+        ], CheckboxComponent);
+        return CheckboxComponent;
+    }());
+
+    var CheckboxModule = /** @class */ (function () {
+        function CheckboxModule() {
+        }
+        CheckboxModule = __decorate([
+            core.NgModule({
+                imports: [common.CommonModule, forms.FormsModule],
+                declarations: [CheckboxComponent],
+                exports: [CheckboxComponent],
+            })
+        ], CheckboxModule);
+        return CheckboxModule;
+    }());
+
 
     (function (Languages) {
         Languages["TaxCalculation"] = "TaxCalculation";
@@ -5436,6 +5554,7 @@
         FieldType["Binary"] = "Binary";
         FieldType["Blob"] = "Blob";
         FieldType["Boolean"] = "Boolean";
+        FieldType["Checkbox"] = "Checkbox";
         FieldType["Chips"] = "Chips";
         FieldType["CountryPhonePicker"] = "CountryPhonePicker";
         FieldType["Custom"] = "Custom";
@@ -6056,6 +6175,16 @@
         return SliderField;
     }(Field));
 
+    var CheckboxField = /** @class */ (function (_super) {
+        __extends(CheckboxField, _super);
+        function CheckboxField(config) {
+            var _this = _super.call(this, config) || this;
+            _this.data = config.data;
+            return _this;
+        }
+        return CheckboxField;
+    }(Field));
+
     var CountryPhonePickerField = /** @class */ (function (_super) {
         __extends(CountryPhonePickerField, _super);
         function CountryPhonePickerField(config) {
@@ -6140,6 +6269,8 @@
                     return new LookupField(config);
                 case exports.FieldType.Radio:
                     return new RadioButtonField(config);
+                case exports.FieldType.Checkbox:
+                    return new CheckboxField(config);
                 case exports.FieldType.Chips:
                     return new ChipsField(config);
                 case exports.FieldType.CountryPhonePicker:
@@ -11282,6 +11413,136 @@
         return TextFieldComponent;
     }(BaseFieldComponent));
 
+    var CheckboxFieldComponent = /** @class */ (function () {
+        function CheckboxFieldComponent() {
+        }
+        __decorate([
+            core.Input()
+        ], CheckboxFieldComponent.prototype, "field", void 0);
+        __decorate([
+            core.Input()
+        ], CheckboxFieldComponent.prototype, "formControl", void 0);
+        CheckboxFieldComponent = __decorate([
+            core.Component({
+                template: "<s-checkbox [data]=\"field.data\"></s-checkbox>"
+            })
+        ], CheckboxFieldComponent);
+        return CheckboxFieldComponent;
+    }());
+
+    var NumberFieldComponent = /** @class */ (function (_super) {
+        __extends(NumberFieldComponent, _super);
+        function NumberFieldComponent(localeService, elementRef, changeDetectorRef) {
+            var _this = _super.call(this) || this;
+            _this.localeService = localeService;
+            _this.elementRef = elementRef;
+            _this.changeDetectorRef = changeDetectorRef;
+            _this.onInput = new core.EventEmitter();
+            _this.onFocus = new core.EventEmitter();
+            _this.onComplete = new core.EventEmitter();
+            _this.ngUnsubscribe = new rxjs.Subject();
+            return _this;
+        }
+        NumberFieldComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.onLocaleService();
+            this.onFocus.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function (event) {
+                if (_this.field.onFocus)
+                    _this.field.onFocus(event);
+            });
+            this.onInput.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function (event) {
+                if (_this.field.onInput)
+                    _this.field.onInput(event);
+            });
+            this.onComplete.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function (event) {
+                if (_this.field.onComplete)
+                    _this.field.onComplete(event);
+            });
+        };
+        NumberFieldComponent.prototype.ngAfterViewInit = function () {
+            this.setInputRef();
+            this.changeDetectorRef.detectChanges();
+        };
+        NumberFieldComponent.prototype.ngOnDestroy = function () {
+            this.ngUnsubscribe.next();
+            this.ngUnsubscribe.complete();
+        };
+        Object.defineProperty(NumberFieldComponent.prototype, "numberAlignmentOption", {
+            get: function () {
+                return exports.NumberAlignmentOption;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(NumberFieldComponent.prototype, "fieldType", {
+            get: function () {
+                return exports.FieldType;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        NumberFieldComponent.prototype.onLocaleService = function () {
+            var _this = this;
+            this.localeService
+                .getLocale()
+                .pipe(operators.first())
+                .subscribe({
+                next: function () {
+                    var _a, _b, _c;
+                    if (!((_a = _this.field.numberLocaleOptions) === null || _a === void 0 ? void 0 : _a.decimalSeparator)) {
+                        _this.field.numberLocaleOptions = __assign(__assign({}, _this.field.numberLocaleOptions), { decimalSeparator: _this.localeService.getDecimalSeparator() });
+                    }
+                    if (!((_b = _this.field.numberLocaleOptions) === null || _b === void 0 ? void 0 : _b.thousandsSeparator)) {
+                        _this.field.numberLocaleOptions = __assign(__assign({}, _this.field.numberLocaleOptions), { thousandsSeparator: _this.localeService.getGroupingSeparator() });
+                    }
+                    if (!((_c = _this.field.numberLocaleOptions) === null || _c === void 0 ? void 0 : _c.currencySymbol)) {
+                        _this.field.numberLocaleOptions = __assign(__assign({}, _this.field.numberLocaleOptions), { currencySymbol: "R$" });
+                    }
+                },
+                error: function () {
+                    var _a;
+                    return (_this.field.numberLocaleOptions = (_a = _this.field.numberLocaleOptions) !== null && _a !== void 0 ? _a : {
+                        thousandsSeparator: ".",
+                        decimalSeparator: ",",
+                        currencySymbol: "R$",
+                    });
+                },
+            });
+        };
+        NumberFieldComponent.prototype.setInputRef = function () {
+            var input = this.elementRef.nativeElement.querySelector("input");
+            this.inputRef = input;
+        };
+        NumberFieldComponent.ctorParameters = function () { return [
+            { type: LocaleService },
+            { type: core.ElementRef },
+            { type: core.ChangeDetectorRef }
+        ]; };
+        __decorate([
+            core.Input()
+        ], NumberFieldComponent.prototype, "field", void 0);
+        __decorate([
+            core.Input()
+        ], NumberFieldComponent.prototype, "formControl", void 0);
+        __decorate([
+            core.Output()
+        ], NumberFieldComponent.prototype, "onInput", void 0);
+        __decorate([
+            core.Output()
+        ], NumberFieldComponent.prototype, "onFocus", void 0);
+        __decorate([
+            core.Output()
+        ], NumberFieldComponent.prototype, "onComplete", void 0);
+        NumberFieldComponent = __decorate([
+            core.Component({
+                template: "<s-field-label *ngIf=\"inputRef\" [field]=\"field\"\n    [fieldContainerRef]=\"inputRef\"></s-field-label>\n\n<p-inputMask #inputRef\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<ng-template #noMask>\n    <ng-container>\n        <div class=\"ui-inputgroup\">\n            <ng-container *ngIf=\"field.leftAddon\">\n                <span *ngIf=\"field.leftAddon.callback\" class=\"addon-button addon-button--left\">\n                    <s-button\n                        [label]=\"field.leftAddon.label\"\n                        [iconClass]=\"field.leftAddon.icon\"\n                        [priority]=\"field.leftAddon.priority\"\n                        [disabled]=\"isFunction(field.leftAddon.disabled) ? field.leftAddon.disabled() : field.leftAddon.disabled\"\n                        (onClick)=\"field.leftAddon.callback()\">\n                    </s-button>\n                </span>\n                <span *ngIf=\"!field.leftAddon.callback\" 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            <ng-container *ngTemplateOutlet=\"field.type === fieldType.Double && field.alignTo === numberAlignmentOption.LEFT ? localizedNumber : input\"></ng-container>\n\n            <ng-container *ngIf=\"field.rightAddon\">\n                <span *ngIf=\"field.rightAddon.callback\" class=\"addon-button addon-button--right\">\n                    <s-button\n                        [label]=\"field.rightAddon.label\"\n                        [iconClass]=\"field.rightAddon.icon\"\n                        [priority]=\"field.rightAddon.priority\"\n                        [disabled]=\"isFunction(field.rightAddon.disabled) ? field.rightAddon.disabled() : field.rightAddon.disabled\"\n                        (onClick)=\"field.rightAddon.callback()\">\n                    </s-button>\n                </span>\n                <span *ngIf=\"!field.rightAddon.callback\" 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<ng-template #input>\n    <input #inputRef\n        [id]=\"(field.id || field.name)\"\n        type=\"text\"\n        [name]=\"field.name\"\n        sNumberInput\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-template>\n<ng-template #localizedNumber>\n    <input #inputRef\n        [id]=\"(field.id || field.name)\"\n        type=\"text\"\n        [name]=\"field.name\"\n        sLocalizedNumberInput\n        [precision]=\"isFunction(field.precision) ? trigger(field.precision) : field.precision\"\n        [decimalSeparator]=\"field.numberLocaleOptions.decimalSeparator\"\n        [thousandsSeparator]=\"field.numberLocaleOptions.thousandsSeparator\"\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-template>\n",
+                encapsulation: core.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}.addon-button{border:1px solid #c1c1cc}.addon-button s-button .s-button-with-text,.addon-button s-button button{height:100%;min-width:40px}.addon-button--left{border-radius:5px 0 0 5px;border-right:none}.addon-button--left s-button button{border-bottom-right-radius:0;border-top-right-radius:0}.addon-button--right{border-left:none;border-radius:0 5px 5px 0}.addon-button--right s-button button{border-bottom-left-radius:0;border-top-left-radius:0}"]
+            })
+        ], NumberFieldComponent);
+        return NumberFieldComponent;
+    }(BaseFieldComponent));
+
     var ProfilePictureFieldComponent = /** @class */ (function () {
         function ProfilePictureFieldComponent() {
         }
@@ -11388,6 +11649,8 @@
                     return TextFieldComponent;
                 case exports.FieldType.Boolean:
                     return this.field.representedBy === "switch" ? BooleanSwitchFieldComponent : BooleanFieldComponent;
+                case exports.FieldType.Checkbox:
+                    return CheckboxFieldComponent;
                 case exports.FieldType.Chips:
                     return ChipsFieldComponent;
                 case exports.FieldType.CountryPhonePicker:
@@ -11657,119 +11920,6 @@
         return TextFieldModule;
     }());
 
-    var NumberFieldComponent = /** @class */ (function (_super) {
-        __extends(NumberFieldComponent, _super);
-        function NumberFieldComponent(localeService, elementRef, changeDetectorRef) {
-            var _this = _super.call(this) || this;
-            _this.localeService = localeService;
-            _this.elementRef = elementRef;
-            _this.changeDetectorRef = changeDetectorRef;
-            _this.onInput = new core.EventEmitter();
-            _this.onFocus = new core.EventEmitter();
-            _this.onComplete = new core.EventEmitter();
-            _this.ngUnsubscribe = new rxjs.Subject();
-            return _this;
-        }
-        NumberFieldComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.onLocaleService();
-            this.onFocus.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function (event) {
-                if (_this.field.onFocus)
-                    _this.field.onFocus(event);
-            });
-            this.onInput.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function (event) {
-                if (_this.field.onInput)
-                    _this.field.onInput(event);
-            });
-            this.onComplete.pipe(operators.takeUntil(this.ngUnsubscribe)).subscribe(function (event) {
-                if (_this.field.onComplete)
-                    _this.field.onComplete(event);
-            });
-        };
-        NumberFieldComponent.prototype.ngAfterViewInit = function () {
-            this.setInputRef();
-            this.changeDetectorRef.detectChanges();
-        };
-        NumberFieldComponent.prototype.ngOnDestroy = function () {
-            this.ngUnsubscribe.next();
-            this.ngUnsubscribe.complete();
-        };
-        Object.defineProperty(NumberFieldComponent.prototype, "numberAlignmentOption", {
-            get: function () {
-                return exports.NumberAlignmentOption;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(NumberFieldComponent.prototype, "fieldType", {
-            get: function () {
-                return exports.FieldType;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        NumberFieldComponent.prototype.onLocaleService = function () {
-            var _this = this;
-            this.localeService
-                .getLocale()
-                .pipe(operators.first())
-                .subscribe({
-                next: function () {
-                    var _a, _b, _c;
-                    if (!((_a = _this.field.numberLocaleOptions) === null || _a === void 0 ? void 0 : _a.decimalSeparator)) {
-                        _this.field.numberLocaleOptions = __assign(__assign({}, _this.field.numberLocaleOptions), { decimalSeparator: _this.localeService.getDecimalSeparator() });
-                    }
-                    if (!((_b = _this.field.numberLocaleOptions) === null || _b === void 0 ? void 0 : _b.thousandsSeparator)) {
-                        _this.field.numberLocaleOptions = __assign(__assign({}, _this.field.numberLocaleOptions), { thousandsSeparator: _this.localeService.getGroupingSeparator() });
-                    }
-                    if (!((_c = _this.field.numberLocaleOptions) === null || _c === void 0 ? void 0 : _c.currencySymbol)) {
-                        _this.field.numberLocaleOptions = __assign(__assign({}, _this.field.numberLocaleOptions), { currencySymbol: "R$" });
-                    }
-                },
-                error: function () {
-                    var _a;
-                    return (_this.field.numberLocaleOptions = (_a = _this.field.numberLocaleOptions) !== null && _a !== void 0 ? _a : {
-                        thousandsSeparator: ".",
-                        decimalSeparator: ",",
-                        currencySymbol: "R$",
-                    });
-                },
-            });
-        };
-        NumberFieldComponent.prototype.setInputRef = function () {
-            var input = this.elementRef.nativeElement.querySelector("input");
-            this.inputRef = input;
-        };
-        NumberFieldComponent.ctorParameters = function () { return [
-            { type: LocaleService },
-            { type: core.ElementRef },
-            { type: core.ChangeDetectorRef }
-        ]; };
-        __decorate([
-            core.Input()
-        ], NumberFieldComponent.prototype, "field", void 0);
-        __decorate([
-            core.Input()
-        ], NumberFieldComponent.prototype, "formControl", void 0);
-        __decorate([
-            core.Output()
-        ], NumberFieldComponent.prototype, "onInput", void 0);
-        __decorate([
-            core.Output()
-        ], NumberFieldComponent.prototype, "onFocus", void 0);
-        __decorate([
-            core.Output()
-        ], NumberFieldComponent.prototype, "onComplete", void 0);
-        NumberFieldComponent = __decorate([
-            core.Component({
-                template: "<s-field-label *ngIf=\"inputRef\" [field]=\"field\"\n    [fieldContainerRef]=\"inputRef\"></s-field-label>\n\n<p-inputMask #inputRef\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<ng-template #noMask>\n    <ng-container>\n        <div class=\"ui-inputgroup\">\n            <ng-container *ngIf=\"field.leftAddon\">\n                <span *ngIf=\"field.leftAddon.callback\" class=\"addon-button addon-button--left\">\n                    <s-button\n                        [label]=\"field.leftAddon.label\"\n                        [iconClass]=\"field.leftAddon.icon\"\n                        [priority]=\"field.leftAddon.priority\"\n                        [disabled]=\"isFunction(field.leftAddon.disabled) ? field.leftAddon.disabled() : field.leftAddon.disabled\"\n                        (onClick)=\"field.leftAddon.callback()\">\n                    </s-button>\n                </span>\n                <span *ngIf=\"!field.leftAddon.callback\" 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            <ng-container *ngTemplateOutlet=\"field.type === fieldType.Double && field.alignTo === numberAlignmentOption.LEFT ? localizedNumber : input\"></ng-container>\n\n            <ng-container *ngIf=\"field.rightAddon\">\n                <span *ngIf=\"field.rightAddon.callback\" class=\"addon-button addon-button--right\">\n                    <s-button\n                        [label]=\"field.rightAddon.label\"\n                        [iconClass]=\"field.rightAddon.icon\"\n                        [priority]=\"field.rightAddon.priority\"\n                        [disabled]=\"isFunction(field.rightAddon.disabled) ? field.rightAddon.disabled() : field.rightAddon.disabled\"\n                        (onClick)=\"field.rightAddon.callback()\">\n                    </s-button>\n                </span>\n                <span *ngIf=\"!field.rightAddon.callback\" 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<ng-template #input>\n    <input #inputRef\n        [id]=\"(field.id || field.name)\"\n        type=\"text\"\n        [name]=\"field.name\"\n        sNumberInput\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-template>\n<ng-template #localizedNumber>\n    <input #inputRef\n        [id]=\"(field.id || field.name)\"\n        type=\"text\"\n        [name]=\"field.name\"\n        sLocalizedNumberInput\n        [precision]=\"isFunction(field.precision) ? trigger(field.precision) : field.precision\"\n        [decimalSeparator]=\"field.numberLocaleOptions.decimalSeparator\"\n        [thousandsSeparator]=\"field.numberLocaleOptions.thousandsSeparator\"\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-template>\n",
-                encapsulation: core.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}.addon-button{border:1px solid #c1c1cc}.addon-button s-button .s-button-with-text,.addon-button s-button button{height:100%;min-width:40px}.addon-button--left{border-radius:5px 0 0 5px;border-right:none}.addon-button--left s-button button{border-bottom-right-radius:0;border-top-right-radius:0}.addon-button--right{border-left:none;border-radius:0 5px 5px 0}.addon-button--right s-button button{border-bottom-left-radius:0;border-top-left-radius:0}"]
-            })
-        ], NumberFieldComponent);
-        return NumberFieldComponent;
-    }(BaseFieldComponent));
-
     var NumberFieldModule = /** @class */ (function () {
         function NumberFieldModule() {
         }
@@ -12605,6 +12755,19 @@
         return ProfilePictureModule;
     }());
 
+    var CheckboxFieldModule = /** @class */ (function () {
+        function CheckboxFieldModule() {
+        }
+        CheckboxFieldModule = __decorate([
+            core.NgModule({
+                imports: [common.CommonModule, forms.FormsModule, forms.ReactiveFormsModule, CheckboxModule],
+                declarations: [CheckboxFieldComponent],
+                exports: [CheckboxFieldComponent],
+            })
+        ], CheckboxFieldModule);
+        return CheckboxFieldModule;
+    }());
+
     var EditorFieldModule = /** @class */ (function () {
         function EditorFieldModule() {
         }
@@ -12672,6 +12835,7 @@
                     NumberFieldModule,
                     CurrencyFieldModule,
                     BignumberFieldModule,
+                    CheckboxFieldModule,
                     ProfilePictureModule,
                     EditorFieldModule,
                     FieldLabelModule
@@ -19768,6 +19932,8 @@
     exports.CalendarMaskModule = CalendarMaskModule;
     exports.CardComponent = CardComponent;
     exports.CardModule = CardModule;
+    exports.CheckboxComponent = CheckboxComponent;
+    exports.CheckboxModule = CheckboxModule;
     exports.ChipsField = ChipsField;
     exports.CodeEditorModule = CodeEditorModule;
     exports.CollapseLinkComponent = CollapseLinkComponent;
@@ -19943,72 +20109,74 @@
     exports.ɵbo = BignumberFieldModule;
     exports.ɵbp = BignumberInputModule;
     exports.ɵbq = BignumberFieldComponent;
-    exports.ɵbr = ProfilePictureModule;
-    exports.ɵbs = ThumbnailService;
-    exports.ɵbt = StructureModule;
-    exports.ɵbu = HeaderComponent;
-    exports.ɵbv = FooterComponent;
-    exports.ɵbw = ProfilePictureFieldComponent;
-    exports.ɵbx = EditorFieldModule;
-    exports.ɵby = EditorFieldComponent;
-    exports.ɵbz = AutocompleteFieldComponent;
+    exports.ɵbr = CheckboxFieldModule;
+    exports.ɵbs = CheckboxFieldComponent;
+    exports.ɵbt = ProfilePictureModule;
+    exports.ɵbu = ThumbnailService;
+    exports.ɵbv = StructureModule;
+    exports.ɵbw = HeaderComponent;
+    exports.ɵbx = FooterComponent;
+    exports.ɵby = ProfilePictureFieldComponent;
+    exports.ɵbz = EditorFieldModule;
     exports.ɵc = TieredMenuEventService;
-    exports.ɵca = BooleanFieldComponent;
-    exports.ɵcb = BooleanSwitchFieldComponent;
-    exports.ɵcc = CalendarFieldComponent;
-    exports.ɵcd = ChipsFieldComponent;
-    exports.ɵce = CountryPhonePickerFieldComponent;
-    exports.ɵcf = DynamicFieldComponent;
-    exports.ɵcg = DynamicFormDirective;
-    exports.ɵch = FieldsetComponent;
-    exports.ɵci = FileUploadComponent$1;
-    exports.ɵcj = LookupFieldComponent;
-    exports.ɵck = RadioButtonComponent;
-    exports.ɵcl = RowComponent;
-    exports.ɵcm = SectionComponent;
-    exports.ɵcn = SelectFieldComponent;
-    exports.ɵco = SliderFieldComponent;
-    exports.ɵcp = TextAreaFieldComponent;
-    exports.ɵcq = TextAreaIAFieldComponent;
-    exports.ɵcr = IAssistService;
-    exports.ɵct = DecimalField;
-    exports.ɵcu = SideTableComponent;
-    exports.ɵcv = InfiniteScrollModule;
-    exports.ɵcw = InfiniteScrollDirective;
-    exports.ɵcx = IAInsightSidebarComponent;
-    exports.ɵcy = IAInsightCardComponent;
-    exports.ɵcz = IAInsightCardLoaderComponent;
+    exports.ɵca = EditorFieldComponent;
+    exports.ɵcb = AutocompleteFieldComponent;
+    exports.ɵcc = BooleanFieldComponent;
+    exports.ɵcd = BooleanSwitchFieldComponent;
+    exports.ɵce = CalendarFieldComponent;
+    exports.ɵcf = ChipsFieldComponent;
+    exports.ɵcg = CountryPhonePickerFieldComponent;
+    exports.ɵch = DynamicFieldComponent;
+    exports.ɵci = DynamicFormDirective;
+    exports.ɵcj = FieldsetComponent;
+    exports.ɵck = FileUploadComponent$1;
+    exports.ɵcl = LookupFieldComponent;
+    exports.ɵcm = RadioButtonComponent;
+    exports.ɵcn = RowComponent;
+    exports.ɵco = SectionComponent;
+    exports.ɵcp = SelectFieldComponent;
+    exports.ɵcq = SliderFieldComponent;
+    exports.ɵcr = TextAreaFieldComponent;
+    exports.ɵcs = TextAreaIAFieldComponent;
+    exports.ɵct = IAssistService;
+    exports.ɵcv = DecimalField;
+    exports.ɵcw = SideTableComponent;
+    exports.ɵcx = InfiniteScrollModule;
+    exports.ɵcy = InfiniteScrollDirective;
+    exports.ɵcz = IAInsightSidebarComponent;
     exports.ɵd = TieredMenuService;
-    exports.ɵda = InlineEditItemComponent;
-    exports.ɵdb = LocaleService;
-    exports.ɵdc = InlineEditCalendarComponent;
-    exports.ɵdd = InlineEditLookupComponent;
-    exports.ɵde = InlineEditNumberComponent;
-    exports.ɵdf = InlineEditTextComponent;
-    exports.ɵdg = InlineEditTextAreaComponent;
-    exports.ɵdh = InlineEditTextAreaIAComponent;
-    exports.ɵdi = KanbanEventService;
-    exports.ɵdj = KanbanItemComponent;
-    exports.ɵdk = KanbanColumnComponent;
-    exports.ɵdl = KanbanItemDraggingComponent;
-    exports.ɵdm = NumberLocaleOptions;
-    exports.ɵdn = BorderButtonModule;
-    exports.ɵdo = BorderButtonComponent;
-    exports.ɵdp = ProgressBarDeterminateComponent;
-    exports.ɵdq = ProgressBarIndeterminateComponent;
-    exports.ɵdr = SelectButtonItemComponent;
-    exports.ɵds = SlidePanelService;
-    exports.ɵdt = TimelineItemModule;
-    exports.ɵdu = TimelineIconItemComponent;
-    exports.ɵdv = HorizontalTimelineModule;
-    exports.ɵdw = HorizontalTimelineComponent;
-    exports.ɵdx = VerticalTimelineModule;
-    exports.ɵdy = VerticalTimelineComponent;
-    exports.ɵdz = RangeLineComponent;
+    exports.ɵda = IAInsightCardComponent;
+    exports.ɵdb = IAInsightCardLoaderComponent;
+    exports.ɵdc = InlineEditItemComponent;
+    exports.ɵdd = LocaleService;
+    exports.ɵde = InlineEditCalendarComponent;
+    exports.ɵdf = InlineEditLookupComponent;
+    exports.ɵdg = InlineEditNumberComponent;
+    exports.ɵdh = InlineEditTextComponent;
+    exports.ɵdi = InlineEditTextAreaComponent;
+    exports.ɵdj = InlineEditTextAreaIAComponent;
+    exports.ɵdk = KanbanEventService;
+    exports.ɵdl = KanbanItemComponent;
+    exports.ɵdm = KanbanColumnComponent;
+    exports.ɵdn = KanbanItemDraggingComponent;
+    exports.ɵdo = NumberLocaleOptions;
+    exports.ɵdp = BorderButtonModule;
+    exports.ɵdq = BorderButtonComponent;
+    exports.ɵdr = ProgressBarDeterminateComponent;
+    exports.ɵds = ProgressBarIndeterminateComponent;
+    exports.ɵdt = SelectButtonItemComponent;
+    exports.ɵdu = SlidePanelService;
+    exports.ɵdv = TimelineItemModule;
+    exports.ɵdw = TimelineIconItemComponent;
+    exports.ɵdx = HorizontalTimelineModule;
+    exports.ɵdy = HorizontalTimelineComponent;
+    exports.ɵdz = VerticalTimelineModule;
     exports.ɵe = TieredMenuGlobalService;
-    exports.ɵea = CollapseOptionComponent;
-    exports.ɵeb = CollapsedItemsComponent;
-    exports.ɵec = VerticalItemsComponent;
+    exports.ɵea = VerticalTimelineComponent;
+    exports.ɵeb = RangeLineComponent;
+    exports.ɵec = CollapseOptionComponent;
+    exports.ɵed = CollapsedItemsComponent;
+    exports.ɵee = VerticalItemsComponent;
     exports.ɵf = TieredMenuComponent;
     exports.ɵg = TieredMenuNestedComponent;
     exports.ɵh = TieredMenuItemComponent;