@seniorsistemas/angular-components 17.28.0 → 17.28.2

package/fesm2015/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';
@@ -13194,6 +13193,7 @@ let AccessibilityEventDirective = class AccessibilityEventDirective {
         this.elementRef = elementRef;
         this.sActivatedContent = new EventEmitter();
         this.tabindex = 0;
+        this.disabled = false;
         this.EVENT_LISTENER = (event) => {
             if (event instanceof KeyboardEvent) {
                 const key = event.key;
@@ -13204,11 +13204,13 @@ let AccessibilityEventDirective = class AccessibilityEventDirective {
             }
             this.sActivatedContent.next(event);
         };
+    }
+    ngOnInit() {
         this.setTabIndex();
         this.checkAccessbilityEvents();
     }
     setTabIndex() {
-        const hasTabIndex = this.element.tabIndex >= 0;
+        const hasTabIndex = this.element.tabIndex !== 0;
         if (hasTabIndex) {
             return;
         }
@@ -13235,6 +13237,9 @@ __decorate([
 __decorate([
     Input()
 ], AccessibilityEventDirective.prototype, "tabindex", void 0);
+__decorate([
+    Input()
+], AccessibilityEventDirective.prototype, "disabled", void 0);
 AccessibilityEventDirective = __decorate([
     Directive({
         selector: '[sActivatedContent]'
@@ -13257,7 +13262,7 @@ let FieldsetModule = class FieldsetModule {
 };
 FieldsetModule = __decorate([
     NgModule({
-        imports: [CommonModule, AccessibilityEventsModule, BrowserAnimationsModule],
+        imports: [CommonModule, AccessibilityEventsModule],
         declarations: [FieldsetComponent$1],
         exports: [FieldsetComponent$1],
     })
@@ -16092,8 +16097,17 @@ let IAInsightCardComponent = class IAInsightCardComponent {
         this.dislikeSelected = false;
     }
     toggle() {
-        this.open = !this.open;
-        this._requestInsight();
+        const 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();
+        }
     }
     onLikeSelected() {
         var _a, _b;
@@ -16136,6 +16150,9 @@ let IAInsightCardComponent = class IAInsightCardComponent {
             .pipe(first(), finalize(() => (this.isLoading = false)))
             .subscribe((content) => {
             this.content = marked.marked(content);
+            if (this.insight.onContentLoaded) {
+                this.insight.onContentLoaded();
+            }
         });
     }
 };
@@ -16158,6 +16175,8 @@ IAInsightCardComponent = __decorate([
 let IAInsightSidebarComponent = class IAInsightSidebarComponent {
     constructor() {
         this.insights = [];
+        this.closedSidebar = new EventEmitter();
+        this.openedSidebar = new EventEmitter();
         this.opened = false;
     }
     toggle() {
@@ -16165,9 +16184,11 @@ let IAInsightSidebarComponent = class IAInsightSidebarComponent {
     }
     open() {
         this.opened = true;
+        this.openedSidebar.emit();
     }
     close() {
         this.opened = false;
+        this.closedSidebar.emit();
     }
 };
 __decorate([
@@ -16194,6 +16215,12 @@ __decorate([
 __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",
@@ -16223,6 +16250,8 @@ let IAInsightComponent = class IAInsightComponent {
     constructor() {
         this.insights = [];
         this.hasPermission = true;
+        this.openIAInsight = new EventEmitter();
+        this.closedIAInsight = new EventEmitter();
     }
     ngAfterContentInit() {
         this._getTemplates();
@@ -16233,6 +16262,12 @@ let IAInsightComponent = class IAInsightComponent {
     close() {
         this.sidebar.close();
     }
+    onOpenSidebar() {
+        this.openIAInsight.emit();
+    }
+    onCloseSidebar() {
+        this.closedIAInsight.emit();
+    }
     getIntroTemplate() {
         return this._getCustomTemplate(IAInsightTemplateTypes.Intro);
     }
@@ -16267,6 +16302,12 @@ __decorate([
 __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);
@@ -16276,7 +16317,7 @@ __decorate([
 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);
@@ -16309,29 +16350,90 @@ IAInsightModule = __decorate([
 
 let GridMenuComponent = class GridMenuComponent {
     constructor() {
+        this.useFontAwesomeIcons = false;
         this.itemsArray = [];
+        this.selectable = false;
+        this.selectedChange = new EventEmitter();
     }
     set items(items) {
-        this.itemsArray = Array.isArray(items) ? items : [items];
+        if (isNullOrUndefined(items)) {
+            this.itemsArray = [];
+        }
+        else {
+            this.itemsArray = Array.isArray(items) ? items : [items];
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes.selected && changes.selected.isFirstChange()) {
+            if (this.selectable) {
+                this.selected.active = true;
+            }
+        }
+    }
+    onClickGridMenuItem(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);
 
 let GridMenuItemComponent = class GridMenuItemComponent {
+    constructor() {
+        this.iconIsFromFontAwesome = false;
+        this.clickedGridMenuItem = new EventEmitter();
+        this.fontAwesomePrefix = 'fal';
+    }
     onClick() {
         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);
+    }
+    onMouseEnter() {
+        if (this.disabled) {
+            return;
+        }
+        this.fontAwesomePrefix = 'fas';
+    }
+    onMouseLeave() {
+        if (this.disabled) {
+            return;
+        }
+        this.fontAwesomePrefix = 'fal';
+    }
+    get iconFontAwesomeClassName() {
+        const prefix = this.item.active ? 'fas' : this.fontAwesomePrefix;
+        return `${prefix} ${this.item.icon}`;
     }
     get initialLetter() {
         let initialLetter = "";
@@ -16345,17 +16447,24 @@ let GridMenuItemComponent = class GridMenuItemComponent {
         return initialLetter;
     }
     get disabled() {
-        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);
     }
 };
 __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);
 
@@ -16363,7 +16472,7 @@ let GridMenuModule = class GridMenuModule {
 };
 GridMenuModule = __decorate([
     NgModule({
-        imports: [CommonModule],
+        imports: [CommonModule, AccessibilityEventsModule],
         declarations: [GridMenuItemComponent, GridMenuComponent],
         exports: [GridMenuItemComponent, GridMenuComponent],
     })
@@ -19898,7 +20007,7 @@ TileComponent = TileComponent_1 = __decorate([
     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);