@seniorsistemas/angular-components 17.30.1 → 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 +84 -77
- 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/accordion/accordion.component.d.ts +13 -11
- package/components/object-card/object-card.component.d.ts +5 -6
- package/components/utils/breakpoints.d.ts +7 -7
- package/esm2015/components/accordion/accordion.component.js +41 -31
- package/esm2015/components/object-card/object-card.component.js +33 -37
- package/esm2015/components/utils/breakpoints.js +1 -1
- package/esm5/components/accordion/accordion.component.js +55 -33
- 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 +71 -65
- package/fesm2015/seniorsistemas-angular-components.js.map +1 -1
- package/fesm5/seniorsistemas-angular-components.js +85 -78
- package/fesm5/seniorsistemas-angular-components.js.map +1 -1
- package/package.json +1 -1
- package/seniorsistemas-angular-components.metadata.json +1 -1
|
@@ -328,68 +328,90 @@
|
|
|
328
328
|
var AccordionComponent = /** @class */ (function () {
|
|
329
329
|
function AccordionComponent() {
|
|
330
330
|
this.multiple = false;
|
|
331
|
-
this.
|
|
332
|
-
this.
|
|
331
|
+
this.unsubscribe$ = new rxjs.Subject();
|
|
332
|
+
this.panels = [];
|
|
333
333
|
}
|
|
334
|
+
AccordionComponent.prototype.ngOnInit = function () {
|
|
335
|
+
this.validateInputs();
|
|
336
|
+
};
|
|
334
337
|
AccordionComponent.prototype.ngAfterContentInit = function () {
|
|
335
|
-
this.
|
|
336
|
-
this.
|
|
337
|
-
this.
|
|
338
|
-
this.
|
|
338
|
+
this.panels = this.panelsComponents.toArray();
|
|
339
|
+
this.openSubs = new Array(this.panels.length);
|
|
340
|
+
this.setBehavior(this.multiple);
|
|
341
|
+
this.setupTabs();
|
|
339
342
|
};
|
|
340
343
|
AccordionComponent.prototype.ngOnChanges = function (changes) {
|
|
341
344
|
if (changes.multiple) {
|
|
342
|
-
this.
|
|
345
|
+
this.setBehavior(changes.multiple.currentValue);
|
|
343
346
|
}
|
|
344
347
|
};
|
|
345
348
|
AccordionComponent.prototype.ngOnDestroy = function () {
|
|
346
|
-
this.
|
|
347
|
-
this.
|
|
349
|
+
this.unsubscribe$.next();
|
|
350
|
+
this.unsubscribe$.complete();
|
|
348
351
|
};
|
|
349
|
-
AccordionComponent.prototype.
|
|
350
|
-
|
|
351
|
-
|
|
352
|
+
AccordionComponent.prototype.validateInputs = function () {
|
|
353
|
+
if (!this.multiple && Array.isArray(this.activeIndex)) {
|
|
354
|
+
throw new Error("The activeIndex should not be an array when multiple is set to false.");
|
|
355
|
+
}
|
|
356
|
+
};
|
|
357
|
+
AccordionComponent.prototype.setupTabs = function () {
|
|
358
|
+
var e_1, _a;
|
|
359
|
+
var _this = this;
|
|
360
|
+
var _b;
|
|
361
|
+
if ((_b = this.panels) === null || _b === void 0 ? void 0 : _b.length) {
|
|
352
362
|
if (this.activeIndex !== undefined && this.activeIndex !== null) {
|
|
353
|
-
var
|
|
354
|
-
|
|
363
|
+
var activeTabs = Array.isArray(this.activeIndex)
|
|
364
|
+
? this.panels.filter(function (_, index) { return _this.activeIndex.includes(index); })
|
|
365
|
+
: [this.panels[this.activeIndex]];
|
|
366
|
+
if (activeTabs.length === 0) {
|
|
355
367
|
throw new Error("activeIndex does not represent any panel.");
|
|
356
368
|
}
|
|
357
|
-
|
|
358
|
-
|
|
369
|
+
try {
|
|
370
|
+
for (var activeTabs_1 = __values(activeTabs), activeTabs_1_1 = activeTabs_1.next(); !activeTabs_1_1.done; activeTabs_1_1 = activeTabs_1.next()) {
|
|
371
|
+
var activeTab = activeTabs_1_1.value;
|
|
372
|
+
if (!activeTab.disabled) {
|
|
373
|
+
activeTab.isOpen = true;
|
|
374
|
+
}
|
|
375
|
+
}
|
|
376
|
+
}
|
|
377
|
+
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
378
|
+
finally {
|
|
379
|
+
try {
|
|
380
|
+
if (activeTabs_1_1 && !activeTabs_1_1.done && (_a = activeTabs_1.return)) _a.call(activeTabs_1);
|
|
381
|
+
}
|
|
382
|
+
finally { if (e_1) throw e_1.error; }
|
|
359
383
|
}
|
|
360
384
|
}
|
|
361
385
|
}
|
|
362
386
|
};
|
|
363
|
-
AccordionComponent.prototype.
|
|
364
|
-
this.
|
|
387
|
+
AccordionComponent.prototype.closeOtherTabs = function (exception) {
|
|
388
|
+
this.panels.forEach(function (panel, index) {
|
|
365
389
|
if (index !== exception) {
|
|
366
390
|
panel.isOpen = false;
|
|
367
391
|
}
|
|
368
392
|
});
|
|
369
393
|
};
|
|
370
|
-
AccordionComponent.prototype.
|
|
394
|
+
AccordionComponent.prototype.setBehavior = function (multiple) {
|
|
371
395
|
if (multiple) {
|
|
372
|
-
this.
|
|
396
|
+
this.enableMultiplePanelBehavior();
|
|
373
397
|
}
|
|
374
398
|
else {
|
|
375
|
-
this.
|
|
399
|
+
this.enableSinglePanelBehavior();
|
|
376
400
|
}
|
|
377
401
|
};
|
|
378
|
-
AccordionComponent.prototype.
|
|
402
|
+
AccordionComponent.prototype.enableSinglePanelBehavior = function () {
|
|
379
403
|
var _this = this;
|
|
380
|
-
this.
|
|
381
|
-
_this.
|
|
382
|
-
.
|
|
383
|
-
.subscribe(function () {
|
|
384
|
-
_this._closeOtherTabs(index);
|
|
404
|
+
this.panels.forEach(function (panel, index) {
|
|
405
|
+
_this.openSubs[index] = panel.panelOpened.pipe(operators.takeUntil(_this.unsubscribe$)).subscribe(function () {
|
|
406
|
+
_this.closeOtherTabs(index);
|
|
385
407
|
});
|
|
386
408
|
});
|
|
387
409
|
};
|
|
388
|
-
AccordionComponent.prototype.
|
|
410
|
+
AccordionComponent.prototype.enableMultiplePanelBehavior = function () {
|
|
389
411
|
var _this = this;
|
|
390
|
-
this.
|
|
391
|
-
if (_this.
|
|
392
|
-
_this.
|
|
412
|
+
this.panels.forEach(function (_, index) {
|
|
413
|
+
if (_this.openSubs[index]) {
|
|
414
|
+
_this.openSubs[index].unsubscribe();
|
|
393
415
|
}
|
|
394
416
|
});
|
|
395
417
|
};
|
|
@@ -19298,8 +19320,7 @@
|
|
|
19298
19320
|
}());
|
|
19299
19321
|
|
|
19300
19322
|
var ObjectCardComponent = /** @class */ (function () {
|
|
19301
|
-
function ObjectCardComponent(
|
|
19302
|
-
this.elementRef = elementRef;
|
|
19323
|
+
function ObjectCardComponent() {
|
|
19303
19324
|
this.id = "s-object-card-" + ObjectCardComponent_1.nextId++;
|
|
19304
19325
|
this.expanded = false;
|
|
19305
19326
|
this.expandTooltip = "Abrir painel";
|
|
@@ -19311,43 +19332,36 @@
|
|
|
19311
19332
|
this.EnumSeverity = exports.EnumSeverity;
|
|
19312
19333
|
}
|
|
19313
19334
|
ObjectCardComponent_1 = ObjectCardComponent;
|
|
19314
|
-
ObjectCardComponent.prototype.ngAfterViewInit = function () {
|
|
19315
|
-
};
|
|
19316
19335
|
ObjectCardComponent.prototype.ngAfterContentChecked = function () {
|
|
19317
19336
|
this.update();
|
|
19318
19337
|
};
|
|
19319
19338
|
ObjectCardComponent.prototype.update = function () {
|
|
19320
|
-
var e_1, _a;
|
|
19321
19339
|
var windowWidth = window.innerWidth;
|
|
19322
|
-
var containerWidth = this.
|
|
19323
|
-
var mainFieldWidth =
|
|
19340
|
+
var containerWidth = this.container.nativeElement.getBoundingClientRect().width;
|
|
19341
|
+
var mainFieldWidth = this.cardMainContainer.nativeElement.getBoundingClientRect().width;
|
|
19342
|
+
var remainingSpace = containerWidth - mainFieldWidth;
|
|
19324
19343
|
var fieldsMinWidth = this.fieldsMinWidth;
|
|
19325
|
-
var expandIconWidth =
|
|
19326
|
-
var fieldElementList = this.elementRef.nativeElement.getElementsByClassName("s-object-card-field");
|
|
19327
|
-
try {
|
|
19328
|
-
for (var fieldElementList_1 = __values(fieldElementList), fieldElementList_1_1 = fieldElementList_1.next(); !fieldElementList_1_1.done; fieldElementList_1_1 = fieldElementList_1.next()) {
|
|
19329
|
-
var element = fieldElementList_1_1.value;
|
|
19330
|
-
element.style.minWidth = this.fieldsMinWidth + "px";
|
|
19331
|
-
}
|
|
19332
|
-
}
|
|
19333
|
-
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
19334
|
-
finally {
|
|
19335
|
-
try {
|
|
19336
|
-
if (fieldElementList_1_1 && !fieldElementList_1_1.done && (_a = fieldElementList_1.return)) _a.call(fieldElementList_1);
|
|
19337
|
-
}
|
|
19338
|
-
finally { if (e_1) throw e_1.error; }
|
|
19339
|
-
}
|
|
19344
|
+
var expandIconWidth = this.iconContainer.nativeElement.getBoundingClientRect().width;
|
|
19340
19345
|
var maxFieldQtd;
|
|
19341
|
-
if (windowWidth <= Breakpoints.SM_MAX)
|
|
19346
|
+
if (windowWidth <= Breakpoints.SM_MAX) {
|
|
19342
19347
|
maxFieldQtd = 0;
|
|
19343
|
-
|
|
19344
|
-
|
|
19345
|
-
|
|
19346
|
-
|
|
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';
|
|
19347
19360
|
}
|
|
19348
19361
|
this.maxVisibleFields = maxFieldQtd;
|
|
19349
|
-
if (maxFieldQtd >= this.fields.length && this.expanded)
|
|
19362
|
+
if (maxFieldQtd >= this.fields.length && this.expanded) {
|
|
19350
19363
|
this.collapse();
|
|
19364
|
+
}
|
|
19351
19365
|
};
|
|
19352
19366
|
ObjectCardComponent.prototype.toggle = function () {
|
|
19353
19367
|
this.expanded ? this.collapse() : this.expand();
|
|
@@ -19360,24 +19374,8 @@
|
|
|
19360
19374
|
this.expanded = false;
|
|
19361
19375
|
this.expandedChange.emit(this.expanded);
|
|
19362
19376
|
};
|
|
19363
|
-
ObjectCardComponent.prototype.getExpandedFieldWidth = function () {
|
|
19364
|
-
var containerWidth = this.elementRef.nativeElement.offsetWidth;
|
|
19365
|
-
var fieldsPerRow;
|
|
19366
|
-
if (containerWidth <= Breakpoints.SM_MAX)
|
|
19367
|
-
fieldsPerRow = 1;
|
|
19368
|
-
else if (containerWidth <= Breakpoints.MD_MAX)
|
|
19369
|
-
fieldsPerRow = 2;
|
|
19370
|
-
else if (containerWidth <= Breakpoints.LG_MAX)
|
|
19371
|
-
fieldsPerRow = 4;
|
|
19372
|
-
else
|
|
19373
|
-
fieldsPerRow = 6;
|
|
19374
|
-
return 12 / fieldsPerRow;
|
|
19375
|
-
};
|
|
19376
19377
|
var ObjectCardComponent_1;
|
|
19377
19378
|
ObjectCardComponent.nextId = 0;
|
|
19378
|
-
ObjectCardComponent.ctorParameters = function () { return [
|
|
19379
|
-
{ type: core.ElementRef }
|
|
19380
|
-
]; };
|
|
19381
19379
|
__decorate([
|
|
19382
19380
|
core.Input()
|
|
19383
19381
|
], ObjectCardComponent.prototype, "id", void 0);
|
|
@@ -19408,10 +19406,19 @@
|
|
|
19408
19406
|
__decorate([
|
|
19409
19407
|
core.Input()
|
|
19410
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);
|
|
19411
19418
|
ObjectCardComponent = ObjectCardComponent_1 = __decorate([
|
|
19412
19419
|
core.Component({
|
|
19413
19420
|
selector: "s-object-card",
|
|
19414
|
-
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",
|
|
19415
19422
|
animations: [
|
|
19416
19423
|
animations.trigger("expandableContent", [
|
|
19417
19424
|
animations.state("*", animations.style({
|
|
@@ -19437,7 +19444,7 @@
|
|
|
19437
19444
|
]),
|
|
19438
19445
|
]),
|
|
19439
19446
|
],
|
|
19440
|
-
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}"]
|
|
19441
19448
|
})
|
|
19442
19449
|
], ObjectCardComponent);
|
|
19443
19450
|
return ObjectCardComponent;
|