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.
47 lines • 10.1 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);
}
}
toggleAccordion() {
this.isCollapsed = !this.isCollapsed;
if (this.preferenceName) {
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}\">\n <button class=\"bg-transparent border-0\" (click)=\"toggleAccordion()\">\n <i class=\"d-flex justify-content-center align-items-center position-relative\"\n [class.icon-chevron-circle-up]=\"!isCollapsed\"\n [class.icon-chevron-circle-down]=\"isCollapsed\"\n [ngClass]=\"{'text-primary': !iconColor}\"\n [ngStyle]=\"{'color': iconColor}\"></i>\n </button>\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}\">\n <button class=\"bg-transparent border-0\" (click)=\"toggleAccordion()\">\n <i class=\"d-flex justify-content-center align-items-center position-relative\"\n [class.icon-chevron-circle-up]=\"!isCollapsed\"\n [class.icon-chevron-circle-down]=\"isCollapsed\"\n [ngClass]=\"{'text-primary': !iconColor}\"\n [ngStyle]=\"{'color': iconColor}\"></i>\n </button>\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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNjb3JkaW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3N5c3RlbGFiLWNvbXBvbmVudHMvc3JjL2xpYi9hY2NvcmRpb24vYWNjb3JkaW9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3N5c3RlbGFiLWNvbXBvbmVudHMvc3JjL2xpYi9hY2NvcmRpb24vYWNjb3JkaW9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDOzs7O0FBUXpELGtFQUFrRTtBQUNsRSxNQUFNLE9BQU8sU0FBUztJQVVyQixZQUE2QixpQkFBcUM7UUFBckMsc0JBQWlCLEdBQWpCLGlCQUFpQixDQUFvQjtRQVR6RCxnQkFBVyxHQUFXLEVBQUUsQ0FBQztRQUV6QixxQkFBZ0IsR0FBVyxHQUFHLENBQUM7UUFDL0IsaUJBQVksR0FBWSxLQUFLLENBQUM7UUFHaEMsZ0JBQVcsR0FBWSxLQUFLLENBQUM7UUFDNUIscUJBQWdCLEdBQVcsaUJBQWlCLENBQUM7SUFHckQsQ0FBQztJQUVNLFFBQVE7UUFDZCxJQUFHLElBQUksQ0FBQyxjQUFjLEVBQUU7WUFDdkIsSUFBSSxDQUFDLGNBQWMsR0FBRyxHQUFHLElBQUksQ0FBQyxjQUFjLElBQUksSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7WUFDeEUsSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUMsaUJBQWlCLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxjQUFjLEVBQUUsS0FBSyxDQUFDLENBQUM7WUFDMUUsSUFBSSxDQUFDLGlCQUFpQixDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsY0FBYyxFQUFFLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQztTQUNsRTtJQUNGLENBQUM7SUFFTSxlQUFlO1FBQ3JCLElBQUksQ0FBQyxXQUFXLEdBQUcsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDO1FBQ3JDLElBQUksSUFBSSxDQUFDLGNBQWMsRUFBRTtZQUN4QixJQUFJLENBQUMsaUJBQWlCLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxjQUFjLEVBQUUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1NBQ2xFO0lBQ0YsQ0FBQzs4R0ExQlcsU0FBUztrR0FBVCxTQUFTLDRQQ1R0QixrN0JBZU07OzJGRE5PLFNBQVM7a0JBTnJCLFNBQVM7K0JBQ0ksb0JBQW9CO3VGQU14QixXQUFXO3NCQUFuQixLQUFLO2dCQUNHLGNBQWM7c0JBQXRCLEtBQUs7Z0JBQ0csZ0JBQWdCO3NCQUF4QixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBQcmVmZXJlbmNlc1NlcnZpY2UgfSBmcm9tICdzeXN0ZWxhYi1wcmVmZXJlbmNlcyc7XG5cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogICAgJ3N5c3RlbGFiLWFjY29yZGlvbicsXG5cdHRlbXBsYXRlVXJsOiAnLi9hY2NvcmRpb24uY29tcG9uZW50Lmh0bWwnLFxuXHRzdHlsZVVybHM6IFsnLi9hY2NvcmRpb24uY29tcG9uZW50LnNjc3MnXVxufSlcbi8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAYW5ndWxhci1lc2xpbnQvY29tcG9uZW50LWNsYXNzLXN1ZmZpeFxuZXhwb3J0IGNsYXNzIEFjY29yZGlvbiBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cdEBJbnB1dCgpIGhlYWRlclRpdGxlOiBzdHJpbmcgPSAnJztcblx0QElucHV0KCkgcHJlZmVyZW5jZU5hbWU6IHN0cmluZztcblx0QElucHV0KCkgY29udGVudE1heEhlaWdodDogbnVtYmVyID0gMzAwO1xuXHRASW5wdXQoKSB3aXRoT3ZlcmZsb3c6IGJvb2xlYW4gPSBmYWxzZTtcblx0QElucHV0KCkgaGVhZGVyQ29sb3I6IHN0cmluZztcblx0QElucHV0KCkgaWNvbkNvbG9yOiBzdHJpbmc7XG5cdHB1YmxpYyBpc0NvbGxhcHNlZDogYm9vbGVhbiA9IGZhbHNlO1xuXHRwcml2YXRlIHByZWZlcmVuY2VTdWZmaXg6IHN0cmluZyA9ICdhY2NvcmRpb25TdGF0dXMnO1xuXG5cdGNvbnN0cnVjdG9yKHByaXZhdGUgcmVhZG9ubHkgcHJlZmVyZW5jZVNlcnZpY2U6IFByZWZlcmVuY2VzU2VydmljZSkge1xuXHR9XG5cblx0cHVibGljIG5nT25Jbml0KCkge1xuXHRcdGlmKHRoaXMucHJlZmVyZW5jZU5hbWUpIHtcblx0XHRcdHRoaXMucHJlZmVyZW5jZU5hbWUgPSBgJHt0aGlzLnByZWZlcmVuY2VOYW1lfS4ke3RoaXMucHJlZmVyZW5jZVN1ZmZpeH1gO1xuXHRcdFx0dGhpcy5pc0NvbGxhcHNlZCA9IHRoaXMucHJlZmVyZW5jZVNlcnZpY2UuZ2V0KHRoaXMucHJlZmVyZW5jZU5hbWUsIGZhbHNlKTtcblx0XHRcdHRoaXMucHJlZmVyZW5jZVNlcnZpY2UucHV0KHRoaXMucHJlZmVyZW5jZU5hbWUsIHRoaXMuaXNDb2xsYXBzZWQpO1xuXHRcdH1cblx0fVxuXG5cdHB1YmxpYyB0b2dnbGVBY2NvcmRpb24oKSB7XG5cdFx0dGhpcy5pc0NvbGxhcHNlZCA9ICF0aGlzLmlzQ29sbGFwc2VkO1xuXHRcdGlmICh0aGlzLnByZWZlcmVuY2VOYW1lKSB7XG5cdFx0XHR0aGlzLnByZWZlcmVuY2VTZXJ2aWNlLnB1dCh0aGlzLnByZWZlcmVuY2VOYW1lLCB0aGlzLmlzQ29sbGFwc2VkKTtcblx0XHR9XG5cdH1cbn0iLCI8ZGl2IGNsYXNzPVwic2xhYi1mbGV4LTEgZC1mbGV4IGZsZXgtY29sdW1uXCI+XG4gICAgPGRpdiBjbGFzcz1cImFjY29yZGlvbi1oZWFkZXIgZC1mbGV4IGFsaWduLWl0ZW1zLWNlbnRlciBmb250LXdlaWdodC1ib2xkIHB4LTNcIiBbbmdTdHlsZV09XCJ7J2JhY2tncm91bmRDb2xvcic6IGhlYWRlckNvbG9yfVwiPlxuICAgICAgICA8YnV0dG9uIGNsYXNzPVwiYmctdHJhbnNwYXJlbnQgYm9yZGVyLTBcIiAoY2xpY2spPVwidG9nZ2xlQWNjb3JkaW9uKClcIj5cbiAgICAgICAgICAgIDxpIGNsYXNzPVwiZC1mbGV4IGp1c3RpZnktY29udGVudC1jZW50ZXIgYWxpZ24taXRlbXMtY2VudGVyIHBvc2l0aW9uLXJlbGF0aXZlXCJcbiAgICAgICAgICAgICAgIFtjbGFzcy5pY29uLWNoZXZyb24tY2lyY2xlLXVwXT1cIiFpc0NvbGxhcHNlZFwiXG4gICAgICAgICAgICAgICBbY2xhc3MuaWNvbi1jaGV2cm9uLWNpcmNsZS1kb3duXT1cImlzQ29sbGFwc2VkXCJcbiAgICAgICAgICAgICAgIFtuZ0NsYXNzXT1cInsndGV4dC1wcmltYXJ5JzogIWljb25Db2xvcn1cIlxuICAgICAgICAgICAgICAgW25nU3R5bGVdPVwieydjb2xvcic6IGljb25Db2xvcn1cIj48L2k+XG4gICAgICAgIDwvYnV0dG9uPlxuICAgICAgICA8c3BhbiBjbGFzcz1cImQtYmxvY2sgbWwtM1wiPnt7IGhlYWRlclRpdGxlIH19PC9zcGFuPlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJjb2xsYXBzaWJsZS1jb250ZW50IGQtZmxleFwiIFtjbGFzcy5jb2xsYXBzZWRdPVwiaXNDb2xsYXBzZWRcIlxuICAgICAgICAgW25nU3R5bGVdPVwieydtYXgtaGVpZ2h0LnB4JzogaXNDb2xsYXBzZWQgPyAnMCcgOiBjb250ZW50TWF4SGVpZ2h0LCAnb3ZlcmZsb3cnOiB3aXRoT3ZlcmZsb3cgPyAnYXV0bycgOiAnaGlkZGVuJ31cIj5cbiAgICAgICAgPG5nLWNvbnRlbnQgLz5cbiAgICA8L2Rpdj5cbjwvZGl2PiJdfQ==