@seniorsistemas/angular-components 17.28.0 → 17.28.2

package/fesm5/seniorsistemas-angular-components.js

@@ -53,7 +53,6 @@ import { EditorModule } from 'primeng/editor';
 import { ConfirmationService } from 'primeng/api';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import Cropper from 'cropperjs';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import marked from 'marked';
 import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
 import { FocusTrapFactory, A11yModule } from '@angular/cdk/a11y';
@@ -14045,6 +14044,7 @@ var AccessibilityEventDirective = /** @class */ (function () {
         this.elementRef = elementRef;
         this.sActivatedContent = new EventEmitter();
         this.tabindex = 0;
+        this.disabled = false;
         this.EVENT_LISTENER = function (event) {
             if (event instanceof KeyboardEvent) {
                 var key = event.key;
@@ -14055,11 +14055,13 @@ var AccessibilityEventDirective = /** @class */ (function () {
             }
             _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;
         }
@@ -14089,6 +14091,9 @@ var AccessibilityEventDirective = /** @class */ (function () {
     __decorate([
         Input()
     ], AccessibilityEventDirective.prototype, "tabindex", void 0);
+    __decorate([
+        Input()
+    ], AccessibilityEventDirective.prototype, "disabled", void 0);
     AccessibilityEventDirective = __decorate([
         Directive({
             selector: '[sActivatedContent]'
@@ -14117,7 +14122,7 @@ var FieldsetModule = /** @class */ (function () {
     }
     FieldsetModule = __decorate([
         NgModule({
-            imports: [CommonModule, AccessibilityEventsModule, BrowserAnimationsModule],
+            imports: [CommonModule, AccessibilityEventsModule],
             declarations: [FieldsetComponent$1],
             exports: [FieldsetComponent$1],
         })
@@ -17161,8 +17166,17 @@ var IAInsightCardComponent = /** @class */ (function () {
         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;
@@ -17206,6 +17220,9 @@ var IAInsightCardComponent = /** @class */ (function () {
             .pipe(first(), 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 [
@@ -17229,6 +17246,8 @@ var IAInsightCardComponent = /** @class */ (function () {
 var IAInsightSidebarComponent = /** @class */ (function () {
     function IAInsightSidebarComponent() {
         this.insights = [];
+        this.closedSidebar = new EventEmitter();
+        this.openedSidebar = new EventEmitter();
         this.opened = false;
     }
     IAInsightSidebarComponent.prototype.toggle = function () {
@@ -17236,9 +17255,11 @@ var IAInsightSidebarComponent = /** @class */ (function () {
     };
     IAInsightSidebarComponent.prototype.open = function () {
         this.opened = true;
+        this.openedSidebar.emit();
     };
     IAInsightSidebarComponent.prototype.close = function () {
         this.opened = false;
+        this.closedSidebar.emit();
     };
     __decorate([
         Input()
@@ -17264,6 +17285,12 @@ var IAInsightSidebarComponent = /** @class */ (function () {
     __decorate([
         Input()
     ], IAInsightSidebarComponent.prototype, "noPermissionTemplate", void 0);
+    __decorate([
+        Output()
+    ], IAInsightSidebarComponent.prototype, "closedSidebar", void 0);
+    __decorate([
+        Output()
+    ], IAInsightSidebarComponent.prototype, "openedSidebar", void 0);
     IAInsightSidebarComponent = __decorate([
         Component({
             selector: "s-ia-insight-sidebar",
@@ -17298,6 +17325,8 @@ var IAInsightComponent = /** @class */ (function () {
     function IAInsightComponent() {
         this.insights = [];
         this.hasPermission = true;
+        this.openIAInsight = new EventEmitter();
+        this.closedIAInsight = new EventEmitter();
     }
     IAInsightComponent.prototype.ngAfterContentInit = function () {
         this._getTemplates();
@@ -17308,6 +17337,12 @@ var IAInsightComponent = /** @class */ (function () {
     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(IAInsightTemplateTypes.Intro);
     };
@@ -17341,6 +17376,12 @@ var IAInsightComponent = /** @class */ (function () {
     __decorate([
         Input()
     ], IAInsightComponent.prototype, "noPermissionText", void 0);
+    __decorate([
+        Output()
+    ], IAInsightComponent.prototype, "openIAInsight", void 0);
+    __decorate([
+        Output()
+    ], IAInsightComponent.prototype, "closedIAInsight", void 0);
     __decorate([
         ViewChild(IAInsightSidebarComponent)
     ], IAInsightComponent.prototype, "sidebar", void 0);
@@ -17350,7 +17391,7 @@ var IAInsightComponent = /** @class */ (function () {
     IAInsightComponent = __decorate([
         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);
@@ -17388,22 +17429,60 @@ var IAInsightModule = /** @class */ (function () {
 
 var GridMenuComponent = /** @class */ (function () {
     function GridMenuComponent() {
+        this.useFontAwesomeIcons = false;
         this.itemsArray = [];
+        this.selectable = false;
+        this.selectedChange = new 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([
         Input()
     ], GridMenuComponent.prototype, "items", null);
+    __decorate([
+        Input()
+    ], GridMenuComponent.prototype, "useFontAwesomeIcons", void 0);
+    __decorate([
+        Input()
+    ], GridMenuComponent.prototype, "selectable", void 0);
+    __decorate([
+        Input()
+    ], GridMenuComponent.prototype, "selected", void 0);
+    __decorate([
+        Output()
+    ], GridMenuComponent.prototype, "selectedChange", void 0);
     GridMenuComponent = __decorate([
         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);
@@ -17412,13 +17491,38 @@ var GridMenuComponent = /** @class */ (function () {
 
 var GridMenuItemComponent = /** @class */ (function () {
     function GridMenuItemComponent() {
+        this.iconIsFromFontAwesome = false;
+        this.clickedGridMenuItem = new 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 = "";
@@ -17436,7 +17540,8 @@ var GridMenuItemComponent = /** @class */ (function () {
     });
     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
@@ -17444,11 +17549,17 @@ var GridMenuItemComponent = /** @class */ (function () {
     __decorate([
         Input()
     ], GridMenuItemComponent.prototype, "item", void 0);
+    __decorate([
+        Input()
+    ], GridMenuItemComponent.prototype, "iconIsFromFontAwesome", void 0);
+    __decorate([
+        Output()
+    ], GridMenuItemComponent.prototype, "clickedGridMenuItem", void 0);
     GridMenuItemComponent = __decorate([
         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;
@@ -17459,7 +17570,7 @@ var GridMenuModule = /** @class */ (function () {
     }
     GridMenuModule = __decorate([
         NgModule({
-            imports: [CommonModule],
+            imports: [CommonModule, AccessibilityEventsModule],
             declarations: [GridMenuItemComponent, GridMenuComponent],
             exports: [GridMenuItemComponent, GridMenuComponent],
         })
@@ -21289,7 +21400,7 @@ var TileComponent = /** @class */ (function () {
         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;