truly-ui
Version:
Web Components for Desktop Applications.
45 lines • 8.5 kB
JavaScript
import { Component, Input, ViewChild } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../../services/accordion.service";
import * as i2 from "@angular/common";
import * as i3 from "../../../icons/icons";
export class TlAccordionItem {
constructor(accordionService) {
this.accordionService = accordionService;
this.title = 'Title 1';
this.heightHeader = '45px';
this.disabled = false;
this.opened = false;
}
toggle() {
if (this.disabled) {
return;
}
this.accordionService.closeAll(this);
this.opened = !this.opened;
}
getColor() {
return this.accordionService.getColor();
}
close() {
this.opened = false;
}
}
/** @nocollapse */ TlAccordionItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TlAccordionItem, deps: [{ token: i1.AccordionService }], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ TlAccordionItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TlAccordionItem, selector: "tl-accordion-item", inputs: { title: "title", heightHeader: "heightHeader", disabled: "disabled", opened: "opened" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, static: true }], ngImport: i0, template: "<div [class]=\"'ui-wrapper-accordion-item ' + getColor()\">\n <div class=\"ui-accordion-item-header\"\n [ngClass]=\"{'opened': opened, 'disabled': disabled}\"\n [style.height]=\"heightHeader\"\n [style.line-height]=\"heightHeader\"\n [style.border-bottom]=\"opened ? '1px solid #DCDCDC' : 0\"\n (click)=\"toggle()\">\n <div class=\"ui-accordion-arrow\">\n <tl-icon [lib]=\"'ion'\" [style]=\"'ios'\" [icon]=\"(!opened) ? 'arrow-forward' : 'arrow-down'\"></tl-icon>\n </div>\n <span>{{title}}</span>\n </div>\n\n <div #panel\n [style.max-height.px]=\"opened ? panel.scrollHeight : 0\"\n [style.display]=\"'block' ? opened : 'none'\"\n class=\"ui-accordion-item-content\">\n <ng-content></ng-content>\n </div>\n\n</div>\n", styles: ["*{-webkit-user-select:none;user-select:none}.ui-accordion-item-header{display:grid;font-family:Segoe UI,Lato,\"sans-serif\",Arial;font-size:1.2em;box-sizing:border-box;grid-template-columns:40px 1fr}.ui-accordion-item-header>.ui-accordion-arrow{text-align:center;font-size:.9em}.ui-accordion-item-header:hover{cursor:pointer}.ui-accordion-item-content{padding:0 5px;max-height:0;overflow:hidden;transition:all .3s linear}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.TlIcons, selector: "tl-icon", inputs: ["icon", "lib", "style", "size", "animation", "color", "align"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TlAccordionItem, decorators: [{
type: Component,
args: [{ selector: 'tl-accordion-item', template: "<div [class]=\"'ui-wrapper-accordion-item ' + getColor()\">\n <div class=\"ui-accordion-item-header\"\n [ngClass]=\"{'opened': opened, 'disabled': disabled}\"\n [style.height]=\"heightHeader\"\n [style.line-height]=\"heightHeader\"\n [style.border-bottom]=\"opened ? '1px solid #DCDCDC' : 0\"\n (click)=\"toggle()\">\n <div class=\"ui-accordion-arrow\">\n <tl-icon [lib]=\"'ion'\" [style]=\"'ios'\" [icon]=\"(!opened) ? 'arrow-forward' : 'arrow-down'\"></tl-icon>\n </div>\n <span>{{title}}</span>\n </div>\n\n <div #panel\n [style.max-height.px]=\"opened ? panel.scrollHeight : 0\"\n [style.display]=\"'block' ? opened : 'none'\"\n class=\"ui-accordion-item-content\">\n <ng-content></ng-content>\n </div>\n\n</div>\n", styles: ["*{-webkit-user-select:none;user-select:none}.ui-accordion-item-header{display:grid;font-family:Segoe UI,Lato,\"sans-serif\",Arial;font-size:1.2em;box-sizing:border-box;grid-template-columns:40px 1fr}.ui-accordion-item-header>.ui-accordion-arrow{text-align:center;font-size:.9em}.ui-accordion-item-header:hover{cursor:pointer}.ui-accordion-item-content{padding:0 5px;max-height:0;overflow:hidden;transition:all .3s linear}\n"] }]
}], ctorParameters: function () { return [{ type: i1.AccordionService }]; }, propDecorators: { title: [{
type: Input
}], heightHeader: [{
type: Input
}], disabled: [{
type: Input
}], opened: [{
type: Input
}], panel: [{
type: ViewChild,
args: ['panel', { static: true }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNjb3JkaW9uLWl0ZW0uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy90cnVseS11aS9zcmMvY29tcG9uZW50cy9hY2NvcmRpb24vcGFydHMvYWNjb3JkaW9uLWl0ZW0vYWNjb3JkaW9uLWl0ZW0udHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy90cnVseS11aS9zcmMvY29tcG9uZW50cy9hY2NvcmRpb24vcGFydHMvYWNjb3JkaW9uLWl0ZW0vYWNjb3JkaW9uLWl0ZW0uaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFjLEtBQUssRUFDbkMsU0FBUyxFQUNWLE1BQU0sZUFBZSxDQUFDOzs7OztBQVF2QixNQUFNLE9BQU8sZUFBZTtJQWMxQixZQUFxQixnQkFBa0M7UUFBbEMscUJBQWdCLEdBQWhCLGdCQUFnQixDQUFrQjtRQVo5QyxVQUFLLEdBQUcsU0FBUyxDQUFDO1FBRWxCLGlCQUFZLEdBQUcsTUFBTSxDQUFDO1FBRXRCLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFFakIsV0FBTSxHQUFHLEtBQUssQ0FBQztJQU1vQyxDQUFDO0lBRTdELE1BQU07UUFDSixJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDakIsT0FBTztTQUNSO1FBQ0QsSUFBSSxDQUFDLGdCQUFnQixDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUNyQyxJQUFJLENBQUMsTUFBTSxHQUFHLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQztJQUM3QixDQUFDO0lBRUQsUUFBUTtRQUNOLE9BQU8sSUFBSSxDQUFDLGdCQUFnQixDQUFDLFFBQVEsRUFBRSxDQUFDO0lBQzFDLENBQUM7SUFFRCxLQUFLO1FBQ0gsSUFBSSxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUM7SUFDdEIsQ0FBQzs7Z0lBOUJVLGVBQWU7b0hBQWYsZUFBZSx5UUNWNUIsdXhCQXFCQTs0RkRYYSxlQUFlO2tCQUwzQixTQUFTOytCQUNFLG1CQUFtQjt1R0FNcEIsS0FBSztzQkFBYixLQUFLO2dCQUVHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBRUcsUUFBUTtzQkFBaEIsS0FBSztnQkFFRyxNQUFNO3NCQUFkLEtBQUs7Z0JBRWdDLEtBQUs7c0JBQTFDLFNBQVM7dUJBQUUsT0FBTyxFQUFFLEVBQUMsTUFBTSxFQUFFLElBQUksRUFBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRWxlbWVudFJlZiwgSW5wdXQsXG4gIFZpZXdDaGlsZFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEFjY29yZGlvblNlcnZpY2UgfSBmcm9tICcuLi8uLi9zZXJ2aWNlcy9hY2NvcmRpb24uc2VydmljZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3RsLWFjY29yZGlvbi1pdGVtJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2FjY29yZGlvbi1pdGVtLmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9hY2NvcmRpb24taXRlbS5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIFRsQWNjb3JkaW9uSXRlbSB7XG5cbiAgQElucHV0KCkgdGl0bGUgPSAnVGl0bGUgMSc7XG5cbiAgQElucHV0KCkgaGVpZ2h0SGVhZGVyID0gJzQ1cHgnO1xuXG4gIEBJbnB1dCgpIGRpc2FibGVkID0gZmFsc2U7XG5cbiAgQElucHV0KCkgb3BlbmVkID0gZmFsc2U7XG5cbiAgQFZpZXdDaGlsZCggJ3BhbmVsJywge3N0YXRpYzogdHJ1ZX0gKSBwYW5lbDogRWxlbWVudFJlZjtcblxuICBwdWJsaWMgbWF4SGVpZ2h0O1xuXG4gIGNvbnN0cnVjdG9yKCBwcml2YXRlIGFjY29yZGlvblNlcnZpY2U6IEFjY29yZGlvblNlcnZpY2UgKSB7IH1cblxuICB0b2dnbGUoKSB7XG4gICAgaWYgKHRoaXMuZGlzYWJsZWQpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgdGhpcy5hY2NvcmRpb25TZXJ2aWNlLmNsb3NlQWxsKHRoaXMpO1xuICAgIHRoaXMub3BlbmVkID0gIXRoaXMub3BlbmVkO1xuICB9XG5cbiAgZ2V0Q29sb3IoKSB7XG4gICAgcmV0dXJuIHRoaXMuYWNjb3JkaW9uU2VydmljZS5nZXRDb2xvcigpO1xuICB9XG5cbiAgY2xvc2UoKSB7XG4gICAgdGhpcy5vcGVuZWQgPSBmYWxzZTtcbiAgfVxuXG59XG4iLCI8ZGl2IFtjbGFzc109XCIndWktd3JhcHBlci1hY2NvcmRpb24taXRlbSAnICsgZ2V0Q29sb3IoKVwiPlxuICA8ZGl2IGNsYXNzPVwidWktYWNjb3JkaW9uLWl0ZW0taGVhZGVyXCJcbiAgICAgICBbbmdDbGFzc109XCJ7J29wZW5lZCc6IG9wZW5lZCwgJ2Rpc2FibGVkJzogZGlzYWJsZWR9XCJcbiAgICAgICBbc3R5bGUuaGVpZ2h0XT1cImhlaWdodEhlYWRlclwiXG4gICAgICAgW3N0eWxlLmxpbmUtaGVpZ2h0XT1cImhlaWdodEhlYWRlclwiXG4gICAgICAgW3N0eWxlLmJvcmRlci1ib3R0b21dPVwib3BlbmVkID8gJzFweCBzb2xpZCAjRENEQ0RDJyA6IDBcIlxuICAgICAgIChjbGljayk9XCJ0b2dnbGUoKVwiPlxuICAgIDxkaXYgY2xhc3M9XCJ1aS1hY2NvcmRpb24tYXJyb3dcIj5cbiAgICAgIDx0bC1pY29uIFtsaWJdPVwiJ2lvbidcIiBbc3R5bGVdPVwiJ2lvcydcIiBbaWNvbl09XCIoIW9wZW5lZCkgPyAnYXJyb3ctZm9yd2FyZCcgOiAnYXJyb3ctZG93bidcIj48L3RsLWljb24+XG4gICAgPC9kaXY+XG4gICAgPHNwYW4+e3t0aXRsZX19PC9zcGFuPlxuICA8L2Rpdj5cblxuICA8ZGl2ICNwYW5lbFxuICAgICAgIFtzdHlsZS5tYXgtaGVpZ2h0LnB4XT1cIm9wZW5lZCA/IHBhbmVsLnNjcm9sbEhlaWdodCA6IDBcIlxuICAgICAgIFtzdHlsZS5kaXNwbGF5XT1cIidibG9jaycgPyBvcGVuZWQgOiAnbm9uZSdcIlxuICAgICAgIGNsYXNzPVwidWktYWNjb3JkaW9uLWl0ZW0tY29udGVudFwiPlxuICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICA8L2Rpdj5cblxuPC9kaXY+XG4iXX0=