@seniorsistemas/angular-components 17.31.0 → 17.31.2
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 +32 -47
- 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/panel/panel.component.js +1 -1
- package/esm2015/components/utils/breakpoints.js +1 -1
- package/esm5/components/object-card/object-card.component.js +34 -49
- package/esm5/components/panel/panel.component.js +1 -1
- package/esm5/components/utils/breakpoints.js +1 -1
- package/fesm2015/seniorsistemas-angular-components.js +32 -36
- package/fesm2015/seniorsistemas-angular-components.js.map +1 -1
- package/fesm5/seniorsistemas-angular-components.js +32 -47
- package/fesm5/seniorsistemas-angular-components.js.map +1 -1
- package/package.json +1 -1
- package/seniorsistemas-angular-components.metadata.json +1 -1
|
@@ -17924,8 +17924,7 @@ ObjectCardMainComponent = ObjectCardMainComponent_1 = __decorate([
|
|
|
17924
17924
|
|
|
17925
17925
|
var ObjectCardComponent_1;
|
|
17926
17926
|
let ObjectCardComponent = ObjectCardComponent_1 = class ObjectCardComponent {
|
|
17927
|
-
constructor(
|
|
17928
|
-
this.elementRef = elementRef;
|
|
17927
|
+
constructor() {
|
|
17929
17928
|
this.id = `s-object-card-${ObjectCardComponent_1.nextId++}`;
|
|
17930
17929
|
this.expanded = false;
|
|
17931
17930
|
this.expandTooltip = "Abrir painel";
|
|
@@ -17936,32 +17935,36 @@ let ObjectCardComponent = ObjectCardComponent_1 = class ObjectCardComponent {
|
|
|
17936
17935
|
this.severity = EnumSeverity.Default;
|
|
17937
17936
|
this.EnumSeverity = EnumSeverity;
|
|
17938
17937
|
}
|
|
17939
|
-
ngAfterViewInit() {
|
|
17940
|
-
}
|
|
17941
17938
|
ngAfterContentChecked() {
|
|
17942
17939
|
this.update();
|
|
17943
17940
|
}
|
|
17944
17941
|
update() {
|
|
17945
17942
|
const windowWidth = window.innerWidth;
|
|
17946
|
-
const containerWidth = this.
|
|
17947
|
-
const mainFieldWidth =
|
|
17943
|
+
const containerWidth = this.container.nativeElement.getBoundingClientRect().width;
|
|
17944
|
+
const mainFieldWidth = this.cardMainContainer.nativeElement.getBoundingClientRect().width;
|
|
17945
|
+
let remainingSpace = containerWidth - mainFieldWidth;
|
|
17948
17946
|
const fieldsMinWidth = this.fieldsMinWidth;
|
|
17949
|
-
const expandIconWidth =
|
|
17950
|
-
const fieldElementList = this.elementRef.nativeElement.getElementsByClassName("s-object-card-field");
|
|
17951
|
-
for (const element of fieldElementList) {
|
|
17952
|
-
element.style.minWidth = `${this.fieldsMinWidth}px`;
|
|
17953
|
-
}
|
|
17947
|
+
const expandIconWidth = this.iconContainer.nativeElement.getBoundingClientRect().width;
|
|
17954
17948
|
let maxFieldQtd;
|
|
17955
|
-
if (windowWidth <= Breakpoints.SM_MAX)
|
|
17949
|
+
if (windowWidth <= Breakpoints.SM_MAX) {
|
|
17956
17950
|
maxFieldQtd = 0;
|
|
17957
|
-
|
|
17958
|
-
|
|
17959
|
-
|
|
17960
|
-
|
|
17951
|
+
}
|
|
17952
|
+
else {
|
|
17953
|
+
maxFieldQtd = Math.floor((remainingSpace) / fieldsMinWidth);
|
|
17954
|
+
}
|
|
17955
|
+
const hasExpandIcon = maxFieldQtd && maxFieldQtd < this.fields.length;
|
|
17956
|
+
if (hasExpandIcon) {
|
|
17957
|
+
this.iconContainer.nativeElement.style.display = 'flex';
|
|
17958
|
+
remainingSpace = remainingSpace - expandIconWidth;
|
|
17959
|
+
maxFieldQtd = Math.floor((remainingSpace) / fieldsMinWidth);
|
|
17960
|
+
}
|
|
17961
|
+
else {
|
|
17962
|
+
this.iconContainer.nativeElement.style.display = 'none';
|
|
17961
17963
|
}
|
|
17962
17964
|
this.maxVisibleFields = maxFieldQtd;
|
|
17963
|
-
if (maxFieldQtd >= this.fields.length && this.expanded)
|
|
17965
|
+
if (maxFieldQtd >= this.fields.length && this.expanded) {
|
|
17964
17966
|
this.collapse();
|
|
17967
|
+
}
|
|
17965
17968
|
}
|
|
17966
17969
|
toggle() {
|
|
17967
17970
|
this.expanded ? this.collapse() : this.expand();
|
|
@@ -17974,24 +17977,8 @@ let ObjectCardComponent = ObjectCardComponent_1 = class ObjectCardComponent {
|
|
|
17974
17977
|
this.expanded = false;
|
|
17975
17978
|
this.expandedChange.emit(this.expanded);
|
|
17976
17979
|
}
|
|
17977
|
-
getExpandedFieldWidth() {
|
|
17978
|
-
const containerWidth = this.elementRef.nativeElement.offsetWidth;
|
|
17979
|
-
let fieldsPerRow;
|
|
17980
|
-
if (containerWidth <= Breakpoints.SM_MAX)
|
|
17981
|
-
fieldsPerRow = 1;
|
|
17982
|
-
else if (containerWidth <= Breakpoints.MD_MAX)
|
|
17983
|
-
fieldsPerRow = 2;
|
|
17984
|
-
else if (containerWidth <= Breakpoints.LG_MAX)
|
|
17985
|
-
fieldsPerRow = 4;
|
|
17986
|
-
else
|
|
17987
|
-
fieldsPerRow = 6;
|
|
17988
|
-
return 12 / fieldsPerRow;
|
|
17989
|
-
}
|
|
17990
17980
|
};
|
|
17991
17981
|
ObjectCardComponent.nextId = 0;
|
|
17992
|
-
ObjectCardComponent.ctorParameters = () => [
|
|
17993
|
-
{ type: ElementRef }
|
|
17994
|
-
];
|
|
17995
17982
|
__decorate([
|
|
17996
17983
|
Input()
|
|
17997
17984
|
], ObjectCardComponent.prototype, "id", void 0);
|
|
@@ -18022,10 +18009,19 @@ __decorate([
|
|
|
18022
18009
|
__decorate([
|
|
18023
18010
|
Input()
|
|
18024
18011
|
], ObjectCardComponent.prototype, "borderButtonOptions", void 0);
|
|
18012
|
+
__decorate([
|
|
18013
|
+
ViewChild('contentContainer', { static: true })
|
|
18014
|
+
], ObjectCardComponent.prototype, "container", void 0);
|
|
18015
|
+
__decorate([
|
|
18016
|
+
ViewChild('cardMainContainer', { static: true })
|
|
18017
|
+
], ObjectCardComponent.prototype, "cardMainContainer", void 0);
|
|
18018
|
+
__decorate([
|
|
18019
|
+
ViewChild('iconContainer', { static: true })
|
|
18020
|
+
], ObjectCardComponent.prototype, "iconContainer", void 0);
|
|
18025
18021
|
ObjectCardComponent = ObjectCardComponent_1 = __decorate([
|
|
18026
18022
|
Component({
|
|
18027
18023
|
selector: "s-object-card",
|
|
18028
|
-
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\"
|
|
18024
|
+
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",
|
|
18029
18025
|
animations: [
|
|
18030
18026
|
trigger("expandableContent", [
|
|
18031
18027
|
state("*", style$7({
|
|
@@ -18051,7 +18047,7 @@ ObjectCardComponent = ObjectCardComponent_1 = __decorate([
|
|
|
18051
18047
|
]),
|
|
18052
18048
|
]),
|
|
18053
18049
|
],
|
|
18054
|
-
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:
|
|
18050
|
+
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}"]
|
|
18055
18051
|
})
|
|
18056
18052
|
], ObjectCardComponent);
|
|
18057
18053
|
|
|
@@ -18170,7 +18166,7 @@ PanelComponent = __decorate([
|
|
|
18170
18166
|
]),
|
|
18171
18167
|
]),
|
|
18172
18168
|
],
|
|
18173
|
-
styles: [".panel{background-color:#fff;border:1px solid #dedce5;padding:20px;position:relative;transition:border-color .5s}.panel .border-button{position:absolute;right:15px;top:-12px;z-index:10}.panel .header{border-bottom:1px solid #dedce5;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding-bottom:12px;margin-bottom:12px;text-transform:uppercase}.panel .header-content{-ms-flex-positive:1;flex-grow:1}.panel .header .collapse-button{background-color:transparent;border:none;color:#212533;cursor:pointer;height:24px;width:24px}.panel .panel-content .footer{border-top:1px solid #dedce5;padding-top:12px}.panel--success{border-color:#0c9348}.panel--info{border-color:#428bca}.panel--warn{border-color:#f8931f}.panel--error{border-color:#c13018}.panel--collapsed .header{border:none;padding:0}"]
|
|
18169
|
+
styles: [".panel{background-color:#fff;border:1px solid #dedce5;padding:20px;position:relative;transition:border-color .5s}.panel .border-button{position:absolute;right:15px;top:-12px;z-index:10}.panel .header{border-bottom:1px solid #dedce5;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding-bottom:12px;margin-bottom:12px;text-transform:uppercase}.panel .header-content{-ms-flex-positive:1;flex-grow:1}.panel .header .collapse-button{background-color:transparent;border:none;color:#212533;cursor:pointer;height:24px;width:24px}.panel .panel-content .footer{border-top:1px solid #dedce5;padding-top:12px}.panel--success{border-color:#0c9348}.panel--info{border-color:#428bca}.panel--warn{border-color:#f8931f}.panel--error{border-color:#c13018}.panel--collapsed .header{border:none;padding:0;margin:0}"]
|
|
18174
18170
|
})
|
|
18175
18171
|
], PanelComponent);
|
|
18176
18172
|
|