@seniorsistemas/angular-components 17.28.0 → 17.28.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/animations'), require('rxjs'), require('rxjs/operators'), require('@angular/common'), require('@angular/forms'), require('@angular/router'), require('@seniorsistemas/ng2-currency-mask'), require('@angular/common/http'), require('@seniorsistemas/senior-platform-data'), require('moment'), require('ngx-cookie-service'), require('bignumber.js'), require('primeng/breadcrumb'), require('primeng/dom'), require('primeng/tieredmenu'), require('primeng/calendar'), require('@ngx-translate/core'), 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'), require('@angular/cdk/portal'), require('ngx-mask'), require('angular2-hotkeys'), require('primeng/autocomplete'), require('primeng/dialog'), require('primeng/table'), require('ng2-currency-mask'), require('primeng/button'), require('primeng/checkbox'), require('primeng/chips'), require('primeng/dropdown'), require('primeng/inputmask'), require('primeng/inputtext'), require('primeng/inputtextarea'), require('primeng/keyfilter'), require('primeng/multiselect'), require('primeng/panel'), require('primeng/radiobutton'), require('primeng/slider'), require('primeng/progressbar'), require('primeng/tooltip'), require('@angular/platform-browser'), require('@angular/cdk/clipboard'), require('primeng/editor'), require('primeng/api'), require('primeng/confirmdialog'), require('cropperjs'), require('@angular/platform-browser/animations'), require('marked'), require('@angular/cdk/drag-drop'), require('@angular/cdk/a11y'), require('primeng/scrollpanel'), require('primeng/sidebar')) :
-    typeof define === 'function' && define.amd ? define('@seniorsistemas/angular-components', ['exports', '@angular/core', '@angular/animations', 'rxjs', 'rxjs/operators', '@angular/common', '@angular/forms', '@angular/router', '@seniorsistemas/ng2-currency-mask', '@angular/common/http', '@seniorsistemas/senior-platform-data', 'moment', 'ngx-cookie-service', 'bignumber.js', 'primeng/breadcrumb', 'primeng/dom', 'primeng/tieredmenu', 'primeng/calendar', '@ngx-translate/core', '@codemirror/view', '@codemirror/state', '@codemirror/lint', '@codemirror/language', '@lezer/generator', '@codemirror/highlight', '@codemirror/autocomplete', '@codemirror/tooltip', '@codemirror/gutter', '@angular/cdk/portal', 'ngx-mask', 'angular2-hotkeys', 'primeng/autocomplete', 'primeng/dialog', 'primeng/table', 'ng2-currency-mask', 'primeng/button', 'primeng/checkbox', 'primeng/chips', 'primeng/dropdown', 'primeng/inputmask', 'primeng/inputtext', 'primeng/inputtextarea', 'primeng/keyfilter', 'primeng/multiselect', 'primeng/panel', 'primeng/radiobutton', 'primeng/slider', 'primeng/progressbar', 'primeng/tooltip', '@angular/platform-browser', '@angular/cdk/clipboard', 'primeng/editor', 'primeng/api', 'primeng/confirmdialog', 'cropperjs', '@angular/platform-browser/animations', 'marked', '@angular/cdk/drag-drop', '@angular/cdk/a11y', 'primeng/scrollpanel', 'primeng/sidebar'], factory) :
-    (global = global || self, factory((global.seniorsistemas = global.seniorsistemas || {}, global.seniorsistemas['angular-components'] = {}), global.ng.core, global.ng.animations, global.rxjs, global.rxjs.operators, global.ng.common, global.ng.forms, global.ng.router, global.ng2CurrencyMask, global.ng.common.http, global.seniorPlatformData, global.moment_, global.ngxCookieService, global.BigNumber, global.breadcrumb, global.dom, global.tieredmenu, global.calendar, global.core$1, global.view, global.state, global.lint, global.language, global.generator, global.highlight, global.autocomplete$1, global.tooltip, global.gutter, global.ng.cdk.portal, global.ngxMask, global.angular2Hotkeys, global.autocomplete$2, global.dialog, global.table, global.ng2CurrencyMask$1, global.button, global.checkbox, global.chips, global.dropdown, global.inputmask, global.inputtext, global.inputtextarea, global.keyfilter, global.multiselect, global.panel, global.radiobutton, global.slider, global.progressbar, global.tooltip$1, global.ng.platformBrowser, global.ng.cdk.clipboard, global.editor, global.api, global.confirmdialog, global.Cropper, global.ng.platformBrowser.animations, global.marked, global.ng.cdk['drag-drop'], global.ng.cdk.a11y, global.scrollpanel, global.sidebar));
-}(this, (function (exports, core, animations, rxjs, operators, common, forms, router, ng2CurrencyMask, http, seniorPlatformData, moment_, ngxCookieService, BigNumber, breadcrumb, dom, tieredmenu, calendar, core$1, view, state, lint, language, generator, highlight, autocomplete$1, tooltip, gutter, portal, ngxMask, angular2Hotkeys, autocomplete$2, dialog, table, ng2CurrencyMask$1, button, checkbox, chips, dropdown, inputmask, inputtext, inputtextarea, keyfilter, multiselect, panel, radiobutton, slider, progressbar, tooltip$1, platformBrowser, clipboard, editor, api, confirmdialog, Cropper, animations$1, marked, dragDrop, a11y, scrollpanel, sidebar) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/animations'), require('rxjs'), require('rxjs/operators'), require('@angular/common'), require('@angular/forms'), require('@angular/router'), require('@seniorsistemas/ng2-currency-mask'), require('@angular/common/http'), require('@seniorsistemas/senior-platform-data'), require('moment'), require('ngx-cookie-service'), require('bignumber.js'), require('primeng/breadcrumb'), require('primeng/dom'), require('primeng/tieredmenu'), require('primeng/calendar'), require('@ngx-translate/core'), 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'), require('@angular/cdk/portal'), require('ngx-mask'), require('angular2-hotkeys'), require('primeng/autocomplete'), require('primeng/dialog'), require('primeng/table'), require('ng2-currency-mask'), require('primeng/button'), require('primeng/checkbox'), require('primeng/chips'), require('primeng/dropdown'), require('primeng/inputmask'), require('primeng/inputtext'), require('primeng/inputtextarea'), require('primeng/keyfilter'), require('primeng/multiselect'), require('primeng/panel'), require('primeng/radiobutton'), require('primeng/slider'), require('primeng/progressbar'), require('primeng/tooltip'), require('@angular/platform-browser'), require('@angular/cdk/clipboard'), require('primeng/editor'), require('primeng/api'), require('primeng/confirmdialog'), require('cropperjs'), require('marked'), require('@angular/cdk/drag-drop'), require('@angular/cdk/a11y'), require('primeng/scrollpanel'), require('primeng/sidebar')) :
+    typeof define === 'function' && define.amd ? define('@seniorsistemas/angular-components', ['exports', '@angular/core', '@angular/animations', 'rxjs', 'rxjs/operators', '@angular/common', '@angular/forms', '@angular/router', '@seniorsistemas/ng2-currency-mask', '@angular/common/http', '@seniorsistemas/senior-platform-data', 'moment', 'ngx-cookie-service', 'bignumber.js', 'primeng/breadcrumb', 'primeng/dom', 'primeng/tieredmenu', 'primeng/calendar', '@ngx-translate/core', '@codemirror/view', '@codemirror/state', '@codemirror/lint', '@codemirror/language', '@lezer/generator', '@codemirror/highlight', '@codemirror/autocomplete', '@codemirror/tooltip', '@codemirror/gutter', '@angular/cdk/portal', 'ngx-mask', 'angular2-hotkeys', 'primeng/autocomplete', 'primeng/dialog', 'primeng/table', 'ng2-currency-mask', 'primeng/button', 'primeng/checkbox', 'primeng/chips', 'primeng/dropdown', 'primeng/inputmask', 'primeng/inputtext', 'primeng/inputtextarea', 'primeng/keyfilter', 'primeng/multiselect', 'primeng/panel', 'primeng/radiobutton', 'primeng/slider', 'primeng/progressbar', 'primeng/tooltip', '@angular/platform-browser', '@angular/cdk/clipboard', 'primeng/editor', 'primeng/api', 'primeng/confirmdialog', 'cropperjs', 'marked', '@angular/cdk/drag-drop', '@angular/cdk/a11y', 'primeng/scrollpanel', 'primeng/sidebar'], factory) :
+    (global = global || self, factory((global.seniorsistemas = global.seniorsistemas || {}, global.seniorsistemas['angular-components'] = {}), global.ng.core, global.ng.animations, global.rxjs, global.rxjs.operators, global.ng.common, global.ng.forms, global.ng.router, global.ng2CurrencyMask, global.ng.common.http, global.seniorPlatformData, global.moment_, global.ngxCookieService, global.BigNumber, global.breadcrumb, global.dom, global.tieredmenu, global.calendar, global.core$1, global.view, global.state, global.lint, global.language, global.generator, global.highlight, global.autocomplete$1, global.tooltip, global.gutter, global.ng.cdk.portal, global.ngxMask, global.angular2Hotkeys, global.autocomplete$2, global.dialog, global.table, global.ng2CurrencyMask$1, global.button, global.checkbox, global.chips, global.dropdown, global.inputmask, global.inputtext, global.inputtextarea, global.keyfilter, global.multiselect, global.panel, global.radiobutton, global.slider, global.progressbar, global.tooltip$1, global.ng.platformBrowser, global.ng.cdk.clipboard, global.editor, global.api, global.confirmdialog, global.Cropper, global.marked, global.ng.cdk['drag-drop'], global.ng.cdk.a11y, global.scrollpanel, global.sidebar));
+}(this, (function (exports, core, animations, rxjs, operators, common, forms, router, ng2CurrencyMask, http, seniorPlatformData, moment_, ngxCookieService, BigNumber, breadcrumb, dom, tieredmenu, calendar, core$1, view, state, lint, language, generator, highlight, autocomplete$1, tooltip, gutter, portal, ngxMask, angular2Hotkeys, autocomplete$2, dialog, table, ng2CurrencyMask$1, button, checkbox, chips, dropdown, inputmask, inputtext, inputtextarea, keyfilter, multiselect, panel, radiobutton, slider, progressbar, tooltip$1, platformBrowser, clipboard, editor, api, confirmdialog, Cropper, marked, dragDrop, a11y, scrollpanel, sidebar) { 'use strict';
 
     var BigNumber__default = 'default' in BigNumber ? BigNumber['default'] : BigNumber;
     Cropper = Cropper && Cropper.hasOwnProperty('default') ? Cropper['default'] : Cropper;
@@ -14190,6 +14190,7 @@
             this.elementRef = elementRef;
             this.sActivatedContent = new core.EventEmitter();
             this.tabindex = 0;
+            this.disabled = false;
             this.EVENT_LISTENER = function (event) {
                 if (event instanceof KeyboardEvent) {
                     var key = event.key;
@@ -14200,11 +14201,13 @@
                 }
                 _this.sActivatedContent.next(event);
             };
+        }
+        AccessibilityEventDirective.prototype.ngOnInit = function () {
             this.setTabIndex();
             this.checkAccessbilityEvents();
-        }
+        };
         AccessibilityEventDirective.prototype.setTabIndex = function () {
-            var hasTabIndex = this.element.tabIndex >= 0;
+            var hasTabIndex = this.element.tabIndex !== 0;
             if (hasTabIndex) {
                 return;
             }
@@ -14234,6 +14237,9 @@
         __decorate([
             core.Input()
         ], AccessibilityEventDirective.prototype, "tabindex", void 0);
+        __decorate([
+            core.Input()
+        ], AccessibilityEventDirective.prototype, "disabled", void 0);
         AccessibilityEventDirective = __decorate([
             core.Directive({
                 selector: '[sActivatedContent]'
@@ -14262,7 +14268,7 @@
         }
         FieldsetModule = __decorate([
             core.NgModule({
-                imports: [common.CommonModule, AccessibilityEventsModule, animations$1.BrowserAnimationsModule],
+                imports: [common.CommonModule, AccessibilityEventsModule],
                 declarations: [FieldsetComponent$1],
                 exports: [FieldsetComponent$1],
             })
@@ -17306,8 +17312,17 @@
             this.dislikeSelected = false;
         }
         IAInsightCardComponent.prototype.toggle = function () {
-            this.open = !this.open;
-            this._requestInsight();
+            var newOpenState = !this.open;
+            this.open = newOpenState;
+            if (newOpenState === true && this.insight.onOpenSidebar) {
+                this.insight.onOpenSidebar();
+            }
+            else if (newOpenState === false && this.insight.onCloseSideBar) {
+                this.insight.onCloseSideBar();
+            }
+            if (newOpenState === true) {
+                this._requestInsight();
+            }
         };
         IAInsightCardComponent.prototype.onLikeSelected = function () {
             var _a, _b;
@@ -17351,6 +17366,9 @@
                 .pipe(operators.first(), operators.finalize(function () { return (_this.isLoading = false); }))
                 .subscribe(function (content) {
                 _this.content = marked.marked(content);
+                if (_this.insight.onContentLoaded) {
+                    _this.insight.onContentLoaded();
+                }
             });
         };
         IAInsightCardComponent.ctorParameters = function () { return [
@@ -17374,6 +17392,8 @@
     var IAInsightSidebarComponent = /** @class */ (function () {
         function IAInsightSidebarComponent() {
             this.insights = [];
+            this.closedSidebar = new core.EventEmitter();
+            this.openedSidebar = new core.EventEmitter();
             this.opened = false;
         }
         IAInsightSidebarComponent.prototype.toggle = function () {
@@ -17381,9 +17401,11 @@
         };
         IAInsightSidebarComponent.prototype.open = function () {
             this.opened = true;
+            this.openedSidebar.emit();
         };
         IAInsightSidebarComponent.prototype.close = function () {
             this.opened = false;
+            this.closedSidebar.emit();
         };
         __decorate([
             core.Input()
@@ -17409,6 +17431,12 @@
         __decorate([
             core.Input()
         ], IAInsightSidebarComponent.prototype, "noPermissionTemplate", void 0);
+        __decorate([
+            core.Output()
+        ], IAInsightSidebarComponent.prototype, "closedSidebar", void 0);
+        __decorate([
+            core.Output()
+        ], IAInsightSidebarComponent.prototype, "openedSidebar", void 0);
         IAInsightSidebarComponent = __decorate([
             core.Component({
                 selector: "s-ia-insight-sidebar",
@@ -17443,6 +17471,8 @@
         function IAInsightComponent() {
             this.insights = [];
             this.hasPermission = true;
+            this.openIAInsight = new core.EventEmitter();
+            this.closedIAInsight = new core.EventEmitter();
         }
         IAInsightComponent.prototype.ngAfterContentInit = function () {
             this._getTemplates();
@@ -17453,6 +17483,12 @@
         IAInsightComponent.prototype.close = function () {
             this.sidebar.close();
         };
+        IAInsightComponent.prototype.onOpenSidebar = function () {
+            this.openIAInsight.emit();
+        };
+        IAInsightComponent.prototype.onCloseSidebar = function () {
+            this.closedIAInsight.emit();
+        };
         IAInsightComponent.prototype.getIntroTemplate = function () {
             return this._getCustomTemplate(exports.IAInsightTemplateTypes.Intro);
         };
@@ -17486,6 +17522,12 @@
         __decorate([
             core.Input()
         ], IAInsightComponent.prototype, "noPermissionText", void 0);
+        __decorate([
+            core.Output()
+        ], IAInsightComponent.prototype, "openIAInsight", void 0);
+        __decorate([
+            core.Output()
+        ], IAInsightComponent.prototype, "closedIAInsight", void 0);
         __decorate([
             core.ViewChild(IAInsightSidebarComponent)
         ], IAInsightComponent.prototype, "sidebar", void 0);
@@ -17495,7 +17537,7 @@
         IAInsightComponent = __decorate([
             core.Component({
                 selector: "s-ia-insight",
-                template: "<s-ia-insight-sidebar\n    #sidebar\n    [insights]=\"insights\"\n    [hasPermission]=\"hasPermission\"\n    [introText]=\"introText\"\n    [introTemplate]=\"introTemplate\"\n    [emptyText]=\"emptyText\"\n    [emptyTemplate]=\"emptyTemplate\"\n    [noPermissionText]=\"noPermissionText\"\n    [noPermissionTemplate]=\"noPermissionTemplate\">\n</s-ia-insight-sidebar>",
+                template: "<s-ia-insight-sidebar\n    #sidebar\n    [insights]=\"insights\"\n    [hasPermission]=\"hasPermission\"\n    [introText]=\"introText\"\n    [introTemplate]=\"introTemplate\"\n    [emptyText]=\"emptyText\"\n    [emptyTemplate]=\"emptyTemplate\"\n    [noPermissionText]=\"noPermissionText\"\n    (openedSidebar)=\"onOpenSidebar()\"\n    (closedSidebar)=\"onCloseSidebar()\"\n    [noPermissionTemplate]=\"noPermissionTemplate\"\n>\n</s-ia-insight-sidebar>\n",
                 styles: [""]
             })
         ], IAInsightComponent);
@@ -17533,22 +17575,60 @@
 
     var GridMenuComponent = /** @class */ (function () {
         function GridMenuComponent() {
+            this.useFontAwesomeIcons = false;
             this.itemsArray = [];
+            this.selectable = false;
+            this.selectedChange = new core.EventEmitter();
         }
         Object.defineProperty(GridMenuComponent.prototype, "items", {
             set: function (items) {
-                this.itemsArray = Array.isArray(items) ? items : [items];
+                if (isNullOrUndefined(items)) {
+                    this.itemsArray = [];
+                }
+                else {
+                    this.itemsArray = Array.isArray(items) ? items : [items];
+                }
             },
             enumerable: true,
             configurable: true
         });
+        GridMenuComponent.prototype.ngOnChanges = function (changes) {
+            if (changes.selected && changes.selected.isFirstChange()) {
+                if (this.selectable) {
+                    this.selected.active = true;
+                }
+            }
+        };
+        GridMenuComponent.prototype.onClickGridMenuItem = function (gridMenuItem) {
+            if (!this.selectable) {
+                return;
+            }
+            if (this.previousGridMenuItemClicked) {
+                this.previousGridMenuItemClicked.active = false;
+            }
+            gridMenuItem.active = !gridMenuItem.active;
+            this.previousGridMenuItemClicked = gridMenuItem;
+            this.selectedChange.next(gridMenuItem);
+        };
         __decorate([
             core.Input()
         ], GridMenuComponent.prototype, "items", null);
+        __decorate([
+            core.Input()
+        ], GridMenuComponent.prototype, "useFontAwesomeIcons", void 0);
+        __decorate([
+            core.Input()
+        ], GridMenuComponent.prototype, "selectable", void 0);
+        __decorate([
+            core.Input()
+        ], GridMenuComponent.prototype, "selected", void 0);
+        __decorate([
+            core.Output()
+        ], GridMenuComponent.prototype, "selectedChange", void 0);
         GridMenuComponent = __decorate([
             core.Component({
                 selector: "s-grid-menu",
-                template: "<s-grid-menu-item *ngFor=\"let item of itemsArray\" [item]=\"item\"></s-grid-menu-item>\n",
+                template: "<section class=\"grid-menu\">\n    <s-grid-menu-item\n        *ngFor=\"let item of itemsArray\"\n        [item]=\"item\"\n        [iconIsFromFontAwesome]=\"useFontAwesomeIcons\"\n        (clickedGridMenuItem)=\"onClickGridMenuItem($event)\"\n    ></s-grid-menu-item>\n</section>\n",
                 styles: [".grid-menu{display:-ms-grid;display:grid;gap:20px;grid-template-columns:repeat(auto-fill,200px);-ms-flex-pack:space-evenly;justify-content:space-evenly}"]
             })
         ], GridMenuComponent);
@@ -17557,13 +17637,38 @@
 
     var GridMenuItemComponent = /** @class */ (function () {
         function GridMenuItemComponent() {
+            this.iconIsFromFontAwesome = false;
+            this.clickedGridMenuItem = new core.EventEmitter();
+            this.fontAwesomePrefix = 'fal';
         }
         GridMenuItemComponent.prototype.onClick = function () {
             var _a, _b;
-            if (this.disabled)
+            if (this.disabled) {
                 return;
+            }
             (_b = (_a = this.item).action) === null || _b === void 0 ? void 0 : _b.call(_a);
+            this.clickedGridMenuItem.emit(this.item);
+        };
+        GridMenuItemComponent.prototype.onMouseEnter = function () {
+            if (this.disabled) {
+                return;
+            }
+            this.fontAwesomePrefix = 'fas';
         };
+        GridMenuItemComponent.prototype.onMouseLeave = function () {
+            if (this.disabled) {
+                return;
+            }
+            this.fontAwesomePrefix = 'fal';
+        };
+        Object.defineProperty(GridMenuItemComponent.prototype, "iconFontAwesomeClassName", {
+            get: function () {
+                var prefix = this.item.active ? 'fas' : this.fontAwesomePrefix;
+                return prefix + " " + this.item.icon;
+            },
+            enumerable: true,
+            configurable: true
+        });
         Object.defineProperty(GridMenuItemComponent.prototype, "initialLetter", {
             get: function () {
                 var initialLetter = "";
@@ -17581,7 +17686,8 @@
         });
         Object.defineProperty(GridMenuItemComponent.prototype, "disabled", {
             get: function () {
-                return typeof this.item.disabled === "function" ? !!this.item.disabled() : !!this.item.disabled;
+                var _a, _b;
+                return typeof ((_a = this.item) === null || _a === void 0 ? void 0 : _a.disabled) === "function" ? !!this.item.disabled() : !!((_b = this.item) === null || _b === void 0 ? void 0 : _b.disabled);
             },
             enumerable: true,
             configurable: true
@@ -17589,11 +17695,17 @@
         __decorate([
             core.Input()
         ], GridMenuItemComponent.prototype, "item", void 0);
+        __decorate([
+            core.Input()
+        ], GridMenuItemComponent.prototype, "iconIsFromFontAwesome", void 0);
+        __decorate([
+            core.Output()
+        ], GridMenuItemComponent.prototype, "clickedGridMenuItem", void 0);
         GridMenuItemComponent = __decorate([
             core.Component({
                 selector: "s-grid-menu-item",
-                template: "<button\n    class=\"icon-button\"\n    [class.icon-button--disabled]=\"disabled\"\n    (click)=\"onClick()\">\n    <div class=\"icon-wrapper\">\n        <span\n            *ngIf=\"item.icon; else initialsTemplate\"\n            class=\"icon\"\n            style=\"background-image: url('{{ item.icon }}');\">\n        </span>\n        <ng-template #initialsTemplate>\n            <span class=\"initials\">{{ initialLetter }}</span>\n        </ng-template>\n    </div>\n    <span class=\"title\">{{ item.label }}</span>\n</button>\n",
-                styles: [".icon-button{-ms-flex-align:center;align-items:center;background-color:transparent;border:none;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;gap:12px;-ms-flex-pack:center;justify-content:center;padding:5px;transition:transform .3s ease-in-out;width:200px}.icon-button .icon-wrapper{-ms-flex-item-align:center;align-self:center;background-color:#dedce5;border-radius:10px;display:-ms-flexbox;display:flex;height:64px;-ms-flex-pack:center;justify-content:center;overflow:hidden;padding:8px;width:64px}.icon-button .icon-wrapper .icon{background-position:center;background-repeat:no-repeat;background-size:cover;display:inline-block;height:100%;width:100%}.icon-button .icon-wrapper .initials{-ms-flex-align:center;align-items:center;color:#428bca;display:-ms-flexbox;display:flex;font-family:\"Open Sans\",sans-serif;font-size:20px;font-weight:700}.icon-button .title{-webkit-box-orient:vertical;-webkit-line-clamp:2;color:#428bca;display:-webkit-box;font-family:\"Open Sans\",sans-serif;font-size:14px;line-clamp:2;overflow:hidden;text-overflow:ellipsis;width:100%}.icon-button--disabled{cursor:default;opacity:.5}.icon-button:not(.icon-button--disabled):hover{transform:scale(1.05)}"]
+                template: "<button\n    class=\"icon-button\"\n    [class.icon-button-active]=\"item.active\"\n    [class.icon-button--disabled]=\"disabled\"\n    (sActivatedContent)=\"onClick()\"\n    [disabled]=\"disabled\"\n    [tabindex]=\"disabled ? -1 : 0\"\n    [class.icon-font-awesome]=\"iconIsFromFontAwesome\"\n    (mouseenter)=\"onMouseEnter()\"\n    (mouseleave)=\"onMouseLeave()\"\n    *ngIf=\"item\"\n>\n    <div class=\"icon-wrapper\" [class.icon-image]=\"!iconIsFromFontAwesome\">\n        <ng-container *ngIf=\"item.icon\">\n            <i *ngIf=\"iconIsFromFontAwesome\" [class]=\"iconFontAwesomeClassName\"> </i>\n            <span *ngIf=\"!iconIsFromFontAwesome\" class=\"icon\" style=\"background-image: url('{{ item.icon }}');\"> </span>\n        </ng-container>\n\n        <ng-container *ngIf=\"!item.icon\">\n            <span class=\"initials\">{{ initialLetter }}</span>\n        </ng-container>\n    </div>\n    <span class=\"title\">{{ item.label }}</span>\n</button>\n",
+                styles: [".icon-button{-ms-flex-align:center;align-items:center;background-color:transparent;border:none;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;gap:12px;-ms-flex-pack:center;justify-content:center;padding:5px;transition:transform .3s ease-in-out;width:200px}.icon-button:not(.icon-button--disabled):hover .initials,.icon-button:not(.icon-button--disabled):hover .title{font-weight:700}.icon-button.icon-font-awesome .title{padding-bottom:1em}.icon-button.icon-font-awesome:not(.icon-button--disabled):hover{border-radius:10px;background-color:#dedce5}.icon-button.icon-font-awesome .icon-wrapper i{color:#009494}.icon-button .icon-wrapper{-ms-flex-item-align:center;align-self:center;border-radius:10px;display:-ms-flexbox;display:flex;height:64px;-ms-flex-pack:center;justify-content:center;overflow:hidden;padding:8px;width:64px;-ms-flex-align:center;align-items:center;font-size:3em}.icon-button .icon-wrapper.icon-image{background-color:#dedce5}.icon-button .icon-wrapper .icon{background-position:center;background-repeat:no-repeat;background-size:cover;display:inline-block;height:100%;width:100%}.icon-button .icon-wrapper .initials{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;font-family:\"Open Sans\",sans-serif;font-size:20px;font-weight:700}.icon-button .title{-webkit-box-orient:vertical;-webkit-line-clamp:2;display:-webkit-box;font-family:\"Open Sans\",sans-serif;font-size:14px;line-clamp:2;overflow:hidden;text-overflow:ellipsis;width:100%}.icon-button--disabled{cursor:default;opacity:.5}.icon-button:not(.icon-button--disabled):hover{transform:scale(1.05)}.icon-button-active{transform:scale(1.05);border-radius:10px;background-color:#dedce5}.icon-button-active .initials,.icon-button-active .title{font-weight:700}"]
             })
         ], GridMenuItemComponent);
         return GridMenuItemComponent;
@@ -17604,7 +17716,7 @@
         }
         GridMenuModule = __decorate([
             core.NgModule({
-                imports: [common.CommonModule],
+                imports: [common.CommonModule, AccessibilityEventsModule],
                 declarations: [GridMenuItemComponent, GridMenuComponent],
                 exports: [GridMenuItemComponent, GridMenuComponent],
             })
@@ -21434,7 +21546,7 @@
             core.Component({
                 selector: "s-tile",
                 template: "<div\n    [id]=\"id\"\n    class=\"tile\"\n    [attr.tabindex]=\"disabled ? undefined : tabIndex\"\n    [attr.aria-label]=\"label\"\n    [attr.aria-disabled]=\"disabled\"\n    role=\"button\"\n    [ngClass]=\"{ 'tile--disabled': disabled }\"\n    (click)=\"!disabled && onClick.emit($event)\">\n    <div\n        *ngIf=\"imageSource || iconClass\"\n        class=\"thumbnail\">\n        <ng-container *ngIf=\"imageSource\">\n            <div\n                *ngIf=\"!useThumbnail\"\n                class=\"image-icon\">\n                <div\n                    class=\"icon\"\n                    [style.background-image]=\"'url(' + imageSource + ')'\">\n                </div>\n            </div>\n            <s-thumbnail\n                *ngIf=\"useThumbnail\"\n                [id]=\"id + '-thumbnail'\"\n                [imageSource]=\"imageSource\"\n                [imageAlt]=\"imageAlt || label\"\n                size=\"small\"\n                [isTile]=\"true\"\n            >\n            </s-thumbnail>\n        </ng-container>\n\n        <span\n            *ngIf=\"!imageSource && iconClass\"\n            [id]=\"id + '-icon'\"\n            [class]=\"'icon ' + iconClass\"\n            aria-hidden=\"true\">\n        </span>\n    </div>\n    <div\n        *ngIf=\"!iconClass && !imageSource\"\n        class=\"first-letter-container\">\n        <div class=\"first-letter\">\n            <span>{{ initialLetter }}</span>\n        </div>\n    </div>\n\n    <div class=\"info\">\n        <span\n            [id]=\"id + '-title'\"\n            class=\"title\"\n            [sTooltip]=\"label\"\n            tooltipPosition=\"top\"\n            showDelay=\"500\">\n            {{ label }}\n        </span>\n        <span\n            [id]=\"id + '-description'\"\n            class=\"description\"\n            [sTooltip]=\"description\"\n            tooltipPosition=\"top\"\n            showDelay=\"500\">\n            {{ description }}\n        </span>\n    </div>\n</div>\n",
-                styles: [".tile{-ms-flex-align:center;align-items:center;background-color:#fff;border:1px solid #c1c1cc;cursor:pointer;display:-ms-flexbox;display:flex;min-height:80px;overflow:hidden;padding:15px;position:relative;transition:background-color .2s ease-out,border-color .2s ease-out}.tile:focus:not(.tile--disabled),.tile:hover:not(.tile--disabled){background-color:#eeebf2;outline:0}.tile .thumbnail{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-right:15px}.tile .thumbnail .icon{color:#428bca;font-size:2.5rem}.tile .info{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;overflow:hidden}.tile .info .description,.tile .info .title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tile .info .title{color:#428bca;font-size:1.25rem}.tile .info .description{color:#6e7280;font-size:.875rem}.tile .first-letter-container{float:left;margin-right:10px;position:relative;text-align:center}.tile .first-letter-container .first-letter{background-color:#428bca;border-radius:50%;color:#fff;font-size:1.375rem;height:40px;line-height:1.8em;margin:0 auto 5px;width:40px}.tile--disabled{opacity:.5;filter:Alpha(Opacity=50);background-image:none}.tile--disabled,.tile--disabled *{cursor:text!important}.tile .image-icon{padding:8px;background-color:#eeebf2;border-radius:4px}.tile .image-icon .icon{height:32px;width:32px;background-size:cover;background-repeat:no-repeat}"]
+                styles: [".tile{-ms-flex-align:center;align-items:center;background-color:#fff;border:1px solid #c1c1cc;cursor:pointer;display:-ms-flexbox;display:flex;min-height:80px;overflow:hidden;padding:15px;position:relative;transition:background-color .2s ease-out,border-color .2s ease-out}.tile:focus:not(.tile--disabled),.tile:hover:not(.tile--disabled){background-color:#eeebf2;outline:0}.tile .thumbnail{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-right:15px}.tile .thumbnail .icon{color:#428bca;font-size:2.5rem}.tile .info{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;overflow:hidden}.tile .info .description,.tile .info .title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tile .info .title{color:#428bca;font-size:1.25rem}.tile .info .description{color:#6e7280;font-size:.875rem}.tile .first-letter-container{float:left;margin-right:10px;position:relative;text-align:center}.tile .first-letter-container .first-letter{background-color:#428bca;border-radius:50%;color:#fff;font-size:1.375rem;height:40px;line-height:1.8em;margin:0 auto 5px;width:40px}.tile--disabled{opacity:.5;filter:Alpha(Opacity=50);background-image:none}.tile--disabled,.tile--disabled *{cursor:text!important}.tile .image-icon .icon{height:32px;width:32px;background-size:cover;background-repeat:no-repeat}"]
             })
         ], TileComponent);
         return TileComponent;