@seniorsistemas/angular-components 17.30.1 → 17.31.1

package/fesm5/seniorsistemas-angular-components.js

@@ -1,4 +1,4 @@
-import { __decorate, __assign, __extends, __read, __spread, __awaiter, __generator, __param, __values, __rest } from 'tslib';
+import { __decorate, __values, __assign, __extends, __read, __spread, __awaiter, __generator, __param, __rest } from 'tslib';
 import { EventEmitter, Input, Output, Component, ContentChildren, ViewChild, HostListener, forwardRef, NgModule, ɵɵdefineInjectable, Injectable, ElementRef, ApplicationRef, ComponentFactoryResolver, Injector, Renderer2, Directive, TemplateRef, ViewContainerRef, Pipe, ɵɵinject, HostBinding, ChangeDetectorRef, ViewChildren, InjectionToken, Inject, PLATFORM_ID, KeyValueDiffers, ViewEncapsulation, INJECTOR, NgZone, ContentChild, Optional } from '@angular/core';
 import { trigger, transition, style as style$7, animate, state, group, query, animateChild, stagger } from '@angular/animations';
 import { Subject, of, from, ReplaySubject, throwError, fromEvent, forkJoin, pipe } from 'rxjs';
@@ -182,68 +182,90 @@ var AccordionPanelComponent = /** @class */ (function () {
 var AccordionComponent = /** @class */ (function () {
     function AccordionComponent() {
         this.multiple = false;
-        this._unsubscribe$ = new Subject();
-        this._panels = [];
+        this.unsubscribe$ = new Subject();
+        this.panels = [];
     }
+    AccordionComponent.prototype.ngOnInit = function () {
+        this.validateInputs();
+    };
     AccordionComponent.prototype.ngAfterContentInit = function () {
-        this._panels = this.panelsComponents.toArray();
-        this._openSubs = new Array(this._panels.length);
-        this._setBehavior(this.multiple);
-        this._setupTabs();
+        this.panels = this.panelsComponents.toArray();
+        this.openSubs = new Array(this.panels.length);
+        this.setBehavior(this.multiple);
+        this.setupTabs();
     };
     AccordionComponent.prototype.ngOnChanges = function (changes) {
         if (changes.multiple) {
-            this._setBehavior(changes.multiple.currentValue);
+            this.setBehavior(changes.multiple.currentValue);
         }
     };
     AccordionComponent.prototype.ngOnDestroy = function () {
-        this._unsubscribe$.next();
-        this._unsubscribe$.complete();
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
     };
-    AccordionComponent.prototype._setupTabs = function () {
-        var _a;
-        if ((_a = this._panels) === null || _a === void 0 ? void 0 : _a.length) {
+    AccordionComponent.prototype.validateInputs = function () {
+        if (!this.multiple && Array.isArray(this.activeIndex)) {
+            throw new Error("The activeIndex should not be an array when multiple is set to false.");
+        }
+    };
+    AccordionComponent.prototype.setupTabs = function () {
+        var e_1, _a;
+        var _this = this;
+        var _b;
+        if ((_b = this.panels) === null || _b === void 0 ? void 0 : _b.length) {
             if (this.activeIndex !== undefined && this.activeIndex !== null) {
-                var activeTab = this._panels[this.activeIndex];
-                if (!activeTab) {
+                var activeTabs = Array.isArray(this.activeIndex)
+                    ? this.panels.filter(function (_, index) { return _this.activeIndex.includes(index); })
+                    : [this.panels[this.activeIndex]];
+                if (activeTabs.length === 0) {
                     throw new Error("activeIndex does not represent any panel.");
                 }
-                if (!activeTab.disabled) {
-                    this._panels[this.activeIndex].isOpen = true;
+                try {
+                    for (var activeTabs_1 = __values(activeTabs), activeTabs_1_1 = activeTabs_1.next(); !activeTabs_1_1.done; activeTabs_1_1 = activeTabs_1.next()) {
+                        var activeTab = activeTabs_1_1.value;
+                        if (!activeTab.disabled) {
+                            activeTab.isOpen = true;
+                        }
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (activeTabs_1_1 && !activeTabs_1_1.done && (_a = activeTabs_1.return)) _a.call(activeTabs_1);
+                    }
+                    finally { if (e_1) throw e_1.error; }
                 }
             }
         }
     };
-    AccordionComponent.prototype._closeOtherTabs = function (exception) {
-        this._panels.forEach(function (panel, index) {
+    AccordionComponent.prototype.closeOtherTabs = function (exception) {
+        this.panels.forEach(function (panel, index) {
             if (index !== exception) {
                 panel.isOpen = false;
             }
         });
     };
-    AccordionComponent.prototype._setBehavior = function (multiple) {
+    AccordionComponent.prototype.setBehavior = function (multiple) {
         if (multiple) {
-            this._enableMultiplePanelBehavior();
+            this.enableMultiplePanelBehavior();
         }
         else {
-            this._enableSinglePanelBehavior();
+            this.enableSinglePanelBehavior();
         }
     };
-    AccordionComponent.prototype._enableSinglePanelBehavior = function () {
+    AccordionComponent.prototype.enableSinglePanelBehavior = function () {
         var _this = this;
-        this._panels.forEach(function (panel, index) {
-            _this._openSubs[index] = panel.panelOpened
-                .pipe(takeUntil(_this._unsubscribe$))
-                .subscribe(function () {
-                _this._closeOtherTabs(index);
+        this.panels.forEach(function (panel, index) {
+            _this.openSubs[index] = panel.panelOpened.pipe(takeUntil(_this.unsubscribe$)).subscribe(function () {
+                _this.closeOtherTabs(index);
             });
         });
     };
-    AccordionComponent.prototype._enableMultiplePanelBehavior = function () {
+    AccordionComponent.prototype.enableMultiplePanelBehavior = function () {
         var _this = this;
-        this._panels.forEach(function (_, index) {
-            if (_this._openSubs[index]) {
-                _this._openSubs[index].unsubscribe();
+        this.panels.forEach(function (_, index) {
+            if (_this.openSubs[index]) {
+                _this.openSubs[index].unsubscribe();
             }
         });
     };
@@ -19152,8 +19174,7 @@ var ObjectCardMainComponent = /** @class */ (function () {
 }());
 
 var ObjectCardComponent = /** @class */ (function () {
-    function ObjectCardComponent(elementRef) {
-        this.elementRef = elementRef;
+    function ObjectCardComponent() {
         this.id = "s-object-card-" + ObjectCardComponent_1.nextId++;
         this.expanded = false;
         this.expandTooltip = "Abrir painel";
@@ -19165,43 +19186,36 @@ var ObjectCardComponent = /** @class */ (function () {
         this.EnumSeverity = EnumSeverity;
     }
     ObjectCardComponent_1 = ObjectCardComponent;
-    ObjectCardComponent.prototype.ngAfterViewInit = function () {
-    };
     ObjectCardComponent.prototype.ngAfterContentChecked = function () {
         this.update();
     };
     ObjectCardComponent.prototype.update = function () {
-        var e_1, _a;
         var windowWidth = window.innerWidth;
-        var containerWidth = this.elementRef.nativeElement.offsetWidth;
-        var mainFieldWidth = containerWidth * 0.3 > 260 ? containerWidth * 0.3 : 260;
+        var containerWidth = this.container.nativeElement.getBoundingClientRect().width;
+        var mainFieldWidth = this.cardMainContainer.nativeElement.getBoundingClientRect().width;
+        var remainingSpace = containerWidth - mainFieldWidth;
         var fieldsMinWidth = this.fieldsMinWidth;
-        var expandIconWidth = 50;
-        var fieldElementList = this.elementRef.nativeElement.getElementsByClassName("s-object-card-field");
-        try {
-            for (var fieldElementList_1 = __values(fieldElementList), fieldElementList_1_1 = fieldElementList_1.next(); !fieldElementList_1_1.done; fieldElementList_1_1 = fieldElementList_1.next()) {
-                var element = fieldElementList_1_1.value;
-                element.style.minWidth = this.fieldsMinWidth + "px";
-            }
-        }
-        catch (e_1_1) { e_1 = { error: e_1_1 }; }
-        finally {
-            try {
-                if (fieldElementList_1_1 && !fieldElementList_1_1.done && (_a = fieldElementList_1.return)) _a.call(fieldElementList_1);
-            }
-            finally { if (e_1) throw e_1.error; }
-        }
+        var expandIconWidth = this.iconContainer.nativeElement.getBoundingClientRect().width;
         var maxFieldQtd;
-        if (windowWidth <= Breakpoints.SM_MAX)
+        if (windowWidth <= Breakpoints.SM_MAX) {
             maxFieldQtd = 0;
-        else
-            maxFieldQtd = Math.floor((containerWidth - mainFieldWidth) / fieldsMinWidth);
-        if (maxFieldQtd && maxFieldQtd < this.fields.length) {
-            maxFieldQtd = Math.floor((containerWidth - mainFieldWidth - expandIconWidth) / fieldsMinWidth);
+        }
+        else {
+            maxFieldQtd = Math.floor((remainingSpace) / fieldsMinWidth);
+        }
+        var hasExpandIcon = maxFieldQtd && maxFieldQtd < this.fields.length;
+        if (hasExpandIcon) {
+            this.iconContainer.nativeElement.style.display = 'flex';
+            remainingSpace = remainingSpace - expandIconWidth;
+            maxFieldQtd = Math.floor((remainingSpace) / fieldsMinWidth);
+        }
+        else {
+            this.iconContainer.nativeElement.style.display = 'none';
         }
         this.maxVisibleFields = maxFieldQtd;
-        if (maxFieldQtd >= this.fields.length && this.expanded)
+        if (maxFieldQtd >= this.fields.length && this.expanded) {
             this.collapse();
+        }
     };
     ObjectCardComponent.prototype.toggle = function () {
         this.expanded ? this.collapse() : this.expand();
@@ -19214,24 +19228,8 @@ var ObjectCardComponent = /** @class */ (function () {
         this.expanded = false;
         this.expandedChange.emit(this.expanded);
     };
-    ObjectCardComponent.prototype.getExpandedFieldWidth = function () {
-        var containerWidth = this.elementRef.nativeElement.offsetWidth;
-        var fieldsPerRow;
-        if (containerWidth <= Breakpoints.SM_MAX)
-            fieldsPerRow = 1;
-        else if (containerWidth <= Breakpoints.MD_MAX)
-            fieldsPerRow = 2;
-        else if (containerWidth <= Breakpoints.LG_MAX)
-            fieldsPerRow = 4;
-        else
-            fieldsPerRow = 6;
-        return 12 / fieldsPerRow;
-    };
     var ObjectCardComponent_1;
     ObjectCardComponent.nextId = 0;
-    ObjectCardComponent.ctorParameters = function () { return [
-        { type: ElementRef }
-    ]; };
     __decorate([
         Input()
     ], ObjectCardComponent.prototype, "id", void 0);
@@ -19262,10 +19260,19 @@ var ObjectCardComponent = /** @class */ (function () {
     __decorate([
         Input()
     ], ObjectCardComponent.prototype, "borderButtonOptions", void 0);
+    __decorate([
+        ViewChild('contentContainer', { static: true })
+    ], ObjectCardComponent.prototype, "container", void 0);
+    __decorate([
+        ViewChild('cardMainContainer', { static: true })
+    ], ObjectCardComponent.prototype, "cardMainContainer", void 0);
+    __decorate([
+        ViewChild('iconContainer', { static: true })
+    ], ObjectCardComponent.prototype, "iconContainer", void 0);
     ObjectCardComponent = ObjectCardComponent_1 = __decorate([
         Component({
             selector: "s-object-card",
-            template: "<div [id]=\"id\" class=\"container\">\n    <s-border-button\n        *ngIf=\"\n            borderButtonOptions?.visible\n                ? borderButtonOptions?.visible(severity)\n                : false\n        \"\n        [severity]=\"severity\"\n        [options]=\"borderButtonOptions\"\n        class=\"object-card__border-button\"\n        [@BorderButtonAnimation]\n    ></s-border-button>\n\n    <div\n        [id]=\"id + '-main-container'\"\n        class=\"main-container\"\n        [ngClass]=\"{\n            'with-hidden-fields': fields.length > maxVisibleFields,\n            'with-visible-fields': fields.length && maxVisibleFields,\n            'main-container--severity-default': severity === EnumSeverity.Default,\n            'main-container--severity-info': severity === EnumSeverity.Info,\n            'main-container--severity-warn': severity === EnumSeverity.Warn,\n            'main-container--severity-error': severity === EnumSeverity.Error,\n            'main-container--severity-success': severity == EnumSeverity.Success\n        }\"\n    >\n        <div class=\"object-content\">\n            <div class=\"s-object-card-main\"><ng-content select=\"s-object-card-main\"></ng-content></div>\n\n            <div class=\"divider\" *ngIf=\"maxVisibleFields && fields.length\"></div>\n\n            <div *ngFor=\"let field of (fields.toArray() | slice: 0:maxVisibleFields)\" class=\"s-object-card-field\">\n                <ng-container *ngTemplateOutlet=\"field.content\"></ng-container>\n            </div>\n        </div>\n\n        <div\n            [id]=\"id + '-expand-icon-container'\"\n            class=\"expand-icon-container\"\n            (click)=\"toggle()\"\n            [pTooltip]=\"expanded ? collapseTooltip : expandTooltip\"\n            tooltipPosition=\"top\"\n            [showDelay]=\"500\"\n        >\n            <span [id]=\"id + '-expand-icon'\" class=\"expand-icon fa\" [ngClass]=\"{ 'fa-minus': expanded, 'fa-plus': !expanded }\"></span>\n        </div>\n    </div>\n\n    <div\n        [id]=\"id + '-expandable-container'\"\n        [@expandableContent]=\"expanded\"\n        class=\"expandable-container\"\n        [ngClass]=\"{\n            'expandable-container--severity-default':\n                severity === EnumSeverity.Default,\n            'expandable-container--severity-info': severity === EnumSeverity.Info,\n            'expandable-container--severity-warn': severity === EnumSeverity.Warn,\n            'expandable-container--severity-error': severity === EnumSeverity.Error,\n            'expandable-container--severity-success':\n                severity == EnumSeverity.Success\n        }\"\n    >\n        <div class=\"ui-g ui-g-12\">\n            <ng-container\n                *ngFor=\"\n                    let field of fields.toArray()\n                        | slice : maxVisibleFields : fields.length\n                \"\n            >\n                <div class=\"ui-g-{{ getExpandedFieldWidth() }}\">\n                    <div class=\"s-object-card-field\">\n                        <ng-container\n                            *ngTemplateOutlet=\"field.content\"\n                        ></ng-container>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</div>\n",
+            template: "<div [id]=\"id\" class=\"container\">\n    <s-border-button\n        *ngIf=\"\n            borderButtonOptions?.visible\n                ? borderButtonOptions?.visible(severity)\n                : false\n        \"\n        [severity]=\"severity\"\n        [options]=\"borderButtonOptions\"\n        class=\"object-card__border-button\"\n        [@BorderButtonAnimation]\n    ></s-border-button>\n\n    <div\n        [id]=\"id + '-main-container'\"\n        class=\"main-container\"\n        #contentContainer\n        [ngClass]=\"{\n            'with-hidden-fields': fields.length > maxVisibleFields,\n            'with-visible-fields': fields.length && maxVisibleFields,\n            'main-container--severity-default': severity === EnumSeverity.Default,\n            'main-container--severity-info': severity === EnumSeverity.Info,\n            'main-container--severity-warn': severity === EnumSeverity.Warn,\n            'main-container--severity-error': severity === EnumSeverity.Error,\n            'main-container--severity-success': severity == EnumSeverity.Success\n        }\"\n    >\n        <div class=\"object-content\">\n            <div class=\"s-object-card-main\" #cardMainContainer [style.min-width.px]=\"fieldsMinWidth\">\n                <ng-content select=\"s-object-card-main\"></ng-content>\n            </div>\n\n            <div class=\"divider\" *ngIf=\"maxVisibleFields && fields.length\"></div>\n\n            <div *ngFor=\"let field of (fields.toArray() | slice: 0:maxVisibleFields)\" class=\"s-object-card-field\" [style.min-width.px]=\"fieldsMinWidth\">\n                \n                <ng-container *ngTemplateOutlet=\"field.content\"></ng-container>\n            </div>\n        </div>\n\n        <div\n            #iconContainer\n            [id]=\"id + '-expand-icon-container'\"\n            class=\"expand-icon-container\"\n            (click)=\"toggle()\"\n            [pTooltip]=\"expanded ? collapseTooltip : expandTooltip\"\n            tooltipPosition=\"top\"\n            [showDelay]=\"500\"\n        >\n            <span [id]=\"id + '-expand-icon'\" class=\"expand-icon fa\" [ngClass]=\"{ 'fa-minus': expanded, 'fa-plus': !expanded }\"></span>\n        </div>\n    </div>\n\n    <div\n        [id]=\"id + '-expandable-container'\"\n        [@expandableContent]=\"expanded\"\n        class=\"expandable-container\"\n        [ngClass]=\"{\n            'expandable-container--severity-default':\n                severity === EnumSeverity.Default,\n            'expandable-container--severity-info': severity === EnumSeverity.Info,\n            'expandable-container--severity-warn': severity === EnumSeverity.Warn,\n            'expandable-container--severity-error': severity === EnumSeverity.Error,\n            'expandable-container--severity-success':\n                severity == EnumSeverity.Success\n        }\"\n    >\n        <div class=\"childlist\">\n            <ng-container\n                *ngFor=\"\n                    let field of fields.toArray()\n                        | slice : maxVisibleFields : fields.length\n                \"\n            >\n            <div class=\"s-object-card-field\" [style.min-width.px]=\"fieldsMinWidth\">\n                <ng-container\n                    *ngTemplateOutlet=\"field.content\"\n                ></ng-container>\n            </div>\n            </ng-container>\n        </div>\n    </div>\n</div>\n",
             animations: [
                 trigger("expandableContent", [
                     state("*", style$7({
@@ -19291,7 +19298,7 @@ var ObjectCardComponent = /** @class */ (function () {
                     ]),
                 ]),
             ],
-            styles: [":host{display:block}.container{margin-bottom:20px;position:relative}.main-container{display:-ms-flexbox;display:flex}.expandable-container,.main-container{background-color:#fff;border:1px solid #ccc;position:relative;overflow:hidden;width:100%}.expandable-container--severity-default{border-color:#ccc;border-top:initial}.expandable-container--severity-info{transition:border-color .5s;border-color:#428bca;border-top:initial}.expandable-container--severity-warn{transition:border-color .5s;border-color:#f8931f;border-top:initial}.expandable-container--severity-error{transition:border-color .5s;border-color:#c13018;border-top:initial}.expandable-container--severity-success{transition:border-color .5s;border-color:#0c9348;border-top:initial}.main-container--severity-default{border-color:#ccc}.main-container--severity-info{transition:border-color .5s;border-color:#428bca}.main-container--severity-warn{transition:border-color .5s;border-color:#f8931f}.main-container--severity-error{transition:border-color .5s;border-color:#c13018}.main-container--severity-success{transition:border-color .5s;border-color:#0c9348}.object-card__border-button{position:absolute;top:-13px;right:15px;z-index:1}.expandable-container{border-top:none;box-shadow:inset 0 6px 4px -4px #ddd;margin-top:-1px}.expand-icon-container{display:none;text-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;width:25px;position:absolute;right:15px;height:25px;top:calc(50% - 12px)}.expand-icon{-ms-flex:1;flex:1}.object-content{display:-ms-flexbox;display:flex;width:100%}.s-object-card-main{-ms-flex-negative:0;flex-shrink:0;-ms-flex-positive:1;flex-grow:1;overflow:hidden;padding:15px}.main-container.with-visible-fields .s-object-card-main{max-width:30%}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.main-container.with-visible-fields .s-object-card-main{width:20%}}.s-object-card-field{overflow:hidden;height:100%}.main-container .s-object-card-field{padding:15px}.main-container .divider{width:1px;-ms-flex-negative:0;flex-shrink:0;background-color:#ccc;margin:15px -1px 15px 0}.main-container.with-hidden-fields .object-content{width:calc(100% - 35px)}.main-container.with-hidden-fields .expand-icon-container{display:-ms-flexbox;display:flex}::ng-deep .object-card-button{padding-left:0!important;padding-right:10px!important;border:none!important;height:auto!important;min-width:auto!important;text-align:left!important}@media (max-width:767px){.s-object-card-main{max-width:calc(100% - 50px)}}"]
+            styles: [":host{display:block}:host::ng-deep .sds-badge{height:auto;white-space:normal}.container{margin-bottom:20px;position:relative}.main-container{display:-ms-flexbox;display:flex}.expandable-container,.main-container{background-color:#fff;border:1px solid #ccc;position:relative;overflow:hidden;width:100%}.expandable-container--severity-default{border-color:#ccc;border-top:initial}.expandable-container--severity-info{transition:border-color .5s;border-color:#428bca;border-top:initial}.expandable-container--severity-warn{transition:border-color .5s;border-color:#f8931f;border-top:initial}.expandable-container--severity-error{transition:border-color .5s;border-color:#c13018;border-top:initial}.expandable-container--severity-success{transition:border-color .5s;border-color:#0c9348;border-top:initial}.main-container--severity-default{border-color:#ccc}.main-container--severity-info{transition:border-color .5s;border-color:#428bca}.main-container--severity-warn{transition:border-color .5s;border-color:#f8931f}.main-container--severity-error{transition:border-color .5s;border-color:#c13018}.main-container--severity-success{transition:border-color .5s;border-color:#0c9348}.object-card__border-button{position:absolute;top:-13px;right:15px;z-index:1}.expandable-container{border-top:none;box-shadow:inset 0 6px 4px -4px #ddd;margin-top:-1px}.expand-icon-container{display:-ms-flexbox;display:flex;text-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;padding:12px}.expand-icon{-ms-flex:1;flex:1}.object-content{display:-ms-flexbox;display:flex;width:100%}.s-object-card-main{overflow:hidden;padding:15px}.main-container.with-visible-fields .s-object-card-main{max-width:30%}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.main-container.with-visible-fields .s-object-card-main{width:20%}}.s-object-card-field{overflow:hidden;height:100%}.main-container .s-object-card-field{padding:15px}.main-container .divider{width:1px;-ms-flex-negative:0;flex-shrink:0;background-color:#ccc;margin:15px -1px 15px 0}.main-container.with-hidden-fields .object-content{width:calc(100% - 35px)}.main-container.with-hidden-fields .expand-icon-container{display:-ms-flexbox;display:flex}::ng-deep .object-card-button{padding-left:0!important;padding-right:10px!important;border:none!important;height:auto!important;min-width:auto!important;text-align:left!important}@media (max-width:767px){.s-object-card-main{max-width:calc(100% - 50px)}}.childlist{width:100%;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:1em;gap:1em}"]
         })
     ], ObjectCardComponent);
     return ObjectCardComponent;