{"__symbolic":"module","version":4,"metadata":{"AccordionIconRotation":{"__symbolic":"interface"},"AccordionContentType":{"__symbolic":"interface"},"AccordionContent":{"__symbolic":"interface"},"AccrodionListItem":{"__symbolic":"interface"},"AccordionProps":{"__symbolic":"interface"},"AccordionComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":40,"character":1},"arguments":[{"selector":"sebng-accordion","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":44,"character":19},"member":"None"},"template":"<div class=\"{{ accordionClassName }}\" [attr.id]=\"id\">\n    <ng-container *ngFor=\"let item of list; let itemIndex = index\">\n        <div\n            class=\"{{ itemClassName }}\"\n            [class.active]=\"active === itemIndex\"\n            tabindex=\"0\"\n            [attr.data-id]=\"itemIndex\"\n            [attr.id]=\"idList[itemIndex]\"\n            (keydown)=\"onToggle($event)\"\n            [attr.aria-expanded]=\"active === itemIndex\"\n            attr.aria-controls=\"lbl-{{ idList[itemIndex] }}\"\n            role=\"button\"\n        >\n            <div class=\"header-wrapper\" [class.with-sub-header]=\"item.subHeaderText\" [attr.data-id]=\"itemIndex\" (click)=\"onToggle($event)\">\n                <div *ngIf=\"customIcon; else chevronDownIcon\" [innerHTML]=\"customIcon | safeHtml\"></div>\n                <ng-template #chevronDownIcon>\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\">\n                        <path\n                            d=\"M443.5 162.6l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L224 351 28.5 155.5c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.7 4.8-12.3.1-17z\"\n                        />\n                    </svg>\n                </ng-template>\n\n                <div *ngIf=\"customIconExpanded\" [innerHTML]=\"customIconExpanded | safeHtml\"></div>\n\n                <h4 class=\"accordion-header\">{{ item.header }}</h4>\n                <h6 class=\"accordion-sub-header\" *ngIf=\"item.subHeaderText\">{{ item.subHeaderText }}</h6>\n            </div>\n            <div class=\"content-wrapper\" [attr.aria-labelledby]=\"idList[itemIndex]\" id=\"lbl-{{ idList[itemIndex] }}\" role=\"region\">\n                <div\n                    class=\"text-wrapper\"\n                    #accordionItemRefs\n                    [attr.data-collapsed]=\"!heightList[itemIndex]\"\n                    [attr.aria-expanded]=\"!!heightList[itemIndex]\"\n                    [style.height]=\"heightList | dynamicStyle: itemIndex | async\"\n                >\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            contentTypeElementRef(item.content)\n                                ? refContent\n                                : contentIsOfTypeArray(item.content)\n                                ? arrayContent\n                                : accordionContent\n                        \"\n                    >\n                    </ng-container>\n                    <ng-template #refContent>\n                        <span [innerHTML]=\"item.content | safeHtml\"></span>\n                    </ng-template>\n                    <ng-template #arrayContent>\n                        <ng-container *ngFor=\"let text of item.content\">\n                            <div class=\"text-item\">\n                                <div *ngIf=\"text.title\" class=\"accordion-title\">{{ text.title }}</div>\n                                <div *ngIf=\"text.desc\" class=\"accordion-desc\">{{ text.desc }}</div>\n                            </div>\n                        </ng-container>\n                    </ng-template>\n                    <ng-template #accordionContent>\n                        <div class=\"text-item\">\n                            <div *ngIf=\"item.content.title\" class=\"accordion-title\">{{ item.content.title }}</div>\n                            <div *ngIf=\"item.content.desc\" class=\"accordion-desc\">{{ item.content.desc }}</div>\n                        </div>\n                    </ng-template>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n</div>\n","styles":[".custom-accordion{position:relative}.custom-accordion .accordion-item{position:relative;border-bottom:1px solid #333333}.custom-accordion .accordion-item:hover{background-color:#f5f5f5}.custom-accordion .accordion-item:first-child{border-top:1px solid #333333}.custom-accordion .accordion-item .header-wrapper{position:relative;display:block;cursor:pointer;min-height:48px}.custom-accordion .accordion-item .header-wrapper.with-sub-header{min-height:64px}.custom-accordion .accordion-item .header-wrapper svg{position:absolute;width:20px;height:20px;fill:#0092e1;will-change:transform;transition:transform .3s,opacity .3s;top:14px}.custom-accordion .accordion-item .header-wrapper svg:last-of-type:not(:first-of-type){opacity:0;transform:rotate(180deg)}.custom-accordion .accordion-item .header-wrapper .accordion-header{display:block;font-weight:500;padding-top:5px;-webkit-user-select:none;-ms-user-select:none;user-select:none;line-height:28px;margin:0}.custom-accordion .accordion-item .header-wrapper .accordion-sub-header{display:block;-webkit-user-select:none;-ms-user-select:none;user-select:none;margin:0 0 10px}.custom-accordion .accordion-item .content-wrapper{padding:0;transition:all .3s ease;position:relative;overflow:hidden}.custom-accordion .accordion-item .content-wrapper .text-wrapper{position:relative;padding:0 48px;height:auto;will-change:margin;opacity:0;transition:opacity .2s linear,height .2s linear}.custom-accordion .accordion-item .content-wrapper .text-wrapper .text-item:not(:last-child){padding-bottom:8px}.custom-accordion .accordion-item .content-wrapper .text-wrapper .text-item .accordion-title{font-size:16px;font-weight:500}.custom-accordion .accordion-item .content-wrapper .text-wrapper .text-item .accordion-desc{padding-top:5px;font-size:14px}.custom-accordion .accordion-item.right .header-wrapper{padding:5px 48px 5px 10px}.custom-accordion .accordion-item.right .header-wrapper svg{right:15px}.custom-accordion .accordion-item.left .header-wrapper{padding:5px 10px 5px 48px}.custom-accordion .accordion-item.left .header-wrapper svg{left:15px}.custom-accordion .accordion-item.deg-90 .header-wrapper svg:last-of-type:not(:first-of-type){transform:rotate(-90deg)}.custom-accordion .accordion-item.deg-90-counter .header-wrapper svg:last-of-type:not(:first-of-type){transform:rotate(90deg)}.custom-accordion .accordion-item.deg-180 .header-wrapper svg:last-of-type:not(:first-of-type){transform:rotate(-180deg)}.custom-accordion .accordion-item.deg-180-counter .header-wrapper svg:last-of-type:not(:first-of-type){transform:rotate(180deg)}.custom-accordion .accordion-item.active>.content-wrapper{padding-bottom:18px}.custom-accordion .accordion-item.active.deg-90 .header-wrapper svg:first-of-type{transform:rotate(90deg)}.custom-accordion .accordion-item.active.deg-90-counter .header-wrapper svg:first-of-type{transform:rotate(-90deg)}.custom-accordion .accordion-item.active.deg-180 .header-wrapper svg:first-of-type{transform:rotate(180deg)}.custom-accordion .accordion-item.active.deg-180-counter .header-wrapper svg:first-of-type{transform:rotate(-180deg)}.custom-accordion .accordion-item.active .header-wrapper svg:last-of-type:not(:first-of-type){transform:rotate(0);opacity:1}.custom-accordion .accordion-item.active.transform .header-wrapper svg:first-of-type:not(:last-of-type){opacity:0}.custom-accordion .accordion-item.active .content-wrapper .text-wrapper{opacity:1}.custom-accordion.alternative-accordion>.accordion-item{border-bottom:0}.custom-accordion.alternative-accordion>.accordion-item:hover{background-color:transparent}.custom-accordion.alternative-accordion>.accordion-item:hover .accordion-header{text-decoration:underline}.custom-accordion.alternative-accordion>.accordion-item:first-child{border-top:0}.custom-accordion.alternative-accordion>.accordion-item>.header-wrapper{min-height:auto}.custom-accordion.alternative-accordion>.accordion-item>.header-wrapper>.accordion-header{font-size:16px;color:#0092e1;padding:0}.custom-accordion.alternative-accordion>.accordion-item>.header-wrapper svg{top:5px;width:14px}.custom-accordion.alternative-accordion>.accordion-item.right>.header-wrapper{padding:0 48px 0 10px}.custom-accordion.alternative-accordion>.accordion-item.right>.header-wrapper svg{right:15px}.custom-accordion.alternative-accordion>.accordion-item.right>.content-wrapper>.text-wrapper{padding:0 30px 0 10px}.custom-accordion.alternative-accordion>.accordion-item.left>.header-wrapper{padding:0 10px 0 30px}.custom-accordion.alternative-accordion>.accordion-item.left>.header-wrapper svg{left:5px}.custom-accordion.alternative-accordion>.accordion-item.left>.content-wrapper>.text-wrapper{padding:0 30px}\n"]}]}],"members":{"className":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":5}}]}],"customIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":5}}]}],"customIconExpanded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":5}}]}],"iconPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":5}}]}],"iconRotation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":5}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":5}}]}],"list":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":60,"character":5}}]}],"alternative":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":62,"character":5}}]}],"activeIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":5}}]}],"accordionItemRefs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":66,"character":5},"arguments":["accordionItemRefs"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":77,"character":40}]}],"constructIds":[{"__symbolic":"method"}],"constructClassName":[{"__symbolic":"method"}],"constructItemClassName":[{"__symbolic":"method"}],"expandOrCollapseSection":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"contentIsOfTypeArray":[{"__symbolic":"method"}],"contentTypeElementRef":[{"__symbolic":"method"}],"onToggle":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}},"AccordionModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":14}],"declarations":[{"__symbolic":"reference","name":"AccordionComponent"},{"__symbolic":"reference","name":"AccordionSafeHtmlPipe"},{"__symbolic":"reference","name":"DynamicStylePipe"}],"exports":[{"__symbolic":"reference","name":"AccordionComponent"}]}]}],"members":{}},"DynamicStylePipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"dynamicStyle"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"AccordionSafeHtmlPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"safeHtml"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer","line":5,"character":35}]}],"transform":[{"__symbolic":"method"}]}}},"origins":{"AccordionIconRotation":"./accordion.component","AccordionContentType":"./accordion.component","AccordionContent":"./accordion.component","AccrodionListItem":"./accordion.component","AccordionProps":"./accordion.component","AccordionComponent":"./accordion.component","AccordionModule":"./accordion.module","DynamicStylePipe":"./accordion-style.pipe","AccordionSafeHtmlPipe":"./accordion.pipe"},"importAs":"@sebgroup/ng-components/lib/accordion"}