@seniorsistemas/angular-components 17.30.0-bugfix-sds-382-3a1f0399 → 17.30.0-bugfix-sds-382-9df8362e

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -19147,8 +19147,7 @@ var ObjectCardMainComponent = /** @class */ (function () {
19147
19147
  }());
19148
19148
 
19149
19149
  var ObjectCardComponent = /** @class */ (function () {
19150
- function ObjectCardComponent(elementRef) {
19151
- this.elementRef = elementRef;
19150
+ function ObjectCardComponent() {
19152
19151
  this.id = "s-object-card-" + ObjectCardComponent_1.nextId++;
19153
19152
  this.expanded = false;
19154
19153
  this.expandTooltip = "Abrir painel";
@@ -19160,42 +19159,32 @@ var ObjectCardComponent = /** @class */ (function () {
19160
19159
  this.EnumSeverity = EnumSeverity;
19161
19160
  }
19162
19161
  ObjectCardComponent_1 = ObjectCardComponent;
19163
- ObjectCardComponent.prototype.ngAfterViewInit = function () { };
19164
19162
  ObjectCardComponent.prototype.ngAfterContentChecked = function () {
19165
19163
  this.update();
19166
19164
  };
19167
19165
  ObjectCardComponent.prototype.update = function () {
19168
- var e_1, _a;
19169
19166
  var windowWidth = window.innerWidth;
19170
- var containerWidth = this.elementRef.nativeElement.offsetWidth;
19171
- var mainFieldWidth = containerWidth * 0.3 > 260 ? containerWidth * 0.3 : 260;
19167
+ var containerWidth = this.container.nativeElement.getBoundingClientRect().width;
19168
+ var mainFieldWidth = this.cardMainContainer.nativeElement.getBoundingClientRect().width;
19169
+ var remainingSpace = containerWidth - mainFieldWidth;
19172
19170
  var fieldsMinWidth = this.fieldsMinWidth;
19173
- var expandIconWidth = 50;
19174
- var fieldElementList = this.elementRef.nativeElement.getElementsByClassName("s-object-card-field");
19175
- try {
19176
- for (var fieldElementList_1 = __values(fieldElementList), fieldElementList_1_1 = fieldElementList_1.next(); !fieldElementList_1_1.done; fieldElementList_1_1 = fieldElementList_1.next()) {
19177
- var element = fieldElementList_1_1.value;
19178
- element.style.minWidth = this.fieldsMinWidth + "px";
19179
- }
19180
- }
19181
- catch (e_1_1) { e_1 = { error: e_1_1 }; }
19182
- finally {
19183
- try {
19184
- if (fieldElementList_1_1 && !fieldElementList_1_1.done && (_a = fieldElementList_1.return)) _a.call(fieldElementList_1);
19185
- }
19186
- finally { if (e_1) throw e_1.error; }
19187
- }
19171
+ var expandIconWidth = this.iconContainer.nativeElement.getBoundingClientRect().width;
19188
19172
  var maxFieldQtd;
19189
- if (windowWidth <= Breakpoints.SM_MAX)
19173
+ if (windowWidth <= Breakpoints.SM_MAX) {
19190
19174
  maxFieldQtd = 0;
19191
- else
19192
- maxFieldQtd = Math.floor((containerWidth - mainFieldWidth) / fieldsMinWidth);
19193
- if (maxFieldQtd && maxFieldQtd < this.fields.length) {
19194
- maxFieldQtd = Math.floor((containerWidth - mainFieldWidth - expandIconWidth) / fieldsMinWidth);
19175
+ }
19176
+ else {
19177
+ maxFieldQtd = Math.floor((remainingSpace) / fieldsMinWidth);
19178
+ }
19179
+ var hasExpandIcon = maxFieldQtd && maxFieldQtd < this.fields.length;
19180
+ if (hasExpandIcon) {
19181
+ remainingSpace = remainingSpace - expandIconWidth;
19182
+ maxFieldQtd = Math.floor((remainingSpace) / fieldsMinWidth);
19195
19183
  }
19196
19184
  this.maxVisibleFields = maxFieldQtd;
19197
- if (maxFieldQtd >= this.fields.length && this.expanded)
19185
+ if (maxFieldQtd >= this.fields.length && this.expanded) {
19198
19186
  this.collapse();
19187
+ }
19199
19188
  };
19200
19189
  ObjectCardComponent.prototype.toggle = function () {
19201
19190
  this.expanded ? this.collapse() : this.expand();
@@ -19210,9 +19199,6 @@ var ObjectCardComponent = /** @class */ (function () {
19210
19199
  };
19211
19200
  var ObjectCardComponent_1;
19212
19201
  ObjectCardComponent.nextId = 0;
19213
- ObjectCardComponent.ctorParameters = function () { return [
19214
- { type: ElementRef }
19215
- ]; };
19216
19202
  __decorate([
19217
19203
  Input()
19218
19204
  ], ObjectCardComponent.prototype, "id", void 0);
@@ -19243,10 +19229,19 @@ var ObjectCardComponent = /** @class */ (function () {
19243
19229
  __decorate([
19244
19230
  Input()
19245
19231
  ], ObjectCardComponent.prototype, "borderButtonOptions", void 0);
19232
+ __decorate([
19233
+ ViewChild('contentContainer', { static: true })
19234
+ ], ObjectCardComponent.prototype, "container", void 0);
19235
+ __decorate([
19236
+ ViewChild('cardMainContainer', { static: true })
19237
+ ], ObjectCardComponent.prototype, "cardMainContainer", void 0);
19238
+ __decorate([
19239
+ ViewChild('iconContainer', { static: true })
19240
+ ], ObjectCardComponent.prototype, "iconContainer", void 0);
19246
19241
  ObjectCardComponent = ObjectCardComponent_1 = __decorate([
19247
19242
  Component({
19248
19243
  selector: "s-object-card",
19249
- 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=\"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\">\n <ng-container\n *ngTemplateOutlet=\"field.content\"\n ></ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n</div>\n",
19244
+ 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",
19250
19245
  animations: [
19251
19246
  trigger("expandableContent", [
19252
19247
  state("*", style$7({
@@ -19272,7 +19267,7 @@ var ObjectCardComponent = /** @class */ (function () {
19272
19267
  ]),
19273
19268
  ]),
19274
19269
  ],
19275
- 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)}}.childlist{width:100%;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:1em;gap:1em}"]
19270
+ 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{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}"]
19276
19271
  })
19277
19272
  ], ObjectCardComponent);
19278
19273
  return ObjectCardComponent;