@totvs-agro/core-mobile
Version:
Core Mobile Totvs Agro (Front-End) para utilização dos estilos do T-Faces
94 lines • 6.65 kB
JavaScript
import { ElementRef, Input, ViewChild } from '@angular/core';
var HTML_TEMPLATE = "\n<div style=\"padding-left: 0px;\" ion-item no-lines *ngFor=\"let item of items, let i = index, let l = last\">\n <button style=\"padding-left: 0px;\" ion-item no-lines (click)=\"expandItem(item)\">\n <div class=\"title\" ion-item no-lines>\n {{item.title}}\n <ion-icon name=\"ios-arrow-down\" *ngIf=\"!item.expanded\" style=\"padding-right:16px\" item-end no-lines></ion-icon>\n <ion-icon name=\"ios-arrow-up\" *ngIf=\"item.expanded\" style=\"padding-right:16px\" item-end no-lines></ion-icon>\n </div>\n <div class=\"separator\"></div>\n <div *ngIf=\"item.text\" id=\"expand-wrapper-text{{i}}\" class='expand-wrapper' [class.collapsed]=\"!item.expanded\">\n <div id=\"content-text{{i}}\" class=\"accordion-content\" [ngClass]=\"{ 'last-content' : l }\" innerHTML=\"{{item.text}}\"></div>\n </div>\n </button>\n <div *ngIf=\"item.cards\" id=\"expand-wrapper-card{{i}}\" class='expand-wrapper' [class.collapsed]=\"!item.expanded\">\n <div id=\"content-card{{i}}\">\n <ion-list>\n <card-item *ngFor=\"let card of item.cards\" [card]=\"card\" (click)=\"onClickCard(card)\">\n </card-item>\n </ion-list>\n </div>\n </div>\n <div *ngIf=\"item.checks\" id=\"expand-wrapper-check{{i}}\" class='expand-wrapper' [class.collapsed]=\"!item.expanded\">\n <div id=\"content-check{{i}}\">\n <ion-list>\n <ion-item *ngFor=\"let checkItem of item.checks\">\n <ion-checkbox [(disabled)]=\"checkItem.disabled\" class=\"item-check\" [(ngModel)]=\"checkItem.checked\" ></ion-checkbox>\n <span item-content [ngClass]=\"{ 'label-disabled': checkItem.disabled }\">{{checkItem.label}}</span>\n </ion-item>\n </ion-list>\n </div>\n </div>\n</div>\n";
var CSS_STYLE = " \n.expand-wrapper {\n transition: 0.5s ease;\n white-space: normal;\n padding-bottom: 0px;\n}\n\n.accordion-content {\n font-size: 14px !important;\n padding-top: 24px;\n padding-left: 32px;\n padding-right: 32px;\n padding-bottom: 0px;\n}\n\n.last-content {\n padding-bottom: 16px !important;\n}\n\n.collapsed {\n height: 0 !important;\n}\n\n.separator {\n border-bottom: 1px solid #eceeee;\n}\n\n.title {\n color: #0c9abe;\n font-size: 14px !important;\n font-weight: bold;\n}\n\ncard-item h2 {\n font-size: 14px !important;\n}\n\ncard-item ion-item {\n padding: 4px !important;\n}\n\n.label {\n margin: 0;\n}\n\n.item-inner {\n padding-right: 0px !important;\n padding-left: 0px !important;\n}\n\n.item-check {\n padding-left: 16px;\n}\n\n.label-disabled {\n opacity: 0.3;\n}\n\n/**/\n\n\n";
/*@Component({
selector: 'accordion-list',
template: HTML_TEMPLATE,
styles: [CSS_STYLE]
})*/
var AccordionListComponent = /** @class */ (function () {
function AccordionListComponent(renderer, elRef, _screenOrientation) {
this.renderer = renderer;
this.elRef = elRef;
this._screenOrientation = _screenOrientation;
this.icon = "ios-arrow-down";
}
AccordionListComponent.prototype.ngAfterViewInit = function () {
var _this = this;
this._itemCount = 0;
this.onChangeItems();
if (this.firstExpanded) {
this.expandItem(this.items[0]);
}
this._screenOrientation.onChange().subscribe(function () {
console.log("Orientation Changed");
_this.items.forEach(function (element, index) {
element.expanded = false;
});
});
};
AccordionListComponent.prototype.ngDoCheck = function () {
var count = this.getItemCount();
if (this._itemCount != count) {
this._itemCount = count;
this.onChangeItems();
}
};
AccordionListComponent.prototype.onChangeItems = function () {
var _this = this;
// refresh heights
setTimeout(function () {
_this.items.forEach(function (element, index) {
_this.setContentHeight(index);
});
}, 10);
};
AccordionListComponent.prototype.getItemCount = function () {
var count = this.items.length;
this.items.forEach(function (element) {
if (element.cards)
count += element.cards.length;
if (element.checks)
count += element.checks.length;
});
return count;
};
AccordionListComponent.prototype.setContentHeight = function (index) {
var expandWrapper = this.elRef.nativeElement.querySelector('#expand-wrapper-text' + index);
var accordionContent = this.elRef.nativeElement.querySelector('#content-text' + index);
if (!expandWrapper) {
expandWrapper = this.elRef.nativeElement.querySelector('#expand-wrapper-card' + index);
accordionContent = this.elRef.nativeElement.querySelector('#content-card' + index);
if (!expandWrapper) {
expandWrapper = this.elRef.nativeElement.querySelector('#expand-wrapper-check' + index);
accordionContent = this.elRef.nativeElement.querySelector('#content-check' + index);
}
}
if (expandWrapper)
this.renderer.setElementStyle(expandWrapper, 'height', (accordionContent.clientHeight + 20) + 'px');
};
AccordionListComponent.prototype.expandItem = function (item) {
var _this = this;
this.items.forEach(function (element, index) {
_this.setContentHeight(index);
if (item == element) {
element.expanded = !element.expanded;
}
});
};
AccordionListComponent.prototype.onClickCard = function (card) {
this.clickCard(card);
};
AccordionListComponent.propDecorators = {
"expandWrapperText": [{ type: ViewChild, args: ['expandWrapperText', { read: ElementRef },] },],
"expandWrapperCard": [{ type: ViewChild, args: ['expandWrapperCard', { read: ElementRef },] },],
"expandWrapperCheck": [{ type: ViewChild, args: ['expandWrapperCheck', { read: ElementRef },] },],
"expanded": [{ type: Input, args: ['expanded',] },],
"firstExpanded": [{ type: Input, args: ['firstExpanded',] },],
"clickCard": [{ type: Input, args: ['clickCard',] },],
"items": [{ type: Input, args: ['items',] },],
};
return AccordionListComponent;
}());
export { AccordionListComponent };
//# sourceMappingURL=accordion-list.js.map