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

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.
@@ -19293,8 +19293,7 @@
19293
19293
  }());
19294
19294
 
19295
19295
  var ObjectCardComponent = /** @class */ (function () {
19296
- function ObjectCardComponent(elementRef) {
19297
- this.elementRef = elementRef;
19296
+ function ObjectCardComponent() {
19298
19297
  this.id = "s-object-card-" + ObjectCardComponent_1.nextId++;
19299
19298
  this.expanded = false;
19300
19299
  this.expandTooltip = "Abrir painel";
@@ -19306,42 +19305,36 @@
19306
19305
  this.EnumSeverity = exports.EnumSeverity;
19307
19306
  }
19308
19307
  ObjectCardComponent_1 = ObjectCardComponent;
19309
- ObjectCardComponent.prototype.ngAfterViewInit = function () { };
19310
19308
  ObjectCardComponent.prototype.ngAfterContentChecked = function () {
19311
19309
  this.update();
19312
19310
  };
19313
19311
  ObjectCardComponent.prototype.update = function () {
19314
- var e_1, _a;
19315
19312
  var windowWidth = window.innerWidth;
19316
- var containerWidth = this.elementRef.nativeElement.offsetWidth;
19317
- var mainFieldWidth = containerWidth * 0.3 > 260 ? containerWidth * 0.3 : 260;
19313
+ var containerWidth = this.container.nativeElement.getBoundingClientRect().width;
19314
+ var mainFieldWidth = this.cardMainContainer.nativeElement.getBoundingClientRect().width;
19315
+ var remainingSpace = containerWidth - mainFieldWidth;
19318
19316
  var fieldsMinWidth = this.fieldsMinWidth;
19319
- var expandIconWidth = 50;
19320
- var fieldElementList = this.elementRef.nativeElement.getElementsByClassName("s-object-card-field");
19321
- try {
19322
- for (var fieldElementList_1 = __values(fieldElementList), fieldElementList_1_1 = fieldElementList_1.next(); !fieldElementList_1_1.done; fieldElementList_1_1 = fieldElementList_1.next()) {
19323
- var element = fieldElementList_1_1.value;
19324
- element.style.minWidth = this.fieldsMinWidth + "px";
19325
- }
19326
- }
19327
- catch (e_1_1) { e_1 = { error: e_1_1 }; }
19328
- finally {
19329
- try {
19330
- if (fieldElementList_1_1 && !fieldElementList_1_1.done && (_a = fieldElementList_1.return)) _a.call(fieldElementList_1);
19331
- }
19332
- finally { if (e_1) throw e_1.error; }
19333
- }
19317
+ var expandIconWidth = this.iconContainer.nativeElement.getBoundingClientRect().width;
19334
19318
  var maxFieldQtd;
19335
- if (windowWidth <= Breakpoints.SM_MAX)
19319
+ if (windowWidth <= Breakpoints.SM_MAX) {
19336
19320
  maxFieldQtd = 0;
19337
- else
19338
- maxFieldQtd = Math.floor((containerWidth - mainFieldWidth) / fieldsMinWidth);
19339
- if (maxFieldQtd && maxFieldQtd < this.fields.length) {
19340
- maxFieldQtd = Math.floor((containerWidth - mainFieldWidth - expandIconWidth) / fieldsMinWidth);
19321
+ }
19322
+ else {
19323
+ maxFieldQtd = Math.floor((remainingSpace) / fieldsMinWidth);
19324
+ }
19325
+ var hasExpandIcon = maxFieldQtd && maxFieldQtd < this.fields.length;
19326
+ if (hasExpandIcon) {
19327
+ this.iconContainer.nativeElement.style.display = 'flex';
19328
+ remainingSpace = remainingSpace - expandIconWidth;
19329
+ maxFieldQtd = Math.floor((remainingSpace) / fieldsMinWidth);
19330
+ }
19331
+ else {
19332
+ this.iconContainer.nativeElement.style.display = 'none';
19341
19333
  }
19342
19334
  this.maxVisibleFields = maxFieldQtd;
19343
- if (maxFieldQtd >= this.fields.length && this.expanded)
19335
+ if (maxFieldQtd >= this.fields.length && this.expanded) {
19344
19336
  this.collapse();
19337
+ }
19345
19338
  };
19346
19339
  ObjectCardComponent.prototype.toggle = function () {
19347
19340
  this.expanded ? this.collapse() : this.expand();
@@ -19356,9 +19349,6 @@
19356
19349
  };
19357
19350
  var ObjectCardComponent_1;
19358
19351
  ObjectCardComponent.nextId = 0;
19359
- ObjectCardComponent.ctorParameters = function () { return [
19360
- { type: core.ElementRef }
19361
- ]; };
19362
19352
  __decorate([
19363
19353
  core.Input()
19364
19354
  ], ObjectCardComponent.prototype, "id", void 0);
@@ -19389,10 +19379,19 @@
19389
19379
  __decorate([
19390
19380
  core.Input()
19391
19381
  ], ObjectCardComponent.prototype, "borderButtonOptions", void 0);
19382
+ __decorate([
19383
+ core.ViewChild('contentContainer', { static: true })
19384
+ ], ObjectCardComponent.prototype, "container", void 0);
19385
+ __decorate([
19386
+ core.ViewChild('cardMainContainer', { static: true })
19387
+ ], ObjectCardComponent.prototype, "cardMainContainer", void 0);
19388
+ __decorate([
19389
+ core.ViewChild('iconContainer', { static: true })
19390
+ ], ObjectCardComponent.prototype, "iconContainer", void 0);
19392
19391
  ObjectCardComponent = ObjectCardComponent_1 = __decorate([
19393
19392
  core.Component({
19394
19393
  selector: "s-object-card",
19395
- 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",
19394
+ 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",
19396
19395
  animations: [
19397
19396
  animations.trigger("expandableContent", [
19398
19397
  animations.state("*", animations.style({
@@ -19418,7 +19417,7 @@
19418
19417
  ]),
19419
19418
  ]),
19420
19419
  ],
19421
- 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}"]
19420
+ 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:-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}"]
19422
19421
  })
19423
19422
  ], ObjectCardComponent);
19424
19423
  return ObjectCardComponent;