@seniorsistemas/angular-components 17.19.3 → 17.21.0

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

@@ -209,6 +209,8 @@
         function AccordionPanelComponent() {
             this.disabled = false;
             this.cache = false;
+            this.validationMessageIcon = 'fas fa-exclamation-circle';
+            this.validationMessageIconColor = 'Red';
             this.panelOpened = new core.EventEmitter();
             this.panelClosed = new core.EventEmitter();
             this.isAnimating = false;
@@ -290,6 +292,12 @@
         __decorate([
             core.Input()
         ], AccordionPanelComponent.prototype, "cache", void 0);
+        __decorate([
+            core.Input()
+        ], AccordionPanelComponent.prototype, "validationMessageIcon", void 0);
+        __decorate([
+            core.Input()
+        ], AccordionPanelComponent.prototype, "validationMessageIconColor", void 0);
         __decorate([
             core.Output()
         ], AccordionPanelComponent.prototype, "panelOpened", void 0);
@@ -299,7 +307,7 @@
         AccordionPanelComponent = __decorate([
             core.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            <s-switch\n                *ngIf=\"switchControl\"\n                class=\"switch\"\n                [formControl]=\"switchControl\"\n                (click)=\"$event.stopPropagation()\">\n            </s-switch>\n            <s-switch\n                *ngIf=\"!switchControl && switch\"\n                class=\"switch\"\n                [disabled]=\"disabled\"\n                [(ngModel)]=\"switch.state\"\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>",
+                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\"\n                [class]=\"validationMessageIcon\"\n                [class.exclamation-icon-red]=\"validationMessageIconColor === 'Red'\"\n                [class.exclamation-icon-orange]=\"validationMessageIconColor === 'Orange'\"\n                [class.exclamation-icon-yellow]=\"validationMessageIconColor === 'Yellow'\"\n                [class.exclamation-icon-green]=\"validationMessageIconColor === 'Green'\"\n                [class.exclamation-icon-blue]=\"validationMessageIconColor === 'Blue'\"\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=\"switchControl\"\n                class=\"switch\"\n                [formControl]=\"switchControl\"\n                (click)=\"$event.stopPropagation()\">\n            </s-switch>\n            <s-switch\n                *ngIf=\"!switchControl && switch\"\n                class=\"switch\"\n                [disabled]=\"disabled\"\n                [(ngModel)]=\"switch.state\"\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>\n",
                 animations: [
                     animations.trigger("cachelessAnimation", [
                         animations.transition(":enter", [animations.style({ height: "0" }), animations.animate("200ms linear", animations.style({ height: "*" }))]),
@@ -311,7 +319,7 @@
                         animations.transition("* => *", animations.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: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}"]
+                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{font-size:1rem;margin-right:12px}.accordion-panel .header .header__title .exclamation-icon-red{color:#c13018}.accordion-panel .header .header__title .exclamation-icon-orange{color:#f8931f}.accordion-panel .header .header__title .exclamation-icon-yellow{color:#fcbf10}.accordion-panel .header .header__title .exclamation-icon-green{color:#0c9348}.accordion-panel .header .header__title .exclamation-icon-blue{color:#428bca}.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}.accordion-panel--disabled .exclamation-icon{opacity:.5}"]
             })
         ], AccordionPanelComponent);
         return AccordionPanelComponent;
@@ -6415,6 +6423,7 @@
         FieldType["TextIA"] = "TextIA";
         FieldType["Time"] = "Time";
         FieldType["ProfilePicture"] = "ProfilePicture";
+        FieldType["Button"] = "Button";
     })(exports.FieldType || (exports.FieldType = {}));
 
     var FieldSize = /** @class */ (function () {
@@ -7046,6 +7055,34 @@
         return TextField;
     }(Field));
 
+    var ButtonField = /** @class */ (function (_super) {
+        __extends(ButtonField, _super);
+        function ButtonField(config) {
+            var _this = _super.call(this, config) || this;
+            _this.tooltipPosition = "top";
+            _this.priority = config.priority || exports.ButtonPriority.Primary;
+            _this.iconClass = config.iconClass || "";
+            _this.disabled = config.disabled || false;
+            _this.auxiliary = config.auxiliary || false;
+            _this.caret = config.caret || false;
+            _this.id = config.id || "s-button-" + ButtonComponent.nextId++;
+            _this.onClick = config.onClick || (function () { });
+            _this.fullWidth = config.fullWidth || false;
+            _this.iconColor = config.iconColor;
+            _this.badge = config.badge;
+            _this.animation = config.animation;
+            _this.slide = config.slide;
+            _this.menuOptions = config.menuOptions;
+            _this.model = config.model;
+            _this.baseZIndex = config.baseZIndex;
+            _this.styleClass = config.styleClass;
+            _this.rightIconClass = config.rightIconClass;
+            _this.tooltipPosition = config.tooltipPosition;
+            return _this;
+        }
+        return ButtonField;
+    }(Field));
+
     var EditorField = /** @class */ (function (_super) {
         __extends(EditorField, _super);
         function EditorField(config) {
@@ -7135,6 +7172,8 @@
                     return new ProfilePictureField(config);
                 case exports.FieldType.Editor:
                     return new EditorField(config);
+                case exports.FieldType.Button:
+                    return new ButtonField(config);
                 case exports.FieldType.Custom:
                     var CustomFieldClass = config.CustomFieldClass, otherConfigs = __rest(config, ["CustomFieldClass"]);
                     return new CustomFieldClass(otherConfigs);
@@ -7767,6 +7806,7 @@
 
     var Structure = /** @class */ (function () {
         function Structure(config) {
+            this.isFlex = false;
             Object.assign(this, __assign({}, config));
         }
         return Structure;
@@ -7785,7 +7825,29 @@
     var Section = /** @class */ (function (_super) {
         __extends(Section, _super);
         function Section(config) {
-            return _super.call(this, config) || this;
+            var _this = _super.call(this, config) || this;
+            /**
+             * Define if the structure is a flex container.
+             */
+            _this.isFlex = false;
+            /**
+             * Define the justify-content property.
+             */
+            _this.justifyContent = 'flex-start';
+            /**
+             * Define the align-items property.
+             */
+            _this.alignItems = 'flex-start';
+            _this.visible = function () { return true; };
+            _this.isFlex = config.isFlex || false;
+            _this.justifyContent = config.justifyContent || 'flex-start';
+            _this.alignItems = config.alignItems || 'flex-start';
+            if (config.visible) {
+                _this.visible = config.visible;
+            }
+            _this.size = new FieldSize(config.size || {});
+            _this.gridClass = Object.keys(_this.size).map(function (key) { return "ui-" + key + "-" + _this.size[key]; });
+            return _this;
         }
         return Section;
     }(Structure));
@@ -7842,6 +7904,17 @@
         return DynamicConfig;
     }());
 
+
+    (function (GridType) {
+        GridType["Row"] = "Row";
+    })(exports.GridType || (exports.GridType = {}));
+
+
+    (function (StructureType) {
+        StructureType["Fieldset"] = "Fieldset";
+        StructureType["Section"] = "Section";
+    })(exports.StructureType || (exports.StructureType = {}));
+
     var DynamicFormComponent = /** @class */ (function () {
         function DynamicFormComponent() {
             this.errorMessages = {};
@@ -11278,6 +11351,13 @@
     var SectionComponent = /** @class */ (function () {
         function SectionComponent() {
         }
+        Object.defineProperty(SectionComponent.prototype, "flexContainer", {
+            get: function () {
+                return this.config.isFlex;
+            },
+            enumerable: true,
+            configurable: true
+        });
         __decorate([
             core.Input()
         ], SectionComponent.prototype, "id", void 0);
@@ -11292,7 +11372,9 @@
         ], SectionComponent.prototype, "errorMessages", void 0);
         SectionComponent = __decorate([
             core.Component({
-                template: "\n        <h3 *ngIf=\"config?.header\" class=\"sds-section-title\">{{config.header}}</h3>\n        <ng-container *ngFor=\"let conf of config.configs\">\n            <ng-container *sDynamicForm=\"{ id: id, config: conf, group: group, errorMessages: errorMessages }\"></ng-container>\n        </ng-container>\n    "
+                selector: 's-section',
+                template: "\n        <h3 *ngIf=\"config?.header\" class=\"sds-section-title\">{{config.header}}</h3>\n        <section [class.flex-container]=\"flexContainer\" [style.justify-content]=\"config.justifyContent\" [style.align-items]=\"config.alignItems\">\n            <ng-container *ngFor=\"let conf of config.configs\">\n                <ng-container *sDynamicForm=\"{ id: id, config: conf, group: group, errorMessages: errorMessages }\"></ng-container>\n            </ng-container>\n        </section>\n    ",
+                styles: ["\n        .flex-container {\n            display: flex\n        }\n\n        :host {\n            height: 100%\n        }\n\n        section {\n            height: 100%;\n        }\n    "]
             })
         ], SectionComponent);
         return SectionComponent;
@@ -11302,7 +11384,6 @@
         function RowComponent() {
             this.FieldType = exports.FieldType;
         }
-        RowComponent.prototype.ngOnInit = function () { };
         RowComponent.prototype.getErrorMessages = function (errorMessages) {
             if (errorMessages)
                 return this.isFunction(errorMessages) ? errorMessages() : errorMessages;
@@ -11325,6 +11406,7 @@
         ], RowComponent.prototype, "errorMessages", void 0);
         RowComponent = __decorate([
             core.Component({
+                selector: 's-row',
                 template: "\n        <div class=\"ui-fluid\" [formGroup]=\"group\">\n        <div class=\"ui-g\">\n            <ng-container *ngFor=\"let field of config.fields\">\n                <div [ngClass]=\"field.gridClass\" *ngIf=\"field.visible()\">\n                    <ng-container *ngIf=\"field.type === FieldType.Custom && field.label\" >\n                        <label *sInfoSign=\"field.infoSign; displayTime: field.displayTimeInfoSign; useFocusedInputRef: field.useInfoSignFocusedInputRef\" [for]=\"field.name\" [ngClass]=\"{ required: field.required() }\" >\n                            {{ field.label }}\n                        </label>\n                    </ng-container>\n\n                    <ng-container *sDynamicForm=\"{ id: id, config: field, group: group}\"></ng-container>\n\n                    <s-control-errors [form]=\"group\" [control]=\"group.controls[field.name]\"\n                        [errorMessages]=\"getErrorMessages(field.errorMessages)\"></s-control-errors>\n\n                    <ng-container *ngIf=\"field.footer\">\n                        <ng-container *ngIf=\"field.footer.help\">\n                            <span *ngIf=\"field.footer.help.visible({ abstractControl: group.controls[field.name], formField: field })\" style=\"color: #888B99\">{{ field.footer.help.text }}</span>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"field.footer.link\">\n                            <div\n                                *ngIf=\"field.footer.link.visible({ abstractControl: group.controls[field.name], formField: field })\"\n                                class=\"ui-g\"\n                                style=\"margin-left: -17px\"\n                            >\n                                <s-button\n                                    [label]=\"field.footer.link.label\"\n                                    priority=\"link\"\n                                    (onClick)=\"field.footer.link.onClick({ abstractControl: group.controls[field.name], formField: field })\"\n                                    [auxiliary]=\"true\"\n                                ></s-button>\n                            </div>\n                        </ng-container>\n                    </ng-container>\n\n                    <ng-template *ngIf=\"field?.bottomTemplate\" [ngTemplateOutlet]=\"field.bottomTemplate\"></ng-template>\n                </div>\n            </ng-container>\n        </div>\n    "
             })
         ], RowComponent);
@@ -11365,17 +11447,6 @@
         return DynamicFieldComponent;
     }());
 
-    var GridType;
-    (function (GridType) {
-        GridType["Row"] = "Row";
-    })(GridType || (GridType = {}));
-
-    var StructureType;
-    (function (StructureType) {
-        StructureType["Fieldset"] = "Fieldset";
-        StructureType["Section"] = "Section";
-    })(StructureType || (StructureType = {}));
-
     var BignumberFieldComponent = /** @class */ (function (_super) {
         __extends(BignumberFieldComponent, _super);
         function BignumberFieldComponent(localeService, changeDetectorRef) {
@@ -11861,6 +11932,27 @@
         return ProfilePictureFieldComponent;
     }());
 
+    var ButtonFieldComponent = /** @class */ (function () {
+        function ButtonFieldComponent() {
+        }
+        ButtonFieldComponent.prototype.clickedButton = function ($event) {
+            if (this.field.onClick) {
+                this.field.onClick($event);
+            }
+        };
+        __decorate([
+            core.Input()
+        ], ButtonFieldComponent.prototype, "field", void 0);
+        ButtonFieldComponent = __decorate([
+            core.Component({
+                selector: 's-button-field',
+                template: "<section [class.full-width]=\"field.fullWidth\" [class.fit-content]=\"!field.fullWidth\">\n    <s-button\n        [label]=\"field.label\"\n        [priority]=\"field.priority\"\n        [iconClass]=\"field.iconClass\"\n        [disabled]=\"field.disabled\"\n        [auxiliary]=\"field.auxiliary\"\n        [caret]=\"field.caret\"\n        [id]=\"field.id\"\n        [tooltip]=\"field.tooltip\"\n        (onClick)=\"clickedButton($event)\"\n        [iconColor]=\"field.iconColor\"\n        [badge]=\"field.badge\"\n        [animation]=\"field.animation\"\n        [slide]=\"field.slide\"\n        [menuOptions]=\"field.menuOptions\"\n        [model]=\"field.model\"\n        [baseZIndex]=\"field.baseZIndex\"\n        [styleClass]=\"field.styleClass\"\n        [rightIconClass]=\"field.rightIconClass\"\n        [tooltipPosition]=\"field.tooltipPosition\"\n        [type]=\"field.buttonType\"\n        [size]=\"field.buttonSize\">\n    </s-button>\n</section>\n",
+                styles: ["section{height:100%;display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end}section.full-width{width:100%}section.fit-content{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}"]
+            })
+        ], ButtonFieldComponent);
+        return ButtonFieldComponent;
+    }());
+
     var DynamicForm = /** @class */ (function () {
         function DynamicForm(_a) {
             var group = _a.group, errorMessages = _a.errorMessages;
@@ -11968,6 +12060,8 @@
                     return ProfilePictureFieldComponent;
                 case exports.FieldType.Editor:
                     return EditorFieldComponent;
+                case exports.FieldType.Button:
+                    return ButtonFieldComponent;
                 case exports.FieldType.Custom:
                     return this.field.CustomFieldComponentClass;
                 default:
@@ -12000,9 +12094,9 @@
         };
         DynamicStructure.prototype.getComponent = function () {
             switch (this.config.type) {
-                case StructureType.Fieldset:
+                case exports.StructureType.Fieldset:
                     return FieldsetComponent;
-                case StructureType.Section:
+                case exports.StructureType.Section:
                     return SectionComponent;
                 default:
                     throw new Error("Trying to use an unsupported type (" + this.config.type + ").");
@@ -12032,7 +12126,7 @@
         };
         DynamicGrid.prototype.getComponent = function () {
             switch (this.config.type) {
-                case GridType.Row:
+                case exports.GridType.Row:
                     return RowComponent;
                 default:
                     throw new Error("Trying to use an unsupported type (" + this.config.type + ").");
@@ -12101,10 +12195,10 @@
             return exports.FieldType[this.config.type];
         };
         DynamicFormDirective.prototype.isStructure = function () {
-            return StructureType[this.config.type];
+            return exports.StructureType[this.config.type];
         };
         DynamicFormDirective.prototype.isGrid = function () {
-            return GridType[this.config.type];
+            return exports.GridType[this.config.type];
         };
         DynamicFormDirective.ctorParameters = function () { return [
             { type: core.ComponentFactoryResolver },
@@ -13139,6 +13233,7 @@
                     SliderFieldComponent,
                     TextAreaFieldComponent,
                     TextAreaIAFieldComponent,
+                    ButtonFieldComponent
                 ],
                 exports: [DynamicFormComponent, LookupComponent],
                 entryComponents: [
@@ -21770,6 +21865,7 @@
     exports.BreadcrumbModule = BreadcrumbModule;
     exports.Breakpoints = Breakpoints;
     exports.ButtonComponent = ButtonComponent;
+    exports.ButtonField = ButtonField;
     exports.ButtonModule = ButtonModule;
     exports.CalendarField = CalendarField;
     exports.CalendarLocaleOptions = CalendarLocaleOptions;
@@ -21820,6 +21916,7 @@
     exports.GlobalSearchComponent = GlobalSearchComponent;
     exports.GlobalSearchDropdownItemComponent = GlobalSearchDropdownItemComponent;
     exports.GlobalSearchModule = GlobalSearchModule;
+    exports.Grid = Grid;
     exports.HostProjectConfigsInjectionToken = HostProjectConfigsInjectionToken;
     exports.IAInsightComponent = IAInsightComponent;
     exports.IAInsightModule = IAInsightModule;
@@ -21893,6 +21990,7 @@
     exports.RatingScaleComponent = RatingScaleComponent;
     exports.RatingScaleModule = RatingScaleModule;
     exports.RationButtonOption = RationButtonOption;
+    exports.Row = Row;
     exports.RowTogllerDirective = RowTogllerDirective;
     exports.SVGFactoryDirective = SVGFactoryDirective;
     exports.SVGFactoryModule = SVGFactoryModule;
@@ -21999,47 +22097,48 @@
     exports.ɵco = TextAreaFieldComponent;
     exports.ɵcp = TextAreaIAFieldComponent;
     exports.ɵcq = IAssistService;
-    exports.ɵcs = DecimalField;
-    exports.ɵct = SideTableComponent;
-    exports.ɵcu = InfiniteScrollModule;
-    exports.ɵcv = InfiniteScrollDirective;
-    exports.ɵcw = IAInsightSidebarComponent;
-    exports.ɵcx = IAInsightCardComponent;
-    exports.ɵcy = IAInsightCardLoaderComponent;
-    exports.ɵcz = InlineEditItemComponent;
+    exports.ɵcr = ButtonFieldComponent;
+    exports.ɵct = DecimalField;
+    exports.ɵcu = SideTableComponent;
+    exports.ɵcv = InfiniteScrollModule;
+    exports.ɵcw = InfiniteScrollDirective;
+    exports.ɵcx = IAInsightSidebarComponent;
+    exports.ɵcy = IAInsightCardComponent;
+    exports.ɵcz = IAInsightCardLoaderComponent;
     exports.ɵd = TieredMenuService;
-    exports.ɵda = InlineEditCalendarComponent;
-    exports.ɵdb = InlineEditLookupComponent;
-    exports.ɵdc = InlineEditNumberComponent;
-    exports.ɵdd = InlineEditTextComponent;
-    exports.ɵde = InlineEditTextAreaComponent;
-    exports.ɵdf = InlineEditTextAreaIAComponent;
-    exports.ɵdg = KanbanEventService;
-    exports.ɵdh = KanbanItemComponent;
-    exports.ɵdi = KanbanColumnComponent;
-    exports.ɵdj = KanbanItemDraggingComponent;
-    exports.ɵdk = NumberLocaleOptions;
-    exports.ɵdl = BorderButtonModule;
-    exports.ɵdm = BorderButtonComponent;
-    exports.ɵdn = ProgressBarDeterminateComponent;
-    exports.ɵdo = ProgressBarIndeterminateComponent;
-    exports.ɵdp = SelectButtonItemComponent;
-    exports.ɵdq = SlidePanelService;
-    exports.ɵdr = ThumbnailItemComponent;
-    exports.ɵds = ThumbnailItemVideoComponent;
-    exports.ɵdt = ThumbnailItemImageComponent;
-    exports.ɵdu = TimelineItemModule;
-    exports.ɵdv = TimelineIconItemComponent;
-    exports.ɵdw = HorizontalTimelineModule;
-    exports.ɵdx = HorizontalTimelineComponent;
-    exports.ɵdy = VerticalTimelineModule;
-    exports.ɵdz = VerticalTimelineComponent;
+    exports.ɵda = InlineEditItemComponent;
+    exports.ɵdb = InlineEditCalendarComponent;
+    exports.ɵdc = InlineEditLookupComponent;
+    exports.ɵdd = InlineEditNumberComponent;
+    exports.ɵde = InlineEditTextComponent;
+    exports.ɵdf = InlineEditTextAreaComponent;
+    exports.ɵdg = InlineEditTextAreaIAComponent;
+    exports.ɵdh = KanbanEventService;
+    exports.ɵdi = KanbanItemComponent;
+    exports.ɵdj = KanbanColumnComponent;
+    exports.ɵdk = KanbanItemDraggingComponent;
+    exports.ɵdl = NumberLocaleOptions;
+    exports.ɵdm = BorderButtonModule;
+    exports.ɵdn = BorderButtonComponent;
+    exports.ɵdo = ProgressBarDeterminateComponent;
+    exports.ɵdp = ProgressBarIndeterminateComponent;
+    exports.ɵdq = SelectButtonItemComponent;
+    exports.ɵdr = SlidePanelService;
+    exports.ɵds = ThumbnailItemComponent;
+    exports.ɵdt = ThumbnailItemVideoComponent;
+    exports.ɵdu = ThumbnailItemImageComponent;
+    exports.ɵdv = TimelineItemModule;
+    exports.ɵdw = TimelineIconItemComponent;
+    exports.ɵdx = HorizontalTimelineModule;
+    exports.ɵdy = HorizontalTimelineComponent;
+    exports.ɵdz = VerticalTimelineModule;
     exports.ɵe = TieredMenuGlobalService;
-    exports.ɵea = RangeLineComponent;
-    exports.ɵeb = CollapseOptionComponent;
-    exports.ɵec = CollapsedItemsComponent;
-    exports.ɵed = VerticalItemsComponent;
-    exports.ɵee = ChipItemComponent;
+    exports.ɵea = VerticalTimelineComponent;
+    exports.ɵeb = RangeLineComponent;
+    exports.ɵec = CollapseOptionComponent;
+    exports.ɵed = CollapsedItemsComponent;
+    exports.ɵee = VerticalItemsComponent;
+    exports.ɵef = ChipItemComponent;
     exports.ɵf = TieredMenuComponent;
     exports.ɵg = TieredMenuNestedComponent;
     exports.ɵh = TieredMenuItemComponent;