@eui/components 15.0.0-next.2 → 15.0.0-next.3

package/fesm2020/eui-components-legacy-ux-modal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"eui-components-legacy-ux-modal.mjs","sources":["../../legacy/ux-modal/ux-modal.component.ts","../../legacy/ux-modal/eui-components-legacy-ux-modal.ts"],"sourcesContent":["import type { ElementRef, QueryList } from '@angular/core';\nimport {\n    AfterContentInit,\n    AfterViewInit,\n    Component,\n    ContentChild,\n    Directive,\n    EventEmitter,\n    forwardRef,\n    Input,\n    NgModule,\n    OnDestroy,\n    Output,\n    ViewChild,\n    ViewEncapsulation,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { ScrollingModule } from '@angular/cdk/scrolling';\nimport { UxAppShellService } from '@eui/core';\nimport { fromEvent, Subscription } from 'rxjs';\nimport { DragDropModule } from '@angular/cdk/drag-drop';\nimport { coerceBooleanProperty, BooleanInput } from '@angular/cdk/coercion';\n\n@Component({\n    selector: 'ux-modal',\n    template: `\n        <div #modal id=\"{{id}}\" cdkTrapFocus class=\"ux-modal {{styleClass}} {{stateClasses}} eui-u-anim\"\n            [class.show]=\"isModalOpen\"\n            [class.eui-u-anim--slideInDown]=\"!isMessageBox\"\n            [class.eui-u-anim--fast]=\"!isMessageBox\"\n            [class.eui-u-anim--flipInY]=\"isMessageBox\"\n            [class.eui-u-anim--medium]=\"isMessageBox\"\n            [class.ux-modal--full-height]=\"isSizeFullHeight\"\n            [class.ux-modal--medium-height]=\"isSizeMediumHeight\"\n            [class.ux-modal--draggable]=\"isDraggable\"\n            [attr.aria-hidden]=\"!isModalOpen\"\n            [style.display]=\"isModalOpen ? 'block' : 'none'\"\n            (keydown)=\"closeModalOnEscape($event)\"\n            role=\"dialog\"\n            [tabIndex]=\"!isModalOpen ? -1 : 0\"\n            attr.data-e2e=\"{{ e2eAttr }}\">\n            <div class=\"ux-modal__dialog\" role=\"document\" [style.max-width]=\"customWidth\" cdkDrag [cdkDragDisabled]=\"!isDraggable\">\n                <div class=\"ux-modal__content\" [class.ux-u-overflow-visible]=\"isOverflowVisible\">\n                    <div class=\"ux-modal__header\" cdkDragHandle>\n                        <ng-template [ngIf]=\"customHeaderContent\">\n                            <ng-content select=\"uxModalHeader\"></ng-content>\n                        </ng-template>\n                        <ng-template [ngIf]=\"!customHeaderContent\">\n                            <div class=\"ux-modal__header-title\">{{titleLabel}}</div>\n                        </ng-template>\n                        <button #closeButton type=\"button\"\n                                id=\"{{id}}-close-button\"\n                                class=\"ux-modal__header-close\"\n                                data-dismiss=\"modal\"\n                                aria-label=\"Close\"\n                                (click)=\"close($event)\"\n                                [class.disabled]=\"!isShowCloseButton\">\n                            <span class=\"eui-icon eui-icon-close-m\"></span>\n                        </button>\n                    </div>\n                    <div class=\"ux-modal__body {{bodyStyleClass}}\"\n                         [class.ux-modal--no-padding]=\"hasNoBodyPadding\"\n                         [class.ux-u-overflow-visible]=\"isOverflowVisible\" cdkScrollable>\n                        <ng-content select=\"uxModalBody\"></ng-content>\n                    </div>\n                    <div *ngIf=\"isFooterVisible\"\n                         class=\"ux-modal__footer {{footerStyleClass}}\"\n                         [class.ux-modal__footer--custom-alignment]=\"isFooterCustomAlignment\">\n                        <ng-template [ngIf]=\"customFooterContent\">\n                            <ng-content select=\"uxModalFooter\"></ng-content>\n                        </ng-template>\n                        <ng-template [ngIf]=\"!customFooterContent\">\n                            <button *ngIf=\"isDismissActionVisible\"\n                                    type=\"button\"\n                                    class=\"ux-button ux-button--secondary\"\n                                    [class.ux-button--with-label]=\"isShowActionIcons\"\n                                    [disabled]=\"dismissActionDisabled\"\n                                    (click)=\"onDismissActionClick($event)\">\n                                <span *ngIf=\"isShowActionIcons\" class=\"ux-button__icon {{dismissIconClass}}\"></span>\n                                {{dismissActionLabel}}\n                            </button>\n                            <button *ngIf=\"isAcceptActionVisible\"\n                                    type=\"button\"\n                                    class=\"ux-button ux-button--primary\"\n                                    [class.ux-button--with-label]=\"isShowActionIcons\"\n                                    [disabled]=\"acceptActionDisabled\"\n                                    (click)=\"onAcceptActionClick($event)\">\n                                <span *ngIf=\"isShowActionIcons\" class=\"ux-button__icon {{acceptIconClass}}\"></span>\n                                {{acceptActionLabel}}\n                            </button>\n                        </ng-template>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"modal-backdrop\" [class.show]=\"isModalOpen\"\n             [ngClass]=\"{fade: isModalOpen, in: isModalOpen}\"\n             [style.display]=\"isModalOpen ? 'block' : 'none'\" (focus)=\"close($event)\"></div>\n    `,\n    styleUrls: ['./styles/_index.scss'],\n    encapsulation: ViewEncapsulation.None,\n})\nexport class UxModalComponent implements AfterContentInit, AfterViewInit, OnDestroy {\n    @Input() id: string;\n    @Input() styleClass: string;\n    @Input() titleLabel: string;\n    @Input() dismissActionLabel: string = 'Cancel';\n    @Input()\n    get dismissActionDisabled(): boolean { return this._dismissActionDisabled; }\n    set dismissActionDisabled(value: BooleanInput) { this._dismissActionDisabled = coerceBooleanProperty(value); }\n    private _dismissActionDisabled = false;\n    @Input() acceptActionLabel: string = 'OK';\n    @Input()\n    get acceptActionDisabled(): boolean { return this._acceptActionDisabled; }\n    set acceptActionDisabled(value: BooleanInput) { this._acceptActionDisabled = coerceBooleanProperty(value); }\n    private _acceptActionDisabled = false;\n    @Input()\n    get isFooterVisible(): boolean { return this._isFooterVisible; }\n    set isFooterVisible(value: BooleanInput) { this._isFooterVisible = coerceBooleanProperty(value); }\n    private _isFooterVisible: boolean = true;\n    @Input()\n    get isVisible(): boolean { return this._isVisible; }\n    set isVisible(value: BooleanInput) { this._isVisible = coerceBooleanProperty(value); }\n    private _isVisible = false;\n    @Input()\n    get isKeepBodyScroll(): boolean { return this._isKeepBodyScroll; }\n    set isKeepBodyScroll(value: BooleanInput) { this._isKeepBodyScroll = coerceBooleanProperty(value); }\n    private _isKeepBodyScroll = false;\n    @Input()\n    get isSizeSmall(): boolean { return this._isSizeSmall; }\n    set isSizeSmall(value: BooleanInput) { this._isSizeSmall = coerceBooleanProperty(value); }\n    private _isSizeSmall = false;\n    @Input()\n    get isSizeLarge(): boolean { return this._isSizeLarge; }\n    set isSizeLarge(value: BooleanInput) { this._isSizeLarge = coerceBooleanProperty(value); }\n    private _isSizeLarge = false;\n    @Input()\n    get isSizeFullScreen(): boolean { return this._isSizeFullScreen; }\n    set isSizeFullScreen(value: BooleanInput) { this._isSizeFullScreen = coerceBooleanProperty(value); }\n    private _isSizeFullScreen = false;\n    @Input()\n    get isSizeFullHeight(): boolean { return this._isSizeFullHeight; }\n    set isSizeFullHeight(value: BooleanInput) { this._isSizeFullHeight = coerceBooleanProperty(value); }\n    private _isSizeFullHeight = false;\n    @Input()\n    get isSizeMediumHeight(): boolean { return this._isSizeMediumHeight; }\n    set isSizeMediumHeight(value: BooleanInput) { this._isSizeMediumHeight = coerceBooleanProperty(value); }\n    private _isSizeMediumHeight = false;\n    @Input()\n    get isShowActionIcons(): boolean { return this._isShowActionIcons; }\n    set isShowActionIcons(value: BooleanInput) { this._isShowActionIcons = coerceBooleanProperty(value); }\n    private _isShowActionIcons = false;\n    @Input() acceptIconClass: string = 'eui-icon eui-icon-check';\n    @Input() dismissIconClass: string = 'eui-icon eui-icon-times';\n    @Input()\n    get hasNoBodyPadding(): boolean { return this._hasNoBodyPadding; }\n    set hasNoBodyPadding(value: BooleanInput) { this._hasNoBodyPadding = coerceBooleanProperty(value); }\n    private _hasNoBodyPadding = false;\n    @Input() customWidth: string;\n    @Input()\n    get isFooterCustomAlignment(): boolean { return this._isFooterCustomAlignment; }\n    set isFooterCustomAlignment(value: BooleanInput) { this._isFooterCustomAlignment = coerceBooleanProperty(value); }\n    private _isFooterCustomAlignment = false;\n    @Input()\n    get isCloseModalOnEscape(): boolean { return this._isCloseModalOnEscape; }\n    set isCloseModalOnEscape(value: BooleanInput) { this._isCloseModalOnEscape = coerceBooleanProperty(value); }\n    private _isCloseModalOnEscape: boolean = true;\n    @Input()\n    get isShowCloseButton(): boolean { return this._isShowCloseButton; }\n    set isShowCloseButton(value: BooleanInput) { this._isShowCloseButton = coerceBooleanProperty(value); }\n    private _isShowCloseButton: boolean = true;\n    @Input()\n    get isMessageBox(): boolean { return this._isMessageBox; }\n    set isMessageBox(value: BooleanInput) { this._isMessageBox = coerceBooleanProperty(value); }\n    private _isMessageBox = false;\n    @Input() e2eAttr: string = 'ux-modal';\n    @Input()\n    get isDraggable(): boolean { return this._isDraggable; }\n    set isDraggable(value: BooleanInput) { this._isDraggable = coerceBooleanProperty(value); }\n    private _isDraggable = false;\n\n    @Input()\n    get isHandleCloseOnDismiss(): boolean { return this._isHandleCloseOnDismiss; }\n    set isHandleCloseOnDismiss(value: BooleanInput) { this._isHandleCloseOnDismiss = coerceBooleanProperty(value); }\n    private _isHandleCloseOnDismiss: boolean = true;\n    @Input()\n    get isHandleCloseOnAccept(): boolean { return this._isHandleCloseOnAccept; }\n    set isHandleCloseOnAccept(value: BooleanInput) { this._isHandleCloseOnAccept = coerceBooleanProperty(value); }\n    private _isHandleCloseOnAccept: boolean = true;\n    @Input()\n    get isHandleCloseOnClose(): boolean { return this._isHandleCloseOnClose; }\n    set isHandleCloseOnClose(value: BooleanInput) { this._isHandleCloseOnClose = coerceBooleanProperty(value); }\n    private _isHandleCloseOnClose: boolean = true;\n\n    @Input() bodyStyleClass: string;\n    @Input() footerStyleClass: string;\n\n    @Input()\n    get isOverflowVisible(): boolean { return this._isOverflowVisible; }\n    set isOverflowVisible(value: BooleanInput) { this._isOverflowVisible = coerceBooleanProperty(value); }\n    private _isOverflowVisible: boolean = false;\n\n    @Input()\n    get isDismissActionVisible(): boolean { return this._isDismissActionVisible; }\n    set isDismissActionVisible(value: BooleanInput) { this._isDismissActionVisible = coerceBooleanProperty(value); }\n    private _isDismissActionVisible: boolean = true;\n    @Input()\n    get isAcceptActionVisible(): boolean { return this._isAcceptActionVisible; }\n    set isAcceptActionVisible(value: BooleanInput) { this._isAcceptActionVisible = coerceBooleanProperty(value); }\n    private _isAcceptActionVisible: boolean = true;\n\n    @Output() onDismiss = new EventEmitter<any>();\n    @Output() onAccept = new EventEmitter<any>();\n    @Output() onClose = new EventEmitter<any>();\n    @Output() onOpen = new EventEmitter<any>();\n    @Output() onAnimationEnd = new EventEmitter<any>();\n\n    openModalIdSubscription: Subscription;\n    animationEndSubscription: Subscription;\n\n    @ContentChild(forwardRef(() => UxModalFooterTagDirective))\n    customFooterContent: QueryList<UxModalFooterTagDirective>;\n    @ContentChild(forwardRef(() => UxModalHeaderTagDirective))\n    customHeaderContent: QueryList<UxModalHeaderTagDirective>;\n    @ViewChild('modal') uxModalEl: ElementRef<HTMLDivElement>;\n    @ViewChild('closeButton') vcCloseButton: ElementRef<HTMLButtonElement>;\n\n    // modal states\n    stateClasses: string = '';\n\n    constructor(public asService: UxAppShellService) {\n    }\n\n    get isModalOpen(): boolean {\n        if (this.asService.isModalOpen(this.id)) {\n            return true;\n        }\n        return false;\n    }\n\n    ngAfterContentInit() {\n        if (this.isVisible) {\n            this.asService.openModal(this.id);\n        }\n\n        // setting modal states\n\n        if (this.isSizeSmall) {\n            this.stateClasses = 'ux-modal--small';\n        }\n\n        if (this.isSizeLarge) {\n            this.stateClasses = 'ux-modal--large';\n        }\n\n        if (this.isSizeFullScreen) {\n            this.stateClasses = 'ux-modal--full-screen';\n        }\n\n        if (!this.isAcceptActionVisible && !this.isDismissActionVisible) {\n            this.isFooterVisible = false;\n        }\n    }\n\n    ngAfterViewInit() {\n        const modalEl = this.uxModalEl.nativeElement;\n        this.animationEndSubscription = fromEvent(modalEl, 'animationend').subscribe(() => {\n            this.onAnimationEnd.next(void 0);\n            this.onOpen.emit(true);\n        });\n    }\n\n    ngOnDestroy() {\n        if (this.openModalIdSubscription) {\n            this.openModalIdSubscription.unsubscribe();\n        }\n        if (this.animationEndSubscription) {\n            this.animationEndSubscription.unsubscribe();\n        }\n\n        if (this.asService.isModalOpen(this.id)) {\n            this.close({});\n        }\n    }\n\n    close(event: any) {\n        if (this.isHandleCloseOnClose) {\n            this.asService.closeModal(this.id);\n        }\n        this.onClose.emit(event);\n    }\n\n    closeModalOnEscape(event: any) {\n        if (this.isCloseModalOnEscape) {\n            if (event.keyCode === 27) { // 27 = escape\n                this.close(event);\n            }\n        }\n    }\n\n    onAcceptActionClick(event: any) {\n        if (this.isHandleCloseOnAccept) {\n            this.asService.closeModal(this.id);\n        }\n        this.onAccept.emit(event);\n    }\n\n    onDismissActionClick(event: any) {\n        if (this.isHandleCloseOnDismiss) {\n            this.asService.closeModal(this.id);\n        }\n        this.onDismiss.emit(event);\n    }\n}\n\n/* eslint-disable */\n@Directive({selector: 'uxModalBody'})\nexport class UxModalBodyTagDirective {\n}\n\n@Directive({selector: 'uxModalFooter'})\nexport class UxModalFooterTagDirective {\n}\n\n@Directive({selector: 'uxModalHeader'})\nexport class UxModalHeaderTagDirective {\n}\n\n/* eslint-enable */\n\n@NgModule({\n    imports: [CommonModule, A11yModule, ScrollingModule, DragDropModule],\n    exports: [UxModalComponent, UxModalBodyTagDirective, UxModalFooterTagDirective, UxModalHeaderTagDirective],\n    declarations: [UxModalComponent, UxModalBodyTagDirective, UxModalFooterTagDirective, UxModalHeaderTagDirective]\n})\nexport class UxModalComponentModule {\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"eui-components-legacy-ux-modal.mjs","sources":["../../legacy/ux-modal/ux-modal.component.ts","../../legacy/ux-modal/eui-components-legacy-ux-modal.ts"],"sourcesContent":["import type { ElementRef, QueryList } from '@angular/core';\nimport {\n    AfterContentInit,\n    AfterViewInit,\n    Component,\n    ContentChild,\n    Directive,\n    EventEmitter,\n    forwardRef,\n    Input,\n    NgModule,\n    OnDestroy,\n    Output,\n    ViewChild,\n    ViewEncapsulation,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { ScrollingModule } from '@angular/cdk/scrolling';\nimport { UxAppShellService } from '@eui/core';\nimport { fromEvent, Subscription } from 'rxjs';\nimport { DragDropModule } from '@angular/cdk/drag-drop';\nimport { coerceBooleanProperty, BooleanInput } from '@angular/cdk/coercion';\n\n// TODO v15 remove usage of utility in cmp - prefer mixin through style (eui-u-...)\n@Component({\n    selector: 'ux-modal',\n    template: `\n        <div #modal id=\"{{id}}\" cdkTrapFocus class=\"ux-modal {{styleClass}} {{stateClasses}} eui-u-anim\"\n            [class.show]=\"isModalOpen\"\n            [class.eui-u-anim--slideInDown]=\"!isMessageBox\"\n            [class.eui-u-anim--fast]=\"!isMessageBox\"\n            [class.eui-u-anim--flipInY]=\"isMessageBox\"\n            [class.eui-u-anim--medium]=\"isMessageBox\"\n            [class.ux-modal--full-height]=\"isSizeFullHeight\"\n            [class.ux-modal--medium-height]=\"isSizeMediumHeight\"\n            [class.ux-modal--draggable]=\"isDraggable\"\n            [attr.aria-hidden]=\"!isModalOpen\"\n            [style.display]=\"isModalOpen ? 'block' : 'none'\"\n            (keydown)=\"closeModalOnEscape($event)\"\n            role=\"dialog\"\n            [tabIndex]=\"!isModalOpen ? -1 : 0\"\n            attr.data-e2e=\"{{ e2eAttr }}\">\n            <div class=\"ux-modal__dialog\" role=\"document\" [style.max-width]=\"customWidth\" cdkDrag [cdkDragDisabled]=\"!isDraggable\">\n                <div class=\"ux-modal__content\" [class.ux-u-overflow-visible]=\"isOverflowVisible\">\n                    <div class=\"ux-modal__header\" cdkDragHandle>\n                        <ng-template [ngIf]=\"customHeaderContent\">\n                            <ng-content select=\"uxModalHeader\"></ng-content>\n                        </ng-template>\n                        <ng-template [ngIf]=\"!customHeaderContent\">\n                            <div class=\"ux-modal__header-title\">{{titleLabel}}</div>\n                        </ng-template>\n                        <button #closeButton type=\"button\"\n                                id=\"{{id}}-close-button\"\n                                class=\"ux-modal__header-close\"\n                                data-dismiss=\"modal\"\n                                aria-label=\"Close\"\n                                (click)=\"close($event)\"\n                                [class.disabled]=\"!isShowCloseButton\">\n                            <span class=\"eui-icon eui-icon-close-m\"></span>\n                        </button>\n                    </div>\n                    <div class=\"ux-modal__body {{bodyStyleClass}}\"\n                         [class.ux-modal--no-padding]=\"hasNoBodyPadding\"\n                         [class.ux-u-overflow-visible]=\"isOverflowVisible\" cdkScrollable>\n                        <ng-content select=\"uxModalBody\"></ng-content>\n                    </div>\n                    <div *ngIf=\"isFooterVisible\"\n                         class=\"ux-modal__footer {{footerStyleClass}}\"\n                         [class.ux-modal__footer--custom-alignment]=\"isFooterCustomAlignment\">\n                        <ng-template [ngIf]=\"customFooterContent\">\n                            <ng-content select=\"uxModalFooter\"></ng-content>\n                        </ng-template>\n                        <ng-template [ngIf]=\"!customFooterContent\">\n                            <button *ngIf=\"isDismissActionVisible\"\n                                    type=\"button\"\n                                    class=\"ux-button ux-button--secondary\"\n                                    [class.ux-button--with-label]=\"isShowActionIcons\"\n                                    [disabled]=\"dismissActionDisabled\"\n                                    (click)=\"onDismissActionClick($event)\">\n                                <span *ngIf=\"isShowActionIcons\" class=\"ux-button__icon {{dismissIconClass}}\"></span>\n                                {{dismissActionLabel}}\n                            </button>\n                            <button *ngIf=\"isAcceptActionVisible\"\n                                    type=\"button\"\n                                    class=\"ux-button ux-button--primary\"\n                                    [class.ux-button--with-label]=\"isShowActionIcons\"\n                                    [disabled]=\"acceptActionDisabled\"\n                                    (click)=\"onAcceptActionClick($event)\">\n                                <span *ngIf=\"isShowActionIcons\" class=\"ux-button__icon {{acceptIconClass}}\"></span>\n                                {{acceptActionLabel}}\n                            </button>\n                        </ng-template>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"modal-backdrop\" [class.show]=\"isModalOpen\"\n             [ngClass]=\"{fade: isModalOpen, in: isModalOpen}\"\n             [style.display]=\"isModalOpen ? 'block' : 'none'\" (focus)=\"close($event)\"></div>\n    `,\n    styleUrls: ['./styles/_index.scss'],\n    encapsulation: ViewEncapsulation.None,\n})\nexport class UxModalComponent implements AfterContentInit, AfterViewInit, OnDestroy {\n    @Input() id: string;\n    @Input() styleClass: string;\n    @Input() titleLabel: string;\n    @Input() dismissActionLabel: string = 'Cancel';\n    @Input()\n    get dismissActionDisabled(): boolean { return this._dismissActionDisabled; }\n    set dismissActionDisabled(value: BooleanInput) { this._dismissActionDisabled = coerceBooleanProperty(value); }\n    private _dismissActionDisabled = false;\n    @Input() acceptActionLabel: string = 'OK';\n    @Input()\n    get acceptActionDisabled(): boolean { return this._acceptActionDisabled; }\n    set acceptActionDisabled(value: BooleanInput) { this._acceptActionDisabled = coerceBooleanProperty(value); }\n    private _acceptActionDisabled = false;\n    @Input()\n    get isFooterVisible(): boolean { return this._isFooterVisible; }\n    set isFooterVisible(value: BooleanInput) { this._isFooterVisible = coerceBooleanProperty(value); }\n    private _isFooterVisible: boolean = true;\n    @Input()\n    get isVisible(): boolean { return this._isVisible; }\n    set isVisible(value: BooleanInput) { this._isVisible = coerceBooleanProperty(value); }\n    private _isVisible = false;\n    @Input()\n    get isKeepBodyScroll(): boolean { return this._isKeepBodyScroll; }\n    set isKeepBodyScroll(value: BooleanInput) { this._isKeepBodyScroll = coerceBooleanProperty(value); }\n    private _isKeepBodyScroll = false;\n    @Input()\n    get isSizeSmall(): boolean { return this._isSizeSmall; }\n    set isSizeSmall(value: BooleanInput) { this._isSizeSmall = coerceBooleanProperty(value); }\n    private _isSizeSmall = false;\n    @Input()\n    get isSizeLarge(): boolean { return this._isSizeLarge; }\n    set isSizeLarge(value: BooleanInput) { this._isSizeLarge = coerceBooleanProperty(value); }\n    private _isSizeLarge = false;\n    @Input()\n    get isSizeFullScreen(): boolean { return this._isSizeFullScreen; }\n    set isSizeFullScreen(value: BooleanInput) { this._isSizeFullScreen = coerceBooleanProperty(value); }\n    private _isSizeFullScreen = false;\n    @Input()\n    get isSizeFullHeight(): boolean { return this._isSizeFullHeight; }\n    set isSizeFullHeight(value: BooleanInput) { this._isSizeFullHeight = coerceBooleanProperty(value); }\n    private _isSizeFullHeight = false;\n    @Input()\n    get isSizeMediumHeight(): boolean { return this._isSizeMediumHeight; }\n    set isSizeMediumHeight(value: BooleanInput) { this._isSizeMediumHeight = coerceBooleanProperty(value); }\n    private _isSizeMediumHeight = false;\n    @Input()\n    get isShowActionIcons(): boolean { return this._isShowActionIcons; }\n    set isShowActionIcons(value: BooleanInput) { this._isShowActionIcons = coerceBooleanProperty(value); }\n    private _isShowActionIcons = false;\n    @Input() acceptIconClass: string = 'eui-icon eui-icon-check';\n    @Input() dismissIconClass: string = 'eui-icon eui-icon-times';\n    @Input()\n    get hasNoBodyPadding(): boolean { return this._hasNoBodyPadding; }\n    set hasNoBodyPadding(value: BooleanInput) { this._hasNoBodyPadding = coerceBooleanProperty(value); }\n    private _hasNoBodyPadding = false;\n    @Input() customWidth: string;\n    @Input()\n    get isFooterCustomAlignment(): boolean { return this._isFooterCustomAlignment; }\n    set isFooterCustomAlignment(value: BooleanInput) { this._isFooterCustomAlignment = coerceBooleanProperty(value); }\n    private _isFooterCustomAlignment = false;\n    @Input()\n    get isCloseModalOnEscape(): boolean { return this._isCloseModalOnEscape; }\n    set isCloseModalOnEscape(value: BooleanInput) { this._isCloseModalOnEscape = coerceBooleanProperty(value); }\n    private _isCloseModalOnEscape: boolean = true;\n    @Input()\n    get isShowCloseButton(): boolean { return this._isShowCloseButton; }\n    set isShowCloseButton(value: BooleanInput) { this._isShowCloseButton = coerceBooleanProperty(value); }\n    private _isShowCloseButton: boolean = true;\n    @Input()\n    get isMessageBox(): boolean { return this._isMessageBox; }\n    set isMessageBox(value: BooleanInput) { this._isMessageBox = coerceBooleanProperty(value); }\n    private _isMessageBox = false;\n    @Input() e2eAttr: string = 'ux-modal';\n    @Input()\n    get isDraggable(): boolean { return this._isDraggable; }\n    set isDraggable(value: BooleanInput) { this._isDraggable = coerceBooleanProperty(value); }\n    private _isDraggable = false;\n\n    @Input()\n    get isHandleCloseOnDismiss(): boolean { return this._isHandleCloseOnDismiss; }\n    set isHandleCloseOnDismiss(value: BooleanInput) { this._isHandleCloseOnDismiss = coerceBooleanProperty(value); }\n    private _isHandleCloseOnDismiss: boolean = true;\n    @Input()\n    get isHandleCloseOnAccept(): boolean { return this._isHandleCloseOnAccept; }\n    set isHandleCloseOnAccept(value: BooleanInput) { this._isHandleCloseOnAccept = coerceBooleanProperty(value); }\n    private _isHandleCloseOnAccept: boolean = true;\n    @Input()\n    get isHandleCloseOnClose(): boolean { return this._isHandleCloseOnClose; }\n    set isHandleCloseOnClose(value: BooleanInput) { this._isHandleCloseOnClose = coerceBooleanProperty(value); }\n    private _isHandleCloseOnClose: boolean = true;\n\n    @Input() bodyStyleClass: string;\n    @Input() footerStyleClass: string;\n\n    @Input()\n    get isOverflowVisible(): boolean { return this._isOverflowVisible; }\n    set isOverflowVisible(value: BooleanInput) { this._isOverflowVisible = coerceBooleanProperty(value); }\n    private _isOverflowVisible: boolean = false;\n\n    @Input()\n    get isDismissActionVisible(): boolean { return this._isDismissActionVisible; }\n    set isDismissActionVisible(value: BooleanInput) { this._isDismissActionVisible = coerceBooleanProperty(value); }\n    private _isDismissActionVisible: boolean = true;\n    @Input()\n    get isAcceptActionVisible(): boolean { return this._isAcceptActionVisible; }\n    set isAcceptActionVisible(value: BooleanInput) { this._isAcceptActionVisible = coerceBooleanProperty(value); }\n    private _isAcceptActionVisible: boolean = true;\n\n    @Output() onDismiss = new EventEmitter<any>();\n    @Output() onAccept = new EventEmitter<any>();\n    @Output() onClose = new EventEmitter<any>();\n    @Output() onOpen = new EventEmitter<any>();\n    @Output() onAnimationEnd = new EventEmitter<any>();\n\n    openModalIdSubscription: Subscription;\n    animationEndSubscription: Subscription;\n\n    @ContentChild(forwardRef(() => UxModalFooterTagDirective))\n    customFooterContent: QueryList<UxModalFooterTagDirective>;\n    @ContentChild(forwardRef(() => UxModalHeaderTagDirective))\n    customHeaderContent: QueryList<UxModalHeaderTagDirective>;\n    @ViewChild('modal') uxModalEl: ElementRef<HTMLDivElement>;\n    @ViewChild('closeButton') vcCloseButton: ElementRef<HTMLButtonElement>;\n\n    // modal states\n    stateClasses: string = '';\n\n    constructor(public asService: UxAppShellService) {\n    }\n\n    get isModalOpen(): boolean {\n        if (this.asService.isModalOpen(this.id)) {\n            return true;\n        }\n        return false;\n    }\n\n    ngAfterContentInit() {\n        if (this.isVisible) {\n            this.asService.openModal(this.id);\n        }\n\n        // setting modal states\n\n        if (this.isSizeSmall) {\n            this.stateClasses = 'ux-modal--small';\n        }\n\n        if (this.isSizeLarge) {\n            this.stateClasses = 'ux-modal--large';\n        }\n\n        if (this.isSizeFullScreen) {\n            this.stateClasses = 'ux-modal--full-screen';\n        }\n\n        if (!this.isAcceptActionVisible && !this.isDismissActionVisible) {\n            this.isFooterVisible = false;\n        }\n    }\n\n    ngAfterViewInit() {\n        const modalEl = this.uxModalEl.nativeElement;\n        this.animationEndSubscription = fromEvent(modalEl, 'animationend').subscribe(() => {\n            this.onAnimationEnd.next(void 0);\n            this.onOpen.emit(true);\n        });\n    }\n\n    ngOnDestroy() {\n        if (this.openModalIdSubscription) {\n            this.openModalIdSubscription.unsubscribe();\n        }\n        if (this.animationEndSubscription) {\n            this.animationEndSubscription.unsubscribe();\n        }\n\n        if (this.asService.isModalOpen(this.id)) {\n            this.close({});\n        }\n    }\n\n    close(event: any) {\n        if (this.isHandleCloseOnClose) {\n            this.asService.closeModal(this.id);\n        }\n        this.onClose.emit(event);\n    }\n\n    closeModalOnEscape(event: any) {\n        if (this.isCloseModalOnEscape) {\n            if (event.keyCode === 27) { // 27 = escape\n                this.close(event);\n            }\n        }\n    }\n\n    onAcceptActionClick(event: any) {\n        if (this.isHandleCloseOnAccept) {\n            this.asService.closeModal(this.id);\n        }\n        this.onAccept.emit(event);\n    }\n\n    onDismissActionClick(event: any) {\n        if (this.isHandleCloseOnDismiss) {\n            this.asService.closeModal(this.id);\n        }\n        this.onDismiss.emit(event);\n    }\n}\n\n/* eslint-disable */\n@Directive({selector: 'uxModalBody'})\nexport class UxModalBodyTagDirective {\n}\n\n@Directive({selector: 'uxModalFooter'})\nexport class UxModalFooterTagDirective {\n}\n\n@Directive({selector: 'uxModalHeader'})\nexport class UxModalHeaderTagDirective {\n}\n\n/* eslint-enable */\n\n@NgModule({\n    imports: [CommonModule, A11yModule, ScrollingModule, DragDropModule],\n    exports: [UxModalComponent, UxModalBodyTagDirective, UxModalFooterTagDirective, UxModalHeaderTagDirective],\n    declarations: [UxModalComponent, UxModalBodyTagDirective, UxModalFooterTagDirective, UxModalHeaderTagDirective]\n})\nexport class UxModalComponentModule {\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAwBA;MAgFa,gBAAgB,CAAA;AAgIzB,IAAA,WAAA,CAAmB,SAA4B,EAAA;QAA5B,IAAS,CAAA,SAAA,GAAT,SAAS,CAAmB;QA5HtC,IAAkB,CAAA,kBAAA,GAAW,QAAQ,CAAC;QAIvC,IAAsB,CAAA,sBAAA,GAAG,KAAK,CAAC;QAC9B,IAAiB,CAAA,iBAAA,GAAW,IAAI,CAAC;QAIlC,IAAqB,CAAA,qBAAA,GAAG,KAAK,CAAC;QAI9B,IAAgB,CAAA,gBAAA,GAAY,IAAI,CAAC;QAIjC,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;QAInB,IAAiB,CAAA,iBAAA,GAAG,KAAK,CAAC;QAI1B,IAAY,CAAA,YAAA,GAAG,KAAK,CAAC;QAIrB,IAAY,CAAA,YAAA,GAAG,KAAK,CAAC;QAIrB,IAAiB,CAAA,iBAAA,GAAG,KAAK,CAAC;QAI1B,IAAiB,CAAA,iBAAA,GAAG,KAAK,CAAC;QAI1B,IAAmB,CAAA,mBAAA,GAAG,KAAK,CAAC;QAI5B,IAAkB,CAAA,kBAAA,GAAG,KAAK,CAAC;QAC1B,IAAe,CAAA,eAAA,GAAW,yBAAyB,CAAC;QACpD,IAAgB,CAAA,gBAAA,GAAW,yBAAyB,CAAC;QAItD,IAAiB,CAAA,iBAAA,GAAG,KAAK,CAAC;QAK1B,IAAwB,CAAA,wBAAA,GAAG,KAAK,CAAC;QAIjC,IAAqB,CAAA,qBAAA,GAAY,IAAI,CAAC;QAItC,IAAkB,CAAA,kBAAA,GAAY,IAAI,CAAC;QAInC,IAAa,CAAA,aAAA,GAAG,KAAK,CAAC;QACrB,IAAO,CAAA,OAAA,GAAW,UAAU,CAAC;QAI9B,IAAY,CAAA,YAAA,GAAG,KAAK,CAAC;QAKrB,IAAuB,CAAA,uBAAA,GAAY,IAAI,CAAC;QAIxC,IAAsB,CAAA,sBAAA,GAAY,IAAI,CAAC;QAIvC,IAAqB,CAAA,qBAAA,GAAY,IAAI,CAAC;QAQtC,IAAkB,CAAA,kBAAA,GAAY,KAAK,CAAC;QAKpC,IAAuB,CAAA,uBAAA,GAAY,IAAI,CAAC;QAIxC,IAAsB,CAAA,sBAAA,GAAY,IAAI,CAAC;AAErC,QAAA,IAAA,CAAA,SAAS,GAAG,IAAI,YAAY,EAAO,CAAC;AACpC,QAAA,IAAA,CAAA,QAAQ,GAAG,IAAI,YAAY,EAAO,CAAC;AACnC,QAAA,IAAA,CAAA,OAAO,GAAG,IAAI,YAAY,EAAO,CAAC;AAClC,QAAA,IAAA,CAAA,MAAM,GAAG,IAAI,YAAY,EAAO,CAAC;AACjC,QAAA,IAAA,CAAA,cAAc,GAAG,IAAI,YAAY,EAAO,CAAC;;QAanD,IAAY,CAAA,YAAA,GAAW,EAAE,CAAC;KAGzB;IA5HD,IACI,qBAAqB,KAAc,OAAO,IAAI,CAAC,sBAAsB,CAAC,EAAE;AAC5E,IAAA,IAAI,qBAAqB,CAAC,KAAmB,EAAA,EAAI,IAAI,CAAC,sBAAsB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC,EAAE;IAG9G,IACI,oBAAoB,KAAc,OAAO,IAAI,CAAC,qBAAqB,CAAC,EAAE;AAC1E,IAAA,IAAI,oBAAoB,CAAC,KAAmB,EAAA,EAAI,IAAI,CAAC,qBAAqB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC,EAAE;IAE5G,IACI,eAAe,KAAc,OAAO,IAAI,CAAC,gBAAgB,CAAC,EAAE;AAChE,IAAA,IAAI,eAAe,CAAC,KAAmB,EAAA,EAAI,IAAI,CAAC,gBAAgB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC,EAAE;IAElG,IACI,SAAS,KAAc,OAAO,IAAI,CAAC,UAAU,CAAC,EAAE;AACpD,IAAA,IAAI,SAAS,CAAC,KAAmB,EAAA,EAAI,IAAI,CAAC,UAAU,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC,EAAE;IAEtF,IACI,gBAAgB,KAAc,OAAO,IAAI,CAAC,iBAAiB,CAAC,EAAE;AAClE,IAAA,IAAI,gBAAgB,CAAC,KAAmB,EAAA,EAAI,IAAI,CAAC,iBAAiB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC,EAAE;IAEpG,IACI,WAAW,KAAc,OAAO,IAAI,CAAC,YAAY,CAAC,EAAE;AACxD,IAAA,IAAI,WAAW,CAAC,KAAmB,EAAA,EAAI,IAAI,CAAC,YAAY,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC,EAAE;IAE1F,IACI,WAAW,KAAc,OAAO,IAAI,CAAC,YAAY,CAAC,EAAE;AACxD,IAAA,IAAI,WAAW,CAAC,KAAmB,EAAA,EAAI,IAAI,CAAC,YAAY,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC,EAAE;IAE1F,IACI,gBAAgB,KAAc,OAAO,IAAI,CAAC,iBAAiB,CAAC,EAAE;AAClE,IAAA,IAAI,gBAAgB,CAAC,KAAmB,EAAA,EAAI,IAAI,CAAC,iBAAiB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC,EAAE;IAEpG,IACI,gBAAgB,KAAc,OAAO,IAAI,CAAC,iBAAiB,CAAC,EAAE;AAClE,IAAA,IAAI,gBAAgB,CAAC,KAAmB,EAAA,EAAI,IAAI,CAAC,iBAAiB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC,EAAE;IAEpG,IACI,kBAAkB,KAAc,OAAO,IAAI,CAAC,mBAAmB,CAAC,EAAE;AACtE,IAAA,IAAI,kBAAkB,CAAC,KAAmB,EAAA,EAAI,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC,EAAE;IAExG,IACI,iBAAiB,KAAc,OAAO,IAAI,CAAC,kBAAkB,CAAC,EAAE;AACpE,IAAA,IAAI,iBAAiB,CAAC,KAAmB,EAAA,EAAI,IAAI,CAAC,kBAAkB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC,EAAE;IAItG,IACI,gBAAgB,KAAc,OAAO,IAAI,CAAC,iBAAiB,CAAC,EAAE;AAClE,IAAA,IAAI,gBAAgB,CAAC,KAAmB,EAAA,EAAI,IAAI,CAAC,iBAAiB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC,EAAE;IAGpG,IACI,uBAAuB,KAAc,OAAO,IAAI,CAAC,wBAAwB,CAAC,EAAE;AAChF,IAAA,IAAI,uBAAuB,CAAC,KAAmB,EAAA,EAAI,IAAI,CAAC,wBAAwB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC,EAAE;IAElH,IACI,oBAAoB,KAAc,OAAO,IAAI,CAAC,qBAAqB,CAAC,EAAE;AAC1E,IAAA,IAAI,oBAAoB,CAAC,KAAmB,EAAA,EAAI,IAAI,CAAC,qBAAqB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC,EAAE;IAE5G,IACI,iBAAiB,KAAc,OAAO,IAAI,CAAC,kBAAkB,CAAC,EAAE;AACpE,IAAA,IAAI,iBAAiB,CAAC,KAAmB,EAAA,EAAI,IAAI,CAAC,kBAAkB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC,EAAE;IAEtG,IACI,YAAY,KAAc,OAAO,IAAI,CAAC,aAAa,CAAC,EAAE;AAC1D,IAAA,IAAI,YAAY,CAAC,KAAmB,EAAA,EAAI,IAAI,CAAC,aAAa,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC,EAAE;IAG5F,IACI,WAAW,KAAc,OAAO,IAAI,CAAC,YAAY,CAAC,EAAE;AACxD,IAAA,IAAI,WAAW,CAAC,KAAmB,EAAA,EAAI,IAAI,CAAC,YAAY,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC,EAAE;IAG1F,IACI,sBAAsB,KAAc,OAAO,IAAI,CAAC,uBAAuB,CAAC,EAAE;AAC9E,IAAA,IAAI,sBAAsB,CAAC,KAAmB,EAAA,EAAI,IAAI,CAAC,uBAAuB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC,EAAE;IAEhH,IACI,qBAAqB,KAAc,OAAO,IAAI,CAAC,sBAAsB,CAAC,EAAE;AAC5E,IAAA,IAAI,qBAAqB,CAAC,KAAmB,EAAA,EAAI,IAAI,CAAC,sBAAsB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC,EAAE;IAE9G,IACI,oBAAoB,KAAc,OAAO,IAAI,CAAC,qBAAqB,CAAC,EAAE;AAC1E,IAAA,IAAI,oBAAoB,CAAC,KAAmB,EAAA,EAAI,IAAI,CAAC,qBAAqB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC,EAAE;IAM5G,IACI,iBAAiB,KAAc,OAAO,IAAI,CAAC,kBAAkB,CAAC,EAAE;AACpE,IAAA,IAAI,iBAAiB,CAAC,KAAmB,EAAA,EAAI,IAAI,CAAC,kBAAkB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC,EAAE;IAGtG,IACI,sBAAsB,KAAc,OAAO,IAAI,CAAC,uBAAuB,CAAC,EAAE;AAC9E,IAAA,IAAI,sBAAsB,CAAC,KAAmB,EAAA,EAAI,IAAI,CAAC,uBAAuB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC,EAAE;IAEhH,IACI,qBAAqB,KAAc,OAAO,IAAI,CAAC,sBAAsB,CAAC,EAAE;AAC5E,IAAA,IAAI,qBAAqB,CAAC,KAAmB,EAAA,EAAI,IAAI,CAAC,sBAAsB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC,EAAE;AAyB9G,IAAA,IAAI,WAAW,GAAA;QACX,IAAI,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACrC,YAAA,OAAO,IAAI,CAAC;AACf,SAAA;AACD,QAAA,OAAO,KAAK,CAAC;KAChB;IAED,kBAAkB,GAAA;QACd,IAAI,IAAI,CAAC,SAAS,EAAE;YAChB,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACrC,SAAA;;QAID,IAAI,IAAI,CAAC,WAAW,EAAE;AAClB,YAAA,IAAI,CAAC,YAAY,GAAG,iBAAiB,CAAC;AACzC,SAAA;QAED,IAAI,IAAI,CAAC,WAAW,EAAE;AAClB,YAAA,IAAI,CAAC,YAAY,GAAG,iBAAiB,CAAC;AACzC,SAAA;QAED,IAAI,IAAI,CAAC,gBAAgB,EAAE;AACvB,YAAA,IAAI,CAAC,YAAY,GAAG,uBAAuB,CAAC;AAC/C,SAAA;QAED,IAAI,CAAC,IAAI,CAAC,qBAAqB,IAAI,CAAC,IAAI,CAAC,sBAAsB,EAAE;AAC7D,YAAA,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;AAChC,SAAA;KACJ;IAED,eAAe,GAAA;AACX,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC;AAC7C,QAAA,IAAI,CAAC,wBAAwB,GAAG,SAAS,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC,SAAS,CAAC,MAAK;YAC9E,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;AACjC,YAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC3B,SAAC,CAAC,CAAC;KACN;IAED,WAAW,GAAA;QACP,IAAI,IAAI,CAAC,uBAAuB,EAAE;AAC9B,YAAA,IAAI,CAAC,uBAAuB,CAAC,WAAW,EAAE,CAAC;AAC9C,SAAA;QACD,IAAI,IAAI,CAAC,wBAAwB,EAAE;AAC/B,YAAA,IAAI,CAAC,wBAAwB,CAAC,WAAW,EAAE,CAAC;AAC/C,SAAA;QAED,IAAI,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACrC,YAAA,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;AAClB,SAAA;KACJ;AAED,IAAA,KAAK,CAAC,KAAU,EAAA;QACZ,IAAI,IAAI,CAAC,oBAAoB,EAAE;YAC3B,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACtC,SAAA;AACD,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC5B;AAED,IAAA,kBAAkB,CAAC,KAAU,EAAA;QACzB,IAAI,IAAI,CAAC,oBAAoB,EAAE;AAC3B,YAAA,IAAI,KAAK,CAAC,OAAO,KAAK,EAAE,EAAE;AACtB,gBAAA,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;AACrB,aAAA;AACJ,SAAA;KACJ;AAED,IAAA,mBAAmB,CAAC,KAAU,EAAA;QAC1B,IAAI,IAAI,CAAC,qBAAqB,EAAE;YAC5B,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACtC,SAAA;AACD,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC7B;AAED,IAAA,oBAAoB,CAAC,KAAU,EAAA;QAC3B,IAAI,IAAI,CAAC,sBAAsB,EAAE;YAC7B,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACtC,SAAA;AACD,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC9B;;uIAlNQ,gBAAgB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAhB,mBAAA,gBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,eAAA,EAAA,IAAA,EAAA,gBAAgB,EAsHM,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,qBAAA,EAAA,uBAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,oBAAA,EAAA,sBAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,uBAAA,EAAA,yBAAA,EAAA,oBAAA,EAAA,sBAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,YAAA,EAAA,cAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,aAAA,EAAA,sBAAA,EAAA,wBAAA,EAAA,qBAAA,EAAA,uBAAA,EAAA,oBAAA,EAAA,sBAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,sBAAA,EAAA,wBAAA,EAAA,qBAAA,EAAA,uBAAA,EAAA,EAAA,OAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,QAAA,EAAA,UAAA,EAAA,OAAA,EAAA,SAAA,EAAA,MAAA,EAAA,QAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,qBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,EAAA,CAAA,UAAA,CAAA,YAAA,EAAA,OAAA,yBAAyB,CAEzB,EAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,qBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,EAAA,CAAA,UAAA,CAAA,YAAA,EAAA,OAAA,yBAAyB,CArM9C,EAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,WAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,OAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,eAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,aAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyET,IAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,ytHAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,cAAA,EAAA,yBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,mCAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,iBAAA,EAAA,oBAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,yBAAA,EAAA,iBAAA,EAAA,0BAAA,EAAA,qBAAA,EAAA,yBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gBAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,gBAAA,EAAA,cAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,uBAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;kGAIQ,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBA/E5B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,UAAU,EACV,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyET,EAEc,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,MAAA,EAAA,CAAA,ytHAAA,CAAA,EAAA,CAAA;wGAG5B,EAAE,EAAA,CAAA;sBAAV,KAAK;gBACG,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBACG,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBACG,kBAAkB,EAAA,CAAA;sBAA1B,KAAK;gBAEF,qBAAqB,EAAA,CAAA;sBADxB,KAAK;gBAIG,iBAAiB,EAAA,CAAA;sBAAzB,KAAK;gBAEF,oBAAoB,EAAA,CAAA;sBADvB,KAAK;gBAKF,eAAe,EAAA,CAAA;sBADlB,KAAK;gBAKF,SAAS,EAAA,CAAA;sBADZ,KAAK;gBAKF,gBAAgB,EAAA,CAAA;sBADnB,KAAK;gBAKF,WAAW,EAAA,CAAA;sBADd,KAAK;gBAKF,WAAW,EAAA,CAAA;sBADd,KAAK;gBAKF,gBAAgB,EAAA,CAAA;sBADnB,KAAK;gBAKF,gBAAgB,EAAA,CAAA;sBADnB,KAAK;gBAKF,kBAAkB,EAAA,CAAA;sBADrB,KAAK;gBAKF,iBAAiB,EAAA,CAAA;sBADpB,KAAK;gBAIG,eAAe,EAAA,CAAA;sBAAvB,KAAK;gBACG,gBAAgB,EAAA,CAAA;sBAAxB,KAAK;gBAEF,gBAAgB,EAAA,CAAA;sBADnB,KAAK;gBAIG,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBAEF,uBAAuB,EAAA,CAAA;sBAD1B,KAAK;gBAKF,oBAAoB,EAAA,CAAA;sBADvB,KAAK;gBAKF,iBAAiB,EAAA,CAAA;sBADpB,KAAK;gBAKF,YAAY,EAAA,CAAA;sBADf,KAAK;gBAIG,OAAO,EAAA,CAAA;sBAAf,KAAK;gBAEF,WAAW,EAAA,CAAA;sBADd,KAAK;gBAMF,sBAAsB,EAAA,CAAA;sBADzB,KAAK;gBAKF,qBAAqB,EAAA,CAAA;sBADxB,KAAK;gBAKF,oBAAoB,EAAA,CAAA;sBADvB,KAAK;gBAKG,cAAc,EAAA,CAAA;sBAAtB,KAAK;gBACG,gBAAgB,EAAA,CAAA;sBAAxB,KAAK;gBAGF,iBAAiB,EAAA,CAAA;sBADpB,KAAK;gBAMF,sBAAsB,EAAA,CAAA;sBADzB,KAAK;gBAKF,qBAAqB,EAAA,CAAA;sBADxB,KAAK;gBAKI,SAAS,EAAA,CAAA;sBAAlB,MAAM;gBACG,QAAQ,EAAA,CAAA;sBAAjB,MAAM;gBACG,OAAO,EAAA,CAAA;sBAAhB,MAAM;gBACG,MAAM,EAAA,CAAA;sBAAf,MAAM;gBACG,cAAc,EAAA,CAAA;sBAAvB,MAAM;gBAMP,mBAAmB,EAAA,CAAA;sBADlB,YAAY;AAAC,gBAAA,IAAA,EAAA,CAAA,UAAU,CAAC,MAAM,yBAAyB,CAAC,CAAA;gBAGzD,mBAAmB,EAAA,CAAA;sBADlB,YAAY;AAAC,gBAAA,IAAA,EAAA,CAAA,UAAU,CAAC,MAAM,yBAAyB,CAAC,CAAA;gBAErC,SAAS,EAAA,CAAA;sBAA5B,SAAS;uBAAC,OAAO,CAAA;gBACQ,aAAa,EAAA,CAAA;sBAAtC,SAAS;uBAAC,aAAa,CAAA;;AA0F5B;MAEa,uBAAuB,CAAA;;8IAAvB,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kIAAvB,uBAAuB,EAAA,QAAA,EAAA,aAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;kGAAvB,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBADnC,SAAS;mBAAC,EAAC,QAAQ,EAAE,aAAa,EAAC,CAAA;;MAKvB,yBAAyB,CAAA;;gJAAzB,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;oIAAzB,yBAAyB,EAAA,QAAA,EAAA,eAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;kGAAzB,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBADrC,SAAS;mBAAC,EAAC,QAAQ,EAAE,eAAe,EAAC,CAAA;;MAKzB,yBAAyB,CAAA;;gJAAzB,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;oIAAzB,yBAAyB,EAAA,QAAA,EAAA,eAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;kGAAzB,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBADrC,SAAS;mBAAC,EAAC,QAAQ,EAAE,eAAe,EAAC,CAAA;;AAItC;MAOa,sBAAsB,CAAA;;6IAAtB,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;8IAAtB,sBAAsB,EAAA,YAAA,EAAA,CAzOtB,gBAAgB,EAuNhB,uBAAuB,EAIvB,yBAAyB,EAIzB,yBAAyB,CAAA,EAAA,OAAA,EAAA,CAMxB,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,cAAc,CArO1D,EAAA,OAAA,EAAA,CAAA,gBAAgB,EAuNhB,uBAAuB,EAIvB,yBAAyB,EAIzB,yBAAyB,CAAA,EAAA,CAAA,CAAA;AAUzB,mBAAA,sBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,eAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,sBAAsB,YAJrB,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,cAAc,CAAA,EAAA,CAAA,CAAA;kGAI1D,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBALlC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,OAAO,EAAE,CAAC,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,cAAc,CAAC;oBACpE,OAAO,EAAE,CAAC,gBAAgB,EAAE,uBAAuB,EAAE,yBAAyB,EAAE,yBAAyB,CAAC;oBAC1G,YAAY,EAAE,CAAC,gBAAgB,EAAE,uBAAuB,EAAE,yBAAyB,EAAE,yBAAyB,CAAC;AAClH,iBAAA,CAAA;;;AChVD;;AAEG;;;;"}

package/fesm2020/eui-components-legacy-ux-panel.mjs

@@ -185,10 +185,10 @@ class UxPanelsComponent {
             </ux-a-toolbar-filter>
         </div>
 
-        <ul class="panels" attr.data-e2e="{{ e2eAttr }}">
+        <ul class="ux-panels" attr.data-e2e="{{ e2eAttr }}">
             <ng-content></ng-content>
         </ul>
-    `, isInline: true, styles: [".ux-panel{margin-bottom:var(--eui-base-spacing-m)}.ux-panel--is-collapsible{display:flex;padding-right:var(--eui-base-spacing-xl);position:relative}.ux-panel__collapsible-button{align-items:center;background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-grey-15);cursor:pointer;display:flex;font-size:var(--eui-base-font-size-xl);justify-content:center;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);position:absolute;right:0;text-align:center;top:0;width:var(--eui-base-spacing-xl)}.ux-panel__collapsible-button--collapsed{position:relative}.ux-panel-item{background-color:var(--eui-base-color-white);border:var(--eui-base-border);border-radius:var(--eui-border-radius-base);position:relative;width:100%;box-shadow:var(--eui-base-shadow-1)}.ux-panel-item--has-tabs>.ux-panel-header{display:none}.ux-panel-item--has-tabs>.ux-panel-content{padding:0}.ux-panel-item--has-tabs>.ux-panel-content .eui-tab-content{padding:var(--eui-base-spacing-s)}.ux-panel-item--has-tabs>.ux-panel-content--no-padding .ux-tab-content{padding:0}.ux-panel-item--no-header>.ux-panel-header{display:none}.ux-panel-item--danger .ux-panel-header{background-color:var(--eui-base-color-danger-120)}.ux-panel-item--danger .ux-panel-header__status-indicator-wrapper-label{color:var(--eui-base-color-danger-130)}.ux-panel-item--info .ux-panel-header{background-color:var(--eui-base-color-info-120)}.ux-panel-item--info .ux-panel-header__status-indicator-wrapper-label{color:var(--eui-base-color-info-130)}.ux-panel-item--success .ux-panel-header{background-color:var(--eui-base-color-success-120)}.ux-panel-item--success .ux-panel-header__status-indicator-wrapper-label{color:var(--eui-base-color-success-130)}.ux-panel-item--warning .ux-panel-header{background-color:var(--eui-base-color-warning-120)}.ux-panel-item--warning .ux-panel-header:focus{outline-color:#117de2}.ux-panel-item--warning .ux-panel-header__status-indicator-wrapper-label{color:var(--eui-base-color-warning-130)}.ux-panel-item--clickable{cursor:pointer}.ux-panel-item--clickable:focus,.ux-panel-item--clickable:hover{outline:0;box-shadow:var(--eui-base-shadow-2)}.ux-panel-item--highlighted{z-index:var(--eui-base-z-index-highlighted)}.ux-panel-item__status-indicator-icon-wrapper{align-items:center;background-color:var(--eui-base-color-warning-110);border-radius:100%;color:var(--eui-base-color-white);display:flex;font-size:var(--eui-base-font-size);height:20px;justify-content:center;left:-6px;position:absolute;text-align:center;top:-6px;width:20px;z-index:3}uxpanelheader{align-items:center;display:flex;flex:1 1 0%;width:100%}uxpanelheaderrightcontent{align-items:center;display:flex}.ux-panel-header{align-items:center;background-color:var(--eui-base-color-grey-10);border-bottom:var(--eui-base-border-lighter);border-top-left-radius:var(--eui-base-border-radius);border-top-right-radius:var(--eui-base-border-radius);display:flex;padding:var(--eui-base-spacing-m);width:100%}.ux-panel-header--small{padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m)}.ux-panel-header__right-content{align-items:center;display:flex;margin-left:auto}.ux-panel-header__expand-toggle{cursor:pointer;font-size:var(--eui-base-font-size-xl);padding-left:var(--eui-base-spacing-m);padding-right:var(--eui-base-spacing-s)}.ux-panel-header__status-indicator-wrapper{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-15);display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.ux-panel-header__status-indicator-wrapper-toggle{margin-left:var(--eui-base-spacing-s);padding:var(--eui-base-spacing-xs)}.ux-panel-header__status-indicator-wrapper-toggle:focus{box-shadow:var(--eui-base-shadow-2)}.ux-panel-header__status-indicator-content{border-bottom:1px solid var(--eui-base-color-grey-15);padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m)}.ux-panel-header__sub-header{border-bottom:1px solid var(--eui-base-color-grey-15);padding:var(--eui-base-spacing-m)}.ux-panel-header ux-a-label{-ms-flex:1 1 0%}.ux-panel-item--flat{background-color:var(--eui-base-color-white)}.ux-panel-item--flat .ux-panel-header{background-color:var(--eui-base-color-white);margin:0}.ux-panel-item--flat .ux-panel-header--large{margin-bottom:var(--eui-base-spacing-s)}.ux-panel-item--flat .ux-panel-header--large .ux-a-label{padding:var(--eui-base-spacing-m) 0 var(--eui-base-spacing-s) 0}.ux-panel-item--flat .ux-panel-header--large .ux-a-label__label{font-size:var(--eui-base-font-size-2xl)}.ux-panel-item--flat .ux-panel-item:not(.ux-panel-item--flat):not(.ux-panel-item--selected) .ux-panel-header{background-color:var(--eui-base-color-grey-10)}.ux-panel-item--transparent{background-color:transparent;border:0;box-shadow:none}.ux-panel-item--transparent .ux-panel-header{background-color:transparent;margin:0;padding-top:var(--eui-base-spacing-s)}.ux-panel-item--transparent .ux-panel-header--large{margin-bottom:var(--eui-base-spacing-s)}.ux-panel-item--transparent .ux-panel-header--large .ux-a-label{padding:var(--eui-base-spacing-m) 0 var(--eui-base-spacing-s) 0}.ux-panel-item--transparent .ux-panel-header--large .ux-a-label__label{font-size:var(--eui-base-font-size-2xl)}.ux-panel-item--transparent .ux-panel-content{background-color:transparent}.ux-panel-item--selected{border:1px solid var(--eui-base-color-primary-100)}.ux-panel-item--selected .ux-panel-header{background-color:var(--eui-base-color-primary-75);color:var(--eui-base-color-white)}.ux-panel-item--selected .ux-panel-header .ux-a-label__label,.ux-panel-item--selected .ux-panel-header a{color:var(--eui-base-color-white)}.ux-panel-header--expandable{cursor:pointer}.ux-panel-header--accordion-expanded{background-color:var(--eui-base-color-primary-100)!important}.ux-panel-header--accordion-expanded .ux-a-label__label{color:var(--eui-base-color-white)!important}.ux-panel-header--has-light-label .ux-a-label__label{font-weight:400}.ux-panel-header--accordion-expanded .ux-panel-header__expand-toggle{color:var(--eui-base-color-white)!important}.ux-panel-content{background-color:var(--eui-base-color-white);padding:var(--eui-base-spacing-m);position:relative;transition:var(--eui-base-animation-transition-base)}.ux-panel-content--no-padding{padding:0}.ux-panel-content--blocked{z-index:0}.ux-panel-content__blocked-overlay{background-color:var(--eui-base-color-grey-20);height:100%;opacity:.5;position:absolute;right:0;top:0;width:100%;z-index:1}.ux-panel-content__blocked-overlay:after{animation:spin 1s linear infinite;border:10px solid transparent;border-radius:50%;border-top-color:var(--eui-base-color-primary-75);content:\"\";display:block;height:100px;left:50%;margin:-50px 0 0 -50px;position:absolute;top:50%;width:100px}.ux-panel-content--fixed-height{overflow:hidden}.ux-panel-content--fixed-height-scrollable{overflow-y:auto}.ux-panel-content--edit-mode-active{background-color:var(--eui-base-color-info-5)}uxpanelfooter{justify-content:flex-end;align-items:center;display:flex;width:100%}uxpanelfooter ux-button:not(:first-child){margin-left:var(--eui-base-spacing-xs)}.ux-panel-footer{background-color:var(--eui-base-color-grey-5);border-top:1px solid var(--eui-base-color-grey-15);padding:var(--eui-base-spacing-s);align-items:center;display:flex;width:100%}.ux-panel-footer--large{margin-top:4rem;padding:var(--eui-base-spacing-l)}.ux-panel-toolbar{margin-bottom:var(--eui-base-spacing-s)}.ux-panel-toolbar .ux-a-toolbar-filter{padding-left:0;padding-right:0}.ux-panel-toolbar .ux-a-toolbar-filter uxtoolbarfilterbuttons{margin-left:var(--eui-base-spacing-xs)}@media screen and (max-width: 767px){.eui-page-column .ux-panel{margin-right:0}uxpanelheaderrightcontent{align-items:center;display:flex;flex-wrap:wrap;justify-content:flex-end}uxpanelheaderrightcontent button:not(:last-child){margin-bottom:var(--eui-base-spacing-xs)}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.UxDropdownButtonComponent, selector: "ux-dropdown-button", inputs: ["styleClass", "label", "iconClass", "links", "activeLink", "typeClass", "dropdownMinHeight", "dropdownMaxHeight", "width", "buttonLabelAlignment", "e2eAttr", "menu", "id", "isUpdateLabelFromSelectedItem", "isDisabled", "isSmall", "isLarge", "isSplitButtonToggle", "isDropDownRightAligned", "isLinkToggle", "isOutline", "isShowDropdownToggle", "hasItems", "isSecondary", "isBlock"], outputs: ["linkSelected"] }, { kind: "component", type: i3.UxToolbarFilterComponent, selector: "ux-a-toolbar-filter", inputs: ["isVisible", "filterLabel", "expandAllLabel", "collapseAllLabel", "isFilterVisible", "isToggleVisible", "isToggleExpanded", "filterValue", "hasLabels", "e2eAttr"], outputs: ["filter", "expandAll", "collapseAll"] }, { kind: "directive", type: i3.UxToolbarFilterButtonsTagDirective, selector: "uxToolbarFilterButtons" }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, styles: [".ux-panels{margin:0;padding:0}.ux-panel{margin-bottom:var(--eui-base-spacing-m)}.ux-panel--is-collapsible{display:flex;padding-right:var(--eui-base-spacing-xl);position:relative}.ux-panel__collapsible-button{align-items:center;background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-grey-15);cursor:pointer;display:flex;font-size:var(--eui-base-font-size-xl);justify-content:center;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);position:absolute;right:0;text-align:center;top:0;width:var(--eui-base-spacing-xl)}.ux-panel__collapsible-button--collapsed{position:relative}.ux-panel-item{background-color:var(--eui-base-color-white);border:var(--eui-base-border);border-radius:var(--eui-border-radius-base);position:relative;width:100%;box-shadow:var(--eui-base-shadow-1)}.ux-panel-item--has-tabs>.ux-panel-header{display:none}.ux-panel-item--has-tabs>.ux-panel-content{padding:0}.ux-panel-item--has-tabs>.ux-panel-content .eui-tab-content{padding:var(--eui-base-spacing-s)}.ux-panel-item--has-tabs>.ux-panel-content--no-padding .ux-tab-content{padding:0}.ux-panel-item--no-header>.ux-panel-header{display:none}.ux-panel-item--danger .ux-panel-header{background-color:var(--eui-base-color-danger-120)}.ux-panel-item--danger .ux-panel-header__status-indicator-wrapper-label{color:var(--eui-base-color-danger-130)}.ux-panel-item--info .ux-panel-header{background-color:var(--eui-base-color-info-120)}.ux-panel-item--info .ux-panel-header__status-indicator-wrapper-label{color:var(--eui-base-color-info-130)}.ux-panel-item--success .ux-panel-header{background-color:var(--eui-base-color-success-120)}.ux-panel-item--success .ux-panel-header__status-indicator-wrapper-label{color:var(--eui-base-color-success-130)}.ux-panel-item--warning .ux-panel-header{background-color:var(--eui-base-color-warning-120)}.ux-panel-item--warning .ux-panel-header:focus{outline-color:#117de2}.ux-panel-item--warning .ux-panel-header__status-indicator-wrapper-label{color:var(--eui-base-color-warning-130)}.ux-panel-item--clickable{cursor:pointer}.ux-panel-item--clickable:focus,.ux-panel-item--clickable:hover{outline:0;box-shadow:var(--eui-base-shadow-2)}.ux-panel-item--highlighted{z-index:var(--eui-base-z-index-highlighted)}.ux-panel-item__status-indicator-icon-wrapper{align-items:center;background-color:var(--eui-base-color-warning-110);border-radius:100%;color:var(--eui-base-color-white);display:flex;font-size:var(--eui-base-font-size);height:20px;justify-content:center;left:-6px;position:absolute;text-align:center;top:-6px;width:20px;z-index:3}uxpanelheader{align-items:center;display:flex;flex:1 1 0%;width:100%}uxpanelheaderrightcontent{align-items:center;display:flex}.ux-panel-header{align-items:center;background-color:var(--eui-base-color-grey-10);border-bottom:var(--eui-base-border-lighter);border-top-left-radius:var(--eui-base-border-radius);border-top-right-radius:var(--eui-base-border-radius);display:flex;padding:var(--eui-base-spacing-m);width:100%}.ux-panel-header--small{padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m)}.ux-panel-header__right-content{align-items:center;display:flex;margin-left:auto}.ux-panel-header__expand-toggle{cursor:pointer;font-size:var(--eui-base-font-size-xl);padding-left:var(--eui-base-spacing-m);padding-right:var(--eui-base-spacing-s)}.ux-panel-header__status-indicator-wrapper{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-15);display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.ux-panel-header__status-indicator-wrapper-toggle{margin-left:var(--eui-base-spacing-s);padding:var(--eui-base-spacing-xs)}.ux-panel-header__status-indicator-wrapper-toggle:focus{box-shadow:var(--eui-base-shadow-2)}.ux-panel-header__status-indicator-content{border-bottom:1px solid var(--eui-base-color-grey-15);padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m)}.ux-panel-header__sub-header{border-bottom:1px solid var(--eui-base-color-grey-15);padding:var(--eui-base-spacing-m)}.ux-panel-header ux-a-label{-ms-flex:1 1 0%}.ux-panel-item--flat{background-color:var(--eui-base-color-white)}.ux-panel-item--flat .ux-panel-header{background-color:var(--eui-base-color-white);margin:0}.ux-panel-item--flat .ux-panel-header--large{margin-bottom:var(--eui-base-spacing-s)}.ux-panel-item--flat .ux-panel-header--large .ux-a-label{padding:var(--eui-base-spacing-m) 0 var(--eui-base-spacing-s) 0}.ux-panel-item--flat .ux-panel-header--large .ux-a-label__label{font-size:var(--eui-base-font-size-2xl)}.ux-panel-item--flat .ux-panel-item:not(.ux-panel-item--flat):not(.ux-panel-item--selected) .ux-panel-header{background-color:var(--eui-base-color-grey-10)}.ux-panel-item--transparent{background-color:transparent;border:0;box-shadow:none}.ux-panel-item--transparent .ux-panel-header{background-color:transparent;margin:0;padding-top:var(--eui-base-spacing-s)}.ux-panel-item--transparent .ux-panel-header--large{margin-bottom:var(--eui-base-spacing-s)}.ux-panel-item--transparent .ux-panel-header--large .ux-a-label{padding:var(--eui-base-spacing-m) 0 var(--eui-base-spacing-s) 0}.ux-panel-item--transparent .ux-panel-header--large .ux-a-label__label{font-size:var(--eui-base-font-size-2xl)}.ux-panel-item--transparent .ux-panel-content{background-color:transparent}.ux-panel-item--selected{border:1px solid var(--eui-base-color-primary-100)}.ux-panel-item--selected .ux-panel-header{background-color:var(--eui-base-color-primary-75);color:var(--eui-base-color-white)}.ux-panel-item--selected .ux-panel-header .ux-a-label__label,.ux-panel-item--selected .ux-panel-header a{color:var(--eui-base-color-white)}.ux-panel-header--expandable{cursor:pointer}.ux-panel-header--accordion-expanded{background-color:var(--eui-base-color-primary-100)!important}.ux-panel-header--accordion-expanded .ux-a-label__label{color:var(--eui-base-color-white)!important}.ux-panel-header--has-light-label .ux-a-label__label{font-weight:400}.ux-panel-header--accordion-expanded .ux-panel-header__expand-toggle{color:var(--eui-base-color-white)!important}.ux-panel-content{background-color:var(--eui-base-color-white);padding:var(--eui-base-spacing-m);position:relative;transition:var(--eui-base-animation-transition-base)}.ux-panel-content--no-padding{padding:0}.ux-panel-content--blocked{z-index:0}.ux-panel-content__blocked-overlay{background-color:var(--eui-base-color-grey-20);height:100%;opacity:.5;position:absolute;right:0;top:0;width:100%;z-index:1}.ux-panel-content__blocked-overlay:after{animation:spin 1s linear infinite;border:10px solid transparent;border-radius:50%;border-top-color:var(--eui-base-color-primary-75);content:\"\";display:block;height:100px;left:50%;margin:-50px 0 0 -50px;position:absolute;top:50%;width:100px}.ux-panel-content--fixed-height{overflow:hidden}.ux-panel-content--fixed-height-scrollable{overflow-y:auto}.ux-panel-content--edit-mode-active{background-color:var(--eui-base-color-info-5)}uxpanelfooter{justify-content:flex-end;align-items:center;display:flex;width:100%}uxpanelfooter ux-button:not(:first-child){margin-left:var(--eui-base-spacing-xs)}.ux-panel-footer{background-color:var(--eui-base-color-grey-5);border-top:1px solid var(--eui-base-color-grey-15);padding:var(--eui-base-spacing-s);align-items:center;display:flex;width:100%}.ux-panel-footer--large{margin-top:4rem;padding:var(--eui-base-spacing-l)}.ux-panel-toolbar{margin-bottom:var(--eui-base-spacing-s)}.ux-panel-toolbar .ux-a-toolbar-filter{padding-left:0;padding-right:0}.ux-panel-toolbar .ux-a-toolbar-filter uxtoolbarfilterbuttons{margin-left:var(--eui-base-spacing-xs)}@media screen and (max-width: 767px){.eui-page-column .ux-panel{margin-right:0}uxpanelheaderrightcontent{align-items:center;display:flex;flex-wrap:wrap;justify-content:flex-end}uxpanelheaderrightcontent button:not(:last-child){margin-bottom:var(--eui-base-spacing-xs)}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.UxDropdownButtonComponent, selector: "ux-dropdown-button", inputs: ["styleClass", "label", "iconClass", "links", "activeLink", "typeClass", "dropdownMinHeight", "dropdownMaxHeight", "width", "buttonLabelAlignment", "e2eAttr", "menu", "id", "isUpdateLabelFromSelectedItem", "isDisabled", "isSmall", "isLarge", "isSplitButtonToggle", "isDropDownRightAligned", "isLinkToggle", "isOutline", "isShowDropdownToggle", "hasItems", "isSecondary", "isBlock"], outputs: ["linkSelected"] }, { kind: "component", type: i3.UxToolbarFilterComponent, selector: "ux-a-toolbar-filter", inputs: ["isVisible", "filterLabel", "expandAllLabel", "collapseAllLabel", "isFilterVisible", "isToggleVisible", "isToggleExpanded", "filterValue", "hasLabels", "e2eAttr"], outputs: ["filter", "expandAll", "collapseAll"] }, { kind: "directive", type: i3.UxToolbarFilterButtonsTagDirective, selector: "uxToolbarFilterButtons" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: UxPanelsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ux-panels', template: `
@@ -211,10 +211,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4",
             </ux-a-toolbar-filter>
         </div>
 
-        <ul class="panels" attr.data-e2e="{{ e2eAttr }}">
+        <ul class="ux-panels" attr.data-e2e="{{ e2eAttr }}">
             <ng-content></ng-content>
         </ul>
-    `, encapsulation: ViewEncapsulation.None, styles: [".ux-panel{margin-bottom:var(--eui-base-spacing-m)}.ux-panel--is-collapsible{display:flex;padding-right:var(--eui-base-spacing-xl);position:relative}.ux-panel__collapsible-button{align-items:center;background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-grey-15);cursor:pointer;display:flex;font-size:var(--eui-base-font-size-xl);justify-content:center;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);position:absolute;right:0;text-align:center;top:0;width:var(--eui-base-spacing-xl)}.ux-panel__collapsible-button--collapsed{position:relative}.ux-panel-item{background-color:var(--eui-base-color-white);border:var(--eui-base-border);border-radius:var(--eui-border-radius-base);position:relative;width:100%;box-shadow:var(--eui-base-shadow-1)}.ux-panel-item--has-tabs>.ux-panel-header{display:none}.ux-panel-item--has-tabs>.ux-panel-content{padding:0}.ux-panel-item--has-tabs>.ux-panel-content .eui-tab-content{padding:var(--eui-base-spacing-s)}.ux-panel-item--has-tabs>.ux-panel-content--no-padding .ux-tab-content{padding:0}.ux-panel-item--no-header>.ux-panel-header{display:none}.ux-panel-item--danger .ux-panel-header{background-color:var(--eui-base-color-danger-120)}.ux-panel-item--danger .ux-panel-header__status-indicator-wrapper-label{color:var(--eui-base-color-danger-130)}.ux-panel-item--info .ux-panel-header{background-color:var(--eui-base-color-info-120)}.ux-panel-item--info .ux-panel-header__status-indicator-wrapper-label{color:var(--eui-base-color-info-130)}.ux-panel-item--success .ux-panel-header{background-color:var(--eui-base-color-success-120)}.ux-panel-item--success .ux-panel-header__status-indicator-wrapper-label{color:var(--eui-base-color-success-130)}.ux-panel-item--warning .ux-panel-header{background-color:var(--eui-base-color-warning-120)}.ux-panel-item--warning .ux-panel-header:focus{outline-color:#117de2}.ux-panel-item--warning .ux-panel-header__status-indicator-wrapper-label{color:var(--eui-base-color-warning-130)}.ux-panel-item--clickable{cursor:pointer}.ux-panel-item--clickable:focus,.ux-panel-item--clickable:hover{outline:0;box-shadow:var(--eui-base-shadow-2)}.ux-panel-item--highlighted{z-index:var(--eui-base-z-index-highlighted)}.ux-panel-item__status-indicator-icon-wrapper{align-items:center;background-color:var(--eui-base-color-warning-110);border-radius:100%;color:var(--eui-base-color-white);display:flex;font-size:var(--eui-base-font-size);height:20px;justify-content:center;left:-6px;position:absolute;text-align:center;top:-6px;width:20px;z-index:3}uxpanelheader{align-items:center;display:flex;flex:1 1 0%;width:100%}uxpanelheaderrightcontent{align-items:center;display:flex}.ux-panel-header{align-items:center;background-color:var(--eui-base-color-grey-10);border-bottom:var(--eui-base-border-lighter);border-top-left-radius:var(--eui-base-border-radius);border-top-right-radius:var(--eui-base-border-radius);display:flex;padding:var(--eui-base-spacing-m);width:100%}.ux-panel-header--small{padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m)}.ux-panel-header__right-content{align-items:center;display:flex;margin-left:auto}.ux-panel-header__expand-toggle{cursor:pointer;font-size:var(--eui-base-font-size-xl);padding-left:var(--eui-base-spacing-m);padding-right:var(--eui-base-spacing-s)}.ux-panel-header__status-indicator-wrapper{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-15);display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.ux-panel-header__status-indicator-wrapper-toggle{margin-left:var(--eui-base-spacing-s);padding:var(--eui-base-spacing-xs)}.ux-panel-header__status-indicator-wrapper-toggle:focus{box-shadow:var(--eui-base-shadow-2)}.ux-panel-header__status-indicator-content{border-bottom:1px solid var(--eui-base-color-grey-15);padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m)}.ux-panel-header__sub-header{border-bottom:1px solid var(--eui-base-color-grey-15);padding:var(--eui-base-spacing-m)}.ux-panel-header ux-a-label{-ms-flex:1 1 0%}.ux-panel-item--flat{background-color:var(--eui-base-color-white)}.ux-panel-item--flat .ux-panel-header{background-color:var(--eui-base-color-white);margin:0}.ux-panel-item--flat .ux-panel-header--large{margin-bottom:var(--eui-base-spacing-s)}.ux-panel-item--flat .ux-panel-header--large .ux-a-label{padding:var(--eui-base-spacing-m) 0 var(--eui-base-spacing-s) 0}.ux-panel-item--flat .ux-panel-header--large .ux-a-label__label{font-size:var(--eui-base-font-size-2xl)}.ux-panel-item--flat .ux-panel-item:not(.ux-panel-item--flat):not(.ux-panel-item--selected) .ux-panel-header{background-color:var(--eui-base-color-grey-10)}.ux-panel-item--transparent{background-color:transparent;border:0;box-shadow:none}.ux-panel-item--transparent .ux-panel-header{background-color:transparent;margin:0;padding-top:var(--eui-base-spacing-s)}.ux-panel-item--transparent .ux-panel-header--large{margin-bottom:var(--eui-base-spacing-s)}.ux-panel-item--transparent .ux-panel-header--large .ux-a-label{padding:var(--eui-base-spacing-m) 0 var(--eui-base-spacing-s) 0}.ux-panel-item--transparent .ux-panel-header--large .ux-a-label__label{font-size:var(--eui-base-font-size-2xl)}.ux-panel-item--transparent .ux-panel-content{background-color:transparent}.ux-panel-item--selected{border:1px solid var(--eui-base-color-primary-100)}.ux-panel-item--selected .ux-panel-header{background-color:var(--eui-base-color-primary-75);color:var(--eui-base-color-white)}.ux-panel-item--selected .ux-panel-header .ux-a-label__label,.ux-panel-item--selected .ux-panel-header a{color:var(--eui-base-color-white)}.ux-panel-header--expandable{cursor:pointer}.ux-panel-header--accordion-expanded{background-color:var(--eui-base-color-primary-100)!important}.ux-panel-header--accordion-expanded .ux-a-label__label{color:var(--eui-base-color-white)!important}.ux-panel-header--has-light-label .ux-a-label__label{font-weight:400}.ux-panel-header--accordion-expanded .ux-panel-header__expand-toggle{color:var(--eui-base-color-white)!important}.ux-panel-content{background-color:var(--eui-base-color-white);padding:var(--eui-base-spacing-m);position:relative;transition:var(--eui-base-animation-transition-base)}.ux-panel-content--no-padding{padding:0}.ux-panel-content--blocked{z-index:0}.ux-panel-content__blocked-overlay{background-color:var(--eui-base-color-grey-20);height:100%;opacity:.5;position:absolute;right:0;top:0;width:100%;z-index:1}.ux-panel-content__blocked-overlay:after{animation:spin 1s linear infinite;border:10px solid transparent;border-radius:50%;border-top-color:var(--eui-base-color-primary-75);content:\"\";display:block;height:100px;left:50%;margin:-50px 0 0 -50px;position:absolute;top:50%;width:100px}.ux-panel-content--fixed-height{overflow:hidden}.ux-panel-content--fixed-height-scrollable{overflow-y:auto}.ux-panel-content--edit-mode-active{background-color:var(--eui-base-color-info-5)}uxpanelfooter{justify-content:flex-end;align-items:center;display:flex;width:100%}uxpanelfooter ux-button:not(:first-child){margin-left:var(--eui-base-spacing-xs)}.ux-panel-footer{background-color:var(--eui-base-color-grey-5);border-top:1px solid var(--eui-base-color-grey-15);padding:var(--eui-base-spacing-s);align-items:center;display:flex;width:100%}.ux-panel-footer--large{margin-top:4rem;padding:var(--eui-base-spacing-l)}.ux-panel-toolbar{margin-bottom:var(--eui-base-spacing-s)}.ux-panel-toolbar .ux-a-toolbar-filter{padding-left:0;padding-right:0}.ux-panel-toolbar .ux-a-toolbar-filter uxtoolbarfilterbuttons{margin-left:var(--eui-base-spacing-xs)}@media screen and (max-width: 767px){.eui-page-column .ux-panel{margin-right:0}uxpanelheaderrightcontent{align-items:center;display:flex;flex-wrap:wrap;justify-content:flex-end}uxpanelheaderrightcontent button:not(:last-child){margin-bottom:var(--eui-base-spacing-xs)}}\n"] }]
+    `, encapsulation: ViewEncapsulation.None, styles: [".ux-panels{margin:0;padding:0}.ux-panel{margin-bottom:var(--eui-base-spacing-m)}.ux-panel--is-collapsible{display:flex;padding-right:var(--eui-base-spacing-xl);position:relative}.ux-panel__collapsible-button{align-items:center;background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-grey-15);cursor:pointer;display:flex;font-size:var(--eui-base-font-size-xl);justify-content:center;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);position:absolute;right:0;text-align:center;top:0;width:var(--eui-base-spacing-xl)}.ux-panel__collapsible-button--collapsed{position:relative}.ux-panel-item{background-color:var(--eui-base-color-white);border:var(--eui-base-border);border-radius:var(--eui-border-radius-base);position:relative;width:100%;box-shadow:var(--eui-base-shadow-1)}.ux-panel-item--has-tabs>.ux-panel-header{display:none}.ux-panel-item--has-tabs>.ux-panel-content{padding:0}.ux-panel-item--has-tabs>.ux-panel-content .eui-tab-content{padding:var(--eui-base-spacing-s)}.ux-panel-item--has-tabs>.ux-panel-content--no-padding .ux-tab-content{padding:0}.ux-panel-item--no-header>.ux-panel-header{display:none}.ux-panel-item--danger .ux-panel-header{background-color:var(--eui-base-color-danger-120)}.ux-panel-item--danger .ux-panel-header__status-indicator-wrapper-label{color:var(--eui-base-color-danger-130)}.ux-panel-item--info .ux-panel-header{background-color:var(--eui-base-color-info-120)}.ux-panel-item--info .ux-panel-header__status-indicator-wrapper-label{color:var(--eui-base-color-info-130)}.ux-panel-item--success .ux-panel-header{background-color:var(--eui-base-color-success-120)}.ux-panel-item--success .ux-panel-header__status-indicator-wrapper-label{color:var(--eui-base-color-success-130)}.ux-panel-item--warning .ux-panel-header{background-color:var(--eui-base-color-warning-120)}.ux-panel-item--warning .ux-panel-header:focus{outline-color:#117de2}.ux-panel-item--warning .ux-panel-header__status-indicator-wrapper-label{color:var(--eui-base-color-warning-130)}.ux-panel-item--clickable{cursor:pointer}.ux-panel-item--clickable:focus,.ux-panel-item--clickable:hover{outline:0;box-shadow:var(--eui-base-shadow-2)}.ux-panel-item--highlighted{z-index:var(--eui-base-z-index-highlighted)}.ux-panel-item__status-indicator-icon-wrapper{align-items:center;background-color:var(--eui-base-color-warning-110);border-radius:100%;color:var(--eui-base-color-white);display:flex;font-size:var(--eui-base-font-size);height:20px;justify-content:center;left:-6px;position:absolute;text-align:center;top:-6px;width:20px;z-index:3}uxpanelheader{align-items:center;display:flex;flex:1 1 0%;width:100%}uxpanelheaderrightcontent{align-items:center;display:flex}.ux-panel-header{align-items:center;background-color:var(--eui-base-color-grey-10);border-bottom:var(--eui-base-border-lighter);border-top-left-radius:var(--eui-base-border-radius);border-top-right-radius:var(--eui-base-border-radius);display:flex;padding:var(--eui-base-spacing-m);width:100%}.ux-panel-header--small{padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m)}.ux-panel-header__right-content{align-items:center;display:flex;margin-left:auto}.ux-panel-header__expand-toggle{cursor:pointer;font-size:var(--eui-base-font-size-xl);padding-left:var(--eui-base-spacing-m);padding-right:var(--eui-base-spacing-s)}.ux-panel-header__status-indicator-wrapper{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-15);display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.ux-panel-header__status-indicator-wrapper-toggle{margin-left:var(--eui-base-spacing-s);padding:var(--eui-base-spacing-xs)}.ux-panel-header__status-indicator-wrapper-toggle:focus{box-shadow:var(--eui-base-shadow-2)}.ux-panel-header__status-indicator-content{border-bottom:1px solid var(--eui-base-color-grey-15);padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m)}.ux-panel-header__sub-header{border-bottom:1px solid var(--eui-base-color-grey-15);padding:var(--eui-base-spacing-m)}.ux-panel-header ux-a-label{-ms-flex:1 1 0%}.ux-panel-item--flat{background-color:var(--eui-base-color-white)}.ux-panel-item--flat .ux-panel-header{background-color:var(--eui-base-color-white);margin:0}.ux-panel-item--flat .ux-panel-header--large{margin-bottom:var(--eui-base-spacing-s)}.ux-panel-item--flat .ux-panel-header--large .ux-a-label{padding:var(--eui-base-spacing-m) 0 var(--eui-base-spacing-s) 0}.ux-panel-item--flat .ux-panel-header--large .ux-a-label__label{font-size:var(--eui-base-font-size-2xl)}.ux-panel-item--flat .ux-panel-item:not(.ux-panel-item--flat):not(.ux-panel-item--selected) .ux-panel-header{background-color:var(--eui-base-color-grey-10)}.ux-panel-item--transparent{background-color:transparent;border:0;box-shadow:none}.ux-panel-item--transparent .ux-panel-header{background-color:transparent;margin:0;padding-top:var(--eui-base-spacing-s)}.ux-panel-item--transparent .ux-panel-header--large{margin-bottom:var(--eui-base-spacing-s)}.ux-panel-item--transparent .ux-panel-header--large .ux-a-label{padding:var(--eui-base-spacing-m) 0 var(--eui-base-spacing-s) 0}.ux-panel-item--transparent .ux-panel-header--large .ux-a-label__label{font-size:var(--eui-base-font-size-2xl)}.ux-panel-item--transparent .ux-panel-content{background-color:transparent}.ux-panel-item--selected{border:1px solid var(--eui-base-color-primary-100)}.ux-panel-item--selected .ux-panel-header{background-color:var(--eui-base-color-primary-75);color:var(--eui-base-color-white)}.ux-panel-item--selected .ux-panel-header .ux-a-label__label,.ux-panel-item--selected .ux-panel-header a{color:var(--eui-base-color-white)}.ux-panel-header--expandable{cursor:pointer}.ux-panel-header--accordion-expanded{background-color:var(--eui-base-color-primary-100)!important}.ux-panel-header--accordion-expanded .ux-a-label__label{color:var(--eui-base-color-white)!important}.ux-panel-header--has-light-label .ux-a-label__label{font-weight:400}.ux-panel-header--accordion-expanded .ux-panel-header__expand-toggle{color:var(--eui-base-color-white)!important}.ux-panel-content{background-color:var(--eui-base-color-white);padding:var(--eui-base-spacing-m);position:relative;transition:var(--eui-base-animation-transition-base)}.ux-panel-content--no-padding{padding:0}.ux-panel-content--blocked{z-index:0}.ux-panel-content__blocked-overlay{background-color:var(--eui-base-color-grey-20);height:100%;opacity:.5;position:absolute;right:0;top:0;width:100%;z-index:1}.ux-panel-content__blocked-overlay:after{animation:spin 1s linear infinite;border:10px solid transparent;border-radius:50%;border-top-color:var(--eui-base-color-primary-75);content:\"\";display:block;height:100px;left:50%;margin:-50px 0 0 -50px;position:absolute;top:50%;width:100px}.ux-panel-content--fixed-height{overflow:hidden}.ux-panel-content--fixed-height-scrollable{overflow-y:auto}.ux-panel-content--edit-mode-active{background-color:var(--eui-base-color-info-5)}uxpanelfooter{justify-content:flex-end;align-items:center;display:flex;width:100%}uxpanelfooter ux-button:not(:first-child){margin-left:var(--eui-base-spacing-xs)}.ux-panel-footer{background-color:var(--eui-base-color-grey-5);border-top:1px solid var(--eui-base-color-grey-15);padding:var(--eui-base-spacing-s);align-items:center;display:flex;width:100%}.ux-panel-footer--large{margin-top:4rem;padding:var(--eui-base-spacing-l)}.ux-panel-toolbar{margin-bottom:var(--eui-base-spacing-s)}.ux-panel-toolbar .ux-a-toolbar-filter{padding-left:0;padding-right:0}.ux-panel-toolbar .ux-a-toolbar-filter uxtoolbarfilterbuttons{margin-left:var(--eui-base-spacing-xs)}@media screen and (max-width: 767px){.eui-page-column .ux-panel{margin-right:0}uxpanelheaderrightcontent{align-items:center;display:flex;flex-wrap:wrap;justify-content:flex-end}uxpanelheaderrightcontent button:not(:last-child){margin-bottom:var(--eui-base-spacing-xs)}}\n"] }]
         }], propDecorators: { isShowToolbar: [{
                 type: Input
             }], isShowToolbarExtendedPanelsToggle: [{
@@ -545,10 +545,10 @@ class UxPanelComponent {
     }
 }
 /** @nocollapse */ UxPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: UxPanelComponent, deps: [{ token: forwardRef(() => UxPanelsComponent), host: true, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ UxPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: UxPanelComponent, selector: "ux-panel", inputs: { id: "id", contentId: "contentId", styleClass: "styleClass", contentStyleClass: "contentStyleClass", headerStyleClass: "headerStyleClass", label: "label", subLabel: "subLabel", labelStyleClass: "labelStyleClass", labelInfos: "labelInfos", filterInput: "filterInput", iconClass: "iconClass", iconTypeClass: "iconTypeClass", isIconRounded: "isIconRounded", isExpandable: "isExpandable", isExpanded: "isExpanded", isVisible: "isVisible", isSelected: "isSelected", isCollapsible: "isCollapsible", isCollapsed: "isCollapsed", tagLabel: "tagLabel", tagTypeClass: "tagTypeClass", tagCount: "tagCount", badgeLabel: "badgeLabel", badgeTypeClass: "badgeTypeClass", hasTabs: "hasTabs", hasNoHeader: "hasNoHeader", hasNoContentPadding: "hasNoContentPadding", isBlocked: "isBlocked", isBlockedAriaLabel: "isBlockedAriaLabel", maxHeight: "maxHeight", contentHeight: "contentHeight", isFlat: "isFlat", isTransparent: "isTransparent", isLargeHeader: "isLargeHeader", isLargeFooter: "isLargeFooter", isSmallHeader: "isSmallHeader", hasStatusIndicator: "hasStatusIndicator", statusIndicatorTypeClass: "statusIndicatorTypeClass", statusIndicatorMessageLabel: "statusIndicatorMessageLabel", isTogglableStatusIndicatorContent: "isTogglableStatusIndicatorContent", isStatusIndicatorContentExpanded: "isStatusIndicatorContentExpanded", hasStatusIndicatorHeaderBg: "hasStatusIndicatorHeaderBg", hasStatusIndicatorHeaderIcon: "hasStatusIndicatorHeaderIcon", isEditModeActive: "isEditModeActive", isContainerOnly: "isContainerOnly", isClickable: "isClickable", isHighlighted: "isHighlighted", isAccordionPanel: "isAccordionPanel", customState: "customState", subLabelSizeLimit: "subLabelSizeLimit", tabindex: "tabindex", isSticky: "isSticky", e2eAttr: "e2eAttr" }, outputs: { panelExpanded: "panelExpanded", panelCollapsed: "panelCollapsed" }, queries: [{ propertyName: "customStatusIndicatorContent", first: true, predicate: i0.forwardRef(function () { return UxPanelHeaderStatusIndicatorContentTagDirective; }), descendants: true }, { propertyName: "customSubHeaderContent", first: true, predicate: i0.forwardRef(function () { return UxPanelSubHeaderContentTagDirective; }), descendants: true }, { propertyName: "customPanelHeader", predicate: i0.forwardRef(function () { return UxPanelHeaderTagDirective; }) }, { propertyName: "customPanelFooter", predicate: i0.forwardRef(function () { return UxPanelFooterTagDirective; }) }, { propertyName: "customPanelHeaderRightContent", predicate: i0.forwardRef(function () { return UxPanelHeaderRightContentTagDirective; }) }, { propertyName: "customPanelHeaderWithDescendants", predicate: i0.forwardRef(function () { return UxPanelHeaderWithDescendantsTagDirective; }), descendants: true }, { propertyName: "customPanelFooterWithDescendants", predicate: i0.forwardRef(function () { return UxPanelFooterWithDescendantsTagDirective; }), descendants: true }, { propertyName: "customPanelHeaderRightContentWithDescendants", predicate: i0.forwardRef(function () { return UxPanelHeaderRightContentWithDescendantsTagDirective; }), descendants: true }], ngImport: i0, template: "<div #stickyContainer></div>\n<div class=\"ux-panel\" [class.ux-panel--is-collapsible]=\"isCollapsible\" attr.data-e2e=\"{{ e2eAttr }}\">\n    <ng-template [ngIf]=\"isCollapsible\">\n        <div class=\"ux-panel__collapsible-button\" [class.ux-panel__collapsible-button--collapsed]=\"isCollapsed\"\n             (click)=\"onCollapsibleButtonClick($event)\">\n            <i class=\"ux-icon\" [ngClass]=\"isCollapsed ? 'ux-icon-caret-right' : 'ux-icon-caret-left'\"></i>\n        </div>\n    </ng-template>\n\n    <div *ngIf=\"isVisible && !showOnlyInvalid && !isCollapsed\"\n         class=\"ux-panel-item {{styleClass}} {{statePanelItemClasses}} {{statePanelItemClassesDynamic}}\" #stickyContent>\n        <span *ngIf=\"hasStatusIndicator && hasStatusIndicatorHeaderIcon\"\n              class=\"ux-panel-item__status-indicator-icon-wrapper ux-u-bg-color-{{statusIndicatorTypeClass}}-dark\">\n            <span\n                class=\"ux-panel-item__status-indicator-icon-wrapper-icon ux-icon ux-icon-{{statusIndicatorIconClass}}\"></span>\n        </span>\n\n        <ng-template [ngIf]=\"customPanelHeader.length !== 0\">\n            <div class=\"ux-panel-header {{headerStyleClass}} {{statePanelHeaderClasses}}\"\n                 [ngClass]=\"hasStatusIndicator && !hasStatusIndicatorHeaderBg && !hasStatusIndicatorHeaderIcon ? 'ux-u-border-l-'+statusIndicatorTypeClass : ''\"\n                 [class.ux-panel-header--accordion-expanded]=\"isExpanded && isAccordionPanel\"\n                 [class.ux-panel-header--expandable]=\"isExpandable\" (click)=\"toggle($event)\"\n                 [attr.role]=\"isExpandable ? 'button' : 'presentation'\" [tabindex]=\"tabindex\"\n                 attr.aria-label=\"{{label}} {{subLabel}} {{badgeLabel}} {{labelInfos}}\" [attr.aria-controls]=\"contentId\"\n                 [attr.aria-expanded]=\"isExpandable && isExpanded\" (keydown)=\"onKeyDown($event)\">\n                <ng-content select=\"uxPanelHeader\"></ng-content>\n                <span *ngIf=\"isExpandable\" class=\"ux-panel-header__expand-toggle ux-icon\"\n                      [ngClass]=\"{'ux-icon-angle-right': !isExpanded, 'ux-icon-angle-down': isExpanded}\"></span>\n            </div>\n        </ng-template>\n\n        <ng-template [ngIf]=\"customPanelHeaderWithDescendants.length !== 0\">\n            <div class=\"ux-panel-header {{headerStyleClass}} {{statePanelHeaderClasses}}\"\n                 [ngClass]=\"hasStatusIndicator && !hasStatusIndicatorHeaderBg && !hasStatusIndicatorHeaderIcon ? 'ux-u-border-l-'+statusIndicatorTypeClass : ''\"\n                 [class.ux-panel-header--accordion-expanded]=\"isExpanded && isAccordionPanel\"\n                 [class.ux-panel-header--expandable]=\"isExpandable\" (click)=\"toggle($event)\"\n                 [attr.role]=\"isExpandable ? 'button' : 'presentation'\" [tabindex]=\"tabindex\"\n                 attr.aria-label=\"{{label}} {{subLabel}} {{badgeLabel}} {{labelInfos}}\" [attr.aria-controls]=\"contentId\"\n                 [attr.aria-expanded]=\"isExpandable && isExpanded\" (keydown)=\"onKeyDown($event)\">\n                <ng-content select=\"uxPanelHeaderWithDescendants\"></ng-content>\n            </div>\n        </ng-template>\n\n        <ng-template [ngIf]=\"customPanelHeader.length === 0 && customPanelHeaderWithDescendants.length === 0\">\n            <div class=\"ux-panel-header {{headerStyleClass}} {{statePanelHeaderClasses}}\"\n                 [ngClass]=\"hasStatusIndicator && !hasStatusIndicatorHeaderBg && !hasStatusIndicatorHeaderIcon ? 'ux-u-border-l-'+statusIndicatorTypeClass : ''\"\n                 [class.ux-panel-header--accordion-expanded]=\"isExpanded && isAccordionPanel\"\n                 [class.ux-panel-header--expandable]=\"isExpandable\" (click)=\"toggle($event)\"\n                 [attr.role]=\"isExpandable ? 'button' : 'presentation'\" [tabindex]=\"tabindex\"\n                 attr.aria-label=\"{{label}} {{subLabel}} {{badgeLabel}} {{labelInfos}}\" [attr.aria-controls]=\"contentId\"\n                 [attr.aria-expanded]=\"isExpandable && isExpanded\" (keydown)=\"onKeyDown($event)\">\n                <ux-a-label label=\"{{label}}\" subLabel=\"{{subLabel}}\"\n                            badgeLabel=\"{{badgeLabel}}\" badgeTypeClass=\"{{badgeTypeClass}}\"\n                            labelStyleClass=\"{{labelStyleClass}}\"\n                            infos=\"{{labelInfos}}\"\n                            iconClass=\"{{iconClass}}\"\n                            iconTypeClass=\"{{iconTypeClass}}\"\n                            themeClass=\"{{labelThemeClass}}\"\n                            [isIconRounded]=\"isIconRounded\"\n                            [subLabelSizeLimit]=\"subLabelSizeLimit\"\n                            [isBoldLabel]=\"true\"\n                            tabindex=\"-1\">\n                </ux-a-label>\n                <div [id]=\"contentId\" class=\"ux-panel-header__right-content\">\n                    <ng-template [ngIf]=\"customPanelHeaderRightContent.length !== 0\">\n                        <ng-content select=\"uxPanelHeaderRightContent\"></ng-content>\n                    </ng-template>\n\n                    <ng-template [ngIf]=\"customPanelHeaderRightContentWithDescendants.length !== 0\">\n                        <ng-content select=\"uxPanelHeaderRightContentWithDescendants\"></ng-content>\n                    </ng-template>\n\n                    <ng-template\n                        [ngIf]=\"customPanelHeaderRightContent.length === 0 && customPanelHeaderRightContentWithDescendants.length === 0\">\n                        <ux-a-tag label=\"{{tagLabel}}\" subLabel=\"{{tagCount}}\" typeClass=\"{{tagTypeClass}}\"></ux-a-tag>\n                    </ng-template>\n\n                    <span *ngIf=\"isExpandable\" class=\"ux-panel-header__expand-toggle ux-icon\"\n                          [ngClass]=\"{'ux-icon-angle-right': !isExpanded, 'ux-icon-angle-down': isExpanded}\"></span>\n                </div>\n            </div>\n        </ng-template>\n\n        <ng-template [ngIf]=\"customSubHeaderContent\">\n            <div class=\"ux-panel-header__sub-header\">\n                <ng-content select=\"uxPanelSubHeaderContent\"></ng-content>\n            </div>\n        </ng-template>\n\n        <ng-template [ngIf]=\"hasStatusIndicator && customStatusIndicatorContent\">\n            <div class=\"ux-panel-header__status-indicator-wrapper\">\n                <span\n                    class=\"ux-panel-header__status-indicator-wrapper-label ux-u-color-{{statusIndicatorTypeClass}}-darkest\">\n                    {{statusIndicatorMessageLabel}}\n                </span>\n                <a *ngIf=\"isTogglableStatusIndicatorContent\"\n                   (click)=\"onToggleStatusIndicatorContent()\" class=\"ux-panel-header__status-indicator-wrapper-toggle\"\n                   tabindex=\"1\">\n                    <span class=\"ux-icon\" [class.ux-icon-angle-down]=\"isStatusIndicatorContentExpanded\"\n                          [class.ux-icon-angle-right]=\"!isStatusIndicatorContentExpanded\">\n                    </span>\n                </a>\n            </div>\n            <div *ngIf=\"isStatusIndicatorContentExpanded\" class=\"ux-panel-header__status-indicator-content\">\n                <ng-content select=\"uxPanelHeaderStatusIndicatorContent\"></ng-content>\n            </div>\n        </ng-template>\n\n        <div\n            class=\"ux-panel-content {{statePanelContentClasses}} {{contentStyleClass}} {{statePanelContentClassesDynamic}}\"\n            [class.ux-panel-content--fixed-height]=\"hasMaxHeight\"\n            [style.max-height]=\"actualMaxHeight\" [hidden]=\"!isExpanded\"\n            [style.height]=\"contentHeight\"\n            [class.ux-panel-content--fixed-height-scrollable]=\"hasContentHeight\"\n            aria-live=\"polite\">\n            <ng-content></ng-content>\n            <div *ngIf=\"isBlocked\" class=\"ux-panel-content__blocked-overlay\" role=\"status\" [attr.aria-busy]=\"isBlocked\"\n                 [attr.aria-label]=\"isBlockedAriaLabel\"></div>\n        </div>\n\n        <div *ngIf=\"customPanelFooter.length !== 0\" class=\"ux-panel-footer\"\n             [class.ux-panel-footer--large]=\"isLargeFooter\">\n            <ng-content select=\"uxPanelFooter\"></ng-content>\n        </div>\n\n        <div *ngIf=\"customPanelFooterWithDescendants.length !== 0\" class=\"ux-panel-footer\"\n             [class.ux-panel-footer--large]=\"isLargeFooter\">\n            <ng-content select=\"uxPanelFooterWithDescendants\"></ng-content>\n        </div>\n\n        <div *ngIf=\"hasMaxHeight\" class=\"ux-panel-footer justify-content-center\">\n            <button type=\"button\" class=\"ux-button ux-button--small ux-button--secondary\" (click)=\"toggleMaxHeight($event)\">\n                <span *ngIf=\"actualMaxHeight === 'none'\">show less...</span>\n                <span *ngIf=\"actualMaxHeight !== 'none'\">show more...</span>\n            </button>\n        </div>\n\n    </div>\n</div>\n", styles: [".ux-panel{margin-bottom:var(--eui-base-spacing-m)}.ux-panel--is-collapsible{display:flex;padding-right:var(--eui-base-spacing-xl);position:relative}.ux-panel__collapsible-button{align-items:center;background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-grey-15);cursor:pointer;display:flex;font-size:var(--eui-base-font-size-xl);justify-content:center;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);position:absolute;right:0;text-align:center;top:0;width:var(--eui-base-spacing-xl)}.ux-panel__collapsible-button--collapsed{position:relative}.ux-panel-item{background-color:var(--eui-base-color-white);border:var(--eui-base-border);border-radius:var(--eui-border-radius-base);position:relative;width:100%;box-shadow:var(--eui-base-shadow-1)}.ux-panel-item--has-tabs>.ux-panel-header{display:none}.ux-panel-item--has-tabs>.ux-panel-content{padding:0}.ux-panel-item--has-tabs>.ux-panel-content .eui-tab-content{padding:var(--eui-base-spacing-s)}.ux-panel-item--has-tabs>.ux-panel-content--no-padding .ux-tab-content{padding:0}.ux-panel-item--no-header>.ux-panel-header{display:none}.ux-panel-item--danger .ux-panel-header{background-color:var(--eui-base-color-danger-120)}.ux-panel-item--danger .ux-panel-header__status-indicator-wrapper-label{color:var(--eui-base-color-danger-130)}.ux-panel-item--info .ux-panel-header{background-color:var(--eui-base-color-info-120)}.ux-panel-item--info .ux-panel-header__status-indicator-wrapper-label{color:var(--eui-base-color-info-130)}.ux-panel-item--success .ux-panel-header{background-color:var(--eui-base-color-success-120)}.ux-panel-item--success .ux-panel-header__status-indicator-wrapper-label{color:var(--eui-base-color-success-130)}.ux-panel-item--warning .ux-panel-header{background-color:var(--eui-base-color-warning-120)}.ux-panel-item--warning .ux-panel-header:focus{outline-color:#117de2}.ux-panel-item--warning .ux-panel-header__status-indicator-wrapper-label{color:var(--eui-base-color-warning-130)}.ux-panel-item--clickable{cursor:pointer}.ux-panel-item--clickable:focus,.ux-panel-item--clickable:hover{outline:0;box-shadow:var(--eui-base-shadow-2)}.ux-panel-item--highlighted{z-index:var(--eui-base-z-index-highlighted)}.ux-panel-item__status-indicator-icon-wrapper{align-items:center;background-color:var(--eui-base-color-warning-110);border-radius:100%;color:var(--eui-base-color-white);display:flex;font-size:var(--eui-base-font-size);height:20px;justify-content:center;left:-6px;position:absolute;text-align:center;top:-6px;width:20px;z-index:3}uxpanelheader{align-items:center;display:flex;flex:1 1 0%;width:100%}uxpanelheaderrightcontent{align-items:center;display:flex}.ux-panel-header{align-items:center;background-color:var(--eui-base-color-grey-10);border-bottom:var(--eui-base-border-lighter);border-top-left-radius:var(--eui-base-border-radius);border-top-right-radius:var(--eui-base-border-radius);display:flex;padding:var(--eui-base-spacing-m);width:100%}.ux-panel-header--small{padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m)}.ux-panel-header__right-content{align-items:center;display:flex;margin-left:auto}.ux-panel-header__expand-toggle{cursor:pointer;font-size:var(--eui-base-font-size-xl);padding-left:var(--eui-base-spacing-m);padding-right:var(--eui-base-spacing-s)}.ux-panel-header__status-indicator-wrapper{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-15);display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.ux-panel-header__status-indicator-wrapper-toggle{margin-left:var(--eui-base-spacing-s);padding:var(--eui-base-spacing-xs)}.ux-panel-header__status-indicator-wrapper-toggle:focus{box-shadow:var(--eui-base-shadow-2)}.ux-panel-header__status-indicator-content{border-bottom:1px solid var(--eui-base-color-grey-15);padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m)}.ux-panel-header__sub-header{border-bottom:1px solid var(--eui-base-color-grey-15);padding:var(--eui-base-spacing-m)}.ux-panel-header ux-a-label{-ms-flex:1 1 0%}.ux-panel-item--flat{background-color:var(--eui-base-color-white)}.ux-panel-item--flat .ux-panel-header{background-color:var(--eui-base-color-white);margin:0}.ux-panel-item--flat .ux-panel-header--large{margin-bottom:var(--eui-base-spacing-s)}.ux-panel-item--flat .ux-panel-header--large .ux-a-label{padding:var(--eui-base-spacing-m) 0 var(--eui-base-spacing-s) 0}.ux-panel-item--flat .ux-panel-header--large .ux-a-label__label{font-size:var(--eui-base-font-size-2xl)}.ux-panel-item--flat .ux-panel-item:not(.ux-panel-item--flat):not(.ux-panel-item--selected) .ux-panel-header{background-color:var(--eui-base-color-grey-10)}.ux-panel-item--transparent{background-color:transparent;border:0;box-shadow:none}.ux-panel-item--transparent .ux-panel-header{background-color:transparent;margin:0;padding-top:var(--eui-base-spacing-s)}.ux-panel-item--transparent .ux-panel-header--large{margin-bottom:var(--eui-base-spacing-s)}.ux-panel-item--transparent .ux-panel-header--large .ux-a-label{padding:var(--eui-base-spacing-m) 0 var(--eui-base-spacing-s) 0}.ux-panel-item--transparent .ux-panel-header--large .ux-a-label__label{font-size:var(--eui-base-font-size-2xl)}.ux-panel-item--transparent .ux-panel-content{background-color:transparent}.ux-panel-item--selected{border:1px solid var(--eui-base-color-primary-100)}.ux-panel-item--selected .ux-panel-header{background-color:var(--eui-base-color-primary-75);color:var(--eui-base-color-white)}.ux-panel-item--selected .ux-panel-header .ux-a-label__label,.ux-panel-item--selected .ux-panel-header a{color:var(--eui-base-color-white)}.ux-panel-header--expandable{cursor:pointer}.ux-panel-header--accordion-expanded{background-color:var(--eui-base-color-primary-100)!important}.ux-panel-header--accordion-expanded .ux-a-label__label{color:var(--eui-base-color-white)!important}.ux-panel-header--has-light-label .ux-a-label__label{font-weight:400}.ux-panel-header--accordion-expanded .ux-panel-header__expand-toggle{color:var(--eui-base-color-white)!important}.ux-panel-content{background-color:var(--eui-base-color-white);padding:var(--eui-base-spacing-m);position:relative;transition:var(--eui-base-animation-transition-base)}.ux-panel-content--no-padding{padding:0}.ux-panel-content--blocked{z-index:0}.ux-panel-content__blocked-overlay{background-color:var(--eui-base-color-grey-20);height:100%;opacity:.5;position:absolute;right:0;top:0;width:100%;z-index:1}.ux-panel-content__blocked-overlay:after{animation:spin 1s linear infinite;border:10px solid transparent;border-radius:50%;border-top-color:var(--eui-base-color-primary-75);content:\"\";display:block;height:100px;left:50%;margin:-50px 0 0 -50px;position:absolute;top:50%;width:100px}.ux-panel-content--fixed-height{overflow:hidden}.ux-panel-content--fixed-height-scrollable{overflow-y:auto}.ux-panel-content--edit-mode-active{background-color:var(--eui-base-color-info-5)}uxpanelfooter{justify-content:flex-end;align-items:center;display:flex;width:100%}uxpanelfooter ux-button:not(:first-child){margin-left:var(--eui-base-spacing-xs)}.ux-panel-footer{background-color:var(--eui-base-color-grey-5);border-top:1px solid var(--eui-base-color-grey-15);padding:var(--eui-base-spacing-s);align-items:center;display:flex;width:100%}.ux-panel-footer--large{margin-top:4rem;padding:var(--eui-base-spacing-l)}.ux-panel-toolbar{margin-bottom:var(--eui-base-spacing-s)}.ux-panel-toolbar .ux-a-toolbar-filter{padding-left:0;padding-right:0}.ux-panel-toolbar .ux-a-toolbar-filter uxtoolbarfilterbuttons{margin-left:var(--eui-base-spacing-xs)}@media screen and (max-width: 767px){.eui-page-column .ux-panel{margin-right:0}uxpanelheaderrightcontent{align-items:center;display:flex;flex-wrap:wrap;justify-content:flex-end}uxpanelheaderrightcontent button:not(:last-child){margin-bottom:var(--eui-base-spacing-xs)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.UxTagComponent, selector: "ux-a-tag", inputs: ["styleClass", "typeClass", "label", "subLabel", "isRounded", "isSmall", "tabindex", "e2eAttr"] }, { kind: "component", type: i3.UxLabelComponent, selector: "ux-a-label", inputs: ["styleClass", "labelStyleClass", "label", "subLabel", "iconClass", "iconTypeClass", "isIconRounded", "isIconSmall", "isIconTiny", "isIconLarge", "hasMarker", "markerTypeClass", "isClickable", "badgeLabel", "badgeTypeClass", "infos", "themeClass", "isDisabled", "isBoldLabel", "isSmall", "isLarge", "subLabelSizeLimit", "isRenderHTML", "tabindex", "ariaRole", "ariaExpanded", "ariaControls", "e2eAttr"], outputs: ["labelClicked"] }], encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ UxPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0-next.4", type: UxPanelComponent, selector: "ux-panel", inputs: { id: "id", contentId: "contentId", styleClass: "styleClass", contentStyleClass: "contentStyleClass", headerStyleClass: "headerStyleClass", label: "label", subLabel: "subLabel", labelStyleClass: "labelStyleClass", labelInfos: "labelInfos", filterInput: "filterInput", iconClass: "iconClass", iconTypeClass: "iconTypeClass", isIconRounded: "isIconRounded", isExpandable: "isExpandable", isExpanded: "isExpanded", isVisible: "isVisible", isSelected: "isSelected", isCollapsible: "isCollapsible", isCollapsed: "isCollapsed", tagLabel: "tagLabel", tagTypeClass: "tagTypeClass", tagCount: "tagCount", badgeLabel: "badgeLabel", badgeTypeClass: "badgeTypeClass", hasTabs: "hasTabs", hasNoHeader: "hasNoHeader", hasNoContentPadding: "hasNoContentPadding", isBlocked: "isBlocked", isBlockedAriaLabel: "isBlockedAriaLabel", maxHeight: "maxHeight", contentHeight: "contentHeight", isFlat: "isFlat", isTransparent: "isTransparent", isLargeHeader: "isLargeHeader", isLargeFooter: "isLargeFooter", isSmallHeader: "isSmallHeader", hasStatusIndicator: "hasStatusIndicator", statusIndicatorTypeClass: "statusIndicatorTypeClass", statusIndicatorMessageLabel: "statusIndicatorMessageLabel", isTogglableStatusIndicatorContent: "isTogglableStatusIndicatorContent", isStatusIndicatorContentExpanded: "isStatusIndicatorContentExpanded", hasStatusIndicatorHeaderBg: "hasStatusIndicatorHeaderBg", hasStatusIndicatorHeaderIcon: "hasStatusIndicatorHeaderIcon", isEditModeActive: "isEditModeActive", isContainerOnly: "isContainerOnly", isClickable: "isClickable", isHighlighted: "isHighlighted", isAccordionPanel: "isAccordionPanel", customState: "customState", subLabelSizeLimit: "subLabelSizeLimit", tabindex: "tabindex", isSticky: "isSticky", e2eAttr: "e2eAttr" }, outputs: { panelExpanded: "panelExpanded", panelCollapsed: "panelCollapsed" }, queries: [{ propertyName: "customStatusIndicatorContent", first: true, predicate: i0.forwardRef(function () { return UxPanelHeaderStatusIndicatorContentTagDirective; }), descendants: true }, { propertyName: "customSubHeaderContent", first: true, predicate: i0.forwardRef(function () { return UxPanelSubHeaderContentTagDirective; }), descendants: true }, { propertyName: "customPanelHeader", predicate: i0.forwardRef(function () { return UxPanelHeaderTagDirective; }) }, { propertyName: "customPanelFooter", predicate: i0.forwardRef(function () { return UxPanelFooterTagDirective; }) }, { propertyName: "customPanelHeaderRightContent", predicate: i0.forwardRef(function () { return UxPanelHeaderRightContentTagDirective; }) }, { propertyName: "customPanelHeaderWithDescendants", predicate: i0.forwardRef(function () { return UxPanelHeaderWithDescendantsTagDirective; }), descendants: true }, { propertyName: "customPanelFooterWithDescendants", predicate: i0.forwardRef(function () { return UxPanelFooterWithDescendantsTagDirective; }), descendants: true }, { propertyName: "customPanelHeaderRightContentWithDescendants", predicate: i0.forwardRef(function () { return UxPanelHeaderRightContentWithDescendantsTagDirective; }), descendants: true }], ngImport: i0, template: "<div #stickyContainer></div>\n<div class=\"ux-panel\" [class.ux-panel--is-collapsible]=\"isCollapsible\" attr.data-e2e=\"{{ e2eAttr }}\">\n    <ng-template [ngIf]=\"isCollapsible\">\n        <div class=\"ux-panel__collapsible-button\" [class.ux-panel__collapsible-button--collapsed]=\"isCollapsed\"\n             (click)=\"onCollapsibleButtonClick($event)\">\n            <i class=\"ux-icon\" [ngClass]=\"isCollapsed ? 'ux-icon-caret-right' : 'ux-icon-caret-left'\"></i>\n        </div>\n    </ng-template>\n\n    <div *ngIf=\"isVisible && !showOnlyInvalid && !isCollapsed\"\n         class=\"ux-panel-item {{styleClass}} {{statePanelItemClasses}} {{statePanelItemClassesDynamic}}\" #stickyContent>\n        <span *ngIf=\"hasStatusIndicator && hasStatusIndicatorHeaderIcon\"\n              class=\"ux-panel-item__status-indicator-icon-wrapper ux-u-bg-color-{{statusIndicatorTypeClass}}-dark\">\n            <span\n                class=\"ux-panel-item__status-indicator-icon-wrapper-icon ux-icon ux-icon-{{statusIndicatorIconClass}}\"></span>\n        </span>\n\n        <ng-template [ngIf]=\"customPanelHeader.length !== 0\">\n            <div class=\"ux-panel-header {{headerStyleClass}} {{statePanelHeaderClasses}}\"\n                 [ngClass]=\"hasStatusIndicator && !hasStatusIndicatorHeaderBg && !hasStatusIndicatorHeaderIcon ? 'ux-u-border-l-'+statusIndicatorTypeClass : ''\"\n                 [class.ux-panel-header--accordion-expanded]=\"isExpanded && isAccordionPanel\"\n                 [class.ux-panel-header--expandable]=\"isExpandable\" (click)=\"toggle($event)\"\n                 [attr.role]=\"isExpandable ? 'button' : 'presentation'\" [tabindex]=\"tabindex\"\n                 attr.aria-label=\"{{label}} {{subLabel}} {{badgeLabel}} {{labelInfos}}\" [attr.aria-controls]=\"contentId\"\n                 [attr.aria-expanded]=\"isExpandable && isExpanded\" (keydown)=\"onKeyDown($event)\">\n                <ng-content select=\"uxPanelHeader\"></ng-content>\n                <span *ngIf=\"isExpandable\" class=\"ux-panel-header__expand-toggle ux-icon\"\n                      [ngClass]=\"{'ux-icon-angle-right': !isExpanded, 'ux-icon-angle-down': isExpanded}\"></span>\n            </div>\n        </ng-template>\n\n        <ng-template [ngIf]=\"customPanelHeaderWithDescendants.length !== 0\">\n            <div class=\"ux-panel-header {{headerStyleClass}} {{statePanelHeaderClasses}}\"\n                 [ngClass]=\"hasStatusIndicator && !hasStatusIndicatorHeaderBg && !hasStatusIndicatorHeaderIcon ? 'ux-u-border-l-'+statusIndicatorTypeClass : ''\"\n                 [class.ux-panel-header--accordion-expanded]=\"isExpanded && isAccordionPanel\"\n                 [class.ux-panel-header--expandable]=\"isExpandable\" (click)=\"toggle($event)\"\n                 [attr.role]=\"isExpandable ? 'button' : 'presentation'\" [tabindex]=\"tabindex\"\n                 attr.aria-label=\"{{label}} {{subLabel}} {{badgeLabel}} {{labelInfos}}\" [attr.aria-controls]=\"contentId\"\n                 [attr.aria-expanded]=\"isExpandable && isExpanded\" (keydown)=\"onKeyDown($event)\">\n                <ng-content select=\"uxPanelHeaderWithDescendants\"></ng-content>\n            </div>\n        </ng-template>\n\n        <ng-template [ngIf]=\"customPanelHeader.length === 0 && customPanelHeaderWithDescendants.length === 0\">\n            <div class=\"ux-panel-header {{headerStyleClass}} {{statePanelHeaderClasses}}\"\n                 [ngClass]=\"hasStatusIndicator && !hasStatusIndicatorHeaderBg && !hasStatusIndicatorHeaderIcon ? 'ux-u-border-l-'+statusIndicatorTypeClass : ''\"\n                 [class.ux-panel-header--accordion-expanded]=\"isExpanded && isAccordionPanel\"\n                 [class.ux-panel-header--expandable]=\"isExpandable\" (click)=\"toggle($event)\"\n                 [attr.role]=\"isExpandable ? 'button' : 'presentation'\" [tabindex]=\"tabindex\"\n                 attr.aria-label=\"{{label}} {{subLabel}} {{badgeLabel}} {{labelInfos}}\" [attr.aria-controls]=\"contentId\"\n                 [attr.aria-expanded]=\"isExpandable && isExpanded\" (keydown)=\"onKeyDown($event)\">\n                <ux-a-label label=\"{{label}}\" subLabel=\"{{subLabel}}\"\n                            badgeLabel=\"{{badgeLabel}}\" badgeTypeClass=\"{{badgeTypeClass}}\"\n                            labelStyleClass=\"{{labelStyleClass}}\"\n                            infos=\"{{labelInfos}}\"\n                            iconClass=\"{{iconClass}}\"\n                            iconTypeClass=\"{{iconTypeClass}}\"\n                            themeClass=\"{{labelThemeClass}}\"\n                            [isIconRounded]=\"isIconRounded\"\n                            [subLabelSizeLimit]=\"subLabelSizeLimit\"\n                            [isBoldLabel]=\"true\"\n                            tabindex=\"-1\">\n                </ux-a-label>\n                <div [id]=\"contentId\" class=\"ux-panel-header__right-content\">\n                    <ng-template [ngIf]=\"customPanelHeaderRightContent.length !== 0\">\n                        <ng-content select=\"uxPanelHeaderRightContent\"></ng-content>\n                    </ng-template>\n\n                    <ng-template [ngIf]=\"customPanelHeaderRightContentWithDescendants.length !== 0\">\n                        <ng-content select=\"uxPanelHeaderRightContentWithDescendants\"></ng-content>\n                    </ng-template>\n\n                    <ng-template\n                        [ngIf]=\"customPanelHeaderRightContent.length === 0 && customPanelHeaderRightContentWithDescendants.length === 0\">\n                        <ux-a-tag label=\"{{tagLabel}}\" subLabel=\"{{tagCount}}\" typeClass=\"{{tagTypeClass}}\"></ux-a-tag>\n                    </ng-template>\n\n                    <span *ngIf=\"isExpandable\" class=\"ux-panel-header__expand-toggle ux-icon\"\n                          [ngClass]=\"{'ux-icon-angle-right': !isExpanded, 'ux-icon-angle-down': isExpanded}\"></span>\n                </div>\n            </div>\n        </ng-template>\n\n        <ng-template [ngIf]=\"customSubHeaderContent\">\n            <div class=\"ux-panel-header__sub-header\">\n                <ng-content select=\"uxPanelSubHeaderContent\"></ng-content>\n            </div>\n        </ng-template>\n\n        <ng-template [ngIf]=\"hasStatusIndicator && customStatusIndicatorContent\">\n            <div class=\"ux-panel-header__status-indicator-wrapper\">\n                <span\n                    class=\"ux-panel-header__status-indicator-wrapper-label ux-u-color-{{statusIndicatorTypeClass}}-darkest\">\n                    {{statusIndicatorMessageLabel}}\n                </span>\n                <a *ngIf=\"isTogglableStatusIndicatorContent\"\n                   (click)=\"onToggleStatusIndicatorContent()\" class=\"ux-panel-header__status-indicator-wrapper-toggle\"\n                   tabindex=\"1\">\n                    <span class=\"ux-icon\" [class.ux-icon-angle-down]=\"isStatusIndicatorContentExpanded\"\n                          [class.ux-icon-angle-right]=\"!isStatusIndicatorContentExpanded\">\n                    </span>\n                </a>\n            </div>\n            <div *ngIf=\"isStatusIndicatorContentExpanded\" class=\"ux-panel-header__status-indicator-content\">\n                <ng-content select=\"uxPanelHeaderStatusIndicatorContent\"></ng-content>\n            </div>\n        </ng-template>\n\n        <div\n            class=\"ux-panel-content {{statePanelContentClasses}} {{contentStyleClass}} {{statePanelContentClassesDynamic}}\"\n            [class.ux-panel-content--fixed-height]=\"hasMaxHeight\"\n            [style.max-height]=\"actualMaxHeight\" [hidden]=\"!isExpanded\"\n            [style.height]=\"contentHeight\"\n            [class.ux-panel-content--fixed-height-scrollable]=\"hasContentHeight\"\n            aria-live=\"polite\">\n            <ng-content></ng-content>\n            <div *ngIf=\"isBlocked\" class=\"ux-panel-content__blocked-overlay\" role=\"status\" [attr.aria-busy]=\"isBlocked\"\n                 [attr.aria-label]=\"isBlockedAriaLabel\"></div>\n        </div>\n\n        <div *ngIf=\"customPanelFooter.length !== 0\" class=\"ux-panel-footer\"\n             [class.ux-panel-footer--large]=\"isLargeFooter\">\n            <ng-content select=\"uxPanelFooter\"></ng-content>\n        </div>\n\n        <div *ngIf=\"customPanelFooterWithDescendants.length !== 0\" class=\"ux-panel-footer\"\n             [class.ux-panel-footer--large]=\"isLargeFooter\">\n            <ng-content select=\"uxPanelFooterWithDescendants\"></ng-content>\n        </div>\n\n        <div *ngIf=\"hasMaxHeight\" class=\"ux-panel-footer justify-content-center\">\n            <button type=\"button\" class=\"ux-button ux-button--small ux-button--secondary\" (click)=\"toggleMaxHeight($event)\">\n                <span *ngIf=\"actualMaxHeight === 'none'\">show less...</span>\n                <span *ngIf=\"actualMaxHeight !== 'none'\">show more...</span>\n            </button>\n        </div>\n\n    </div>\n</div>\n", styles: [".ux-panels{margin:0;padding:0}.ux-panel{margin-bottom:var(--eui-base-spacing-m)}.ux-panel--is-collapsible{display:flex;padding-right:var(--eui-base-spacing-xl);position:relative}.ux-panel__collapsible-button{align-items:center;background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-grey-15);cursor:pointer;display:flex;font-size:var(--eui-base-font-size-xl);justify-content:center;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);position:absolute;right:0;text-align:center;top:0;width:var(--eui-base-spacing-xl)}.ux-panel__collapsible-button--collapsed{position:relative}.ux-panel-item{background-color:var(--eui-base-color-white);border:var(--eui-base-border);border-radius:var(--eui-border-radius-base);position:relative;width:100%;box-shadow:var(--eui-base-shadow-1)}.ux-panel-item--has-tabs>.ux-panel-header{display:none}.ux-panel-item--has-tabs>.ux-panel-content{padding:0}.ux-panel-item--has-tabs>.ux-panel-content .eui-tab-content{padding:var(--eui-base-spacing-s)}.ux-panel-item--has-tabs>.ux-panel-content--no-padding .ux-tab-content{padding:0}.ux-panel-item--no-header>.ux-panel-header{display:none}.ux-panel-item--danger .ux-panel-header{background-color:var(--eui-base-color-danger-120)}.ux-panel-item--danger .ux-panel-header__status-indicator-wrapper-label{color:var(--eui-base-color-danger-130)}.ux-panel-item--info .ux-panel-header{background-color:var(--eui-base-color-info-120)}.ux-panel-item--info .ux-panel-header__status-indicator-wrapper-label{color:var(--eui-base-color-info-130)}.ux-panel-item--success .ux-panel-header{background-color:var(--eui-base-color-success-120)}.ux-panel-item--success .ux-panel-header__status-indicator-wrapper-label{color:var(--eui-base-color-success-130)}.ux-panel-item--warning .ux-panel-header{background-color:var(--eui-base-color-warning-120)}.ux-panel-item--warning .ux-panel-header:focus{outline-color:#117de2}.ux-panel-item--warning .ux-panel-header__status-indicator-wrapper-label{color:var(--eui-base-color-warning-130)}.ux-panel-item--clickable{cursor:pointer}.ux-panel-item--clickable:focus,.ux-panel-item--clickable:hover{outline:0;box-shadow:var(--eui-base-shadow-2)}.ux-panel-item--highlighted{z-index:var(--eui-base-z-index-highlighted)}.ux-panel-item__status-indicator-icon-wrapper{align-items:center;background-color:var(--eui-base-color-warning-110);border-radius:100%;color:var(--eui-base-color-white);display:flex;font-size:var(--eui-base-font-size);height:20px;justify-content:center;left:-6px;position:absolute;text-align:center;top:-6px;width:20px;z-index:3}uxpanelheader{align-items:center;display:flex;flex:1 1 0%;width:100%}uxpanelheaderrightcontent{align-items:center;display:flex}.ux-panel-header{align-items:center;background-color:var(--eui-base-color-grey-10);border-bottom:var(--eui-base-border-lighter);border-top-left-radius:var(--eui-base-border-radius);border-top-right-radius:var(--eui-base-border-radius);display:flex;padding:var(--eui-base-spacing-m);width:100%}.ux-panel-header--small{padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m)}.ux-panel-header__right-content{align-items:center;display:flex;margin-left:auto}.ux-panel-header__expand-toggle{cursor:pointer;font-size:var(--eui-base-font-size-xl);padding-left:var(--eui-base-spacing-m);padding-right:var(--eui-base-spacing-s)}.ux-panel-header__status-indicator-wrapper{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-15);display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.ux-panel-header__status-indicator-wrapper-toggle{margin-left:var(--eui-base-spacing-s);padding:var(--eui-base-spacing-xs)}.ux-panel-header__status-indicator-wrapper-toggle:focus{box-shadow:var(--eui-base-shadow-2)}.ux-panel-header__status-indicator-content{border-bottom:1px solid var(--eui-base-color-grey-15);padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m)}.ux-panel-header__sub-header{border-bottom:1px solid var(--eui-base-color-grey-15);padding:var(--eui-base-spacing-m)}.ux-panel-header ux-a-label{-ms-flex:1 1 0%}.ux-panel-item--flat{background-color:var(--eui-base-color-white)}.ux-panel-item--flat .ux-panel-header{background-color:var(--eui-base-color-white);margin:0}.ux-panel-item--flat .ux-panel-header--large{margin-bottom:var(--eui-base-spacing-s)}.ux-panel-item--flat .ux-panel-header--large .ux-a-label{padding:var(--eui-base-spacing-m) 0 var(--eui-base-spacing-s) 0}.ux-panel-item--flat .ux-panel-header--large .ux-a-label__label{font-size:var(--eui-base-font-size-2xl)}.ux-panel-item--flat .ux-panel-item:not(.ux-panel-item--flat):not(.ux-panel-item--selected) .ux-panel-header{background-color:var(--eui-base-color-grey-10)}.ux-panel-item--transparent{background-color:transparent;border:0;box-shadow:none}.ux-panel-item--transparent .ux-panel-header{background-color:transparent;margin:0;padding-top:var(--eui-base-spacing-s)}.ux-panel-item--transparent .ux-panel-header--large{margin-bottom:var(--eui-base-spacing-s)}.ux-panel-item--transparent .ux-panel-header--large .ux-a-label{padding:var(--eui-base-spacing-m) 0 var(--eui-base-spacing-s) 0}.ux-panel-item--transparent .ux-panel-header--large .ux-a-label__label{font-size:var(--eui-base-font-size-2xl)}.ux-panel-item--transparent .ux-panel-content{background-color:transparent}.ux-panel-item--selected{border:1px solid var(--eui-base-color-primary-100)}.ux-panel-item--selected .ux-panel-header{background-color:var(--eui-base-color-primary-75);color:var(--eui-base-color-white)}.ux-panel-item--selected .ux-panel-header .ux-a-label__label,.ux-panel-item--selected .ux-panel-header a{color:var(--eui-base-color-white)}.ux-panel-header--expandable{cursor:pointer}.ux-panel-header--accordion-expanded{background-color:var(--eui-base-color-primary-100)!important}.ux-panel-header--accordion-expanded .ux-a-label__label{color:var(--eui-base-color-white)!important}.ux-panel-header--has-light-label .ux-a-label__label{font-weight:400}.ux-panel-header--accordion-expanded .ux-panel-header__expand-toggle{color:var(--eui-base-color-white)!important}.ux-panel-content{background-color:var(--eui-base-color-white);padding:var(--eui-base-spacing-m);position:relative;transition:var(--eui-base-animation-transition-base)}.ux-panel-content--no-padding{padding:0}.ux-panel-content--blocked{z-index:0}.ux-panel-content__blocked-overlay{background-color:var(--eui-base-color-grey-20);height:100%;opacity:.5;position:absolute;right:0;top:0;width:100%;z-index:1}.ux-panel-content__blocked-overlay:after{animation:spin 1s linear infinite;border:10px solid transparent;border-radius:50%;border-top-color:var(--eui-base-color-primary-75);content:\"\";display:block;height:100px;left:50%;margin:-50px 0 0 -50px;position:absolute;top:50%;width:100px}.ux-panel-content--fixed-height{overflow:hidden}.ux-panel-content--fixed-height-scrollable{overflow-y:auto}.ux-panel-content--edit-mode-active{background-color:var(--eui-base-color-info-5)}uxpanelfooter{justify-content:flex-end;align-items:center;display:flex;width:100%}uxpanelfooter ux-button:not(:first-child){margin-left:var(--eui-base-spacing-xs)}.ux-panel-footer{background-color:var(--eui-base-color-grey-5);border-top:1px solid var(--eui-base-color-grey-15);padding:var(--eui-base-spacing-s);align-items:center;display:flex;width:100%}.ux-panel-footer--large{margin-top:4rem;padding:var(--eui-base-spacing-l)}.ux-panel-toolbar{margin-bottom:var(--eui-base-spacing-s)}.ux-panel-toolbar .ux-a-toolbar-filter{padding-left:0;padding-right:0}.ux-panel-toolbar .ux-a-toolbar-filter uxtoolbarfilterbuttons{margin-left:var(--eui-base-spacing-xs)}@media screen and (max-width: 767px){.eui-page-column .ux-panel{margin-right:0}uxpanelheaderrightcontent{align-items:center;display:flex;flex-wrap:wrap;justify-content:flex-end}uxpanelheaderrightcontent button:not(:last-child){margin-bottom:var(--eui-base-spacing-xs)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.UxTagComponent, selector: "ux-a-tag", inputs: ["styleClass", "typeClass", "label", "subLabel", "isRounded", "isSmall", "tabindex", "e2eAttr"] }, { kind: "component", type: i3.UxLabelComponent, selector: "ux-a-label", inputs: ["styleClass", "labelStyleClass", "label", "subLabel", "iconClass", "iconTypeClass", "isIconRounded", "isIconSmall", "isIconTiny", "isIconLarge", "hasMarker", "markerTypeClass", "isClickable", "badgeLabel", "badgeTypeClass", "infos", "themeClass", "isDisabled", "isBoldLabel", "isSmall", "isLarge", "subLabelSizeLimit", "isRenderHTML", "tabindex", "ariaRole", "ariaExpanded", "ariaControls", "e2eAttr"], outputs: ["labelClicked"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0-next.4", ngImport: i0, type: UxPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ux-panel', encapsulation: ViewEncapsulation.None, template: "<div #stickyContainer></div>\n<div class=\"ux-panel\" [class.ux-panel--is-collapsible]=\"isCollapsible\" attr.data-e2e=\"{{ e2eAttr }}\">\n    <ng-template [ngIf]=\"isCollapsible\">\n        <div class=\"ux-panel__collapsible-button\" [class.ux-panel__collapsible-button--collapsed]=\"isCollapsed\"\n             (click)=\"onCollapsibleButtonClick($event)\">\n            <i class=\"ux-icon\" [ngClass]=\"isCollapsed ? 'ux-icon-caret-right' : 'ux-icon-caret-left'\"></i>\n        </div>\n    </ng-template>\n\n    <div *ngIf=\"isVisible && !showOnlyInvalid && !isCollapsed\"\n         class=\"ux-panel-item {{styleClass}} {{statePanelItemClasses}} {{statePanelItemClassesDynamic}}\" #stickyContent>\n        <span *ngIf=\"hasStatusIndicator && hasStatusIndicatorHeaderIcon\"\n              class=\"ux-panel-item__status-indicator-icon-wrapper ux-u-bg-color-{{statusIndicatorTypeClass}}-dark\">\n            <span\n                class=\"ux-panel-item__status-indicator-icon-wrapper-icon ux-icon ux-icon-{{statusIndicatorIconClass}}\"></span>\n        </span>\n\n        <ng-template [ngIf]=\"customPanelHeader.length !== 0\">\n            <div class=\"ux-panel-header {{headerStyleClass}} {{statePanelHeaderClasses}}\"\n                 [ngClass]=\"hasStatusIndicator && !hasStatusIndicatorHeaderBg && !hasStatusIndicatorHeaderIcon ? 'ux-u-border-l-'+statusIndicatorTypeClass : ''\"\n                 [class.ux-panel-header--accordion-expanded]=\"isExpanded && isAccordionPanel\"\n                 [class.ux-panel-header--expandable]=\"isExpandable\" (click)=\"toggle($event)\"\n                 [attr.role]=\"isExpandable ? 'button' : 'presentation'\" [tabindex]=\"tabindex\"\n                 attr.aria-label=\"{{label}} {{subLabel}} {{badgeLabel}} {{labelInfos}}\" [attr.aria-controls]=\"contentId\"\n                 [attr.aria-expanded]=\"isExpandable && isExpanded\" (keydown)=\"onKeyDown($event)\">\n                <ng-content select=\"uxPanelHeader\"></ng-content>\n                <span *ngIf=\"isExpandable\" class=\"ux-panel-header__expand-toggle ux-icon\"\n                      [ngClass]=\"{'ux-icon-angle-right': !isExpanded, 'ux-icon-angle-down': isExpanded}\"></span>\n            </div>\n        </ng-template>\n\n        <ng-template [ngIf]=\"customPanelHeaderWithDescendants.length !== 0\">\n            <div class=\"ux-panel-header {{headerStyleClass}} {{statePanelHeaderClasses}}\"\n                 [ngClass]=\"hasStatusIndicator && !hasStatusIndicatorHeaderBg && !hasStatusIndicatorHeaderIcon ? 'ux-u-border-l-'+statusIndicatorTypeClass : ''\"\n                 [class.ux-panel-header--accordion-expanded]=\"isExpanded && isAccordionPanel\"\n                 [class.ux-panel-header--expandable]=\"isExpandable\" (click)=\"toggle($event)\"\n                 [attr.role]=\"isExpandable ? 'button' : 'presentation'\" [tabindex]=\"tabindex\"\n                 attr.aria-label=\"{{label}} {{subLabel}} {{badgeLabel}} {{labelInfos}}\" [attr.aria-controls]=\"contentId\"\n                 [attr.aria-expanded]=\"isExpandable && isExpanded\" (keydown)=\"onKeyDown($event)\">\n                <ng-content select=\"uxPanelHeaderWithDescendants\"></ng-content>\n            </div>\n        </ng-template>\n\n        <ng-template [ngIf]=\"customPanelHeader.length === 0 && customPanelHeaderWithDescendants.length === 0\">\n            <div class=\"ux-panel-header {{headerStyleClass}} {{statePanelHeaderClasses}}\"\n                 [ngClass]=\"hasStatusIndicator && !hasStatusIndicatorHeaderBg && !hasStatusIndicatorHeaderIcon ? 'ux-u-border-l-'+statusIndicatorTypeClass : ''\"\n                 [class.ux-panel-header--accordion-expanded]=\"isExpanded && isAccordionPanel\"\n                 [class.ux-panel-header--expandable]=\"isExpandable\" (click)=\"toggle($event)\"\n                 [attr.role]=\"isExpandable ? 'button' : 'presentation'\" [tabindex]=\"tabindex\"\n                 attr.aria-label=\"{{label}} {{subLabel}} {{badgeLabel}} {{labelInfos}}\" [attr.aria-controls]=\"contentId\"\n                 [attr.aria-expanded]=\"isExpandable && isExpanded\" (keydown)=\"onKeyDown($event)\">\n                <ux-a-label label=\"{{label}}\" subLabel=\"{{subLabel}}\"\n                            badgeLabel=\"{{badgeLabel}}\" badgeTypeClass=\"{{badgeTypeClass}}\"\n                            labelStyleClass=\"{{labelStyleClass}}\"\n                            infos=\"{{labelInfos}}\"\n                            iconClass=\"{{iconClass}}\"\n                            iconTypeClass=\"{{iconTypeClass}}\"\n                            themeClass=\"{{labelThemeClass}}\"\n                            [isIconRounded]=\"isIconRounded\"\n                            [subLabelSizeLimit]=\"subLabelSizeLimit\"\n                            [isBoldLabel]=\"true\"\n                            tabindex=\"-1\">\n                </ux-a-label>\n                <div [id]=\"contentId\" class=\"ux-panel-header__right-content\">\n                    <ng-template [ngIf]=\"customPanelHeaderRightContent.length !== 0\">\n                        <ng-content select=\"uxPanelHeaderRightContent\"></ng-content>\n                    </ng-template>\n\n                    <ng-template [ngIf]=\"customPanelHeaderRightContentWithDescendants.length !== 0\">\n                        <ng-content select=\"uxPanelHeaderRightContentWithDescendants\"></ng-content>\n                    </ng-template>\n\n                    <ng-template\n                        [ngIf]=\"customPanelHeaderRightContent.length === 0 && customPanelHeaderRightContentWithDescendants.length === 0\">\n                        <ux-a-tag label=\"{{tagLabel}}\" subLabel=\"{{tagCount}}\" typeClass=\"{{tagTypeClass}}\"></ux-a-tag>\n                    </ng-template>\n\n                    <span *ngIf=\"isExpandable\" class=\"ux-panel-header__expand-toggle ux-icon\"\n                          [ngClass]=\"{'ux-icon-angle-right': !isExpanded, 'ux-icon-angle-down': isExpanded}\"></span>\n                </div>\n            </div>\n        </ng-template>\n\n        <ng-template [ngIf]=\"customSubHeaderContent\">\n            <div class=\"ux-panel-header__sub-header\">\n                <ng-content select=\"uxPanelSubHeaderContent\"></ng-content>\n            </div>\n        </ng-template>\n\n        <ng-template [ngIf]=\"hasStatusIndicator && customStatusIndicatorContent\">\n            <div class=\"ux-panel-header__status-indicator-wrapper\">\n                <span\n                    class=\"ux-panel-header__status-indicator-wrapper-label ux-u-color-{{statusIndicatorTypeClass}}-darkest\">\n                    {{statusIndicatorMessageLabel}}\n                </span>\n                <a *ngIf=\"isTogglableStatusIndicatorContent\"\n                   (click)=\"onToggleStatusIndicatorContent()\" class=\"ux-panel-header__status-indicator-wrapper-toggle\"\n                   tabindex=\"1\">\n                    <span class=\"ux-icon\" [class.ux-icon-angle-down]=\"isStatusIndicatorContentExpanded\"\n                          [class.ux-icon-angle-right]=\"!isStatusIndicatorContentExpanded\">\n                    </span>\n                </a>\n            </div>\n            <div *ngIf=\"isStatusIndicatorContentExpanded\" class=\"ux-panel-header__status-indicator-content\">\n                <ng-content select=\"uxPanelHeaderStatusIndicatorContent\"></ng-content>\n            </div>\n        </ng-template>\n\n        <div\n            class=\"ux-panel-content {{statePanelContentClasses}} {{contentStyleClass}} {{statePanelContentClassesDynamic}}\"\n            [class.ux-panel-content--fixed-height]=\"hasMaxHeight\"\n            [style.max-height]=\"actualMaxHeight\" [hidden]=\"!isExpanded\"\n            [style.height]=\"contentHeight\"\n            [class.ux-panel-content--fixed-height-scrollable]=\"hasContentHeight\"\n            aria-live=\"polite\">\n            <ng-content></ng-content>\n            <div *ngIf=\"isBlocked\" class=\"ux-panel-content__blocked-overlay\" role=\"status\" [attr.aria-busy]=\"isBlocked\"\n                 [attr.aria-label]=\"isBlockedAriaLabel\"></div>\n        </div>\n\n        <div *ngIf=\"customPanelFooter.length !== 0\" class=\"ux-panel-footer\"\n             [class.ux-panel-footer--large]=\"isLargeFooter\">\n            <ng-content select=\"uxPanelFooter\"></ng-content>\n        </div>\n\n        <div *ngIf=\"customPanelFooterWithDescendants.length !== 0\" class=\"ux-panel-footer\"\n             [class.ux-panel-footer--large]=\"isLargeFooter\">\n            <ng-content select=\"uxPanelFooterWithDescendants\"></ng-content>\n        </div>\n\n        <div *ngIf=\"hasMaxHeight\" class=\"ux-panel-footer justify-content-center\">\n            <button type=\"button\" class=\"ux-button ux-button--small ux-button--secondary\" (click)=\"toggleMaxHeight($event)\">\n                <span *ngIf=\"actualMaxHeight === 'none'\">show less...</span>\n                <span *ngIf=\"actualMaxHeight !== 'none'\">show more...</span>\n            </button>\n        </div>\n\n    </div>\n</div>\n", styles: [".ux-panel{margin-bottom:var(--eui-base-spacing-m)}.ux-panel--is-collapsible{display:flex;padding-right:var(--eui-base-spacing-xl);position:relative}.ux-panel__collapsible-button{align-items:center;background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-grey-15);cursor:pointer;display:flex;font-size:var(--eui-base-font-size-xl);justify-content:center;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);position:absolute;right:0;text-align:center;top:0;width:var(--eui-base-spacing-xl)}.ux-panel__collapsible-button--collapsed{position:relative}.ux-panel-item{background-color:var(--eui-base-color-white);border:var(--eui-base-border);border-radius:var(--eui-border-radius-base);position:relative;width:100%;box-shadow:var(--eui-base-shadow-1)}.ux-panel-item--has-tabs>.ux-panel-header{display:none}.ux-panel-item--has-tabs>.ux-panel-content{padding:0}.ux-panel-item--has-tabs>.ux-panel-content .eui-tab-content{padding:var(--eui-base-spacing-s)}.ux-panel-item--has-tabs>.ux-panel-content--no-padding .ux-tab-content{padding:0}.ux-panel-item--no-header>.ux-panel-header{display:none}.ux-panel-item--danger .ux-panel-header{background-color:var(--eui-base-color-danger-120)}.ux-panel-item--danger .ux-panel-header__status-indicator-wrapper-label{color:var(--eui-base-color-danger-130)}.ux-panel-item--info .ux-panel-header{background-color:var(--eui-base-color-info-120)}.ux-panel-item--info .ux-panel-header__status-indicator-wrapper-label{color:var(--eui-base-color-info-130)}.ux-panel-item--success .ux-panel-header{background-color:var(--eui-base-color-success-120)}.ux-panel-item--success .ux-panel-header__status-indicator-wrapper-label{color:var(--eui-base-color-success-130)}.ux-panel-item--warning .ux-panel-header{background-color:var(--eui-base-color-warning-120)}.ux-panel-item--warning .ux-panel-header:focus{outline-color:#117de2}.ux-panel-item--warning .ux-panel-header__status-indicator-wrapper-label{color:var(--eui-base-color-warning-130)}.ux-panel-item--clickable{cursor:pointer}.ux-panel-item--clickable:focus,.ux-panel-item--clickable:hover{outline:0;box-shadow:var(--eui-base-shadow-2)}.ux-panel-item--highlighted{z-index:var(--eui-base-z-index-highlighted)}.ux-panel-item__status-indicator-icon-wrapper{align-items:center;background-color:var(--eui-base-color-warning-110);border-radius:100%;color:var(--eui-base-color-white);display:flex;font-size:var(--eui-base-font-size);height:20px;justify-content:center;left:-6px;position:absolute;text-align:center;top:-6px;width:20px;z-index:3}uxpanelheader{align-items:center;display:flex;flex:1 1 0%;width:100%}uxpanelheaderrightcontent{align-items:center;display:flex}.ux-panel-header{align-items:center;background-color:var(--eui-base-color-grey-10);border-bottom:var(--eui-base-border-lighter);border-top-left-radius:var(--eui-base-border-radius);border-top-right-radius:var(--eui-base-border-radius);display:flex;padding:var(--eui-base-spacing-m);width:100%}.ux-panel-header--small{padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m)}.ux-panel-header__right-content{align-items:center;display:flex;margin-left:auto}.ux-panel-header__expand-toggle{cursor:pointer;font-size:var(--eui-base-font-size-xl);padding-left:var(--eui-base-spacing-m);padding-right:var(--eui-base-spacing-s)}.ux-panel-header__status-indicator-wrapper{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-15);display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.ux-panel-header__status-indicator-wrapper-toggle{margin-left:var(--eui-base-spacing-s);padding:var(--eui-base-spacing-xs)}.ux-panel-header__status-indicator-wrapper-toggle:focus{box-shadow:var(--eui-base-shadow-2)}.ux-panel-header__status-indicator-content{border-bottom:1px solid var(--eui-base-color-grey-15);padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m)}.ux-panel-header__sub-header{border-bottom:1px solid var(--eui-base-color-grey-15);padding:var(--eui-base-spacing-m)}.ux-panel-header ux-a-label{-ms-flex:1 1 0%}.ux-panel-item--flat{background-color:var(--eui-base-color-white)}.ux-panel-item--flat .ux-panel-header{background-color:var(--eui-base-color-white);margin:0}.ux-panel-item--flat .ux-panel-header--large{margin-bottom:var(--eui-base-spacing-s)}.ux-panel-item--flat .ux-panel-header--large .ux-a-label{padding:var(--eui-base-spacing-m) 0 var(--eui-base-spacing-s) 0}.ux-panel-item--flat .ux-panel-header--large .ux-a-label__label{font-size:var(--eui-base-font-size-2xl)}.ux-panel-item--flat .ux-panel-item:not(.ux-panel-item--flat):not(.ux-panel-item--selected) .ux-panel-header{background-color:var(--eui-base-color-grey-10)}.ux-panel-item--transparent{background-color:transparent;border:0;box-shadow:none}.ux-panel-item--transparent .ux-panel-header{background-color:transparent;margin:0;padding-top:var(--eui-base-spacing-s)}.ux-panel-item--transparent .ux-panel-header--large{margin-bottom:var(--eui-base-spacing-s)}.ux-panel-item--transparent .ux-panel-header--large .ux-a-label{padding:var(--eui-base-spacing-m) 0 var(--eui-base-spacing-s) 0}.ux-panel-item--transparent .ux-panel-header--large .ux-a-label__label{font-size:var(--eui-base-font-size-2xl)}.ux-panel-item--transparent .ux-panel-content{background-color:transparent}.ux-panel-item--selected{border:1px solid var(--eui-base-color-primary-100)}.ux-panel-item--selected .ux-panel-header{background-color:var(--eui-base-color-primary-75);color:var(--eui-base-color-white)}.ux-panel-item--selected .ux-panel-header .ux-a-label__label,.ux-panel-item--selected .ux-panel-header a{color:var(--eui-base-color-white)}.ux-panel-header--expandable{cursor:pointer}.ux-panel-header--accordion-expanded{background-color:var(--eui-base-color-primary-100)!important}.ux-panel-header--accordion-expanded .ux-a-label__label{color:var(--eui-base-color-white)!important}.ux-panel-header--has-light-label .ux-a-label__label{font-weight:400}.ux-panel-header--accordion-expanded .ux-panel-header__expand-toggle{color:var(--eui-base-color-white)!important}.ux-panel-content{background-color:var(--eui-base-color-white);padding:var(--eui-base-spacing-m);position:relative;transition:var(--eui-base-animation-transition-base)}.ux-panel-content--no-padding{padding:0}.ux-panel-content--blocked{z-index:0}.ux-panel-content__blocked-overlay{background-color:var(--eui-base-color-grey-20);height:100%;opacity:.5;position:absolute;right:0;top:0;width:100%;z-index:1}.ux-panel-content__blocked-overlay:after{animation:spin 1s linear infinite;border:10px solid transparent;border-radius:50%;border-top-color:var(--eui-base-color-primary-75);content:\"\";display:block;height:100px;left:50%;margin:-50px 0 0 -50px;position:absolute;top:50%;width:100px}.ux-panel-content--fixed-height{overflow:hidden}.ux-panel-content--fixed-height-scrollable{overflow-y:auto}.ux-panel-content--edit-mode-active{background-color:var(--eui-base-color-info-5)}uxpanelfooter{justify-content:flex-end;align-items:center;display:flex;width:100%}uxpanelfooter ux-button:not(:first-child){margin-left:var(--eui-base-spacing-xs)}.ux-panel-footer{background-color:var(--eui-base-color-grey-5);border-top:1px solid var(--eui-base-color-grey-15);padding:var(--eui-base-spacing-s);align-items:center;display:flex;width:100%}.ux-panel-footer--large{margin-top:4rem;padding:var(--eui-base-spacing-l)}.ux-panel-toolbar{margin-bottom:var(--eui-base-spacing-s)}.ux-panel-toolbar .ux-a-toolbar-filter{padding-left:0;padding-right:0}.ux-panel-toolbar .ux-a-toolbar-filter uxtoolbarfilterbuttons{margin-left:var(--eui-base-spacing-xs)}@media screen and (max-width: 767px){.eui-page-column .ux-panel{margin-right:0}uxpanelheaderrightcontent{align-items:center;display:flex;flex-wrap:wrap;justify-content:flex-end}uxpanelheaderrightcontent button:not(:last-child){margin-bottom:var(--eui-base-spacing-xs)}}\n"] }]
+            args: [{ selector: 'ux-panel', encapsulation: ViewEncapsulation.None, template: "<div #stickyContainer></div>\n<div class=\"ux-panel\" [class.ux-panel--is-collapsible]=\"isCollapsible\" attr.data-e2e=\"{{ e2eAttr }}\">\n    <ng-template [ngIf]=\"isCollapsible\">\n        <div class=\"ux-panel__collapsible-button\" [class.ux-panel__collapsible-button--collapsed]=\"isCollapsed\"\n             (click)=\"onCollapsibleButtonClick($event)\">\n            <i class=\"ux-icon\" [ngClass]=\"isCollapsed ? 'ux-icon-caret-right' : 'ux-icon-caret-left'\"></i>\n        </div>\n    </ng-template>\n\n    <div *ngIf=\"isVisible && !showOnlyInvalid && !isCollapsed\"\n         class=\"ux-panel-item {{styleClass}} {{statePanelItemClasses}} {{statePanelItemClassesDynamic}}\" #stickyContent>\n        <span *ngIf=\"hasStatusIndicator && hasStatusIndicatorHeaderIcon\"\n              class=\"ux-panel-item__status-indicator-icon-wrapper ux-u-bg-color-{{statusIndicatorTypeClass}}-dark\">\n            <span\n                class=\"ux-panel-item__status-indicator-icon-wrapper-icon ux-icon ux-icon-{{statusIndicatorIconClass}}\"></span>\n        </span>\n\n        <ng-template [ngIf]=\"customPanelHeader.length !== 0\">\n            <div class=\"ux-panel-header {{headerStyleClass}} {{statePanelHeaderClasses}}\"\n                 [ngClass]=\"hasStatusIndicator && !hasStatusIndicatorHeaderBg && !hasStatusIndicatorHeaderIcon ? 'ux-u-border-l-'+statusIndicatorTypeClass : ''\"\n                 [class.ux-panel-header--accordion-expanded]=\"isExpanded && isAccordionPanel\"\n                 [class.ux-panel-header--expandable]=\"isExpandable\" (click)=\"toggle($event)\"\n                 [attr.role]=\"isExpandable ? 'button' : 'presentation'\" [tabindex]=\"tabindex\"\n                 attr.aria-label=\"{{label}} {{subLabel}} {{badgeLabel}} {{labelInfos}}\" [attr.aria-controls]=\"contentId\"\n                 [attr.aria-expanded]=\"isExpandable && isExpanded\" (keydown)=\"onKeyDown($event)\">\n                <ng-content select=\"uxPanelHeader\"></ng-content>\n                <span *ngIf=\"isExpandable\" class=\"ux-panel-header__expand-toggle ux-icon\"\n                      [ngClass]=\"{'ux-icon-angle-right': !isExpanded, 'ux-icon-angle-down': isExpanded}\"></span>\n            </div>\n        </ng-template>\n\n        <ng-template [ngIf]=\"customPanelHeaderWithDescendants.length !== 0\">\n            <div class=\"ux-panel-header {{headerStyleClass}} {{statePanelHeaderClasses}}\"\n                 [ngClass]=\"hasStatusIndicator && !hasStatusIndicatorHeaderBg && !hasStatusIndicatorHeaderIcon ? 'ux-u-border-l-'+statusIndicatorTypeClass : ''\"\n                 [class.ux-panel-header--accordion-expanded]=\"isExpanded && isAccordionPanel\"\n                 [class.ux-panel-header--expandable]=\"isExpandable\" (click)=\"toggle($event)\"\n                 [attr.role]=\"isExpandable ? 'button' : 'presentation'\" [tabindex]=\"tabindex\"\n                 attr.aria-label=\"{{label}} {{subLabel}} {{badgeLabel}} {{labelInfos}}\" [attr.aria-controls]=\"contentId\"\n                 [attr.aria-expanded]=\"isExpandable && isExpanded\" (keydown)=\"onKeyDown($event)\">\n                <ng-content select=\"uxPanelHeaderWithDescendants\"></ng-content>\n            </div>\n        </ng-template>\n\n        <ng-template [ngIf]=\"customPanelHeader.length === 0 && customPanelHeaderWithDescendants.length === 0\">\n            <div class=\"ux-panel-header {{headerStyleClass}} {{statePanelHeaderClasses}}\"\n                 [ngClass]=\"hasStatusIndicator && !hasStatusIndicatorHeaderBg && !hasStatusIndicatorHeaderIcon ? 'ux-u-border-l-'+statusIndicatorTypeClass : ''\"\n                 [class.ux-panel-header--accordion-expanded]=\"isExpanded && isAccordionPanel\"\n                 [class.ux-panel-header--expandable]=\"isExpandable\" (click)=\"toggle($event)\"\n                 [attr.role]=\"isExpandable ? 'button' : 'presentation'\" [tabindex]=\"tabindex\"\n                 attr.aria-label=\"{{label}} {{subLabel}} {{badgeLabel}} {{labelInfos}}\" [attr.aria-controls]=\"contentId\"\n                 [attr.aria-expanded]=\"isExpandable && isExpanded\" (keydown)=\"onKeyDown($event)\">\n                <ux-a-label label=\"{{label}}\" subLabel=\"{{subLabel}}\"\n                            badgeLabel=\"{{badgeLabel}}\" badgeTypeClass=\"{{badgeTypeClass}}\"\n                            labelStyleClass=\"{{labelStyleClass}}\"\n                            infos=\"{{labelInfos}}\"\n                            iconClass=\"{{iconClass}}\"\n                            iconTypeClass=\"{{iconTypeClass}}\"\n                            themeClass=\"{{labelThemeClass}}\"\n                            [isIconRounded]=\"isIconRounded\"\n                            [subLabelSizeLimit]=\"subLabelSizeLimit\"\n                            [isBoldLabel]=\"true\"\n                            tabindex=\"-1\">\n                </ux-a-label>\n                <div [id]=\"contentId\" class=\"ux-panel-header__right-content\">\n                    <ng-template [ngIf]=\"customPanelHeaderRightContent.length !== 0\">\n                        <ng-content select=\"uxPanelHeaderRightContent\"></ng-content>\n                    </ng-template>\n\n                    <ng-template [ngIf]=\"customPanelHeaderRightContentWithDescendants.length !== 0\">\n                        <ng-content select=\"uxPanelHeaderRightContentWithDescendants\"></ng-content>\n                    </ng-template>\n\n                    <ng-template\n                        [ngIf]=\"customPanelHeaderRightContent.length === 0 && customPanelHeaderRightContentWithDescendants.length === 0\">\n                        <ux-a-tag label=\"{{tagLabel}}\" subLabel=\"{{tagCount}}\" typeClass=\"{{tagTypeClass}}\"></ux-a-tag>\n                    </ng-template>\n\n                    <span *ngIf=\"isExpandable\" class=\"ux-panel-header__expand-toggle ux-icon\"\n                          [ngClass]=\"{'ux-icon-angle-right': !isExpanded, 'ux-icon-angle-down': isExpanded}\"></span>\n                </div>\n            </div>\n        </ng-template>\n\n        <ng-template [ngIf]=\"customSubHeaderContent\">\n            <div class=\"ux-panel-header__sub-header\">\n                <ng-content select=\"uxPanelSubHeaderContent\"></ng-content>\n            </div>\n        </ng-template>\n\n        <ng-template [ngIf]=\"hasStatusIndicator && customStatusIndicatorContent\">\n            <div class=\"ux-panel-header__status-indicator-wrapper\">\n                <span\n                    class=\"ux-panel-header__status-indicator-wrapper-label ux-u-color-{{statusIndicatorTypeClass}}-darkest\">\n                    {{statusIndicatorMessageLabel}}\n                </span>\n                <a *ngIf=\"isTogglableStatusIndicatorContent\"\n                   (click)=\"onToggleStatusIndicatorContent()\" class=\"ux-panel-header__status-indicator-wrapper-toggle\"\n                   tabindex=\"1\">\n                    <span class=\"ux-icon\" [class.ux-icon-angle-down]=\"isStatusIndicatorContentExpanded\"\n                          [class.ux-icon-angle-right]=\"!isStatusIndicatorContentExpanded\">\n                    </span>\n                </a>\n            </div>\n            <div *ngIf=\"isStatusIndicatorContentExpanded\" class=\"ux-panel-header__status-indicator-content\">\n                <ng-content select=\"uxPanelHeaderStatusIndicatorContent\"></ng-content>\n            </div>\n        </ng-template>\n\n        <div\n            class=\"ux-panel-content {{statePanelContentClasses}} {{contentStyleClass}} {{statePanelContentClassesDynamic}}\"\n            [class.ux-panel-content--fixed-height]=\"hasMaxHeight\"\n            [style.max-height]=\"actualMaxHeight\" [hidden]=\"!isExpanded\"\n            [style.height]=\"contentHeight\"\n            [class.ux-panel-content--fixed-height-scrollable]=\"hasContentHeight\"\n            aria-live=\"polite\">\n            <ng-content></ng-content>\n            <div *ngIf=\"isBlocked\" class=\"ux-panel-content__blocked-overlay\" role=\"status\" [attr.aria-busy]=\"isBlocked\"\n                 [attr.aria-label]=\"isBlockedAriaLabel\"></div>\n        </div>\n\n        <div *ngIf=\"customPanelFooter.length !== 0\" class=\"ux-panel-footer\"\n             [class.ux-panel-footer--large]=\"isLargeFooter\">\n            <ng-content select=\"uxPanelFooter\"></ng-content>\n        </div>\n\n        <div *ngIf=\"customPanelFooterWithDescendants.length !== 0\" class=\"ux-panel-footer\"\n             [class.ux-panel-footer--large]=\"isLargeFooter\">\n            <ng-content select=\"uxPanelFooterWithDescendants\"></ng-content>\n        </div>\n\n        <div *ngIf=\"hasMaxHeight\" class=\"ux-panel-footer justify-content-center\">\n            <button type=\"button\" class=\"ux-button ux-button--small ux-button--secondary\" (click)=\"toggleMaxHeight($event)\">\n                <span *ngIf=\"actualMaxHeight === 'none'\">show less...</span>\n                <span *ngIf=\"actualMaxHeight !== 'none'\">show more...</span>\n            </button>\n        </div>\n\n    </div>\n</div>\n", styles: [".ux-panels{margin:0;padding:0}.ux-panel{margin-bottom:var(--eui-base-spacing-m)}.ux-panel--is-collapsible{display:flex;padding-right:var(--eui-base-spacing-xl);position:relative}.ux-panel__collapsible-button{align-items:center;background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-grey-15);cursor:pointer;display:flex;font-size:var(--eui-base-font-size-xl);justify-content:center;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m);position:absolute;right:0;text-align:center;top:0;width:var(--eui-base-spacing-xl)}.ux-panel__collapsible-button--collapsed{position:relative}.ux-panel-item{background-color:var(--eui-base-color-white);border:var(--eui-base-border);border-radius:var(--eui-border-radius-base);position:relative;width:100%;box-shadow:var(--eui-base-shadow-1)}.ux-panel-item--has-tabs>.ux-panel-header{display:none}.ux-panel-item--has-tabs>.ux-panel-content{padding:0}.ux-panel-item--has-tabs>.ux-panel-content .eui-tab-content{padding:var(--eui-base-spacing-s)}.ux-panel-item--has-tabs>.ux-panel-content--no-padding .ux-tab-content{padding:0}.ux-panel-item--no-header>.ux-panel-header{display:none}.ux-panel-item--danger .ux-panel-header{background-color:var(--eui-base-color-danger-120)}.ux-panel-item--danger .ux-panel-header__status-indicator-wrapper-label{color:var(--eui-base-color-danger-130)}.ux-panel-item--info .ux-panel-header{background-color:var(--eui-base-color-info-120)}.ux-panel-item--info .ux-panel-header__status-indicator-wrapper-label{color:var(--eui-base-color-info-130)}.ux-panel-item--success .ux-panel-header{background-color:var(--eui-base-color-success-120)}.ux-panel-item--success .ux-panel-header__status-indicator-wrapper-label{color:var(--eui-base-color-success-130)}.ux-panel-item--warning .ux-panel-header{background-color:var(--eui-base-color-warning-120)}.ux-panel-item--warning .ux-panel-header:focus{outline-color:#117de2}.ux-panel-item--warning .ux-panel-header__status-indicator-wrapper-label{color:var(--eui-base-color-warning-130)}.ux-panel-item--clickable{cursor:pointer}.ux-panel-item--clickable:focus,.ux-panel-item--clickable:hover{outline:0;box-shadow:var(--eui-base-shadow-2)}.ux-panel-item--highlighted{z-index:var(--eui-base-z-index-highlighted)}.ux-panel-item__status-indicator-icon-wrapper{align-items:center;background-color:var(--eui-base-color-warning-110);border-radius:100%;color:var(--eui-base-color-white);display:flex;font-size:var(--eui-base-font-size);height:20px;justify-content:center;left:-6px;position:absolute;text-align:center;top:-6px;width:20px;z-index:3}uxpanelheader{align-items:center;display:flex;flex:1 1 0%;width:100%}uxpanelheaderrightcontent{align-items:center;display:flex}.ux-panel-header{align-items:center;background-color:var(--eui-base-color-grey-10);border-bottom:var(--eui-base-border-lighter);border-top-left-radius:var(--eui-base-border-radius);border-top-right-radius:var(--eui-base-border-radius);display:flex;padding:var(--eui-base-spacing-m);width:100%}.ux-panel-header--small{padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m)}.ux-panel-header__right-content{align-items:center;display:flex;margin-left:auto}.ux-panel-header__expand-toggle{cursor:pointer;font-size:var(--eui-base-font-size-xl);padding-left:var(--eui-base-spacing-m);padding-right:var(--eui-base-spacing-s)}.ux-panel-header__status-indicator-wrapper{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-15);display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-m)}.ux-panel-header__status-indicator-wrapper-toggle{margin-left:var(--eui-base-spacing-s);padding:var(--eui-base-spacing-xs)}.ux-panel-header__status-indicator-wrapper-toggle:focus{box-shadow:var(--eui-base-shadow-2)}.ux-panel-header__status-indicator-content{border-bottom:1px solid var(--eui-base-color-grey-15);padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m)}.ux-panel-header__sub-header{border-bottom:1px solid var(--eui-base-color-grey-15);padding:var(--eui-base-spacing-m)}.ux-panel-header ux-a-label{-ms-flex:1 1 0%}.ux-panel-item--flat{background-color:var(--eui-base-color-white)}.ux-panel-item--flat .ux-panel-header{background-color:var(--eui-base-color-white);margin:0}.ux-panel-item--flat .ux-panel-header--large{margin-bottom:var(--eui-base-spacing-s)}.ux-panel-item--flat .ux-panel-header--large .ux-a-label{padding:var(--eui-base-spacing-m) 0 var(--eui-base-spacing-s) 0}.ux-panel-item--flat .ux-panel-header--large .ux-a-label__label{font-size:var(--eui-base-font-size-2xl)}.ux-panel-item--flat .ux-panel-item:not(.ux-panel-item--flat):not(.ux-panel-item--selected) .ux-panel-header{background-color:var(--eui-base-color-grey-10)}.ux-panel-item--transparent{background-color:transparent;border:0;box-shadow:none}.ux-panel-item--transparent .ux-panel-header{background-color:transparent;margin:0;padding-top:var(--eui-base-spacing-s)}.ux-panel-item--transparent .ux-panel-header--large{margin-bottom:var(--eui-base-spacing-s)}.ux-panel-item--transparent .ux-panel-header--large .ux-a-label{padding:var(--eui-base-spacing-m) 0 var(--eui-base-spacing-s) 0}.ux-panel-item--transparent .ux-panel-header--large .ux-a-label__label{font-size:var(--eui-base-font-size-2xl)}.ux-panel-item--transparent .ux-panel-content{background-color:transparent}.ux-panel-item--selected{border:1px solid var(--eui-base-color-primary-100)}.ux-panel-item--selected .ux-panel-header{background-color:var(--eui-base-color-primary-75);color:var(--eui-base-color-white)}.ux-panel-item--selected .ux-panel-header .ux-a-label__label,.ux-panel-item--selected .ux-panel-header a{color:var(--eui-base-color-white)}.ux-panel-header--expandable{cursor:pointer}.ux-panel-header--accordion-expanded{background-color:var(--eui-base-color-primary-100)!important}.ux-panel-header--accordion-expanded .ux-a-label__label{color:var(--eui-base-color-white)!important}.ux-panel-header--has-light-label .ux-a-label__label{font-weight:400}.ux-panel-header--accordion-expanded .ux-panel-header__expand-toggle{color:var(--eui-base-color-white)!important}.ux-panel-content{background-color:var(--eui-base-color-white);padding:var(--eui-base-spacing-m);position:relative;transition:var(--eui-base-animation-transition-base)}.ux-panel-content--no-padding{padding:0}.ux-panel-content--blocked{z-index:0}.ux-panel-content__blocked-overlay{background-color:var(--eui-base-color-grey-20);height:100%;opacity:.5;position:absolute;right:0;top:0;width:100%;z-index:1}.ux-panel-content__blocked-overlay:after{animation:spin 1s linear infinite;border:10px solid transparent;border-radius:50%;border-top-color:var(--eui-base-color-primary-75);content:\"\";display:block;height:100px;left:50%;margin:-50px 0 0 -50px;position:absolute;top:50%;width:100px}.ux-panel-content--fixed-height{overflow:hidden}.ux-panel-content--fixed-height-scrollable{overflow-y:auto}.ux-panel-content--edit-mode-active{background-color:var(--eui-base-color-info-5)}uxpanelfooter{justify-content:flex-end;align-items:center;display:flex;width:100%}uxpanelfooter ux-button:not(:first-child){margin-left:var(--eui-base-spacing-xs)}.ux-panel-footer{background-color:var(--eui-base-color-grey-5);border-top:1px solid var(--eui-base-color-grey-15);padding:var(--eui-base-spacing-s);align-items:center;display:flex;width:100%}.ux-panel-footer--large{margin-top:4rem;padding:var(--eui-base-spacing-l)}.ux-panel-toolbar{margin-bottom:var(--eui-base-spacing-s)}.ux-panel-toolbar .ux-a-toolbar-filter{padding-left:0;padding-right:0}.ux-panel-toolbar .ux-a-toolbar-filter uxtoolbarfilterbuttons{margin-left:var(--eui-base-spacing-xs)}@media screen and (max-width: 767px){.eui-page-column .ux-panel{margin-right:0}uxpanelheaderrightcontent{align-items:center;display:flex;flex-wrap:wrap;justify-content:flex-end}uxpanelheaderrightcontent button:not(:last-child){margin-bottom:var(--eui-base-spacing-xs)}}\n"] }]
         }], ctorParameters: function () { return [{ type: UxPanelsComponent, decorators: [{
                     type: Optional
                 }, {