ng-toggle-directive
Version:
A simple Angular library providing toggle functionality with a directive.
71 lines (65 loc) • 3.31 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, Input, HostListener, NgModule } from '@angular/core';
class ToggleDirective {
constructor(el, renderer) {
this.el = el;
this.renderer = renderer;
this.isExpanded = false;
}
toggleTargetSection() {
const currentMaxHeight = window.getComputedStyle(this.targetSection).maxHeight;
if (currentMaxHeight === '0px' || !this.isExpanded) {
this.expand();
}
else {
this.collapse();
}
}
expand() {
this.renderer.setStyle(this.targetSection, 'max-height', `${this.targetSection.scrollHeight}px`);
this.renderer.addClass(this.el.nativeElement, 'expanded');
this.renderer.addClass(this.targetSection, 'show');
this.isExpanded = true;
}
collapse() {
this.renderer.setStyle(this.targetSection, 'max-height', '0');
this.renderer.removeClass(this.el.nativeElement, 'expanded');
this.renderer.removeClass(this.targetSection, 'show');
this.isExpanded = false;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToggleDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ToggleDirective, selector: "[ngToggle]", inputs: { targetSection: ["ngToggle", "targetSection"] }, host: { listeners: { "click": "toggleTargetSection()" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToggleDirective, decorators: [{
type: Directive,
args: [{
selector: '[ngToggle]',
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { targetSection: [{
type: Input,
args: ['ngToggle']
}], toggleTargetSection: [{
type: HostListener,
args: ['click']
}] } });
class NgToggleDirectiveModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgToggleDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: NgToggleDirectiveModule, declarations: [ToggleDirective], exports: [ToggleDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgToggleDirectiveModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgToggleDirectiveModule, decorators: [{
type: NgModule,
args: [{
declarations: [ToggleDirective],
imports: [],
exports: [ToggleDirective]
}]
}] });
/*
* Public API Surface of ng-toggle-directive
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgToggleDirectiveModule, ToggleDirective };
//# sourceMappingURL=ng-toggle-directive.mjs.map