@totvs-agro/mobile-components
Version:
Componentes Mobile Totvs (Front-End) para utilização dos estilos do T-Faces e Ionic v3
110 lines • 6.6 kB
JavaScript
import { Component, ElementRef, Input, Renderer, ViewChild } from '@angular/core';
/*const HTML_TEMPLATE = `<div><p>Teste --</p></div>`*/
var HTML_TEMPLATE = "\n<div ion-item no-lines *ngFor=\"let item of items, let i = index, let l = last\" class=\"outer-container\">\n <button *ngIf=\"showTitle(item)\" style=\"padding-left: 0px;\" ion-item no-lines (click)=\"expandItem(item)\" class=\"expandable-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 no-lines *ngFor=\"let card of item.cards\" [card]=\"card\" [clickCard]=\"clickCard\"></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\" (click)=\"onClickCheck()\"></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 AccordionListComponent = /** @class */ (function () {
function AccordionListComponent(renderer, elRef) {
this.renderer = renderer;
this.elRef = elRef;
this.icon = "ios-arrow-down";
}
AccordionListComponent.prototype.ngAfterViewInit = function () {
this._itemCount = 0;
this.onChangeItems();
if (this.firstExpanded) {
this.collapseAllItem();
this.expandItem(this.items[0]);
}
/*this._screenOrientation.onChange().subscribe(() => {
console.log("Orientation Changed");
this.collapseAllItem();
});*/
};
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.collapseAllItem = function () {
this.items.forEach(function (element) {
element.expanded = false;
});
};
AccordionListComponent.prototype.showTitle = function (item) {
return (item.cards != null ? item.cards.length > 0 : (item.checks || item.text));
};
AccordionListComponent.prototype.onClickCard = function (card) {
this.clickCard(card);
};
AccordionListComponent.prototype.onClickCheck = function () {
if (this.clickCheck)
this.clickCheck();
};
AccordionListComponent.decorators = [
{ type: Component, args: [{
selector: 'accordion-list',
template: HTML_TEMPLATE
},] },
];
/** @nocollapse */
AccordionListComponent.ctorParameters = function () { return [
{ type: Renderer, },
{ type: ElementRef, },
]; };
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',] },],
"clickCheck": [{ type: Input, args: ['clickCheck',] },],
};
return AccordionListComponent;
}());
export { AccordionListComponent };
//# sourceMappingURL=accordion-list.js.map