diff --git a/docs/index.html b/docs/index.html
index 10e59496..5f47c225 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -212,6 +212,6 @@ <h5 class="mdc-drawer__subtitle2">Demonstrator app</h5>
 		<script src="//buttons.github.io/buttons.js" async="" defer></script>
 		<script src="//unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
 		<script src="//unpkg.com/swiper/swiper-bundle.js"></script>
-	<script src="runtime.de49577ab69544f8.js" type="module"></script><script src="polyfills.f1706d3c0a438c23.js" type="module"></script><script src="scripts.99b81ef0cc4f5a4a.js" defer></script><script src="vendor.119406ad5f195b81.js" type="module"></script><script src="main.58ac6ac0a827554d.js" type="module"></script>
+	<script src="runtime.de49577ab69544f8.js" type="module"></script><script src="polyfills.f1706d3c0a438c23.js" type="module"></script><script src="scripts.5a3a491caa7667d2.js" defer></script><script src="vendor.119406ad5f195b81.js" type="module"></script><script src="main.79d8e1ce6e46de39.js" type="module"></script>
 
 </body></html>
\ No newline at end of file
diff --git a/docs/main.58ac6ac0a827554d.js b/docs/main.58ac6ac0a827554d.js
deleted file mode 100644
index e8d0ea3d..00000000
--- a/docs/main.58ac6ac0a827554d.js
+++ /dev/null
@@ -1,2 +0,0 @@
-"use strict";(self.webpackChunkaccordion_sample=self.webpackChunkaccordion_sample||[]).push([["main"],{8198:(g,O,d)=>{var h=d(4497),t=d(3210),Z=d(9906),B=d(5802),S=d(745),R=d(6099);const v={id:"Accord_1",name:"Accordion 1",items:[{title:"Accordion Card 1",body:"[[TMPL]]"},{title:"Accordion Card 2",body:'\n\t\t\t<a href="//github.com/ngx-dummy/accordion-simple">Project Repository</a>\n\t\t\t<br />\n\t\t\tSimple 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.'},{title:"Accordion simple Card 3 x 11",body:"\n\t\t\t\t<p>Para1 </p>\n\t\t\t\t<h4> Heading </h4>\n\t\t\t\t<script type='text/javascript'>alert('Injection !');<\/script>\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n      "}]},y={id:"Accord_2",name:"Accordion 2",items:[{id:"item0",title:"Card ",body:"Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione"},{id:"item1",title:"Card 1",body:"\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n      "},{id:"item2",title:"Card 2",body:"\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n      "},{id:"item3",title:"Card 3",body:"\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n      "},{id:"item4",title:"Card 4",body:"\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n      "},{id:"item5",title:"Long Card 5",body:"\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n      "}]};var a=d(4851);const F=(0,a.X$)("moveIn",[(0,a.eR)(":enter",[(0,a.oB)({opacity:0,transform:"translateY(-3rem)"}),(0,a.jt)("1s ease-in-out",(0,a.F4)([(0,a.oB)({offset:.2,opacity:.1,transform:"translateY(-1rem)"}),(0,a.oB)({offset:.6,opacity:.4,transform:"translateY(-0.1rem)"}),(0,a.oB)({offset:1,opacity:1,transform:"none"})]))])]);var A=d(116),q=d(635),V=d(6317);const E=new t.OlP("Accordion Initial Items Open state provider token",{factory:function N(){return[]}});let C=(()=>{class e extends V.X{constructor(i=[]){super(i),this.setItemsOpen=o=>this.next(o),this.close=()=>{this.complete(),super.unsubscribe()}}get itemsOpen$(){return this.asObservable()}get itemsOpenSnapshot(){return this.value}}return e.\u0275fac=function(i){return new(i||e)(t.LFG(E))},e.\u0275prov=t.Yz7({token:e,factory:e.\u0275fac}),e})();const M={accordItemsIn:(0,a.X$)("accordItemsIn",[(0,a.eR)("* => *",[(0,a.IO)(":leave",[(0,a.EY)(-25,[(0,a.jt)(".3s",(0,a.oB)({opacity:0,transform:"scale(0.7, 0.7) translateY(-3rem)"}))])],{optional:!0}),(0,a.IO)(":enter",[(0,a.oB)({opacity:0,transform:"scale(0.7, 0.7) translateY(-3rem)"}),(0,a.EY)(25,[(0,a.jt)(".3s ease-out",(0,a.F4)([(0,a.oB)({offset:0,opacity:0}),(0,a.oB)({offset:.2,opacity:.1,transform:"scale(0.85, 0.85) translateY(-4rem)"}),(0,a.oB)({offset:.5,opacity:.8,transform:"scale(0.9, 0.9) translateY(3rem)"}),(0,a.oB)({offset:1,opacity:1,transform:"none"})]))])],{optional:!0})])]),spinnerIn:(0,a.X$)("spinnerIn",[(0,a.eR)("void => *",[(0,a.IO)(".loader",(0,a.jt)(".5s ease-out",(0,a.F4)([(0,a.oB)({offset:0,opacity:0,transformOrigin:"bottom right",height:0,transform:"translateY(-100px) scale(0, 0)"}),(0,a.oB)({offset:.8,opacity:.6,height:0,transform:"translateY(40px) scale(0.5, 0.5)"}),(0,a.oB)({offset:1,opacity:1,height:"*",transform:"translateY(0) scale(1, 1)"})])),{optional:!0})])])},D={accordionItemBodyHeightCollapse:(0,a.X$)("openClose",[(0,a.SB)("closed",(0,a.oB)({height:"0",opacity:"0",visibility:"collapsed"})),(0,a.SB)("opened",(0,a.oB)({height:"*",opacity:"1",visibility:"visible"})),(0,a.eR)("opened <=> closed",(0,a.jt)(".3s ease-out"))])},z=({itemId:e,isOpen:n,...i})=>({itemId:e,isOpen:n}),H=e=>e.filter(n=>!0===n.isOpen).map(n=>n.itemId).join(",");var p=d(4666);const I=(e,n)=>!!e&&n.sanitize(t.q3G.HTML,e),T=(e,n)=>((e,n)=>n.bypassSecurityTrustResourceUrl(e))((e=>"data:image/svg+xml;base64,"+btoa(e))(e),n),P=e=>!!e&&"string"!=typeof e&&!!e.itemTemplate,$=(e,n)=>P(e)?e.itemTemplate:n,j=e=>P(e)&&"string"==typeof e.itemBody?e.itemBody:e,Q=console.log;var u=(()=>{return(e=u||(u={})).LOGO="accord-item__header--start-img",e.ENDING="accord-item__header--end-img",u;var e})(),_=(()=>{return(e=_||(_={})).SUCCESS="img-loaded__success",e.ALTER="img-load__alter",_;var e})();let W=(()=>{class e{constructor(i,o,r,s){this.el=i,this.renderer=o,this.zone=r,this.sanitizer=s,this._baseLogoImg=T('<svg width="50" height="50" viewBox="0 0 50 50" fill="white" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 0C2.23858 0 0 2.23858 0 5V45C0 47.7614 2.23858 50 5 50H45C47.7614 50 50 47.7614 50 45V5C50 2.23858 47.7614 0 45 0H5ZM11 10C10.4477 10 10 10.4477 10 11V15C10 15.5523 10.4477 16 11 16H39C39.5523 16 40 15.5523 40 15V11C40 10.4477 39.5523 10 39 10H11ZM10 23C10 22.4477 10.4477 22 11 22H39C39.5523 22 40 22.4477 40 23V27C40 27.5523 39.5523 28 39 28H11C10.4477 28 10 27.5523 10 27V23ZM11 34C10.4477 34 10 34.4477 10 35V39C10 39.5523 10.4477 40 11 40H32C32.5523 40 33 39.5523 33 39V35C33 34.4477 32.5523 34 32 34H11Z"/></svg>',this.sanitizer),this._baseChevronImg=T('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="48px" height="48px"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/><path d="M0 0h24v24H0V0z" fill="none"/></svg>',this.sanitizer),this._isSet=!1,this._needToRecheck=!1,this.onLoad=({target:c,...l})=>this._setLoadSuccess(c),this.onError=({target:c,...l})=>{if(this._setLoadAlter(c),c.classList.contains(u.LOGO))this._setItemHeaderImgSafeSrc(this._baseLogoImg);else{if(!c.classList.contains(u.ENDING))return Q("Not an Accordion Item header image");this._setItemHeaderImgSafeSrc(this._baseChevronImg)}},this._doOpenCloseSrcRecheck=()=>{this.zone.runOutsideAngular(()=>{this._src=this._nativeImgEl?.classList.contains("open")?this._closeSign:this._openSign})},this._setItemHeaderImgSrc=(c,l)=>this.renderer.setAttribute(c,"src",l),this._setItemHeaderImgSafeSrc=c=>(this._src=c,this._setNoRecheck()),this._readElDataSet=c=>this._nativeImgEl?.dataset[c],this._setLoadSuccess=c=>{c.classList.add(_.SUCCESS),this._isSet=!0},this._setLoadAlter=c=>{c.classList.add(_.ALTER),this._setNoRecheck()},this._isImgOpenClose=()=>!!(this._closeSign&&this._closeSign.length&&this._openSign&&this._openSign.length),this._isLogoImg=()=>this._nativeImgEl?.classList.contains(u.LOGO),this._isCloserImg=()=>this._nativeImgEl?.classList.contains(u.ENDING),this._setNoRecheck=()=>{this._isSet=!0,this._needToRecheck=!1}}get src(){return this._src}ngAfterViewInit(){this._nativeImgEl=this.el.nativeElement}ngAfterContentChecked(){if(!this._isSet||this._needToRecheck){if(this._isSet&&this._needToRecheck)return this._doOpenCloseSrcRecheck();if(this._isLogoImg())return this._setItemHeaderImgSafeSrc(this._readElDataSet("src")||this._baseLogoImg);if(this._isCloserImg())return this._openSign=this._readElDataSet("opensrc")??void 0,this._closeSign=this._readElDataSet("closesrc")??void 0,this._isImgOpenClose()?(this._openSign!==this._closeSign&&(this._needToRecheck=!0),void(this._isSet=!0)):this._setItemHeaderImgSafeSrc(this._baseChevronImg)}}}return e.\u0275fac=function(i){return new(i||e)(t.Y36(t.SBq),t.Y36(t.Qsj),t.Y36(t.R0b),t.Y36(h.H7))},e.\u0275dir=t.lG2({type:e,selectors:[["",8,"accord-item__header-img"]],hostVars:2,hostBindings:function(i,o){1&i&&t.NdJ("load",function(s){return o.onLoad(s)})("error",function(s){return o.onError(s)}),2&i&&t.uIk("loading","lazy")("src",o.src,t.P3R)}}),e})();function X(e,n){1&e&&t.GkF(0)}function K(e,n){1&e&&t.GkF(0)}function tt(e,n){1&e&&t.GkF(0)}const x=function(e){return{$implicit:e}};function et(e,n){if(1&e){const i=t.EpF();t.TgZ(0,"article",4)(1,"header",5),t.YNc(2,K,1,0,"ng-container",0),t.qZA(),t.TgZ(3,"section",6),t.NdJ("@openClose.start",function(r){return t.CHM(i),t.oxw().startAnim(r)})("@openClose.done",function(r){return t.CHM(i),t.oxw().doneAnim(r)}),t.YNc(4,tt,1,0,"ng-container",0),t.qZA()()}if(2&e){const i=n.$implicit,o=t.oxw(),r=t.MAs(5),s=t.MAs(7);t.xp6(1),t.ekj("opened",i),t.xp6(1),t.Q6J("ngTemplateOutlet",r)("ngTemplateOutletContext",t.VKq(7,x,i)),t.xp6(1),t.Q6J("@openClose",i?"opened":"closed"),t.xp6(1),t.Q6J("ngTemplateOutlet",o.getItemBodyTemplate(o.item.body,s))("ngTemplateOutletContext",t.VKq(9,x,o.getItemBodyCtx(o.item.body)))}}function it(e,n){if(1&e&&(t.TgZ(0,"span"),t._uU(1),t.qZA()),2&e){const i=t.oxw(2);t.xp6(1),t.hij("",i.item.itemNum,".")}}const ot=function(e,n){return{open:e,close:n}};function nt(e,n){if(1&e&&(t.TgZ(0,"div",7)(1,"span",8),t._UZ(2,"img",9),t.YNc(3,it,2,1,"span",10),t.qZA()(),t.TgZ(4,"div",11),t._uU(5),t.qZA(),t.TgZ(6,"div",12)(7,"span",13),t._UZ(8,"img",14),t.qZA()()),2&e){const i=n.$implicit,o=t.oxw();t.xp6(3),t.Q6J("ngIf",o.item.itemNum),t.xp6(2),t.hij(" ",o.item.title," "),t.xp6(2),t.ekj("active",i),t.xp6(1),t.Q6J("ngClass",t.WLB(5,ot,i,!i))}}function st(e,n){1&e&&(t._uU(0),t.Hsn(1)),2&e&&t.hij(" ",n.$implicit," ")}const rt=[[["",8,"accord-item__footer"]]],at=[".accord-item__footer"];let w=(()=>{class e{constructor(){this.getItemBodyCtx=j,this.getItemBodyTemplate=$,this.isOpen$=(0,S.of)(!1)}startAnim(i){i.element.style.willChange="height, opacity, visibility";const o=i.element.classList;"void"===i.fromState&&o?.add("closed"),"closed"===i.fromState&&"opened"===i.toState&&o.replace("closed","opened")}doneAnim(i){i.element.style.willChange="auto","opened"==i.fromState&&"closed"==i.toState&&i.element.classList.replace("opened","closed")}}return e.\u0275fac=function(i){return new(i||e)},e.\u0275cmp=t.Xpm({type:e,selectors:[["ngxd-accordion-item"]],ngContentSelectors:at,decls:8,vars:6,consts:[[4,"ngTemplateOutlet","ngTemplateOutletContext"],["itemTpl",""],["headerDefaultTmpl",""],["bodyDefaultTmpl",""],[1,"accord-item"],[1,"accord-item__header"],[1,"accord-item__body","closed"],[1,"header--control","accord-item__logo"],[1,"accord-item__header--start"],[1,"accord-item__header-img","accord-item__header--start-img"],[4,"ngIf"],[1,"header--control","accord-item__title"],[1,"header--control","accord-item__collapse"],[1,"accord-item__header--end"],[1,"accord-item__header-img","accord-item__header--end-img",3,"ngClass"]],template:function(i,o){if(1&i&&(t.F$t(rt),t.YNc(0,X,1,0,"ng-container",0),t.ALo(1,"async"),t.YNc(2,et,5,11,"ng-template",null,1,t.W1O),t.YNc(4,nt,9,8,"ng-template",null,2,t.W1O),t.YNc(6,st,2,1,"ng-template",null,3,t.W1O)),2&i){const r=t.MAs(3);t.Q6J("ngTemplateOutlet",r)("ngTemplateOutletContext",t.VKq(4,x,t.lcZ(1,2,o.isOpen$)))}},directives:[p.tP,W,p.O5,p.mk],pipes:[p.Ov],styles:["[_nghost-%COMP%]{--color-white: #fff;--ngxd-head-item-color: #056;--ngxd-head-item-color--active: #0095b3;--ngxd-head-item-color--opened: #002b33}.accord-item[_ngcontent-%COMP%]{display:block;box-sizing:border-box;min-width:10rem;min-height:1rem;overflow:hidden}.accord-item[_ngcontent-%COMP%]   .accord-item__header[_ngcontent-%COMP%]{display:flex;position:relative;flex-direction:row;min-height:1rem;max-height:50px;overflow:visible;transition:.6s ease;background-color:var(--ngxd-head-item-color);color:var(--color-white);-webkit-user-select:none;-moz-user-select:none;user-select:none}.accord-item[_ngcontent-%COMP%]   .accord-item__header[_ngcontent-%COMP%]:hover, .accord-item[_ngcontent-%COMP%]   .accord-item__header[_ngcontent-%COMP%]:active{background-color:var(--ngxd-head-item-color--active)!important;cursor:pointer}.accord-item[_ngcontent-%COMP%]   .accord-item__header.opened[_ngcontent-%COMP%]{background-color:var(--ngxd-head-item-color--opened)!important}.accord-item[_ngcontent-%COMP%]   .accord-item__header[_ngcontent-%COMP%]   .accord-item__header--btn[_ngcontent-%COMP%]{max-width:2rem;border:none;background:transparent;font-size:x-large;text-align:center;vertical-align:middle}.accord-item[_ngcontent-%COMP%]   .accord-item__header[_ngcontent-%COMP%]   .accord-item__collapse--btn[_ngcontent-%COMP%]{padding-right:1px}.accord-item[_ngcontent-%COMP%]   .accord-item__header[_ngcontent-%COMP%]   .accord-item__header--start[_ngcontent-%COMP%], .accord-item[_ngcontent-%COMP%]   .accord-item__header[_ngcontent-%COMP%]   .accord-item__header--end[_ngcontent-%COMP%]{display:flex;flex:0 0 1rem;align-items:center;justify-content:center;max-width:1.5rem;padding-left:1px}.accord-item[_ngcontent-%COMP%]   .accord-item__header[_ngcontent-%COMP%]   .accord-item__header--start[_ngcontent-%COMP%]   .accord-item__header--start-img[_ngcontent-%COMP%], .accord-item[_ngcontent-%COMP%]   .accord-item__header[_ngcontent-%COMP%]   .accord-item__header--end[_ngcontent-%COMP%]   .accord-item__header--start-img[_ngcontent-%COMP%]{max-width:1rem;margin-right:.5rem}.accord-item[_ngcontent-%COMP%]   .accord-item__header[_ngcontent-%COMP%]   .accord-item__header--start[_ngcontent-%COMP%] > img[_ngcontent-%COMP%], .accord-item[_ngcontent-%COMP%]   .accord-item__header[_ngcontent-%COMP%]   .accord-item__header--end[_ngcontent-%COMP%] > img[_ngcontent-%COMP%]{max-width:1.5rem}.accord-item[_ngcontent-%COMP%]   .accord-item__header[_ngcontent-%COMP%]   .accord-item__header--end[_ngcontent-%COMP%]{padding-right:1px;padding-left:0;will-change:transform}.accord-item[_ngcontent-%COMP%]   .accord-item__header[_ngcontent-%COMP%]   .accord-item__header--end.active[_ngcontent-%COMP%]{transform:rotate(180deg);transition:transform .3s ease-out}.accord-item[_ngcontent-%COMP%]   .accord-item__header[_ngcontent-%COMP%]   .accord-item__header--end[_ngcontent-%COMP%]:not(.active){transform:rotate(0);transition:transform .3s ease-out}.accord-item[_ngcontent-%COMP%]   .accord-item__header[_ngcontent-%COMP%]   .header--control[_ngcontent-%COMP%]{display:flex;align-items:center;margin:.1rem;padding:1rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:pan-y}.accord-item[_ngcontent-%COMP%]   .accord-item__header[_ngcontent-%COMP%]   .accord-item__title[_ngcontent-%COMP%]{flex:1 1 100%;font-size:14px;text-align:center}.accord-item[_ngcontent-%COMP%]   .accord-item__header[_ngcontent-%COMP%]   .accord-item__collapse[_ngcontent-%COMP%]{flex:0 0 1rem}.accord-item[_ngcontent-%COMP%]   .accord-item__body[_ngcontent-%COMP%]{touch-action:pinch-zoom pan-y;transform-origin:top;-webkit-user-select:text;-moz-user-select:text;user-select:text}.accord-item[_ngcontent-%COMP%]   .accord-item__body.closed[_ngcontent-%COMP%]{position:absolute}"],data:{animation:[D.accordionItemBodyHeightCollapse]},changeDetection:0}),e})();var ct=d(253),dt=d(8951),lt=d(4276),mt=d(9337);let pt=(()=>{class e{constructor(i,o,r,s,c,l){this.hostCmp=i,this.hostElRef=o,this.itemStatusSvc=r,this.render=s,this.sanitizer=c,this.cd=l,this.itemStyles={headHeight:"50px",headBgColor:"#ccc",headColor:"#fff",bodyBgColor:"#fff",bodyColor:"#000",fontSize:"10px",bodyPadding:"0"},this.bodyDblclkClose=!1,this.isNumbered=!1,this.toggled=new t.vpe,this.isOpen=!1,this.hostDestroy$$=new ct.x,this.onClick=([{outerHTML:m},{dataset:f}])=>m&&f&&m.includes("header")?this._handleClick({...f}):void 0,this.onDblClick=([{outerHTML:m},{dataset:f}])=>m&&this.bodyDblclkClose&&m.includes("accord-item__body")?this._handleClick({...f}):void 0,this._handleClick=({idx:m,...f}={idx:-1})=>this._toggle(+m),this._toggle=m=>this.toggled.emit({itemId:m,isOpen:!this.isOpen})}ngOnInit(){this.hostCmp.item={...this.item,body:"string"==typeof this.item.body?I(this.item.body,this.sanitizer):{itemTemplate:this.item.body?.itemTemplate,itemBody:I(this.item.body?.itemBody,this.sanitizer)},itemNum:this.isNumbered?+this.item.itemId+1:null},this.hostCmp.isOpen$=this.itemStatusSvc.itemsOpen$.pipe((0,dt.R)(this.hostDestroy$$),(0,A.h)(i=>!!i&&!!i.length),(0,q.U)(i=>i.find(({itemId:o})=>o===+this.item.itemId)),(0,lt.j)("isOpen"),(0,mt.b)((i=!1)=>this.isOpen=i))}ngAfterViewInit(){const i=this.hostElRef.nativeElement,o=i.getElementsByClassName("accord-item").item(0),r=i.getElementsByClassName("accord-item__header").item(0),s=i.getElementsByClassName("accord-item__body").item(0);{const c=r.getElementsByClassName("accord-item__header--start-img").item(0),l=r.getElementsByClassName("accord-item__header--end-img").item(0);this.logo&&this.render.setAttribute(c,"data-src",this.logo),this.openSign&&this.render.setAttribute(l,"data-opensrc",this.openSign),this.closeSign&&this.render.setAttribute(l,"data-closesrc",this.closeSign),this.cd.detectChanges()}this.render.setStyle(o,"margin",this.itemStyles.margin??"0"),this.render.setStyle(o,"padding",this.itemStyles.padding??"0"),this.itemStyles.font&&this.render.setStyle(o,"font",this.itemStyles.font),this.itemStyles.fontSize&&this.render.setStyle(o,"font-size",this.itemStyles.fontSize),this.itemStyles.fontStyle&&this.render.setStyle(o,"font-style",this.itemStyles.fontStyle),this.itemStyles.fontFamily&&this.render.setStyle(o,"font-family",this.itemStyles.fontFamily),this.render.setStyle(o,"margin-bottom",this.itemStyles.marginBottom),this.render.setStyle(o,"margin-top",this.itemStyles.marginTop),this.itemStyles.headBgColor&&i.style.setProperty("--ngxd-head-item-color",this.itemStyles.headBgColor),this.itemStyles.headHeight&&this.render.setStyle(r,"height",this.itemStyles.headHeight),this.itemStyles.headFont&&this.render.setStyle(r,"font",this.itemStyles.headFont),this.render.setStyle(r,"font-size",this.itemStyles.headFontSize??"1.1rem"),this.render.setStyle(r,"color",this.itemStyles.headColor??"#ccc"),this.render.setStyle(s,"background-color",this.itemStyles.bodyBgColor??"rgba(200, 200, 200, 0.2)"),this.render.setStyle(s,"color",this.itemStyles.bodyColor??"#000"),this.render.setStyle(s,"padding",this.itemStyles.bodyPadding??".1rem"),this.render.setStyle(s,"margin",this.itemStyles.bodyMargin??"0"),this.itemStyles.bodyFont&&this.render.setStyle(s,"font",this.itemStyles.bodyFont),this.render.setStyle(s,"font-size",this.itemStyles.bodyFontSize??"1rem"),this.itemStyles.bodyTextAlign&&this.render.setStyle(s,"text-align",this.itemStyles.bodyTextAlign),this.render.setStyle(s,"cursor",this.bodyDblclkClose?"grab":"default")}ngOnDestroy(){this.hostDestroy$$.next(),this.hostDestroy$$.complete()}}return e.\u0275fac=function(i){return new(i||e)(t.Y36(w),t.Y36(t.SBq),t.Y36(C,1),t.Y36(t.Qsj),t.Y36(h.H7),t.Y36(t.sBO))},e.\u0275dir=t.lG2({type:e,selectors:[["","ngxdAccordionItem",""]],hostVars:2,hostBindings:function(i,o){1&i&&t.NdJ("dblclick",function(s){return o.onDblClick([s.target,s.currentTarget])})("click",function(s){return o.onClick([s.target,s.currentTarget])}),2&i&&t.ekj("opened",o.isOpen)},inputs:{item:["ngxdAccordionItem","item"],itemStyles:["styling","itemStyles"],logo:"logo",openSign:"openSign",closeSign:"closeSign",bodyDblclkClose:"bodyDblclkClose",isNumbered:"isNumbered"},outputs:{toggled:"toggled"}}),e})();const ut=["defloadingTpl"];function gt(e,n){1&e&&t.GkF(0)}const ht=function(e){return{$implicit:e}};function _t(e,n){if(1&e&&t.GkF(0,6),2&e){const i=n.$implicit;t.oxw(2);const o=t.MAs(5);t.Q6J("ngTemplateOutlet",o)("ngTemplateOutletContext",t.VKq(2,ht,i))}}function ft(e,n){if(1&e&&t.YNc(0,_t,1,4,"ng-container",5),2&e){const i=t.oxw();t.Q6J("ngForOf",i.accordionItems)("ngForTrackBy",i.trackByFn)}}function vt(e,n){if(1&e){const i=t.EpF();t.TgZ(0,"ngxd-accordion-item",7),t.NdJ("toggled",function(r){return t.CHM(i),t.oxw().onItemToggled(r)}),t.qZA()}if(2&e){const i=n.$implicit,o=t.oxw();t.Q6J("ngxdAccordionItem",i)("isNumbered",o._isNumbered)("bodyDblclkClose",o._bodyDblclkClose)("openSign",o.openSign)("closeSign",o.closeSign)("logo",o.listLogo)("styling",o._itemStyle)("id",i.id)("@accordItemsIn",void 0),t.uIk("data-idx",i.itemId)}}function yt(e,n){1&e&&(t.TgZ(0,"div",8),t.O4$(),t.TgZ(1,"svg",9)(2,"rect",10),t._UZ(3,"animate",11)(4,"animate",12),t.qZA(),t.TgZ(5,"rect",13),t._UZ(6,"animate",14)(7,"animate",15),t.qZA(),t.TgZ(8,"rect",16),t._UZ(9,"animate",17)(10,"animate",18),t.qZA()()()),2&e&&t.Q6J("@spinnerIn",void 0)}let k=(()=>{class e{constructor(i,o,r){this.itemsOpenSvc=i,this.hostEl=o,this.renderer=r,this.accordionStyling={numberedItems:!1,isMultiShow:!1,bodyDblclkCloseItems:!1,maxWidth:"100%",itemsGuts:"1rem",margin:"0",itemStyling:{headBgColor:"#4197b2",headColor:"#fff",bodyBgColor:"#fff",bodyColor:"#000",margin:"0",padding:"0"}},this._bodyDblclkClose=!1,this._isNumbered=!1,this.multiSelect=!1,this.onItemToggled=({itemId:s,isOpen:c}={itemId:0,isOpen:!1})=>this.itemsOpenSvc.setItemsOpen(this.itemsOpenSvc.itemsOpenSnapshot.map(({itemId:l,isOpen:m})=>l===+s?{itemId:s,isOpen:c}:{itemId:l,isOpen:!!this.multiSelect&&m})),this.closeAll=()=>this.accordionItems?.forEach(({itemId:s,...c})=>this.onItemToggled({itemId:s,isOpen:!1})),this.trackByFn=(s,{itemId:c,...l})=>+c}get id(){return`${this.attributes.id}`}get name(){return this.attributes.name}set accordionList(i){let[o,r]=[!!i&&!!i.name?.length&&i.name||"Sample-Accordion",!!i&&!!i.id&&i.id||"accordion_"+ ++e.idx];this._accord=Object.assign({id:r,name:o},{items:i?.items.map((s,c)=>({...s,id:s.id&&"string"==typeof s.id?s.id:`${r}__accord-item_${c}`,itemId:c}))})}get accordionItems(){return this._accord?.items}set loadingTpl(i){this._loadingTpl=i||this.defloadingTpl}get loadingTpl(){return this._loadingTpl??this.defloadingTpl}ngOnInit(){this._bodyDblclkClose=!!this.accordionStyling.bodyDblclkCloseItems,this.multiSelect=!!this.accordionStyling.isMultiShow,this.itemsOpenSvc.itemsOpen$.pipe((0,A.h)(s=>!!s?.length),(0,q.U)(H)).subscribe(s=>this._openedItems=s),this._isNumbered=this.accordionStyling.numberedItems??!1,this._bodyDblclkClose=this.accordionStyling.bodyDblclkCloseItems??!1;let i=Array.isArray(this.accordionStyling.itemStyling)?this.accordionStyling.itemStyling.reduce((s={},c)=>({...s,...c})):{...this.accordionStyling.itemStyling};const o=this.accordionStyling.itemsGuts??0;i={padding:"0",marginBottom:o,marginTop:o,...i},this._itemStyle=Object.entries(i).map(([s,c])=>({[s]:"number"==typeof c?`${c}px`:c})).reduce((s,c)=>({...s,...c}));const r=this.hostEl.nativeElement;this.renderer.setStyle(r,"max-width",this.accordionStyling.maxWidth??"100%"),this.renderer.setStyle(r,"margin",this.accordionStyling.margin??"0")}ngOnChanges(i){Object.keys(i).forEach(o=>{"accordionList"===o&&i[o].previousValue!==i[o].currentValue&&this.itemsOpenSvc.setItemsOpen(this.accordionItems?.map(z))})}ngOnDestroy(){this.itemsOpenSvc.close()}get attributes(){const{id:i,name:o}=this._accord;return{id:i,name:o}}}return e.idx=0,e.\u0275fac=function(i){return new(i||e)(t.Y36(C,2),t.Y36(t.SBq),t.Y36(t.Qsj))},e.\u0275cmp=t.Xpm({type:e,selectors:[["ngxd-accordion"]],viewQuery:function(i,o){if(1&i&&t.Gf(ut,7,t.Rgc),2&i){let r;t.iGM(r=t.CRH())&&(o.defloadingTpl=r.first)}},hostVars:3,hostBindings:function(i,o){2&i&&t.uIk("data-items-opened",o._openedItems)("id",o.id)("name",o.name)},inputs:{accordionList:"accordionList",openSign:"openSign",closeSign:"closeSign",listLogo:"listLogo",accordionStyling:"accordionStyling",loadingTpl:"loadingTpl"},exportAs:["ngxdAccordion"],features:[t._Bn([],[C]),t.TTD],decls:8,vars:3,consts:[[1,"accordion"],[4,"ngIf","ngIfThen","ngIfElse"],["itemsTmpl",""],["accordItemTmpl",""],["defloadingTpl",""],[3,"ngTemplateOutlet","ngTemplateOutletContext",4,"ngFor","ngForOf","ngForTrackBy"],[3,"ngTemplateOutlet","ngTemplateOutletContext"],[3,"ngxdAccordionItem","isNumbered","bodyDblclkClose","openSign","closeSign","logo","styling","id","toggled"],[1,"accordion-default-loader--tmpl"],["width","51px","height","50px","viewBox","0 0 51 50"],["y","0","width","13","height","50"],["attributeName","height","values","50;10;50","begin","0s","dur","1s","repeatCount","indefinite"],["attributeName","y","values","0;20;0","begin","0s","dur","1s","repeatCount","indefinite"],["x","19","y","0","width","13","height","50"],["attributeName","height","values","50;10;50","begin","0.2s","dur","1s","repeatCount","indefinite"],["attributeName","y","values","0;20;0","begin","0.2s","dur","1s","repeatCount","indefinite"],["x","38","y","0","width","13","height","50"],["attributeName","height","values","50;10;50","begin","0.4s","dur","1s","repeatCount","indefinite"],["attributeName","y","values","0;20;0","begin","0.4s","dur","1s","repeatCount","indefinite"]],template:function(i,o){if(1&i&&(t.TgZ(0,"div",0),t.YNc(1,gt,1,0,"ng-container",1),t.qZA(),t.YNc(2,ft,1,2,"ng-template",null,2,t.W1O),t.YNc(4,vt,1,10,"ng-template",null,3,t.W1O),t.YNc(6,yt,11,1,"ng-template",null,4,t.W1O)),2&i){const r=t.MAs(3);t.xp6(1),t.Q6J("ngIf",!!o.accordionItems)("ngIfThen",r)("ngIfElse",o.loadingTpl)}},directives:[p.O5,p.sg,p.tP,w,pt],styles:["[_nghost-%COMP%]{margin:auto}[_nghost-%COMP%]   .accordion[_ngcontent-%COMP%]{display:flex;flex-direction:column;overflow:hidden;vertical-align:middle}[_nghost-%COMP%]   .accordion-horizontal-menu[_ngcontent-%COMP%]{display:flex;flex-direction:row;width:100%;vertical-align:middle}[_nghost-%COMP%]   .accordion-horizontal-menu[_ngcontent-%COMP%]   ngxd-accordion-item[_ngcontent-%COMP%]{flex:1 1 auto}@media screen and (max-width: 720px){.accordion-horizontal-menu[_ngcontent-%COMP%]{flex-wrap:wrap}}",".accordion-default-loader--tmpl[_ngcontent-%COMP%] {\n\t\t\tdisplay: block;\n\t\t\tborder-radius: 50%;\n\t\t\tbackground-color: transparent;\n\t\t\tmin-height: 50px;\n\t\t\tmin-width: 50px;\n\t\t}\n\t\t.accordion-default-loader--tmpl[_ngcontent-%COMP%]    > svg[_ngcontent-%COMP%] {\n\t\t\tfill: var(--dark-bg);\n\t\t\ttransform: rotate(90deg);\n\t\t}\n\t\t.accordion-default-loader--tmpl[_ngcontent-%COMP%]    > svg[_ngcontent-%COMP%]   rect[_ngcontent-%COMP%]:first-of-type {\n\t\t\tfill: var(--darker-color);\n\t\t}\n\t\t.accordion-default-loader--tmpl[_ngcontent-%COMP%]    > svg[_ngcontent-%COMP%]   rect[_ngcontent-%COMP%]:nth-of-type(2) {\n\t\t\tfill: var(--accent-color);\n\t\t}\n\t\t.accordion-default-loader--tmpl[_ngcontent-%COMP%]    > svg[_ngcontent-%COMP%]   rect[_ngcontent-%COMP%]:nth-of-type(3) {\n\t\t\tfill: var(--dark-blue-color);\n\t\t}"],data:{animation:[M.accordItemsIn,M.spinnerIn]},changeDetection:0}),e})();const Ct=["simpleBodyTmpl"],bt=["tmpl2"];function xt(e,n){1&e&&(t.TgZ(0,"div",16)(1,"span",17),t._UZ(2,"span",18),t.qZA()()),2&e&&t.Q6J("@moveIn",void 0)}function Ot(e,n){if(1&e&&(t.ynx(0,19),t.TgZ(1,"div",20)(2,"div",21)(3,"h6",22),t._uU(4,"Custom templated Item sample"),t.qZA()(),t.TgZ(5,"div",23)(6,"div",24)(7,"div",25)(8,"div",26)(9,"h3",27),t._uU(10,"by Vladimir Ovsyukov"),t.qZA(),t.TgZ(11,"h6",28),t._uU(12,"https://github.com/VovanSuper"),t.qZA()()()(),t._UZ(13,"div",29),t.qZA(),t.TgZ(14,"div",30)(15,"div",31)(16,"button",32),t._UZ(17,"span",6),t.TgZ(18,"span",33),t._uU(19,"description"),t.qZA(),t._uU(20," Docs "),t.qZA(),t.TgZ(21,"button",34),t._UZ(22,"span",6),t.TgZ(23,"span",33),t._uU(24,"thumb_up_alt"),t.qZA(),t._uU(25," Follow "),t.qZA()(),t.TgZ(26,"div",35)(27,"button",36)(28,"i",37),t._uU(29,"favorite"),t.qZA()(),t.TgZ(30,"button",38),t._uU(31," share "),t.qZA()()()(),t.BQk()),2&e){const i=n.$implicit;t.xp6(13),t.Q6J("innerHTML",i,t.oJD)}}function St(e,n){if(1&e&&(t.TgZ(0,"div",39)(1,"div",40)(2,"div",41),t._uU(3," Sample Accordion Item (alike one of materializecss) "),t.qZA()(),t.TgZ(4,"div",40)(5,"div",42)(6,"div",40)(7,"div",43)(8,"div",44)(9,"div",45),t._UZ(10,"img",46),t.TgZ(11,"span",47),t._uU(12,"Simple material template Card"),t.qZA(),t.TgZ(13,"a",48)(14,"i",33),t._uU(15,"share"),t.qZA()()(),t.TgZ(16,"div",49)(17,"p"),t._uU(18),t.qZA()()()()()()()()),2&e){const i=n.$implicit;t.xp6(18),t.Oqu(i)}}let L=(()=>{class e{constructor(){this.title="Accordion Sample",this.accordList2=null,this.accordList$=(0,S.of)(y).pipe((0,B.g)(3e3)),this.styling={itemsGuts:".1rem",maxWidth:"99%",margin:".1rem",numberedItems:!0,itemStyling:{headBgColor:"#89a",headColor:"#fff",margin:".1rem",bodyPadding:"1rem",bodyMargin:1}},this.styling1={...this.styling,itemsGuts:0,numberedItems:!1,margin:"0 auto",isMultiShow:!0,maxWidth:"94%",bodyDblclkCloseItems:!0,itemStyling:{...this.styling.itemStyling,headBgColor:"darkcyan",headColor:"yellow",bodyColor:"#aaffff",bodyBgColor:"#87a3d1",font:"Comic Sans MS",bodyPadding:1,bodyMargin:0,bodyTextAlign:"left",margin:0}}}ngOnInit(){this.accordList2={...v,items:[...v.items.map(i=>i.title.includes("Accordion Card 2")?{...i,body:{itemTemplate:this.simpleBodyTmpl,itemBody:i.body}}:{...i}).map(i=>i.title.includes("Accordion Card 1")?{...i,body:{itemTemplate:this.tmpl2,itemBody:"Lorem ipsum card ..."}}:{...i})]}}ngAfterViewInit(){const i=document.querySelector(".mdc-button"),o=new R.F(i);return()=>o.destroy()}}return e.\u0275fac=function(i){return new(i||e)},e.\u0275cmp=t.Xpm({type:e,selectors:[["app-root"]],viewQuery:function(i,o){if(1&i&&(t.Gf(Ct,7),t.Gf(bt,7)),2&i){let r;t.iGM(r=t.CRH())&&(o.simpleBodyTmpl=r.first),t.iGM(r=t.CRH())&&(o.tmpl2=r.first)}},decls:26,vars:8,consts:[[1,"mdc-layout-grid"],[1,"mdc-layout-grid__inner","mb-1"],[1,"mdc-layout-grid__cell","mdc-layout-grid__cell--span-6","mdc-layout-grid__cell--span-12-phone","mdc-layout-grid__cell--span-12-tablet","align"],[1,"text-center","app-title"],[1,"mdc-touch-target-wrapper"],[1,"mdc-button","mdc-button--touch","light-bg",3,"click"],[1,"mdc-button__ripple"],[1,"mdc-layout-grid__cell","mdc-layout-grid__cell--span-12"],["openSign","plus.png","closeSign","minus.png",3,"accordionList","accordionStyling"],["acc1","ngxdAccordion"],[1,"mdc-layout-grid__inner"],["listLogo","list_white_48dp.png",3,"loadingTpl","accordionList","accordionStyling"],["acc2","ngxdAccordion"],["simpleLoader",""],["simpleBodyTmpl",""],["tmpl2",""],[1,"container-transparent"],[1,"loader"],[1,"loader-inner"],["ngProjectAs","tmpl-item-card__container",5,["tmpl-item-card__container"]],[1,"mdc-card","tmpl-item-container"],[1,"tmpl-header"],[1,"mdc-typography","mdc-typography--headline6","head6"],["tabindex","0",1,"mdc-card__primary-action"],["onclick","location.href='//twitter.com/intent/tweet?ref_src=twsrc%5Etfw&original_referer=https%3A%2F%2Fngx-dummy.github.io%2Faccordion-simple%2F&url=https%3A%2F%2Fgithub.com%2Fvovansuper%2Faccordion-simple&text=ngx-dummy Accordion simple component'",1,"mdc-card__media","mdc-card__media--16-9","demo-card__media","tmpl-item-logo"],[1,"mdc-card__media-content","demo-card__media-content"],[1,"card-media__items"],[1,"mdc-typography","mdc-typography--subtitle1","subtitle1"],[1,"mdc-typography","mdc-typography--subtitle2","subtitle1"],[1,"mdc-typography","mdc-typography--body2","mt-1","mb-1","body2",3,"innerHTML"],[1,"mdc-card__actions","flex-card__tmpl"],[1,"mdc-card__action-buttons"],["onclick","location.href='//github.com/ngx-dummy/accordion-simple'",1,"mdc-button","mdc-card__action","mdc-card__action--button"],[1,"material-icons"],["onclick","location.href='//github.com/VovanSuper' ","aria-label","Follow VovanSuper on GitHub",1,"mdc-button","mdc-card__action","mdc-card__action--button"],[1,"mdc-card__action-icons"],["aria-pressed","false","aria-label","Sponsor","title","Sponsor","onclick","location.href='//github.com/sponsors/ngx-dummy'","data-icon","octicon-heart","aria-label","Sponsor Me on GitHub",1,"mdc-icon-button","mdc-card__action","mdc-card__action--icon--unbounded"],[1,"material-icons","mdc-icon-button__icon","mdc-icon-button__icon--on"],["title","Share","data-mdc-ripple-is-unbounded","true","onclick","location.href='//twitter.com/intent/tweet?ref_src=twsrc%5Etfw&original_referer=https%3A%2F%2Fngx-dummy.github.io%2Faccordion-simple%2F&url=https%3A%2F%2Fgithub.com%2Fvovansuper%2Faccordion-simple&text=ngx-dummy Accordion simple component'",1,"mdc-icon-button","material-icons","mdc-card__action","mdc-card__action--icon--unbounded"],[1,"container","materializelikes"],[1,"row"],[1,"div","col","s12","l12","center-align",2,"font-size","1.5rem","line-height","110%","margin","0.1rem","color","var(--darker-color)"],[1,"col","s12"],[1,"col","s12","m12"],[1,"card","large"],[1,"card-image"],["src","myTwitLogo.png"],[1,"card-title"],["title","Share","data-mdc-ripple-is-unbounded","true","onclick","location.href='//twitter.com/intent/tweet?ref_src=twsrc%5Etfw&original_referer=https%3A%2F%2Fngx-dummy.github.io%2Faccordion-simple%2F&url=https%3A%2F%2Fgithub.com%2Fvovansuper%2Faccordion-simple&text=ngx-dummy Accordion simple component'",1,"btn-floating","halfway-fab","waves-effect","waves-light","red"],[1,"card-content"]],template:function(i,o){if(1&i){const r=t.EpF();t.TgZ(0,"div",0)(1,"div",1)(2,"div",2)(3,"h2",3),t._uU(4),t.qZA()(),t.TgZ(5,"div",2)(6,"div",4)(7,"button",5),t.NdJ("click",function(){t.CHM(r);const c=t.MAs(14),l=t.MAs(18);return c.closeAll(),l.closeAll()}),t._UZ(8,"div",6),t.TgZ(9,"span"),t._uU(10,"Close All"),t.qZA()()()()(),t.TgZ(11,"div",1)(12,"div",7),t._UZ(13,"ngxd-accordion",8,9),t.qZA()(),t.TgZ(15,"div",10)(16,"div",7),t._UZ(17,"ngxd-accordion",11,12),t.ALo(19,"async"),t.qZA()()(),t.YNc(20,xt,3,1,"ng-template",null,13,t.W1O),t.YNc(22,Ot,32,1,"ng-template",null,14,t.W1O),t.YNc(24,St,19,1,"ng-template",null,15,t.W1O)}if(2&i){const r=t.MAs(21);t.xp6(4),t.Oqu(o.title),t.xp6(9),t.Q6J("accordionList",o.accordList2)("accordionStyling",o.styling),t.xp6(4),t.Q6J("loadingTpl",r)("accordionList",t.lcZ(19,6,o.accordList$))("accordionStyling",o.styling1)}},directives:[k],pipes:[p.Ov],styles:["@media screen and (min-width: 840px){.align[_ngcontent-%COMP%]{line-height:100%}}","[_nghost-%COMP%] {\n\t\t\t--spin-bg: #46cccc;\n\t\t\t--spin-in-bg: #4adada;\n\t\t}\n\n\t\t.container-transparent[_ngcontent-%COMP%] {\n\t\t\tbackground: transparent;\n\t\t\tdisplay: grid;\n\t\t\tmin-height: 6rem;\n\t\t\twidth: 100%;\n\t\t\tplace-content: center;\n\t\t}\n\n\t\t.loader[_ngcontent-%COMP%] {\n\t\t\twidth: 3rem;\n\t\t\theight: 3rem;\n\t\t\tborder: 0.3rem solid var(--spin-bg);\n\t\t\tanimation: spin 2s infinite ease-in-out;\n\t\t}\n\n\t\t.loader-inner[_ngcontent-%COMP%] {\n\t\t\tvertical-align: top;\n\t\t\tdisplay: inline-block;\n\t\t\twidth: 100%;\n\t\t\tbackground-color: var(--spin-in-bg);\n\t\t\tanimation: spin-in 2s infinite ease-in;\n\t\t}\n\n\t\t@keyframes spin {\n\t\t\t0% {\n\t\t\t\topacity: 0.4;\n\t\t\t\ttransform: rotate(0deg);\n\t\t\t}\n\n\t\t\t25% {\n\t\t\t\topacity: 0.6;\n\t\t\t\ttransform: rotate(180deg);\n\t\t\t}\n\n\t\t\t50% {\n\t\t\t\topacity: 0.9;\n\t\t\t\ttransform: rotate(180deg);\n\t\t\t}\n\n\t\t\t75% {\n\t\t\t\topacity: 1;\n\t\t\t\ttransform: rotate(390deg);\n\t\t\t}\n\n\t\t\t100% {\n\t\t\t\topacity: 0.9;\n\t\t\t\ttransform: rotate(360deg);\n\t\t\t}\n\t\t}\n\n\t\t@keyframes spin-in {\n\t\t\t0% {\n\t\t\t\topacity: 0.4;\n\t\t\t\theight: 0%;\n\t\t\t}\n\n\t\t\t25% {\n\t\t\t\topacity: 0.6;\n\t\t\t\theight: 0%;\n\t\t\t}\n\n\t\t\t50% {\n\t\t\t\topacity: 0.9;\n\t\t\t\theight: 100%;\n\t\t\t}\n\n\t\t\t75% {\n\t\t\t\topacity: 1;\n\t\t\t\theight: 100%;\n\t\t\t}\n\n\t\t\t100% {\n\t\t\t\topacity: 0.9;\n\t\t\t\theight: 0%;\n\t\t\t}\n\t\t}",".tmpl-item-container[_ngcontent-%COMP%] {\n\t\t\tfont-family: 'Roboto', sans-serif !important;\n\t\t}\n\n\t\t.head6[_ngcontent-%COMP%] {\n\t\t\tfont-style: italic;\n\t\t\tmargin: 1.1rem;\n\t\t}\n\n\t\t.subtitle1[_ngcontent-%COMP%] {\n\t\t\tcolor: var(--mdc-theme-text-primary-on-dark, rgba(250, 250, 250, 0.9));\n\t\t\ttext-align: start;\n\t\t\tmargin: 0.1rem 1rem;\n\t\t\tfont-family: Lato;\n\t\t}\n\n\t\t.subtitle2[_ngcontent-%COMP%] {\n\t\t\tcolor: var(--mdc-theme-text-primary-on-light, rgba(250, 250, 250, 0.9));\n\t\t\ttext-align: start;\n\t\t\tmargin: 0.1rem 1rem;\n\t\t}\n\n\t\t.card-media__items[_ngcontent-%COMP%] {\n\t\t\tposition: absolute;\n\t\t\tbottom: 1rem;\n\t\t\tleft: 0.4rem;\n\t\t}\n\n\t\t.tmpl-item-logo[_ngcontent-%COMP%] {\n\t\t\tbackground-image: url('myTwitLogo.png');\n\t\t}\n\n\t\t.tmpl-main-content[_ngcontent-%COMP%] {\n\t\t\tbackground-color: floralwhite;\n\t\t\tfont-size: medium;\n\t\t}\n\n\t\t.body2[_ngcontent-%COMP%] {\n\t\t\tmargin: 0.4rem 1rem;\n\t\t}\n\n\t\t.tmpl-footer[_ngcontent-%COMP%] {\n\t\t\tbackground-color: lavenderblush;\n\t\t\tcolor: black;\n\t\t\tfont-size: xx-small;\n\t\t}\n\n\t\t@media screen and (max-width: 500px) {\n\t\t\t.head6[_ngcontent-%COMP%] {\n\t\t\t\tfont-size: 1rem;\n\t\t\t\tmargin: 0.1rem;\n\t\t\t}\n\n\t\t\t.subtitle1[_ngcontent-%COMP%] {\n\t\t\t\tfont-size: 0.4rem;\n\t\t\t}\n\n\t\t\t.subtitle2[_ngcontent-%COMP%] {\n\t\t\t\tfont-size: 0.2rem;\n\t\t\t}\n\n\t\t\t.flex-card__tmpl[_ngcontent-%COMP%] {\n\t\t\t\tdisplay: grid;\n\t\t\t\tflex-direction: column;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tflex-wrap: wrap !important;\n\t\t\t}\n\t\t}",".row[_ngcontent-%COMP%] {\n\t\t\tmargin-left: auto;\n\t\t\tmargin-right: auto;\n\t\t\tmargin-bottom: 20px;\n\t\t}\n\t\t.row[_ngcontent-%COMP%]   .col[_ngcontent-%COMP%] {\n\t\t\tfloat: left;\n\t\t\t-webkit-box-sizing: border-box;\n\t\t\tbox-sizing: border-box;\n\t\t\tpadding: 0 0.75rem;\n\t\t\tmin-height: 1px;\n\t\t}\n\t\t.row[_ngcontent-%COMP%]   .col.s12[_ngcontent-%COMP%] {\n\t\t\twidth: 100%;\n\t\t\tmargin-left: auto;\n\t\t\tleft: auto;\n\t\t\tright: auto;\n\t\t}\n\t\t.row[_ngcontent-%COMP%]:after {\n\t\t\tcontent: '';\n\t\t\tdisplay: table;\n\t\t\tclear: both;\n\t\t}\n\t\t.card[_ngcontent-%COMP%] {\n\t\t\tposition: relative;\n\t\t\tmargin: 0.5rem 0 1rem 0;\n\t\t\tbackground-color: #fff;\n\t\t\t-webkit-transition: -webkit-box-shadow 0.25s;\n\t\t\ttransition: -webkit-box-shadow 0.25s;\n\t\t\ttransition: box-shadow 0.25s;\n\t\t\ttransition: box-shadow 0.25s, -webkit-box-shadow 0.25s;\n\t\t\tborder-radius: 2px;\n\t\t}\n\t\t.card.large[_ngcontent-%COMP%]   .card-image[_ngcontent-%COMP%] {\n\t\t\tmax-height: 60%;\n\t\t\tposition: relative;\n\t\t\toverflow: hidden;\n\t\t}\n\t\t.card[_ngcontent-%COMP%]   .card-image[_ngcontent-%COMP%]   img[_ngcontent-%COMP%] {\n\t\t\tdisplay: block;\n\t\t\tborder-radius: 2px 2px 0 0;\n\t\t\tposition: relative;\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\ttop: 0;\n\t\t\tbottom: 0;\n\t\t\twidth: 100%;\n\t\t}\n\t\t.card[_ngcontent-%COMP%]   .card-image[_ngcontent-%COMP%]   .card-title[_ngcontent-%COMP%] {\n\t\t\tfont-size: 24px;\n\t\t\tfont-weight: 300;\n\t\t\tcolor: #fff;\n\t\t\tposition: absolute;\n\t\t\tbottom: 0;\n\t\t\tleft: 0;\n\t\t\tmax-width: 100%;\n\t\t\tpadding: 24px;\n\t\t}\n\t\t.btn-floating.halfway-fab[_ngcontent-%COMP%] {\n\t\t\tposition: absolute;\n\t\t\tright: 24px;\n\t\t\tbottom: -20px;\n\t\t}\n\t\t.waves-effect[_ngcontent-%COMP%] {\n\t\t\tposition: relative;\n\t\t\tcursor: pointer;\n\t\t\tdisplay: inline-block;\n\t\t\toverflow: hidden;\n\t\t\t-webkit-user-select: none;\n\t\t\t-moz-user-select: none;\n\t\t\t-ms-user-select: none;\n\t\t\tuser-select: none;\n\t\t\t-webkit-tap-highlight-color: transparent;\n\t\t\tvertical-align: middle;\n\t\t\tz-index: 1;\n\t\t\t-webkit-transition: 0.3s ease-out;\n\t\t\ttransition: 0.3s ease-out;\n\t\t}\n\t\t.btn-floating[_ngcontent-%COMP%] {\n\t\t\tfont-size: 14px;\n\t\t\toutline: 0;\n\t\t\tdisplay: inline-block;\n\t\t\tcolor: #fff;\n\t\t\tposition: relative;\n\t\t\toverflow: hidden;\n\t\t\tz-index: 1;\n\t\t\twidth: 40px;\n\t\t\theight: 40px;\n\t\t\tline-height: 40px;\n\t\t\tpadding: 0;\n\t\t\tbackground-color: #26a69a;\n\t\t\tborder-radius: 50%;\n\t\t\t-webkit-transition: background-color 0.3s;\n\t\t\ttransition: background-color 0.3s;\n\t\t\tcursor: pointer;\n\t\t\tvertical-align: middle;\n\t\t}\n\t\t.red[_ngcontent-%COMP%] {\n\t\t\tbackground-color: var(--mdc-theme-on-primary, #fff);\n\t\t}\n\t\t.card[_ngcontent-%COMP%]   .card-content[_ngcontent-%COMP%] {\n\t\t\t\n\t\t\tmax-height: 40%;\n\t\t\tmargin: 1rem;\n\t\t}\n\t\t.material-icons[_ngcontent-%COMP%] {\n\t\t\tfont-family: 'Material Icons';\n\t\t\tfont-weight: normal;\n\t\t\tfont-style: normal;\n\t\t\tfont-size: 24px;\n\t\t\tline-height: 1;\n\t\t\tletter-spacing: normal;\n\t\t\ttext-transform: none;\n\t\t\tdisplay: inline-block;\n\t\t\twhite-space: nowrap;\n\t\t\tword-wrap: normal;\n\t\t\tdirection: ltr;\n\t\t\t-webkit-font-feature-settings: 'liga';\n\t\t\t-webkit-font-smoothing: antialiased;\n\t\t}\n\t\ta.btn-floating[title='Share'][_ngcontent-%COMP%] {\n\t\t\tbottom: 0.5rem;\n\t\t\tright: 1rem;\n\t\t\ttext-align: center;\n\t\t\tdisplay: grid;\n\t\t\tplace-content: center;\n\t\t}"],data:{animation:[F]}}),e})();var At=d(8230);let qt=(()=>{class e{}return e.\u0275fac=function(i){return new(i||e)},e.\u0275mod=t.oAB({type:e}),e.\u0275inj=t.cJS({imports:[[p.ez,At.JF]]}),e})(),Mt=(()=>{class e extends L{constructor(){super(...arguments),this.title="Yet another Accordion Sample",this.accordList1$=new Promise(i=>i({...y,items:[...v.items,...y.items]})),this.styling={...super.styling,bodyDblclkCloseItems:!0,itemStyling:{headBgColor:"grey",padding:1,headColor:"lightgreen"}}}}return e.\u0275fac=function(){let n;return function(o){return(n||(n=t.n5z(e)))(o||e)}}(),e.\u0275cmp=t.Xpm({type:e,selectors:[["app-root2"]],features:[t.qOj],decls:9,vars:5,consts:[[1,"mdc-layout-grid","mdc-layout-grid--align-center"],[1,"mdc-layout-grid__inner","mb-1"],[1,"mdc-layout-grid__cell","mdc-layout-grid__cell--span-12","mdc-layout-grid__cell--align-center"],[1,"text-center"],[1,"mdc-layout-grid__cell","mdc-layout-grid__cell--align-center","mdc-layout-grid__cell--span-12"],["openSign","plus1.png","minus","min.png",3,"accordionList","accordionStyling"]],template:function(i,o){1&i&&(t.TgZ(0,"div",0)(1,"div",1)(2,"div",2)(3,"h2",3),t._uU(4),t.qZA()()(),t.TgZ(5,"div",1)(6,"div",4),t._UZ(7,"ngxd-accordion",5),t.ALo(8,"async"),t.qZA()()()),2&i&&(t.xp6(4),t.Oqu(o.title),t.xp6(3),t.Q6J("accordionList",t.lcZ(8,3,o.accordList1$))("accordionStyling",o.styling))},directives:[k],pipes:[p.Ov],styles:["@media screen and (min-width: 840px){.align[_ngcontent-%COMP%]{line-height:100%}}"]}),e})(),It=(()=>{class e{}return e.\u0275fac=function(i){return new(i||e)},e.\u0275mod=t.oAB({type:e,bootstrap:[L,Mt]}),e.\u0275inj=t.cJS({imports:[[Z.PW,qt]]}),e})();(0,t.G48)(),setTimeout(()=>{h.q6().bootstrapModule(It,{ngZoneEventCoalescing:!0}).catch(e=>console.error(e))},1500)}},g=>{g.O(0,["vendor"],()=>g(g.s=8198)),g.O()}]);
-//# sourceMappingURL=main.58ac6ac0a827554d.js.map
\ No newline at end of file
diff --git a/docs/main.58ac6ac0a827554d.js.map b/docs/main.58ac6ac0a827554d.js.map
deleted file mode 100644
index 68b1a504..00000000
--- a/docs/main.58ac6ac0a827554d.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"main.58ac6ac0a827554d.js","mappings":"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","names":["dummyAccordionList1","id","name","items","title","body","dummyAccordionList2","loaderIn","trigger","transition","style","opacity","transform","animate","keyframes","offset","INI_STATE","InjectionToken","factory","AccordionOpenService","BehaviorSubject","constructor","iniState","super","this","itemsStats","next","complete","unsubscribe","itemsOpen$","asObservable","itemsOpenSnapshot","value","i0","accordionAnimations","accordItemsIn","query","stagger","optional","spinnerIn","transformOrigin","height","accordionItemAnimations","accordionItemBodyHeightCollapse","state","visibility","pluckIToggler","itemId","isOpen","rest","pluckOpenTogglesIdsToStr","toggles","filter","t","map","join","sanitizeHTML","item","sanitizer","sanitize","SecurityContext","getSvgSafeRes","file","bypassSecurityTrustResourceUrl","prepRes","rawSvg","btoa","svgToBase64src","bodyWithTmpl","itemTemplate","getItemBodyTemplate","defaultTmpl","P","getItemBodyCtx","itemBody","l","console","log","ImgClasses","ImgLoadClass","AccordionItemImgDirective","el","renderer","zone","target","_setLoadSuccess","_setLoadAlter","classList","contains","LOGO","_setItemHeaderImgSafeSrc","_baseLogoImg","ENDING","_baseChevronImg","runOutsideAngular","_src","_nativeImgEl","_closeSign","_openSign","imgRef","src","setAttribute","_setNoRecheck","attr","dataset","add","SUCCESS","_isSet","ALTER","length","_needToRecheck","ngAfterViewInit","nativeElement","ngAfterContentChecked","_doOpenCloseSrcRecheck","_isLogoImg","_readElDataSet","_isCloserImg","undefined","_isImgOpenClose","selectors","ctx","ctx_r10","oxw","ctx_r12","AccordionItemComponent","of","startAnim","e","element","willChange","classes","fromState","toState","replace","doneAnim","changeDetection","AccordionItemDirective","hostCmp","hostElRef","itemStatusSvc","render","cd","headHeight","headBgColor","headColor","bodyBgColor","bodyColor","fontSize","bodyPadding","EventEmitter","Subject","outerHTML","includes","_handleClick","bodyDblclkClose","idx","_toggle","toggled","emit","ngOnInit","itemNum","isNumbered","isOpen$","pipe","takeUntil","hostDestroy$$","val","find","pluck","tap","nativeEl","itemEl","getElementsByClassName","headEl","bodyEl","headElLogoImgEl","headElCloserImgEl","logo","openSign","closeSign","detectChanges","setStyle","itemStyles","margin","padding","font","fontStyle","fontFamily","marginBottom","marginTop","setProperty","headFont","headFontSize","bodyMargin","bodyFont","bodyFontSize","bodyTextAlign","ngOnDestroy","ElementRef","AccordionComponent","itemsOpenSvc","hostEl","numberedItems","isMultiShow","bodyDblclkCloseItems","maxWidth","itemsGuts","itemStyling","setItemsOpen","eId","opened","multiSelect","accordionItems","forEach","onItemToggled","_ind","attributes","accordionList","acc","_accord","Object","assign","i","loadingTpl","_loadingTpl","defloadingTpl","_bodyDblclkClose","accordionStyling","subscribe","ids","_openedItems","_isNumbered","Array","isArray","reduce","accu","curr","_itemStyle","entries","key","accordEl","ngOnChanges","changes","keys","prop","previousValue","currentValue","close","TemplateRef","AppComponent","delay","styling","accordList2","list1","simpleBodyTmpl","tmpl2","btnRipple","document","querySelector","ripple","MDCRipple","destroy","_r0","_r1","AccordionModule","CommonModule","HttpClientModule","App2Component","Promise","resolve","AppModule","bootstrap","BrowserAnimationsModule","enableProdMode","setTimeout","__NgCli_bootstrap_1","bootstrapModule","ngZoneEventCoalescing","catch","err","error"],"sourceRoot":"webpack:///","sources":["./projects/accordion-sample/src/app/helpers/dummy-data.ts","./projects/accordion-sample/src/app/loader.anim.ts","./projects/@ngx-dummy/accordion-simple/src/lib/accordion-open.service.ts","./projects/@ngx-dummy/accordion-simple/src/lib/animations.ts","./projects/@ngx-dummy/accordion-simple/src/lib/settings/IToggler.ts","./projects/@ngx-dummy/accordion-simple/src/lib/settings/helpers.ts","./projects/@ngx-dummy/accordion-simple/src/lib/accordion-item-img.directive.ts","./projects/@ngx-dummy/accordion-simple/src/lib/theming/icons-base.ts","./projects/@ngx-dummy/accordion-simple/src/lib/accordion-item.component.html","./projects/@ngx-dummy/accordion-simple/src/lib/accordion-item.component.ts","./projects/@ngx-dummy/accordion-simple/src/lib/accordion-item.directive.ts","./projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.html","./projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.ts","./projects/accordion-sample/src/app/app.component.html","./projects/accordion-sample/src/app/app.component.ts","./projects/@ngx-dummy/accordion-simple/src/lib/accordion.module.ts","./projects/accordion-sample/src/app/app2.component.ts","./projects/accordion-sample/src/app/app.module.ts","./projects/accordion-sample/src/main.ts"],"sourcesContent":["/* eslint-disable max-len */\nimport { Accordion } from '@ngx-dummy/accordion-simple/index';\n\nexport const dummyAccordionList1: Accordion = {\n\tid: 'Accord_1',\n\tname: 'Accordion 1',\n\titems: [\n\t\t{\n\t\t\ttitle: 'Accordion Card 1',\n\t\t\tbody: '[[TMPL]]',\n\t\t},\n\t\t{\n\t\t\ttitle: 'Accordion Card 2',\n\t\t\tbody: `\n\t\t\t<a href=\"//github.com/ngx-dummy/accordion-simple\">Project Repository</a>\n\t\t\t<br />\n\t\t\tSimple 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.`,\n\t\t},\n\t\t{\n\t\t\ttitle: 'Accordion simple Card 3 x 11',\n\t\t\tbody: `\n\t\t\t\t<p>Para1 </p>\n\t\t\t\t<h4> Heading </h4>\n\t\t\t\t<script type='text/javascript'>alert('Injection !');</script>\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n      `,\n\t\t},\n\t],\n};\n\nexport const dummyAccordionList2: Accordion = {\n\tid: 'Accord_2',\n\tname: 'Accordion 2',\n\titems: [\n\t\t{\n\t\t\tid: 'item0',\n\t\t\ttitle: 'Card ',\n\t\t\tbody: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione',\n\t\t},\n\t\t{\n\t\t\tid: 'item1',\n\t\t\ttitle: 'Card 1',\n\t\t\tbody: `\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n      `,\n\t\t},\n\t\t{\n\t\t\tid: 'item2',\n\t\t\ttitle: 'Card 2',\n\t\t\tbody: `\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n      `,\n\t\t},\n\t\t{\n\t\t\tid: 'item3',\n\t\t\ttitle: 'Card 3',\n\t\t\tbody: `\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n      `,\n\t\t},\n\t\t{\n\t\t\tid: 'item4',\n\t\t\ttitle: 'Card 4',\n\t\t\tbody: `\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n      `,\n\t\t},\n\t\t{\n\t\t\tid: 'item5',\n\t\t\ttitle: 'Long Card 5',\n\t\t\tbody: `\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n      `,\n\t\t},\n\t],\n};\n","/*!\n * @ngx-dummy/Accordion-Simple library\n * Simple accordion created for angular / ionic projects.\n * https://github.com/ngx-dummy/accordion-simple\n *\n * Copyright  Vladimir Ovsyukov <ovsyukov@yandex.com>\n * Published under GNU LGPLv3 License\n */\nimport { trigger, transition, style, animate, keyframes } from '@angular/animations';\n\nexport const loaderIn = trigger('moveIn', [\n\ttransition(':enter', [\n\t\tstyle({ opacity: 0, transform: 'translateY(-3rem)' }),\n\t\tanimate(\n\t\t\t'1s ease-in-out',\n\t\t\tkeyframes([\n\t\t\t\tstyle({ offset: 0.2, opacity: 0.1, transform: 'translateY(-1rem)' }),\n\t\t\t\tstyle({ offset: 0.6, opacity: 0.4, transform: 'translateY(-0.1rem)' }),\n\t\t\t\tstyle({ offset: 1, opacity: 1, transform: 'none' }),\n\t\t\t])\n\t\t),\n\t]),\n]);\n","/*!\n * @ngx-dummy/Accordion-Simple library\n * Simple accordion created for angular / ionic projects.\n * https://github.com/ngx-dummy/accordion-simple\n *\n * Copyright  Vladimir Ovsyukov <ovsyukov@yandex.com>\n * Published under GNU LGPLv3 License\n */\nimport { Injectable, Inject, InjectionToken } from '@angular/core';\nimport { BehaviorSubject } from 'rxjs';\nimport { IToggler } from './settings/';\n\nexport function iniTogglerFn() {\n\treturn [] as IToggler[];\n}\n\nexport const INI_STATE = new InjectionToken<IToggler[]>('Accordion Initial Items Open state provider token', { factory: iniTogglerFn });\n\n@Injectable()\nexport class AccordionOpenService extends BehaviorSubject<IToggler[]> {\n\tconstructor(@Inject(INI_STATE) iniState: IToggler[] = []) {\n\t\tsuper(iniState);\n\t}\n\n\tget itemsOpen$() {\n\t\treturn this.asObservable();\n\t}\n\tget itemsOpenSnapshot() {\n\t\treturn this.value;\n\t}\n\n\tsetItemsOpen = (itemsStats: IToggler[]) => this.next(itemsStats);\n\n\tclose = () => {\n\t\tthis.complete();\n\t\tsuper.unsubscribe();\n\t};\n}\n","/*!\n * @ngx-dummy/Accordion-Simple library\n * Simple accordion created for angular / ionic projects.\n * https://github.com/ngx-dummy/accordion-simple\n *\n * Copyright  Vladimir Ovsyukov <ovsyukov@yandex.com>\n * Published under GNU LGPLv3 License\n */\nimport { trigger, query, stagger, transition, animate, style, keyframes, state, AnimationTriggerMetadata } from '@angular/animations';\nexport { AnimationEvent as NgAnimationEvent } from '@angular/animations';\n\nexport const accordionAnimations: {\n\treadonly accordItemsIn: AnimationTriggerMetadata;\n\treadonly spinnerIn: AnimationTriggerMetadata;\n} = {\n\taccordItemsIn: trigger('accordItemsIn', [\n\t\ttransition('* => *', [\n\t\t\tquery(\n\t\t\t\t':leave',\n\t\t\t\t[\n\t\t\t\t\tstagger(-25, [\n\t\t\t\t\t\tanimate(\n\t\t\t\t\t\t\t'.3s',\n\t\t\t\t\t\t\tstyle({\n\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\ttransform: 'scale(0.7, 0.7) translateY(-3rem)',\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t),\n\t\t\t\t\t]),\n\t\t\t\t],\n\t\t\t\t{ optional: true }\n\t\t\t),\n\t\t\tquery(\n\t\t\t\t':enter',\n\t\t\t\t[\n\t\t\t\t\tstyle({ opacity: 0, transform: 'scale(0.7, 0.7) translateY(-3rem)' }),\n\t\t\t\t\tstagger(25, [\n\t\t\t\t\t\tanimate(\n\t\t\t\t\t\t\t'.3s ease-out',\n\t\t\t\t\t\t\tkeyframes([\n\t\t\t\t\t\t\t\tstyle({ offset: 0, opacity: 0 }),\n\t\t\t\t\t\t\t\tstyle({\n\t\t\t\t\t\t\t\t\toffset: 0.2,\n\t\t\t\t\t\t\t\t\topacity: 0.1,\n\t\t\t\t\t\t\t\t\ttransform: 'scale(0.85, 0.85) translateY(-4rem)',\n\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t\tstyle({\n\t\t\t\t\t\t\t\t\toffset: 0.5,\n\t\t\t\t\t\t\t\t\topacity: 0.8,\n\t\t\t\t\t\t\t\t\ttransform: 'scale(0.9, 0.9) translateY(3rem)',\n\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t\tstyle({ offset: 1, opacity: 1, transform: 'none' }),\n\t\t\t\t\t\t\t])\n\t\t\t\t\t\t),\n\t\t\t\t\t]),\n\t\t\t\t],\n\t\t\t\t{ optional: true }\n\t\t\t),\n\t\t]),\n\t]),\n\n\tspinnerIn: trigger('spinnerIn', [\n\t\ttransition('void => *', [\n\t\t\tquery(\n\t\t\t\t'.loader',\n\t\t\t\tanimate(\n\t\t\t\t\t'.5s ease-out',\n\t\t\t\t\tkeyframes([\n\t\t\t\t\t\tstyle({\n\t\t\t\t\t\t\toffset: 0,\n\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\ttransformOrigin: 'bottom right',\n\t\t\t\t\t\t\theight: 0,\n\t\t\t\t\t\t\ttransform: 'translateY(-100px) scale(0, 0)',\n\t\t\t\t\t\t}),\n\t\t\t\t\t\tstyle({\n\t\t\t\t\t\t\toffset: 0.8,\n\t\t\t\t\t\t\topacity: 0.6,\n\t\t\t\t\t\t\theight: 0,\n\t\t\t\t\t\t\ttransform: 'translateY(40px) scale(0.5, 0.5)',\n\t\t\t\t\t\t}),\n\t\t\t\t\t\tstyle({\n\t\t\t\t\t\t\toffset: 1,\n\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\theight: '*',\n\t\t\t\t\t\t\ttransform: 'translateY(0) scale(1, 1)',\n\t\t\t\t\t\t}),\n\t\t\t\t\t])\n\t\t\t\t),\n\t\t\t\t{ optional: true }\n\t\t\t),\n\t\t]),\n\t]),\n};\n\nexport const accordionItemAnimations: {\n\treadonly accordionItemBodyHeightCollapse: AnimationTriggerMetadata;\n} = {\n\taccordionItemBodyHeightCollapse: trigger('openClose', [\n\t\tstate(\n\t\t\t'closed',\n\t\t\tstyle({\n\t\t\t\theight: '0',\n\t\t\t\topacity: '0',\n\t\t\t\tvisibility: 'collapsed',\n\t\t\t})\n\t\t),\n\t\tstate(\n\t\t\t'opened',\n\t\t\tstyle({\n\t\t\t\theight: '*',\n\t\t\t\topacity: '1',\n\t\t\t\tvisibility: 'visible',\n\t\t\t})\n\t\t),\n\t\ttransition('opened <=> closed', animate('.3s ease-out')),\n\t]),\n};\n","/*!\n * @ngx-dummy/Accordion-Simple library\n * Simple accordion created for angular / ionic projects.\n * https://github.com/ngx-dummy/accordion-simple\n *\n * Copyright  Vladimir Ovsyukov <ovsyukov@yandex.com>\n * Published under GNU LGPLv3 License\n */\nimport { AccordionItemInternal } from './IAccordion';\n\nexport interface IToggler {\n\titemId: number;\n\tisOpen: boolean;\n}\n\nexport const pluckIToggler = ({ itemId, isOpen, ...rest }: AccordionItemInternal) => <IToggler>{ itemId, isOpen };\nexport const pluckOpenTogglesIdsToStr = (toggles: IToggler[]): string =>\n\ttoggles\n\t\t.filter((t) => t.isOpen === true)\n\t\t.map((t) => t.itemId)\n\t\t.join(',');\n","/*!\n * @ngx-dummy/Accordion-Simple library\n * Simple accordion created for angular / ionic projects.\n * https://github.com/ngx-dummy/accordion-simple\n *\n * Copyright  Vladimir Ovsyukov <ovsyukov@yandex.com>\n * Published under GNU LGPLv3 License\n */\nimport { TemplateRef, SecurityContext } from '@angular/core';\nimport { DomSanitizer } from '@angular/platform-browser';\n\nimport { ItemTemplateContext } from './IAccordion';\n\nexport const imgBase64ToBlob = (Base64Image: any, imageType = 'image/png') => {\n\tconst parts = Base64Image.split(';base64,');\n\tconst decodedData = window.atob(parts[1]);\n\tconst uInt8Array = new Uint8Array(decodedData.length);\n\tfor (let i = 0; i < decodedData.length; ++i) {\n\t\tuInt8Array[i] = decodedData.charCodeAt(i);\n\t}\n\treturn new Blob([uInt8Array], { type: imageType });\n};\n\nexport const svgToBase64src = (rawSvg: string) => 'data:image/svg+xml;base64,' + btoa(rawSvg);\nexport const prepRes = (item: string, sanitizer: DomSanitizer) => sanitizer.bypassSecurityTrustResourceUrl(item);\nexport const sanitizeHTML = (item: string | object | undefined, sanitizer: DomSanitizer) => !!item && sanitizer.sanitize(SecurityContext.HTML, item);\nexport const getSvgSafeRes = (file: string, sanitizer: DomSanitizer) => prepRes(svgToBase64src(file), sanitizer);\nexport const getPngSafeRes = (file: string, sanitizer: DomSanitizer) => prepRes(URL.createObjectURL(imgBase64ToBlob(file)), sanitizer);\nexport const blobToSafeRes = (blob: Blob, sanitizer: DomSanitizer) => prepRes(URL.createObjectURL(blob), sanitizer);\n\nexport const bodyWithTmpl = (item: string | ItemTemplateContext): item is ItemTemplateContext => !!item && typeof item !== 'string' && !!item.itemTemplate;\nexport const getItemBodyTemplate = (item: string | ItemTemplateContext, defaultTmpl: TemplateRef<Element>) => (!!bodyWithTmpl(item) ? item.itemTemplate : defaultTmpl);\nexport const getItemBodyCtx = (item: string | ItemTemplateContext) => (bodyWithTmpl(item) && typeof item.itemBody === 'string' ? item.itemBody : item);\n\n// export const svgToBase64srcWithBuf = (rawSvg: string) => {\n// \tlet buf = Buffer.from(rawSvg);\n// \treturn buf.toString('base64url');\n// };\n","/* eslint-disable @angular-eslint/no-host-metadata-property */\n/*!\n * @ngx-dummy/Accordion-Simple library\n * Simple accordion created for angular / ionic projects.\n * https://github.com/ngx-dummy/accordion-simple\n *\n * Copyright  Vladimir Ovsyukov <ovsyukov@yandex.com>\n * Published under GNU LGPLv3 License\n */\nimport { AfterContentChecked, AfterViewInit, Directive, ElementRef, HostBinding, Renderer2, NgZone } from '@angular/core';\nimport { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';\nimport { getSvgSafeRes } from './settings/';\nimport { arrow_down, logo_svg } from './theming/icons-base';\n\nconst l = console.log;\n\nenum ImgClasses {\n\tLOGO = 'accord-item__header--start-img',\n\tENDING = 'accord-item__header--end-img',\n}\nenum ImgLoadClass {\n\tSUCCESS = 'img-loaded__success',\n\tALTER = 'img-load__alter',\n}\n\n@Directive({\n\tselector: '.accord-item__header-img',\n\thost: {\n\t\t'(load)': 'onLoad($event)',\n\t\t'(error)': 'onError($event)',\n\t\t'[attr.loading]': '\"lazy\"',\n\t},\n})\nexport class AccordionItemImgDirective implements AfterViewInit, AfterContentChecked {\n\t@HostBinding('attr.src') get src() {\n\t\treturn this._src;\n\t}\n\n\tprivate _nativeImgEl: HTMLImageElement;\n\tprivate _src: string | SafeResourceUrl | undefined;\n\tprivate _openSign: string | SafeResourceUrl | undefined;\n\tprivate _closeSign: string | SafeResourceUrl | undefined;\n\tprivate _baseLogoImg = getSvgSafeRes(logo_svg, this.sanitizer);\n\tprivate _baseChevronImg = getSvgSafeRes(arrow_down, this.sanitizer);\n\tprivate _isSet = false;\n\tprivate _needToRecheck = false;\n\n\tconstructor(private el: ElementRef<HTMLImageElement>, private renderer: Renderer2, private zone: NgZone, private sanitizer: DomSanitizer) {}\n\n\tngAfterViewInit() {\n\t\tthis._nativeImgEl = this.el.nativeElement;\n\t}\n\n\tngAfterContentChecked() {\n\t\tif (this._isSet && !this._needToRecheck) {\n\t\t\treturn;\n\t\t}\n\t\tif (this._isSet && this._needToRecheck) {\n\t\t\treturn this._doOpenCloseSrcRecheck();\n\t\t}\n\n\t\tif (this._isLogoImg()) {\n\t\t\t// this._src = this.readElDataSet('src') || this._baseLogoImg;\n\t\t\t// return this.setNoRecheck();\n\t\t\treturn this._setItemHeaderImgSafeSrc(this._readElDataSet('src') || this._baseLogoImg);\n\t\t} else if (this._isCloserImg()) {\n\t\t\tthis._openSign = this._readElDataSet('opensrc') ?? undefined;\n\t\t\tthis._closeSign = this._readElDataSet('closesrc') ?? undefined;\n\t\t\tif (!this._isImgOpenClose()) {\n\t\t\t\t// this._src = this._baseChevronImg;\n\t\t\t\t// return this.setNoRecheck();\n\t\t\t\treturn this._setItemHeaderImgSafeSrc(this._baseChevronImg);\n\t\t\t} else {\n\t\t\t\tif (this._openSign !== this._closeSign) {\n\t\t\t\t\tthis._needToRecheck = true;\n\t\t\t\t}\n\t\t\t\tthis._isSet = true;\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t}\n\n\tonLoad = ({ target, ...rest }: { target: HTMLImageElement; rest: any[] }) => this._setLoadSuccess(target);\n\tonError = ({ target, ...rest }: { target: HTMLImageElement; rest: any[] }) => {\n\t\tthis._setLoadAlter(target);\n\t\tif (target.classList.contains(ImgClasses.LOGO)) {\n\t\t\t// this.setItemHeaderImgSrc(target, this._baseLogoImg);\n\t\t\tthis._setItemHeaderImgSafeSrc(this._baseLogoImg);\n\t\t} else if (target.classList.contains(ImgClasses.ENDING)) {\n\t\t\t// this.setItemHeaderImgSrc(target, this._baseChevronImg);\n\t\t\tthis._setItemHeaderImgSafeSrc(this._baseChevronImg);\n\t\t} else {\n\t\t\treturn l('Not an Accordion Item header image');\n\t\t}\n\t};\n\n\tprivate _doOpenCloseSrcRecheck = () => {\n\t\tthis.zone.runOutsideAngular(() => {\n\t\t\tthis._src = this._nativeImgEl?.classList.contains('open') ? this._closeSign : this._openSign;\n\t\t});\n\t};\n\tprivate _setItemHeaderImgSrc = (imgRef: HTMLImageElement, src: string | SafeResourceUrl) => this.renderer.setAttribute(imgRef, 'src', src as string);\n\tprivate _setItemHeaderImgSafeSrc = (src: string | SafeResourceUrl) => {\n\t\tthis._src = src;\n\t\treturn this._setNoRecheck();\n\t};\n\tprivate _readElDataSet = (attr: string) => this._nativeImgEl?.dataset[attr];\n\tprivate _setLoadSuccess = (target: HTMLImageElement) => {\n\t\ttarget.classList.add(ImgLoadClass.SUCCESS);\n\t\tthis._isSet = true;\n\t};\n\tprivate _setLoadAlter = (target: HTMLImageElement) => {\n\t\ttarget.classList.add(ImgLoadClass.ALTER);\n\t\tthis._setNoRecheck();\n\t};\n\tprivate _isImgOpenClose = () => !!this._closeSign && !!(this._closeSign as string).length && !!this._openSign && !!(this._openSign as string).length;\n\tprivate _isLogoImg = () => this._nativeImgEl?.classList.contains(ImgClasses.LOGO);\n\tprivate _isCloserImg = () => this._nativeImgEl?.classList.contains(ImgClasses.ENDING);\n\tprivate _setNoRecheck = () => {\n\t\tthis._isSet = true;\n\t\tthis._needToRecheck = false;\n\t};\n}\n","/* eslint-disable max-len */\n/*!\n * @ngx-dummy/Accordion-Simple library\n * Simple accordion created for angular / ionic projects.\n * https://github.com/ngx-dummy/accordion-simple\n *\n * Copyright  Vladimir Ovsyukov <ovsyukov@yandex.com>\n * Published under GNU LGPLv3 License\n */\nexport const logo_svg =\n\t'<svg width=\"50\" height=\"50\" viewBox=\"0 0 50 50\" fill=\"white\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5 0C2.23858 0 0 2.23858 0 5V45C0 47.7614 2.23858 50 5 50H45C47.7614 50 50 47.7614 50 45V5C50 2.23858 47.7614 0 45 0H5ZM11 10C10.4477 10 10 10.4477 10 11V15C10 15.5523 10.4477 16 11 16H39C39.5523 16 40 15.5523 40 15V11C40 10.4477 39.5523 10 39 10H11ZM10 23C10 22.4477 10.4477 22 11 22H39C39.5523 22 40 22.4477 40 23V27C40 27.5523 39.5523 28 39 28H11C10.4477 28 10 27.5523 10 27V23ZM11 34C10.4477 34 10 34.4477 10 35V39C10 39.5523 10.4477 40 11 40H32C32.5523 40 33 39.5523 33 39V35C33 34.4477 32.5523 34 32 34H11Z\"/></svg>';\n\nexport const arrow_down =\n\t'<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"white\" width=\"48px\" height=\"48px\"><path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z\"/><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/></svg>';\n","<!--\r\n/*!\r\n * @ngx-dummy/Accordion-Simple library\r\n * Simple accordion created for angular / ionic projects.\r\n * https://github.com/ngx-dummy/accordion-simple\r\n *\r\n * Copyright  Vladimir Ovsyukov <ovsyukov@yandex.com>\r\n * Published under GNU LGPLv3 License\r\n */\r\n-->\r\n<ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: isOpen$ | async }\"></ng-container>\r\n\r\n<ng-template #itemTpl let-isOpen>\r\n\t<article class=\"accord-item\">\r\n\t\t<header class=\"accord-item__header\" [class.opened]=\"isOpen\">\r\n\t\t\t<ng-container *ngTemplateOutlet=\"headerDefaultTmpl; context: { $implicit: isOpen }\"></ng-container>\r\n\t\t</header>\r\n\t\t<!-- <section class=\"accord-item__body\" [ngClass]=\"{ 'opened': isOpen , 'closed': !isOpen }\" > -->\r\n\t\t<section class=\"accord-item__body closed\" [@openClose]=\"isOpen ? 'opened' : 'closed'\" (@openClose.start)=\"startAnim($event)\" (@openClose.done)=\"doneAnim($event)\">\r\n\t\t\t<ng-container *ngTemplateOutlet=\"getItemBodyTemplate($any(item.body), bodyDefaultTmpl); context: { $implicit: getItemBodyCtx($any(item.body)) }\"></ng-container>\r\n\t\t</section>\r\n\t</article>\r\n</ng-template>\r\n\r\n<ng-template #headerDefaultTmpl let-isOpen>\r\n\t<div class=\"header--control accord-item__logo\">\r\n\t\t<span class=\"accord-item__header--start\">\r\n\t\t\t<img class=\"accord-item__header-img accord-item__header--start-img\" />\r\n\t\t\t<span *ngIf=\"item.itemNum\">{{ item.itemNum }}.</span>\r\n\t\t</span>\r\n\t</div>\r\n\t<div class=\"header--control accord-item__title\">\r\n\t\t{{ item.title }}\r\n\t</div>\r\n\t<div class=\"header--control accord-item__collapse\">\r\n\t\t<span class=\"accord-item__header--end\" [class.active]=\"isOpen\">\r\n\t\t\t<!-- NOTE: img 'src' attr is bound in the `accordion-item-img.directive` -->\r\n\t\t\t<img class=\"accord-item__header-img accord-item__header--end-img\" [ngClass]=\"{ open: isOpen, close: !isOpen }\" />\r\n\t\t</span>\r\n\t</div>\r\n</ng-template>\r\n\r\n<ng-template #bodyDefaultTmpl let-defctx>\r\n\t{{ defctx }}\r\n\t<ng-content select=\".accord-item__footer\"></ng-content>\r\n</ng-template>\r\n","/*!\n * @ngx-dummy/Accordion-Simple library\n * Simple accordion created for angular / ionic projects.\n * https://github.com/ngx-dummy/accordion-simple\n *\n * Copyright  Vladimir Ovsyukov <ovsyukov@yandex.com>\n * Published under GNU LGPLv3 License\n */\nimport { Component, ChangeDetectionStrategy } from '@angular/core';\nimport { of } from 'rxjs';\nimport { accordionItemAnimations, NgAnimationEvent } from './animations';\nimport { AccordionItemInternal, getItemBodyCtx, getItemBodyTemplate } from './settings/';\n\n@Component({\n\tselector: 'ngxd-accordion-item',\n\ttemplateUrl: './accordion-item.component.html',\n\tstyleUrls: ['./accordion-item.component.scss'],\n\tanimations: [accordionItemAnimations.accordionItemBodyHeightCollapse],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AccordionItemComponent {\n\tgetItemBodyCtx = getItemBodyCtx!;\n\tgetItemBodyTemplate = getItemBodyTemplate!;\n\tisOpen$ = of(false);\n\titem: Partial<AccordionItemInternal>;\n\n\tstartAnim(e: NgAnimationEvent) {\n\t\t(<HTMLElement>e.element).style.willChange = 'height, opacity, visibility';\n\t\tconst classes = <DOMTokenList>e.element.classList;\n\t\tif (e.fromState === 'void') {\n\t\t\tclasses?.add('closed');\n\t\t}\n\t\tif (e.fromState === 'closed' && e.toState === 'opened') {\n\t\t\tclasses.replace('closed', 'opened');\n\t\t}\n\t}\n\n\tdoneAnim(e: NgAnimationEvent) {\n\t\t(<HTMLElement>e.element).style.willChange = 'auto';\n\t\tconst classes = <DOMTokenList>e.element.classList;\n\t\tif (e.fromState == 'opened' && e.toState == 'closed') {\n\t\t\tclasses.replace('opened', 'closed');\n\t\t}\n\t}\n}\n","/* eslint-disable @angular-eslint/no-host-metadata-property */\n/*!\n * @ngx-dummy/Accordion-Simple library\n * Simple accordion created for angular / ionic projects.\n * https://github.com/ngx-dummy/accordion-simple\n *\n * Copyright  Vladimir Ovsyukov <ovsyukov@yandex.com>\n * Published under GNU LGPLv3 License\n */\nimport { Directive, ElementRef, Output, EventEmitter, AfterViewInit, Input, Renderer2, Inject, OnInit, Host, ChangeDetectorRef, OnDestroy } from '@angular/core';\n\nimport { DomSanitizer } from '@angular/platform-browser';\nimport { Subject } from 'rxjs';\nimport { filter, tap, pluck, map, takeUntil } from 'rxjs/operators';\n\nimport { AccordionItemComponent } from './accordion-item.component';\nimport { AccordionOpenService } from './accordion-open.service';\nimport { NgAnimationEvent } from './animations';\nimport { IToggler, IAccordionItemStyling, AccordionItem, AccordionItemInternal, ItemTemplateContext, sanitizeHTML } from './settings/';\n\n@Directive({\n\tselector: '[ngxdAccordionItem]',\n\thost: {\n\t\t'[class.opened]': 'isOpen',\n\t\t'(dblclick)': 'onDblClick([$event.target, $event.currentTarget])',\n\t\t'(click)': 'onClick([$event.target, $event.currentTarget])',\n\t},\n})\nexport class AccordionItemDirective implements OnInit, AfterViewInit, OnDestroy {\n\t@Input('ngxdAccordionItem') item!: AccordionItemInternal;\n\t@Input('styling') itemStyles: IAccordionItemStyling = {\n\t\theadHeight: '50px',\n\t\theadBgColor: '#ccc',\n\t\theadColor: '#fff',\n\t\tbodyBgColor: '#fff',\n\t\tbodyColor: '#000',\n\t\tfontSize: '10px',\n\t\tbodyPadding: '0',\n\t};\n\t@Input() logo: string;\n\t@Input() openSign: string;\n\t@Input() closeSign: string;\n\t@Input() bodyDblclkClose = false;\n\t@Input() isNumbered = false;\n\t@Output() toggled: EventEmitter<IToggler> = new EventEmitter();\n\tisOpen = false;\n\tprivate hostDestroy$$: Subject<void> = new Subject();\n\n\tconstructor(\n\t\t@Inject(AccordionItemComponent) private hostCmp: AccordionItemComponent,\n\t\t@Inject(ElementRef) private hostElRef: ElementRef<HTMLElement>,\n\t\t@Host() private itemStatusSvc: AccordionOpenService,\n\t\tprivate render: Renderer2,\n\t\tprivate sanitizer: DomSanitizer,\n\t\tprivate cd: ChangeDetectorRef\n\t) {}\n\n\tngOnInit() {\n\t\tthis.hostCmp.item = {\n\t\t\t...this.item,\n\t\t\tbody:\n\t\t\t\ttypeof this.item.body === 'string'\n\t\t\t\t\t? sanitizeHTML(this.item.body, this.sanitizer)\n\t\t\t\t\t: ({\n\t\t\t\t\t\t\titemTemplate: this.item.body?.itemTemplate,\n\t\t\t\t\t\t\titemBody: sanitizeHTML(this.item.body?.itemBody, this.sanitizer),\n\t\t\t\t\t  } as ItemTemplateContext),\n\t\t\titemNum: this.isNumbered ? +this.item.itemId + 1 : null,\n\t\t} as Partial<AccordionItem>;\n\n\t\tthis.hostCmp.isOpen$ = this.itemStatusSvc.itemsOpen$.pipe(\n\t\t\ttakeUntil(this.hostDestroy$$),\n\t\t\tfilter((val) => !!val && !!val.length),\n\t\t\tmap((toggles: IToggler[]) => toggles.find(({ itemId }) => itemId === +this.item.itemId)!),\n\t\t\tpluck<IToggler, 'isOpen'>('isOpen'),\n\t\t\ttap((isOpen = false) => (this.isOpen = isOpen))\n\t\t);\n\t}\n\n\tngAfterViewInit() {\n\t\tconst nativeEl = this.hostElRef.nativeElement;\n\t\tconst itemEl = nativeEl.getElementsByClassName('accord-item').item(0) as HTMLElement;\n\t\tconst headEl = nativeEl.getElementsByClassName('accord-item__header').item(0) as HTMLElement;\n\t\tconst bodyEl = nativeEl.getElementsByClassName('accord-item__body').item(0) as HTMLElement;\n\n\t\t{\n\t\t\t/** set up the accordion item header images\\' sources */\n\t\t\tconst headElLogoImgEl = headEl.getElementsByClassName('accord-item__header--start-img').item(0) as HTMLImageElement;\n\t\t\tconst headElCloserImgEl = headEl.getElementsByClassName('accord-item__header--end-img').item(0) as HTMLImageElement;\n\t\t\tthis.logo && this.render.setAttribute(headElLogoImgEl, 'data-src', this.logo);\n\t\t\tthis.openSign && this.render.setAttribute(headElCloserImgEl, 'data-opensrc', this.openSign);\n\t\t\tthis.closeSign && this.render.setAttribute(headElCloserImgEl, 'data-closesrc', this.closeSign);\n\t\t\tthis.cd.detectChanges();\n\t\t}\n\n\t\tthis.render.setStyle(itemEl, 'margin', this.itemStyles.margin ?? '0');\n\t\tthis.render.setStyle(itemEl, 'padding', this.itemStyles.padding ?? '0');\n\t\tthis.itemStyles.font && this.render.setStyle(itemEl, 'font', this.itemStyles.font);\n\t\tthis.itemStyles.fontSize && this.render.setStyle(itemEl, 'font-size', this.itemStyles.fontSize);\n\t\tthis.itemStyles.fontStyle && this.render.setStyle(itemEl, 'font-style', this.itemStyles.fontStyle);\n\t\tthis.itemStyles.fontFamily && this.render.setStyle(itemEl, 'font-family', this.itemStyles.fontFamily);\n\t\tthis.render.setStyle(itemEl, 'margin-bottom', this.itemStyles.marginBottom);\n\t\tthis.render.setStyle(itemEl, 'margin-top', this.itemStyles.marginTop);\n\t\tthis.itemStyles.headBgColor && nativeEl.style.setProperty('--ngxd-head-item-color', this.itemStyles.headBgColor);\n\n\t\tthis.itemStyles.headHeight && this.render.setStyle(headEl, 'height', this.itemStyles.headHeight);\n\t\tthis.itemStyles.headFont && this.render.setStyle(headEl, 'font', this.itemStyles.headFont);\n\t\tthis.render.setStyle(headEl, 'font-size', this.itemStyles.headFontSize ?? '1.1rem');\n\t\tthis.render.setStyle(headEl, 'color', this.itemStyles.headColor ?? '#ccc');\n\n\t\tthis.render.setStyle(bodyEl, 'background-color', this.itemStyles.bodyBgColor ?? 'rgba(200, 200, 200, 0.2)');\n\t\tthis.render.setStyle(bodyEl, 'color', this.itemStyles.bodyColor ?? '#000');\n\t\tthis.render.setStyle(bodyEl, 'padding', this.itemStyles.bodyPadding ?? '.1rem');\n\t\tthis.render.setStyle(bodyEl, 'margin', this.itemStyles.bodyMargin ?? '0');\n\t\tthis.itemStyles.bodyFont && this.render.setStyle(bodyEl, 'font', this.itemStyles.bodyFont);\n\t\tthis.render.setStyle(bodyEl, 'font-size', this.itemStyles.bodyFontSize ?? '1rem');\n\t\tthis.itemStyles.bodyTextAlign && this.render.setStyle(bodyEl, 'text-align', this.itemStyles.bodyTextAlign);\n\n\t\tthis.render.setStyle(bodyEl, 'cursor', this.bodyDblclkClose ? 'grab' : 'default');\n\t}\n\n\tngOnDestroy() {\n\t\tthis.hostDestroy$$.next();\n\t\tthis.hostDestroy$$.complete();\n\t}\n\n\tonClick = ([{ outerHTML }, { dataset }]: [{ outerHTML: string }, { dataset: any }]) =>\n\t\t!!outerHTML && !!dataset && outerHTML.includes('header') ? this._handleClick({ ...dataset }) : void 0;\n\n\tonDblClick = ([{ outerHTML }, { dataset }]: [{ outerHTML: string }, { dataset: any }]) =>\n\t\t!!outerHTML && this.bodyDblclkClose && outerHTML.includes('accord-item__body') ? this._handleClick({ ...dataset }) : void 0;\n\n\tprivate _handleClick = ({ idx, ...rest } = { idx: -1 }) => this._toggle(+idx);\n\tprivate _toggle = (itemId: number) => this.toggled.emit({ itemId, isOpen: !this.isOpen });\n}\n","<!--\n/*!\n * @ngx-dummy/Accordion-Simple library\n * Simple accordion created for angular / ionic projects.\n * https://github.com/ngx-dummy/accordion-simple\n *\n * Copyright  Vladimir Ovsyukov <ovsyukov@yandex.com>\n * Published under GNU LGPLv3 License\n */ \n-->\n<div class=\"accordion\">\n\t<ng-container *ngIf=\"!!accordionItems; then itemsTmpl; else $any(loadingTpl)\"> </ng-container>\n</div>\n\n<ng-template #itemsTmpl>\n\t<ng-container *ngFor=\"let item of accordionItems; trackBy: trackByFn\" [ngTemplateOutlet]=\"accordItemTmpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n</ng-template>\n\n<ng-template #accordItemTmpl let-item>\n\t<ngxd-accordion-item\n\t\t[ngxdAccordionItem]=\"item\"\n\t\t[isNumbered]=\"_isNumbered\"\n\t\t[bodyDblclkClose]=\"_bodyDblclkClose\"\n\t\t[openSign]=\"openSign\"\n\t\t[closeSign]=\"closeSign\"\n\t\t[logo]=\"listLogo\"\n\t\t[styling]=\"_itemStyle\"\n\t\t[attr.data-idx]=\"item.itemId\"\n\t\t[id]=\"item.id\"\n\t\t(toggled)=\"onItemToggled($event)\"\n\t\t@accordItemsIn\n\t></ngxd-accordion-item>\n</ng-template>\n\n<ng-template #defloadingTpl>\n\t<style>\n\t\t.accordion-default-loader--tmpl {\n\t\t\tdisplay: block;\n\t\t\tborder-radius: 50%;\n\t\t\tbackground-color: transparent;\n\t\t\tmin-height: 50px;\n\t\t\tmin-width: 50px;\n\t\t}\n\t\t.accordion-default-loader--tmpl > svg {\n\t\t\tfill: var(--dark-bg);\n\t\t\ttransform: rotate(90deg);\n\t\t}\n\t\t.accordion-default-loader--tmpl > svg rect:first-of-type {\n\t\t\tfill: var(--darker-color);\n\t\t}\n\t\t.accordion-default-loader--tmpl > svg rect:nth-of-type(2) {\n\t\t\tfill: var(--accent-color);\n\t\t}\n\t\t.accordion-default-loader--tmpl > svg rect:nth-of-type(3) {\n\t\t\tfill: var(--dark-blue-color);\n\t\t}\n\t</style>\n\t<div class=\"accordion-default-loader--tmpl\" @spinnerIn>\n\t\t<svg width=\"51px\" height=\"50px\" viewBox=\"0 0 51 50\">\n\t\t\t<rect y=\"0\" width=\"13\" height=\"50\">\n\t\t\t\t<animate attributeName=\"height\" values=\"50;10;50\" begin=\"0s\" dur=\"1s\" repeatCount=\"indefinite\" />\n\t\t\t\t<animate attributeName=\"y\" values=\"0;20;0\" begin=\"0s\" dur=\"1s\" repeatCount=\"indefinite\" />\n\t\t\t</rect>\n\t\t\t<rect x=\"19\" y=\"0\" width=\"13\" height=\"50\">\n\t\t\t\t<animate attributeName=\"height\" values=\"50;10;50\" begin=\"0.2s\" dur=\"1s\" repeatCount=\"indefinite\" />\n\t\t\t\t<animate attributeName=\"y\" values=\"0;20;0\" begin=\"0.2s\" dur=\"1s\" repeatCount=\"indefinite\" />\n\t\t\t</rect>\n\t\t\t<rect x=\"38\" y=\"0\" width=\"13\" height=\"50\">\n\t\t\t\t<animate attributeName=\"height\" values=\"50;10;50\" begin=\"0.4s\" dur=\"1s\" repeatCount=\"indefinite\" />\n\t\t\t\t<animate attributeName=\"y\" values=\"0;20;0\" begin=\"0.4s\" dur=\"1s\" repeatCount=\"indefinite\" />\n\t\t\t</rect>\n\t\t</svg>\n\t</div>\n</ng-template>\n","/*!\r\n * @ngx-dummy/Accordion-Simple library\r\n * Simple accordion created for angular / ionic projects.\r\n * https://github.com/ngx-dummy/accordion-simple\r\n *\r\n * Copyright  Vladimir Ovsyukov <ovsyukov@yandex.com>\r\n * Published under GNU LGPLv3 License\r\n */\r\nimport {\r\n\tComponent,\r\n\tInput,\r\n\tHostBinding,\r\n\tChangeDetectionStrategy,\r\n\tOnInit,\r\n\tSelf,\r\n\tSimpleChanges,\r\n\tOnChanges,\r\n\tOnDestroy,\r\n\tTemplateRef,\r\n\tViewChild,\r\n\tElementRef,\r\n\tRenderer2,\r\n} from '@angular/core';\r\nimport { map, filter } from 'rxjs/operators';\r\n\r\nimport { AccordionOpenService } from './accordion-open.service';\r\nimport { accordionAnimations } from './animations';\r\nimport { Accordion, IAccordionStyling, IAccordionItemStyling, IToggler, AccordionItemInternal, AccordionInternal, pluckIToggler, pluckOpenTogglesIdsToStr } from './settings/';\r\n\r\n@Component({\r\n\tselector: 'ngxd-accordion',\r\n\texportAs: 'ngxdAccordion',\r\n\ttemplateUrl: './accordion.component.html',\r\n\tstyleUrls: ['./accordion.component.scss'],\r\n\tanimations: [accordionAnimations.accordItemsIn, accordionAnimations.spinnerIn],\r\n\tviewProviders: [AccordionOpenService],\r\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class AccordionComponent implements OnInit, OnChanges, OnDestroy {\r\n\tstatic idx = 0;\r\n\t@ViewChild('defloadingTpl', { read: TemplateRef, static: true }) private defloadingTpl!: TemplateRef<Element>;\r\n\t@HostBinding('attr.data-items-opened') _openedItems: string;\r\n\t@HostBinding('attr.id') get id() {\r\n\t\treturn `${this.attributes.id}`;\r\n\t}\r\n\t@HostBinding('attr.name') get name() {\r\n\t\treturn this.attributes.name;\r\n\t}\r\n\t@Input() set accordionList(acc: Accordion) {\r\n\t\tlet [name, id] = [(!!acc && !!acc['name']?.length && acc.name) || 'Sample-Accordion', (!!acc && !!acc['id'] && acc.id) || `accordion_${++AccordionComponent.idx}`];\r\n\t\tthis._accord = Object.assign(\r\n\t\t\t{ id, name },\r\n\t\t\t{\r\n\t\t\t\titems: acc?.items.map(\r\n\t\t\t\t\t(item, i) =>\r\n\t\t\t\t\t\t<AccordionItemInternal>{\r\n\t\t\t\t\t\t\t...item,\r\n\t\t\t\t\t\t\tid: !!item.id && typeof item.id === 'string' ? item.id : `${id}__accord-item_${i}`,\r\n\t\t\t\t\t\t\titemId: i,\r\n\t\t\t\t\t\t}\r\n\t\t\t\t),\r\n\t\t\t}\r\n\t\t) as AccordionInternal;\r\n\t}\r\n\tget accordionItems(): AccordionItemInternal[] {\r\n\t\treturn this._accord?.items;\r\n\t}\r\n\t@Input() openSign: string;\r\n\t@Input() closeSign: string;\r\n\t@Input() listLogo: string;\r\n\t@Input() accordionStyling: IAccordionStyling = {\r\n\t\tnumberedItems: false,\r\n\t\tisMultiShow: false,\r\n\t\tbodyDblclkCloseItems: false,\r\n\t\tmaxWidth: '100%',\r\n\t\titemsGuts: '1rem',\r\n\t\tmargin: '0',\r\n\t\titemStyling: {\r\n\t\t\theadBgColor: '#4197b2',\r\n\t\t\theadColor: '#fff',\r\n\t\t\tbodyBgColor: '#fff',\r\n\t\t\tbodyColor: '#000',\r\n\t\t\tmargin: '0',\r\n\t\t\tpadding: '0',\r\n\t\t},\r\n\t};\r\n\t@Input() set loadingTpl(val: TemplateRef<Element>) {\r\n\t\tthis._loadingTpl = val || this.defloadingTpl;\r\n\t}\r\n\tget loadingTpl(): TemplateRef<Element> {\r\n\t\treturn this._loadingTpl ?? this.defloadingTpl;\r\n\t}\r\n\t_bodyDblclkClose = false;\r\n\t_itemStyle: IAccordionItemStyling;\r\n\t_isNumbered = false;\r\n\r\n\tprivate _loadingTpl: TemplateRef<Element>;\r\n\tprivate _accord: AccordionInternal;\r\n\tprivate multiSelect = false;\r\n\r\n\tconstructor(@Self() private itemsOpenSvc: AccordionOpenService, private hostEl: ElementRef<Element>, private renderer: Renderer2) {}\r\n\r\n\tngOnInit() {\r\n\t\tthis._bodyDblclkClose = !!this.accordionStyling.bodyDblclkCloseItems ?? false;\r\n\t\tthis.multiSelect = !!this.accordionStyling.isMultiShow ?? false;\r\n\t\tthis.itemsOpenSvc.itemsOpen$\r\n\t\t\t.pipe(\r\n\t\t\t\tfilter((val) => !!val?.length),\r\n\t\t\t\tmap(pluckOpenTogglesIdsToStr)\r\n\t\t\t)\r\n\t\t\t.subscribe((ids) => (this._openedItems = ids));\r\n\r\n\t\tthis._isNumbered = this.accordionStyling.numberedItems ?? false;\r\n\t\tthis._bodyDblclkClose = this.accordionStyling.bodyDblclkCloseItems ?? false;\r\n\r\n\t\tlet itemStyles: IAccordionItemStyling = Array.isArray(this.accordionStyling.itemStyling)\r\n\t\t\t? this.accordionStyling.itemStyling.reduce((accu = {}, curr) => ({ ...accu, ...curr }))\r\n\t\t\t: { ...this.accordionStyling.itemStyling };\r\n\r\n\t\tconst itemsGuts = this.accordionStyling.itemsGuts ?? 0;\r\n\t\titemStyles = {\r\n\t\t\tpadding: '0',\r\n\t\t\tmarginBottom: itemsGuts,\r\n\t\t\tmarginTop: itemsGuts,\r\n\t\t\t...itemStyles,\r\n\t\t};\r\n\t\tthis._itemStyle = Object.entries(itemStyles)\r\n\t\t\t.map(([key, val]) => ({\r\n\t\t\t\t[key]: typeof val === 'number' ? `${val}px` : val,\r\n\t\t\t}))\r\n\t\t\t.reduce((accu, val) => ({ ...accu, ...val }));\r\n\r\n\t\tconst accordEl = this.hostEl.nativeElement;\r\n\t\tthis.renderer.setStyle(accordEl, 'max-width', this.accordionStyling.maxWidth ?? '100%');\r\n\t\tthis.renderer.setStyle(accordEl, 'margin', this.accordionStyling.margin ?? '0');\r\n\t}\r\n\r\n\tngOnChanges(changes: SimpleChanges) {\r\n\t\tObject.keys(changes).forEach((prop) => {\r\n\t\t\tif (prop === 'accordionList' && changes[prop].previousValue !== changes[prop].currentValue) this.itemsOpenSvc.setItemsOpen(this.accordionItems?.map(pluckIToggler));\r\n\t\t});\r\n\t}\r\n\r\n\tngOnDestroy() {\r\n\t\tthis.itemsOpenSvc.close();\r\n\t}\r\n\r\n\tonItemToggled = ({ itemId, isOpen }: IToggler = { itemId: 0, isOpen: false }) =>\r\n\t\tthis.itemsOpenSvc.setItemsOpen(\r\n\t\t\tthis.itemsOpenSvc.itemsOpenSnapshot.map(\r\n\t\t\t\t({ itemId: eId, isOpen: opened }) =>\r\n\t\t\t\t\t(eId === +itemId\r\n\t\t\t\t\t\t? { itemId, isOpen }\r\n\t\t\t\t\t\t: {\r\n\t\t\t\t\t\t\t\titemId: eId,\r\n\t\t\t\t\t\t\t\tisOpen: this.multiSelect ? opened : false,\r\n\t\t\t\t\t\t  }) as IToggler\r\n\t\t\t)\r\n\t\t);\r\n\r\n\tpublic closeAll = () => this.accordionItems?.forEach(({ itemId, ...rest }) => this.onItemToggled({ itemId, isOpen: false }));\r\n\r\n\tpublic trackByFn = (_ind: number, { itemId, ...rest }: any) => +itemId;\r\n\r\n\tprivate get attributes(): Partial<Accordion> {\r\n\t\tconst { id, name } = this._accord;\r\n\t\treturn { id, name };\r\n\t}\r\n}\r\n","<!-- \n  /*!\n * @ngx-dummy/Accordion-Simple library\n * Simple accordion created for angular / ionic projects.\n * https://github.com/ngx-dummy/accordion-simple\n *\n * Copyright  Vladimir Ovsyukov <ovsyukov@yandex.com>\n * Published under GNU LGPLv3 License\n */\n -->\n<div class=\"mdc-layout-grid\">\n\t<div class=\"mdc-layout-grid__inner mb-1\">\n\t\t<div class=\"mdc-layout-grid__cell mdc-layout-grid__cell--span-6 mdc-layout-grid__cell--span-12-phone mdc-layout-grid__cell--span-12-tablet align\">\n\t\t\t<h2 class=\"text-center app-title\">{{ title }}</h2>\n\t\t</div>\n\t\t<div class=\"mdc-layout-grid__cell mdc-layout-grid__cell--span-6 mdc-layout-grid__cell--span-12-phone mdc-layout-grid__cell--span-12-tablet align\">\n\t\t\t<div class=\"mdc-touch-target-wrapper\">\n\t\t\t\t<button class=\"mdc-button mdc-button--touch light-bg\" (click)=\"acc1.closeAll(); acc2.closeAll()\">\n\t\t\t\t\t<div class=\"mdc-button__ripple\"></div>\n\t\t\t\t\t<span>Close All</span>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div class=\"mdc-layout-grid__inner mb-1\">\n\t\t<div class=\"mdc-layout-grid__cell mdc-layout-grid__cell--span-12\">\n\t\t\t<ngxd-accordion #acc1=\"ngxdAccordion\" [accordionList]=\"accordList2\" [accordionStyling]=\"styling\" openSign=\"plus.png\" closeSign=\"minus.png\"></ngxd-accordion>\n\t\t</div>\n\t</div>\n\t<div class=\"mdc-layout-grid__inner\">\n\t\t<div class=\"mdc-layout-grid__cell mdc-layout-grid__cell--span-12\">\n\t\t\t<ngxd-accordion\n\t\t\t\t#acc2=\"ngxdAccordion\"\n\t\t\t\t[loadingTpl]=\"simpleLoader\"\n\t\t\t\t[accordionList]=\"accordList$ | async\"\n\t\t\t\t[accordionStyling]=\"styling1\"\n\t\t\t\tlistLogo=\"list_white_48dp.png\"\n\t\t\t></ngxd-accordion>\n\t\t</div>\n\t</div>\n</div>\n\n<ng-template #simpleLoader>\n\t<style>\n\t\t:host {\n\t\t\t--spin-bg: #46cccc;\n\t\t\t--spin-in-bg: #4adada;\n\t\t}\n\n\t\t.container-transparent {\n\t\t\tbackground: transparent;\n\t\t\tdisplay: grid;\n\t\t\tmin-height: 6rem;\n\t\t\twidth: 100%;\n\t\t\tplace-content: center;\n\t\t}\n\n\t\t.loader {\n\t\t\twidth: 3rem;\n\t\t\theight: 3rem;\n\t\t\tborder: 0.3rem solid var(--spin-bg);\n\t\t\tanimation: spin 2s infinite ease-in-out;\n\t\t}\n\n\t\t.loader-inner {\n\t\t\tvertical-align: top;\n\t\t\tdisplay: inline-block;\n\t\t\twidth: 100%;\n\t\t\tbackground-color: var(--spin-in-bg);\n\t\t\tanimation: spin-in 2s infinite ease-in;\n\t\t}\n\n\t\t@keyframes spin {\n\t\t\t0% {\n\t\t\t\topacity: 0.4;\n\t\t\t\ttransform: rotate(0deg);\n\t\t\t}\n\n\t\t\t25% {\n\t\t\t\topacity: 0.6;\n\t\t\t\ttransform: rotate(180deg);\n\t\t\t}\n\n\t\t\t50% {\n\t\t\t\topacity: 0.9;\n\t\t\t\ttransform: rotate(180deg);\n\t\t\t}\n\n\t\t\t75% {\n\t\t\t\topacity: 1;\n\t\t\t\ttransform: rotate(390deg);\n\t\t\t}\n\n\t\t\t100% {\n\t\t\t\topacity: 0.9;\n\t\t\t\ttransform: rotate(360deg);\n\t\t\t}\n\t\t}\n\n\t\t@keyframes spin-in {\n\t\t\t0% {\n\t\t\t\topacity: 0.4;\n\t\t\t\theight: 0%;\n\t\t\t}\n\n\t\t\t25% {\n\t\t\t\topacity: 0.6;\n\t\t\t\theight: 0%;\n\t\t\t}\n\n\t\t\t50% {\n\t\t\t\topacity: 0.9;\n\t\t\t\theight: 100%;\n\t\t\t}\n\n\t\t\t75% {\n\t\t\t\topacity: 1;\n\t\t\t\theight: 100%;\n\t\t\t}\n\n\t\t\t100% {\n\t\t\t\topacity: 0.9;\n\t\t\t\theight: 0%;\n\t\t\t}\n\t\t}\n\t</style>\n\t<div class=\"container-transparent\" @moveIn>\n\t\t<span class=\"loader\"><span class=\"loader-inner\"></span></span>\n\t</div>\n</ng-template>\n\n<ng-template #simpleBodyTmpl let-ctxcontent>\n\t<style>\n\t\t.tmpl-item-container {\n\t\t\tfont-family: 'Roboto', sans-serif !important;\n\t\t}\n\n\t\t.head6 {\n\t\t\tfont-style: italic;\n\t\t\tmargin: 1.1rem;\n\t\t}\n\n\t\t.subtitle1 {\n\t\t\tcolor: var(--mdc-theme-text-primary-on-dark, rgba(250, 250, 250, 0.9));\n\t\t\ttext-align: start;\n\t\t\tmargin: 0.1rem 1rem;\n\t\t\tfont-family: Lato;\n\t\t}\n\n\t\t.subtitle2 {\n\t\t\tcolor: var(--mdc-theme-text-primary-on-light, rgba(250, 250, 250, 0.9));\n\t\t\ttext-align: start;\n\t\t\tmargin: 0.1rem 1rem;\n\t\t}\n\n\t\t.card-media__items {\n\t\t\tposition: absolute;\n\t\t\tbottom: 1rem;\n\t\t\tleft: 0.4rem;\n\t\t}\n\n\t\t.tmpl-item-logo {\n\t\t\tbackground-image: url('myTwitLogo.png');\n\t\t}\n\n\t\t.tmpl-main-content {\n\t\t\tbackground-color: floralwhite;\n\t\t\tfont-size: medium;\n\t\t}\n\n\t\t.body2 {\n\t\t\tmargin: 0.4rem 1rem;\n\t\t}\n\n\t\t.tmpl-footer {\n\t\t\tbackground-color: lavenderblush;\n\t\t\tcolor: black;\n\t\t\tfont-size: xx-small;\n\t\t}\n\n\t\t@media screen and (max-width: 500px) {\n\t\t\t.head6 {\n\t\t\t\tfont-size: 1rem;\n\t\t\t\tmargin: 0.1rem;\n\t\t\t}\n\n\t\t\t.subtitle1 {\n\t\t\t\tfont-size: 0.4rem;\n\t\t\t}\n\n\t\t\t.subtitle2 {\n\t\t\t\tfont-size: 0.2rem;\n\t\t\t}\n\n\t\t\t.flex-card__tmpl {\n\t\t\t\tdisplay: grid;\n\t\t\t\tflex-direction: column;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tflex-wrap: wrap !important;\n\t\t\t}\n\t\t}\n\t</style>\n\t<ng-container ngProjectAs=\"tmpl-item-card__container\">\n\t\t<div class=\"mdc-card tmpl-item-container\">\n\t\t\t<div class=\"tmpl-header\">\n\t\t\t\t<h6 class=\"mdc-typography mdc-typography--headline6 head6\">Custom templated Item sample</h6>\n\t\t\t</div>\n\t\t\t<div class=\"mdc-card__primary-action\" tabindex=\"0\">\n\t\t\t\t<div\n\t\t\t\t\tclass=\"mdc-card__media mdc-card__media--16-9 demo-card__media tmpl-item-logo\"\n\t\t\t\t\tonclick=\"location.href='//twitter.com/intent/tweet?ref_src=twsrc%5Etfw&original_referer=https%3A%2F%2Fngx-dummy.github.io%2Faccordion-simple%2F&url=https%3A%2F%2Fgithub.com%2Fvovansuper%2Faccordion-simple&text=ngx-dummy Accordion simple component'\"\n\t\t\t\t>\n\t\t\t\t\t<div class=\"mdc-card__media-content demo-card__media-content\">\n\t\t\t\t\t\t<div class=\"card-media__items\">\n\t\t\t\t\t\t\t<h3 class=\"mdc-typography mdc-typography--subtitle1 subtitle1\">by Vladimir Ovsyukov</h3>\n\t\t\t\t\t\t\t<h6 class=\"mdc-typography mdc-typography--subtitle2 subtitle1\">https://github.com/VovanSuper</h6>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"mdc-typography mdc-typography--body2 mt-1 mb-1 body2\" [innerHTML]=\"ctxcontent\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"mdc-card__actions flex-card__tmpl\">\n\t\t\t\t<div class=\"mdc-card__action-buttons\">\n\t\t\t\t\t<button class=\"mdc-button mdc-card__action mdc-card__action--button\" onclick=\"location.href='//github.com/ngx-dummy/accordion-simple'\">\n\t\t\t\t\t\t<span class=\"mdc-button__ripple\"></span>\n\t\t\t\t\t\t<span class=\"material-icons\">description</span>\n\t\t\t\t\t\tDocs\n\t\t\t\t\t</button>\n\t\t\t\t\t<button class=\"mdc-button mdc-card__action mdc-card__action--button\" onclick=\"location.href='//github.com/VovanSuper' \" aria-label=\"Follow VovanSuper on GitHub\">\n\t\t\t\t\t\t<span class=\"mdc-button__ripple\"></span>\n\t\t\t\t\t\t<span class=\"material-icons\">thumb_up_alt</span>\n\t\t\t\t\t\tFollow\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"mdc-card__action-icons\">\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"mdc-icon-button mdc-card__action mdc-card__action--icon--unbounded\"\n\t\t\t\t\t\taria-pressed=\"false\"\n\t\t\t\t\t\taria-label=\"Sponsor\"\n\t\t\t\t\t\ttitle=\"Sponsor\"\n\t\t\t\t\t\tonclick=\"location.href='//github.com/sponsors/ngx-dummy'\"\n\t\t\t\t\t\tdata-icon=\"octicon-heart\"\n\t\t\t\t\t\taria-label=\"Sponsor Me on GitHub\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"mdc-icon-button material-icons mdc-card__action mdc-card__action--icon--unbounded\"\n\t\t\t\t\t\ttitle=\"Share\"\n\t\t\t\t\t\tdata-mdc-ripple-is-unbounded=\"true\"\n\t\t\t\t\t\tonclick=\"location.href='//twitter.com/intent/tweet?ref_src=twsrc%5Etfw&original_referer=https%3A%2F%2Fngx-dummy.github.io%2Faccordion-simple%2F&url=https%3A%2F%2Fgithub.com%2Fvovansuper%2Faccordion-simple&text=ngx-dummy Accordion simple component'\"\n\t\t\t\t\t>\n\t\t\t\t\t\tshare\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</ng-container>\n</ng-template>\n\n<ng-template #tmpl2 let-ctxcontent>\n\t<style scoped>\n\t\t.row {\n\t\t\tmargin-left: auto;\n\t\t\tmargin-right: auto;\n\t\t\tmargin-bottom: 20px;\n\t\t}\n\t\t.row .col {\n\t\t\tfloat: left;\n\t\t\t-webkit-box-sizing: border-box;\n\t\t\tbox-sizing: border-box;\n\t\t\tpadding: 0 0.75rem;\n\t\t\tmin-height: 1px;\n\t\t}\n\t\t.row .col.s12 {\n\t\t\twidth: 100%;\n\t\t\tmargin-left: auto;\n\t\t\tleft: auto;\n\t\t\tright: auto;\n\t\t}\n\t\t.row:after {\n\t\t\tcontent: '';\n\t\t\tdisplay: table;\n\t\t\tclear: both;\n\t\t}\n\t\t.card {\n\t\t\tposition: relative;\n\t\t\tmargin: 0.5rem 0 1rem 0;\n\t\t\tbackground-color: #fff;\n\t\t\t-webkit-transition: -webkit-box-shadow 0.25s;\n\t\t\ttransition: -webkit-box-shadow 0.25s;\n\t\t\ttransition: box-shadow 0.25s;\n\t\t\ttransition: box-shadow 0.25s, -webkit-box-shadow 0.25s;\n\t\t\tborder-radius: 2px;\n\t\t}\n\t\t.card.large .card-image {\n\t\t\tmax-height: 60%;\n\t\t\tposition: relative;\n\t\t\toverflow: hidden;\n\t\t}\n\t\t.card .card-image img {\n\t\t\tdisplay: block;\n\t\t\tborder-radius: 2px 2px 0 0;\n\t\t\tposition: relative;\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\ttop: 0;\n\t\t\tbottom: 0;\n\t\t\twidth: 100%;\n\t\t}\n\t\t.card .card-image .card-title {\n\t\t\tfont-size: 24px;\n\t\t\tfont-weight: 300;\n\t\t\tcolor: #fff;\n\t\t\tposition: absolute;\n\t\t\tbottom: 0;\n\t\t\tleft: 0;\n\t\t\tmax-width: 100%;\n\t\t\tpadding: 24px;\n\t\t}\n\t\t.btn-floating.halfway-fab {\n\t\t\tposition: absolute;\n\t\t\tright: 24px;\n\t\t\tbottom: -20px;\n\t\t}\n\t\t.waves-effect {\n\t\t\tposition: relative;\n\t\t\tcursor: pointer;\n\t\t\tdisplay: inline-block;\n\t\t\toverflow: hidden;\n\t\t\t-webkit-user-select: none;\n\t\t\t-moz-user-select: none;\n\t\t\t-ms-user-select: none;\n\t\t\tuser-select: none;\n\t\t\t-webkit-tap-highlight-color: transparent;\n\t\t\tvertical-align: middle;\n\t\t\tz-index: 1;\n\t\t\t-webkit-transition: 0.3s ease-out;\n\t\t\ttransition: 0.3s ease-out;\n\t\t}\n\t\t.btn-floating {\n\t\t\tfont-size: 14px;\n\t\t\toutline: 0;\n\t\t\tdisplay: inline-block;\n\t\t\tcolor: #fff;\n\t\t\tposition: relative;\n\t\t\toverflow: hidden;\n\t\t\tz-index: 1;\n\t\t\twidth: 40px;\n\t\t\theight: 40px;\n\t\t\tline-height: 40px;\n\t\t\tpadding: 0;\n\t\t\tbackground-color: #26a69a;\n\t\t\tborder-radius: 50%;\n\t\t\t-webkit-transition: background-color 0.3s;\n\t\t\ttransition: background-color 0.3s;\n\t\t\tcursor: pointer;\n\t\t\tvertical-align: middle;\n\t\t}\n\t\t.red {\n\t\t\tbackground-color: var(--mdc-theme-on-primary, #fff);\n\t\t}\n\t\t.card .card-content {\n\t\t\t/* overflow: hidden; */\n\t\t\tmax-height: 40%;\n\t\t\tmargin: 1rem;\n\t\t}\n\t\t.material-icons {\n\t\t\tfont-family: 'Material Icons';\n\t\t\tfont-weight: normal;\n\t\t\tfont-style: normal;\n\t\t\tfont-size: 24px;\n\t\t\tline-height: 1;\n\t\t\tletter-spacing: normal;\n\t\t\ttext-transform: none;\n\t\t\tdisplay: inline-block;\n\t\t\twhite-space: nowrap;\n\t\t\tword-wrap: normal;\n\t\t\tdirection: ltr;\n\t\t\t-webkit-font-feature-settings: 'liga';\n\t\t\t-webkit-font-smoothing: antialiased;\n\t\t}\n\t\ta.btn-floating[title='Share'] {\n\t\t\tbottom: 0.5rem;\n\t\t\tright: 1rem;\n\t\t\ttext-align: center;\n\t\t\tdisplay: grid;\n\t\t\tplace-content: center;\n\t\t}\n\t</style>\n\n\t<div class=\"container materializelikes\">\n\t\t<div class=\"row\">\n\t\t\t<div class=\"div col s12 l12 center-align\" style=\"font-size: 1.5rem; line-height: 110%; margin: 0.1rem; color: var(--darker-color)\">\n\t\t\t\tSample Accordion Item (alike one of materializecss)\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col s12\">\n\t\t\t\t<div class=\"row\">\n\t\t\t\t\t<div class=\"col s12 m12\">\n\t\t\t\t\t\t<div class=\"card large\">\n\t\t\t\t\t\t\t<div class=\"card-image\">\n\t\t\t\t\t\t\t\t<img src=\"myTwitLogo.png\" />\n\t\t\t\t\t\t\t\t<span class=\"card-title\">Simple material template Card</span>\n\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\tclass=\"btn-floating halfway-fab waves-effect waves-light red\"\n\t\t\t\t\t\t\t\t\ttitle=\"Share\"\n\t\t\t\t\t\t\t\t\tdata-mdc-ripple-is-unbounded=\"true\"\n\t\t\t\t\t\t\t\t\tonclick=\"location.href='//twitter.com/intent/tweet?ref_src=twsrc%5Etfw&original_referer=https%3A%2F%2Fngx-dummy.github.io%2Faccordion-simple%2F&url=https%3A%2F%2Fgithub.com%2Fvovansuper%2Faccordion-simple&text=ngx-dummy Accordion simple component'\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<i class=\"material-icons\">share</i>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div class=\"card-content\">\n\t\t\t\t\t\t\t\t<p>{{ ctxcontent }}</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</ng-template>\n","/*!\n * @ngx-dummy/Accordion-Simple library\n * Simple accordion created for angular / ionic projects.\n * https://github.com/ngx-dummy/accordion-simple\n *\n * Copyright  Vladimir Ovsyukov <ovsyukov@yandex.com>\n * Published under GNU LGPLv3 License\n */\nimport { Component, ViewChild, TemplateRef, OnInit, AfterViewInit } from '@angular/core';\nimport { delay } from 'rxjs/operators';\nimport { of } from 'rxjs';\nimport { MDCRipple } from '@material/ripple';\n\nimport { IAccordionStyling, Accordion } from '@ngx-dummy/accordion-simple/settings';\nimport { dummyAccordionList1 as list1, dummyAccordionList2 } from './helpers/dummy-data';\nimport { loaderIn } from './loader.anim';\n\n@Component({\n\tselector: 'app-root',\n\tanimations: [loaderIn],\n\ttemplateUrl: './app.component.html',\n\tstyleUrls: ['./app.component.scss'],\n})\nexport class AppComponent implements OnInit, AfterViewInit {\n\t@ViewChild('simpleBodyTmpl', { static: true }) simpleBodyTmpl: TemplateRef<HTMLElement>;\n\t@ViewChild('tmpl2', { static: true }) tmpl2: TemplateRef<HTMLElement>;\n\ttitle = 'Accordion Sample';\n\taccordList2: Accordion = null;\n\taccordList$ = of(dummyAccordionList2).pipe(delay(3000));\n\n\tstyling: IAccordionStyling = {\n\t\titemsGuts: '.1rem',\n\t\tmaxWidth: '99%',\n\t\tmargin: '.1rem',\n\t\tnumberedItems: true,\n\t\titemStyling: {\n\t\t\theadBgColor: '#89a',\n\t\t\theadColor: '#fff',\n\t\t\tmargin: '.1rem',\n\t\t\tbodyPadding: '1rem',\n\t\t\tbodyMargin: 1,\n\t\t},\n\t};\n\n\tstyling1: IAccordionStyling = {\n\t\t...this.styling,\n\t\titemsGuts: 0,\n\t\tnumberedItems: false,\n\t\tmargin: '0 auto',\n\t\tisMultiShow: true,\n\t\tmaxWidth: '94%',\n\t\tbodyDblclkCloseItems: true,\n\n\t\titemStyling: {\n\t\t\t...this.styling.itemStyling,\n\t\t\theadBgColor: 'darkcyan',\n\t\t\theadColor: 'yellow',\n\t\t\tbodyColor: '#aaffff',\n\t\t\tbodyBgColor: '#87a3d1',\n\t\t\tfont: 'Comic Sans MS',\n\t\t\tbodyPadding: 1,\n\t\t\tbodyMargin: 0,\n\t\t\tbodyTextAlign: 'left',\n\t\t\tmargin: 0,\n\t\t},\n\t};\n\n\tngOnInit() {\n\t\tthis.accordList2 = {\n\t\t\t...list1,\n\t\t\titems: [\n\t\t\t\t...list1.items\n\t\t\t\t\t.map((item) =>\n\t\t\t\t\t\titem.title.includes('Accordion Card 2')\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t...item,\n\t\t\t\t\t\t\t\t\tbody: {\n\t\t\t\t\t\t\t\t\t\titemTemplate: this.simpleBodyTmpl,\n\t\t\t\t\t\t\t\t\t\titemBody: item.body,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: { ...item }\n\t\t\t\t\t)\n\t\t\t\t\t.map((item) =>\n\t\t\t\t\t\titem.title.includes('Accordion Card 1')\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t...item,\n\t\t\t\t\t\t\t\t\tbody: {\n\t\t\t\t\t\t\t\t\t\titemTemplate: this.tmpl2,\n\t\t\t\t\t\t\t\t\t\titemBody: 'Lorem ipsum card ...',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: { ...item }\n\t\t\t\t\t),\n\t\t\t],\n\t\t};\n\t}\n\n\tngAfterViewInit() {\n\t\tconst btnRipple = document.querySelector('.mdc-button');\n\t\tconst ripple = new MDCRipple(btnRipple);\n\t\treturn () => ripple.destroy();\n\t}\n}\n","/*!\n * @ngx-dummy/Accordion-Simple library\n * Simple accordion created for angular / ionic projects.\n * https://github.com/ngx-dummy/accordion-simple\n *\n * Copyright  Vladimir Ovsyukov <ovsyukov@yandex.com>\n * Published under GNU LGPLv3 License\n */\nimport { NgModule } from '@angular/core';\nimport { HttpClientModule } from '@angular/common/http';\n\nimport { AccordionComponent } from './accordion.component';\nimport { AccordionItemComponent } from './accordion-item.component';\nimport { AccordionItemDirective } from './accordion-item.directive';\nimport { AccordionItemImgDirective } from './accordion-item-img.directive';\nimport { CommonModule } from '@angular/common';\n\n@NgModule({\n\timports: [CommonModule, HttpClientModule],\n\tdeclarations: [AccordionComponent, AccordionItemComponent, AccordionItemDirective, AccordionItemImgDirective],\n\texports: [AccordionComponent],\n})\nexport class AccordionModule {}\n","/*!\n * @ngx-dummy/Accordion-Simple library\n * Simple accordion created for angular / ionic projects.\n * https://github.com/ngx-dummy/accordion-simple\n *\n * Copyright  Vladimir Ovsyukov <ovsyukov@yandex.com>\n * Published under GNU LGPLv3 License\n */\nimport { Component } from '@angular/core';\n\nimport { Accordion, IAccordionStyling } from '@ngx-dummy/accordion-simple/index';\nimport { dummyAccordionList2, dummyAccordionList1 } from './helpers/dummy-data';\nimport { AppComponent } from './app.component';\n\n@Component({\n\tselector: 'app-root2',\n\ttemplate: `\n\t\t<div class=\"mdc-layout-grid mdc-layout-grid--align-center\">\n\t\t\t<div class=\"mdc-layout-grid__inner mb-1\">\n\t\t\t\t<div class=\"mdc-layout-grid__cell mdc-layout-grid__cell--span-12 mdc-layout-grid__cell--align-center\">\n\t\t\t\t\t<h2 class=\"text-center\">{{ title }}</h2>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"mdc-layout-grid__inner mb-1\">\n\t\t\t\t<div class=\"mdc-layout-grid__cell mdc-layout-grid__cell--align-center mdc-layout-grid__cell--span-12\">\n\t\t\t\t\t<ngxd-accordion [accordionList]=\"accordList1$ | async\" [accordionStyling]=\"styling\" openSign=\"plus1.png\" minus=\"min.png\"></ngxd-accordion>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyleUrls: ['./app.component.scss'],\n})\nexport class App2Component extends AppComponent {\n\ttitle = 'Yet another Accordion Sample';\n\taccordList1$: Promise<Accordion> = new Promise((resolve) =>\n\t\tresolve({\n\t\t\t...dummyAccordionList2,\n\t\t\titems: [...dummyAccordionList1.items, ...dummyAccordionList2.items],\n\t\t})\n\t);\n\n\t// colors = ['red', 'blue', 'yellow', 'pink'];\n\t// randColor$ = interval(2000).pipe(\n\t// \tmap(_ => Math.floor(Math.random() * this.colors.length)),\n\t// \ttap(ind => console.log(\"Index \", ind)),\n\t// \tmap(ind => this.colors[ind] || \"#ccc\"),\n\t// \ttap(val => console.log(\"Selected color ::: \", val))\n\t// );\n\n\tstyling: IAccordionStyling = {\n\t\t...super.styling,\n\t\tbodyDblclkCloseItems: true,\n\t\titemStyling: {\n\t\t\theadBgColor: 'grey',\n\t\t\tpadding: 1,\n\t\t\theadColor: 'lightgreen',\n\t\t},\n\t};\n}\n","/*!\n * @ngx-dummy/Accordion-Simple library\n * Simple accordion created for angular / ionic projects.\n * https://github.com/ngx-dummy/accordion-simple\n *\n * Copyright  Vladimir Ovsyukov <ovsyukov@yandex.com>\n * Published under GNU LGPLv3 License\n */\nimport { NgModule } from '@angular/core';\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\n\nimport { AppComponent } from './app.component';\nimport { AccordionModule } from '@ngx-dummy/accordion-simple/accordion.module';\nimport { App2Component } from './app2.component';\n\n@NgModule({\n\timports: [BrowserAnimationsModule, AccordionModule],\n\tdeclarations: [AppComponent, App2Component],\n\tbootstrap: [AppComponent, App2Component],\n})\nexport class AppModule {}\n","import { enableProdMode } from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\n\nimport { AppModule } from './app/app.module';\nimport { environment } from './environments/environment';\n\nif (environment.production) {\n\tenableProdMode();\n}\n\nsetTimeout(() => {\n\tplatformBrowserDynamic()\n\t\t.bootstrapModule(AppModule, { ngZoneEventCoalescing: true })\n\t\t.catch((err) => console.error(err));\n}, 1500);\n"]}
\ No newline at end of file
diff --git a/docs/main.79d8e1ce6e46de39.js b/docs/main.79d8e1ce6e46de39.js
new file mode 100644
index 00000000..71f0d38a
--- /dev/null
+++ b/docs/main.79d8e1ce6e46de39.js
@@ -0,0 +1,2 @@
+"use strict";(self.webpackChunkaccordion_sample=self.webpackChunkaccordion_sample||[]).push([["main"],{8198:(g,O,d)=>{var h=d(4497),t=d(3210),Z=d(9906),B=d(5802),S=d(745),R=d(6099);const v={id:"Accord_1",name:"Accordion 1",items:[{title:"Accordion Card 1",body:"[[TMPL]]"},{title:"Accordion Card 2",body:'\n\t\t\t<a href="//github.com/ngx-dummy/accordion-simple">Project Repository</a>\n\t\t\t<br />\n\t\t\tSimple 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.'},{title:"Accordion simple Card 3 x 11",body:"\n\t\t\t\t<p>Para1 </p>\n\t\t\t\t<h4> Heading </h4>\n\t\t\t\t<script type='text/javascript'>alert('Injection !');<\/script>\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n      "}]},y={id:"Accord_2",name:"Accordion 2",items:[{id:"item0",title:"Card ",body:"Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione"},{id:"item1",title:"Card 1",body:"\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n      "},{id:"item2",title:"Card 2",body:"\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n      "},{id:"item3",title:"Card 3",body:"\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n      "},{id:"item4",title:"Card 4",body:"\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n      "},{id:"item5",title:"Long Card 5",body:"\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n      "}]};var a=d(4851);const F=(0,a.X$)("moveIn",[(0,a.eR)(":enter",[(0,a.oB)({opacity:0,transform:"translateY(-3rem)"}),(0,a.jt)("1s ease-in-out",(0,a.F4)([(0,a.oB)({offset:.2,opacity:.1,transform:"translateY(-1rem)"}),(0,a.oB)({offset:.6,opacity:.4,transform:"translateY(-0.1rem)"}),(0,a.oB)({offset:1,opacity:1,transform:"none"})]))])]);var A=d(116),q=d(635),V=d(6317);const E=new t.OlP("Accordion Initial Items Open state provider token",{factory:function N(){return[]}});let C=(()=>{class e extends V.X{constructor(i=[]){super(i),this.setItemsOpen=o=>this.next(o),this.close=()=>{this.complete(),super.unsubscribe()}}get itemsOpen$(){return this.asObservable()}get itemsOpenSnapshot(){return this.value}}return e.\u0275fac=function(i){return new(i||e)(t.LFG(E))},e.\u0275prov=t.Yz7({token:e,factory:e.\u0275fac}),e})();const M={accordItemsIn:(0,a.X$)("accordItemsIn",[(0,a.eR)("* => *",[(0,a.IO)(":leave",[(0,a.EY)(-25,[(0,a.jt)(".3s",(0,a.oB)({opacity:0,transform:"scale(0.7, 0.7) translateY(-3rem)"}))])],{optional:!0}),(0,a.IO)(":enter",[(0,a.oB)({opacity:0,transform:"scale(0.7, 0.7) translateY(-3rem)"}),(0,a.EY)(25,[(0,a.jt)(".3s ease-out",(0,a.F4)([(0,a.oB)({offset:0,opacity:0}),(0,a.oB)({offset:.2,opacity:.1,transform:"scale(0.85, 0.85) translateY(-4rem)"}),(0,a.oB)({offset:.5,opacity:.8,transform:"scale(0.9, 0.9) translateY(3rem)"}),(0,a.oB)({offset:1,opacity:1,transform:"none"})]))])],{optional:!0})])]),spinnerIn:(0,a.X$)("spinnerIn",[(0,a.eR)("void => *",[(0,a.IO)(".loader",(0,a.jt)(".5s ease-out",(0,a.F4)([(0,a.oB)({offset:0,opacity:0,transformOrigin:"bottom right",height:0,transform:"translateY(-100px) scale(0, 0)"}),(0,a.oB)({offset:.8,opacity:.6,height:0,transform:"translateY(40px) scale(0.5, 0.5)"}),(0,a.oB)({offset:1,opacity:1,height:"*",transform:"translateY(0) scale(1, 1)"})])),{optional:!0})])])},D={accordionItemBodyHeightCollapse:(0,a.X$)("openClose",[(0,a.SB)("closed",(0,a.oB)({height:"0",opacity:"0",visibility:"collapse"})),(0,a.SB)("opened",(0,a.oB)({height:"*",opacity:"1",visibility:"visible"})),(0,a.eR)("opened <=> closed",(0,a.jt)(".3s ease-out"))])},z=({itemId:e,isOpen:n,...i})=>({itemId:e,isOpen:n}),H=e=>e.filter(n=>!0===n.isOpen).map(n=>n.itemId).join(",");var p=d(4666);const I=(e,n)=>!!e&&n.sanitize(t.q3G.HTML,e),T=(e,n)=>((e,n)=>n.bypassSecurityTrustResourceUrl(e))((e=>"data:image/svg+xml;base64,"+btoa(e))(e),n),P=e=>!!e&&"string"!=typeof e&&!!e.itemTemplate,$=(e,n)=>P(e)?e.itemTemplate:n,j=e=>P(e)&&"string"==typeof e.itemBody?e.itemBody:e,Q=console.log;var u=(()=>{return(e=u||(u={})).LOGO="accord-item__header--start-img",e.ENDING="accord-item__header--end-img",u;var e})(),_=(()=>{return(e=_||(_={})).SUCCESS="img-loaded__success",e.ALTER="img-load__alter",_;var e})();let W=(()=>{class e{constructor(i,o,r,s){this.el=i,this.renderer=o,this.zone=r,this.sanitizer=s,this._baseLogoImg=T('<svg width="50" height="50" viewBox="0 0 50 50" fill="white" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 0C2.23858 0 0 2.23858 0 5V45C0 47.7614 2.23858 50 5 50H45C47.7614 50 50 47.7614 50 45V5C50 2.23858 47.7614 0 45 0H5ZM11 10C10.4477 10 10 10.4477 10 11V15C10 15.5523 10.4477 16 11 16H39C39.5523 16 40 15.5523 40 15V11C40 10.4477 39.5523 10 39 10H11ZM10 23C10 22.4477 10.4477 22 11 22H39C39.5523 22 40 22.4477 40 23V27C40 27.5523 39.5523 28 39 28H11C10.4477 28 10 27.5523 10 27V23ZM11 34C10.4477 34 10 34.4477 10 35V39C10 39.5523 10.4477 40 11 40H32C32.5523 40 33 39.5523 33 39V35C33 34.4477 32.5523 34 32 34H11Z"/></svg>',this.sanitizer),this._baseChevronImg=T('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="48px" height="48px"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/><path d="M0 0h24v24H0V0z" fill="none"/></svg>',this.sanitizer),this._isSet=!1,this._needToRecheck=!1,this.onLoad=({target:c,...l})=>this._setLoadSuccess(c),this.onError=({target:c,...l})=>{if(this._setLoadAlter(c),c.classList.contains(u.LOGO))this._setItemHeaderImgSafeSrc(this._baseLogoImg);else{if(!c.classList.contains(u.ENDING))return Q("Not an Accordion Item header image");this._setItemHeaderImgSafeSrc(this._baseChevronImg)}},this._doOpenCloseSrcRecheck=()=>{this.zone.runOutsideAngular(()=>{this._src=this._nativeImgEl?.classList.contains("open")?this._closeSign:this._openSign})},this._setItemHeaderImgSrc=(c,l)=>this.renderer.setAttribute(c,"src",l),this._setItemHeaderImgSafeSrc=c=>(this._src=c,this._setNoRecheck()),this._readElDataSet=c=>this._nativeImgEl?.dataset[c],this._setLoadSuccess=c=>{c.classList.add(_.SUCCESS),this._isSet=!0},this._setLoadAlter=c=>{c.classList.add(_.ALTER),this._setNoRecheck()},this._isImgOpenClose=()=>!!(this._closeSign&&this._closeSign.length&&this._openSign&&this._openSign.length),this._isLogoImg=()=>this._nativeImgEl?.classList.contains(u.LOGO),this._isCloserImg=()=>this._nativeImgEl?.classList.contains(u.ENDING),this._setNoRecheck=()=>{this._isSet=!0,this._needToRecheck=!1}}get src(){return this._src}ngAfterViewInit(){this._nativeImgEl=this.el.nativeElement}ngAfterContentChecked(){if(!this._isSet||this._needToRecheck){if(this._isSet&&this._needToRecheck)return this._doOpenCloseSrcRecheck();if(this._isLogoImg())return this._setItemHeaderImgSafeSrc(this._readElDataSet("src")||this._baseLogoImg);if(this._isCloserImg())return this._openSign=this._readElDataSet("opensrc")??void 0,this._closeSign=this._readElDataSet("closesrc")??void 0,this._isImgOpenClose()?(this._openSign!==this._closeSign&&(this._needToRecheck=!0),void(this._isSet=!0)):this._setItemHeaderImgSafeSrc(this._baseChevronImg)}}}return e.\u0275fac=function(i){return new(i||e)(t.Y36(t.SBq),t.Y36(t.Qsj),t.Y36(t.R0b),t.Y36(h.H7))},e.\u0275dir=t.lG2({type:e,selectors:[["",8,"accord-item__header-img"]],hostVars:2,hostBindings:function(i,o){1&i&&t.NdJ("load",function(s){return o.onLoad(s)})("error",function(s){return o.onError(s)}),2&i&&t.uIk("loading","lazy")("src",o.src,t.P3R)}}),e})();function X(e,n){1&e&&t.GkF(0)}function K(e,n){1&e&&t.GkF(0)}function tt(e,n){1&e&&t.GkF(0)}const x=function(e){return{$implicit:e}};function et(e,n){if(1&e){const i=t.EpF();t.TgZ(0,"article",4)(1,"header",5),t.YNc(2,K,1,0,"ng-container",0),t.qZA(),t.TgZ(3,"section",6),t.NdJ("@openClose.start",function(r){return t.CHM(i),t.oxw().startAnim(r)})("@openClose.done",function(r){return t.CHM(i),t.oxw().doneAnim(r)}),t.YNc(4,tt,1,0,"ng-container",0),t.qZA()()}if(2&e){const i=n.$implicit,o=t.oxw(),r=t.MAs(5),s=t.MAs(7);t.xp6(1),t.ekj("opened",i),t.xp6(1),t.Q6J("ngTemplateOutlet",r)("ngTemplateOutletContext",t.VKq(7,x,i)),t.xp6(1),t.Q6J("@openClose",i?"opened":"closed"),t.xp6(1),t.Q6J("ngTemplateOutlet",o.getItemBodyTemplate(o.item.body,s))("ngTemplateOutletContext",t.VKq(9,x,o.getItemBodyCtx(o.item.body)))}}function it(e,n){if(1&e&&(t.TgZ(0,"span"),t._uU(1),t.qZA()),2&e){const i=t.oxw(2);t.xp6(1),t.hij("",i.item.itemNum,".")}}const ot=function(e,n){return{open:e,close:n}};function nt(e,n){if(1&e&&(t.TgZ(0,"div",7)(1,"span",8),t._UZ(2,"img",9),t.YNc(3,it,2,1,"span",10),t.qZA()(),t.TgZ(4,"div",11),t._uU(5),t.qZA(),t.TgZ(6,"div",12)(7,"span",13),t._UZ(8,"img",14),t.qZA()()),2&e){const i=n.$implicit,o=t.oxw();t.xp6(3),t.Q6J("ngIf",o.item.itemNum),t.xp6(2),t.hij(" ",o.item.title," "),t.xp6(2),t.ekj("active",i),t.xp6(1),t.Q6J("ngClass",t.WLB(5,ot,i,!i))}}function st(e,n){1&e&&(t._uU(0),t.Hsn(1)),2&e&&t.hij(" ",n.$implicit," ")}const rt=[[["",8,"accord-item__footer"]]],at=[".accord-item__footer"];let w=(()=>{class e{constructor(){this.getItemBodyCtx=j,this.getItemBodyTemplate=$,this.isOpen$=(0,S.of)(!1)}startAnim(i){i.element.style.willChange="height, opacity, visibility";const o=i.element.classList;"void"===i.fromState&&o?.add("closed"),"closed"===i.fromState&&"opened"===i.toState&&o.replace("closed","opened")}doneAnim(i){i.element.style.willChange="auto","opened"==i.fromState&&"closed"==i.toState&&i.element.classList.replace("opened","closed")}}return e.\u0275fac=function(i){return new(i||e)},e.\u0275cmp=t.Xpm({type:e,selectors:[["ngxd-accordion-item"]],ngContentSelectors:at,decls:8,vars:6,consts:[[4,"ngTemplateOutlet","ngTemplateOutletContext"],["itemTpl",""],["headerDefaultTmpl",""],["bodyDefaultTmpl",""],[1,"accord-item"],[1,"accord-item__header"],[1,"accord-item__body","closed"],[1,"header--control","accord-item__logo"],[1,"accord-item__header--start"],[1,"accord-item__header-img","accord-item__header--start-img"],[4,"ngIf"],[1,"header--control","accord-item__title"],[1,"header--control","accord-item__collapse"],[1,"accord-item__header--end"],[1,"accord-item__header-img","accord-item__header--end-img",3,"ngClass"]],template:function(i,o){if(1&i&&(t.F$t(rt),t.YNc(0,X,1,0,"ng-container",0),t.ALo(1,"async"),t.YNc(2,et,5,11,"ng-template",null,1,t.W1O),t.YNc(4,nt,9,8,"ng-template",null,2,t.W1O),t.YNc(6,st,2,1,"ng-template",null,3,t.W1O)),2&i){const r=t.MAs(3);t.Q6J("ngTemplateOutlet",r)("ngTemplateOutletContext",t.VKq(4,x,t.lcZ(1,2,o.isOpen$)))}},directives:[p.tP,W,p.O5,p.mk],pipes:[p.Ov],styles:["[_nghost-%COMP%]{--color-white: #fff;--ngxd-head-item-color: #056;--ngxd-head-item-color--active: #0095b3;--ngxd-head-item-color--opened: #002b33}.accord-item[_ngcontent-%COMP%]{display:block;box-sizing:border-box;min-width:10rem;min-height:1rem;overflow:hidden}.accord-item[_ngcontent-%COMP%]   .accord-item__header[_ngcontent-%COMP%]{display:flex;position:relative;flex-direction:row;min-height:1rem;max-height:50px;overflow:visible;transition:.6s ease;background-color:var(--ngxd-head-item-color);color:var(--color-white);-webkit-user-select:none;-moz-user-select:none;user-select:none}.accord-item[_ngcontent-%COMP%]   .accord-item__header[_ngcontent-%COMP%]:hover, .accord-item[_ngcontent-%COMP%]   .accord-item__header[_ngcontent-%COMP%]:active{background-color:var(--ngxd-head-item-color--active)!important;cursor:pointer}.accord-item[_ngcontent-%COMP%]   .accord-item__header.opened[_ngcontent-%COMP%]{background-color:var(--ngxd-head-item-color--opened)!important}.accord-item[_ngcontent-%COMP%]   .accord-item__header[_ngcontent-%COMP%]   .accord-item__header--btn[_ngcontent-%COMP%]{max-width:2rem;border:none;background:transparent;font-size:x-large;text-align:center;vertical-align:middle}.accord-item[_ngcontent-%COMP%]   .accord-item__header[_ngcontent-%COMP%]   .accord-item__collapse--btn[_ngcontent-%COMP%]{padding-right:1px}.accord-item[_ngcontent-%COMP%]   .accord-item__header[_ngcontent-%COMP%]   .accord-item__header--start[_ngcontent-%COMP%], .accord-item[_ngcontent-%COMP%]   .accord-item__header[_ngcontent-%COMP%]   .accord-item__header--end[_ngcontent-%COMP%]{display:flex;flex:0 0 1rem;align-items:center;justify-content:center;max-width:1.5rem;padding-left:1px}.accord-item[_ngcontent-%COMP%]   .accord-item__header[_ngcontent-%COMP%]   .accord-item__header--start[_ngcontent-%COMP%]   .accord-item__header--start-img[_ngcontent-%COMP%], .accord-item[_ngcontent-%COMP%]   .accord-item__header[_ngcontent-%COMP%]   .accord-item__header--end[_ngcontent-%COMP%]   .accord-item__header--start-img[_ngcontent-%COMP%]{max-width:1rem;margin-right:.5rem}.accord-item[_ngcontent-%COMP%]   .accord-item__header[_ngcontent-%COMP%]   .accord-item__header--start[_ngcontent-%COMP%] > img[_ngcontent-%COMP%], .accord-item[_ngcontent-%COMP%]   .accord-item__header[_ngcontent-%COMP%]   .accord-item__header--end[_ngcontent-%COMP%] > img[_ngcontent-%COMP%]{max-width:1.5rem}.accord-item[_ngcontent-%COMP%]   .accord-item__header[_ngcontent-%COMP%]   .accord-item__header--end[_ngcontent-%COMP%]{padding-right:1px;padding-left:0;will-change:transform}.accord-item[_ngcontent-%COMP%]   .accord-item__header[_ngcontent-%COMP%]   .accord-item__header--end.active[_ngcontent-%COMP%]{transform:rotate(180deg);transition:transform .3s ease-out}.accord-item[_ngcontent-%COMP%]   .accord-item__header[_ngcontent-%COMP%]   .accord-item__header--end[_ngcontent-%COMP%]:not(.active){transform:rotate(0);transition:transform .3s ease-out}.accord-item[_ngcontent-%COMP%]   .accord-item__header[_ngcontent-%COMP%]   .header--control[_ngcontent-%COMP%]{display:flex;align-items:center;margin:.1rem;padding:1rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:pan-y}.accord-item[_ngcontent-%COMP%]   .accord-item__header[_ngcontent-%COMP%]   .accord-item__title[_ngcontent-%COMP%]{flex:1 1 100%;font-size:14px;text-align:center}.accord-item[_ngcontent-%COMP%]   .accord-item__header[_ngcontent-%COMP%]   .accord-item__collapse[_ngcontent-%COMP%]{flex:0 0 1rem}.accord-item[_ngcontent-%COMP%]   .accord-item__body[_ngcontent-%COMP%]{touch-action:pinch-zoom pan-y;transform-origin:top;-webkit-user-select:text;-moz-user-select:text;user-select:text}.accord-item[_ngcontent-%COMP%]   .accord-item__body.closed[_ngcontent-%COMP%]{position:absolute}"],data:{animation:[D.accordionItemBodyHeightCollapse]},changeDetection:0}),e})();var ct=d(253),dt=d(8951),lt=d(4276),mt=d(9337);let pt=(()=>{class e{constructor(i,o,r,s,c,l){this.hostCmp=i,this.hostElRef=o,this.itemStatusSvc=r,this.render=s,this.sanitizer=c,this.cd=l,this.itemStyles={headHeight:"50px",headBgColor:"#ccc",headColor:"#fff",bodyBgColor:"#fff",bodyColor:"#000",fontSize:"10px",bodyPadding:"0"},this.bodyDblclkClose=!1,this.isNumbered=!1,this.toggled=new t.vpe,this.isOpen=!1,this.hostDestroy$$=new ct.x,this.onClick=([{outerHTML:m},{dataset:f}])=>m&&f&&m.includes("header")?this._handleClick({...f}):void 0,this.onDblClick=([{outerHTML:m},{dataset:f}])=>m&&this.bodyDblclkClose&&m.includes("accord-item__body")?this._handleClick({...f}):void 0,this._handleClick=({idx:m,...f}={idx:-1})=>this._toggle(+m),this._toggle=m=>this.toggled.emit({itemId:m,isOpen:!this.isOpen})}ngOnInit(){this.hostCmp.item={...this.item,body:"string"==typeof this.item.body?I(this.item.body,this.sanitizer):{itemTemplate:this.item.body?.itemTemplate,itemBody:I(this.item.body?.itemBody,this.sanitizer)},itemNum:this.isNumbered?+this.item.itemId+1:null},this.hostCmp.isOpen$=this.itemStatusSvc.itemsOpen$.pipe((0,dt.R)(this.hostDestroy$$),(0,A.h)(i=>!!i&&!!i.length),(0,q.U)(i=>i.find(({itemId:o})=>o===+this.item.itemId)),(0,lt.j)("isOpen"),(0,mt.b)((i=!1)=>this.isOpen=i))}ngAfterViewInit(){const i=this.hostElRef.nativeElement,o=i.getElementsByClassName("accord-item").item(0),r=i.getElementsByClassName("accord-item__header").item(0),s=i.getElementsByClassName("accord-item__body").item(0);{const c=r.getElementsByClassName("accord-item__header--start-img").item(0),l=r.getElementsByClassName("accord-item__header--end-img").item(0);this.logo&&this.render.setAttribute(c,"data-src",this.logo),this.openSign&&this.render.setAttribute(l,"data-opensrc",this.openSign),this.closeSign&&this.render.setAttribute(l,"data-closesrc",this.closeSign),this.cd.detectChanges()}this.render.setStyle(o,"margin",this.itemStyles.margin??"0"),this.render.setStyle(o,"padding",this.itemStyles.padding??"0"),this.itemStyles.font&&this.render.setStyle(o,"font",this.itemStyles.font),this.itemStyles.fontSize&&this.render.setStyle(o,"font-size",this.itemStyles.fontSize),this.itemStyles.fontStyle&&this.render.setStyle(o,"font-style",this.itemStyles.fontStyle),this.itemStyles.fontFamily&&this.render.setStyle(o,"font-family",this.itemStyles.fontFamily),this.render.setStyle(o,"margin-bottom",this.itemStyles.marginBottom),this.render.setStyle(o,"margin-top",this.itemStyles.marginTop),this.itemStyles.headBgColor&&i.style.setProperty("--ngxd-head-item-color",this.itemStyles.headBgColor),this.itemStyles.headHeight&&this.render.setStyle(r,"height",this.itemStyles.headHeight),this.itemStyles.headFont&&this.render.setStyle(r,"font",this.itemStyles.headFont),this.render.setStyle(r,"font-size",this.itemStyles.headFontSize??"1.1rem"),this.render.setStyle(r,"color",this.itemStyles.headColor??"#ccc"),this.render.setStyle(s,"background-color",this.itemStyles.bodyBgColor??"rgba(200, 200, 200, 0.2)"),this.render.setStyle(s,"color",this.itemStyles.bodyColor??"#000"),this.render.setStyle(s,"padding",this.itemStyles.bodyPadding??".1rem"),this.render.setStyle(s,"margin",this.itemStyles.bodyMargin??"0"),this.itemStyles.bodyFont&&this.render.setStyle(s,"font",this.itemStyles.bodyFont),this.render.setStyle(s,"font-size",this.itemStyles.bodyFontSize??"1rem"),this.itemStyles.bodyTextAlign&&this.render.setStyle(s,"text-align",this.itemStyles.bodyTextAlign),this.render.setStyle(s,"cursor",this.bodyDblclkClose?"grab":"default")}ngOnDestroy(){this.hostDestroy$$.next(),this.hostDestroy$$.complete()}}return e.\u0275fac=function(i){return new(i||e)(t.Y36(w),t.Y36(t.SBq),t.Y36(C,1),t.Y36(t.Qsj),t.Y36(h.H7),t.Y36(t.sBO))},e.\u0275dir=t.lG2({type:e,selectors:[["","ngxdAccordionItem",""]],hostVars:2,hostBindings:function(i,o){1&i&&t.NdJ("dblclick",function(s){return o.onDblClick([s.target,s.currentTarget])})("click",function(s){return o.onClick([s.target,s.currentTarget])}),2&i&&t.ekj("opened",o.isOpen)},inputs:{item:["ngxdAccordionItem","item"],itemStyles:["styling","itemStyles"],logo:"logo",openSign:"openSign",closeSign:"closeSign",bodyDblclkClose:"bodyDblclkClose",isNumbered:"isNumbered"},outputs:{toggled:"toggled"}}),e})();const ut=["defloadingTpl"];function gt(e,n){1&e&&t.GkF(0)}const ht=function(e){return{$implicit:e}};function _t(e,n){if(1&e&&t.GkF(0,6),2&e){const i=n.$implicit;t.oxw(2);const o=t.MAs(5);t.Q6J("ngTemplateOutlet",o)("ngTemplateOutletContext",t.VKq(2,ht,i))}}function ft(e,n){if(1&e&&t.YNc(0,_t,1,4,"ng-container",5),2&e){const i=t.oxw();t.Q6J("ngForOf",i.accordionItems)("ngForTrackBy",i.trackByFn)}}function vt(e,n){if(1&e){const i=t.EpF();t.TgZ(0,"ngxd-accordion-item",7),t.NdJ("toggled",function(r){return t.CHM(i),t.oxw().onItemToggled(r)}),t.qZA()}if(2&e){const i=n.$implicit,o=t.oxw();t.Q6J("ngxdAccordionItem",i)("isNumbered",o._isNumbered)("bodyDblclkClose",o._bodyDblclkClose)("openSign",o.openSign)("closeSign",o.closeSign)("logo",o.listLogo)("styling",o._itemStyle)("id",i.id)("@accordItemsIn",void 0),t.uIk("data-idx",i.itemId)}}function yt(e,n){1&e&&(t.TgZ(0,"div",8),t.O4$(),t.TgZ(1,"svg",9)(2,"rect",10),t._UZ(3,"animate",11)(4,"animate",12),t.qZA(),t.TgZ(5,"rect",13),t._UZ(6,"animate",14)(7,"animate",15),t.qZA(),t.TgZ(8,"rect",16),t._UZ(9,"animate",17)(10,"animate",18),t.qZA()()()),2&e&&t.Q6J("@spinnerIn",void 0)}let k=(()=>{class e{constructor(i,o,r){this.itemsOpenSvc=i,this.hostEl=o,this.renderer=r,this.accordionStyling={numberedItems:!1,isMultiShow:!1,bodyDblclkCloseItems:!1,maxWidth:"100%",itemsGuts:"1rem",margin:"0",itemStyling:{headBgColor:"#4197b2",headColor:"#fff",bodyBgColor:"#fff",bodyColor:"#000",margin:"0",padding:"0"}},this._bodyDblclkClose=!1,this._isNumbered=!1,this.multiSelect=!1,this.onItemToggled=({itemId:s,isOpen:c}={itemId:0,isOpen:!1})=>this.itemsOpenSvc.setItemsOpen(this.itemsOpenSvc.itemsOpenSnapshot.map(({itemId:l,isOpen:m})=>l===+s?{itemId:s,isOpen:c}:{itemId:l,isOpen:!!this.multiSelect&&m})),this.closeAll=()=>this.accordionItems?.forEach(({itemId:s,...c})=>this.onItemToggled({itemId:s,isOpen:!1})),this.trackByFn=(s,{itemId:c,...l})=>+c}get id(){return`${this.attributes.id}`}get name(){return this.attributes.name}set accordionList(i){let[o,r]=[!!i&&!!i.name?.length&&i.name||"Sample-Accordion",!!i&&!!i.id&&i.id||"accordion_"+ ++e.idx];this._accord=Object.assign({id:r,name:o},{items:i?.items.map((s,c)=>({...s,id:s.id&&"string"==typeof s.id?s.id:`${r}__accord-item_${c}`,itemId:c}))})}get accordionItems(){return this._accord?.items}set loadingTpl(i){this._loadingTpl=i||this.defloadingTpl}get loadingTpl(){return this._loadingTpl??this.defloadingTpl}ngOnInit(){this._bodyDblclkClose=!!this.accordionStyling.bodyDblclkCloseItems,this.multiSelect=!!this.accordionStyling.isMultiShow,this.itemsOpenSvc.itemsOpen$.pipe((0,A.h)(s=>!!s?.length),(0,q.U)(H)).subscribe(s=>this._openedItems=s),this._isNumbered=this.accordionStyling.numberedItems??!1,this._bodyDblclkClose=this.accordionStyling.bodyDblclkCloseItems??!1;let i=Array.isArray(this.accordionStyling.itemStyling)?this.accordionStyling.itemStyling.reduce((s={},c)=>({...s,...c})):{...this.accordionStyling.itemStyling};const o=this.accordionStyling.itemsGuts??0;i={padding:"0",marginBottom:o,marginTop:o,...i},this._itemStyle=Object.entries(i).map(([s,c])=>({[s]:"number"==typeof c?`${c}px`:c})).reduce((s,c)=>({...s,...c}));const r=this.hostEl.nativeElement;this.renderer.setStyle(r,"max-width",this.accordionStyling.maxWidth??"100%"),this.renderer.setStyle(r,"margin",this.accordionStyling.margin??"0")}ngOnChanges(i){Object.keys(i).forEach(o=>{"accordionList"===o&&i[o].previousValue!==i[o].currentValue&&this.itemsOpenSvc.setItemsOpen(this.accordionItems?.map(z))})}ngOnDestroy(){this.itemsOpenSvc.close()}get attributes(){const{id:i,name:o}=this._accord;return{id:i,name:o}}}return e.idx=0,e.\u0275fac=function(i){return new(i||e)(t.Y36(C,2),t.Y36(t.SBq),t.Y36(t.Qsj))},e.\u0275cmp=t.Xpm({type:e,selectors:[["ngxd-accordion"]],viewQuery:function(i,o){if(1&i&&t.Gf(ut,7,t.Rgc),2&i){let r;t.iGM(r=t.CRH())&&(o.defloadingTpl=r.first)}},hostVars:3,hostBindings:function(i,o){2&i&&t.uIk("data-items-opened",o._openedItems)("id",o.id)("name",o.name)},inputs:{accordionList:"accordionList",openSign:"openSign",closeSign:"closeSign",listLogo:"listLogo",accordionStyling:"accordionStyling",loadingTpl:"loadingTpl"},exportAs:["ngxdAccordion"],features:[t._Bn([],[C]),t.TTD],decls:8,vars:3,consts:[[1,"accordion"],[4,"ngIf","ngIfThen","ngIfElse"],["itemsTmpl",""],["accordItemTmpl",""],["defloadingTpl",""],[3,"ngTemplateOutlet","ngTemplateOutletContext",4,"ngFor","ngForOf","ngForTrackBy"],[3,"ngTemplateOutlet","ngTemplateOutletContext"],[3,"ngxdAccordionItem","isNumbered","bodyDblclkClose","openSign","closeSign","logo","styling","id","toggled"],[1,"accordion-default-loader--tmpl"],["width","51px","height","50px","viewBox","0 0 51 50"],["y","0","width","13","height","50"],["attributeName","height","values","50;10;50","begin","0s","dur","1s","repeatCount","indefinite"],["attributeName","y","values","0;20;0","begin","0s","dur","1s","repeatCount","indefinite"],["x","19","y","0","width","13","height","50"],["attributeName","height","values","50;10;50","begin","0.2s","dur","1s","repeatCount","indefinite"],["attributeName","y","values","0;20;0","begin","0.2s","dur","1s","repeatCount","indefinite"],["x","38","y","0","width","13","height","50"],["attributeName","height","values","50;10;50","begin","0.4s","dur","1s","repeatCount","indefinite"],["attributeName","y","values","0;20;0","begin","0.4s","dur","1s","repeatCount","indefinite"]],template:function(i,o){if(1&i&&(t.TgZ(0,"div",0),t.YNc(1,gt,1,0,"ng-container",1),t.qZA(),t.YNc(2,ft,1,2,"ng-template",null,2,t.W1O),t.YNc(4,vt,1,10,"ng-template",null,3,t.W1O),t.YNc(6,yt,11,1,"ng-template",null,4,t.W1O)),2&i){const r=t.MAs(3);t.xp6(1),t.Q6J("ngIf",!!o.accordionItems)("ngIfThen",r)("ngIfElse",o.loadingTpl)}},directives:[p.O5,p.sg,p.tP,w,pt],styles:["[_nghost-%COMP%]{margin:auto}[_nghost-%COMP%]   .accordion[_ngcontent-%COMP%]{display:flex;flex-direction:column;overflow:hidden;vertical-align:middle}[_nghost-%COMP%]   .accordion-horizontal-menu[_ngcontent-%COMP%]{display:flex;flex-direction:row;width:100%;vertical-align:middle}[_nghost-%COMP%]   .accordion-horizontal-menu[_ngcontent-%COMP%]   ngxd-accordion-item[_ngcontent-%COMP%]{flex:1 1 auto}@media screen and (max-width: 720px){.accordion-horizontal-menu[_ngcontent-%COMP%]{flex-wrap:wrap}}",".accordion-default-loader--tmpl[_ngcontent-%COMP%] {\n\t\t\tdisplay: block;\n\t\t\tborder-radius: 50%;\n\t\t\tbackground-color: transparent;\n\t\t\tmin-height: 50px;\n\t\t\tmin-width: 50px;\n\t\t}\n\t\t.accordion-default-loader--tmpl[_ngcontent-%COMP%]    > svg[_ngcontent-%COMP%] {\n\t\t\tfill: var(--dark-bg);\n\t\t\ttransform: rotate(90deg);\n\t\t}\n\t\t.accordion-default-loader--tmpl[_ngcontent-%COMP%]    > svg[_ngcontent-%COMP%]   rect[_ngcontent-%COMP%]:first-of-type {\n\t\t\tfill: var(--darker-color);\n\t\t}\n\t\t.accordion-default-loader--tmpl[_ngcontent-%COMP%]    > svg[_ngcontent-%COMP%]   rect[_ngcontent-%COMP%]:nth-of-type(2) {\n\t\t\tfill: var(--accent-color);\n\t\t}\n\t\t.accordion-default-loader--tmpl[_ngcontent-%COMP%]    > svg[_ngcontent-%COMP%]   rect[_ngcontent-%COMP%]:nth-of-type(3) {\n\t\t\tfill: var(--dark-blue-color);\n\t\t}"],data:{animation:[M.accordItemsIn,M.spinnerIn]},changeDetection:0}),e})();const Ct=["simpleBodyTmpl"],bt=["tmpl2"];function xt(e,n){1&e&&(t.TgZ(0,"div",16)(1,"span",17),t._UZ(2,"span",18),t.qZA()()),2&e&&t.Q6J("@moveIn",void 0)}function Ot(e,n){if(1&e&&(t.ynx(0,19),t.TgZ(1,"div",20)(2,"div",21)(3,"h6",22),t._uU(4,"Custom templated Item sample"),t.qZA()(),t.TgZ(5,"div",23)(6,"div",24)(7,"div",25)(8,"div",26)(9,"h3",27),t._uU(10,"by Vladimir Ovsyukov"),t.qZA(),t.TgZ(11,"h6",28),t._uU(12,"https://github.com/VovanSuper"),t.qZA()()()(),t._UZ(13,"div",29),t.qZA(),t.TgZ(14,"div",30)(15,"div",31)(16,"button",32),t._UZ(17,"span",6),t.TgZ(18,"span",33),t._uU(19,"description"),t.qZA(),t._uU(20," Docs "),t.qZA(),t.TgZ(21,"button",34),t._UZ(22,"span",6),t.TgZ(23,"span",33),t._uU(24,"thumb_up_alt"),t.qZA(),t._uU(25," Follow "),t.qZA()(),t.TgZ(26,"div",35)(27,"button",36)(28,"i",37),t._uU(29,"favorite"),t.qZA()(),t.TgZ(30,"button",38),t._uU(31," share "),t.qZA()()()(),t.BQk()),2&e){const i=n.$implicit;t.xp6(13),t.Q6J("innerHTML",i,t.oJD)}}function St(e,n){if(1&e&&(t.TgZ(0,"div",39)(1,"div",40)(2,"div",41),t._uU(3," Sample Accordion Item (alike one of materializecss) "),t.qZA()(),t.TgZ(4,"div",40)(5,"div",42)(6,"div",40)(7,"div",43)(8,"div",44)(9,"div",45),t._UZ(10,"img",46),t.TgZ(11,"span",47),t._uU(12,"Simple material template Card"),t.qZA(),t.TgZ(13,"a",48)(14,"i",33),t._uU(15,"share"),t.qZA()()(),t.TgZ(16,"div",49)(17,"p"),t._uU(18),t.qZA()()()()()()()()),2&e){const i=n.$implicit;t.xp6(18),t.Oqu(i)}}let L=(()=>{class e{constructor(){this.title="Accordion Sample",this.accordList2=null,this.accordList$=(0,S.of)(y).pipe((0,B.g)(3e3)),this.styling={itemsGuts:".1rem",maxWidth:"99%",margin:".1rem",numberedItems:!0,itemStyling:{headBgColor:"#89a",headColor:"#fff",margin:".1rem",bodyPadding:"1rem",bodyMargin:1}},this.styling1={...this.styling,itemsGuts:0,numberedItems:!1,margin:"0 auto",isMultiShow:!0,maxWidth:"94%",bodyDblclkCloseItems:!0,itemStyling:{...this.styling.itemStyling,headBgColor:"darkcyan",headColor:"yellow",bodyColor:"#aaffff",bodyBgColor:"#87a3d1",font:"Comic Sans MS",bodyPadding:1,bodyMargin:0,bodyTextAlign:"left",margin:0}}}ngOnInit(){this.accordList2={...v,items:[...v.items.map(i=>i.title.includes("Accordion Card 2")?{...i,body:{itemTemplate:this.simpleBodyTmpl,itemBody:i.body}}:{...i}).map(i=>i.title.includes("Accordion Card 1")?{...i,body:{itemTemplate:this.tmpl2,itemBody:"Lorem ipsum card ..."}}:{...i})]}}ngAfterViewInit(){const i=document.querySelector(".mdc-button"),o=new R.F(i);return()=>o.destroy()}}return e.\u0275fac=function(i){return new(i||e)},e.\u0275cmp=t.Xpm({type:e,selectors:[["app-root"]],viewQuery:function(i,o){if(1&i&&(t.Gf(Ct,7),t.Gf(bt,7)),2&i){let r;t.iGM(r=t.CRH())&&(o.simpleBodyTmpl=r.first),t.iGM(r=t.CRH())&&(o.tmpl2=r.first)}},decls:26,vars:8,consts:[[1,"mdc-layout-grid"],[1,"mdc-layout-grid__inner","mb-1"],[1,"mdc-layout-grid__cell","mdc-layout-grid__cell--span-6","mdc-layout-grid__cell--span-12-phone","mdc-layout-grid__cell--span-12-tablet","align"],[1,"text-center","app-title"],[1,"mdc-touch-target-wrapper"],[1,"mdc-button","mdc-button--touch","light-bg",3,"click"],[1,"mdc-button__ripple"],[1,"mdc-layout-grid__cell","mdc-layout-grid__cell--span-12"],["openSign","plus.png","closeSign","minus.png",3,"accordionList","accordionStyling"],["acc1","ngxdAccordion"],[1,"mdc-layout-grid__inner"],["listLogo","list_white_48dp.png",3,"loadingTpl","accordionList","accordionStyling"],["acc2","ngxdAccordion"],["simpleLoader",""],["simpleBodyTmpl",""],["tmpl2",""],[1,"container-transparent"],[1,"loader"],[1,"loader-inner"],["ngProjectAs","tmpl-item-card__container",5,["tmpl-item-card__container"]],[1,"mdc-card","tmpl-item-container"],[1,"tmpl-header"],[1,"mdc-typography","mdc-typography--headline6","head6"],["tabindex","0",1,"mdc-card__primary-action"],["onclick","location.href='//twitter.com/intent/tweet?ref_src=twsrc%5Etfw&original_referer=https%3A%2F%2Fngx-dummy.github.io%2Faccordion-simple%2F&url=https%3A%2F%2Fgithub.com%2Fvovansuper%2Faccordion-simple&text=ngx-dummy Accordion simple component'",1,"mdc-card__media","mdc-card__media--16-9","demo-card__media","tmpl-item-logo"],[1,"mdc-card__media-content","demo-card__media-content"],[1,"card-media__items"],[1,"mdc-typography","mdc-typography--subtitle1","subtitle1"],[1,"mdc-typography","mdc-typography--subtitle2","subtitle1"],[1,"mdc-typography","mdc-typography--body2","mt-1","mb-1","body2",3,"innerHTML"],[1,"mdc-card__actions","flex-card__tmpl"],[1,"mdc-card__action-buttons"],["onclick","location.href='//github.com/ngx-dummy/accordion-simple'",1,"mdc-button","mdc-card__action","mdc-card__action--button"],[1,"material-icons"],["onclick","location.href='//github.com/VovanSuper' ","aria-label","Follow VovanSuper on GitHub",1,"mdc-button","mdc-card__action","mdc-card__action--button"],[1,"mdc-card__action-icons"],["aria-pressed","false","aria-label","Sponsor","title","Sponsor","onclick","location.href='//github.com/sponsors/ngx-dummy'","data-icon","octicon-heart","aria-label","Sponsor Me on GitHub",1,"mdc-icon-button","mdc-card__action","mdc-card__action--icon--unbounded"],[1,"material-icons","mdc-icon-button__icon","mdc-icon-button__icon--on"],["title","Share","data-mdc-ripple-is-unbounded","true","onclick","location.href='//twitter.com/intent/tweet?ref_src=twsrc%5Etfw&original_referer=https%3A%2F%2Fngx-dummy.github.io%2Faccordion-simple%2F&url=https%3A%2F%2Fgithub.com%2Fvovansuper%2Faccordion-simple&text=ngx-dummy Accordion simple component'",1,"mdc-icon-button","material-icons","mdc-card__action","mdc-card__action--icon--unbounded"],[1,"container","materializelikes"],[1,"row"],[1,"div","col","s12","l12","center-align",2,"font-size","1.5rem","line-height","110%","margin","0.1rem","color","var(--darker-color)"],[1,"col","s12"],[1,"col","s12","m12"],[1,"card","large"],[1,"card-image"],["src","myTwitLogo.png"],[1,"card-title"],["title","Share","data-mdc-ripple-is-unbounded","true","onclick","location.href='//twitter.com/intent/tweet?ref_src=twsrc%5Etfw&original_referer=https%3A%2F%2Fngx-dummy.github.io%2Faccordion-simple%2F&url=https%3A%2F%2Fgithub.com%2Fvovansuper%2Faccordion-simple&text=ngx-dummy Accordion simple component'",1,"btn-floating","halfway-fab","waves-effect","waves-light","red"],[1,"card-content"]],template:function(i,o){if(1&i){const r=t.EpF();t.TgZ(0,"div",0)(1,"div",1)(2,"div",2)(3,"h2",3),t._uU(4),t.qZA()(),t.TgZ(5,"div",2)(6,"div",4)(7,"button",5),t.NdJ("click",function(){t.CHM(r);const c=t.MAs(14),l=t.MAs(18);return c.closeAll(),l.closeAll()}),t._UZ(8,"div",6),t.TgZ(9,"span"),t._uU(10,"Close All"),t.qZA()()()()(),t.TgZ(11,"div",1)(12,"div",7),t._UZ(13,"ngxd-accordion",8,9),t.qZA()(),t.TgZ(15,"div",10)(16,"div",7),t._UZ(17,"ngxd-accordion",11,12),t.ALo(19,"async"),t.qZA()()(),t.YNc(20,xt,3,1,"ng-template",null,13,t.W1O),t.YNc(22,Ot,32,1,"ng-template",null,14,t.W1O),t.YNc(24,St,19,1,"ng-template",null,15,t.W1O)}if(2&i){const r=t.MAs(21);t.xp6(4),t.Oqu(o.title),t.xp6(9),t.Q6J("accordionList",o.accordList2)("accordionStyling",o.styling),t.xp6(4),t.Q6J("loadingTpl",r)("accordionList",t.lcZ(19,6,o.accordList$))("accordionStyling",o.styling1)}},directives:[k],pipes:[p.Ov],styles:["@media screen and (min-width: 840px){.align[_ngcontent-%COMP%]{line-height:100%}}","[_nghost-%COMP%] {\n\t\t\t--spin-bg: #46cccc;\n\t\t\t--spin-in-bg: #4adada;\n\t\t}\n\n\t\t.container-transparent[_ngcontent-%COMP%] {\n\t\t\tbackground: transparent;\n\t\t\tdisplay: grid;\n\t\t\tmin-height: 6rem;\n\t\t\twidth: 100%;\n\t\t\tplace-content: center;\n\t\t}\n\n\t\t.loader[_ngcontent-%COMP%] {\n\t\t\twidth: 3rem;\n\t\t\theight: 3rem;\n\t\t\tborder: 0.3rem solid var(--spin-bg);\n\t\t\tanimation: spin 2s infinite ease-in-out;\n\t\t}\n\n\t\t.loader-inner[_ngcontent-%COMP%] {\n\t\t\tvertical-align: top;\n\t\t\tdisplay: inline-block;\n\t\t\twidth: 100%;\n\t\t\tbackground-color: var(--spin-in-bg);\n\t\t\tanimation: spin-in 2s infinite ease-in;\n\t\t}\n\n\t\t@keyframes spin {\n\t\t\t0% {\n\t\t\t\topacity: 0.4;\n\t\t\t\ttransform: rotate(0deg);\n\t\t\t}\n\n\t\t\t25% {\n\t\t\t\topacity: 0.6;\n\t\t\t\ttransform: rotate(180deg);\n\t\t\t}\n\n\t\t\t50% {\n\t\t\t\topacity: 0.9;\n\t\t\t\ttransform: rotate(180deg);\n\t\t\t}\n\n\t\t\t75% {\n\t\t\t\topacity: 1;\n\t\t\t\ttransform: rotate(390deg);\n\t\t\t}\n\n\t\t\t100% {\n\t\t\t\topacity: 0.9;\n\t\t\t\ttransform: rotate(360deg);\n\t\t\t}\n\t\t}\n\n\t\t@keyframes spin-in {\n\t\t\t0% {\n\t\t\t\topacity: 0.4;\n\t\t\t\theight: 0%;\n\t\t\t}\n\n\t\t\t25% {\n\t\t\t\topacity: 0.6;\n\t\t\t\theight: 0%;\n\t\t\t}\n\n\t\t\t50% {\n\t\t\t\topacity: 0.9;\n\t\t\t\theight: 100%;\n\t\t\t}\n\n\t\t\t75% {\n\t\t\t\topacity: 1;\n\t\t\t\theight: 100%;\n\t\t\t}\n\n\t\t\t100% {\n\t\t\t\topacity: 0.9;\n\t\t\t\theight: 0%;\n\t\t\t}\n\t\t}",".tmpl-item-container[_ngcontent-%COMP%] {\n\t\t\tfont-family: 'Roboto', sans-serif !important;\n\t\t}\n\n\t\t.head6[_ngcontent-%COMP%] {\n\t\t\tfont-style: italic;\n\t\t\tmargin: 1.1rem;\n\t\t}\n\n\t\t.subtitle1[_ngcontent-%COMP%] {\n\t\t\tcolor: var(--mdc-theme-text-primary-on-dark, rgba(250, 250, 250, 0.9));\n\t\t\ttext-align: start;\n\t\t\tmargin: 0.1rem 1rem;\n\t\t\tfont-family: Lato;\n\t\t}\n\n\t\t.subtitle2[_ngcontent-%COMP%] {\n\t\t\tcolor: var(--mdc-theme-text-primary-on-light, rgba(250, 250, 250, 0.9));\n\t\t\ttext-align: start;\n\t\t\tmargin: 0.1rem 1rem;\n\t\t}\n\n\t\t.card-media__items[_ngcontent-%COMP%] {\n\t\t\tposition: absolute;\n\t\t\tbottom: 1rem;\n\t\t\tleft: 0.4rem;\n\t\t}\n\n\t\t.tmpl-item-logo[_ngcontent-%COMP%] {\n\t\t\tbackground-image: url('myTwitLogo.png');\n\t\t}\n\n\t\t.tmpl-main-content[_ngcontent-%COMP%] {\n\t\t\tbackground-color: floralwhite;\n\t\t\tfont-size: medium;\n\t\t}\n\n\t\t.body2[_ngcontent-%COMP%] {\n\t\t\tmargin: 0.4rem 1rem;\n\t\t}\n\n\t\t.tmpl-footer[_ngcontent-%COMP%] {\n\t\t\tbackground-color: lavenderblush;\n\t\t\tcolor: black;\n\t\t\tfont-size: xx-small;\n\t\t}\n\n\t\t@media screen and (max-width: 500px) {\n\t\t\t.head6[_ngcontent-%COMP%] {\n\t\t\t\tfont-size: 1rem;\n\t\t\t\tmargin: 0.1rem;\n\t\t\t}\n\n\t\t\t.subtitle1[_ngcontent-%COMP%] {\n\t\t\t\tfont-size: 0.4rem;\n\t\t\t}\n\n\t\t\t.subtitle2[_ngcontent-%COMP%] {\n\t\t\t\tfont-size: 0.2rem;\n\t\t\t}\n\n\t\t\t.flex-card__tmpl[_ngcontent-%COMP%] {\n\t\t\t\tdisplay: grid;\n\t\t\t\tflex-direction: column;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tflex-wrap: wrap !important;\n\t\t\t}\n\t\t}",".row[_ngcontent-%COMP%] {\n\t\t\tmargin-left: auto;\n\t\t\tmargin-right: auto;\n\t\t\tmargin-bottom: 20px;\n\t\t}\n\t\t.row[_ngcontent-%COMP%]   .col[_ngcontent-%COMP%] {\n\t\t\tfloat: left;\n\t\t\t-webkit-box-sizing: border-box;\n\t\t\tbox-sizing: border-box;\n\t\t\tpadding: 0 0.75rem;\n\t\t\tmin-height: 1px;\n\t\t}\n\t\t.row[_ngcontent-%COMP%]   .col.s12[_ngcontent-%COMP%] {\n\t\t\twidth: 100%;\n\t\t\tmargin-left: auto;\n\t\t\tleft: auto;\n\t\t\tright: auto;\n\t\t}\n\t\t.row[_ngcontent-%COMP%]:after {\n\t\t\tcontent: '';\n\t\t\tdisplay: table;\n\t\t\tclear: both;\n\t\t}\n\t\t.card[_ngcontent-%COMP%] {\n\t\t\tposition: relative;\n\t\t\tmargin: 0.5rem 0 1rem 0;\n\t\t\tbackground-color: #fff;\n\t\t\t-webkit-transition: -webkit-box-shadow 0.25s;\n\t\t\ttransition: -webkit-box-shadow 0.25s;\n\t\t\ttransition: box-shadow 0.25s;\n\t\t\ttransition: box-shadow 0.25s, -webkit-box-shadow 0.25s;\n\t\t\tborder-radius: 2px;\n\t\t}\n\t\t.card.large[_ngcontent-%COMP%]   .card-image[_ngcontent-%COMP%] {\n\t\t\tmax-height: 60%;\n\t\t\tposition: relative;\n\t\t\toverflow: hidden;\n\t\t}\n\t\t.card[_ngcontent-%COMP%]   .card-image[_ngcontent-%COMP%]   img[_ngcontent-%COMP%] {\n\t\t\tdisplay: block;\n\t\t\tborder-radius: 2px 2px 0 0;\n\t\t\tposition: relative;\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\ttop: 0;\n\t\t\tbottom: 0;\n\t\t\twidth: 100%;\n\t\t}\n\t\t.card[_ngcontent-%COMP%]   .card-image[_ngcontent-%COMP%]   .card-title[_ngcontent-%COMP%] {\n\t\t\tfont-size: 24px;\n\t\t\tfont-weight: 300;\n\t\t\tcolor: #fff;\n\t\t\tposition: absolute;\n\t\t\tbottom: 0;\n\t\t\tleft: 0;\n\t\t\tmax-width: 100%;\n\t\t\tpadding: 24px;\n\t\t}\n\t\t.btn-floating.halfway-fab[_ngcontent-%COMP%] {\n\t\t\tposition: absolute;\n\t\t\tright: 24px;\n\t\t\tbottom: -20px;\n\t\t}\n\t\t.waves-effect[_ngcontent-%COMP%] {\n\t\t\tposition: relative;\n\t\t\tcursor: pointer;\n\t\t\tdisplay: inline-block;\n\t\t\toverflow: hidden;\n\t\t\t-webkit-user-select: none;\n\t\t\t-moz-user-select: none;\n\t\t\t-ms-user-select: none;\n\t\t\tuser-select: none;\n\t\t\t-webkit-tap-highlight-color: transparent;\n\t\t\tvertical-align: middle;\n\t\t\tz-index: 1;\n\t\t\t-webkit-transition: 0.3s ease-out;\n\t\t\ttransition: 0.3s ease-out;\n\t\t}\n\t\t.btn-floating[_ngcontent-%COMP%] {\n\t\t\tfont-size: 14px;\n\t\t\toutline: 0;\n\t\t\tdisplay: inline-block;\n\t\t\tcolor: #fff;\n\t\t\tposition: relative;\n\t\t\toverflow: hidden;\n\t\t\tz-index: 1;\n\t\t\twidth: 40px;\n\t\t\theight: 40px;\n\t\t\tline-height: 40px;\n\t\t\tpadding: 0;\n\t\t\tbackground-color: #26a69a;\n\t\t\tborder-radius: 50%;\n\t\t\t-webkit-transition: background-color 0.3s;\n\t\t\ttransition: background-color 0.3s;\n\t\t\tcursor: pointer;\n\t\t\tvertical-align: middle;\n\t\t}\n\t\t.red[_ngcontent-%COMP%] {\n\t\t\tbackground-color: var(--mdc-theme-on-primary, #fff);\n\t\t}\n\t\t.card[_ngcontent-%COMP%]   .card-content[_ngcontent-%COMP%] {\n\t\t\t\n\t\t\tmax-height: 40%;\n\t\t\tmargin: 1rem;\n\t\t}\n\t\t.material-icons[_ngcontent-%COMP%] {\n\t\t\tfont-family: 'Material Icons';\n\t\t\tfont-weight: normal;\n\t\t\tfont-style: normal;\n\t\t\tfont-size: 24px;\n\t\t\tline-height: 1;\n\t\t\tletter-spacing: normal;\n\t\t\ttext-transform: none;\n\t\t\tdisplay: inline-block;\n\t\t\twhite-space: nowrap;\n\t\t\tword-wrap: normal;\n\t\t\tdirection: ltr;\n\t\t\t-webkit-font-feature-settings: 'liga';\n\t\t\t-webkit-font-smoothing: antialiased;\n\t\t}\n\t\ta.btn-floating[title='Share'][_ngcontent-%COMP%] {\n\t\t\tbottom: 0.5rem;\n\t\t\tright: 1rem;\n\t\t\ttext-align: center;\n\t\t\tdisplay: grid;\n\t\t\tplace-content: center;\n\t\t}"],data:{animation:[F]}}),e})();var At=d(8230);let qt=(()=>{class e{}return e.\u0275fac=function(i){return new(i||e)},e.\u0275mod=t.oAB({type:e}),e.\u0275inj=t.cJS({imports:[[p.ez,At.JF]]}),e})(),Mt=(()=>{class e extends L{constructor(){super(...arguments),this.title="Yet another Accordion Sample",this.accordList1$=new Promise(i=>i({...y,items:[...v.items,...y.items]})),this.styling={...super.styling,bodyDblclkCloseItems:!0,itemStyling:{headBgColor:"grey",padding:1,headColor:"lightgreen"}}}}return e.\u0275fac=function(){let n;return function(o){return(n||(n=t.n5z(e)))(o||e)}}(),e.\u0275cmp=t.Xpm({type:e,selectors:[["app-root2"]],features:[t.qOj],decls:9,vars:5,consts:[[1,"mdc-layout-grid","mdc-layout-grid--align-center"],[1,"mdc-layout-grid__inner","mb-1"],[1,"mdc-layout-grid__cell","mdc-layout-grid__cell--span-12","mdc-layout-grid__cell--align-center"],[1,"text-center"],[1,"mdc-layout-grid__cell","mdc-layout-grid__cell--align-center","mdc-layout-grid__cell--span-12"],["openSign","plus1.png","minus","min.png",3,"accordionList","accordionStyling"]],template:function(i,o){1&i&&(t.TgZ(0,"div",0)(1,"div",1)(2,"div",2)(3,"h2",3),t._uU(4),t.qZA()()(),t.TgZ(5,"div",1)(6,"div",4),t._UZ(7,"ngxd-accordion",5),t.ALo(8,"async"),t.qZA()()()),2&i&&(t.xp6(4),t.Oqu(o.title),t.xp6(3),t.Q6J("accordionList",t.lcZ(8,3,o.accordList1$))("accordionStyling",o.styling))},directives:[k],pipes:[p.Ov],styles:["@media screen and (min-width: 840px){.align[_ngcontent-%COMP%]{line-height:100%}}"]}),e})(),It=(()=>{class e{}return e.\u0275fac=function(i){return new(i||e)},e.\u0275mod=t.oAB({type:e,bootstrap:[L,Mt]}),e.\u0275inj=t.cJS({imports:[[Z.PW,qt]]}),e})();(0,t.G48)(),setTimeout(()=>{h.q6().bootstrapModule(It,{ngZoneEventCoalescing:!0}).catch(e=>console.error(e))},1500)}},g=>{g.O(0,["vendor"],()=>g(g.s=8198)),g.O()}]);
+//# sourceMappingURL=main.79d8e1ce6e46de39.js.map
\ No newline at end of file
diff --git a/docs/main.79d8e1ce6e46de39.js.map b/docs/main.79d8e1ce6e46de39.js.map
new file mode 100644
index 00000000..83d8cae3
--- /dev/null
+++ b/docs/main.79d8e1ce6e46de39.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"main.79d8e1ce6e46de39.js","mappings":"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","names":["dummyAccordionList1","id","name","items","title","body","dummyAccordionList2","loaderIn","trigger","transition","style","opacity","transform","animate","keyframes","offset","INI_STATE","InjectionToken","factory","AccordionOpenService","BehaviorSubject","constructor","iniState","super","this","itemsStats","next","complete","unsubscribe","itemsOpen$","asObservable","itemsOpenSnapshot","value","i0","accordionAnimations","accordItemsIn","query","stagger","optional","spinnerIn","transformOrigin","height","accordionItemAnimations","accordionItemBodyHeightCollapse","state","visibility","pluckIToggler","itemId","isOpen","rest","pluckOpenTogglesIdsToStr","toggles","filter","t","map","join","sanitizeHTML","item","sanitizer","sanitize","SecurityContext","getSvgSafeRes","file","bypassSecurityTrustResourceUrl","prepRes","rawSvg","btoa","svgToBase64src","bodyWithTmpl","itemTemplate","getItemBodyTemplate","defaultTmpl","P","getItemBodyCtx","itemBody","l","console","log","ImgClasses","ImgLoadClass","AccordionItemImgDirective","el","renderer","zone","target","_setLoadSuccess","_setLoadAlter","classList","contains","LOGO","_setItemHeaderImgSafeSrc","_baseLogoImg","ENDING","_baseChevronImg","runOutsideAngular","_src","_nativeImgEl","_closeSign","_openSign","imgRef","src","setAttribute","_setNoRecheck","attr","dataset","add","SUCCESS","_isSet","ALTER","length","_needToRecheck","ngAfterViewInit","nativeElement","ngAfterContentChecked","_doOpenCloseSrcRecheck","_isLogoImg","_readElDataSet","_isCloserImg","undefined","_isImgOpenClose","selectors","ctx","ctx_r10","oxw","ctx_r12","AccordionItemComponent","of","startAnim","e","element","willChange","classes","fromState","toState","replace","doneAnim","changeDetection","AccordionItemDirective","hostCmp","hostElRef","itemStatusSvc","render","cd","headHeight","headBgColor","headColor","bodyBgColor","bodyColor","fontSize","bodyPadding","EventEmitter","Subject","outerHTML","includes","_handleClick","bodyDblclkClose","idx","_toggle","toggled","emit","ngOnInit","itemNum","isNumbered","isOpen$","pipe","takeUntil","hostDestroy$$","val","find","pluck","tap","nativeEl","itemEl","getElementsByClassName","headEl","bodyEl","headElLogoImgEl","headElCloserImgEl","logo","openSign","closeSign","detectChanges","setStyle","itemStyles","margin","padding","font","fontStyle","fontFamily","marginBottom","marginTop","setProperty","headFont","headFontSize","bodyMargin","bodyFont","bodyFontSize","bodyTextAlign","ngOnDestroy","ElementRef","AccordionComponent","itemsOpenSvc","hostEl","numberedItems","isMultiShow","bodyDblclkCloseItems","maxWidth","itemsGuts","itemStyling","setItemsOpen","eId","opened","multiSelect","accordionItems","forEach","onItemToggled","_ind","attributes","accordionList","acc","_accord","Object","assign","i","loadingTpl","_loadingTpl","defloadingTpl","_bodyDblclkClose","accordionStyling","subscribe","ids","_openedItems","_isNumbered","Array","isArray","reduce","accu","curr","_itemStyle","entries","key","accordEl","ngOnChanges","changes","keys","prop","previousValue","currentValue","close","TemplateRef","AppComponent","delay","styling","accordList2","list1","simpleBodyTmpl","tmpl2","btnRipple","document","querySelector","ripple","MDCRipple","destroy","_r0","_r1","AccordionModule","CommonModule","HttpClientModule","App2Component","Promise","resolve","AppModule","bootstrap","BrowserAnimationsModule","enableProdMode","setTimeout","__NgCli_bootstrap_1","bootstrapModule","ngZoneEventCoalescing","catch","err","error"],"sourceRoot":"webpack:///","sources":["./projects/accordion-sample/src/app/helpers/dummy-data.ts","./projects/accordion-sample/src/app/loader.anim.ts","./projects/@ngx-dummy/accordion-simple/src/lib/accordion-open.service.ts","./projects/@ngx-dummy/accordion-simple/src/lib/animations.ts","./projects/@ngx-dummy/accordion-simple/src/lib/settings/IToggler.ts","./projects/@ngx-dummy/accordion-simple/src/lib/settings/helpers.ts","./projects/@ngx-dummy/accordion-simple/src/lib/accordion-item-img.directive.ts","./projects/@ngx-dummy/accordion-simple/src/lib/theming/icons-base.ts","./projects/@ngx-dummy/accordion-simple/src/lib/accordion-item.component.html","./projects/@ngx-dummy/accordion-simple/src/lib/accordion-item.component.ts","./projects/@ngx-dummy/accordion-simple/src/lib/accordion-item.directive.ts","./projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.html","./projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.ts","./projects/accordion-sample/src/app/app.component.html","./projects/accordion-sample/src/app/app.component.ts","./projects/@ngx-dummy/accordion-simple/src/lib/accordion.module.ts","./projects/accordion-sample/src/app/app2.component.ts","./projects/accordion-sample/src/app/app.module.ts","./projects/accordion-sample/src/main.ts"],"sourcesContent":["/* eslint-disable max-len */\nimport { Accordion } from '@ngx-dummy/accordion-simple/index';\n\nexport const dummyAccordionList1: Accordion = {\n\tid: 'Accord_1',\n\tname: 'Accordion 1',\n\titems: [\n\t\t{\n\t\t\ttitle: 'Accordion Card 1',\n\t\t\tbody: '[[TMPL]]',\n\t\t},\n\t\t{\n\t\t\ttitle: 'Accordion Card 2',\n\t\t\tbody: `\n\t\t\t<a href=\"//github.com/ngx-dummy/accordion-simple\">Project Repository</a>\n\t\t\t<br />\n\t\t\tSimple 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.`,\n\t\t},\n\t\t{\n\t\t\ttitle: 'Accordion simple Card 3 x 11',\n\t\t\tbody: `\n\t\t\t\t<p>Para1 </p>\n\t\t\t\t<h4> Heading </h4>\n\t\t\t\t<script type='text/javascript'>alert('Injection !');</script>\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n      `,\n\t\t},\n\t],\n};\n\nexport const dummyAccordionList2: Accordion = {\n\tid: 'Accord_2',\n\tname: 'Accordion 2',\n\titems: [\n\t\t{\n\t\t\tid: 'item0',\n\t\t\ttitle: 'Card ',\n\t\t\tbody: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione',\n\t\t},\n\t\t{\n\t\t\tid: 'item1',\n\t\t\ttitle: 'Card 1',\n\t\t\tbody: `\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n      `,\n\t\t},\n\t\t{\n\t\t\tid: 'item2',\n\t\t\ttitle: 'Card 2',\n\t\t\tbody: `\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n      `,\n\t\t},\n\t\t{\n\t\t\tid: 'item3',\n\t\t\ttitle: 'Card 3',\n\t\t\tbody: `\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n      `,\n\t\t},\n\t\t{\n\t\t\tid: 'item4',\n\t\t\ttitle: 'Card 4',\n\t\t\tbody: `\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n      `,\n\t\t},\n\t\t{\n\t\t\tid: 'item5',\n\t\t\ttitle: 'Long Card 5',\n\t\t\tbody: `\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione\n      `,\n\t\t},\n\t],\n};\n","/*!\n * @ngx-dummy/Accordion-Simple library\n * Simple accordion created for angular / ionic projects.\n * https://github.com/ngx-dummy/accordion-simple\n *\n * Copyright  Vladimir Ovsyukov <ovsyukov@yandex.com>\n * Published under GNU LGPLv3 License\n */\nimport { trigger, transition, style, animate, keyframes } from '@angular/animations';\n\nexport const loaderIn = trigger('moveIn', [\n\ttransition(':enter', [\n\t\tstyle({ opacity: 0, transform: 'translateY(-3rem)' }),\n\t\tanimate(\n\t\t\t'1s ease-in-out',\n\t\t\tkeyframes([\n\t\t\t\tstyle({ offset: 0.2, opacity: 0.1, transform: 'translateY(-1rem)' }),\n\t\t\t\tstyle({ offset: 0.6, opacity: 0.4, transform: 'translateY(-0.1rem)' }),\n\t\t\t\tstyle({ offset: 1, opacity: 1, transform: 'none' }),\n\t\t\t])\n\t\t),\n\t]),\n]);\n","/*!\n * @ngx-dummy/Accordion-Simple library\n * Simple accordion created for angular / ionic projects.\n * https://github.com/ngx-dummy/accordion-simple\n *\n * Copyright  Vladimir Ovsyukov <ovsyukov@yandex.com>\n * Published under GNU LGPLv3 License\n */\nimport { Injectable, Inject, InjectionToken } from '@angular/core';\nimport { BehaviorSubject } from 'rxjs';\nimport { IToggler } from './settings/';\n\nexport function iniTogglerFn() {\n\treturn [] as IToggler[];\n}\n\nexport const INI_STATE = new InjectionToken<IToggler[]>('Accordion Initial Items Open state provider token', { factory: iniTogglerFn });\n\n@Injectable()\nexport class AccordionOpenService extends BehaviorSubject<IToggler[]> {\n\tconstructor(@Inject(INI_STATE) iniState: IToggler[] = []) {\n\t\tsuper(iniState);\n\t}\n\n\tget itemsOpen$() {\n\t\treturn this.asObservable();\n\t}\n\tget itemsOpenSnapshot() {\n\t\treturn this.value;\n\t}\n\n\tsetItemsOpen = (itemsStats: IToggler[]) => this.next(itemsStats);\n\n\tclose = () => {\n\t\tthis.complete();\n\t\tsuper.unsubscribe();\n\t};\n}\n","/*!\n * @ngx-dummy/Accordion-Simple library\n * Simple accordion created for angular / ionic projects.\n * https://github.com/ngx-dummy/accordion-simple\n *\n * Copyright  Vladimir Ovsyukov <ovsyukov@yandex.com>\n * Published under GNU LGPLv3 License\n */\nimport { trigger, query, stagger, transition, animate, style, keyframes, state, AnimationTriggerMetadata } from '@angular/animations';\nexport { AnimationEvent as NgAnimationEvent } from '@angular/animations';\n\nexport const accordionAnimations: {\n\treadonly accordItemsIn: AnimationTriggerMetadata;\n\treadonly spinnerIn: AnimationTriggerMetadata;\n} = {\n\taccordItemsIn: trigger('accordItemsIn', [\n\t\ttransition('* => *', [\n\t\t\tquery(\n\t\t\t\t':leave',\n\t\t\t\t[\n\t\t\t\t\tstagger(-25, [\n\t\t\t\t\t\tanimate(\n\t\t\t\t\t\t\t'.3s',\n\t\t\t\t\t\t\tstyle({\n\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\ttransform: 'scale(0.7, 0.7) translateY(-3rem)',\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t),\n\t\t\t\t\t]),\n\t\t\t\t],\n\t\t\t\t{ optional: true }\n\t\t\t),\n\t\t\tquery(\n\t\t\t\t':enter',\n\t\t\t\t[\n\t\t\t\t\tstyle({ opacity: 0, transform: 'scale(0.7, 0.7) translateY(-3rem)' }),\n\t\t\t\t\tstagger(25, [\n\t\t\t\t\t\tanimate(\n\t\t\t\t\t\t\t'.3s ease-out',\n\t\t\t\t\t\t\tkeyframes([\n\t\t\t\t\t\t\t\tstyle({ offset: 0, opacity: 0 }),\n\t\t\t\t\t\t\t\tstyle({\n\t\t\t\t\t\t\t\t\toffset: 0.2,\n\t\t\t\t\t\t\t\t\topacity: 0.1,\n\t\t\t\t\t\t\t\t\ttransform: 'scale(0.85, 0.85) translateY(-4rem)',\n\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t\tstyle({\n\t\t\t\t\t\t\t\t\toffset: 0.5,\n\t\t\t\t\t\t\t\t\topacity: 0.8,\n\t\t\t\t\t\t\t\t\ttransform: 'scale(0.9, 0.9) translateY(3rem)',\n\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t\tstyle({ offset: 1, opacity: 1, transform: 'none' }),\n\t\t\t\t\t\t\t])\n\t\t\t\t\t\t),\n\t\t\t\t\t]),\n\t\t\t\t],\n\t\t\t\t{ optional: true }\n\t\t\t),\n\t\t]),\n\t]),\n\n\tspinnerIn: trigger('spinnerIn', [\n\t\ttransition('void => *', [\n\t\t\tquery(\n\t\t\t\t'.loader',\n\t\t\t\tanimate(\n\t\t\t\t\t'.5s ease-out',\n\t\t\t\t\tkeyframes([\n\t\t\t\t\t\tstyle({\n\t\t\t\t\t\t\toffset: 0,\n\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\ttransformOrigin: 'bottom right',\n\t\t\t\t\t\t\theight: 0,\n\t\t\t\t\t\t\ttransform: 'translateY(-100px) scale(0, 0)',\n\t\t\t\t\t\t}),\n\t\t\t\t\t\tstyle({\n\t\t\t\t\t\t\toffset: 0.8,\n\t\t\t\t\t\t\topacity: 0.6,\n\t\t\t\t\t\t\theight: 0,\n\t\t\t\t\t\t\ttransform: 'translateY(40px) scale(0.5, 0.5)',\n\t\t\t\t\t\t}),\n\t\t\t\t\t\tstyle({\n\t\t\t\t\t\t\toffset: 1,\n\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\theight: '*',\n\t\t\t\t\t\t\ttransform: 'translateY(0) scale(1, 1)',\n\t\t\t\t\t\t}),\n\t\t\t\t\t])\n\t\t\t\t),\n\t\t\t\t{ optional: true }\n\t\t\t),\n\t\t]),\n\t]),\n};\n\nexport const accordionItemAnimations: {\n\treadonly accordionItemBodyHeightCollapse: AnimationTriggerMetadata;\n} = {\n\taccordionItemBodyHeightCollapse: trigger('openClose', [\n\t\tstate(\n\t\t\t'closed',\n\t\t\tstyle({\n\t\t\t\theight: '0',\n\t\t\t\topacity: '0',\n\t\t\t\tvisibility: 'collapse',\n\t\t\t})\n\t\t),\n\t\tstate(\n\t\t\t'opened',\n\t\t\tstyle({\n\t\t\t\theight: '*',\n\t\t\t\topacity: '1',\n\t\t\t\tvisibility: 'visible',\n\t\t\t})\n\t\t),\n\t\ttransition('opened <=> closed', animate('.3s ease-out')),\n\t]),\n};\n","/*!\n * @ngx-dummy/Accordion-Simple library\n * Simple accordion created for angular / ionic projects.\n * https://github.com/ngx-dummy/accordion-simple\n *\n * Copyright  Vladimir Ovsyukov <ovsyukov@yandex.com>\n * Published under GNU LGPLv3 License\n */\nimport { AccordionItemInternal } from './IAccordion';\n\nexport interface IToggler {\n\titemId: number;\n\tisOpen: boolean;\n}\n\nexport const pluckIToggler = ({ itemId, isOpen, ...rest }: AccordionItemInternal) => <IToggler>{ itemId, isOpen };\nexport const pluckOpenTogglesIdsToStr = (toggles: IToggler[]): string =>\n\ttoggles\n\t\t.filter((t) => t.isOpen === true)\n\t\t.map((t) => t.itemId)\n\t\t.join(',');\n","/*!\n * @ngx-dummy/Accordion-Simple library\n * Simple accordion created for angular / ionic projects.\n * https://github.com/ngx-dummy/accordion-simple\n *\n * Copyright  Vladimir Ovsyukov <ovsyukov@yandex.com>\n * Published under GNU LGPLv3 License\n */\nimport { TemplateRef, SecurityContext } from '@angular/core';\nimport { DomSanitizer } from '@angular/platform-browser';\n\nimport { ItemTemplateContext } from './IAccordion';\n\nexport const imgBase64ToBlob = (Base64Image: any, imageType = 'image/png') => {\n\tconst parts = Base64Image.split(';base64,');\n\tconst decodedData = window.atob(parts[1]);\n\tconst uInt8Array = new Uint8Array(decodedData.length);\n\tfor (let i = 0; i < decodedData.length; ++i) {\n\t\tuInt8Array[i] = decodedData.charCodeAt(i);\n\t}\n\treturn new Blob([uInt8Array], { type: imageType });\n};\n\nexport const svgToBase64src = (rawSvg: string) => 'data:image/svg+xml;base64,' + btoa(rawSvg);\nexport const prepRes = (item: string, sanitizer: DomSanitizer) => sanitizer.bypassSecurityTrustResourceUrl(item);\nexport const sanitizeHTML = (item: string | object | undefined, sanitizer: DomSanitizer) => !!item && sanitizer.sanitize(SecurityContext.HTML, item);\nexport const getSvgSafeRes = (file: string, sanitizer: DomSanitizer) => prepRes(svgToBase64src(file), sanitizer);\nexport const getPngSafeRes = (file: string, sanitizer: DomSanitizer) => prepRes(URL.createObjectURL(imgBase64ToBlob(file)), sanitizer);\nexport const blobToSafeRes = (blob: Blob, sanitizer: DomSanitizer) => prepRes(URL.createObjectURL(blob), sanitizer);\n\nexport const bodyWithTmpl = (item: string | ItemTemplateContext): item is ItemTemplateContext => !!item && typeof item !== 'string' && !!item.itemTemplate;\nexport const getItemBodyTemplate = (item: string | ItemTemplateContext, defaultTmpl: TemplateRef<Element>) => (!!bodyWithTmpl(item) ? item.itemTemplate : defaultTmpl);\nexport const getItemBodyCtx = (item: string | ItemTemplateContext) => (bodyWithTmpl(item) && typeof item.itemBody === 'string' ? item.itemBody : item);\n\n// export const svgToBase64srcWithBuf = (rawSvg: string) => {\n// \tlet buf = Buffer.from(rawSvg);\n// \treturn buf.toString('base64url');\n// };\n","/* eslint-disable @angular-eslint/no-host-metadata-property */\n/*!\n * @ngx-dummy/Accordion-Simple library\n * Simple accordion created for angular / ionic projects.\n * https://github.com/ngx-dummy/accordion-simple\n *\n * Copyright  Vladimir Ovsyukov <ovsyukov@yandex.com>\n * Published under GNU LGPLv3 License\n */\nimport { AfterContentChecked, AfterViewInit, Directive, ElementRef, HostBinding, Renderer2, NgZone } from '@angular/core';\nimport { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';\nimport { getSvgSafeRes } from './settings/';\nimport { arrow_down, logo_svg } from './theming/icons-base';\n\nconst l = console.log;\n\nenum ImgClasses {\n\tLOGO = 'accord-item__header--start-img',\n\tENDING = 'accord-item__header--end-img',\n}\nenum ImgLoadClass {\n\tSUCCESS = 'img-loaded__success',\n\tALTER = 'img-load__alter',\n}\n\n@Directive({\n\tselector: '.accord-item__header-img',\n\thost: {\n\t\t'(load)': 'onLoad($event)',\n\t\t'(error)': 'onError($event)',\n\t\t'[attr.loading]': '\"lazy\"',\n\t},\n})\nexport class AccordionItemImgDirective implements AfterViewInit, AfterContentChecked {\n\t@HostBinding('attr.src') get src() {\n\t\treturn this._src;\n\t}\n\n\tprivate _nativeImgEl: HTMLImageElement;\n\tprivate _src: string | SafeResourceUrl | undefined;\n\tprivate _openSign: string | SafeResourceUrl | undefined;\n\tprivate _closeSign: string | SafeResourceUrl | undefined;\n\tprivate _baseLogoImg = getSvgSafeRes(logo_svg, this.sanitizer);\n\tprivate _baseChevronImg = getSvgSafeRes(arrow_down, this.sanitizer);\n\tprivate _isSet = false;\n\tprivate _needToRecheck = false;\n\n\tconstructor(private el: ElementRef<HTMLImageElement>, private renderer: Renderer2, private zone: NgZone, private sanitizer: DomSanitizer) {}\n\n\tngAfterViewInit() {\n\t\tthis._nativeImgEl = this.el.nativeElement;\n\t}\n\n\tngAfterContentChecked() {\n\t\tif (this._isSet && !this._needToRecheck) {\n\t\t\treturn;\n\t\t}\n\t\tif (this._isSet && this._needToRecheck) {\n\t\t\treturn this._doOpenCloseSrcRecheck();\n\t\t}\n\n\t\tif (this._isLogoImg()) {\n\t\t\t// this._src = this.readElDataSet('src') || this._baseLogoImg;\n\t\t\t// return this.setNoRecheck();\n\t\t\treturn this._setItemHeaderImgSafeSrc(this._readElDataSet('src') || this._baseLogoImg);\n\t\t} else if (this._isCloserImg()) {\n\t\t\tthis._openSign = this._readElDataSet('opensrc') ?? undefined;\n\t\t\tthis._closeSign = this._readElDataSet('closesrc') ?? undefined;\n\t\t\tif (!this._isImgOpenClose()) {\n\t\t\t\t// this._src = this._baseChevronImg;\n\t\t\t\t// return this.setNoRecheck();\n\t\t\t\treturn this._setItemHeaderImgSafeSrc(this._baseChevronImg);\n\t\t\t} else {\n\t\t\t\tif (this._openSign !== this._closeSign) {\n\t\t\t\t\tthis._needToRecheck = true;\n\t\t\t\t}\n\t\t\t\tthis._isSet = true;\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t}\n\n\tonLoad = ({ target, ...rest }: { target: HTMLImageElement; rest: any[] }) => this._setLoadSuccess(target);\n\tonError = ({ target, ...rest }: { target: HTMLImageElement; rest: any[] }) => {\n\t\tthis._setLoadAlter(target);\n\t\tif (target.classList.contains(ImgClasses.LOGO)) {\n\t\t\t// this.setItemHeaderImgSrc(target, this._baseLogoImg);\n\t\t\tthis._setItemHeaderImgSafeSrc(this._baseLogoImg);\n\t\t} else if (target.classList.contains(ImgClasses.ENDING)) {\n\t\t\t// this.setItemHeaderImgSrc(target, this._baseChevronImg);\n\t\t\tthis._setItemHeaderImgSafeSrc(this._baseChevronImg);\n\t\t} else {\n\t\t\treturn l('Not an Accordion Item header image');\n\t\t}\n\t};\n\n\tprivate _doOpenCloseSrcRecheck = () => {\n\t\tthis.zone.runOutsideAngular(() => {\n\t\t\tthis._src = this._nativeImgEl?.classList.contains('open') ? this._closeSign : this._openSign;\n\t\t});\n\t};\n\tprivate _setItemHeaderImgSrc = (imgRef: HTMLImageElement, src: string | SafeResourceUrl) => this.renderer.setAttribute(imgRef, 'src', src as string);\n\tprivate _setItemHeaderImgSafeSrc = (src: string | SafeResourceUrl) => {\n\t\tthis._src = src;\n\t\treturn this._setNoRecheck();\n\t};\n\tprivate _readElDataSet = (attr: string) => this._nativeImgEl?.dataset[attr];\n\tprivate _setLoadSuccess = (target: HTMLImageElement) => {\n\t\ttarget.classList.add(ImgLoadClass.SUCCESS);\n\t\tthis._isSet = true;\n\t};\n\tprivate _setLoadAlter = (target: HTMLImageElement) => {\n\t\ttarget.classList.add(ImgLoadClass.ALTER);\n\t\tthis._setNoRecheck();\n\t};\n\tprivate _isImgOpenClose = () => !!this._closeSign && !!(this._closeSign as string).length && !!this._openSign && !!(this._openSign as string).length;\n\tprivate _isLogoImg = () => this._nativeImgEl?.classList.contains(ImgClasses.LOGO);\n\tprivate _isCloserImg = () => this._nativeImgEl?.classList.contains(ImgClasses.ENDING);\n\tprivate _setNoRecheck = () => {\n\t\tthis._isSet = true;\n\t\tthis._needToRecheck = false;\n\t};\n}\n","/* eslint-disable max-len */\n/*!\n * @ngx-dummy/Accordion-Simple library\n * Simple accordion created for angular / ionic projects.\n * https://github.com/ngx-dummy/accordion-simple\n *\n * Copyright  Vladimir Ovsyukov <ovsyukov@yandex.com>\n * Published under GNU LGPLv3 License\n */\nexport const logo_svg =\n\t'<svg width=\"50\" height=\"50\" viewBox=\"0 0 50 50\" fill=\"white\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5 0C2.23858 0 0 2.23858 0 5V45C0 47.7614 2.23858 50 5 50H45C47.7614 50 50 47.7614 50 45V5C50 2.23858 47.7614 0 45 0H5ZM11 10C10.4477 10 10 10.4477 10 11V15C10 15.5523 10.4477 16 11 16H39C39.5523 16 40 15.5523 40 15V11C40 10.4477 39.5523 10 39 10H11ZM10 23C10 22.4477 10.4477 22 11 22H39C39.5523 22 40 22.4477 40 23V27C40 27.5523 39.5523 28 39 28H11C10.4477 28 10 27.5523 10 27V23ZM11 34C10.4477 34 10 34.4477 10 35V39C10 39.5523 10.4477 40 11 40H32C32.5523 40 33 39.5523 33 39V35C33 34.4477 32.5523 34 32 34H11Z\"/></svg>';\n\nexport const arrow_down =\n\t'<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"white\" width=\"48px\" height=\"48px\"><path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z\"/><path d=\"M0 0h24v24H0V0z\" fill=\"none\"/></svg>';\n","<!--\r\n/*!\r\n * @ngx-dummy/Accordion-Simple library\r\n * Simple accordion created for angular / ionic projects.\r\n * https://github.com/ngx-dummy/accordion-simple\r\n *\r\n * Copyright  Vladimir Ovsyukov <ovsyukov@yandex.com>\r\n * Published under GNU LGPLv3 License\r\n */\r\n-->\r\n<ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: isOpen$ | async }\"></ng-container>\r\n\r\n<ng-template #itemTpl let-isOpen>\r\n\t<article class=\"accord-item\">\r\n\t\t<header class=\"accord-item__header\" [class.opened]=\"isOpen\">\r\n\t\t\t<ng-container *ngTemplateOutlet=\"headerDefaultTmpl; context: { $implicit: isOpen }\"></ng-container>\r\n\t\t</header>\r\n\t\t<!-- <section class=\"accord-item__body\" [ngClass]=\"{ 'opened': isOpen , 'closed': !isOpen }\" > -->\r\n\t\t<section class=\"accord-item__body closed\" [@openClose]=\"isOpen ? 'opened' : 'closed'\" (@openClose.start)=\"startAnim($event)\" (@openClose.done)=\"doneAnim($event)\">\r\n\t\t\t<ng-container *ngTemplateOutlet=\"getItemBodyTemplate($any(item.body), bodyDefaultTmpl); context: { $implicit: getItemBodyCtx($any(item.body)) }\"></ng-container>\r\n\t\t</section>\r\n\t</article>\r\n</ng-template>\r\n\r\n<ng-template #headerDefaultTmpl let-isOpen>\r\n\t<div class=\"header--control accord-item__logo\">\r\n\t\t<span class=\"accord-item__header--start\">\r\n\t\t\t<img class=\"accord-item__header-img accord-item__header--start-img\" />\r\n\t\t\t<span *ngIf=\"item.itemNum\">{{ item.itemNum }}.</span>\r\n\t\t</span>\r\n\t</div>\r\n\t<div class=\"header--control accord-item__title\">\r\n\t\t{{ item.title }}\r\n\t</div>\r\n\t<div class=\"header--control accord-item__collapse\">\r\n\t\t<span class=\"accord-item__header--end\" [class.active]=\"isOpen\">\r\n\t\t\t<!-- NOTE: img 'src' attr is bound in the `accordion-item-img.directive` -->\r\n\t\t\t<img class=\"accord-item__header-img accord-item__header--end-img\" [ngClass]=\"{ open: isOpen, close: !isOpen }\" />\r\n\t\t</span>\r\n\t</div>\r\n</ng-template>\r\n\r\n<ng-template #bodyDefaultTmpl let-defctx>\r\n\t{{ defctx }}\r\n\t<ng-content select=\".accord-item__footer\"></ng-content>\r\n</ng-template>\r\n","/*!\n * @ngx-dummy/Accordion-Simple library\n * Simple accordion created for angular / ionic projects.\n * https://github.com/ngx-dummy/accordion-simple\n *\n * Copyright  Vladimir Ovsyukov <ovsyukov@yandex.com>\n * Published under GNU LGPLv3 License\n */\nimport { Component, ChangeDetectionStrategy } from '@angular/core';\nimport { of } from 'rxjs';\nimport { accordionItemAnimations, NgAnimationEvent } from './animations';\nimport { AccordionItemInternal, getItemBodyCtx, getItemBodyTemplate } from './settings/';\n\n@Component({\n\tselector: 'ngxd-accordion-item',\n\ttemplateUrl: './accordion-item.component.html',\n\tstyleUrls: ['./accordion-item.component.scss'],\n\tanimations: [accordionItemAnimations.accordionItemBodyHeightCollapse],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AccordionItemComponent {\n\tgetItemBodyCtx = getItemBodyCtx!;\n\tgetItemBodyTemplate = getItemBodyTemplate!;\n\tisOpen$ = of(false);\n\titem: Partial<AccordionItemInternal>;\n\n\tstartAnim(e: NgAnimationEvent) {\n\t\t(<HTMLElement>e.element).style.willChange = 'height, opacity, visibility';\n\t\tconst classes = <DOMTokenList>e.element.classList;\n\t\tif (e.fromState === 'void') {\n\t\t\tclasses?.add('closed');\n\t\t}\n\t\tif (e.fromState === 'closed' && e.toState === 'opened') {\n\t\t\tclasses.replace('closed', 'opened');\n\t\t}\n\t}\n\n\tdoneAnim(e: NgAnimationEvent) {\n\t\t(<HTMLElement>e.element).style.willChange = 'auto';\n\t\tconst classes = <DOMTokenList>e.element.classList;\n\t\tif (e.fromState == 'opened' && e.toState == 'closed') {\n\t\t\tclasses.replace('opened', 'closed');\n\t\t}\n\t}\n}\n","/* eslint-disable @angular-eslint/no-host-metadata-property */\n/*!\n * @ngx-dummy/Accordion-Simple library\n * Simple accordion created for angular / ionic projects.\n * https://github.com/ngx-dummy/accordion-simple\n *\n * Copyright  Vladimir Ovsyukov <ovsyukov@yandex.com>\n * Published under GNU LGPLv3 License\n */\nimport { Directive, ElementRef, Output, EventEmitter, AfterViewInit, Input, Renderer2, Inject, OnInit, Host, ChangeDetectorRef, OnDestroy } from '@angular/core';\n\nimport { DomSanitizer } from '@angular/platform-browser';\nimport { Subject } from 'rxjs';\nimport { filter, tap, pluck, map, takeUntil } from 'rxjs/operators';\n\nimport { AccordionItemComponent } from './accordion-item.component';\nimport { AccordionOpenService } from './accordion-open.service';\nimport { NgAnimationEvent } from './animations';\nimport { IToggler, IAccordionItemStyling, AccordionItem, AccordionItemInternal, ItemTemplateContext, sanitizeHTML } from './settings/';\n\n@Directive({\n\tselector: '[ngxdAccordionItem]',\n\thost: {\n\t\t'[class.opened]': 'isOpen',\n\t\t'(dblclick)': 'onDblClick([$event.target, $event.currentTarget])',\n\t\t'(click)': 'onClick([$event.target, $event.currentTarget])',\n\t},\n})\nexport class AccordionItemDirective implements OnInit, AfterViewInit, OnDestroy {\n\t@Input('ngxdAccordionItem') item!: AccordionItemInternal;\n\t@Input('styling') itemStyles: IAccordionItemStyling = {\n\t\theadHeight: '50px',\n\t\theadBgColor: '#ccc',\n\t\theadColor: '#fff',\n\t\tbodyBgColor: '#fff',\n\t\tbodyColor: '#000',\n\t\tfontSize: '10px',\n\t\tbodyPadding: '0',\n\t};\n\t@Input() logo: string;\n\t@Input() openSign: string;\n\t@Input() closeSign: string;\n\t@Input() bodyDblclkClose = false;\n\t@Input() isNumbered = false;\n\t@Output() toggled: EventEmitter<IToggler> = new EventEmitter();\n\tisOpen = false;\n\tprivate hostDestroy$$: Subject<void> = new Subject();\n\n\tconstructor(\n\t\t@Inject(AccordionItemComponent) private hostCmp: AccordionItemComponent,\n\t\t@Inject(ElementRef) private hostElRef: ElementRef<HTMLElement>,\n\t\t@Host() private itemStatusSvc: AccordionOpenService,\n\t\tprivate render: Renderer2,\n\t\tprivate sanitizer: DomSanitizer,\n\t\tprivate cd: ChangeDetectorRef\n\t) {}\n\n\tngOnInit() {\n\t\tthis.hostCmp.item = {\n\t\t\t...this.item,\n\t\t\tbody:\n\t\t\t\ttypeof this.item.body === 'string'\n\t\t\t\t\t? sanitizeHTML(this.item.body, this.sanitizer)\n\t\t\t\t\t: ({\n\t\t\t\t\t\t\titemTemplate: this.item.body?.itemTemplate,\n\t\t\t\t\t\t\titemBody: sanitizeHTML(this.item.body?.itemBody, this.sanitizer),\n\t\t\t\t\t  } as ItemTemplateContext),\n\t\t\titemNum: this.isNumbered ? +this.item.itemId + 1 : null,\n\t\t} as Partial<AccordionItem>;\n\n\t\tthis.hostCmp.isOpen$ = this.itemStatusSvc.itemsOpen$.pipe(\n\t\t\ttakeUntil(this.hostDestroy$$),\n\t\t\tfilter((val) => !!val && !!val.length),\n\t\t\tmap((toggles: IToggler[]) => toggles.find(({ itemId }) => itemId === +this.item.itemId)!),\n\t\t\tpluck<IToggler, 'isOpen'>('isOpen'),\n\t\t\ttap((isOpen = false) => (this.isOpen = isOpen))\n\t\t);\n\t}\n\n\tngAfterViewInit() {\n\t\tconst nativeEl = this.hostElRef.nativeElement;\n\t\tconst itemEl = nativeEl.getElementsByClassName('accord-item').item(0) as HTMLElement;\n\t\tconst headEl = nativeEl.getElementsByClassName('accord-item__header').item(0) as HTMLElement;\n\t\tconst bodyEl = nativeEl.getElementsByClassName('accord-item__body').item(0) as HTMLElement;\n\n\t\t{\n\t\t\t/** set up the accordion item header images\\' sources */\n\t\t\tconst headElLogoImgEl = headEl.getElementsByClassName('accord-item__header--start-img').item(0) as HTMLImageElement;\n\t\t\tconst headElCloserImgEl = headEl.getElementsByClassName('accord-item__header--end-img').item(0) as HTMLImageElement;\n\t\t\tthis.logo && this.render.setAttribute(headElLogoImgEl, 'data-src', this.logo);\n\t\t\tthis.openSign && this.render.setAttribute(headElCloserImgEl, 'data-opensrc', this.openSign);\n\t\t\tthis.closeSign && this.render.setAttribute(headElCloserImgEl, 'data-closesrc', this.closeSign);\n\t\t\tthis.cd.detectChanges();\n\t\t}\n\n\t\tthis.render.setStyle(itemEl, 'margin', this.itemStyles.margin ?? '0');\n\t\tthis.render.setStyle(itemEl, 'padding', this.itemStyles.padding ?? '0');\n\t\tthis.itemStyles.font && this.render.setStyle(itemEl, 'font', this.itemStyles.font);\n\t\tthis.itemStyles.fontSize && this.render.setStyle(itemEl, 'font-size', this.itemStyles.fontSize);\n\t\tthis.itemStyles.fontStyle && this.render.setStyle(itemEl, 'font-style', this.itemStyles.fontStyle);\n\t\tthis.itemStyles.fontFamily && this.render.setStyle(itemEl, 'font-family', this.itemStyles.fontFamily);\n\t\tthis.render.setStyle(itemEl, 'margin-bottom', this.itemStyles.marginBottom);\n\t\tthis.render.setStyle(itemEl, 'margin-top', this.itemStyles.marginTop);\n\t\tthis.itemStyles.headBgColor && nativeEl.style.setProperty('--ngxd-head-item-color', this.itemStyles.headBgColor);\n\n\t\tthis.itemStyles.headHeight && this.render.setStyle(headEl, 'height', this.itemStyles.headHeight);\n\t\tthis.itemStyles.headFont && this.render.setStyle(headEl, 'font', this.itemStyles.headFont);\n\t\tthis.render.setStyle(headEl, 'font-size', this.itemStyles.headFontSize ?? '1.1rem');\n\t\tthis.render.setStyle(headEl, 'color', this.itemStyles.headColor ?? '#ccc');\n\n\t\tthis.render.setStyle(bodyEl, 'background-color', this.itemStyles.bodyBgColor ?? 'rgba(200, 200, 200, 0.2)');\n\t\tthis.render.setStyle(bodyEl, 'color', this.itemStyles.bodyColor ?? '#000');\n\t\tthis.render.setStyle(bodyEl, 'padding', this.itemStyles.bodyPadding ?? '.1rem');\n\t\tthis.render.setStyle(bodyEl, 'margin', this.itemStyles.bodyMargin ?? '0');\n\t\tthis.itemStyles.bodyFont && this.render.setStyle(bodyEl, 'font', this.itemStyles.bodyFont);\n\t\tthis.render.setStyle(bodyEl, 'font-size', this.itemStyles.bodyFontSize ?? '1rem');\n\t\tthis.itemStyles.bodyTextAlign && this.render.setStyle(bodyEl, 'text-align', this.itemStyles.bodyTextAlign);\n\n\t\tthis.render.setStyle(bodyEl, 'cursor', this.bodyDblclkClose ? 'grab' : 'default');\n\t}\n\n\tngOnDestroy() {\n\t\tthis.hostDestroy$$.next();\n\t\tthis.hostDestroy$$.complete();\n\t}\n\n\tonClick = ([{ outerHTML }, { dataset }]: [{ outerHTML: string }, { dataset: any }]) =>\n\t\t!!outerHTML && !!dataset && outerHTML.includes('header') ? this._handleClick({ ...dataset }) : void 0;\n\n\tonDblClick = ([{ outerHTML }, { dataset }]: [{ outerHTML: string }, { dataset: any }]) =>\n\t\t!!outerHTML && this.bodyDblclkClose && outerHTML.includes('accord-item__body') ? this._handleClick({ ...dataset }) : void 0;\n\n\tprivate _handleClick = ({ idx, ...rest } = { idx: -1 }) => this._toggle(+idx);\n\tprivate _toggle = (itemId: number) => this.toggled.emit({ itemId, isOpen: !this.isOpen });\n}\n","<!--\n/*!\n * @ngx-dummy/Accordion-Simple library\n * Simple accordion created for angular / ionic projects.\n * https://github.com/ngx-dummy/accordion-simple\n *\n * Copyright  Vladimir Ovsyukov <ovsyukov@yandex.com>\n * Published under GNU LGPLv3 License\n */ \n-->\n<div class=\"accordion\">\n\t<ng-container *ngIf=\"!!accordionItems; then itemsTmpl; else $any(loadingTpl)\"> </ng-container>\n</div>\n\n<ng-template #itemsTmpl>\n\t<ng-container *ngFor=\"let item of accordionItems; trackBy: trackByFn\" [ngTemplateOutlet]=\"accordItemTmpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n</ng-template>\n\n<ng-template #accordItemTmpl let-item>\n\t<ngxd-accordion-item\n\t\t[ngxdAccordionItem]=\"item\"\n\t\t[isNumbered]=\"_isNumbered\"\n\t\t[bodyDblclkClose]=\"_bodyDblclkClose\"\n\t\t[openSign]=\"openSign\"\n\t\t[closeSign]=\"closeSign\"\n\t\t[logo]=\"listLogo\"\n\t\t[styling]=\"_itemStyle\"\n\t\t[attr.data-idx]=\"item.itemId\"\n\t\t[id]=\"item.id\"\n\t\t(toggled)=\"onItemToggled($event)\"\n\t\t@accordItemsIn\n\t></ngxd-accordion-item>\n</ng-template>\n\n<ng-template #defloadingTpl>\n\t<style>\n\t\t.accordion-default-loader--tmpl {\n\t\t\tdisplay: block;\n\t\t\tborder-radius: 50%;\n\t\t\tbackground-color: transparent;\n\t\t\tmin-height: 50px;\n\t\t\tmin-width: 50px;\n\t\t}\n\t\t.accordion-default-loader--tmpl > svg {\n\t\t\tfill: var(--dark-bg);\n\t\t\ttransform: rotate(90deg);\n\t\t}\n\t\t.accordion-default-loader--tmpl > svg rect:first-of-type {\n\t\t\tfill: var(--darker-color);\n\t\t}\n\t\t.accordion-default-loader--tmpl > svg rect:nth-of-type(2) {\n\t\t\tfill: var(--accent-color);\n\t\t}\n\t\t.accordion-default-loader--tmpl > svg rect:nth-of-type(3) {\n\t\t\tfill: var(--dark-blue-color);\n\t\t}\n\t</style>\n\t<div class=\"accordion-default-loader--tmpl\" @spinnerIn>\n\t\t<svg width=\"51px\" height=\"50px\" viewBox=\"0 0 51 50\">\n\t\t\t<rect y=\"0\" width=\"13\" height=\"50\">\n\t\t\t\t<animate attributeName=\"height\" values=\"50;10;50\" begin=\"0s\" dur=\"1s\" repeatCount=\"indefinite\" />\n\t\t\t\t<animate attributeName=\"y\" values=\"0;20;0\" begin=\"0s\" dur=\"1s\" repeatCount=\"indefinite\" />\n\t\t\t</rect>\n\t\t\t<rect x=\"19\" y=\"0\" width=\"13\" height=\"50\">\n\t\t\t\t<animate attributeName=\"height\" values=\"50;10;50\" begin=\"0.2s\" dur=\"1s\" repeatCount=\"indefinite\" />\n\t\t\t\t<animate attributeName=\"y\" values=\"0;20;0\" begin=\"0.2s\" dur=\"1s\" repeatCount=\"indefinite\" />\n\t\t\t</rect>\n\t\t\t<rect x=\"38\" y=\"0\" width=\"13\" height=\"50\">\n\t\t\t\t<animate attributeName=\"height\" values=\"50;10;50\" begin=\"0.4s\" dur=\"1s\" repeatCount=\"indefinite\" />\n\t\t\t\t<animate attributeName=\"y\" values=\"0;20;0\" begin=\"0.4s\" dur=\"1s\" repeatCount=\"indefinite\" />\n\t\t\t</rect>\n\t\t</svg>\n\t</div>\n</ng-template>\n","/*!\r\n * @ngx-dummy/Accordion-Simple library\r\n * Simple accordion created for angular / ionic projects.\r\n * https://github.com/ngx-dummy/accordion-simple\r\n *\r\n * Copyright  Vladimir Ovsyukov <ovsyukov@yandex.com>\r\n * Published under GNU LGPLv3 License\r\n */\r\nimport {\r\n\tComponent,\r\n\tInput,\r\n\tHostBinding,\r\n\tChangeDetectionStrategy,\r\n\tOnInit,\r\n\tSelf,\r\n\tSimpleChanges,\r\n\tOnChanges,\r\n\tOnDestroy,\r\n\tTemplateRef,\r\n\tViewChild,\r\n\tElementRef,\r\n\tRenderer2,\r\n} from '@angular/core';\r\nimport { map, filter } from 'rxjs/operators';\r\n\r\nimport { AccordionOpenService } from './accordion-open.service';\r\nimport { accordionAnimations } from './animations';\r\nimport { Accordion, IAccordionStyling, IAccordionItemStyling, IToggler, AccordionItemInternal, AccordionInternal, pluckIToggler, pluckOpenTogglesIdsToStr } from './settings/';\r\n\r\n@Component({\r\n\tselector: 'ngxd-accordion',\r\n\texportAs: 'ngxdAccordion',\r\n\ttemplateUrl: './accordion.component.html',\r\n\tstyleUrls: ['./accordion.component.scss'],\r\n\tanimations: [accordionAnimations.accordItemsIn, accordionAnimations.spinnerIn],\r\n\tviewProviders: [AccordionOpenService],\r\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class AccordionComponent implements OnInit, OnChanges, OnDestroy {\r\n\tstatic idx = 0;\r\n\t@ViewChild('defloadingTpl', { read: TemplateRef, static: true }) private defloadingTpl!: TemplateRef<Element>;\r\n\t@HostBinding('attr.data-items-opened') _openedItems: string;\r\n\t@HostBinding('attr.id') get id() {\r\n\t\treturn `${this.attributes.id}`;\r\n\t}\r\n\t@HostBinding('attr.name') get name() {\r\n\t\treturn this.attributes.name;\r\n\t}\r\n\t@Input() set accordionList(acc: Accordion) {\r\n\t\tlet [name, id] = [(!!acc && !!acc['name']?.length && acc.name) || 'Sample-Accordion', (!!acc && !!acc['id'] && acc.id) || `accordion_${++AccordionComponent.idx}`];\r\n\t\tthis._accord = Object.assign(\r\n\t\t\t{ id, name },\r\n\t\t\t{\r\n\t\t\t\titems: acc?.items.map(\r\n\t\t\t\t\t(item, i) =>\r\n\t\t\t\t\t\t<AccordionItemInternal>{\r\n\t\t\t\t\t\t\t...item,\r\n\t\t\t\t\t\t\tid: !!item.id && typeof item.id === 'string' ? item.id : `${id}__accord-item_${i}`,\r\n\t\t\t\t\t\t\titemId: i,\r\n\t\t\t\t\t\t}\r\n\t\t\t\t),\r\n\t\t\t}\r\n\t\t) as AccordionInternal;\r\n\t}\r\n\tget accordionItems(): AccordionItemInternal[] {\r\n\t\treturn this._accord?.items;\r\n\t}\r\n\t@Input() openSign: string;\r\n\t@Input() closeSign: string;\r\n\t@Input() listLogo: string;\r\n\t@Input() accordionStyling: IAccordionStyling = {\r\n\t\tnumberedItems: false,\r\n\t\tisMultiShow: false,\r\n\t\tbodyDblclkCloseItems: false,\r\n\t\tmaxWidth: '100%',\r\n\t\titemsGuts: '1rem',\r\n\t\tmargin: '0',\r\n\t\titemStyling: {\r\n\t\t\theadBgColor: '#4197b2',\r\n\t\t\theadColor: '#fff',\r\n\t\t\tbodyBgColor: '#fff',\r\n\t\t\tbodyColor: '#000',\r\n\t\t\tmargin: '0',\r\n\t\t\tpadding: '0',\r\n\t\t},\r\n\t};\r\n\t@Input() set loadingTpl(val: TemplateRef<Element>) {\r\n\t\tthis._loadingTpl = val || this.defloadingTpl;\r\n\t}\r\n\tget loadingTpl(): TemplateRef<Element> {\r\n\t\treturn this._loadingTpl ?? this.defloadingTpl;\r\n\t}\r\n\t_bodyDblclkClose = false;\r\n\t_itemStyle: IAccordionItemStyling;\r\n\t_isNumbered = false;\r\n\r\n\tprivate _loadingTpl: TemplateRef<Element>;\r\n\tprivate _accord: AccordionInternal;\r\n\tprivate multiSelect = false;\r\n\r\n\tconstructor(@Self() private itemsOpenSvc: AccordionOpenService, private hostEl: ElementRef<Element>, private renderer: Renderer2) {}\r\n\r\n\tngOnInit() {\r\n\t\tthis._bodyDblclkClose = !!this.accordionStyling.bodyDblclkCloseItems ?? false;\r\n\t\tthis.multiSelect = !!this.accordionStyling.isMultiShow ?? false;\r\n\t\tthis.itemsOpenSvc.itemsOpen$\r\n\t\t\t.pipe(\r\n\t\t\t\tfilter((val) => !!val?.length),\r\n\t\t\t\tmap(pluckOpenTogglesIdsToStr)\r\n\t\t\t)\r\n\t\t\t.subscribe((ids) => (this._openedItems = ids));\r\n\r\n\t\tthis._isNumbered = this.accordionStyling.numberedItems ?? false;\r\n\t\tthis._bodyDblclkClose = this.accordionStyling.bodyDblclkCloseItems ?? false;\r\n\r\n\t\tlet itemStyles: IAccordionItemStyling = Array.isArray(this.accordionStyling.itemStyling)\r\n\t\t\t? this.accordionStyling.itemStyling.reduce((accu = {}, curr) => ({ ...accu, ...curr }))\r\n\t\t\t: { ...this.accordionStyling.itemStyling };\r\n\r\n\t\tconst itemsGuts = this.accordionStyling.itemsGuts ?? 0;\r\n\t\titemStyles = {\r\n\t\t\tpadding: '0',\r\n\t\t\tmarginBottom: itemsGuts,\r\n\t\t\tmarginTop: itemsGuts,\r\n\t\t\t...itemStyles,\r\n\t\t};\r\n\t\tthis._itemStyle = Object.entries(itemStyles)\r\n\t\t\t.map(([key, val]) => ({\r\n\t\t\t\t[key]: typeof val === 'number' ? `${val}px` : val,\r\n\t\t\t}))\r\n\t\t\t.reduce((accu, val) => ({ ...accu, ...val }));\r\n\r\n\t\tconst accordEl = this.hostEl.nativeElement;\r\n\t\tthis.renderer.setStyle(accordEl, 'max-width', this.accordionStyling.maxWidth ?? '100%');\r\n\t\tthis.renderer.setStyle(accordEl, 'margin', this.accordionStyling.margin ?? '0');\r\n\t}\r\n\r\n\tngOnChanges(changes: SimpleChanges) {\r\n\t\tObject.keys(changes).forEach((prop) => {\r\n\t\t\tif (prop === 'accordionList' && changes[prop].previousValue !== changes[prop].currentValue) this.itemsOpenSvc.setItemsOpen(this.accordionItems?.map(pluckIToggler));\r\n\t\t});\r\n\t}\r\n\r\n\tngOnDestroy() {\r\n\t\tthis.itemsOpenSvc.close();\r\n\t}\r\n\r\n\tonItemToggled = ({ itemId, isOpen }: IToggler = { itemId: 0, isOpen: false }) =>\r\n\t\tthis.itemsOpenSvc.setItemsOpen(\r\n\t\t\tthis.itemsOpenSvc.itemsOpenSnapshot.map(\r\n\t\t\t\t({ itemId: eId, isOpen: opened }) =>\r\n\t\t\t\t\t(eId === +itemId\r\n\t\t\t\t\t\t? { itemId, isOpen }\r\n\t\t\t\t\t\t: {\r\n\t\t\t\t\t\t\t\titemId: eId,\r\n\t\t\t\t\t\t\t\tisOpen: this.multiSelect ? opened : false,\r\n\t\t\t\t\t\t  }) as IToggler\r\n\t\t\t)\r\n\t\t);\r\n\r\n\tpublic closeAll = () => this.accordionItems?.forEach(({ itemId, ...rest }) => this.onItemToggled({ itemId, isOpen: false }));\r\n\r\n\tpublic trackByFn = (_ind: number, { itemId, ...rest }: any) => +itemId;\r\n\r\n\tprivate get attributes(): Partial<Accordion> {\r\n\t\tconst { id, name } = this._accord;\r\n\t\treturn { id, name };\r\n\t}\r\n}\r\n","<!-- \n  /*!\n * @ngx-dummy/Accordion-Simple library\n * Simple accordion created for angular / ionic projects.\n * https://github.com/ngx-dummy/accordion-simple\n *\n * Copyright  Vladimir Ovsyukov <ovsyukov@yandex.com>\n * Published under GNU LGPLv3 License\n */\n -->\n<div class=\"mdc-layout-grid\">\n\t<div class=\"mdc-layout-grid__inner mb-1\">\n\t\t<div class=\"mdc-layout-grid__cell mdc-layout-grid__cell--span-6 mdc-layout-grid__cell--span-12-phone mdc-layout-grid__cell--span-12-tablet align\">\n\t\t\t<h2 class=\"text-center app-title\">{{ title }}</h2>\n\t\t</div>\n\t\t<div class=\"mdc-layout-grid__cell mdc-layout-grid__cell--span-6 mdc-layout-grid__cell--span-12-phone mdc-layout-grid__cell--span-12-tablet align\">\n\t\t\t<div class=\"mdc-touch-target-wrapper\">\n\t\t\t\t<button class=\"mdc-button mdc-button--touch light-bg\" (click)=\"acc1.closeAll(); acc2.closeAll()\">\n\t\t\t\t\t<div class=\"mdc-button__ripple\"></div>\n\t\t\t\t\t<span>Close All</span>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<div class=\"mdc-layout-grid__inner mb-1\">\n\t\t<div class=\"mdc-layout-grid__cell mdc-layout-grid__cell--span-12\">\n\t\t\t<ngxd-accordion #acc1=\"ngxdAccordion\" [accordionList]=\"accordList2\" [accordionStyling]=\"styling\" openSign=\"plus.png\" closeSign=\"minus.png\"></ngxd-accordion>\n\t\t</div>\n\t</div>\n\t<div class=\"mdc-layout-grid__inner\">\n\t\t<div class=\"mdc-layout-grid__cell mdc-layout-grid__cell--span-12\">\n\t\t\t<ngxd-accordion\n\t\t\t\t#acc2=\"ngxdAccordion\"\n\t\t\t\t[loadingTpl]=\"simpleLoader\"\n\t\t\t\t[accordionList]=\"accordList$ | async\"\n\t\t\t\t[accordionStyling]=\"styling1\"\n\t\t\t\tlistLogo=\"list_white_48dp.png\"\n\t\t\t></ngxd-accordion>\n\t\t</div>\n\t</div>\n</div>\n\n<ng-template #simpleLoader>\n\t<style>\n\t\t:host {\n\t\t\t--spin-bg: #46cccc;\n\t\t\t--spin-in-bg: #4adada;\n\t\t}\n\n\t\t.container-transparent {\n\t\t\tbackground: transparent;\n\t\t\tdisplay: grid;\n\t\t\tmin-height: 6rem;\n\t\t\twidth: 100%;\n\t\t\tplace-content: center;\n\t\t}\n\n\t\t.loader {\n\t\t\twidth: 3rem;\n\t\t\theight: 3rem;\n\t\t\tborder: 0.3rem solid var(--spin-bg);\n\t\t\tanimation: spin 2s infinite ease-in-out;\n\t\t}\n\n\t\t.loader-inner {\n\t\t\tvertical-align: top;\n\t\t\tdisplay: inline-block;\n\t\t\twidth: 100%;\n\t\t\tbackground-color: var(--spin-in-bg);\n\t\t\tanimation: spin-in 2s infinite ease-in;\n\t\t}\n\n\t\t@keyframes spin {\n\t\t\t0% {\n\t\t\t\topacity: 0.4;\n\t\t\t\ttransform: rotate(0deg);\n\t\t\t}\n\n\t\t\t25% {\n\t\t\t\topacity: 0.6;\n\t\t\t\ttransform: rotate(180deg);\n\t\t\t}\n\n\t\t\t50% {\n\t\t\t\topacity: 0.9;\n\t\t\t\ttransform: rotate(180deg);\n\t\t\t}\n\n\t\t\t75% {\n\t\t\t\topacity: 1;\n\t\t\t\ttransform: rotate(390deg);\n\t\t\t}\n\n\t\t\t100% {\n\t\t\t\topacity: 0.9;\n\t\t\t\ttransform: rotate(360deg);\n\t\t\t}\n\t\t}\n\n\t\t@keyframes spin-in {\n\t\t\t0% {\n\t\t\t\topacity: 0.4;\n\t\t\t\theight: 0%;\n\t\t\t}\n\n\t\t\t25% {\n\t\t\t\topacity: 0.6;\n\t\t\t\theight: 0%;\n\t\t\t}\n\n\t\t\t50% {\n\t\t\t\topacity: 0.9;\n\t\t\t\theight: 100%;\n\t\t\t}\n\n\t\t\t75% {\n\t\t\t\topacity: 1;\n\t\t\t\theight: 100%;\n\t\t\t}\n\n\t\t\t100% {\n\t\t\t\topacity: 0.9;\n\t\t\t\theight: 0%;\n\t\t\t}\n\t\t}\n\t</style>\n\t<div class=\"container-transparent\" @moveIn>\n\t\t<span class=\"loader\"><span class=\"loader-inner\"></span></span>\n\t</div>\n</ng-template>\n\n<ng-template #simpleBodyTmpl let-ctxcontent>\n\t<style>\n\t\t.tmpl-item-container {\n\t\t\tfont-family: 'Roboto', sans-serif !important;\n\t\t}\n\n\t\t.head6 {\n\t\t\tfont-style: italic;\n\t\t\tmargin: 1.1rem;\n\t\t}\n\n\t\t.subtitle1 {\n\t\t\tcolor: var(--mdc-theme-text-primary-on-dark, rgba(250, 250, 250, 0.9));\n\t\t\ttext-align: start;\n\t\t\tmargin: 0.1rem 1rem;\n\t\t\tfont-family: Lato;\n\t\t}\n\n\t\t.subtitle2 {\n\t\t\tcolor: var(--mdc-theme-text-primary-on-light, rgba(250, 250, 250, 0.9));\n\t\t\ttext-align: start;\n\t\t\tmargin: 0.1rem 1rem;\n\t\t}\n\n\t\t.card-media__items {\n\t\t\tposition: absolute;\n\t\t\tbottom: 1rem;\n\t\t\tleft: 0.4rem;\n\t\t}\n\n\t\t.tmpl-item-logo {\n\t\t\tbackground-image: url('myTwitLogo.png');\n\t\t}\n\n\t\t.tmpl-main-content {\n\t\t\tbackground-color: floralwhite;\n\t\t\tfont-size: medium;\n\t\t}\n\n\t\t.body2 {\n\t\t\tmargin: 0.4rem 1rem;\n\t\t}\n\n\t\t.tmpl-footer {\n\t\t\tbackground-color: lavenderblush;\n\t\t\tcolor: black;\n\t\t\tfont-size: xx-small;\n\t\t}\n\n\t\t@media screen and (max-width: 500px) {\n\t\t\t.head6 {\n\t\t\t\tfont-size: 1rem;\n\t\t\t\tmargin: 0.1rem;\n\t\t\t}\n\n\t\t\t.subtitle1 {\n\t\t\t\tfont-size: 0.4rem;\n\t\t\t}\n\n\t\t\t.subtitle2 {\n\t\t\t\tfont-size: 0.2rem;\n\t\t\t}\n\n\t\t\t.flex-card__tmpl {\n\t\t\t\tdisplay: grid;\n\t\t\t\tflex-direction: column;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tflex-wrap: wrap !important;\n\t\t\t}\n\t\t}\n\t</style>\n\t<ng-container ngProjectAs=\"tmpl-item-card__container\">\n\t\t<div class=\"mdc-card tmpl-item-container\">\n\t\t\t<div class=\"tmpl-header\">\n\t\t\t\t<h6 class=\"mdc-typography mdc-typography--headline6 head6\">Custom templated Item sample</h6>\n\t\t\t</div>\n\t\t\t<div class=\"mdc-card__primary-action\" tabindex=\"0\">\n\t\t\t\t<div\n\t\t\t\t\tclass=\"mdc-card__media mdc-card__media--16-9 demo-card__media tmpl-item-logo\"\n\t\t\t\t\tonclick=\"location.href='//twitter.com/intent/tweet?ref_src=twsrc%5Etfw&original_referer=https%3A%2F%2Fngx-dummy.github.io%2Faccordion-simple%2F&url=https%3A%2F%2Fgithub.com%2Fvovansuper%2Faccordion-simple&text=ngx-dummy Accordion simple component'\"\n\t\t\t\t>\n\t\t\t\t\t<div class=\"mdc-card__media-content demo-card__media-content\">\n\t\t\t\t\t\t<div class=\"card-media__items\">\n\t\t\t\t\t\t\t<h3 class=\"mdc-typography mdc-typography--subtitle1 subtitle1\">by Vladimir Ovsyukov</h3>\n\t\t\t\t\t\t\t<h6 class=\"mdc-typography mdc-typography--subtitle2 subtitle1\">https://github.com/VovanSuper</h6>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"mdc-typography mdc-typography--body2 mt-1 mb-1 body2\" [innerHTML]=\"ctxcontent\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"mdc-card__actions flex-card__tmpl\">\n\t\t\t\t<div class=\"mdc-card__action-buttons\">\n\t\t\t\t\t<button class=\"mdc-button mdc-card__action mdc-card__action--button\" onclick=\"location.href='//github.com/ngx-dummy/accordion-simple'\">\n\t\t\t\t\t\t<span class=\"mdc-button__ripple\"></span>\n\t\t\t\t\t\t<span class=\"material-icons\">description</span>\n\t\t\t\t\t\tDocs\n\t\t\t\t\t</button>\n\t\t\t\t\t<button class=\"mdc-button mdc-card__action mdc-card__action--button\" onclick=\"location.href='//github.com/VovanSuper' \" aria-label=\"Follow VovanSuper on GitHub\">\n\t\t\t\t\t\t<span class=\"mdc-button__ripple\"></span>\n\t\t\t\t\t\t<span class=\"material-icons\">thumb_up_alt</span>\n\t\t\t\t\t\tFollow\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"mdc-card__action-icons\">\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"mdc-icon-button mdc-card__action mdc-card__action--icon--unbounded\"\n\t\t\t\t\t\taria-pressed=\"false\"\n\t\t\t\t\t\taria-label=\"Sponsor\"\n\t\t\t\t\t\ttitle=\"Sponsor\"\n\t\t\t\t\t\tonclick=\"location.href='//github.com/sponsors/ngx-dummy'\"\n\t\t\t\t\t\tdata-icon=\"octicon-heart\"\n\t\t\t\t\t\taria-label=\"Sponsor Me on GitHub\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<i class=\"material-icons mdc-icon-button__icon mdc-icon-button__icon--on\">favorite</i>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"mdc-icon-button material-icons mdc-card__action mdc-card__action--icon--unbounded\"\n\t\t\t\t\t\ttitle=\"Share\"\n\t\t\t\t\t\tdata-mdc-ripple-is-unbounded=\"true\"\n\t\t\t\t\t\tonclick=\"location.href='//twitter.com/intent/tweet?ref_src=twsrc%5Etfw&original_referer=https%3A%2F%2Fngx-dummy.github.io%2Faccordion-simple%2F&url=https%3A%2F%2Fgithub.com%2Fvovansuper%2Faccordion-simple&text=ngx-dummy Accordion simple component'\"\n\t\t\t\t\t>\n\t\t\t\t\t\tshare\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</ng-container>\n</ng-template>\n\n<ng-template #tmpl2 let-ctxcontent>\n\t<style scoped>\n\t\t.row {\n\t\t\tmargin-left: auto;\n\t\t\tmargin-right: auto;\n\t\t\tmargin-bottom: 20px;\n\t\t}\n\t\t.row .col {\n\t\t\tfloat: left;\n\t\t\t-webkit-box-sizing: border-box;\n\t\t\tbox-sizing: border-box;\n\t\t\tpadding: 0 0.75rem;\n\t\t\tmin-height: 1px;\n\t\t}\n\t\t.row .col.s12 {\n\t\t\twidth: 100%;\n\t\t\tmargin-left: auto;\n\t\t\tleft: auto;\n\t\t\tright: auto;\n\t\t}\n\t\t.row:after {\n\t\t\tcontent: '';\n\t\t\tdisplay: table;\n\t\t\tclear: both;\n\t\t}\n\t\t.card {\n\t\t\tposition: relative;\n\t\t\tmargin: 0.5rem 0 1rem 0;\n\t\t\tbackground-color: #fff;\n\t\t\t-webkit-transition: -webkit-box-shadow 0.25s;\n\t\t\ttransition: -webkit-box-shadow 0.25s;\n\t\t\ttransition: box-shadow 0.25s;\n\t\t\ttransition: box-shadow 0.25s, -webkit-box-shadow 0.25s;\n\t\t\tborder-radius: 2px;\n\t\t}\n\t\t.card.large .card-image {\n\t\t\tmax-height: 60%;\n\t\t\tposition: relative;\n\t\t\toverflow: hidden;\n\t\t}\n\t\t.card .card-image img {\n\t\t\tdisplay: block;\n\t\t\tborder-radius: 2px 2px 0 0;\n\t\t\tposition: relative;\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\ttop: 0;\n\t\t\tbottom: 0;\n\t\t\twidth: 100%;\n\t\t}\n\t\t.card .card-image .card-title {\n\t\t\tfont-size: 24px;\n\t\t\tfont-weight: 300;\n\t\t\tcolor: #fff;\n\t\t\tposition: absolute;\n\t\t\tbottom: 0;\n\t\t\tleft: 0;\n\t\t\tmax-width: 100%;\n\t\t\tpadding: 24px;\n\t\t}\n\t\t.btn-floating.halfway-fab {\n\t\t\tposition: absolute;\n\t\t\tright: 24px;\n\t\t\tbottom: -20px;\n\t\t}\n\t\t.waves-effect {\n\t\t\tposition: relative;\n\t\t\tcursor: pointer;\n\t\t\tdisplay: inline-block;\n\t\t\toverflow: hidden;\n\t\t\t-webkit-user-select: none;\n\t\t\t-moz-user-select: none;\n\t\t\t-ms-user-select: none;\n\t\t\tuser-select: none;\n\t\t\t-webkit-tap-highlight-color: transparent;\n\t\t\tvertical-align: middle;\n\t\t\tz-index: 1;\n\t\t\t-webkit-transition: 0.3s ease-out;\n\t\t\ttransition: 0.3s ease-out;\n\t\t}\n\t\t.btn-floating {\n\t\t\tfont-size: 14px;\n\t\t\toutline: 0;\n\t\t\tdisplay: inline-block;\n\t\t\tcolor: #fff;\n\t\t\tposition: relative;\n\t\t\toverflow: hidden;\n\t\t\tz-index: 1;\n\t\t\twidth: 40px;\n\t\t\theight: 40px;\n\t\t\tline-height: 40px;\n\t\t\tpadding: 0;\n\t\t\tbackground-color: #26a69a;\n\t\t\tborder-radius: 50%;\n\t\t\t-webkit-transition: background-color 0.3s;\n\t\t\ttransition: background-color 0.3s;\n\t\t\tcursor: pointer;\n\t\t\tvertical-align: middle;\n\t\t}\n\t\t.red {\n\t\t\tbackground-color: var(--mdc-theme-on-primary, #fff);\n\t\t}\n\t\t.card .card-content {\n\t\t\t/* overflow: hidden; */\n\t\t\tmax-height: 40%;\n\t\t\tmargin: 1rem;\n\t\t}\n\t\t.material-icons {\n\t\t\tfont-family: 'Material Icons';\n\t\t\tfont-weight: normal;\n\t\t\tfont-style: normal;\n\t\t\tfont-size: 24px;\n\t\t\tline-height: 1;\n\t\t\tletter-spacing: normal;\n\t\t\ttext-transform: none;\n\t\t\tdisplay: inline-block;\n\t\t\twhite-space: nowrap;\n\t\t\tword-wrap: normal;\n\t\t\tdirection: ltr;\n\t\t\t-webkit-font-feature-settings: 'liga';\n\t\t\t-webkit-font-smoothing: antialiased;\n\t\t}\n\t\ta.btn-floating[title='Share'] {\n\t\t\tbottom: 0.5rem;\n\t\t\tright: 1rem;\n\t\t\ttext-align: center;\n\t\t\tdisplay: grid;\n\t\t\tplace-content: center;\n\t\t}\n\t</style>\n\n\t<div class=\"container materializelikes\">\n\t\t<div class=\"row\">\n\t\t\t<div class=\"div col s12 l12 center-align\" style=\"font-size: 1.5rem; line-height: 110%; margin: 0.1rem; color: var(--darker-color)\">\n\t\t\t\tSample Accordion Item (alike one of materializecss)\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"row\">\n\t\t\t<div class=\"col s12\">\n\t\t\t\t<div class=\"row\">\n\t\t\t\t\t<div class=\"col s12 m12\">\n\t\t\t\t\t\t<div class=\"card large\">\n\t\t\t\t\t\t\t<div class=\"card-image\">\n\t\t\t\t\t\t\t\t<img src=\"myTwitLogo.png\" />\n\t\t\t\t\t\t\t\t<span class=\"card-title\">Simple material template Card</span>\n\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\tclass=\"btn-floating halfway-fab waves-effect waves-light red\"\n\t\t\t\t\t\t\t\t\ttitle=\"Share\"\n\t\t\t\t\t\t\t\t\tdata-mdc-ripple-is-unbounded=\"true\"\n\t\t\t\t\t\t\t\t\tonclick=\"location.href='//twitter.com/intent/tweet?ref_src=twsrc%5Etfw&original_referer=https%3A%2F%2Fngx-dummy.github.io%2Faccordion-simple%2F&url=https%3A%2F%2Fgithub.com%2Fvovansuper%2Faccordion-simple&text=ngx-dummy Accordion simple component'\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<i class=\"material-icons\">share</i>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div class=\"card-content\">\n\t\t\t\t\t\t\t\t<p>{{ ctxcontent }}</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</ng-template>\n","/*!\n * @ngx-dummy/Accordion-Simple library\n * Simple accordion created for angular / ionic projects.\n * https://github.com/ngx-dummy/accordion-simple\n *\n * Copyright  Vladimir Ovsyukov <ovsyukov@yandex.com>\n * Published under GNU LGPLv3 License\n */\nimport { Component, ViewChild, TemplateRef, OnInit, AfterViewInit } from '@angular/core';\nimport { delay } from 'rxjs/operators';\nimport { of } from 'rxjs';\nimport { MDCRipple } from '@material/ripple';\n\nimport { IAccordionStyling, Accordion } from '@ngx-dummy/accordion-simple/settings';\nimport { dummyAccordionList1 as list1, dummyAccordionList2 } from './helpers/dummy-data';\nimport { loaderIn } from './loader.anim';\n\n@Component({\n\tselector: 'app-root',\n\tanimations: [loaderIn],\n\ttemplateUrl: './app.component.html',\n\tstyleUrls: ['./app.component.scss'],\n})\nexport class AppComponent implements OnInit, AfterViewInit {\n\t@ViewChild('simpleBodyTmpl', { static: true }) simpleBodyTmpl: TemplateRef<HTMLElement>;\n\t@ViewChild('tmpl2', { static: true }) tmpl2: TemplateRef<HTMLElement>;\n\ttitle = 'Accordion Sample';\n\taccordList2: Accordion = null;\n\taccordList$ = of(dummyAccordionList2).pipe(delay(3000));\n\n\tstyling: IAccordionStyling = {\n\t\titemsGuts: '.1rem',\n\t\tmaxWidth: '99%',\n\t\tmargin: '.1rem',\n\t\tnumberedItems: true,\n\t\titemStyling: {\n\t\t\theadBgColor: '#89a',\n\t\t\theadColor: '#fff',\n\t\t\tmargin: '.1rem',\n\t\t\tbodyPadding: '1rem',\n\t\t\tbodyMargin: 1,\n\t\t},\n\t};\n\n\tstyling1: IAccordionStyling = {\n\t\t...this.styling,\n\t\titemsGuts: 0,\n\t\tnumberedItems: false,\n\t\tmargin: '0 auto',\n\t\tisMultiShow: true,\n\t\tmaxWidth: '94%',\n\t\tbodyDblclkCloseItems: true,\n\n\t\titemStyling: {\n\t\t\t...this.styling.itemStyling,\n\t\t\theadBgColor: 'darkcyan',\n\t\t\theadColor: 'yellow',\n\t\t\tbodyColor: '#aaffff',\n\t\t\tbodyBgColor: '#87a3d1',\n\t\t\tfont: 'Comic Sans MS',\n\t\t\tbodyPadding: 1,\n\t\t\tbodyMargin: 0,\n\t\t\tbodyTextAlign: 'left',\n\t\t\tmargin: 0,\n\t\t},\n\t};\n\n\tngOnInit() {\n\t\tthis.accordList2 = {\n\t\t\t...list1,\n\t\t\titems: [\n\t\t\t\t...list1.items\n\t\t\t\t\t.map((item) =>\n\t\t\t\t\t\titem.title.includes('Accordion Card 2')\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t...item,\n\t\t\t\t\t\t\t\t\tbody: {\n\t\t\t\t\t\t\t\t\t\titemTemplate: this.simpleBodyTmpl,\n\t\t\t\t\t\t\t\t\t\titemBody: item.body,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: { ...item }\n\t\t\t\t\t)\n\t\t\t\t\t.map((item) =>\n\t\t\t\t\t\titem.title.includes('Accordion Card 1')\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t...item,\n\t\t\t\t\t\t\t\t\tbody: {\n\t\t\t\t\t\t\t\t\t\titemTemplate: this.tmpl2,\n\t\t\t\t\t\t\t\t\t\titemBody: 'Lorem ipsum card ...',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: { ...item }\n\t\t\t\t\t),\n\t\t\t],\n\t\t};\n\t}\n\n\tngAfterViewInit() {\n\t\tconst btnRipple = document.querySelector('.mdc-button');\n\t\tconst ripple = new MDCRipple(btnRipple);\n\t\treturn () => ripple.destroy();\n\t}\n}\n","/*!\n * @ngx-dummy/Accordion-Simple library\n * Simple accordion created for angular / ionic projects.\n * https://github.com/ngx-dummy/accordion-simple\n *\n * Copyright  Vladimir Ovsyukov <ovsyukov@yandex.com>\n * Published under GNU LGPLv3 License\n */\nimport { NgModule } from '@angular/core';\nimport { HttpClientModule } from '@angular/common/http';\n\nimport { AccordionComponent } from './accordion.component';\nimport { AccordionItemComponent } from './accordion-item.component';\nimport { AccordionItemDirective } from './accordion-item.directive';\nimport { AccordionItemImgDirective } from './accordion-item-img.directive';\nimport { CommonModule } from '@angular/common';\n\n@NgModule({\n\timports: [CommonModule, HttpClientModule],\n\tdeclarations: [AccordionComponent, AccordionItemComponent, AccordionItemDirective, AccordionItemImgDirective],\n\texports: [AccordionComponent],\n})\nexport class AccordionModule {}\n","/*!\n * @ngx-dummy/Accordion-Simple library\n * Simple accordion created for angular / ionic projects.\n * https://github.com/ngx-dummy/accordion-simple\n *\n * Copyright  Vladimir Ovsyukov <ovsyukov@yandex.com>\n * Published under GNU LGPLv3 License\n */\nimport { Component } from '@angular/core';\n\nimport { Accordion, IAccordionStyling } from '@ngx-dummy/accordion-simple/index';\nimport { dummyAccordionList2, dummyAccordionList1 } from './helpers/dummy-data';\nimport { AppComponent } from './app.component';\n\n@Component({\n\tselector: 'app-root2',\n\ttemplate: `\n\t\t<div class=\"mdc-layout-grid mdc-layout-grid--align-center\">\n\t\t\t<div class=\"mdc-layout-grid__inner mb-1\">\n\t\t\t\t<div class=\"mdc-layout-grid__cell mdc-layout-grid__cell--span-12 mdc-layout-grid__cell--align-center\">\n\t\t\t\t\t<h2 class=\"text-center\">{{ title }}</h2>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"mdc-layout-grid__inner mb-1\">\n\t\t\t\t<div class=\"mdc-layout-grid__cell mdc-layout-grid__cell--align-center mdc-layout-grid__cell--span-12\">\n\t\t\t\t\t<ngxd-accordion [accordionList]=\"accordList1$ | async\" [accordionStyling]=\"styling\" openSign=\"plus1.png\" minus=\"min.png\"></ngxd-accordion>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyleUrls: ['./app.component.scss'],\n})\nexport class App2Component extends AppComponent {\n\ttitle = 'Yet another Accordion Sample';\n\taccordList1$: Promise<Accordion> = new Promise((resolve) =>\n\t\tresolve({\n\t\t\t...dummyAccordionList2,\n\t\t\titems: [...dummyAccordionList1.items, ...dummyAccordionList2.items],\n\t\t})\n\t);\n\n\t// colors = ['red', 'blue', 'yellow', 'pink'];\n\t// randColor$ = interval(2000).pipe(\n\t// \tmap(_ => Math.floor(Math.random() * this.colors.length)),\n\t// \ttap(ind => console.log(\"Index \", ind)),\n\t// \tmap(ind => this.colors[ind] || \"#ccc\"),\n\t// \ttap(val => console.log(\"Selected color ::: \", val))\n\t// );\n\n\tstyling: IAccordionStyling = {\n\t\t...super.styling,\n\t\tbodyDblclkCloseItems: true,\n\t\titemStyling: {\n\t\t\theadBgColor: 'grey',\n\t\t\tpadding: 1,\n\t\t\theadColor: 'lightgreen',\n\t\t},\n\t};\n}\n","/*!\n * @ngx-dummy/Accordion-Simple library\n * Simple accordion created for angular / ionic projects.\n * https://github.com/ngx-dummy/accordion-simple\n *\n * Copyright  Vladimir Ovsyukov <ovsyukov@yandex.com>\n * Published under GNU LGPLv3 License\n */\nimport { NgModule } from '@angular/core';\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\n\nimport { AppComponent } from './app.component';\nimport { AccordionModule } from '@ngx-dummy/accordion-simple/accordion.module';\nimport { App2Component } from './app2.component';\n\n@NgModule({\n\timports: [BrowserAnimationsModule, AccordionModule],\n\tdeclarations: [AppComponent, App2Component],\n\tbootstrap: [AppComponent, App2Component],\n})\nexport class AppModule {}\n","import { enableProdMode } from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\n\nimport { AppModule } from './app/app.module';\nimport { environment } from './environments/environment';\n\nif (environment.production) {\n\tenableProdMode();\n}\n\nsetTimeout(() => {\n\tplatformBrowserDynamic()\n\t\t.bootstrapModule(AppModule, { ngZoneEventCoalescing: true })\n\t\t.catch((err) => console.error(err));\n}, 1500);\n"]}
\ No newline at end of file
diff --git a/docs/scripts.5a3a491caa7667d2.js b/docs/scripts.5a3a491caa7667d2.js
new file mode 100644
index 00000000..abc82e20
--- /dev/null
+++ b/docs/scripts.5a3a491caa7667d2.js
@@ -0,0 +1,2 @@
+(function(r,c){var e,o,a,n,i;(function(e,o,a,s){var t=o.createElement("script");function n(){dataLayer.push(arguments)}t.async=1,t.src="https://www.googletagmanager.com/gtag/js?id=G-0G4LK2LFGZ",e.dataLayer=e.dataLayer||[],n("js",new Date),n("config","G-0G4LK2LFGZ"),n("config","G-EWVJVMTQHK")})(r=r||window,c=c||document),o=c,a="script",(e=r).ym=e.ym||function(){(e.ym.a=e.ym.a||[]).push(arguments)},e.ym.l=1*new Date,n=o.createElement(a),i=o.getElementsByTagName(a)[0],n.async=1,n.src="https://mc.yandex.ru/metrika/tag.js",i.parentNode.insertBefore(n,i),ym(67019512,"init",{clickmap:!0,trackLinks:!0,accurateTrackBounce:!0})})(window,document),function(){function r(e){e.open=!e.open}window.addEventListener("DOMContentLoaded",function(e){const o=function c(){return new Swiper(".swiper-container",{effect:"flip",grabCursor:!0,allowTouchMove:!0,navigation:{nextEl:".swiper-button-next",prevEl:".swiper-button-prev"}})}(),a=window.mdc.topAppBar?.MDCTopAppBar,s=window.mdc.drawer.MDCDrawer,t=window.mdc.list.MDCList,n=window.mdc.menu.MDCMenu,i=document.getElementById("forward"),m=document.getElementById("nav-to-docs"),w=document.getElementById("back"),p=s.attachTo(document.querySelector(".mdc-drawer")),u=new n(document.querySelector(".mdc-menu"));u.setFixedPosition(!0),u.setAnchorElement(vert_menu_opener),vert_menu_opener.addEventListener("click",d=>{u.open=!u.open}),i.addEventListener("click",d=>{d.preventDefault(),o.slideNext(),r(p)}),w.addEventListener("click",d=>{d.preventDefault(),o.slidePrev(),r(p)}),m.addEventListener("click",d=>{o.slideTo(o.slides.length-1,2e3)});const l=a?.attachTo(document.getElementById("app-bar"));l?.setScrollTarget(document.getElementById("main-content")),t.attachTo(document.querySelector(".mdc-list")).wrapFocus=!0,l?.listen("MDCTopAppBar:nav",()=>{r(p)})})}();
+//# sourceMappingURL=scripts.5a3a491caa7667d2.js.map
\ No newline at end of file
diff --git a/docs/scripts.99b81ef0cc4f5a4a.js.map b/docs/scripts.5a3a491caa7667d2.js.map
similarity index 52%
rename from docs/scripts.99b81ef0cc4f5a4a.js.map
rename to docs/scripts.5a3a491caa7667d2.js.map
index b489c471..7d422f4b 100644
--- a/docs/scripts.99b81ef0cc4f5a4a.js.map
+++ b/docs/scripts.5a3a491caa7667d2.js.map
@@ -1 +1 @@
-{"version":3,"file":"scripts.99b81ef0cc4f5a4a.js","mappings":"CAAA,cAmBA,eAfA,kBACA,sBAYE,UARF,aACAA,0BAJAC,UACAA,MAUE,2DATFC,4BAKAC,iBAEAA,2BACAA,4BAZA,CAHAC,YACAC,eAiBAC,EAQED,EARFE,EAQE,UARFL,EAQEE,GAPF,GACAF,MACA,YACAA,oCAEAA,kBACAC,oEACE,sCADFK,+BAGAC,oBACAC,YACAC,cACAC,0BAhCA,CAkCCC,iBChCD,WAsDA,cACAX,eAtDAW,uDACA,QAuDA,aACA,uCACAC,cACAC,cACAC,kBACAC,YACAC,6BACAC,gCA9DAd,GAaAE,oCACAa,8BACAnB,0BACAE,0BAGAK,qCACAa,yCACAC,kCACAC,oDACAC,6CACAA,uBACAA,qCACAC,8CACAD,iBAEAhB,+BACAkB,mBACApB,cACAF,OAEAkB,+BACAI,mBACApB,cACAF,OAEAiB,+BAEAf,mCAGA,uDACAqB,2DACA1B,gDACA2B,aACAD,iCACAvB,SAnDA","names":["dataLayer","t","e","n","r","c","o","a","i","ym","clickmap","trackLinks","accurateTrackBounce","window","effect","grabCursor","allowTouchMove","navigation","nextEl","prevEl","s","m","w","p","u","vert_menu_opener","d","l","wrapFocus"],"sourceRoot":"webpack:///","sources":["src\\analytics.js","src\\loading.js"],"sourcesContent":["(function (w, d) {\r\n\tw = w || window;\r\n\td = d || document;\r\n\t// <!-- Global site tag (gtag.js) - Google Analytics -->\r\n\t(function (w, d, t, u) {\r\n\t\tvar s = d.createElement(t);\r\n\t\ts.async = 1;\r\n\t\ts.src = u;\r\n\t\tw.dataLayer = w.dataLayer || [];\r\n\t\tfunction gtag() {\r\n\t\t\tdataLayer.push(arguments);\r\n\t\t}\r\n\r\n\t\tgtag('js', new Date());\r\n\r\n\t\tgtag('config', 'G-0G4LK2LFGZ');\r\n\t\tgtag('config', 'G-EWVJVMTQHK');\r\n\t})(w, d, 'script', 'https://www.googletagmanager.com/gtag/js?id=G-0G4LK2LFGZ');\r\n\t//   <!-- /Yandex.Metrika counter -->\r\n\t(function (m, e, t, r, i, k, a) {\r\n\t\tm[i] =\r\n\t\t\tm[i] ||\r\n\t\t\tfunction () {\r\n\t\t\t\t(m[i].a = m[i].a || []).push(arguments);\r\n\t\t\t};\r\n\t\tm[i].l = 1 * new Date();\r\n\t\t(k = e.createElement(t)), (a = e.getElementsByTagName(t)[0]), (k.async = 1), (k.src = r), a.parentNode.insertBefore(k, a);\r\n\t})(w, d, 'script', 'https://mc.yandex.ru/metrika/tag.js', 'ym');\r\n\r\n\tym(67019512, 'init', {\r\n\t\tclickmap: true,\r\n\t\ttrackLinks: true,\r\n\t\taccurateTrackBounce: true,\r\n\t});\r\n})(window, document);\r\n","//** Sample Loading */\r\n\r\n(function () {\r\n\twindow.addEventListener('DOMContentLoaded', function (e) {\r\n\t\tconst swiper = initSwiper();\r\n\t\t// setTimeout(function() {\r\n\t\t//   let app = document.getElementById('app1');\r\n\t\t//   let app2Container = document.getElementById('app2Container');\r\n\t\t//   let app3Container = document.getElementById('app3Container');\r\n\t\t//   let clone = app.cloneNode(true);\r\n\t\t//   let clone2 = app.cloneNode(true);\r\n\r\n\t\t//   clone.id = 'app2'\r\n\t\t//   clone2.id = 'app3'\r\n\t\t//   app2Container.appendChild(clone);\r\n\t\t//   app3Container.appendChild(clone2);\r\n\t\t// }, 2000);\r\n\t\tconst MDCTopAppBar = window.mdc.topAppBar.MDCTopAppBar;\r\n\t\tconst MDCDrawer = window.mdc.drawer.MDCDrawer;\r\n\t\tconst MDCList = window.mdc.list.MDCList;\r\n\t\tconst MDCMenu = window.mdc.menu.MDCMenu;\r\n\r\n\t\t// const vert_menu_opener = document.getElementById('vert_menu_opener');`\r\n\t\tconst forwardBtn = document.getElementById('forward');\r\n\t\tconst navToDocs = document.getElementById('nav-to-docs');\r\n\t\tconst backBtn = document.getElementById('back');\r\n\t\tconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\r\n\t\tconst menu = new MDCMenu(document.querySelector('.mdc-menu'));\r\n\t\tmenu.setFixedPosition(true);\r\n\t\tmenu.setAnchorElement(vert_menu_opener);\r\n\t\tvert_menu_opener.addEventListener('click', (e) => {\r\n\t\t\tmenu.open = !!!menu.open;\r\n\t\t});\r\n\t\tforwardBtn.addEventListener('click', (e) => {\r\n\t\t\te.preventDefault();\r\n\t\t\tswiper.slideNext();\r\n\t\t\ttoggleDrawer(drawer);\r\n\t\t});\r\n\t\tbackBtn.addEventListener('click', (e) => {\r\n\t\t\te.preventDefault();\r\n\t\t\tswiper.slidePrev();\r\n\t\t\ttoggleDrawer(drawer);\r\n\t\t});\r\n\t\tnavToDocs.addEventListener('click', (e) => {\r\n\t\t\t// e.preventDefault();\r\n\t\t\tswiper.slideTo(swiper.slides.length - 1, 2000);\r\n\t\t});\r\n\r\n\t\tconst topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));\r\n\t\ttopAppBar.setScrollTarget(document.getElementById('main-content'));\r\n\t\tconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\r\n\t\tlist.wrapFocus = true;\r\n\t\ttopAppBar.listen('MDCTopAppBar:nav', () => {\r\n\t\t\ttoggleDrawer(drawer);\r\n\t\t});\r\n\t});\r\n\tfunction toggleDrawer(drawer) {\r\n\t\tdrawer.open = !drawer.open;\r\n\t}\r\n\tfunction initSwiper() {\r\n\t\treturn new Swiper('.swiper-container', {\r\n\t\t\teffect: 'flip',\r\n\t\t\tgrabCursor: true,\r\n\t\t\tallowTouchMove: true,\r\n\t\t\tnavigation: {\r\n\t\t\t\tnextEl: '.swiper-button-next',\r\n\t\t\t\tprevEl: '.swiper-button-prev',\r\n\t\t\t},\r\n\t\t});\r\n\t}\r\n})();\r\n"]}
\ No newline at end of file
+{"version":3,"file":"scripts.5a3a491caa7667d2.js","mappings":"CAAA,cAmBA,eAfA,kBACA,sBAYE,UARF,aACAA,0BAJAC,UACAA,MAUE,2DATFC,4BAKAC,iBAEAA,2BACAA,4BAZA,CAHAC,YACAC,eAiBAC,EAQED,EARFE,EAQE,UARFL,EAQEE,GAPF,GACAF,MACA,YACAA,oCAEAA,kBACAC,oEACE,sCADFK,+BAGAC,oBACAC,YACAC,cACAC,0BAhCA,CAkCCC,iBChCD,WAsDA,cACAX,eAtDAW,uDACA,QAuDA,aACA,uCACAC,cACAC,cACAC,kBACAC,YACAC,6BACAC,gCA9DAd,GAaAE,qCACAa,8BACAnB,0BACAE,0BAGAK,qCACAa,yCACAC,kCACAC,oDACAC,6CACAA,uBACAA,qCACAC,8CACAD,iBAEAhB,+BACAkB,mBACApB,cACAF,OAEAkB,+BACAI,mBACApB,cACAF,OAEAiB,+BAEAf,mCAGA,wDACAqB,4DACA1B,gDACA2B,aACAD,kCACAvB,SAnDA","names":["dataLayer","t","e","n","r","c","o","a","i","ym","clickmap","trackLinks","accurateTrackBounce","window","effect","grabCursor","allowTouchMove","navigation","nextEl","prevEl","s","m","w","p","u","vert_menu_opener","d","l","wrapFocus"],"sourceRoot":"webpack:///","sources":["src\\analytics.js","src\\loading.js"],"sourcesContent":["(function (w, d) {\r\n\tw = w || window;\r\n\td = d || document;\r\n\t// <!-- Global site tag (gtag.js) - Google Analytics -->\r\n\t(function (w, d, t, u) {\r\n\t\tvar s = d.createElement(t);\r\n\t\ts.async = 1;\r\n\t\ts.src = u;\r\n\t\tw.dataLayer = w.dataLayer || [];\r\n\t\tfunction gtag() {\r\n\t\t\tdataLayer.push(arguments);\r\n\t\t}\r\n\r\n\t\tgtag('js', new Date());\r\n\r\n\t\tgtag('config', 'G-0G4LK2LFGZ');\r\n\t\tgtag('config', 'G-EWVJVMTQHK');\r\n\t})(w, d, 'script', 'https://www.googletagmanager.com/gtag/js?id=G-0G4LK2LFGZ');\r\n\t//   <!-- /Yandex.Metrika counter -->\r\n\t(function (m, e, t, r, i, k, a) {\r\n\t\tm[i] =\r\n\t\t\tm[i] ||\r\n\t\t\tfunction () {\r\n\t\t\t\t(m[i].a = m[i].a || []).push(arguments);\r\n\t\t\t};\r\n\t\tm[i].l = 1 * new Date();\r\n\t\t(k = e.createElement(t)), (a = e.getElementsByTagName(t)[0]), (k.async = 1), (k.src = r), a.parentNode.insertBefore(k, a);\r\n\t})(w, d, 'script', 'https://mc.yandex.ru/metrika/tag.js', 'ym');\r\n\r\n\tym(67019512, 'init', {\r\n\t\tclickmap: true,\r\n\t\ttrackLinks: true,\r\n\t\taccurateTrackBounce: true,\r\n\t});\r\n})(window, document);\r\n","//** Sample Loading */\r\n\r\n(function () {\r\n\twindow.addEventListener('DOMContentLoaded', function (e) {\r\n\t\tconst swiper = initSwiper();\r\n\t\t// setTimeout(function() {\r\n\t\t//   let app = document.getElementById('app1');\r\n\t\t//   let app2Container = document.getElementById('app2Container');\r\n\t\t//   let app3Container = document.getElementById('app3Container');\r\n\t\t//   let clone = app.cloneNode(true);\r\n\t\t//   let clone2 = app.cloneNode(true);\r\n\r\n\t\t//   clone.id = 'app2'\r\n\t\t//   clone2.id = 'app3'\r\n\t\t//   app2Container.appendChild(clone);\r\n\t\t//   app3Container.appendChild(clone2);\r\n\t\t// }, 2000);\r\n\t\tconst MDCTopAppBar = window.mdc.topAppBar?.MDCTopAppBar;\r\n\t\tconst MDCDrawer = window.mdc.drawer.MDCDrawer;\r\n\t\tconst MDCList = window.mdc.list.MDCList;\r\n\t\tconst MDCMenu = window.mdc.menu.MDCMenu;\r\n\r\n\t\t// const vert_menu_opener = document.getElementById('vert_menu_opener');`\r\n\t\tconst forwardBtn = document.getElementById('forward');\r\n\t\tconst navToDocs = document.getElementById('nav-to-docs');\r\n\t\tconst backBtn = document.getElementById('back');\r\n\t\tconst drawer = MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));\r\n\t\tconst menu = new MDCMenu(document.querySelector('.mdc-menu'));\r\n\t\tmenu.setFixedPosition(true);\r\n\t\tmenu.setAnchorElement(vert_menu_opener);\r\n\t\tvert_menu_opener.addEventListener('click', (e) => {\r\n\t\t\tmenu.open = !!!menu.open;\r\n\t\t});\r\n\t\tforwardBtn.addEventListener('click', (e) => {\r\n\t\t\te.preventDefault();\r\n\t\t\tswiper.slideNext();\r\n\t\t\ttoggleDrawer(drawer);\r\n\t\t});\r\n\t\tbackBtn.addEventListener('click', (e) => {\r\n\t\t\te.preventDefault();\r\n\t\t\tswiper.slidePrev();\r\n\t\t\ttoggleDrawer(drawer);\r\n\t\t});\r\n\t\tnavToDocs.addEventListener('click', (e) => {\r\n\t\t\t// e.preventDefault();\r\n\t\t\tswiper.slideTo(swiper.slides.length - 1, 2000);\r\n\t\t});\r\n\r\n\t\tconst topAppBar = MDCTopAppBar?.attachTo(document.getElementById('app-bar'));\r\n\t\ttopAppBar?.setScrollTarget(document.getElementById('main-content'));\r\n\t\tconst list = MDCList.attachTo(document.querySelector('.mdc-list'));\r\n\t\tlist.wrapFocus = true;\r\n\t\ttopAppBar?.listen('MDCTopAppBar:nav', () => {\r\n\t\t\ttoggleDrawer(drawer);\r\n\t\t});\r\n\t});\r\n\tfunction toggleDrawer(drawer) {\r\n\t\tdrawer.open = !drawer.open;\r\n\t}\r\n\tfunction initSwiper() {\r\n\t\treturn new Swiper('.swiper-container', {\r\n\t\t\teffect: 'flip',\r\n\t\t\tgrabCursor: true,\r\n\t\t\tallowTouchMove: true,\r\n\t\t\tnavigation: {\r\n\t\t\t\tnextEl: '.swiper-button-next',\r\n\t\t\t\tprevEl: '.swiper-button-prev',\r\n\t\t\t},\r\n\t\t});\r\n\t}\r\n})();\r\n"]}
\ No newline at end of file
diff --git a/docs/scripts.99b81ef0cc4f5a4a.js b/docs/scripts.99b81ef0cc4f5a4a.js
deleted file mode 100644
index f6120a88..00000000
--- a/docs/scripts.99b81ef0cc4f5a4a.js
+++ /dev/null
@@ -1,2 +0,0 @@
-(function(r,c){var e,o,a,n,i;(function(e,o,a,s){var t=o.createElement("script");function n(){dataLayer.push(arguments)}t.async=1,t.src="https://www.googletagmanager.com/gtag/js?id=G-0G4LK2LFGZ",e.dataLayer=e.dataLayer||[],n("js",new Date),n("config","G-0G4LK2LFGZ"),n("config","G-EWVJVMTQHK")})(r=r||window,c=c||document),o=c,a="script",(e=r).ym=e.ym||function(){(e.ym.a=e.ym.a||[]).push(arguments)},e.ym.l=1*new Date,n=o.createElement(a),i=o.getElementsByTagName(a)[0],n.async=1,n.src="https://mc.yandex.ru/metrika/tag.js",i.parentNode.insertBefore(n,i),ym(67019512,"init",{clickmap:!0,trackLinks:!0,accurateTrackBounce:!0})})(window,document),function(){function r(e){e.open=!e.open}window.addEventListener("DOMContentLoaded",function(e){const o=function c(){return new Swiper(".swiper-container",{effect:"flip",grabCursor:!0,allowTouchMove:!0,navigation:{nextEl:".swiper-button-next",prevEl:".swiper-button-prev"}})}(),a=window.mdc.topAppBar.MDCTopAppBar,s=window.mdc.drawer.MDCDrawer,t=window.mdc.list.MDCList,n=window.mdc.menu.MDCMenu,i=document.getElementById("forward"),m=document.getElementById("nav-to-docs"),w=document.getElementById("back"),p=s.attachTo(document.querySelector(".mdc-drawer")),u=new n(document.querySelector(".mdc-menu"));u.setFixedPosition(!0),u.setAnchorElement(vert_menu_opener),vert_menu_opener.addEventListener("click",d=>{u.open=!u.open}),i.addEventListener("click",d=>{d.preventDefault(),o.slideNext(),r(p)}),w.addEventListener("click",d=>{d.preventDefault(),o.slidePrev(),r(p)}),m.addEventListener("click",d=>{o.slideTo(o.slides.length-1,2e3)});const l=a.attachTo(document.getElementById("app-bar"));l.setScrollTarget(document.getElementById("main-content")),t.attachTo(document.querySelector(".mdc-list")).wrapFocus=!0,l.listen("MDCTopAppBar:nav",()=>{r(p)})})}();
-//# sourceMappingURL=scripts.99b81ef0cc4f5a4a.js.map
\ No newline at end of file
diff --git a/docs/typedocs/classes/AccordionComponent.html b/docs/typedocs/classes/AccordionComponent.html
index e28cda6d..7203a876 100644
--- a/docs/typedocs/classes/AccordionComponent.html
+++ b/docs/typedocs/classes/AccordionComponent.html
@@ -84,47 +84,47 @@ <h2>Properties</h2>
 <h3 class="tsd-anchor-link"><span>_body<wbr/>Dblclk<wbr/>Close</span><a href="#_bodyDblclkClose" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">_body<wbr/>Dblclk<wbr/>Close<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> = false</span></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.ts#L93">lib/accordion.component.ts:93</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.ts#L93">lib/accordion.component.ts:93</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="_isNumbered" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>_is<wbr/>Numbered</span><a href="#_isNumbered" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">_is<wbr/>Numbered<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> = false</span></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.ts#L95">lib/accordion.component.ts:95</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.ts#L95">lib/accordion.component.ts:95</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="_itemStyle" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>_item<wbr/>Style</span><a href="#_itemStyle" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">_item<wbr/>Style<span class="tsd-signature-symbol">:</span> <a href="../types/IAccordionItemStyling.html" class="tsd-signature-type" data-tsd-kind="Type alias">IAccordionItemStyling</a></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.ts#L94">lib/accordion.component.ts:94</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.ts#L94">lib/accordion.component.ts:94</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="_openedItems" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>_opened<wbr/>Items</span><a href="#_openedItems" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">_opened<wbr/>Items<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.ts#L42">lib/accordion.component.ts:42</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.ts#L42">lib/accordion.component.ts:42</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="accordionStyling" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>accordion<wbr/>Styling</span><a href="#accordionStyling" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">accordion<wbr/>Styling<span class="tsd-signature-symbol">:</span> <a href="../interfaces/IAccordionStyling.html" class="tsd-signature-type" data-tsd-kind="Interface">IAccordionStyling</a><span class="tsd-signature-symbol"> = ...</span></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.ts#L71">lib/accordion.component.ts:71</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.ts#L71">lib/accordion.component.ts:71</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="closeSign" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>close<wbr/>Sign</span><a href="#closeSign" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">close<wbr/>Sign<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.ts#L69">lib/accordion.component.ts:69</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.ts#L69">lib/accordion.component.ts:69</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="listLogo" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>list<wbr/>Logo</span><a href="#listLogo" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">list<wbr/>Logo<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.ts#L70">lib/accordion.component.ts:70</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.ts#L70">lib/accordion.component.ts:70</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="openSign" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>open<wbr/>Sign</span><a href="#openSign" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">open<wbr/>Sign<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.ts#L68">lib/accordion.component.ts:68</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.ts#L68">lib/accordion.component.ts:68</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class"><a id="idx" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagStatic">Static</code> <span>idx</span><a href="#idx" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">idx<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> = 0</span></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.ts#L40">lib/accordion.component.ts:40</a></li></ul></aside></section></section>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.ts#L40">lib/accordion.component.ts:40</a></li></ul></aside></section></section>
 <section class="tsd-panel-group tsd-member-group">
 <h2>Accessors</h2>
 <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="accordionItems" class="tsd-anchor"></a>
diff --git a/docs/typedocs/index.html b/docs/typedocs/index.html
index c55bd231..74cee183 100644
--- a/docs/typedocs/index.html
+++ b/docs/typedocs/index.html
@@ -130,7 +130,7 @@ <h2>Documentation</h2>
 </thead>
 <tbody><tr>
 <td align="center">Select Simple</td>
-<td align="center"><a href="https://github.com/ngx-dummy/select-simple">https://github.com/ngx-dummy/select-simple</a></td>
+<td align="center"><a href="https://www.npmjs.com/package/@ngx-dummy/select-simple">https://www.npmjs.com/package/@ngx-dummy/select-simple</a></td>
 </tr>
 </tbody></table>
 </details>
diff --git a/docs/typedocs/interfaces/Accordion.html b/docs/typedocs/interfaces/Accordion.html
index c59285d8..02fce49f 100644
--- a/docs/typedocs/interfaces/Accordion.html
+++ b/docs/typedocs/interfaces/Accordion.html
@@ -48,7 +48,7 @@ <h3>Description</h3><p>(Optional) Id property of accordion components. Would be
 <h3>Property</h3><p>Could be omitted (in the case <code>id</code> attribute would be set by <code>AccordionComponent</code> itself)</p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordion.ts#L29">lib/settings/IAccordion.ts:29</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordion.ts#L29">lib/settings/IAccordion.ts:29</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface tsd-is-inherited"><a id="items" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>items</span><a href="#items" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">items<span class="tsd-signature-symbol">:</span> <a href="AccordionItem.html" class="tsd-signature-type" data-tsd-kind="Interface">AccordionItem</a><span class="tsd-signature-symbol">[]</span></div>
@@ -65,7 +65,7 @@ <h3>Member</h3><p>items[].body 													<a href="AccordionItem.html#body">bo
 </div><aside class="tsd-sources">
 <p>Inherited from <a href="AccordionItems.html">AccordionItems</a>.<a href="AccordionItems.html#items">items</a></p>
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordion.ts#L56">lib/settings/IAccordion.ts:56</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordion.ts#L56">lib/settings/IAccordion.ts:56</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="name" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>name</span><a href="#name" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">name<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span></div>
@@ -75,7 +75,7 @@ <h3>Description</h3><p>(Optional) Name property of accordion components. Would b
 <h3>Property</h3><p>Could be omitted (in the case <code>name</code> attribute would be set by <code>AccordionComponent</code> itself)</p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordion.ts#L39">lib/settings/IAccordion.ts:39</a></li></ul></aside></section></section></div>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordion.ts#L39">lib/settings/IAccordion.ts:39</a></li></ul></aside></section></section></div>
 <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
 <div class="tsd-navigation settings">
 <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
diff --git a/docs/typedocs/interfaces/AccordionItem.html b/docs/typedocs/interfaces/AccordionItem.html
index 60433faf..a58c61a8 100644
--- a/docs/typedocs/interfaces/AccordionItem.html
+++ b/docs/typedocs/interfaces/AccordionItem.html
@@ -51,7 +51,7 @@ <h3>Member</h3><p>body.itemTemplate the <code>TemplateRef</code> to be used as b
 <h3>Member</h3><p>body.itemBody string(/html) to be interpolated to <a href="ItemTemplateContext.html#itemBody">itemBody</a></p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordion.ts#L78">lib/settings/IAccordion.ts:78</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordion.ts#L78">lib/settings/IAccordion.ts:78</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="id" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>id</span><a href="#id" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">id<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">number</span></div>
@@ -59,7 +59,7 @@ <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code
 <h3>Member</h3><p>id id of accordion item</p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordion.ts#L66">lib/settings/IAccordion.ts:66</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordion.ts#L66">lib/settings/IAccordion.ts:66</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="title" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>title</span><a href="#title" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">title<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
@@ -67,7 +67,7 @@ <h3 class="tsd-anchor-link"><span>title</span><a href="#title" aria-label="Perma
 <h3>Member</h3><p>id title of accordion item</p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordion.ts#L68">lib/settings/IAccordion.ts:68</a></li></ul></aside></section></section></div>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordion.ts#L68">lib/settings/IAccordion.ts:68</a></li></ul></aside></section></section></div>
 <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
 <div class="tsd-navigation settings">
 <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
diff --git a/docs/typedocs/interfaces/AccordionItems.html b/docs/typedocs/interfaces/AccordionItems.html
index c3d4a25a..0f6153fb 100644
--- a/docs/typedocs/interfaces/AccordionItems.html
+++ b/docs/typedocs/interfaces/AccordionItems.html
@@ -49,7 +49,7 @@ <h3>Member</h3><p>items[].title <code>title</code> of an accordion item 	<a href
 <h3>Member</h3><p>items[].body 													<a href="AccordionItem.html#body">body</a></p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordion.ts#L56">lib/settings/IAccordion.ts:56</a></li></ul></aside></section></section></div>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordion.ts#L56">lib/settings/IAccordion.ts:56</a></li></ul></aside></section></section></div>
 <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
 <div class="tsd-navigation settings">
 <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
diff --git a/docs/typedocs/interfaces/IAccordionItemBodyStyling.html b/docs/typedocs/interfaces/IAccordionItemBodyStyling.html
index 6e50cba3..bbcbc19b 100644
--- a/docs/typedocs/interfaces/IAccordionItemBodyStyling.html
+++ b/docs/typedocs/interfaces/IAccordionItemBodyStyling.html
@@ -42,37 +42,37 @@ <h2>Properties</h2>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>body<wbr/>Bg<wbr/>Color</span><a href="#bodyBgColor" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" id="icon-anchor-b"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" id="icon-anchor-c"></path></svg></a></h3>
 <div class="tsd-signature">body<wbr/>Bg<wbr/>Color<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L80">lib/settings/IAccordionStylings.ts:80</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L80">lib/settings/IAccordionStylings.ts:80</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="bodyColor" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>body<wbr/>Color</span><a href="#bodyColor" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">body<wbr/>Color<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L79">lib/settings/IAccordionStylings.ts:79</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L79">lib/settings/IAccordionStylings.ts:79</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="bodyFont" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>body<wbr/>Font</span><a href="#bodyFont" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">body<wbr/>Font<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L77">lib/settings/IAccordionStylings.ts:77</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L77">lib/settings/IAccordionStylings.ts:77</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="bodyFontSize" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>body<wbr/>Font<wbr/>Size</span><a href="#bodyFontSize" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">body<wbr/>Font<wbr/>Size<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L78">lib/settings/IAccordionStylings.ts:78</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L78">lib/settings/IAccordionStylings.ts:78</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="bodyMargin" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>body<wbr/>Margin</span><a href="#bodyMargin" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">body<wbr/>Margin<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">number</span></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L82">lib/settings/IAccordionStylings.ts:82</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L82">lib/settings/IAccordionStylings.ts:82</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="bodyPadding" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>body<wbr/>Padding</span><a href="#bodyPadding" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">body<wbr/>Padding<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">number</span></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L81">lib/settings/IAccordionStylings.ts:81</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L81">lib/settings/IAccordionStylings.ts:81</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="bodyTextAlign" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>body<wbr/>Text<wbr/>Align</span><a href="#bodyTextAlign" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">body<wbr/>Text<wbr/>Align<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L83">lib/settings/IAccordionStylings.ts:83</a></li></ul></aside></section></section></div>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L83">lib/settings/IAccordionStylings.ts:83</a></li></ul></aside></section></section></div>
 <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
 <div class="tsd-navigation settings">
 <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
diff --git a/docs/typedocs/interfaces/IAccordionItemHeadStyling.html b/docs/typedocs/interfaces/IAccordionItemHeadStyling.html
index 0879d7a9..afced82c 100644
--- a/docs/typedocs/interfaces/IAccordionItemHeadStyling.html
+++ b/docs/typedocs/interfaces/IAccordionItemHeadStyling.html
@@ -40,27 +40,27 @@ <h2>Properties</h2>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>head<wbr/>Bg<wbr/>Color</span><a href="#headBgColor" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" id="icon-anchor-b"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" id="icon-anchor-c"></path></svg></a></h3>
 <div class="tsd-signature">head<wbr/>Bg<wbr/>Color<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L69">lib/settings/IAccordionStylings.ts:69</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L69">lib/settings/IAccordionStylings.ts:69</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="headColor" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>head<wbr/>Color</span><a href="#headColor" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">head<wbr/>Color<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L68">lib/settings/IAccordionStylings.ts:68</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L68">lib/settings/IAccordionStylings.ts:68</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="headFont" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>head<wbr/>Font</span><a href="#headFont" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">head<wbr/>Font<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L67">lib/settings/IAccordionStylings.ts:67</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L67">lib/settings/IAccordionStylings.ts:67</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="headFontSize" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>head<wbr/>Font<wbr/>Size</span><a href="#headFontSize" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">head<wbr/>Font<wbr/>Size<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L66">lib/settings/IAccordionStylings.ts:66</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L66">lib/settings/IAccordionStylings.ts:66</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="headHeight" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>head<wbr/>Height</span><a href="#headHeight" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">head<wbr/>Height<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">number</span></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L70">lib/settings/IAccordionStylings.ts:70</a></li></ul></aside></section></section></div>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L70">lib/settings/IAccordionStylings.ts:70</a></li></ul></aside></section></section></div>
 <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
 <div class="tsd-navigation settings">
 <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
diff --git a/docs/typedocs/interfaces/IAccordionItemSpacingStyling.html b/docs/typedocs/interfaces/IAccordionItemSpacingStyling.html
index ffa6b161..0cf17685 100644
--- a/docs/typedocs/interfaces/IAccordionItemSpacingStyling.html
+++ b/docs/typedocs/interfaces/IAccordionItemSpacingStyling.html
@@ -39,22 +39,22 @@ <h2>Properties</h2>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>margin</span><a href="#margin" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" id="icon-anchor-b"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" id="icon-anchor-c"></path></svg></a></h3>
 <div class="tsd-signature">margin<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">number</span></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L59">lib/settings/IAccordionStylings.ts:59</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L59">lib/settings/IAccordionStylings.ts:59</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="marginBottom" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>margin<wbr/>Bottom</span><a href="#marginBottom" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">margin<wbr/>Bottom<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">number</span></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L57">lib/settings/IAccordionStylings.ts:57</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L57">lib/settings/IAccordionStylings.ts:57</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="marginTop" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>margin<wbr/>Top</span><a href="#marginTop" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">margin<wbr/>Top<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">number</span></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L58">lib/settings/IAccordionStylings.ts:58</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L58">lib/settings/IAccordionStylings.ts:58</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="padding" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>padding</span><a href="#padding" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">padding<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">number</span></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L56">lib/settings/IAccordionStylings.ts:56</a></li></ul></aside></section></section></div>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L56">lib/settings/IAccordionStylings.ts:56</a></li></ul></aside></section></section></div>
 <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
 <div class="tsd-navigation settings">
 <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
diff --git a/docs/typedocs/interfaces/IAccordionStyling.html b/docs/typedocs/interfaces/IAccordionStyling.html
index f2631e07..61ef6e18 100644
--- a/docs/typedocs/interfaces/IAccordionStyling.html
+++ b/docs/typedocs/interfaces/IAccordionStyling.html
@@ -46,14 +46,14 @@ <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code
 <div class="tsd-comment tsd-typography"><p>defines whether every accordion item element could be collapsed on double-click inside (previously) opened items&#39; body element</p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L23">lib/settings/IAccordionStylings.ts:23</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L23">lib/settings/IAccordionStylings.ts:23</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="isMultiShow" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>is<wbr/>Multi<wbr/>Show</span><a href="#isMultiShow" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">is<wbr/>Multi<wbr/>Show<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span></div>
 <div class="tsd-comment tsd-typography"><p>defines whether every accordion item element should be collapsed upon opening another item of the same accordion component</p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L25">lib/settings/IAccordionStylings.ts:25</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L25">lib/settings/IAccordionStylings.ts:25</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="itemStyling" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>item<wbr/>Styling</span><a href="#itemStyling" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">item<wbr/>Styling<span class="tsd-signature-symbol">?:</span> <a href="../types/IAccordionItemStyling.html" class="tsd-signature-type" data-tsd-kind="Type alias">IAccordionItemStyling</a><span class="tsd-signature-symbol"> | </span><a href="../types/IAccordionItemStyling.html" class="tsd-signature-type" data-tsd-kind="Type alias">IAccordionItemStyling</a><span class="tsd-signature-symbol">[]</span></div>
@@ -61,35 +61,35 @@ <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code
 <h3>Member</h3><p>itemStyling styles and settings for every accordion item element in a particular Accordion</p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L31">lib/settings/IAccordionStylings.ts:31</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L31">lib/settings/IAccordionStylings.ts:31</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="itemsGuts" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>items<wbr/>Guts</span><a href="#itemsGuts" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">items<wbr/>Guts<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">number</span></div>
 <div class="tsd-comment tsd-typography"><p>defines margins between accordion elements</p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L27">lib/settings/IAccordionStylings.ts:27</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L27">lib/settings/IAccordionStylings.ts:27</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="margin" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>margin</span><a href="#margin" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">margin<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">number</span></div>
 <div class="tsd-comment tsd-typography"><p>defines <code>margin</code> styles within accordion elements</p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L29">lib/settings/IAccordionStylings.ts:29</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L29">lib/settings/IAccordionStylings.ts:29</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="maxWidth" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>max<wbr/>Width</span><a href="#maxWidth" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">max<wbr/>Width<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">number</span></div>
 <div class="tsd-comment tsd-typography"><p><code>max-width</code> css style for accordion element</p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L19">lib/settings/IAccordionStylings.ts:19</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L19">lib/settings/IAccordionStylings.ts:19</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="numberedItems" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>numbered<wbr/>Items</span><a href="#numberedItems" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">numbered<wbr/>Items<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span></div>
 <div class="tsd-comment tsd-typography"><p>defines whether every accordion item element for particular accordion component should be numbered (have numbers in header element)</p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L21">lib/settings/IAccordionStylings.ts:21</a></li></ul></aside></section></section></div>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L21">lib/settings/IAccordionStylings.ts:21</a></li></ul></aside></section></section></div>
 <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
 <div class="tsd-navigation settings">
 <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
diff --git a/docs/typedocs/interfaces/ItemTemplateContext.html b/docs/typedocs/interfaces/ItemTemplateContext.html
index 19a91d49..8dcca898 100644
--- a/docs/typedocs/interfaces/ItemTemplateContext.html
+++ b/docs/typedocs/interfaces/ItemTemplateContext.html
@@ -33,12 +33,12 @@ <h2>Properties</h2>
 <h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagOptional">Optional</code> <span>item<wbr/>Body</span><a href="#itemBody" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" id="icon-anchor-b"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" id="icon-anchor-c"></path></svg></a></h3>
 <div class="tsd-signature">item<wbr/>Body<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">object</span></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordion.ts#L83">lib/settings/IAccordion.ts:83</a></li></ul></aside></section>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordion.ts#L83">lib/settings/IAccordion.ts:83</a></li></ul></aside></section>
 <section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="itemTemplate" class="tsd-anchor"></a>
 <h3 class="tsd-anchor-link"><span>item<wbr/>Template</span><a href="#itemTemplate" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-anchor-a"></use><use href="#icon-anchor-b"></use><use href="#icon-anchor-c"></use></svg></a></h3>
 <div class="tsd-signature">item<wbr/>Template<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">TemplateRef</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Element</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">HTMLElement</span><span class="tsd-signature-symbol">&gt;</span></div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordion.ts#L82">lib/settings/IAccordion.ts:82</a></li></ul></aside></section></section></div>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordion.ts#L82">lib/settings/IAccordion.ts:82</a></li></ul></aside></section></section></div>
 <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
 <div class="tsd-navigation settings">
 <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
diff --git a/docs/typedocs/types/IAccordionItemStyling.html b/docs/typedocs/types/IAccordionItemStyling.html
index 481af6fa..f5e48e08 100644
--- a/docs/typedocs/types/IAccordionItemStyling.html
+++ b/docs/typedocs/types/IAccordionItemStyling.html
@@ -19,7 +19,7 @@ <h3>Description</h3><p>combined stylings for <code>AccordionComponent</code> chi
 <p>comprises font-styles of every accordion item element, as well as spacing styles, and margins, paddings, colors and other styles for both items&#39; header and body elements</p>
 </div><aside class="tsd-sources">
 <ul>
-<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/cf543b7/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L39">lib/settings/IAccordionStylings.ts:39</a></li></ul></aside></div>
+<li>Defined in <a href="https://github.com/VovanSuper/accordion-simple/blob/50acc95/projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordionStylings.ts#L39">lib/settings/IAccordionStylings.ts:39</a></li></ul></aside></div>
 <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
 <div class="tsd-navigation settings">
 <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
diff --git a/package.json b/package.json
index 09ed2521..912d812a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "ngx-dummy",
-	"version": "0.5.17",
+	"version": "0.5.18",
 	"license": "LGPL-3.0-or-later",
 	"description": "A simple accordion component to use in Angular / Ionic projects .. (WIP) and sample app using it",
 	"keywords": [
diff --git a/projects/@ngx-dummy/accordion-simple/package.json b/projects/@ngx-dummy/accordion-simple/package.json
index a0d3b7b2..c2ec2428 100644
--- a/projects/@ngx-dummy/accordion-simple/package.json
+++ b/projects/@ngx-dummy/accordion-simple/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@ngx-dummy/accordion-simple",
-	"version": "0.5.17",
+	"version": "0.5.18",
 	"license": "LGPL-3.0-or-later",
 	"description": "A simple accordion component to use in Angular / Ionic projects ..",
 	"keywords": [
diff --git a/projects/@ngx-dummy/accordion-simple/src/lib/animations.ts b/projects/@ngx-dummy/accordion-simple/src/lib/animations.ts
index b31507ca..77cd0073 100644
--- a/projects/@ngx-dummy/accordion-simple/src/lib/animations.ts
+++ b/projects/@ngx-dummy/accordion-simple/src/lib/animations.ts
@@ -102,7 +102,7 @@ export const accordionItemAnimations: {
 			style({
 				height: '0',
 				opacity: '0',
-				visibility: 'collapsed',
+				visibility: 'collapse',
 			})
 		),
 		state(
diff --git a/projects/accordion-sample/src/loading.js b/projects/accordion-sample/src/loading.js
index 7431dd69..fd23413a 100644
--- a/projects/accordion-sample/src/loading.js
+++ b/projects/accordion-sample/src/loading.js
@@ -15,7 +15,7 @@
 		//   app2Container.appendChild(clone);
 		//   app3Container.appendChild(clone2);
 		// }, 2000);
-		const MDCTopAppBar = window.mdc.topAppBar.MDCTopAppBar;
+		const MDCTopAppBar = window.mdc.topAppBar?.MDCTopAppBar;
 		const MDCDrawer = window.mdc.drawer.MDCDrawer;
 		const MDCList = window.mdc.list.MDCList;
 		const MDCMenu = window.mdc.menu.MDCMenu;
@@ -46,11 +46,11 @@
 			swiper.slideTo(swiper.slides.length - 1, 2000);
 		});
 
-		const topAppBar = MDCTopAppBar.attachTo(document.getElementById('app-bar'));
-		topAppBar.setScrollTarget(document.getElementById('main-content'));
+		const topAppBar = MDCTopAppBar?.attachTo(document.getElementById('app-bar'));
+		topAppBar?.setScrollTarget(document.getElementById('main-content'));
 		const list = MDCList.attachTo(document.querySelector('.mdc-list'));
 		list.wrapFocus = true;
-		topAppBar.listen('MDCTopAppBar:nav', () => {
+		topAppBar?.listen('MDCTopAppBar:nav', () => {
 			toggleDrawer(drawer);
 		});
 	});