@seniorsistemas/angular-components 16.10.0 → 16.10.2

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/router'), require('primeng/breadcrumb'), require('rxjs'), require('rxjs/operators'), require('primeng/tieredmenu'), require('primeng/tooltip'), require('primeng/dom'), require('primeng/calendar'), require('@angular/animations'), require('@angular/forms'), require('@ngx-translate/core'), require('ngx-mask'), require('@angular/common/http'), require('angular2-hotkeys'), require('bignumber.js'), require('primeng/autocomplete'), require('primeng/dialog'), require('primeng/table'), require('@seniorsistemas/ng2-currency-mask'), require('@seniorsistemas/senior-platform-data'), require('moment'), require('ngx-cookie-service'), require('ng2-currency-mask'), require('primeng/button'), require('primeng/checkbox'), require('primeng/chips'), require('primeng/dropdown'), require('primeng/fieldset'), require('primeng/inputmask'), require('primeng/inputtext'), require('primeng/inputtextarea'), require('primeng/keyfilter'), require('primeng/multiselect'), require('primeng/inputswitch'), require('primeng/panel'), require('primeng/radiobutton'), require('primeng/progressbar'), require('@angular/platform-browser'), require('cropperjs'), require('element-resize-detector'), require('@angular/cdk/a11y'), require('primeng/scrollpanel'), require('primeng/sidebar'), require('primeng/api'), require('primeng/confirmdialog'), require('@codemirror/view'), require('@codemirror/state'), require('@codemirror/lint'), require('@codemirror/language'), require('@lezer/generator'), require('@codemirror/highlight'), require('@codemirror/autocomplete'), require('@codemirror/tooltip'), require('@codemirror/gutter')) :
-    typeof define === 'function' && define.amd ? define('@seniorsistemas/angular-components', ['exports', '@angular/core', '@angular/common', '@angular/router', 'primeng/breadcrumb', 'rxjs', 'rxjs/operators', 'primeng/tieredmenu', 'primeng/tooltip', 'primeng/dom', 'primeng/calendar', '@angular/animations', '@angular/forms', '@ngx-translate/core', 'ngx-mask', '@angular/common/http', 'angular2-hotkeys', 'bignumber.js', 'primeng/autocomplete', 'primeng/dialog', 'primeng/table', '@seniorsistemas/ng2-currency-mask', '@seniorsistemas/senior-platform-data', 'moment', 'ngx-cookie-service', 'ng2-currency-mask', 'primeng/button', 'primeng/checkbox', 'primeng/chips', 'primeng/dropdown', 'primeng/fieldset', 'primeng/inputmask', 'primeng/inputtext', 'primeng/inputtextarea', 'primeng/keyfilter', 'primeng/multiselect', 'primeng/inputswitch', 'primeng/panel', 'primeng/radiobutton', 'primeng/progressbar', '@angular/platform-browser', 'cropperjs', 'element-resize-detector', '@angular/cdk/a11y', 'primeng/scrollpanel', 'primeng/sidebar', 'primeng/api', 'primeng/confirmdialog', '@codemirror/view', '@codemirror/state', '@codemirror/lint', '@codemirror/language', '@lezer/generator', '@codemirror/highlight', '@codemirror/autocomplete', '@codemirror/tooltip', '@codemirror/gutter'], factory) :
-    (global = global || self, factory((global.seniorsistemas = global.seniorsistemas || {}, global.seniorsistemas['angular-components'] = {}), global.ng.core, global.ng.common, global.ng.router, global.breadcrumb, global.rxjs, global.rxjs.operators, global.tieredmenu, global.tooltip, global.dom, global.calendar, global.ng.animations, global.ng.forms, global.core$1, global.ngxMask, global.ng.common.http, global.angular2Hotkeys, global.BigNumber, global.autocomplete$1, global.dialog, global.table, global.ng2CurrencyMask, global.seniorPlatformData, global.moment$4, global.ngxCookieService, global.ng2CurrencyMask$1, global.button, global.checkbox, global.chips, global.dropdown, global.fieldset, global.inputmask, global.inputtext, global.inputtextarea, global.keyfilter, global.multiselect, global.inputswitch, global.panel, global.radiobutton, global.progressbar, global.ng.platformBrowser, global.Cropper, global.elementResizeDetectorMaker_, global.ng.cdk.a11y, global.scrollpanel, global.sidebar, global.api, global.confirmdialog, global.view, global.state, global.lint, global.language, global.generator, global.highlight, global.autocomplete$2, global.tooltip$1, global.gutter));
-}(this, (function (exports, core, common, router, breadcrumb, rxjs, operators, tieredmenu, tooltip, dom, calendar, animations, forms, core$1, ngxMask, http, angular2Hotkeys, BigNumber, autocomplete$1, dialog, table, ng2CurrencyMask, seniorPlatformData, moment$4, ngxCookieService, ng2CurrencyMask$1, button, checkbox, chips, dropdown, fieldset, inputmask, inputtext, inputtextarea, keyfilter, multiselect, inputswitch, panel, radiobutton, progressbar, platformBrowser, Cropper, elementResizeDetectorMaker_, a11y, scrollpanel, sidebar, api, confirmdialog, view, state, lint, language, generator, highlight, autocomplete$2, tooltip$1, gutter) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/router'), require('primeng/breadcrumb'), require('rxjs'), require('rxjs/operators'), require('primeng/tieredmenu'), require('primeng/tooltip'), require('primeng/dom'), require('primeng/calendar'), require('@angular/animations'), require('@angular/forms'), require('@ngx-translate/core'), require('ngx-mask'), require('@angular/common/http'), require('angular2-hotkeys'), require('bignumber.js'), require('primeng/autocomplete'), require('primeng/dialog'), require('primeng/table'), require('@seniorsistemas/ng2-currency-mask'), require('@seniorsistemas/senior-platform-data'), require('moment'), require('ngx-cookie-service'), require('ng2-currency-mask'), require('primeng/button'), require('primeng/checkbox'), require('primeng/chips'), require('primeng/dropdown'), require('primeng/fieldset'), require('primeng/inputmask'), require('primeng/inputtext'), require('primeng/inputtextarea'), require('primeng/keyfilter'), require('primeng/multiselect'), require('primeng/inputswitch'), require('primeng/panel'), require('primeng/radiobutton'), require('primeng/slider'), require('primeng/progressbar'), require('@angular/platform-browser'), require('cropperjs'), require('element-resize-detector'), require('@angular/cdk/a11y'), require('primeng/scrollpanel'), require('primeng/sidebar'), require('primeng/api'), require('primeng/confirmdialog'), require('@codemirror/view'), require('@codemirror/state'), require('@codemirror/lint'), require('@codemirror/language'), require('@lezer/generator'), require('@codemirror/highlight'), require('@codemirror/autocomplete'), require('@codemirror/tooltip'), require('@codemirror/gutter')) :
+    typeof define === 'function' && define.amd ? define('@seniorsistemas/angular-components', ['exports', '@angular/core', '@angular/common', '@angular/router', 'primeng/breadcrumb', 'rxjs', 'rxjs/operators', 'primeng/tieredmenu', 'primeng/tooltip', 'primeng/dom', 'primeng/calendar', '@angular/animations', '@angular/forms', '@ngx-translate/core', 'ngx-mask', '@angular/common/http', 'angular2-hotkeys', 'bignumber.js', 'primeng/autocomplete', 'primeng/dialog', 'primeng/table', '@seniorsistemas/ng2-currency-mask', '@seniorsistemas/senior-platform-data', 'moment', 'ngx-cookie-service', 'ng2-currency-mask', 'primeng/button', 'primeng/checkbox', 'primeng/chips', 'primeng/dropdown', 'primeng/fieldset', 'primeng/inputmask', 'primeng/inputtext', 'primeng/inputtextarea', 'primeng/keyfilter', 'primeng/multiselect', 'primeng/inputswitch', 'primeng/panel', 'primeng/radiobutton', 'primeng/slider', 'primeng/progressbar', '@angular/platform-browser', 'cropperjs', 'element-resize-detector', '@angular/cdk/a11y', 'primeng/scrollpanel', 'primeng/sidebar', 'primeng/api', 'primeng/confirmdialog', '@codemirror/view', '@codemirror/state', '@codemirror/lint', '@codemirror/language', '@lezer/generator', '@codemirror/highlight', '@codemirror/autocomplete', '@codemirror/tooltip', '@codemirror/gutter'], factory) :
+    (global = global || self, factory((global.seniorsistemas = global.seniorsistemas || {}, global.seniorsistemas['angular-components'] = {}), global.ng.core, global.ng.common, global.ng.router, global.breadcrumb, global.rxjs, global.rxjs.operators, global.tieredmenu, global.tooltip, global.dom, global.calendar, global.ng.animations, global.ng.forms, global.core$1, global.ngxMask, global.ng.common.http, global.angular2Hotkeys, global.BigNumber, global.autocomplete$1, global.dialog, global.table, global.ng2CurrencyMask, global.seniorPlatformData, global.moment$4, global.ngxCookieService, global.ng2CurrencyMask$1, global.button, global.checkbox, global.chips, global.dropdown, global.fieldset, global.inputmask, global.inputtext, global.inputtextarea, global.keyfilter, global.multiselect, global.inputswitch, global.panel, global.radiobutton, global.slider, global.progressbar, global.ng.platformBrowser, global.Cropper, global.elementResizeDetectorMaker_, global.ng.cdk.a11y, global.scrollpanel, global.sidebar, global.api, global.confirmdialog, global.view, global.state, global.lint, global.language, global.generator, global.highlight, global.autocomplete$2, global.tooltip$1, global.gutter));
+}(this, (function (exports, core, common, router, breadcrumb, rxjs, operators, tieredmenu, tooltip, dom, calendar, animations, forms, core$1, ngxMask, http, angular2Hotkeys, BigNumber, autocomplete$1, dialog, table, ng2CurrencyMask, seniorPlatformData, moment$4, ngxCookieService, ng2CurrencyMask$1, button, checkbox, chips, dropdown, fieldset, inputmask, inputtext, inputtextarea, keyfilter, multiselect, inputswitch, panel, radiobutton, slider, progressbar, platformBrowser, Cropper, elementResizeDetectorMaker_, a11y, scrollpanel, sidebar, api, confirmdialog, view, state, lint, language, generator, highlight, autocomplete$2, tooltip$1, gutter) { 'use strict';
 
     var BigNumber__default = 'default' in BigNumber ? BigNumber['default'] : BigNumber;
     Cropper = Cropper && Object.prototype.hasOwnProperty.call(Cropper, 'default') ? Cropper['default'] : Cropper;
@@ -1772,7 +1772,7 @@
                         useExisting: CountryPhonePickerComponent_1,
                         multi: true,
                     }],
-                styles: [".country-phone-picker .phone-input{background-color:#fff;border:1px solid #d8d8d8;border-radius:4px;display:-ms-flexbox;display:flex}.country-phone-picker .phone-input .drop{-ms-flex-align:center;align-items:center;cursor:pointer;display:-ms-flexbox;display:flex}.country-phone-picker .phone-input .drop .drop-flag{margin-left:12px}.country-phone-picker .phone-input .drop .drop-icon{font-size:12px;margin:0 8px}.country-phone-picker .phone-input .phone-ddi{margin:8px 0}.country-phone-picker .phone-input input{border:none;-ms-flex-positive:1;flex-grow:1;font-family:\"Open Sans\",sans-serif;font-size:14px;font-weight:400;line-height:150%;margin-left:8px}.country-phone-picker .phone-input input:focus{color:#697882;outline:0}.country-phone-picker .dropdown{background-color:#fff;border-radius:4px;box-shadow:0 4px 5px #00000033;padding:4px 0;position:absolute;margin:2px 0;z-index:999999}.country-phone-picker .dropdown .search{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;padding:8px 12px}.country-phone-picker .dropdown .search .search-field{border:1px solid #d8d8d8;border-radius:4px;-ms-flex-positive:1;flex-grow:1;font-family:\"Open Sans\",sans-serif;font-size:14px;font-weight:400;height:36px;line-height:150%;padding:0 32px 0 8px}.country-phone-picker .dropdown .search .search-icon{color:#333;font-size:12px;position:relative;right:24px}.country-phone-picker .dropdown .search .search-clear{color:#333;cursor:pointer;font-size:1rem}.country-phone-picker .dropdown .select-list{list-style:none;max-height:234px;min-width:360px;max-width:100vw;overflow:scroll;padding:0}.country-phone-picker .dropdown .select-list .select-option{cursor:pointer;display:-ms-flexbox;display:flex;padding:12px;-webkit-user-select:none;-ms-user-select:none;user-select:none}.country-phone-picker .dropdown .select-list .select-option .select-option__flag{margin-right:12px}.country-phone-picker .dropdown .select-list .select-option .select-option__name{margin-right:.5rem;max-width:100%;overflow:hidden;text-overflow:ellipsis}.country-phone-picker .dropdown .select-list .select-option .select-option__ddi{color:#697882;font-size:14px;font-family:\"Open Sans\",sans-serif;font-weight:400;line-height:150%}.country-phone-picker .dropdown .select-list .select-option--focused,.country-phone-picker .dropdown .select-list .select-option:hover{background-color:#e5eaea}"]
+                styles: [".country-phone-picker .phone-input{background-color:#fff;border:1px solid #d8d8d8;border-radius:4px;display:-ms-flexbox;display:flex;line-height:normal}.country-phone-picker .phone-input .drop{-ms-flex-align:center;align-items:center;cursor:pointer;display:-ms-flexbox;display:flex}.country-phone-picker .phone-input .drop .drop-flag{margin-left:12px}.country-phone-picker .phone-input .drop .drop-icon{font-size:12px;margin:0 8px}.country-phone-picker .phone-input .phone-ddi{margin:8px 0}.country-phone-picker .phone-input input{border:none;-ms-flex-positive:1;flex-grow:1;font-family:\"Open Sans\",sans-serif;font-size:14px;font-weight:400;line-height:150%;margin-left:8px}.country-phone-picker .phone-input input:focus{color:#697882;outline:0}.country-phone-picker .dropdown{background-color:#fff;border-radius:4px;box-shadow:0 4px 5px #00000033;padding:4px 0;position:absolute;margin:2px 0;z-index:999999}.country-phone-picker .dropdown .search{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;padding:8px 12px}.country-phone-picker .dropdown .search .search-field{border:1px solid #d8d8d8;border-radius:4px;-ms-flex-positive:1;flex-grow:1;font-family:\"Open Sans\",sans-serif;font-size:14px;font-weight:400;height:36px;line-height:150%;padding:0 32px 0 8px}.country-phone-picker .dropdown .search .search-icon{color:#333;font-size:12px;position:relative;right:24px}.country-phone-picker .dropdown .search .search-clear{color:#333;cursor:pointer;font-size:1rem}.country-phone-picker .dropdown .select-list{list-style:none;max-height:234px;min-width:360px;max-width:100vw;overflow:scroll;padding:0}.country-phone-picker .dropdown .select-list .select-option{cursor:pointer;display:-ms-flexbox;display:flex;padding:12px;-webkit-user-select:none;-ms-user-select:none;user-select:none}.country-phone-picker .dropdown .select-list .select-option .select-option__flag{margin-right:12px}.country-phone-picker .dropdown .select-list .select-option .select-option__name{margin-right:.5rem;max-width:100%;overflow:hidden;text-overflow:ellipsis}.country-phone-picker .dropdown .select-list .select-option .select-option__ddi{color:#697882;font-size:14px;font-family:\"Open Sans\",sans-serif;font-weight:400;line-height:150%}.country-phone-picker .dropdown .select-list .select-option--focused,.country-phone-picker .dropdown .select-list .select-option:hover{background-color:#e5eaea}"]
             })
         ], CountryPhonePickerComponent);
         return CountryPhonePickerComponent;
@@ -1819,6 +1819,7 @@
         FieldType["Number"] = "Number";
         FieldType["Custom"] = "Custom";
         FieldType["Password"] = "Password";
+        FieldType["Slider"] = "Slider";
     })(exports.FieldType || (exports.FieldType = {}));
 
     var FieldSize = /** @class */ (function () {
@@ -2634,11 +2635,19 @@
         return LookupField;
     }(Field));
 
+    var RationButtonOption = /** @class */ (function () {
+        function RationButtonOption(config) {
+            this.label = config.label;
+            this.value = config.value;
+        }
+        return RationButtonOption;
+    }());
     var RadioButtonField = /** @class */ (function (_super) {
         __extends(RadioButtonField, _super);
         function RadioButtonField(config) {
             var _this = _super.call(this, config) || this;
             _this.verticalAlignment = config.verticalAlignment;
+            _this.clearLabel = config.clearLabel;
             _this.options = config.options;
             _this.onBlur = config.onBlur;
             _this.onFocus = config.onFocus;
@@ -2647,13 +2656,6 @@
         }
         return RadioButtonField;
     }(Field));
-    var RationButtonOption = /** @class */ (function () {
-        function RationButtonOption(config) {
-            this.label = config.label;
-            this.value = config.value;
-        }
-        return RationButtonOption;
-    }());
 
     var SelectField = /** @class */ (function (_super) {
         __extends(SelectField, _super);
@@ -2736,6 +2738,29 @@
         return PasswordField;
     }(Field));
 
+    var SliderField = /** @class */ (function (_super) {
+        __extends(SliderField, _super);
+        function SliderField(config) {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            var _this = _super.call(this, config) || this;
+            _this.maxDefault = 100;
+            _this.onChange = config.onChange;
+            _this.onSlideEnd = config.onSlideEnd;
+            _this.range = (_a = config.range) !== null && _a !== void 0 ? _a : false;
+            _this.min = (_b = config.min) !== null && _b !== void 0 ? _b : 0;
+            _this.max = (_c = config.max) !== null && _c !== void 0 ? _c : _this.maxDefault;
+            _this.orientation = (_d = config.orientation) !== null && _d !== void 0 ? _d : "horizontal";
+            _this.step = (_e = config.step) !== null && _e !== void 0 ? _e : 1;
+            _this.animate = (_f = config.animate) !== null && _f !== void 0 ? _f : false;
+            _this.disabled = (_g = config.disabled) !== null && _g !== void 0 ? _g : false;
+            _this.prefix = config.prefix;
+            _this.suffix = config.suffix;
+            _this.rangeSeparator = (_h = config.rangeSeparator) !== null && _h !== void 0 ? _h : ' - ';
+            return _this;
+        }
+        return SliderField;
+    }(Field));
+
     var FormField = /** @class */ (function () {
         function FormField(config) {
             switch (config.type) {
@@ -2776,6 +2801,8 @@
                     return new ChipsField(config);
                 case exports.FieldType.Blob:
                     return new BlobField(config);
+                case exports.FieldType.Slider:
+                    return new SliderField(config);
                 case exports.FieldType.Custom:
                     var CustomFieldClass = config.CustomFieldClass, otherConfigs = __rest(config, ["CustomFieldClass"]);
                     return new CustomFieldClass(otherConfigs);
@@ -3358,6 +3385,7 @@
         DynamicType["Time"] = "Time";
         DynamicType["Number"] = "Number";
         DynamicType["Password"] = "Password";
+        DynamicType["Slider"] = "Slider";
     })(exports.DynamicType || (exports.DynamicType = {}));
 
     var Grid = /** @class */ (function () {
@@ -3443,6 +3471,8 @@
                     return new Row(config);
                 case exports.DynamicType.Section:
                     return new Section(config);
+                case exports.DynamicType.Slider:
+                    return new SliderField(config);
                 case exports.DynamicType.Text:
                     return new TextAreaField(config);
             }
@@ -6540,6 +6570,9 @@
             this.ngUnsubscribe.next();
             this.ngUnsubscribe.complete();
         };
+        RadioButtonComponent.prototype.onClear = function () {
+            this.formControl.reset();
+        };
         __decorate([
             core.Input()
         ], RadioButtonComponent.prototype, "field", void 0);
@@ -6554,7 +6587,9 @@
         ], RadioButtonComponent.prototype, "onFocus", void 0);
         RadioButtonComponent = __decorate([
             core.Component({
-                template: "<ng-container *ngIf=\"field.verticalAlignment;else horizontalAlignment\">\n    <div class=\"ui-g\">\n        <div\n            *ngFor=\"let option of field.options; let i = index\"\n            class=\"ui-g-12\">\n            <ng-container\n                [ngTemplateOutlet]=\"radioButton\"\n                [ngTemplateOutletContext]=\"{option: option, index: i}\">\n            </ng-container>\n        </div>\n    </div>\n</ng-container>\n\n<ng-template #horizontalAlignment>\n    <div class=\"ui-g\">\n        <ng-container\n            *ngFor=\"let option of field.options; let i = index\"\n            [ngTemplateOutlet]=\"radioButton\"\n            [ngTemplateOutletContext]=\"{option: option, index: i}\">\n        </ng-container>\n    </div>\n</ng-template>\n\n<ng-template #radioButton let-option=\"option\" let-i=\"index\">\n    <p-radioButton\n        [name]=\"field.name\"\n        [value]=\"option.value\"\n        [label]=\"option.label\"\n        [formControl]=\"formControl\"\n        [inputId]=\"(field.id || field.name) + '-' + i\"\n        [sTooltip]=\"field.tooltip\"\n        (onClick)=\"onClick.next($event)\"\n        (onFocus)=\"onFocus.next($event)\"\n        (onBlur)=\"field.onBlur ? field.onBlur($event) : null\">\n    </p-radioButton>\n</ng-template>\n"
+                template: "<ng-container *ngIf=\"field.verticalAlignment;else horizontalAlignment\">\n    <div class=\"ui-g\">\n        <div\n            *ngFor=\"let option of field.options; let i = index\"\n            class=\"ui-g-12\">\n            <ng-container\n                [ngTemplateOutlet]=\"radioButton\"\n                [ngTemplateOutletContext]=\"{option: option, index: i}\">\n            </ng-container>\n        </div>\n        <s-button\n            *ngIf=\"field.showClear && !field.required() && !formControl.disabled\"\n            [label]=\"field.clearLabel || 'Clear selection'\"\n            (onClick)=\"onClear()\"\n            priority=\"link\">\n        </s-button>\n    </div>\n</ng-container>\n\n<ng-template #horizontalAlignment>\n    <div class=\"ui-g\">\n        <ng-container\n            *ngFor=\"let option of field.options; let i = index\"\n            [ngTemplateOutlet]=\"radioButton\"\n            [ngTemplateOutletContext]=\"{option: option, index: i}\">\n        </ng-container>\n    </div>\n    <s-button\n        *ngIf=\"field.showClear && !field.required() && !formControl.disabled\"\n        class=\"horizontal-clear-option\"\n        [label]=\"field.clearLabel || 'Clear selection'\"\n        (onClick)=\"onClear()\"\n        priority=\"link\">\n    </s-button>\n</ng-template>\n\n<ng-template #radioButton let-option=\"option\" let-i=\"index\">\n    <p-radioButton\n        [name]=\"field.name\"\n        [value]=\"option.value\"\n        [label]=\"option.label\"\n        [formControl]=\"formControl\"\n        [inputId]=\"(field.id || field.name) + '-' + i\"\n        [sTooltip]=\"field.tooltip\"\n        (onClick)=\"onClick.next($event)\"\n        (onFocus)=\"onFocus.next($event)\"\n        (onBlur)=\"field.onBlur ? field.onBlur($event) : null\">\n    </p-radioButton>\n</ng-template>\n",
+                encapsulation: core.ViewEncapsulation.None,
+                styles: ["\n        s-button.horizontal-clear-option button {\n            width: min-content !important;\n        }\n    "]
             })
         ], RadioButtonComponent);
         return RadioButtonComponent;
@@ -6925,6 +6960,99 @@
         return PasswordFieldComponent;
     }());
 
+    var SliderFieldComponent = /** @class */ (function (_super) {
+        __extends(SliderFieldComponent, _super);
+        function SliderFieldComponent() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.onChange = new core.EventEmitter();
+            _this.onSlideEnd = new core.EventEmitter();
+            _this.ngUnsubscribe = new rxjs.Subject();
+            return _this;
+        }
+        SliderFieldComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            var _a, _b;
+            this.onChange.pipe(operators.takeUntil(this.ngUnsubscribe))
+                .subscribe(function (event) {
+                if (_this.field.onChange) {
+                    _this.field.onChange(event);
+                }
+            });
+            this.onSlideEnd.pipe(operators.takeUntil(this.ngUnsubscribe))
+                .subscribe(function (event) {
+                if (_this.field.onSlideEnd) {
+                    _this.field.onSlideEnd(event);
+                }
+            });
+            var values = ((_a = this.field) === null || _a === void 0 ? void 0 : _a.range) ? [this.field.min, this.field.max] : this.field.min;
+            this.formControl.setValue((_b = this.field.defaultValue) !== null && _b !== void 0 ? _b : values);
+        };
+        SliderFieldComponent.prototype.ngOnDestroy = function () {
+            this.ngUnsubscribe.next();
+            this.ngUnsubscribe.complete();
+        };
+        Object.defineProperty(SliderFieldComponent.prototype, "fieldType", {
+            get: function () {
+                return exports.FieldType;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        SliderFieldComponent.prototype.getRangeLabel = function () {
+            var _a, _b, _c, _d;
+            var _e = __read((_a = this.formControl.value) !== null && _a !== void 0 ? _a : [0, 0], 2), value0 = _e[0], value1 = _e[1];
+            var prefix = (_b = this.field.prefix) !== null && _b !== void 0 ? _b : '';
+            var suffix = (_c = this.field.suffix) !== null && _c !== void 0 ? _c : '';
+            var separator = (_d = this.field.rangeSeparator) !== null && _d !== void 0 ? _d : ' - ';
+            if (!value0 || value0 < this.field.min) {
+                value0 = this.field.min;
+            }
+            if (!value1 || value1 > this.field.max) {
+                value1 = this.field.max;
+            }
+            return "" + prefix + value0 + suffix + separator + prefix + value1 + suffix;
+        };
+        SliderFieldComponent.prototype.getNonRangeLabel = function () {
+            var _a, _b, _c;
+            var value = (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.value;
+            var prefix = (_b = this.field.prefix) !== null && _b !== void 0 ? _b : '';
+            var suffix = (_c = this.field.suffix) !== null && _c !== void 0 ? _c : '';
+            if (!value || value < this.field.min) {
+                value = this.field.min;
+            }
+            if (value > this.field.max) {
+                value = this.field.max;
+            }
+            return "" + prefix + value + suffix;
+        };
+        Object.defineProperty(SliderFieldComponent.prototype, "label", {
+            get: function () {
+                return this.field.range ? this.getRangeLabel() : this.getNonRangeLabel();
+            },
+            enumerable: true,
+            configurable: true
+        });
+        __decorate([
+            core.Input()
+        ], SliderFieldComponent.prototype, "field", void 0);
+        __decorate([
+            core.Input()
+        ], SliderFieldComponent.prototype, "formControl", void 0);
+        __decorate([
+            core.Output()
+        ], SliderFieldComponent.prototype, "onChange", void 0);
+        __decorate([
+            core.Output()
+        ], SliderFieldComponent.prototype, "onSlideEnd", void 0);
+        SliderFieldComponent = __decorate([
+            core.Component({
+                template: "<ng-container>\n    <div class=\"slider-group\">\n        <div class=\"slider-label\">\n            <span>{{label}}</span>\n        </div>\n        <p-slider \n            [id]=\"(field.id || field.name)\"\n            [formControl]=\"formControl\"\n            [range]=\"field.range\"\n            [orientation]=\"field.orientation\"\n            [min]=\"field.min\" \n            [max]=\"field.max\"\n            [step]=\"field.step\"\n            [animate]=\"field.animate\" \n            (onChange)=\"field.onChange ? field.onChange($event) : null\"\n            (onSlideEnd)=\"field.onSlideEnd ? field.onSlideEnd($event) : null\">\n        </p-slider>\n    </div>\n</ng-container>",
+                styles: [".slider-label{margin-bottom:5px;margin-left:-10px}.slider-group{margin-left:9px;margin-right:11px}"]
+            })
+        ], SliderFieldComponent);
+        return SliderFieldComponent;
+    }(BaseFieldComponent));
+
     var DynamicForm = /** @class */ (function () {
         function DynamicForm(_a) {
             var group = _a.group, errorMessages = _a.errorMessages;
@@ -7010,6 +7138,8 @@
                     return PasswordFieldComponent;
                 case exports.FieldType.Blob:
                     return FileUploadComponent$1;
+                case exports.FieldType.Slider:
+                    return SliderFieldComponent;
                 case exports.FieldType.Custom:
                     return this.field.CustomFieldComponentClass;
                 default:
@@ -7624,6 +7754,7 @@
                     MouseEventsModule,
                     inputswitch.InputSwitchModule,
                     PasswordStrengthModule,
+                    slider.SliderModule,
                 ],
                 declarations: [
                     AutocompleteFieldComponent,
@@ -7648,6 +7779,7 @@
                     TextFieldComponent,
                     BooleanSwitchFieldComponent,
                     PasswordFieldComponent,
+                    SliderFieldComponent,
                 ],
                 exports: [DynamicFormComponent, LookupComponent],
                 entryComponents: [
@@ -7668,7 +7800,8 @@
                     TextAreaFieldComponent,
                     TextFieldComponent,
                     PasswordFieldComponent,
-                    BooleanSwitchFieldComponent
+                    BooleanSwitchFieldComponent,
+                    SliderFieldComponent,
                 ],
                 providers: [angular2Hotkeys.HotkeysService]
             })
@@ -9174,10 +9307,17 @@
         function ProductHeaderComponent() {
             this.id = "s-product-header-" + ProductHeaderComponent_1.nextId++;
             this.baseZIndex = 0;
+            this.isHeaderFrame = true;
         }
         ProductHeaderComponent_1 = ProductHeaderComponent;
         ProductHeaderComponent.prototype.ngAfterViewInit = function () {
             this.container.nativeElement.style.zIndex = String(this.baseZIndex + ++dom.DomHandler.zindex);
+            if (this.isHeaderFrame) {
+                this.container.nativeElement.style.borderBottom = "1px solid $default-secondary-color";
+            }
+            else {
+                this.container.nativeElement.style.borderTop = "1px solid $default-secondary-color";
+            }
         };
         var ProductHeaderComponent_1;
         ProductHeaderComponent.nextId = 0;
@@ -9190,14 +9330,17 @@
         __decorate([
             core.Input()
         ], ProductHeaderComponent.prototype, "baseZIndex", void 0);
+        __decorate([
+            core.Input()
+        ], ProductHeaderComponent.prototype, "isHeaderFrame", void 0);
         __decorate([
             core.ViewChild("headerContainer", { static: false })
         ], ProductHeaderComponent.prototype, "container", void 0);
         ProductHeaderComponent = ProductHeaderComponent_1 = __decorate([
             core.Component({
                 selector: "s-product-header",
-                template: "<div [id]=\"id\" class=\"box\">\n    <div #headerContainer class=\"sds-container header\">\n        <h1 class=\"title\">{{header}}</h1>\n        <div class=\"content\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>",
-                styles: [".box{position:relative;width:100%;height:70px}.header{padding-top:15px;padding-bottom:15px;position:fixed;width:100%;top:0;left:0;height:70px;background-color:#fff;border-bottom:1px solid #ddd;box-shadow:0 1px 2px #ddd;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}.title{color:#999;font-weight:400;font-size:16pt;margin-right:15px;min-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.content{display:-ms-flexbox;display:flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}"]
+                template: "<div [id]=\"id\" class=\"box\">\n    <div\n      #headerContainer\n      class=\"sds-container\"\n      [class]=\"isHeaderFrame ? 'header-frame' : 'primary-header'\"\n    >\n      <h1 [class]=\"isHeaderFrame ? 'title' : 'primary-title'\">{{ header }}</h1>\n      <div class=\"content\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n",
+                styles: [".box{position:relative;width:100%;height:70px}.header-frame{padding-top:15px;padding-bottom:15px;width:100%;top:0;left:0;height:70px;background-color:#fff;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;position:fixed}.title{color:#999;font-weight:400;font-size:16pt;margin-right:15px;min-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.content{display:-ms-flexbox;display:flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.primary-header{display:-ms-flexbox;display:flex;width:100%;height:70px;padding:15px 20px;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;border-bottom:1px solid #ddd;background-color:#fff;gap:24px}@media (max-width:768px){.primary-header{width:100%}}.primary-header .primary-title{color:#999;font-weight:400;font-size:16pt;margin-right:15px;min-width:140px;overflow:hidden;text-overflow:ellipsis}"]
             })
         ], ProductHeaderComponent);
         return ProductHeaderComponent;
@@ -12531,31 +12674,32 @@
     exports.ɵbc = TextFieldComponent;
     exports.ɵbd = BooleanSwitchFieldComponent;
     exports.ɵbe = PasswordFieldComponent;
-    exports.ɵbg = DecimalField;
-    exports.ɵbh = StructureModule;
-    exports.ɵbi = HeaderComponent;
-    exports.ɵbj = FooterComponent;
-    exports.ɵbk = NumberLocaleOptions;
-    exports.ɵbl = ThumbnailService;
-    exports.ɵbm = BorderButtonModule;
-    exports.ɵbn = BorderButtonComponent;
-    exports.ɵbo = TimelineItemModule;
-    exports.ɵbp = TimelineIconItemComponent;
-    exports.ɵbq = HorizontalTimelineModule;
-    exports.ɵbr = HorizontalTimelineComponent;
-    exports.ɵbs = VerticalTimelineModule;
-    exports.ɵbt = VerticalTimelineComponent;
-    exports.ɵbu = RangeLineComponent;
-    exports.ɵbv = CollapseOptionComponent;
-    exports.ɵbw = CollapsedItemsComponent;
-    exports.ɵbx = VerticalItemsComponent;
-    exports.ɵby = InfiniteScrollModule;
-    exports.ɵbz = InfiniteScrollDirective;
+    exports.ɵbf = SliderFieldComponent;
+    exports.ɵbh = DecimalField;
+    exports.ɵbi = StructureModule;
+    exports.ɵbj = HeaderComponent;
+    exports.ɵbk = FooterComponent;
+    exports.ɵbl = NumberLocaleOptions;
+    exports.ɵbm = ThumbnailService;
+    exports.ɵbn = BorderButtonModule;
+    exports.ɵbo = BorderButtonComponent;
+    exports.ɵbp = TimelineItemModule;
+    exports.ɵbq = TimelineIconItemComponent;
+    exports.ɵbr = HorizontalTimelineModule;
+    exports.ɵbs = HorizontalTimelineComponent;
+    exports.ɵbt = VerticalTimelineModule;
+    exports.ɵbu = VerticalTimelineComponent;
+    exports.ɵbv = RangeLineComponent;
+    exports.ɵbw = CollapseOptionComponent;
+    exports.ɵbx = CollapsedItemsComponent;
+    exports.ɵby = VerticalItemsComponent;
+    exports.ɵbz = InfiniteScrollModule;
     exports.ɵc = LocalizedBignumberPipe;
-    exports.ɵca = CustomTranslationsModule;
-    exports.ɵcb = CodeEditorComponent;
-    exports.ɵcc = CoreFacade;
-    exports.ɵcd = CodeMirror6Core;
+    exports.ɵca = InfiniteScrollDirective;
+    exports.ɵcb = CustomTranslationsModule;
+    exports.ɵcc = CodeEditorComponent;
+    exports.ɵcd = CoreFacade;
+    exports.ɵce = CodeMirror6Core;
     exports.ɵd = LocalizedBignumberImpurePipe;
     exports.ɵe = TooltipComponent;
     exports.ɵf = TooltipDirective;