fix:min: move doneAnim, startAnim to component

.github/workflows/ci.yml

@@ -12,10 +12,11 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [ 12 ]
+        node-version: [ 14, 16 ]
 
     steps:
     - uses: actions/checkout@v2
+
     - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v2
       with:
@@ -43,6 +44,7 @@ jobs:
         echo Installing local packages and Building Sample app
         npm ci
         npm run build:sample --if-present
+
     - name: Make a drop
       uses: actions/upload-artifact@v1
       with:

.github/workflows/releases.yml

@@ -14,6 +14,7 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v2
+
       - name: Create Release
         id: create_release
         uses: actions/create-release@latest

projects/@ngx-dummy/accordion-simple/README.md

@@ -52,13 +52,9 @@ npm install --save @ngx-dummy/accordion-simple
 
 ```typescript
 import { NgModule, Component, enableProdMode } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import {
-	AccordionModule,
-	Accordion,
-	IAccordionStyling,
-} from 'https://cdn.jsdelivr.net/npm/@ngx-dummy/accordion-simple@latest/bundles/ngx-dummy-accordion-simple.umd.min.js';
+import { AccordionModule, Accordion, IAccordionStyling } from 'https://cdn.jsdelivr.net/npm/@ngx-dummy/accordion-simple@latest/bundles/ngx-dummy-accordion-simple.umd.min.js';
 
 @Component({
 	selector: 'my-app',
@@ -94,7 +90,7 @@ class AppCmp {
 }
 
 @NgModule({
-	imports: [BrowserModule, AccordionModule],
+	imports: [BrowserAnimationsModule, AccordionModule],
 	declarations: [AppCmp],
 	bootstrap: [AppCmp],
 })
@@ -119,22 +115,30 @@ $~> npm run sample
 
 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/vovansuper/accordion-simple)
 
+**Make sure in install `BrowserAnimationsModule` or `NoopAnimationsModule` in the `AppModule` of Your application**
+
 ---
 
 ## Main idea
 
-Simple Angular accordion component and a simple demonstrator app; the app is a simple demonstrator project - showcasing the integration of the accordion library and applying basic setting of it.
+Simple Angular accordion component and a simple demostrator app; the app is a simple demonstrator project - showcasing the integration of the accordion library and applying basic setting of it.
 
 Any suggestions for improvement are welcome. Please [setup a new issue](https://github.com/VovanSuper/accordion-simple/issues/new) if you have any problems using this package or find ways in which it could be improved.
 To ask for features / report on a bug follow the guide in : [Issue Report](./.github/ISSUE_TEMPLATE/bug_report.md)
 
+<br />
+
 <details closed>
 <summary>TODO:</summary>
 
 - [ x ] Dynamic styling of accordion and accordion items (headers, bodies...)
 
 </details>
 
+<br />
+
+---
+
 ## Documentation
 
 - General typeDoc generated types of the Accordion-simple library are available in [[docs](./docs/typedocs/index.html)]
@@ -147,6 +151,21 @@ To ask for features / report on a bug follow the guide in : [Issue Report](./.gi
 
 ---
 
+<br/>
+
+<details closed>
+<summary>Other projects:</summary>
+
+|     Name      |                    URL                     |
+| :-----------: | :----------------------------------------: |
+| Select Simple | https://github.com/ngx-dummy/select-simple |
+
+</details>
+
+<br/>
+
+---
+
 ##### Redistribution
 
 Licensed under the GNU GPLv3 License - see the [LICENSE](LICENSE) file for details.

projects/@ngx-dummy/accordion-simple/src/lib/accordion-item-img.directive.ts

@@ -35,88 +35,89 @@ export class AccordionItemImgDirective implements AfterViewInit, AfterContentChe
 	@HostBinding('attr.src') get src() {
 		return this._src;
 	}
-	private nativeImgEl: HTMLImageElement;
+
+	private _nativeImgEl: HTMLImageElement;
 	private _src: string | SafeResourceUrl | undefined;
 	private _openSign: string | SafeResourceUrl | undefined;
 	private _closeSign: string | SafeResourceUrl | undefined;
 	private _baseLogoImg = getSvgSafeRes(logo_svg, this.sanitizer);
 	private _baseChevronImg = getSvgSafeRes(arrow_down, this.sanitizer);
-	private isSet = false;
-	private needToRecheck = false;
+	private _isSet = false;
+	private _needToRecheck = false;
 
 	constructor(private el: ElementRef<HTMLImageElement>, private renderer: Renderer2, private zone: NgZone, private sanitizer: DomSanitizer) {}
 
 	ngAfterViewInit() {
-		this.nativeImgEl = this.el.nativeElement;
+		this._nativeImgEl = this.el.nativeElement;
 	}
 
 	ngAfterContentChecked() {
-		if (this.isSet && !this.needToRecheck) {
+		if (this._isSet && !this._needToRecheck) {
 			return;
 		}
-		if (this.isSet && this.needToRecheck) {
-			return this.doOpenCloseSrcRecheck();
+		if (this._isSet && this._needToRecheck) {
+			return this._doOpenCloseSrcRecheck();
 		}
 
-		if (this.isLogoImg()) {
+		if (this._isLogoImg()) {
 			// this._src = this.readElDataSet('src') || this._baseLogoImg;
 			// return this.setNoRecheck();
-			return this.setItemHeaderImgSageSrc(this.readElDataSet('src') || this._baseLogoImg);
-		} else if (this.isCloserImg()) {
-			this._openSign = this.readElDataSet('opensrc') ?? undefined;
-			this._closeSign = this.readElDataSet('closesrc') ?? undefined;
-			if (!this.isImgOpenClose()) {
+			return this._setItemHeaderImgSafeSrc(this._readElDataSet('src') || this._baseLogoImg);
+		} else if (this._isCloserImg()) {
+			this._openSign = this._readElDataSet('opensrc') ?? undefined;
+			this._closeSign = this._readElDataSet('closesrc') ?? undefined;
+			if (!this._isImgOpenClose()) {
 				// this._src = this._baseChevronImg;
 				// return this.setNoRecheck();
-				return this.setItemHeaderImgSageSrc(this._baseChevronImg);
+				return this._setItemHeaderImgSafeSrc(this._baseChevronImg);
 			} else {
 				if (this._openSign !== this._closeSign) {
-					this.needToRecheck = true;
+					this._needToRecheck = true;
 				}
-				this.isSet = true;
+				this._isSet = true;
 				return;
 			}
 		}
 	}
 
-	onLoad = ({ target, ...rest }: { target: HTMLImageElement; rest: any[] }) => this.setLoadSuccess(target);
+	onLoad = ({ target, ...rest }: { target: HTMLImageElement; rest: any[] }) => this._setLoadSuccess(target);
 	onError = ({ target, ...rest }: { target: HTMLImageElement; rest: any[] }) => {
-		this.setLoadAlter(target);
+		this._setLoadAlter(target);
 		if (target.classList.contains(ImgClasses.LOGO)) {
 			// this.setItemHeaderImgSrc(target, this._baseLogoImg);
-			this.setItemHeaderImgSageSrc(this._baseLogoImg);
+			this._setItemHeaderImgSafeSrc(this._baseLogoImg);
 		} else if (target.classList.contains(ImgClasses.ENDING)) {
 			// this.setItemHeaderImgSrc(target, this._baseChevronImg);
-			this.setItemHeaderImgSageSrc(this._baseChevronImg);
+			this._setItemHeaderImgSafeSrc(this._baseChevronImg);
 		} else {
 			return l('Not an Accordion Item header image');
 		}
 	};
 
-	private doOpenCloseSrcRecheck = () => {
+	private _doOpenCloseSrcRecheck = () => {
 		this.zone.runOutsideAngular(() => {
-			this._src = this.nativeImgEl?.classList.contains('open') ? this._closeSign : this._openSign;
+			this._src = this._nativeImgEl?.classList.contains('open') ? this._closeSign : this._openSign;
 		});
 	};
-	private setItemHeaderImgSrc = (imgRef: HTMLImageElement, src: string | SafeResourceUrl) => this.renderer.setAttribute(imgRef, 'src', src as string);
-	private setItemHeaderImgSageSrc = (src: string | SafeResourceUrl) => {
+	private _setItemHeaderImgSrc = (imgRef: HTMLImageElement, src: string | SafeResourceUrl) => this.renderer.setAttribute(imgRef, 'src', src as string);
+	private _setItemHeaderImgSafeSrc = (src: string | SafeResourceUrl) => {
 		this._src = src;
-		return this.setNoRecheck();
+		return this._setNoRecheck();
 	};
-	private readElDataSet = (attr: string) => this.nativeImgEl?.dataset[attr];
-	private setLoadSuccess = (target: HTMLImageElement) => {
+	private _readElDataSet = (attr: string) => this._nativeImgEl?.dataset[attr];
+	private _setLoadSuccess = (target: HTMLImageElement) => {
 		target.classList.add(ImgLoadClass.SUCCESS);
-		this.isSet = true;
+		this._isSet = true;
 	};
-	private setLoadAlter = (target: HTMLImageElement) => {
+	private _setLoadAlter = (target: HTMLImageElement) => {
 		target.classList.add(ImgLoadClass.ALTER);
-		this.setNoRecheck();
+		this._setNoRecheck();
 	};
-	private isImgOpenClose = () => !!this._closeSign && !!(this._closeSign as string).length && !!this._openSign && !!(this._openSign as string).length;
-	private isLogoImg = () => this.nativeImgEl?.classList.contains(ImgClasses.LOGO);
-	private isCloserImg = () => this.nativeImgEl?.classList.contains(ImgClasses.ENDING);
-	private setNoRecheck = () => {
-		this.isSet = true;
-		this.needToRecheck = false;
+	private _isImgOpenClose = () => !!this._closeSign && !!(this._closeSign as string).length && !!this._openSign && !!(this._openSign as string).length;
+	private _isLogoImg = () => this._nativeImgEl?.classList.contains(ImgClasses.LOGO);
+	private _isCloserImg = () => this._nativeImgEl?.classList.contains(ImgClasses.ENDING);
+	private _setNoRecheck = () => {
+		this._isSet = true;
+		this._needToRecheck = false;
 	};
 }

projects/@ngx-dummy/accordion-simple/src/lib/accordion-item.component.ts

@@ -23,6 +23,23 @@ export class AccordionItemComponent {
 	getItemBodyTemplate = getItemBodyTemplate!;
 	isOpen$ = of(false);
 	item: Partial<AccordionItemInternal>;
-	startAnim: (e: NgAnimationEvent) => void;
-	doneAnim: (e: NgAnimationEvent) => void;
+
+	startAnim(e: NgAnimationEvent) {
+		(<HTMLElement>e.element).style.willChange = 'height, opacity, visibility';
+		const classes = <DOMTokenList>e.element.classList;
+		if (e.fromState === 'void') {
+			classes?.add('closed');
+		}
+		if (e.fromState === 'closed' && e.toState === 'opened') {
+			classes.replace('closed', 'opened');
+		}
+	}
+
+	doneAnim(e: NgAnimationEvent) {
+		(<HTMLElement>e.element).style.willChange = 'auto';
+		const classes = <DOMTokenList>e.element.classList;
+		if (e.fromState == 'opened' && e.toState == 'closed') {
+			classes.replace('opened', 'closed');
+		}
+	}
 }

projects/@ngx-dummy/accordion-simple/src/lib/accordion-item.directive.ts

@@ -55,24 +55,6 @@ export class AccordionItemDirective implements OnInit, AfterViewInit, OnDestroy
 		private cd: ChangeDetectorRef
 	) {}
 
-	startAnim(e: NgAnimationEvent) {
-		(<HTMLElement>e.element).style.willChange = 'height, opacity, visibility';
-		const classes = <DOMTokenList>e.element.classList;
-		if (e.fromState === 'void') {
-			classes?.add('closed');
-		}
-		if (e.fromState === 'closed' && e.toState === 'opened') {
-			classes.replace('closed', 'opened');
-		}
-	}
-	doneAnim(e: NgAnimationEvent) {
-		(<HTMLElement>e.element).style.willChange = 'auto';
-		const classes = <DOMTokenList>e.element.classList;
-		if (e.fromState == 'opened' && e.toState == 'closed') {
-			classes.replace('opened', 'closed');
-		}
-	}
-
 	ngOnInit() {
 		this.hostCmp.item = {
 			...this.item,
@@ -93,9 +75,6 @@ export class AccordionItemDirective implements OnInit, AfterViewInit, OnDestroy
 			pluck<IToggler, 'isOpen'>('isOpen'),
 			tap((isOpen = false) => (this.isOpen = isOpen))
 		);
-
-		this.hostCmp.startAnim = this.startAnim;
-		this.hostCmp.doneAnim = this.doneAnim;
 	}
 
 	ngAfterViewInit() {
@@ -146,11 +125,11 @@ export class AccordionItemDirective implements OnInit, AfterViewInit, OnDestroy
 	}
 
 	onClick = ([{ outerHTML }, { dataset }]: [{ outerHTML: string }, { dataset: any }]) =>
-		!!outerHTML && !!dataset && outerHTML.includes('header') ? this.handleClick({ ...dataset }) : void 0;
+		!!outerHTML && !!dataset && outerHTML.includes('header') ? this._handleClick({ ...dataset }) : void 0;
 
 	onDblClick = ([{ outerHTML }, { dataset }]: [{ outerHTML: string }, { dataset: any }]) =>
-		!!outerHTML && this.bodyDblclkClose && outerHTML.includes('accord-item__body') ? this.handleClick({ ...dataset }) : void 0;
+		!!outerHTML && this.bodyDblclkClose && outerHTML.includes('accord-item__body') ? this._handleClick({ ...dataset }) : void 0;
 
-	private handleClick = ({ idx, ...rest } = { idx: -1 }) => this.toggle(+idx);
-	private toggle = (itemId: number) => this.toggled.emit({ itemId, isOpen: !this.isOpen });
+	private _handleClick = ({ idx, ...rest } = { idx: -1 }) => this._toggle(+idx);
+	private _toggle = (itemId: number) => this.toggled.emit({ itemId, isOpen: !this.isOpen });
 }

projects/@ngx-dummy/accordion-simple/src/lib/accordion-open.service.ts

@@ -30,6 +30,7 @@ export class AccordionOpenService extends BehaviorSubject<IToggler[]> {
 	}
 
 	setItemsOpen = (itemsStats: IToggler[]) => this.next(itemsStats);
+
 	close = () => {
 		this.complete();
 		super.unsubscribe();

projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.spec.ts

@@ -6,6 +6,7 @@
  * Copyright  Vladimir Ovsyukov <[email protected]>
  * Published under GNU LGPLv3 License
  */
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { DebugElement } from '@angular/core';
 import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
@@ -16,7 +17,6 @@ import { AccordionModule } from './accordion.module';
 import { IAccordionItemStyling } from './settings/IAccordionStylings';
 import { simpleAccordionList, sampleStyling, dummyAccordionList1 } from '../helpers/dummy-data';
 import { TestHostModule, TestHostComponent } from '../helpers/test-host.component';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('An Accordion component', () => {
 	let accordCmpFixture: ComponentFixture<AccordionComponent>;

projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.ts

@@ -90,13 +90,14 @@ export class AccordionComponent implements OnInit, OnChanges, OnDestroy {
 	get loadingTpl(): TemplateRef<Element> {
 		return this._loadingTpl ?? this.defloadingTpl;
 	}
-	private _loadingTpl: TemplateRef<Element>;
-	private _accord: AccordionInternal;
 	_bodyDblclkClose = false;
-	private multiSelect = false;
 	_itemStyle: IAccordionItemStyling;
 	_isNumbered = false;
 
+	private _loadingTpl: TemplateRef<Element>;
+	private _accord: AccordionInternal;
+	private multiSelect = false;
+
 	constructor(@Self() private itemsOpenSvc: AccordionOpenService, private hostEl: ElementRef<Element>, private renderer: Renderer2) {}
 
 	ngOnInit() {

projects/accordion-sample/src/app/app.component.ts

@@ -11,7 +11,7 @@ import { delay } from 'rxjs/operators';
 import { of } from 'rxjs';
 import { MDCRipple } from '@material/ripple';
 
-import { IAccordionStyling, Accordion } from '@ngx-dummy/accordion-simple/index';
+import { IAccordionStyling, Accordion } from '@ngx-dummy/accordion-simple/settings';
 import { dummyAccordionList1 as list1, dummyAccordionList2 } from './helpers/dummy-data';
 import { loaderIn } from './loader.anim';
 

projects/accordion-sample/src/app/app.module.ts

@@ -10,7 +10,7 @@ import { NgModule } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { AppComponent } from './app.component';
-import { AccordionModule } from '@ngx-dummy/accordion-simple/index';
+import { AccordionModule } from '@ngx-dummy/accordion-simple/accordion.module';
 import { App2Component } from './app2.component';
 
 @NgModule({