systelab-components
Version:
systelab-components is a set of components that use wide accepted and adopted standard technologies like Angular and Bootstrap, as well as other popular libraries. Please read the ATTRIBUTION.md file for a complete list of dependencies.
41 lines • 8.99 kB
JavaScript
import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "systelab-preferences";
import * as i2 from "@angular/common";
// eslint-disable-next-line @angular-eslint/component-class-suffix
export class Accordion {
constructor(preferenceService) {
this.preferenceService = preferenceService;
this.headerTitle = '';
this.contentMaxHeight = 300;
this.withOverflow = false;
this.isCollapsed = false;
this.preferenceSuffix = 'accordionStatus';
}
ngOnInit() {
if (this.preferenceName) {
this.preferenceName = `${this.preferenceName}.${this.preferenceSuffix}`;
this.isCollapsed = this.preferenceService.get(this.preferenceName, false);
this.preferenceService.put(this.preferenceName, this.isCollapsed);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: Accordion, deps: [{ token: i1.PreferencesService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: Accordion, selector: "systelab-accordion", inputs: { headerTitle: "headerTitle", preferenceName: "preferenceName", contentMaxHeight: "contentMaxHeight", withOverflow: "withOverflow", headerColor: "headerColor", iconColor: "iconColor" }, ngImport: i0, template: "<div class=\"slab-flex-1 d-flex flex-column\">\n <div class=\"accordion-header d-flex align-items-center font-weight-bold px-3\" [ngStyle]=\"{'backgroundColor': headerColor}\" (click)=\"isCollapsed = !isCollapsed\">\n <i class=\"d-flex justify-content-center align-items-center position-relative\" [class.icon-chevron-circle-up]=\"!isCollapsed\" [class.icon-chevron-circle-down]=\"isCollapsed\" [ngClass]=\"{'text-primary': !iconColor}\" [ngStyle]=\"{'color': iconColor}\"></i>\n <span class=\"d-block ml-3\">{{ headerTitle }}</span>\n </div>\n <div class=\"collapsible-content d-flex\" [class.collapsed]=\"isCollapsed\"\n [ngStyle]=\"{'max-height.px': isCollapsed ? '0' : contentMaxHeight, 'overflow': withOverflow ? 'auto' : 'hidden'}\">\n <ng-content />\n </div>\n</div>", styles: [".accordion-header{background-color:#d3d3d3;border-radius:4px 4px 0 0;height:40px}.accordion-header i{font-size:25px}.accordion-header i:after{content:\"\";background-color:#fff;width:15px;height:15px;z-index:1;position:absolute}.accordion-header i:before{z-index:2}.accordion-header i:hover{cursor:pointer}.collapsible-content{transition:max-height .3s ease-out,opacity .3s ease-out;opacity:1;border:1px solid var(--slab_table_border_color)!important}.collapsed{opacity:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: Accordion, decorators: [{
type: Component,
args: [{ selector: 'systelab-accordion', template: "<div class=\"slab-flex-1 d-flex flex-column\">\n <div class=\"accordion-header d-flex align-items-center font-weight-bold px-3\" [ngStyle]=\"{'backgroundColor': headerColor}\" (click)=\"isCollapsed = !isCollapsed\">\n <i class=\"d-flex justify-content-center align-items-center position-relative\" [class.icon-chevron-circle-up]=\"!isCollapsed\" [class.icon-chevron-circle-down]=\"isCollapsed\" [ngClass]=\"{'text-primary': !iconColor}\" [ngStyle]=\"{'color': iconColor}\"></i>\n <span class=\"d-block ml-3\">{{ headerTitle }}</span>\n </div>\n <div class=\"collapsible-content d-flex\" [class.collapsed]=\"isCollapsed\"\n [ngStyle]=\"{'max-height.px': isCollapsed ? '0' : contentMaxHeight, 'overflow': withOverflow ? 'auto' : 'hidden'}\">\n <ng-content />\n </div>\n</div>", styles: [".accordion-header{background-color:#d3d3d3;border-radius:4px 4px 0 0;height:40px}.accordion-header i{font-size:25px}.accordion-header i:after{content:\"\";background-color:#fff;width:15px;height:15px;z-index:1;position:absolute}.accordion-header i:before{z-index:2}.accordion-header i:hover{cursor:pointer}.collapsible-content{transition:max-height .3s ease-out,opacity .3s ease-out;opacity:1;border:1px solid var(--slab_table_border_color)!important}.collapsed{opacity:0}\n"] }]
}], ctorParameters: () => [{ type: i1.PreferencesService }], propDecorators: { headerTitle: [{
type: Input
}], preferenceName: [{
type: Input
}], contentMaxHeight: [{
type: Input
}], withOverflow: [{
type: Input
}], headerColor: [{
type: Input
}], iconColor: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNjb3JkaW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3N5c3RlbGFiLWNvbXBvbmVudHMvc3JjL2xpYi9hY2NvcmRpb24vYWNjb3JkaW9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3N5c3RlbGFiLWNvbXBvbmVudHMvc3JjL2xpYi9hY2NvcmRpb24vYWNjb3JkaW9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDOzs7O0FBUXpELGtFQUFrRTtBQUNsRSxNQUFNLE9BQU8sU0FBUztJQVVyQixZQUE2QixpQkFBcUM7UUFBckMsc0JBQWlCLEdBQWpCLGlCQUFpQixDQUFvQjtRQVR6RCxnQkFBVyxHQUFXLEVBQUUsQ0FBQztRQUV6QixxQkFBZ0IsR0FBVyxHQUFHLENBQUM7UUFDL0IsaUJBQVksR0FBWSxLQUFLLENBQUM7UUFHaEMsZ0JBQVcsR0FBWSxLQUFLLENBQUM7UUFDNUIscUJBQWdCLEdBQVcsaUJBQWlCLENBQUM7SUFHckQsQ0FBQztJQUVNLFFBQVE7UUFDZCxJQUFHLElBQUksQ0FBQyxjQUFjLEVBQUU7WUFDdkIsSUFBSSxDQUFDLGNBQWMsR0FBRyxHQUFHLElBQUksQ0FBQyxjQUFjLElBQUksSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7WUFDeEUsSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUMsaUJBQWlCLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxjQUFjLEVBQUUsS0FBSyxDQUFDLENBQUM7WUFDMUUsSUFBSSxDQUFDLGlCQUFpQixDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsY0FBYyxFQUFFLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQztTQUNsRTtJQUNGLENBQUM7OEdBbkJXLFNBQVM7a0dBQVQsU0FBUyw0UENUdEIsZ3pCQVNNOzsyRkRBTyxTQUFTO2tCQU5yQixTQUFTOytCQUNJLG9CQUFvQjt1RkFNeEIsV0FBVztzQkFBbkIsS0FBSztnQkFDRyxjQUFjO3NCQUF0QixLQUFLO2dCQUNHLGdCQUFnQjtzQkFBeEIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgUHJlZmVyZW5jZXNTZXJ2aWNlIH0gZnJvbSAnc3lzdGVsYWItcHJlZmVyZW5jZXMnO1xuXG5AQ29tcG9uZW50KHtcblx0c2VsZWN0b3I6ICAgICdzeXN0ZWxhYi1hY2NvcmRpb24nLFxuXHR0ZW1wbGF0ZVVybDogJy4vYWNjb3JkaW9uLmNvbXBvbmVudC5odG1sJyxcblx0c3R5bGVVcmxzOiBbJy4vYWNjb3JkaW9uLmNvbXBvbmVudC5zY3NzJ11cbn0pXG4vLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQGFuZ3VsYXItZXNsaW50L2NvbXBvbmVudC1jbGFzcy1zdWZmaXhcbmV4cG9ydCBjbGFzcyBBY2NvcmRpb24gaW1wbGVtZW50cyBPbkluaXQge1xuXHRASW5wdXQoKSBoZWFkZXJUaXRsZTogc3RyaW5nID0gJyc7XG5cdEBJbnB1dCgpIHByZWZlcmVuY2VOYW1lOiBzdHJpbmc7XG5cdEBJbnB1dCgpIGNvbnRlbnRNYXhIZWlnaHQ6IG51bWJlciA9IDMwMDtcblx0QElucHV0KCkgd2l0aE92ZXJmbG93OiBib29sZWFuID0gZmFsc2U7XG5cdEBJbnB1dCgpIGhlYWRlckNvbG9yOiBzdHJpbmc7XG5cdEBJbnB1dCgpIGljb25Db2xvcjogc3RyaW5nO1xuXHRwdWJsaWMgaXNDb2xsYXBzZWQ6IGJvb2xlYW4gPSBmYWxzZTtcblx0cHJpdmF0ZSBwcmVmZXJlbmNlU3VmZml4OiBzdHJpbmcgPSAnYWNjb3JkaW9uU3RhdHVzJztcblxuXHRjb25zdHJ1Y3Rvcihwcml2YXRlIHJlYWRvbmx5IHByZWZlcmVuY2VTZXJ2aWNlOiBQcmVmZXJlbmNlc1NlcnZpY2UpIHtcblx0fVxuXG5cdHB1YmxpYyBuZ09uSW5pdCgpIHtcblx0XHRpZih0aGlzLnByZWZlcmVuY2VOYW1lKSB7XG5cdFx0XHR0aGlzLnByZWZlcmVuY2VOYW1lID0gYCR7dGhpcy5wcmVmZXJlbmNlTmFtZX0uJHt0aGlzLnByZWZlcmVuY2VTdWZmaXh9YDtcblx0XHRcdHRoaXMuaXNDb2xsYXBzZWQgPSB0aGlzLnByZWZlcmVuY2VTZXJ2aWNlLmdldCh0aGlzLnByZWZlcmVuY2VOYW1lLCBmYWxzZSk7XG5cdFx0XHR0aGlzLnByZWZlcmVuY2VTZXJ2aWNlLnB1dCh0aGlzLnByZWZlcmVuY2VOYW1lLCB0aGlzLmlzQ29sbGFwc2VkKTtcblx0XHR9XG5cdH1cbn0iLCI8ZGl2IGNsYXNzPVwic2xhYi1mbGV4LTEgZC1mbGV4IGZsZXgtY29sdW1uXCI+XG4gICAgPGRpdiBjbGFzcz1cImFjY29yZGlvbi1oZWFkZXIgZC1mbGV4IGFsaWduLWl0ZW1zLWNlbnRlciBmb250LXdlaWdodC1ib2xkIHB4LTNcIiBbbmdTdHlsZV09XCJ7J2JhY2tncm91bmRDb2xvcic6IGhlYWRlckNvbG9yfVwiIChjbGljayk9XCJpc0NvbGxhcHNlZCA9ICFpc0NvbGxhcHNlZFwiPlxuICAgICAgICA8aSBjbGFzcz1cImQtZmxleCBqdXN0aWZ5LWNvbnRlbnQtY2VudGVyIGFsaWduLWl0ZW1zLWNlbnRlciBwb3NpdGlvbi1yZWxhdGl2ZVwiIFtjbGFzcy5pY29uLWNoZXZyb24tY2lyY2xlLXVwXT1cIiFpc0NvbGxhcHNlZFwiIFtjbGFzcy5pY29uLWNoZXZyb24tY2lyY2xlLWRvd25dPVwiaXNDb2xsYXBzZWRcIiBbbmdDbGFzc109XCJ7J3RleHQtcHJpbWFyeSc6ICFpY29uQ29sb3J9XCIgW25nU3R5bGVdPVwieydjb2xvcic6IGljb25Db2xvcn1cIj48L2k+XG4gICAgICAgIDxzcGFuIGNsYXNzPVwiZC1ibG9jayBtbC0zXCI+e3sgaGVhZGVyVGl0bGUgfX08L3NwYW4+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cImNvbGxhcHNpYmxlLWNvbnRlbnQgZC1mbGV4XCIgW2NsYXNzLmNvbGxhcHNlZF09XCJpc0NvbGxhcHNlZFwiXG4gICAgICAgICBbbmdTdHlsZV09XCJ7J21heC1oZWlnaHQucHgnOiBpc0NvbGxhcHNlZCA/ICcwJyA6IGNvbnRlbnRNYXhIZWlnaHQsICdvdmVyZmxvdyc6IHdpdGhPdmVyZmxvdyA/ICdhdXRvJyA6ICdoaWRkZW4nfVwiPlxuICAgICAgICA8bmctY29udGVudCAvPlxuICAgIDwvZGl2PlxuPC9kaXY+Il19