@igo2/common
Version:
127 lines (120 loc) • 7 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, HostListener, Output, Input, Directive, Component, NgModule } from '@angular/core';
import * as i2 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i1 from '@angular/material/list';
import { MatListModule } from '@angular/material/list';
class CollapseDirective {
renderer;
el;
get target() {
return this._target;
}
set target(value) {
this._target = value;
}
_target;
get collapsed() {
return this._collapsed;
}
set collapsed(collapsed) {
collapsed ? this.collapseTarget() : this.expandTarget();
this._collapsed = collapsed;
this.toggle.emit(collapsed);
}
_collapsed = false;
toggle = new EventEmitter();
click() {
this.collapsed = !this.collapsed;
}
constructor(renderer, el) {
this.renderer = renderer;
this.el = el;
}
collapseTarget() {
this.renderer.addClass(this.target, 'igo-collapsed');
this.renderer.addClass(this.el.nativeElement, 'collapsed');
}
expandTarget() {
this.renderer.removeClass(this.target, 'igo-collapsed');
this.renderer.removeClass(this.el.nativeElement, 'collapsed');
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CollapseDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: CollapseDirective, isStandalone: true, selector: "[igoCollapse]", inputs: { target: "target", collapsed: "collapsed" }, outputs: { toggle: "toggle" }, host: { listeners: { "click": "click()" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CollapseDirective, decorators: [{
type: Directive,
args: [{
selector: '[igoCollapse]',
standalone: true
}]
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { target: [{
type: Input
}], collapsed: [{
type: Input
}], toggle: [{
type: Output
}], click: [{
type: HostListener,
args: ['click']
}] } });
class CollapsibleComponent {
get title() {
return this._title;
}
set title(value) {
this._title = value;
}
_title = '';
get collapsed() {
return this._collapsed;
}
set collapsed(value) {
this._collapsed = value;
this.toggle.emit(value);
}
_collapsed = false;
toggle = new EventEmitter();
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CollapsibleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: CollapsibleComponent, isStandalone: true, selector: "igo-collapsible", inputs: { title: "title", collapsed: "collapsed" }, outputs: { toggle: "toggle" }, ngImport: i0, template: "<mat-list-item>\n <mat-icon\n class=\"igo-chevron\"\n matListItemIcon\n igoCollapse\n [target]=\"content\"\n [collapsed]=\"collapsed\"\n (toggle)=\"collapsed = $event\"\n >\n expand_less\n </mat-icon>\n <span matListItemTitle>{{ title }}</span>\n</mat-list-item>\n\n<div #content>\n <ng-content></ng-content>\n</div>\n", styles: [":host ::ng-deep .mat-mdc-list .mat-mdc-list-item.mat-mdc-list-item-avatar{height:auto;width:auto;padding:0}mat-list-item{overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i1.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i1.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: CollapseDirective, selector: "[igoCollapse]", inputs: ["target", "collapsed"], outputs: ["toggle"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CollapsibleComponent, decorators: [{
type: Component,
args: [{ selector: 'igo-collapsible', imports: [MatListModule, MatIconModule, CollapseDirective], template: "<mat-list-item>\n <mat-icon\n class=\"igo-chevron\"\n matListItemIcon\n igoCollapse\n [target]=\"content\"\n [collapsed]=\"collapsed\"\n (toggle)=\"collapsed = $event\"\n >\n expand_less\n </mat-icon>\n <span matListItemTitle>{{ title }}</span>\n</mat-list-item>\n\n<div #content>\n <ng-content></ng-content>\n</div>\n", styles: [":host ::ng-deep .mat-mdc-list .mat-mdc-list-item.mat-mdc-list-item-avatar{height:auto;width:auto;padding:0}mat-list-item{overflow:hidden}\n"] }]
}], propDecorators: { title: [{
type: Input
}], collapsed: [{
type: Input
}], toggle: [{
type: Output
}] } });
/**
* @deprecated import the components/directives directly or COLLAPSIBLE_DIRECTIVES for the set
*/
class IgoCollapsibleModule {
static forRoot() {
return {
ngModule: IgoCollapsibleModule,
providers: []
};
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: IgoCollapsibleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: IgoCollapsibleModule, imports: [CollapsibleComponent, CollapseDirective], exports: [CollapsibleComponent, CollapseDirective] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: IgoCollapsibleModule, imports: [CollapsibleComponent] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: IgoCollapsibleModule, decorators: [{
type: NgModule,
args: [{
imports: [CollapsibleComponent, CollapseDirective],
exports: [CollapsibleComponent, CollapseDirective]
}]
}] });
const COLLAPSIBLE_DIRECTIVES = [
CollapsibleComponent,
CollapseDirective
];
/**
* Generated bundle index. Do not edit.
*/
export { COLLAPSIBLE_DIRECTIVES, CollapseDirective, CollapsibleComponent, IgoCollapsibleModule };
//# sourceMappingURL=igo2-common-collapsible.mjs.map