@seniorsistemas/angular-components 17.31.0 → 17.31.1
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.
- package/bundles/seniorsistemas-angular-components.umd.js +31 -46
- package/bundles/seniorsistemas-angular-components.umd.js.map +1 -1
- package/bundles/seniorsistemas-angular-components.umd.min.js +1 -1
- package/bundles/seniorsistemas-angular-components.umd.min.js.map +1 -1
- package/components/object-card/object-card.component.d.ts +5 -6
- package/components/utils/breakpoints.d.ts +7 -7
- package/esm2015/components/object-card/object-card.component.js +33 -37
- package/esm2015/components/utils/breakpoints.js +1 -1
- package/esm5/components/object-card/object-card.component.js +34 -49
- package/esm5/components/utils/breakpoints.js +1 -1
- package/fesm2015/seniorsistemas-angular-components.js +31 -35
- package/fesm2015/seniorsistemas-angular-components.js.map +1 -1
- package/fesm5/seniorsistemas-angular-components.js +31 -46
- package/fesm5/seniorsistemas-angular-components.js.map +1 -1
- package/package.json +1 -1
- package/seniorsistemas-angular-components.metadata.json +1 -1
|
@@ -19320,8 +19320,7 @@
|
|
|
19320
19320
|
}());
|
|
19321
19321
|
|
|
19322
19322
|
var ObjectCardComponent = /** @class */ (function () {
|
|
19323
|
-
function ObjectCardComponent(
|
|
19324
|
-
this.elementRef = elementRef;
|
|
19323
|
+
function ObjectCardComponent() {
|
|
19325
19324
|
this.id = "s-object-card-" + ObjectCardComponent_1.nextId++;
|
|
19326
19325
|
this.expanded = false;
|
|
19327
19326
|
this.expandTooltip = "Abrir painel";
|
|
@@ -19333,43 +19332,36 @@
|
|
|
19333
19332
|
this.EnumSeverity = exports.EnumSeverity;
|
|
19334
19333
|
}
|
|
19335
19334
|
ObjectCardComponent_1 = ObjectCardComponent;
|
|
19336
|
-
ObjectCardComponent.prototype.ngAfterViewInit = function () {
|
|
19337
|
-
};
|
|
19338
19335
|
ObjectCardComponent.prototype.ngAfterContentChecked = function () {
|
|
19339
19336
|
this.update();
|
|
19340
19337
|
};
|
|
19341
19338
|
ObjectCardComponent.prototype.update = function () {
|
|
19342
|
-
var e_1, _a;
|
|
19343
19339
|
var windowWidth = window.innerWidth;
|
|
19344
|
-
var containerWidth = this.
|
|
19345
|
-
var mainFieldWidth =
|
|
19340
|
+
var containerWidth = this.container.nativeElement.getBoundingClientRect().width;
|
|
19341
|
+
var mainFieldWidth = this.cardMainContainer.nativeElement.getBoundingClientRect().width;
|
|
19342
|
+
var remainingSpace = containerWidth - mainFieldWidth;
|
|
19346
19343
|
var fieldsMinWidth = this.fieldsMinWidth;
|
|
19347
|
-
var expandIconWidth =
|
|
19348
|
-
var fieldElementList = this.elementRef.nativeElement.getElementsByClassName("s-object-card-field");
|
|
19349
|
-
try {
|
|
19350
|
-
for (var fieldElementList_1 = __values(fieldElementList), fieldElementList_1_1 = fieldElementList_1.next(); !fieldElementList_1_1.done; fieldElementList_1_1 = fieldElementList_1.next()) {
|
|
19351
|
-
var element = fieldElementList_1_1.value;
|
|
19352
|
-
element.style.minWidth = this.fieldsMinWidth + "px";
|
|
19353
|
-
}
|
|
19354
|
-
}
|
|
19355
|
-
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
19356
|
-
finally {
|
|
19357
|
-
try {
|
|
19358
|
-
if (fieldElementList_1_1 && !fieldElementList_1_1.done && (_a = fieldElementList_1.return)) _a.call(fieldElementList_1);
|
|
19359
|
-
}
|
|
19360
|
-
finally { if (e_1) throw e_1.error; }
|
|
19361
|
-
}
|
|
19344
|
+
var expandIconWidth = this.iconContainer.nativeElement.getBoundingClientRect().width;
|
|
19362
19345
|
var maxFieldQtd;
|
|
19363
|
-
if (windowWidth <= Breakpoints.SM_MAX)
|
|
19346
|
+
if (windowWidth <= Breakpoints.SM_MAX) {
|
|
19364
19347
|
maxFieldQtd = 0;
|
|
19365
|
-
|
|
19366
|
-
|
|
19367
|
-
|
|
19368
|
-
|
|
19348
|
+
}
|
|
19349
|
+
else {
|
|
19350
|
+
maxFieldQtd = Math.floor((remainingSpace) / fieldsMinWidth);
|
|
19351
|
+
}
|
|
19352
|
+
var hasExpandIcon = maxFieldQtd && maxFieldQtd < this.fields.length;
|
|
19353
|
+
if (hasExpandIcon) {
|
|
19354
|
+
this.iconContainer.nativeElement.style.display = 'flex';
|
|
19355
|
+
remainingSpace = remainingSpace - expandIconWidth;
|
|
19356
|
+
maxFieldQtd = Math.floor((remainingSpace) / fieldsMinWidth);
|
|
19357
|
+
}
|
|
19358
|
+
else {
|
|
19359
|
+
this.iconContainer.nativeElement.style.display = 'none';
|
|
19369
19360
|
}
|
|
19370
19361
|
this.maxVisibleFields = maxFieldQtd;
|
|
19371
|
-
if (maxFieldQtd >= this.fields.length && this.expanded)
|
|
19362
|
+
if (maxFieldQtd >= this.fields.length && this.expanded) {
|
|
19372
19363
|
this.collapse();
|
|
19364
|
+
}
|
|
19373
19365
|
};
|
|
19374
19366
|
ObjectCardComponent.prototype.toggle = function () {
|
|
19375
19367
|
this.expanded ? this.collapse() : this.expand();
|
|
@@ -19382,24 +19374,8 @@
|
|
|
19382
19374
|
this.expanded = false;
|
|
19383
19375
|
this.expandedChange.emit(this.expanded);
|
|
19384
19376
|
};
|
|
19385
|
-
ObjectCardComponent.prototype.getExpandedFieldWidth = function () {
|
|
19386
|
-
var containerWidth = this.elementRef.nativeElement.offsetWidth;
|
|
19387
|
-
var fieldsPerRow;
|
|
19388
|
-
if (containerWidth <= Breakpoints.SM_MAX)
|
|
19389
|
-
fieldsPerRow = 1;
|
|
19390
|
-
else if (containerWidth <= Breakpoints.MD_MAX)
|
|
19391
|
-
fieldsPerRow = 2;
|
|
19392
|
-
else if (containerWidth <= Breakpoints.LG_MAX)
|
|
19393
|
-
fieldsPerRow = 4;
|
|
19394
|
-
else
|
|
19395
|
-
fieldsPerRow = 6;
|
|
19396
|
-
return 12 / fieldsPerRow;
|
|
19397
|
-
};
|
|
19398
19377
|
var ObjectCardComponent_1;
|
|
19399
19378
|
ObjectCardComponent.nextId = 0;
|
|
19400
|
-
ObjectCardComponent.ctorParameters = function () { return [
|
|
19401
|
-
{ type: core.ElementRef }
|
|
19402
|
-
]; };
|
|
19403
19379
|
__decorate([
|
|
19404
19380
|
core.Input()
|
|
19405
19381
|
], ObjectCardComponent.prototype, "id", void 0);
|
|
@@ -19430,10 +19406,19 @@
|
|
|
19430
19406
|
__decorate([
|
|
19431
19407
|
core.Input()
|
|
19432
19408
|
], ObjectCardComponent.prototype, "borderButtonOptions", void 0);
|
|
19409
|
+
__decorate([
|
|
19410
|
+
core.ViewChild('contentContainer', { static: true })
|
|
19411
|
+
], ObjectCardComponent.prototype, "container", void 0);
|
|
19412
|
+
__decorate([
|
|
19413
|
+
core.ViewChild('cardMainContainer', { static: true })
|
|
19414
|
+
], ObjectCardComponent.prototype, "cardMainContainer", void 0);
|
|
19415
|
+
__decorate([
|
|
19416
|
+
core.ViewChild('iconContainer', { static: true })
|
|
19417
|
+
], ObjectCardComponent.prototype, "iconContainer", void 0);
|
|
19433
19418
|
ObjectCardComponent = ObjectCardComponent_1 = __decorate([
|
|
19434
19419
|
core.Component({
|
|
19435
19420
|
selector: "s-object-card",
|
|
19436
|
-
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\"
|
|
19421
|
+
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",
|
|
19437
19422
|
animations: [
|
|
19438
19423
|
animations.trigger("expandableContent", [
|
|
19439
19424
|
animations.state("*", animations.style({
|
|
@@ -19459,7 +19444,7 @@
|
|
|
19459
19444
|
]),
|
|
19460
19445
|
]),
|
|
19461
19446
|
],
|
|
19462
|
-
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:
|
|
19447
|
+
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}"]
|
|
19463
19448
|
})
|
|
19464
19449
|
], ObjectCardComponent);
|
|
19465
19450
|
return ObjectCardComponent;
|