cax-design-system 1.0.0

package/fesm2022/cax-design-system-accordion.mjs

@@ -0,0 +1,617 @@
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import * as i0 from '@angular/core';
+import { EventEmitter, forwardRef, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, Input, Output, ContentChildren, HostListener, NgModule } from '@angular/core';
+import { Header, CaxTemplate, SharedModule } from 'cax-design-system/api';
+import { DomHandler } from 'cax-design-system/dom';
+import { UniqueComponentId } from 'cax-design-system/utils';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from 'cax-design-system/icons/chevronup';
+import { ChevronUpIcon } from 'cax-design-system/icons/chevronup';
+import { ChevronDownIcon } from 'cax-design-system/icons/chevrondown';
+import { ChevronLeftIcon } from 'cax-design-system/icons/chevronleft';
+import { ChevronRightIcon } from 'cax-design-system/icons/chevronright';
+
+/**
+ * AccordionTab is a helper component for Accordion.
+ * @group Components
+ */
+class AccordionTab {
+    el;
+    changeDetector;
+    /**
+     * Current id state as a string.
+     * @group Props
+     */
+    id;
+    /**
+     * Used to define the header of the tab.
+     * @group Props
+     */
+    header;
+    /**
+     * Inline style of the tab header.
+     * @group Props
+     */
+    headerStyle;
+    /**
+     * Inline style of the tab.
+     * @group Props
+     */
+    tabStyle;
+    /**
+     * Inline style of the tab content.
+     * @group Props
+     */
+    contentStyle;
+    /**
+     * Style class of the tab.
+     * @group Props
+     */
+    tabStyleClass;
+    /**
+     * Style class of the tab header.
+     * @group Props
+     */
+    headerStyleClass;
+    /**
+     * Style class of the tab content.
+     * @group Props
+     */
+    contentStyleClass;
+    /**
+     * Whether the tab is disabled.
+     * @group Props
+     */
+    disabled;
+    /**
+     * Whether a lazy loaded panel should avoid getting loaded again on reselection.
+     * @group Props
+     */
+    cache = true;
+    /**
+     * Transition options of the animation.
+     * @group Props
+     */
+    transitionOptions = '400ms cubic-bezier(0.86, 0, 0.07, 1)';
+    /**
+     * Position of the icon.
+     * @group Props
+     */
+    iconPos = 'start';
+    /**
+     * The value that returns the selection.
+     * @group Props
+     */
+    get selected() {
+        return this._selected;
+    }
+    accordionIconPosition = 'right';
+    set selected(val) {
+        this._selected = val;
+        if (!this.loaded) {
+            if (this._selected && this.cache) {
+                this.loaded = true;
+            }
+            this.changeDetector.detectChanges();
+        }
+    }
+    /**
+     * The aria-level that each accordion header will have. The default value is 2 as per W3C specifications
+     * @group Props
+     */
+    headerAriaLevel = 2;
+    /**
+     * Event triggered by changing the choice.
+     * @param {boolean} value - Boolean value indicates that the option is changed.
+     * @group Emits
+     */
+    selectedChange = new EventEmitter();
+    headerFacet;
+    templates;
+    _selected = false;
+    get iconClass() {
+        if (this.iconPos === 'end') {
+            return 'cax-accordion-toggle-icon-end';
+        }
+        else {
+            return 'cax-accordion-toggle-icon';
+        }
+    }
+    contentTemplate;
+    headerTemplate;
+    iconTemplate;
+    loaded = false;
+    accordion;
+    constructor(accordion, el, changeDetector) {
+        this.el = el;
+        this.changeDetector = changeDetector;
+        this.accordion = accordion;
+        this.id = UniqueComponentId();
+    }
+    ngAfterContentInit() {
+        this.templates.forEach((item) => {
+            switch (item.getType()) {
+                case 'content':
+                    this.contentTemplate = item.template;
+                    break;
+                case 'header':
+                    this.headerTemplate = item.template;
+                    break;
+                case 'icon':
+                    this.iconTemplate = item.template;
+                    break;
+                default:
+                    this.contentTemplate = item.template;
+                    break;
+            }
+        });
+    }
+    toggle(event) {
+        if (this.disabled) {
+            return false;
+        }
+        let index = this.findTabIndex();
+        if (this.selected) {
+            this.selected = false;
+            this.accordion.onClose.emit({ originalEvent: event, index: index });
+        }
+        else {
+            if (!this.accordion.multiple) {
+                for (var i = 0; i < this.accordion.tabs.length; i++) {
+                    if (this.accordion.tabs[i].selected) {
+                        this.accordion.tabs[i].selected = false;
+                        this.accordion.tabs[i].selectedChange.emit(false);
+                        this.accordion.tabs[i].changeDetector.markForCheck();
+                    }
+                }
+            }
+            this.selected = true;
+            this.loaded = true;
+            this.accordion.onOpen.emit({ originalEvent: event, index: index });
+        }
+        this.selectedChange.emit(this.selected);
+        this.accordion.updateActiveIndex();
+        this.changeDetector.markForCheck();
+        event?.preventDefault();
+    }
+    findTabIndex() {
+        let index = -1;
+        for (var i = 0; i < this.accordion.tabs.length; i++) {
+            if (this.accordion.tabs[i] == this) {
+                index = i;
+                break;
+            }
+        }
+        return index;
+    }
+    get hasHeaderFacet() {
+        return this.headerFacet && this.headerFacet.length > 0;
+    }
+    onKeydown(event) {
+        switch (event.code) {
+            case 'Enter':
+            case 'Space':
+                this.toggle(event);
+                event.preventDefault();
+                break;
+            default:
+                break;
+        }
+    }
+    getTabHeaderActionId(tabId) {
+        return `${tabId}_header_action`;
+    }
+    getTabContentId(tabId) {
+        return `${tabId}_content`;
+    }
+    ngOnDestroy() {
+        this.accordion.tabs.splice(this.findTabIndex(), 1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AccordionTab, deps: [{ token: forwardRef(() => Accordion) }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: AccordionTab, selector: "cax-accordionTab", inputs: { id: "id", header: "header", headerStyle: "headerStyle", tabStyle: "tabStyle", contentStyle: "contentStyle", tabStyleClass: "tabStyleClass", headerStyleClass: "headerStyleClass", contentStyleClass: "contentStyleClass", disabled: ["disabled", "disabled", booleanAttribute], cache: ["cache", "cache", booleanAttribute], transitionOptions: "transitionOptions", iconPos: "iconPos", selected: "selected", accordionIconPosition: "accordionIconPosition", headerAriaLevel: ["headerAriaLevel", "headerAriaLevel", numberAttribute] }, outputs: { selectedChange: "selectedChange" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "headerFacet", predicate: Header }, { propertyName: "templates", predicate: CaxTemplate }], ngImport: i0, template: "<div class=\"cax-accordion-tab\" [class.cax-accordion-tab-active]=\"selected\" [ngClass]=\"tabStyleClass\" [ngStyle]=\"tabStyle\" [attr.data-pc-name]=\"'accordiontab'\">\r\n    <div class=\"cax-accordion-header\" role=\"heading\" [attr.aria-level]=\"headerAriaLevel\" [class.cax-highlight]=\"selected\" [class.cax-disabled]=\"disabled\" [attr.data-cax-disabled]=\"disabled\" [attr.data-pc-section]=\"'header'\">\r\n        <a\r\n            [ngClass]=\"headerStyleClass\"\r\n            [ngStyle]=\"headerStyle\"\r\n            role=\"button\"\r\n            class=\"cax-accordion-header-link\"\r\n            (click)=\"toggle($event)\"\r\n            (keydown)=\"onKeydown($event)\"\r\n            [attr.tabindex]=\"disabled ? null : 0\"\r\n            [attr.id]=\"getTabHeaderActionId(id)\"\r\n            [attr.aria-controls]=\"getTabContentId(id)\"\r\n            [attr.aria-expanded]=\"selected\"\r\n            [attr.aria-disabled]=\"disabled\"\r\n            [attr.data-pc-section]=\"'headeraction'\"\r\n        >\r\n        <span class=\"cax-accordion-icon\" *ngIf=\"accordionIconPosition === 'right'\">\r\n            <ng-container *ngIf=\"!iconTemplate\">\r\n                <ng-container *ngIf=\"selected\">\r\n                    <span *ngIf=\"accordion.collapseIcon\" [class]=\"accordion.collapseIcon\" [ngClass]=\"iconClass\" [attr.aria-hidden]=\"true\"></span>\r\n                    <ChevronUpIcon *ngIf=\"!accordion.collapseIcon\" [ngClass]=\"iconClass\" [attr.aria-hidden]=\"true\" />\r\n                </ng-container>\r\n                <ng-container *ngIf=\"!selected\">\r\n                    <span *ngIf=\"accordion.expandIcon\" [class]=\"accordion.expandIcon\" [ngClass]=\"iconClass\" [attr.aria-hidden]=\"true\"></span>\r\n                    <ChevronUpIcon *ngIf=\"!accordion.expandIcon\" [ngClass]=\"iconClass\" [attr.aria-hidden]=\"true\" />\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-template *ngTemplateOutlet=\"iconTemplate; context: { $implicit: selected }\"></ng-template>\r\n        </span>\r\n            <span class=\"cax-accordion-header-text\" *ngIf=\"!hasHeaderFacet\"> {{ header }} </span>\r\n            <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n            <span class=\"cax-accordion-icon\" *ngIf=\"accordionIconPosition === 'left'\">\r\n                <ng-container *ngIf=\"!iconTemplate\">\r\n                    <ng-container *ngIf=\"selected\">\r\n                        <span *ngIf=\"accordion.collapseIcon\" [class]=\"accordion.collapseIcon\" [ngClass]=\"iconClass\" [attr.aria-hidden]=\"true\"></span>\r\n                        <ChevronUpIcon *ngIf=\"!accordion.collapseIcon\" [ngClass]=\"iconClass\" [attr.aria-hidden]=\"true\" />\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"!selected\">\r\n                        <span *ngIf=\"accordion.expandIcon\" [class]=\"accordion.expandIcon\" [ngClass]=\"iconClass\" [attr.aria-hidden]=\"true\"></span>\r\n                        <ChevronUpIcon *ngIf=\"!accordion.expandIcon\" [ngClass]=\"iconClass\" [attr.aria-hidden]=\"true\" />\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-template *ngTemplateOutlet=\"iconTemplate; context: { $implicit: selected }\"></ng-template>\r\n            </span>\r\n            <ng-content select=\"cax-header\" *ngIf=\"hasHeaderFacet\"></ng-content>\r\n        </a>\r\n    </div>\r\n    <div\r\n        [attr.id]=\"getTabContentId(id)\"\r\n        class=\"cax-toggleable-content\"\r\n        [@tabContent]=\"selected ? { value: 'visible', params: { transitionParams: transitionOptions } } : { value: 'hidden', params: { transitionParams: transitionOptions } }\"\r\n        role=\"region\"\r\n        [attr.aria-hidden]=\"!selected\"\r\n        [attr.aria-labelledby]=\"getTabHeaderActionId(id)\"\r\n        [attr.data-pc-section]=\"'toggleablecontent'\"\r\n    >\r\n        <div class=\"cax-accordion-content\" [ngClass]=\"contentStyleClass\" [ngStyle]=\"contentStyle\">\r\n            <ng-content></ng-content>\r\n            <ng-container *ngIf=\"contentTemplate && (cache ? loaded : selected)\">\r\n                <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: ["@layer cax{.cax-accordion-header-link{cursor:pointer;display:flex;align-items:center;-webkit-user-select:none;user-select:none;position:relative;text-decoration:none}.cax-accordion-icon{margin-right:8px;display:flex;align-items:center}.cax-accordion-header-link:focus{z-index:1}.cax-accordion-header-text{flex:1}.cax-accordion .cax-toggleable-content{overflow:hidden}.cax-accordion .cax-accordion-tab-active>.cax-toggleable-content:not(.ng-animating){overflow:inherit}.cax-accordion-toggle-icon-end{order:1;margin-left:auto}.cax-accordion-toggle-icon{order:0;width:16px;height:16px}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.ChevronUpIcon, selector: "ChevronUpIcon" }], animations: [
+            trigger('tabContent', [
+                state('hidden', style({
+                    height: '0',
+                    visibility: 'hidden'
+                })),
+                state('visible', style({
+                    height: '*',
+                    visibility: 'visible'
+                })),
+                transition('visible <=> hidden', [animate('{{transitionParams}}')]),
+                transition('void => *', animate(0))
+            ])
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AccordionTab, decorators: [{
+            type: Component,
+            args: [{ selector: 'cax-accordionTab', animations: [
+                        trigger('tabContent', [
+                            state('hidden', style({
+                                height: '0',
+                                visibility: 'hidden'
+                            })),
+                            state('visible', style({
+                                height: '*',
+                                visibility: 'visible'
+                            })),
+                            transition('visible <=> hidden', [animate('{{transitionParams}}')]),
+                            transition('void => *', animate(0))
+                        ])
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'cax-element'
+                    }, template: "<div class=\"cax-accordion-tab\" [class.cax-accordion-tab-active]=\"selected\" [ngClass]=\"tabStyleClass\" [ngStyle]=\"tabStyle\" [attr.data-pc-name]=\"'accordiontab'\">\r\n    <div class=\"cax-accordion-header\" role=\"heading\" [attr.aria-level]=\"headerAriaLevel\" [class.cax-highlight]=\"selected\" [class.cax-disabled]=\"disabled\" [attr.data-cax-disabled]=\"disabled\" [attr.data-pc-section]=\"'header'\">\r\n        <a\r\n            [ngClass]=\"headerStyleClass\"\r\n            [ngStyle]=\"headerStyle\"\r\n            role=\"button\"\r\n            class=\"cax-accordion-header-link\"\r\n            (click)=\"toggle($event)\"\r\n            (keydown)=\"onKeydown($event)\"\r\n            [attr.tabindex]=\"disabled ? null : 0\"\r\n            [attr.id]=\"getTabHeaderActionId(id)\"\r\n            [attr.aria-controls]=\"getTabContentId(id)\"\r\n            [attr.aria-expanded]=\"selected\"\r\n            [attr.aria-disabled]=\"disabled\"\r\n            [attr.data-pc-section]=\"'headeraction'\"\r\n        >\r\n        <span class=\"cax-accordion-icon\" *ngIf=\"accordionIconPosition === 'right'\">\r\n            <ng-container *ngIf=\"!iconTemplate\">\r\n                <ng-container *ngIf=\"selected\">\r\n                    <span *ngIf=\"accordion.collapseIcon\" [class]=\"accordion.collapseIcon\" [ngClass]=\"iconClass\" [attr.aria-hidden]=\"true\"></span>\r\n                    <ChevronUpIcon *ngIf=\"!accordion.collapseIcon\" [ngClass]=\"iconClass\" [attr.aria-hidden]=\"true\" />\r\n                </ng-container>\r\n                <ng-container *ngIf=\"!selected\">\r\n                    <span *ngIf=\"accordion.expandIcon\" [class]=\"accordion.expandIcon\" [ngClass]=\"iconClass\" [attr.aria-hidden]=\"true\"></span>\r\n                    <ChevronUpIcon *ngIf=\"!accordion.expandIcon\" [ngClass]=\"iconClass\" [attr.aria-hidden]=\"true\" />\r\n                </ng-container>\r\n            </ng-container>\r\n            <ng-template *ngTemplateOutlet=\"iconTemplate; context: { $implicit: selected }\"></ng-template>\r\n        </span>\r\n            <span class=\"cax-accordion-header-text\" *ngIf=\"!hasHeaderFacet\"> {{ header }} </span>\r\n            <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n            <span class=\"cax-accordion-icon\" *ngIf=\"accordionIconPosition === 'left'\">\r\n                <ng-container *ngIf=\"!iconTemplate\">\r\n                    <ng-container *ngIf=\"selected\">\r\n                        <span *ngIf=\"accordion.collapseIcon\" [class]=\"accordion.collapseIcon\" [ngClass]=\"iconClass\" [attr.aria-hidden]=\"true\"></span>\r\n                        <ChevronUpIcon *ngIf=\"!accordion.collapseIcon\" [ngClass]=\"iconClass\" [attr.aria-hidden]=\"true\" />\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"!selected\">\r\n                        <span *ngIf=\"accordion.expandIcon\" [class]=\"accordion.expandIcon\" [ngClass]=\"iconClass\" [attr.aria-hidden]=\"true\"></span>\r\n                        <ChevronUpIcon *ngIf=\"!accordion.expandIcon\" [ngClass]=\"iconClass\" [attr.aria-hidden]=\"true\" />\r\n                    </ng-container>\r\n                </ng-container>\r\n                <ng-template *ngTemplateOutlet=\"iconTemplate; context: { $implicit: selected }\"></ng-template>\r\n            </span>\r\n            <ng-content select=\"cax-header\" *ngIf=\"hasHeaderFacet\"></ng-content>\r\n        </a>\r\n    </div>\r\n    <div\r\n        [attr.id]=\"getTabContentId(id)\"\r\n        class=\"cax-toggleable-content\"\r\n        [@tabContent]=\"selected ? { value: 'visible', params: { transitionParams: transitionOptions } } : { value: 'hidden', params: { transitionParams: transitionOptions } }\"\r\n        role=\"region\"\r\n        [attr.aria-hidden]=\"!selected\"\r\n        [attr.aria-labelledby]=\"getTabHeaderActionId(id)\"\r\n        [attr.data-pc-section]=\"'toggleablecontent'\"\r\n    >\r\n        <div class=\"cax-accordion-content\" [ngClass]=\"contentStyleClass\" [ngStyle]=\"contentStyle\">\r\n            <ng-content></ng-content>\r\n            <ng-container *ngIf=\"contentTemplate && (cache ? loaded : selected)\">\r\n                <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: ["@layer cax{.cax-accordion-header-link{cursor:pointer;display:flex;align-items:center;-webkit-user-select:none;user-select:none;position:relative;text-decoration:none}.cax-accordion-icon{margin-right:8px;display:flex;align-items:center}.cax-accordion-header-link:focus{z-index:1}.cax-accordion-header-text{flex:1}.cax-accordion .cax-toggleable-content{overflow:hidden}.cax-accordion .cax-accordion-tab-active>.cax-toggleable-content:not(.ng-animating){overflow:inherit}.cax-accordion-toggle-icon-end{order:1;margin-left:auto}.cax-accordion-toggle-icon{order:0;width:16px;height:16px}}\n"] }]
+        }], ctorParameters: () => [{ type: Accordion, decorators: [{
+                    type: Inject,
+                    args: [forwardRef(() => Accordion)]
+                }] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { id: [{
+                type: Input
+            }], header: [{
+                type: Input
+            }], headerStyle: [{
+                type: Input
+            }], tabStyle: [{
+                type: Input
+            }], contentStyle: [{
+                type: Input
+            }], tabStyleClass: [{
+                type: Input
+            }], headerStyleClass: [{
+                type: Input
+            }], contentStyleClass: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], cache: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], transitionOptions: [{
+                type: Input
+            }], iconPos: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], accordionIconPosition: [{
+                type: Input
+            }], headerAriaLevel: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], selectedChange: [{
+                type: Output
+            }], headerFacet: [{
+                type: ContentChildren,
+                args: [Header]
+            }], templates: [{
+                type: ContentChildren,
+                args: [CaxTemplate]
+            }] } });
+/**
+ * Accordion groups a collection of contents in tabs.
+ * @group Components
+ */
+class Accordion {
+    el;
+    changeDetector;
+    /**
+     * When enabled, multiple tabs can be activated at the same time.
+     * @group Props
+     */
+    multiple = false;
+    /**
+     * Inline style of the tab header and content.
+     * @group Props
+     */
+    style;
+    /**
+     * Class of the element.
+     * @group Props
+     */
+    styleClass;
+    /**
+     * Icon of a collapsed tab.
+     * @group Props
+     */
+    expandIcon;
+    /**
+     * Icon of an expanded tab.
+     * @group Props
+     */
+    collapseIcon;
+    /**
+     * Index of the active tab or an array of indexes in multiple mode.
+     * @group Props
+     */
+    get activeIndex() {
+        return this._activeIndex;
+    }
+    set activeIndex(val) {
+        this._activeIndex = val;
+        if (this.preventActiveIndexPropagation) {
+            this.preventActiveIndexPropagation = false;
+            return;
+        }
+        this.updateSelectionState();
+    }
+    /**
+     * When enabled, the focused tab is activated.
+     * @group Props
+     */
+    selectOnFocus = false;
+    /**
+     * The aria-level that each accordion header will have. The default value is 2 as per W3C specifications
+     * @group Props
+     */
+    get headerAriaLevel() {
+        return this._headerAriaLevel;
+    }
+    set headerAriaLevel(val) {
+        if (typeof val === 'number' && val > 0) {
+            this._headerAriaLevel = val;
+        }
+        else if (this._headerAriaLevel !== 2) {
+            this._headerAriaLevel = 2;
+        }
+    }
+    /**
+     * Callback to invoke when an active tab is collapsed by clicking on the header.
+     * @param {AccordionTabCloseEvent} event - Custom tab close event.
+     * @group Emits
+     */
+    onClose = new EventEmitter();
+    /**
+     * Callback to invoke when a tab gets expanded.
+     * @param {AccordionTabOpenEvent} event - Custom tab open event.
+     * @group Emits
+     */
+    onOpen = new EventEmitter();
+    /**
+     * Returns the active index.
+     * @param {number | number[]} value - New index.
+     * @group Emits
+     */
+    activeIndexChange = new EventEmitter();
+    tabList;
+    tabListSubscription = null;
+    _activeIndex;
+    _headerAriaLevel = 2;
+    preventActiveIndexPropagation = false;
+    tabs = [];
+    constructor(el, changeDetector) {
+        this.el = el;
+        this.changeDetector = changeDetector;
+    }
+    onKeydown(event) {
+        switch (event.code) {
+            case 'ArrowDown':
+                this.onTabArrowDownKey(event);
+                break;
+            case 'ArrowUp':
+                this.onTabArrowUpKey(event);
+                break;
+            case 'Home':
+                if (!event.shiftKey) {
+                    this.onTabHomeKey(event);
+                }
+                break;
+            case 'End':
+                if (!event.shiftKey) {
+                    this.onTabEndKey(event);
+                }
+                break;
+        }
+    }
+    focusedElementIsAccordionHeader() {
+        return document.activeElement.tagName.toLowerCase() === 'a' && document.activeElement.classList.contains('cax-accordion-header-link');
+    }
+    onTabArrowDownKey(event) {
+        if (this.focusedElementIsAccordionHeader()) {
+            const nextHeaderAction = this.findNextHeaderAction(event.target.parentElement.parentElement.parentElement);
+            nextHeaderAction ? this.changeFocusedTab(nextHeaderAction) : this.onTabHomeKey(event);
+            event.preventDefault();
+        }
+    }
+    onTabArrowUpKey(event) {
+        if (this.focusedElementIsAccordionHeader()) {
+            const prevHeaderAction = this.findPrevHeaderAction(event.target.parentElement.parentElement.parentElement);
+            prevHeaderAction ? this.changeFocusedTab(prevHeaderAction) : this.onTabEndKey(event);
+            event.preventDefault();
+        }
+    }
+    onTabHomeKey(event) {
+        const firstHeaderAction = this.findFirstHeaderAction();
+        this.changeFocusedTab(firstHeaderAction);
+        event.preventDefault();
+    }
+    changeFocusedTab(element) {
+        if (element) {
+            DomHandler.focus(element);
+            if (this.selectOnFocus) {
+                this.tabs.forEach((tab, i) => {
+                    let selected = this.multiple ? this._activeIndex.includes(i) : i === this._activeIndex;
+                    if (this.multiple) {
+                        if (!this._activeIndex) {
+                            this._activeIndex = [];
+                        }
+                        if (tab.id == element.id) {
+                            tab.selected = !tab.selected;
+                            if (!this._activeIndex.includes(i)) {
+                                this._activeIndex.push(i);
+                            }
+                            else {
+                                this._activeIndex = this._activeIndex.filter((ind) => ind !== i);
+                            }
+                        }
+                    }
+                    else {
+                        if (tab.id == element.id) {
+                            tab.selected = !tab.selected;
+                            this._activeIndex = i;
+                        }
+                        else {
+                            tab.selected = false;
+                        }
+                    }
+                    tab.selectedChange.emit(selected);
+                    this.activeIndexChange.emit(this._activeIndex);
+                    tab.changeDetector.markForCheck();
+                });
+            }
+        }
+    }
+    findNextHeaderAction(tabElement, selfCheck = false) {
+        const nextTabElement = selfCheck ? tabElement : tabElement.nextElementSibling;
+        const headerElement = DomHandler.findSingle(nextTabElement, '[data-pc-section="header"]');
+        return headerElement ? (DomHandler.getAttribute(headerElement, 'data-cax-disabled') ? this.findNextHeaderAction(headerElement.parentElement.parentElement) : DomHandler.findSingle(headerElement, '[data-pc-section="headeraction"]')) : null;
+    }
+    findPrevHeaderAction(tabElement, selfCheck = false) {
+        const prevTabElement = selfCheck ? tabElement : tabElement.previousElementSibling;
+        const headerElement = DomHandler.findSingle(prevTabElement, '[data-pc-section="header"]');
+        return headerElement ? (DomHandler.getAttribute(headerElement, 'data-cax-disabled') ? this.findPrevHeaderAction(headerElement.parentElement.parentElement) : DomHandler.findSingle(headerElement, '[data-pc-section="headeraction"]')) : null;
+    }
+    findFirstHeaderAction() {
+        const firstEl = this.el.nativeElement.firstElementChild.childNodes[0];
+        return this.findNextHeaderAction(firstEl, true);
+    }
+    findLastHeaderAction() {
+        const childNodes = this.el.nativeElement.firstElementChild.childNodes;
+        const lastEl = childNodes[childNodes.length - 1];
+        return this.findPrevHeaderAction(lastEl, true);
+    }
+    onTabEndKey(event) {
+        const lastHeaderAction = this.findLastHeaderAction();
+        this.changeFocusedTab(lastHeaderAction);
+        event.preventDefault();
+    }
+    ngAfterContentInit() {
+        this.initTabs();
+        this.tabListSubscription = this.tabList.changes.subscribe((_) => {
+            this.initTabs();
+        });
+    }
+    initTabs() {
+        this.tabs = this.tabList.toArray();
+        this.tabs.forEach((tab) => {
+            tab.headerAriaLevel = this._headerAriaLevel;
+        });
+        this.updateSelectionState();
+        this.changeDetector.markForCheck();
+    }
+    getBlockableElement() {
+        return this.el.nativeElement.children[0];
+    }
+    updateSelectionState() {
+        if (this.tabs && this.tabs.length && this._activeIndex != null) {
+            for (let i = 0; i < this.tabs.length; i++) {
+                let selected = this.multiple ? this._activeIndex.includes(i) : i === this._activeIndex;
+                let changed = selected !== this.tabs[i].selected;
+                if (changed) {
+                    this.tabs[i].selected = selected;
+                    this.tabs[i].selectedChange.emit(selected);
+                    this.tabs[i].changeDetector.markForCheck();
+                }
+            }
+        }
+    }
+    isTabActive(index) {
+        return this.multiple ? this._activeIndex && this._activeIndex.includes(index) : this._activeIndex === index;
+    }
+    getTabProp(tab, name) {
+        return tab.props ? tab.props[name] : undefined;
+    }
+    updateActiveIndex() {
+        let index = this.multiple ? [] : null;
+        this.tabs.forEach((tab, i) => {
+            if (tab.selected) {
+                if (this.multiple) {
+                    index.push(i);
+                }
+                else {
+                    index = i;
+                    return;
+                }
+            }
+        });
+        this.preventActiveIndexPropagation = true;
+        this._activeIndex = index;
+        this.activeIndexChange.emit(index);
+    }
+    ngOnDestroy() {
+        if (this.tabListSubscription) {
+            this.tabListSubscription.unsubscribe();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Accordion, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: Accordion, selector: "cax-accordion", inputs: { multiple: ["multiple", "multiple", booleanAttribute], style: "style", styleClass: "styleClass", expandIcon: "expandIcon", collapseIcon: "collapseIcon", activeIndex: "activeIndex", selectOnFocus: ["selectOnFocus", "selectOnFocus", booleanAttribute], headerAriaLevel: "headerAriaLevel" }, outputs: { onClose: "onClose", onOpen: "onOpen", activeIndexChange: "activeIndexChange" }, host: { listeners: { "keydown": "onKeydown($event)" }, classAttribute: "cax-element" }, queries: [{ propertyName: "tabList", predicate: AccordionTab, descendants: true }], ngImport: i0, template: `
+        <div [ngClass]="'cax-accordion cax-component'" [ngStyle]="style" [class]="styleClass">
+            <ng-content></ng-content>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Accordion, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'cax-accordion',
+                    template: `
+        <div [ngClass]="'cax-accordion cax-component'" [ngStyle]="style" [class]="styleClass">
+            <ng-content></ng-content>
+        </div>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'cax-element'
+                    }
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { multiple: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], style: [{
+                type: Input
+            }], styleClass: [{
+                type: Input
+            }], expandIcon: [{
+                type: Input
+            }], collapseIcon: [{
+                type: Input
+            }], activeIndex: [{
+                type: Input
+            }], selectOnFocus: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], headerAriaLevel: [{
+                type: Input
+            }], onClose: [{
+                type: Output
+            }], onOpen: [{
+                type: Output
+            }], activeIndexChange: [{
+                type: Output
+            }], tabList: [{
+                type: ContentChildren,
+                args: [AccordionTab, { descendants: true }]
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+class AccordionModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: AccordionModule, declarations: [Accordion, AccordionTab], imports: [CommonModule, ChevronRightIcon, ChevronDownIcon, ChevronLeftIcon, ChevronUpIcon], exports: [Accordion, AccordionTab, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AccordionModule, imports: [CommonModule, ChevronRightIcon, ChevronDownIcon, ChevronLeftIcon, ChevronUpIcon, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: AccordionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ChevronRightIcon, ChevronDownIcon, ChevronLeftIcon, ChevronUpIcon],
+                    exports: [Accordion, AccordionTab, SharedModule],
+                    declarations: [Accordion, AccordionTab]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Accordion, AccordionModule, AccordionTab };
+//# sourceMappingURL=cax-design-system-accordion.mjs.map