ng-toggle-directive
Version:
A simple Angular library providing toggle functionality with a directive.
45 lines • 5.71 kB
JavaScript
import { Directive, Input, HostListener, } from '@angular/core';
import * as i0 from "@angular/core";
export 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']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmctdG9nZ2xlLWRpcmVjdGl2ZS5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy10b2dnbGUtZGlyZWN0aXZlL3NyYy9saWIvbmctdG9nZ2xlLWRpcmVjdGl2ZS5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxLQUFLLEVBR0wsWUFBWSxHQUNiLE1BQU0sZUFBZSxDQUFDOztBQUt2QixNQUFNLE9BQU8sZUFBZTtJQUsxQixZQUNVLEVBQWMsRUFDZCxRQUFtQjtRQURuQixPQUFFLEdBQUYsRUFBRSxDQUFZO1FBQ2QsYUFBUSxHQUFSLFFBQVEsQ0FBVztRQUpyQixlQUFVLEdBQVksS0FBSyxDQUFDO0lBS2pDLENBQUM7SUFFbUIsbUJBQW1CO1FBQ3hDLE1BQU0sZ0JBQWdCLEdBQUcsTUFBTSxDQUFDLGdCQUFnQixDQUM5QyxJQUFJLENBQUMsYUFBYSxDQUNuQixDQUFDLFNBQVMsQ0FBQztRQUVaLElBQUksZ0JBQWdCLEtBQUssS0FBSyxJQUFJLENBQUMsSUFBSSxDQUFDLFVBQVUsRUFBRTtZQUNsRCxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7U0FDZjthQUFNO1lBQ0wsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDO1NBQ2pCO0lBQ0gsQ0FBQztJQUVPLE1BQU07UUFDWixJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsYUFBYSxFQUFDLFlBQVksRUFBRSxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsWUFBWSxJQUFJLENBQUMsQ0FBQztRQUNoRyxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsRUFBRSxVQUFVLENBQUMsQ0FBQztRQUMxRCxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsYUFBYSxFQUFFLE1BQU0sQ0FBQyxDQUFDO1FBQ25ELElBQUksQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDO0lBQ3pCLENBQUM7SUFFTyxRQUFRO1FBQ2QsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLGFBQWEsRUFBRSxZQUFZLEVBQUUsR0FBRyxDQUFDLENBQUM7UUFDOUQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLEVBQUUsVUFBVSxDQUFDLENBQUM7UUFDN0QsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLGFBQWEsRUFBRSxNQUFNLENBQUMsQ0FBQztRQUN0RCxJQUFJLENBQUMsVUFBVSxHQUFHLEtBQUssQ0FBQztJQUMxQixDQUFDOytHQWxDVSxlQUFlO21HQUFmLGVBQWU7OzRGQUFmLGVBQWU7a0JBSDNCLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLFlBQVk7aUJBQ3ZCO3lIQUVvQixhQUFhO3NCQUEvQixLQUFLO3VCQUFDLFVBQVU7Z0JBU00sbUJBQW1CO3NCQUF6QyxZQUFZO3VCQUFDLE9BQU8iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBEaXJlY3RpdmUsXG4gIElucHV0LFxuICBFbGVtZW50UmVmLFxuICBSZW5kZXJlcjIsXG4gIEhvc3RMaXN0ZW5lcixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1tuZ1RvZ2dsZV0nLFxufSlcbmV4cG9ydCBjbGFzcyBUb2dnbGVEaXJlY3RpdmUge1xuICBASW5wdXQoJ25nVG9nZ2xlJykgdGFyZ2V0U2VjdGlvbiE6IEhUTUxFbGVtZW50O1xuXG4gIHByaXZhdGUgaXNFeHBhbmRlZDogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgZWw6IEVsZW1lbnRSZWYsXG4gICAgcHJpdmF0ZSByZW5kZXJlcjogUmVuZGVyZXIyLFxuICApIHt9XG5cbiAgQEhvc3RMaXN0ZW5lcignY2xpY2snKSB0b2dnbGVUYXJnZXRTZWN0aW9uKCk6IHZvaWQge1xuICAgIGNvbnN0IGN1cnJlbnRNYXhIZWlnaHQgPSB3aW5kb3cuZ2V0Q29tcHV0ZWRTdHlsZShcbiAgICAgIHRoaXMudGFyZ2V0U2VjdGlvbixcbiAgICApLm1heEhlaWdodDtcblxuICAgIGlmIChjdXJyZW50TWF4SGVpZ2h0ID09PSAnMHB4JyB8fCAhdGhpcy5pc0V4cGFuZGVkKSB7XG4gICAgICB0aGlzLmV4cGFuZCgpO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLmNvbGxhcHNlKCk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBleHBhbmQoKTogdm9pZCB7XG4gICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0aGlzLnRhcmdldFNlY3Rpb24sJ21heC1oZWlnaHQnLCBgJHt0aGlzLnRhcmdldFNlY3Rpb24uc2Nyb2xsSGVpZ2h0fXB4YCk7XG4gICAgdGhpcy5yZW5kZXJlci5hZGRDbGFzcyh0aGlzLmVsLm5hdGl2ZUVsZW1lbnQsICdleHBhbmRlZCcpO1xuICAgIHRoaXMucmVuZGVyZXIuYWRkQ2xhc3ModGhpcy50YXJnZXRTZWN0aW9uLCAnc2hvdycpO1xuICAgIHRoaXMuaXNFeHBhbmRlZCA9IHRydWU7XG4gIH1cblxuICBwcml2YXRlIGNvbGxhcHNlKCk6IHZvaWQge1xuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy50YXJnZXRTZWN0aW9uLCAnbWF4LWhlaWdodCcsICcwJyk7XG4gICAgdGhpcy5yZW5kZXJlci5yZW1vdmVDbGFzcyh0aGlzLmVsLm5hdGl2ZUVsZW1lbnQsICdleHBhbmRlZCcpO1xuICAgIHRoaXMucmVuZGVyZXIucmVtb3ZlQ2xhc3ModGhpcy50YXJnZXRTZWN0aW9uLCAnc2hvdycpO1xuICAgIHRoaXMuaXNFeHBhbmRlZCA9IGZhbHNlO1xuICB9XG59XG4iXX0=