@hermes-ui/angular 0.1.4

package/fesm2022/hermes-ui-angular-modal.mjs

@@ -0,0 +1,619 @@
+import { trigger, transition, style, animate } from '@angular/animations';
+import * as i0 from '@angular/core';
+import { PLATFORM_ID, Inject, Injectable, EventEmitter, ViewChild, ContentChild, Input, Output, HostBinding, Component, Directive, NgModule, HostListener } from '@angular/core';
+import * as i1 from '@hermes-ui/angular/utils';
+import { Keys, uniqueIdFactory, ScrollingService, CdkTrapFocusModule } from '@hermes-ui/angular/utils';
+import * as i4 from '@angular/common';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+import * as i5 from '@hermes-ui/angular/icon';
+import { ClarityIcons, windowCloseIcon, HermesIcon } from '@hermes-ui/angular/icon';
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class ModalStackService {
+    constructor(platformId) {
+        this.platformId = platformId;
+        this.modalStack = [];
+        this.keyUpEventListener = this.onKeyUp.bind(this);
+    }
+    trackModalOpen(openedModal) {
+        if (this.modalStack.includes(openedModal) === false) {
+            this.modalStack.unshift(openedModal);
+        }
+        if (isPlatformBrowser(this.platformId)) {
+            document.body.addEventListener('keyup', this.keyUpEventListener);
+        }
+    }
+    trackModalClose(closedModal) {
+        const closedModalIndex = this.modalStack.indexOf(closedModal);
+        if (closedModalIndex > -1) {
+            this.modalStack.splice(closedModalIndex, 1);
+        }
+        if (this.modalStack.length === 0 && isPlatformBrowser(this.platformId)) {
+            document.body.removeEventListener('keyup', this.keyUpEventListener);
+        }
+    }
+    onKeyUp(event) {
+        if (this.modalStack.length && event.key === Keys.Escape) {
+            // We blur the active element because escaping with an input element in focus could cause
+            // an ExpressionChangedAfterItHasBeenCheckedError for the touched state. (CDE-1662)
+            document.activeElement.blur();
+            this.modalStack[0].close();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ModalStackService, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ModalStackService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: ModalStackService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }] });
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class HermesModalConfigurationService {
+    constructor() {
+        this.fadeMove = 'fadeDown';
+        this.backdrop = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesModalConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesModalConfigurationService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesModalConfigurationService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class HermesModal {
+    constructor(_scrollingService, commonStrings, modalStackService, configuration) {
+        this._scrollingService = _scrollingService;
+        this.commonStrings = commonStrings;
+        this.modalStackService = modalStackService;
+        this.configuration = configuration;
+        this.modalId = uniqueIdFactory();
+        this._open = false;
+        this._openChanged = new EventEmitter(false);
+        this.closable = true;
+        this.closeButtonAriaLabel = this.commonStrings.keys.close;
+        this.size = 'md';
+        this.staticBackdrop = true;
+        this.skipAnimation = false;
+        this.stopClose = false;
+        this.altClose = new EventEmitter(false);
+        // presently this is only used by inline wizards
+        this.bypassScrollService = false;
+    }
+    get fadeMove() {
+        return this.skipAnimation ? '' : this.configuration.fadeMove;
+    }
+    set fadeMove(move) {
+        this.configuration.fadeMove = move;
+    }
+    get backdrop() {
+        return this.configuration.backdrop;
+    }
+    // Detect when _open is set to true and set no-scrolling to true
+    ngOnChanges(changes) {
+        if (!this.bypassScrollService && changes && Object.prototype.hasOwnProperty.call(changes, '_open')) {
+            if (changes._open.currentValue) {
+                this._scrollingService.stopScrolling();
+                this.modalStackService.trackModalOpen(this);
+            }
+            else {
+                this._scrollingService.resumeScrolling();
+            }
+        }
+    }
+    ngOnDestroy() {
+        this._scrollingService.resumeScrolling();
+    }
+    open() {
+        if (this._open) {
+            return;
+        }
+        this._open = true;
+        this._openChanged.emit(true);
+        this.modalStackService.trackModalOpen(this);
+    }
+    backdropClick() {
+        if (this.staticBackdrop) {
+            return;
+        }
+        this.close();
+    }
+    close() {
+        if (this.stopClose) {
+            this.altClose.emit(false);
+            return;
+        }
+        if (!this.closable || !this._open) {
+            return;
+        }
+        this._open = false;
+    }
+    fadeDone(e) {
+        if (e.toState === 'void') {
+            // TODO: Investigate if we can decouple from animation events
+            this._openChanged.emit(false);
+            this.modalStackService.trackModalClose(this);
+        }
+    }
+    scrollTop() {
+        this.bodyElementRef.nativeElement.scrollTo(0, 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesModal, deps: [{ token: i1.ScrollingService }, { token: i1.HermesCommonStringsService }, { token: ModalStackService }, { token: HermesModalConfigurationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: HermesModal, isStandalone: false, selector: "hermes-modal", inputs: { _open: ["hermesModalOpen", "_open"], closable: ["hermesModalClosable", "closable"], closeButtonAriaLabel: ["hermesModalCloseButtonAriaLabel", "closeButtonAriaLabel"], size: ["hermesModalSize", "size"], staticBackdrop: ["hermesModalStaticBackdrop", "staticBackdrop"], skipAnimation: ["hermesModalSkipAnimation", "skipAnimation"], stopClose: ["hermesModalPreventClose", "stopClose"], labelledBy: ["hermesModalLabelledById", "labelledBy"], bypassScrollService: ["hermesModalOverrideScrollService", "bypassScrollService"] }, outputs: { _openChanged: "hermesModalOpenChange", altClose: "hermesModalAlternateClose" }, host: { properties: { "class.open": "this._open" } }, queries: [{ propertyName: "modalContentTemplate", first: true, predicate: ["hermesInternalModalContentTemplate"], descendants: true }], viewQueries: [{ propertyName: "title", first: true, predicate: ["title"], descendants: true }, { propertyName: "bodyElementRef", first: true, predicate: ["body"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!--\r\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\r\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\r\n  ~ This software is released under MIT license.\r\n  ~ The full license information can be found in LICENSE in the root directory of this project.\r\n  -->\r\n\r\n@if (_open) {\r\n<div class=\"modal\" [class.modal-full-screen]=\"size == 'full-screen'\">\r\n  <!--fixme: revisit when ngClass works with exit animation-->\r\n  <div\r\n    cdkTrapFocus\r\n    [cdkTrapFocusAutoCapture]=\"true\"\r\n    [@fadeMove]=\"fadeMove\"\r\n    (@fadeMove.done)=\"fadeDone($event)\"\r\n    class=\"modal-dialog\"\r\n    [class.modal-sm]=\"size == 'sm'\"\r\n    [class.modal-lg]=\"size == 'lg'\"\r\n    [class.modal-xl]=\"size == 'xl'\"\r\n    role=\"dialog\"\r\n    aria-modal=\"true\"\r\n    [attr.aria-hidden]=\"!_open\"\r\n    [attr.aria-labelledby]=\"labelledBy || modalId\"\r\n  >\r\n    <div class=\"hermes-sr-only\">{{commonStrings.keys.modalContentStart}}</div>\r\n    <!-- This wizard is tightly coupled to the modal styles, so changes here could require changes in the wizard. -->\r\n    @if (!modalContentTemplate) {\r\n    <div class=\"modal-content-wrapper\">\r\n      <div class=\"modal-content\">\r\n        <div class=\"modal-header--accessible\">\r\n          <ng-content select=\".leading-button\"></ng-content>\r\n          <div class=\"modal-title-wrapper\" #title [id]=\"modalId\" cdkFocusInitial tabindex=\"-1\">\r\n            <ng-content select=\".modal-title\"></ng-content>\r\n          </div>\r\n          @if (closable) {\r\n          <button\r\n            type=\"button\"\r\n            [attr.aria-label]=\"closeButtonAriaLabel || commonStrings.keys.close\"\r\n            class=\"close\"\r\n            (click)=\"close()\"\r\n          >\r\n            <hermes-icon shape=\"window-close\"></hermes-icon>\r\n          </button>\r\n          }\r\n        </div>\r\n        <div #body class=\"modal-body-wrapper\">\r\n          <ng-content select=\".modal-body\"></ng-content>\r\n        </div>\r\n        <ng-content select=\".modal-footer\"></ng-content>\r\n      </div>\r\n    </div>\r\n    } @else {\r\n    <ng-template [ngTemplateOutlet]=\"modalContentTemplate\"></ng-template>\r\n    }\r\n  </div>\r\n  <div class=\"hermes-sr-only\">{{commonStrings.keys.modalContentEnd}}</div>\r\n  @if (backdrop) {\r\n  <div\r\n    [@fade]\r\n    class=\"modal-backdrop\"\r\n    [class.static]=\"staticBackdrop\"\r\n    aria-hidden=\"true\"\r\n    (click)=\"backdropClick()\"\r\n  ></div>\r\n  }\r\n</div>\r\n}\r\n", styles: [":host{display:none}:host.open{display:inline}\n"], dependencies: [{ kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.CdkTrapFocusModule_CdkTrapFocus, selector: "[cdkTrapFocus]" }, { kind: "component", type: i5.HermesIcon, selector: "hermes-icon, hermes-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }], viewProviders: [ScrollingService], animations: [
+            trigger('fadeMove', [
+                transition('* => fadeDown', [
+                    style({ opacity: 0, transform: 'translate(0, -25%)' }),
+                    animate('0.2s ease-in-out'),
+                ]),
+                transition('fadeDown => *', [
+                    animate('0.2s ease-in-out', style({ opacity: 0, transform: 'translate(0, -25%)' })),
+                ]),
+                transition('* => fadeLeft', [style({ opacity: 0, transform: 'translate(25%, 0)' }), animate('0.2s ease-in-out')]),
+                transition('fadeLeft => *', [animate('0.2s ease-in-out', style({ opacity: 0, transform: 'translate(25%, 0)' }))]),
+                transition('* => fadeUp', [style({ opacity: 0, transform: 'translate(0, 50%)' }), animate('0.2s ease-in-out')]),
+                transition('fadeUp => *', [animate('0.2s ease-in-out', style({ opacity: 0, transform: 'translate(0, 50%)' }))]),
+            ]),
+            trigger('fade', [
+                transition('void => *', [style({ opacity: 0 }), animate('0.2s ease-in-out', style({ opacity: 0.85 }))]),
+                transition('* => void', [animate('0.2s ease-in-out', style({ opacity: 0 }))]),
+            ]),
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesModal, decorators: [{
+            type: Component,
+            args: [{ selector: 'hermes-modal', viewProviders: [ScrollingService], animations: [
+                        trigger('fadeMove', [
+                            transition('* => fadeDown', [
+                                style({ opacity: 0, transform: 'translate(0, -25%)' }),
+                                animate('0.2s ease-in-out'),
+                            ]),
+                            transition('fadeDown => *', [
+                                animate('0.2s ease-in-out', style({ opacity: 0, transform: 'translate(0, -25%)' })),
+                            ]),
+                            transition('* => fadeLeft', [style({ opacity: 0, transform: 'translate(25%, 0)' }), animate('0.2s ease-in-out')]),
+                            transition('fadeLeft => *', [animate('0.2s ease-in-out', style({ opacity: 0, transform: 'translate(25%, 0)' }))]),
+                            transition('* => fadeUp', [style({ opacity: 0, transform: 'translate(0, 50%)' }), animate('0.2s ease-in-out')]),
+                            transition('fadeUp => *', [animate('0.2s ease-in-out', style({ opacity: 0, transform: 'translate(0, 50%)' }))]),
+                        ]),
+                        trigger('fade', [
+                            transition('void => *', [style({ opacity: 0 }), animate('0.2s ease-in-out', style({ opacity: 0.85 }))]),
+                            transition('* => void', [animate('0.2s ease-in-out', style({ opacity: 0 }))]),
+                        ]),
+                    ], standalone: false, template: "<!--\r\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\r\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\r\n  ~ This software is released under MIT license.\r\n  ~ The full license information can be found in LICENSE in the root directory of this project.\r\n  -->\r\n\r\n@if (_open) {\r\n<div class=\"modal\" [class.modal-full-screen]=\"size == 'full-screen'\">\r\n  <!--fixme: revisit when ngClass works with exit animation-->\r\n  <div\r\n    cdkTrapFocus\r\n    [cdkTrapFocusAutoCapture]=\"true\"\r\n    [@fadeMove]=\"fadeMove\"\r\n    (@fadeMove.done)=\"fadeDone($event)\"\r\n    class=\"modal-dialog\"\r\n    [class.modal-sm]=\"size == 'sm'\"\r\n    [class.modal-lg]=\"size == 'lg'\"\r\n    [class.modal-xl]=\"size == 'xl'\"\r\n    role=\"dialog\"\r\n    aria-modal=\"true\"\r\n    [attr.aria-hidden]=\"!_open\"\r\n    [attr.aria-labelledby]=\"labelledBy || modalId\"\r\n  >\r\n    <div class=\"hermes-sr-only\">{{commonStrings.keys.modalContentStart}}</div>\r\n    <!-- This wizard is tightly coupled to the modal styles, so changes here could require changes in the wizard. -->\r\n    @if (!modalContentTemplate) {\r\n    <div class=\"modal-content-wrapper\">\r\n      <div class=\"modal-content\">\r\n        <div class=\"modal-header--accessible\">\r\n          <ng-content select=\".leading-button\"></ng-content>\r\n          <div class=\"modal-title-wrapper\" #title [id]=\"modalId\" cdkFocusInitial tabindex=\"-1\">\r\n            <ng-content select=\".modal-title\"></ng-content>\r\n          </div>\r\n          @if (closable) {\r\n          <button\r\n            type=\"button\"\r\n            [attr.aria-label]=\"closeButtonAriaLabel || commonStrings.keys.close\"\r\n            class=\"close\"\r\n            (click)=\"close()\"\r\n          >\r\n            <hermes-icon shape=\"window-close\"></hermes-icon>\r\n          </button>\r\n          }\r\n        </div>\r\n        <div #body class=\"modal-body-wrapper\">\r\n          <ng-content select=\".modal-body\"></ng-content>\r\n        </div>\r\n        <ng-content select=\".modal-footer\"></ng-content>\r\n      </div>\r\n    </div>\r\n    } @else {\r\n    <ng-template [ngTemplateOutlet]=\"modalContentTemplate\"></ng-template>\r\n    }\r\n  </div>\r\n  <div class=\"hermes-sr-only\">{{commonStrings.keys.modalContentEnd}}</div>\r\n  @if (backdrop) {\r\n  <div\r\n    [@fade]\r\n    class=\"modal-backdrop\"\r\n    [class.static]=\"staticBackdrop\"\r\n    aria-hidden=\"true\"\r\n    (click)=\"backdropClick()\"\r\n  ></div>\r\n  }\r\n</div>\r\n}\r\n", styles: [":host{display:none}:host.open{display:inline}\n"] }]
+        }], ctorParameters: () => [{ type: i1.ScrollingService }, { type: i1.HermesCommonStringsService }, { type: ModalStackService }, { type: HermesModalConfigurationService }], propDecorators: { title: [{
+                type: ViewChild,
+                args: ['title']
+            }], _open: [{
+                type: Input,
+                args: ['hermesModalOpen']
+            }, {
+                type: HostBinding,
+                args: ['class.open']
+            }], _openChanged: [{
+                type: Output,
+                args: ['hermesModalOpenChange']
+            }], closable: [{
+                type: Input,
+                args: ['hermesModalClosable']
+            }], closeButtonAriaLabel: [{
+                type: Input,
+                args: ['hermesModalCloseButtonAriaLabel']
+            }], size: [{
+                type: Input,
+                args: ['hermesModalSize']
+            }], staticBackdrop: [{
+                type: Input,
+                args: ['hermesModalStaticBackdrop']
+            }], skipAnimation: [{
+                type: Input,
+                args: ['hermesModalSkipAnimation']
+            }], stopClose: [{
+                type: Input,
+                args: ['hermesModalPreventClose']
+            }], altClose: [{
+                type: Output,
+                args: ['hermesModalAlternateClose']
+            }], labelledBy: [{
+                type: Input,
+                args: ['hermesModalLabelledById']
+            }], bypassScrollService: [{
+                type: Input,
+                args: ['hermesModalOverrideScrollService']
+            }], modalContentTemplate: [{
+                type: ContentChild,
+                args: ['hermesInternalModalContentTemplate']
+            }], bodyElementRef: [{
+                type: ViewChild,
+                args: ['body']
+            }] } });
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+/**
+ * Allows modal overflow area to be scrollable via keyboard.
+ * The modal body will focus with keyboard navigation only.
+ * This allows inner focusable items to be focused without
+ * the overflow scroll being focused.
+ */
+class HermesModalBody {
+    constructor(renderer, host, ngZone) {
+        this.renderer = renderer;
+        this.host = host;
+        this.tabindex = '0';
+        this.unlisteners = [];
+        ngZone.runOutsideAngular(() => {
+            this.observer = new ResizeObserver(() => this.addOrRemoveTabIndex());
+            this.observer.observe(host.nativeElement);
+            this.unlisteners.push(renderer.listen(host.nativeElement, 'mouseup', () => {
+                // set the tabindex binding back when click is completed with mouseup
+                this.addOrRemoveTabIndex();
+            }), renderer.listen(host.nativeElement, 'mousedown', () => {
+                // tabindex = 0 binding should be removed
+                // so it won't be focused when click starts with mousedown
+                this.removeTabIndex();
+            }));
+        });
+    }
+    ngOnDestroy() {
+        while (this.unlisteners.length) {
+            this.unlisteners.pop()();
+        }
+        this.observer.disconnect();
+        this.observer = null;
+    }
+    addTabIndex() {
+        this.renderer.setAttribute(this.host.nativeElement, 'tabindex', this.tabindex);
+    }
+    removeTabIndex() {
+        this.renderer.removeAttribute(this.host.nativeElement, 'tabindex');
+    }
+    addOrRemoveTabIndex() {
+        const modalBody = this.host.nativeElement.parentElement;
+        if (modalBody && modalBody.clientHeight < modalBody.scrollHeight) {
+            this.addTabIndex();
+        }
+        else {
+            this.removeTabIndex();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesModalBody, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: HermesModalBody, isStandalone: false, selector: ".modal-body", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesModalBody, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '.modal-body',
+                    standalone: false,
+                }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }] });
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class HermesModalHostComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesModalHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.22", type: HermesModalHostComponent, isStandalone: false, selector: "[hermesModalHost]", host: { properties: { "class.hermes-modal-host": "true" } }, ngImport: i0, template: `
+    <div class="hermes-modal-host-scrollable">
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesModalHostComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[hermesModalHost]',
+                    host: { '[class.hermes-modal-host]': 'true' },
+                    template: `
+    <div class="hermes-modal-host-scrollable">
+      <ng-content></ng-content>
+    </div>
+  `,
+                    standalone: false,
+                }]
+        }] });
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+const HERMES_MODAL_DIRECTIVES = [HermesModal, HermesModalBody, HermesModalHostComponent];
+class HermesModalModule {
+    constructor() {
+        ClarityIcons.addIcons(windowCloseIcon);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.22", ngImport: i0, type: HermesModalModule, declarations: [HermesModal, HermesModalBody, HermesModalHostComponent], imports: [CommonModule, CdkTrapFocusModule, HermesIcon], exports: [HermesModal, HermesModalBody, HermesModalHostComponent, HermesIcon] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesModalModule, imports: [CommonModule, CdkTrapFocusModule, HermesIcon] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesModalModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, CdkTrapFocusModule, HermesIcon],
+                    declarations: [HERMES_MODAL_DIRECTIVES],
+                    exports: [HERMES_MODAL_DIRECTIVES, HermesIcon],
+                }]
+        }], ctorParameters: () => [] });
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+class HermesSidePanel {
+    constructor(element, configuration, commonStrings) {
+        this.element = element;
+        this.configuration = configuration;
+        this.commonStrings = commonStrings;
+        this.openChange = new EventEmitter(false);
+        this.skipAnimation = false;
+        this.staticBackdrop = false;
+        this.closable = true;
+        this.preventClose = false;
+        this.altClose = new EventEmitter(false);
+        this._pinnable = false;
+        this._pinned = false;
+        this._position = 'right';
+        this.__open = false;
+        this._size = 'md';
+    }
+    get _open() {
+        return this.__open;
+    }
+    set _open(open) {
+        if (open !== this.__open) {
+            this.__open = open;
+            if (this.pinned) {
+                this.updateModalState();
+            }
+        }
+    }
+    get size() {
+        return this._size;
+    }
+    set size(value) {
+        if (!value) {
+            value = 'md';
+        }
+        if (this._size !== value) {
+            this._size = value;
+            if (this.pinned) {
+                this.updateModalState();
+            }
+        }
+    }
+    get position() {
+        return this._position;
+    }
+    set position(position) {
+        if (position && position !== this._position) {
+            this._position = position;
+            if (this._position === 'right') {
+                this.configuration.fadeMove = 'fadeLeft';
+            }
+            else if (this._position === 'bottom') {
+                this.configuration.fadeMove = 'fadeUp';
+            }
+        }
+    }
+    get pinned() {
+        return this._pinned;
+    }
+    set pinned(pinned) {
+        this._pinned = pinned;
+        if (this.modal) {
+            this.updateModalState();
+        }
+    }
+    get hermesSidePanelBackdrop() {
+        return this.configuration.backdrop;
+    }
+    set hermesSidePanelBackdrop(backdrop) {
+        if (backdrop !== undefined) {
+            this.configuration.backdrop = backdrop;
+        }
+    }
+    get hermesSidePanelPinnable() {
+        return this._pinnable;
+    }
+    set hermesSidePanelPinnable(pinnable) {
+        this._pinnable = pinnable;
+    }
+    get modal() {
+        return this._modal;
+    }
+    set modal(modal) {
+        this._modal = modal;
+        this.originalStopClose = this.modal.stopClose;
+        this.updateModalState();
+    }
+    get hostElement() {
+        return this.element.nativeElement.closest('.hermes-modal-host') || document.body;
+    }
+    get bottomPositionCssClass() {
+        return this.position === 'bottom';
+    }
+    ngOnInit() {
+        this.configuration.fadeMove = 'fadeLeft';
+        if (this.position === 'bottom') {
+            this.configuration.fadeMove = 'fadeUp';
+        }
+    }
+    ngOnDestroy() {
+        this.cleanupPinnedClasses();
+    }
+    handleModalOpen(open) {
+        if (open) {
+            this.updateModalState();
+        }
+        else {
+            this.cleanupPinnedClasses();
+        }
+        this.openChange.emit(open);
+    }
+    open() {
+        this.modal.open();
+    }
+    close() {
+        this.modal.close();
+    }
+    togglePinned() {
+        this.pinned = !this.pinned;
+    }
+    documentClick(event) {
+        if (!this.element.nativeElement.contains(event.target) &&
+            this.modal._open &&
+            !this.configuration.backdrop) {
+            this.modal.close();
+        }
+    }
+    updateModalState() {
+        if (!this.modal) {
+            return;
+        }
+        if (this.pinned) {
+            this.modal.stopClose = true;
+            if (this.__open) {
+                this.updatePinnedClasses();
+            }
+        }
+        else {
+            this.modal.stopClose = this.originalStopClose;
+            this.cleanupPinnedClasses();
+        }
+    }
+    cleanupPinnedClasses() {
+        [this.hostElement, document.body].forEach(host => {
+            host.classList.forEach(className => {
+                if (className.startsWith('hermes-side-panel-pinned-')) {
+                    host.classList.remove(className);
+                }
+            });
+        });
+    }
+    updatePinnedClasses() {
+        this.cleanupPinnedClasses();
+        this.hostElement.classList.add(`hermes-side-panel-pinned-${this.position}-${this.size}`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesSidePanel, deps: [{ token: i0.ElementRef }, { token: HermesModalConfigurationService }, { token: i1.HermesCommonStringsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: HermesSidePanel, isStandalone: false, selector: "hermes-side-panel", inputs: { closeButtonAriaLabel: ["hermesSidePanelCloseButtonAriaLabel", "closeButtonAriaLabel"], skipAnimation: ["hermesSidePanelSkipAnimation", "skipAnimation"], labelledById: ["hermesSidePanelLabelledById", "labelledById"], staticBackdrop: ["hermesSidePanelStaticBackdrop", "staticBackdrop"], closable: ["hermesSidePanelClosable", "closable"], preventClose: ["hermesSidePanelPreventClose", "preventClose"], _open: ["hermesSidePanelOpen", "_open"], size: ["hermesSidePanelSize", "size"], position: ["hermesSidePanelPosition", "position"], pinned: ["hermesSidePanelPinned", "pinned"], hermesSidePanelBackdrop: "hermesSidePanelBackdrop", hermesSidePanelPinnable: "hermesSidePanelPinnable" }, outputs: { openChange: "hermesSidePanelOpenChange", altClose: "hermesSidePanelAlternateClose" }, host: { listeners: { "document:pointerup": "documentClick($event)" }, properties: { "class.side-panel": "true", "class.side-panel-bottom": "this.bottomPositionCssClass" } }, viewQueries: [{ propertyName: "modal", first: true, predicate: HermesModal, descendants: true }], ngImport: i0, template: "<!--\r\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\r\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\r\n  ~ This software is released under MIT license.\r\n  ~ The full license information can be found in LICENSE in the root directory of this project.\r\n  -->\r\n<hermes-modal\r\n  [hermesModalOpen]=\"_open\"\r\n  (hermesModalOpenChange)=\"handleModalOpen($event)\"\r\n  [hermesModalCloseButtonAriaLabel]=\"closeButtonAriaLabel\"\r\n  [hermesModalSize]=\"size\"\r\n  [hermesModalSkipAnimation]=\"skipAnimation\"\r\n  [hermesModalStaticBackdrop]=\"staticBackdrop\"\r\n  [hermesModalLabelledById]=\"labelledById\"\r\n  [hermesModalPreventClose]=\"preventClose\"\r\n  [hermesModalClosable]=\"closable\"\r\n  (hermesModalAlternateClose)=\"altClose.emit($event)\"\r\n  [hermesModalOverrideScrollService]=\"true\"\r\n>\r\n  @if (hermesSidePanelPinnable) {\r\n  <button\r\n    type=\"button\"\r\n    [attr.aria-label]=\"commonStrings.keys.sidePanelPin\"\r\n    class=\"leading-button pinnable\"\r\n    (click)=\"togglePinned()\"\r\n  >\r\n    <hermes-icon [shape]=\"pinned ? 'unpin' : 'pin'\"></hermes-icon>\r\n  </button>\r\n  }\r\n  <div class=\"modal-title\"><ng-content select=\".side-panel-title\"></ng-content></div>\r\n  <div class=\"modal-body\"><ng-content select=\".side-panel-body\"></ng-content></div>\r\n  <div class=\"modal-footer\"><ng-content select=\".side-panel-footer\"></ng-content></div>\r\n</hermes-modal>\r\n", dependencies: [{ kind: "component", type: i5.HermesIcon, selector: "hermes-icon, hermes-icon", inputs: ["shape", "size", "direction", "flip", "solid", "status", "inverse", "badge"] }, { kind: "component", type: HermesModal, selector: "hermes-modal", inputs: ["hermesModalOpen", "hermesModalClosable", "hermesModalCloseButtonAriaLabel", "hermesModalSize", "hermesModalStaticBackdrop", "hermesModalSkipAnimation", "hermesModalPreventClose", "hermesModalLabelledById", "hermesModalOverrideScrollService"], outputs: ["hermesModalOpenChange", "hermesModalAlternateClose"] }, { kind: "directive", type: HermesModalBody, selector: ".modal-body" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesSidePanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'hermes-side-panel', host: {
+                        '[class.side-panel]': 'true',
+                    }, standalone: false, template: "<!--\r\n  ~ Copyright (c) 2016-2026 Broadcom. All Rights Reserved.\r\n  ~ The term \"Broadcom\" refers to Broadcom Inc. and/or its subsidiaries.\r\n  ~ This software is released under MIT license.\r\n  ~ The full license information can be found in LICENSE in the root directory of this project.\r\n  -->\r\n<hermes-modal\r\n  [hermesModalOpen]=\"_open\"\r\n  (hermesModalOpenChange)=\"handleModalOpen($event)\"\r\n  [hermesModalCloseButtonAriaLabel]=\"closeButtonAriaLabel\"\r\n  [hermesModalSize]=\"size\"\r\n  [hermesModalSkipAnimation]=\"skipAnimation\"\r\n  [hermesModalStaticBackdrop]=\"staticBackdrop\"\r\n  [hermesModalLabelledById]=\"labelledById\"\r\n  [hermesModalPreventClose]=\"preventClose\"\r\n  [hermesModalClosable]=\"closable\"\r\n  (hermesModalAlternateClose)=\"altClose.emit($event)\"\r\n  [hermesModalOverrideScrollService]=\"true\"\r\n>\r\n  @if (hermesSidePanelPinnable) {\r\n  <button\r\n    type=\"button\"\r\n    [attr.aria-label]=\"commonStrings.keys.sidePanelPin\"\r\n    class=\"leading-button pinnable\"\r\n    (click)=\"togglePinned()\"\r\n  >\r\n    <hermes-icon [shape]=\"pinned ? 'unpin' : 'pin'\"></hermes-icon>\r\n  </button>\r\n  }\r\n  <div class=\"modal-title\"><ng-content select=\".side-panel-title\"></ng-content></div>\r\n  <div class=\"modal-body\"><ng-content select=\".side-panel-body\"></ng-content></div>\r\n  <div class=\"modal-footer\"><ng-content select=\".side-panel-footer\"></ng-content></div>\r\n</hermes-modal>\r\n" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: HermesModalConfigurationService }, { type: i1.HermesCommonStringsService }], propDecorators: { openChange: [{
+                type: Output,
+                args: ['hermesSidePanelOpenChange']
+            }], closeButtonAriaLabel: [{
+                type: Input,
+                args: ['hermesSidePanelCloseButtonAriaLabel']
+            }], skipAnimation: [{
+                type: Input,
+                args: ['hermesSidePanelSkipAnimation']
+            }], labelledById: [{
+                type: Input,
+                args: ['hermesSidePanelLabelledById']
+            }], staticBackdrop: [{
+                type: Input,
+                args: ['hermesSidePanelStaticBackdrop']
+            }], closable: [{
+                type: Input,
+                args: ['hermesSidePanelClosable']
+            }], preventClose: [{
+                type: Input,
+                args: ['hermesSidePanelPreventClose']
+            }], altClose: [{
+                type: Output,
+                args: ['hermesSidePanelAlternateClose']
+            }], _open: [{
+                type: Input,
+                args: ['hermesSidePanelOpen']
+            }], size: [{
+                type: Input,
+                args: ['hermesSidePanelSize']
+            }], position: [{
+                type: Input,
+                args: ['hermesSidePanelPosition']
+            }], pinned: [{
+                type: Input,
+                args: ['hermesSidePanelPinned']
+            }], hermesSidePanelBackdrop: [{
+                type: Input
+            }], hermesSidePanelPinnable: [{
+                type: Input
+            }], modal: [{
+                type: ViewChild,
+                args: [HermesModal]
+            }], bottomPositionCssClass: [{
+                type: HostBinding,
+                args: ['class.side-panel-bottom']
+            }], documentClick: [{
+                type: HostListener,
+                args: ['document:pointerup', ['$event']]
+            }] } });
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+const HERMES_SIDEPANEL_DIRECTIVES = [HermesSidePanel];
+class HermesSidePanelModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesSidePanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.22", ngImport: i0, type: HermesSidePanelModule, declarations: [HermesSidePanel], imports: [CommonModule, CdkTrapFocusModule, HermesIcon, HermesModalModule], exports: [HermesSidePanel, HermesModalModule, HermesIcon] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesSidePanelModule, imports: [CommonModule, CdkTrapFocusModule, HermesIcon, HermesModalModule, HermesModalModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: HermesSidePanelModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, CdkTrapFocusModule, HermesIcon, HermesModalModule],
+                    declarations: [HERMES_SIDEPANEL_DIRECTIVES],
+                    exports: [HERMES_SIDEPANEL_DIRECTIVES, HermesModalModule, HermesIcon],
+                }]
+        }] });
+
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { HERMES_MODAL_DIRECTIVES, HERMES_SIDEPANEL_DIRECTIVES, HermesModal, HermesModalBody, HermesModalConfigurationService, HermesModalHostComponent, HermesModalModule, HermesSidePanel, HermesSidePanelModule, ModalStackService };
+//# sourceMappingURL=hermes-ui-angular-modal.mjs.map