@sebgroup/green-angular 0.0.0-v-angular-20250113082841

package/fesm2022/sebgroup-green-angular-src-v-angular-modal.mjs

@@ -0,0 +1,717 @@
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ViewChild, HostBinding, Input, Output, HostListener, ElementRef, Directive, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import * as i2$1 from '@sebgroup/green-angular/src/lib/shared';
+import { NggCoreWrapperModule } from '@sebgroup/green-angular/src/lib/shared';
+import { NggvButtonModule } from '@sebgroup/green-angular/src/v-angular/button';
+import { NggvI18nModule } from '@sebgroup/green-angular/src/v-angular/i18n';
+import * as i2 from '@jsverse/transloco';
+import '@sebgroup/green-core/components/icon/icons/dot-grid-one-horizontal.js';
+import { fromEvent } from 'rxjs';
+import { takeWhile, filter } from 'rxjs/operators';
+import { trigger, transition, query, style, group, animate } from '@angular/animations';
+
+;
+(() => {
+    // Make sure there is an incremental ID each component can use
+    if (typeof window !== 'undefined' && !window.nggv) {
+        window.nggv = {
+            ids: { default: -1 },
+            nextId(namespace = 'default') {
+                let id = this.ids[namespace] || 0;
+                if (typeof this.ids[namespace] === 'number')
+                    id++;
+                this.ids[namespace] = id;
+                return namespace === 'default'
+                    ? `nggv-${id}`
+                    : `nggv-${namespace}-${id}`;
+            },
+        };
+    }
+})();
+
+class NggvDialogComponent {
+    set shown(value) {
+        this._shown = value;
+        if (value) {
+            this.hideOverflow();
+        }
+        else {
+            this.resetOverflow();
+        }
+    }
+    get shown() {
+        return this._shown;
+    }
+    /** @internal */
+    get ariaHidden() {
+        return !this.shown;
+    }
+    /** Buttons are defined as a key-value pair where key is one of "positive|neutral|negative" and value is the button label. */
+    set buttons(buttons) {
+        this._buttons = buttons;
+    }
+    constructor(renderer) {
+        this.renderer = renderer;
+        /** Special property used for selecting DOM elements during automated UI testing. */
+        this.thook = 'dialog';
+        /** @internal */
+        this.baseClass = true;
+        /** @internal Defines the default visibility state of the dialog. */
+        this._shown = false;
+        /** Defines the default visibility state of the dialog. */
+        this.initiallyShown = false;
+        /**
+         * Sets modal title. Will be translated (using transloco) if the string matches a cms key.
+         * @deprecated - use heading instead.
+         */
+        this.title = 'Attention';
+        /** Defines if dialog should close on action. */
+        this.autoClose = true;
+        /** An array of event payloads that will be added to every click context menu item click. */
+        this.payload = {};
+        /** It gives an ability for parent component to control if modal should be closed on esc button click. */
+        this.closeModalOnEscape = true;
+        // /** @internal */
+        // closeIcon = faTimes
+        this.nggvCloseEvent = new EventEmitter();
+        this.nggvPositiveEvent = new EventEmitter();
+        this.nggvNeutralEvent = new EventEmitter();
+        this.nggvNegativeEvent = new EventEmitter();
+    }
+    ngOnInit() {
+        this.dialogTitleId =
+            this.dialogTitleId ?? 'gds-dialog-title-' + window.nggv?.nextId();
+        if (this.dialogBodyId !== null) {
+            this.dialogBodyId =
+                this.dialogBodyId ?? 'gds-dialog-body-' + window.nggv?.nextId();
+        }
+        this._shown = this.initiallyShown;
+        if (this.shown)
+            this._limitFocusable();
+    }
+    onAction(event, action) {
+        event.preventDefault();
+        const emitEvent = {
+            original: event,
+            payload: this.payload,
+        };
+        switch (action) {
+            case 'positive':
+                this.nggvPositiveEvent.emit(emitEvent);
+                break;
+            case 'neutral':
+                this.nggvNeutralEvent.emit(emitEvent);
+                break;
+            case 'negative':
+                this.nggvNegativeEvent.emit(emitEvent);
+                break;
+            // case 'close' is handled by if-statement below with call to this.close()
+        }
+        if (this.autoClose)
+            this.close(event, 'action');
+    }
+    open(opener) {
+        this._shown = true;
+        this._previous = opener || document.activeElement;
+        this.hideOverflow();
+        this._limitFocusable();
+        return true;
+    }
+    _limitFocusable() {
+        window.setTimeout(() => {
+            if (!this.dialogRef)
+                return;
+            const focusable = this.dialogRef.nativeElement.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+            this._firstFocusable = focusable[0];
+            this._lastFocusable = focusable[focusable.length - 1];
+            if (this._firstFocusable)
+                this._firstFocusable.focus();
+        });
+    }
+    close(event, initiator) {
+        if (initiator === 'host' && event instanceof MouseEvent)
+            return;
+        // prevent modal from closing on esc button click when closeModalOnEscape is set to false
+        if (!this.closeModalOnEscape)
+            return;
+        if (this.shown) {
+            const emitEvent = {
+                original: event,
+                payload: this.payload,
+            };
+            this.nggvCloseEvent.emit(emitEvent);
+        }
+        this.resetOverflow();
+        this._shown = false;
+        window.setTimeout(() => {
+            if (this._previous)
+                this._previous.focus();
+            this._previous = undefined;
+        });
+    }
+    focusTrap(event) {
+        if (event.key !== 'Tab')
+            return;
+        if (event.shiftKey) {
+            // shift + tab
+            if (this._lastFocusable &&
+                document.activeElement === this._firstFocusable) {
+                this._lastFocusable.focus();
+                event.preventDefault();
+            }
+        }
+        else {
+            // tab
+            if (this._firstFocusable &&
+                document.activeElement === this._lastFocusable) {
+                this._firstFocusable.focus();
+                event.preventDefault();
+            }
+        }
+    }
+    // to prevent background scrolling when modal is open
+    hideOverflow() {
+        this.renderer.setStyle(document.body, 'overflow', 'hidden');
+    }
+    resetOverflow() {
+        this.renderer.removeStyle(document.body, 'overflow');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvDialogComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvDialogComponent, selector: "nggv-dialog", inputs: { thook: "thook", shown: "shown", initiallyShown: "initiallyShown", heading: "heading", title: "title", content: "content", autoClose: "autoClose", payload: "payload", dialogTitleId: "dialogTitleId", dialogBodyId: "dialogBodyId", closeModalOnEscape: "closeModalOnEscape", closeButtonAriaLabel: "closeButtonAriaLabel", buttons: "buttons" }, outputs: { nggvCloseEvent: "nggvCloseEvent", nggvPositiveEvent: "nggvPositiveEvent", nggvNeutralEvent: "nggvNeutralEvent", nggvNegativeEvent: "nggvNegativeEvent" }, host: { listeners: { "click": "close($event,\"host\")", "document:keydown.escape": "close($event)", "keydown": "focusTrap($event)" }, properties: { "attr.data-thook": "this.thook", "class.gds-modal-dialog": "this.baseClass", "class.-active": "this._shown", "attr.aria-hidden": "this.ariaHidden" } }, viewQueries: [{ propertyName: "dialogRef", first: true, predicate: ["dialog"], descendants: true }], exportAs: ["dialog"], ngImport: i0, template: "<div\n  class=\"modal-dialog__container\"\n  *transloco=\"let t\"\n  #dialog\n  role=\"dialog\"\n  aria-dialog=\"true\"\n  [attr.aria-labelledby]=\"dialogTitleId\"\n  [attr.aria-describedby]=\"dialogBodyId\"\n>\n  <header class=\"modal-dialog__heading\">\n    <h3 [attr.id]=\"dialogTitleId\">{{ t(heading || title || '') }}</h3>\n    <button\n      data-thook=\"dialog-close\"\n      (click)=\"onAction($event, 'close')\"\n      (keydown.enter)=\"onAction($event, 'close')\"\n      [attr.aria-label]=\"closeButtonAriaLabel\"\n      class=\"nggv-modal-slideout__close\"\n    >\n      <i></i>\n    </button>\n  </header>\n  <section class=\"modal-dialog__body\" [attr.id]=\"dialogBodyId\">\n    <div [innerHtml]=\"content\"></div>\n    <ng-content></ng-content>\n  </section>\n  <footer class=\"modal-dialog__actions\">\n    <button\n      class=\"danger\"\n      type=\"reset\"\n      [attr.data-thook]=\"'dialog-' + (_buttons?.negative || 'negative')\"\n      (click)=\"onAction($event, 'negative')\"\n      (keydown.enter)=\"onAction($event, 'negative')\"\n      *ngIf=\"_buttons && _buttons.negative\"\n    >\n      {{ t(_buttons.negative) }}\n    </button>\n    <button\n      class=\"secondary\"\n      type=\"button\"\n      [attr.data-thook]=\"'dialog-' + (_buttons?.neutral || 'neutral')\"\n      (click)=\"onAction($event, 'neutral')\"\n      (keydown.enter)=\"onAction($event, 'neutral')\"\n      *ngIf=\"_buttons && _buttons.neutral\"\n    >\n      {{ t(_buttons.neutral) }}\n    </button>\n    <button\n      class=\"submit\"\n      type=\"submit\"\n      [attr.data-thook]=\"'dialog-' + (_buttons?.positive || 'positive')\"\n      (click)=\"onAction($event, 'positive')\"\n      (keydown.enter)=\"onAction($event, 'positive')\"\n      *ngIf=\"_buttons && _buttons.positive\"\n    >\n      {{ t(_buttons.positive) }}\n    </button>\n  </footer>\n</div>\n\n<div class=\"nggv-backdrop\"></div>\n", styles: [":host{--grey-500: rgb(222, 222, 222);--background-hsl: 0deg, 0%, 0%;--gds-ref-pallet-base200: hsl(0, 0%, 91%);--gds-sys-color-base: hsl(0, 0%, 20%);--gds-sys-color-font: hsl(0, 0%, 20%);--gds-sys-shape-corner-round: 50%;--sg-border-color: hsl(0, 0%, 53%);--sg-border-radius: .25rem;--sg-border-width-50: .5px;--sg-border-width: 1px;--sg-hsl-contrast: 0deg, 0%, 0%;--sg-modal-backdrop-background: rgba(0, 0, 0, .5);--sg-modal-background: #fff;--sg-modal-box-shadow: 0 .125rem .375rem rgba(0, 0, 0, .15);--sg-z-index-modal-backdrop: 1040;--sg-z-index-modal: 1050;--text-primary-color: rgb(51, 51, 51);inset:0;position:fixed;display:grid;place-content:center;z-index:calc(var(--sg-z-index-modal-backdrop) + 1)}:host .modal-dialog__container{background:var(--sg-modal-background);display:flex;flex-direction:column;box-shadow:var(--sg-modal-box-shadow);position:absolute;width:100%;z-index:var(--sg-z-index-modal);position:initial;width:375px;max-width:95vw}:host .modal-dialog__container>.header,:host .modal-dialog__container>header{padding:1rem;border-bottom:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .modal-dialog__container>.header h3,:host .modal-dialog__container>.header .h3,:host .modal-dialog__container>header h3,:host .modal-dialog__container>header .h3{margin-bottom:0;margin-top:0}:host .modal-dialog__container>.header h3+.close,:host .modal-dialog__container>.header .h3+.close,:host .modal-dialog__container>header h3+.close,:host .modal-dialog__container>header .h3+.close{margin:-7px;min-width:2rem}:host .modal-dialog__container>.body{padding:1rem;overflow:auto;width:100%}:host .modal-dialog__container>.body p{margin-bottom:0;margin-top:0}:host .modal-dialog__container>.footer,:host .modal-dialog__container>footer{padding:1rem;width:100%}@media (min-width: 36em){:host .modal-dialog__container>.footer,:host .modal-dialog__container>footer{display:flex;justify-content:flex-end}}@media (max-width: 35.98em){:host .modal-dialog__container>.footer button+button,:host .modal-dialog__container>.footer button+.button,:host .modal-dialog__container>.footer .button+button,:host .modal-dialog__container>.footer .button+.button,:host .modal-dialog__container>footer button+button,:host .modal-dialog__container>footer button+.button,:host .modal-dialog__container>footer .button+button,:host .modal-dialog__container>footer .button+.button{margin-top:.75rem}}@media (min-width: 36em){:host .modal-dialog__container>.footer button+button,:host .modal-dialog__container>.footer button+.button,:host .modal-dialog__container>.footer .button+button,:host .modal-dialog__container>.footer .button+.button,:host .modal-dialog__container>footer button+button,:host .modal-dialog__container>footer button+.button,:host .modal-dialog__container>footer .button+button,:host .modal-dialog__container>footer .button+.button{margin-left:.75rem}}:host .modal-dialog__container.medium{width:512px}:host .modal-dialog__container.large{width:720px}:host .modal-dialog__heading{box-sizing:border-box;padding:1rem;border-bottom:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .modal-dialog__heading h3,:host .modal-dialog__heading .h3{margin-bottom:0;margin-top:0}:host .modal-dialog__heading h3+.close,:host .modal-dialog__heading .h3+.close{margin:-7px;min-width:2rem}:host .modal-dialog__body{padding:1rem;overflow:auto;width:100%}:host .modal-dialog__body p{margin-bottom:0;margin-top:0}:host .modal-dialog__actions,:host .modal-dialog__heading,:host .modal-dialog__body{box-sizing:border-box}:host .nggv-backdrop{background:var(--sg-modal-backdrop-background);inset:0;position:fixed;z-index:var(--sg-z-index-modal-backdrop);display:block;transition:opacity .5s cubic-bezier(.33,1,.68,1)}:host .nggv-backdrop--transparent{opacity:0}:host .nggv-backdrop--transparent.entered,:host .nggv-backdrop--transparent.is-entering{opacity:1}:host .nggv-backdrop--transparent.is-exiting{opacity:0}:host .nggv-modal-slideout__close{background-color:transparent;padding:0;font-size:0;background:var(--gds-sys-color-surface);border:0;border-radius:50%;content:\"\";cursor:pointer;display:flex;font-family:inherit;height:2rem;position:relative;width:2rem}@media (hover: none) and (pointer: coarse){:host .nggv-modal-slideout__close:not(:disabled):not(.disabled){padding:.375rem;height:2.75rem;width:2.75rem}:host .nggv-modal-slideout__close:not(:disabled):not(.disabled)>i{background:var(--gds-ref-pallet-base200);height:2rem;width:2rem;border-radius:50%;position:relative;--color: var(--gds-sys-color-base)}:host .nggv-modal-slideout__close:not(:disabled):not(.disabled)>div:after,:host .nggv-modal-slideout__close:not(:disabled):not(.disabled)>div:before{height:.789375rem;width:.130625rem;top:.625rem}}:host .nggv-modal-slideout__close:focus:not(:focus-visible){box-shadow:none;outline:0}:host .nggv-modal-slideout__close:focus,:host .nggv-modal-slideout__close:focus-visible i{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .nggv-modal-slideout__close>i{border-radius:var(--gds-sys-shape-corner-round);display:block;width:100%;height:100%}:host .nggv-modal-slideout__close>i:after,:host .nggv-modal-slideout__close>i:before{background:var(--gds-sys-color-font);content:\"\";display:block;height:.789375rem;width:.130625rem;border-radius:.5px;left:calc(50% - .0625rem);position:absolute;top:.625rem}:host .nggv-modal-slideout__close>i:after{transform:rotate(45deg)}:host .nggv-modal-slideout__close>i:before{transform:rotate(-45deg)}:host .nggv-modal-slideout__close>svg path{fill:var(--gds-sys-color-font)}@media (min-width: 48em){:host .nggv-modal-slideout__close:not(:disabled,.disabled):hover>i{background:color-mix(in srgb,var(--gds-sys-color-font) 10%,transparent)}:host .nggv-modal-slideout__close:not(:disabled,.disabled):hover:active>i{background:color-mix(in srgb,var(--gds-sys-color-font) 20%,transparent)}}:host .modal-dialog__actions button{background-color:transparent;border:0;cursor:pointer;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center;font-size:1rem;font-family:inherit}:host .modal-dialog__actions button:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions button:focus,:host .modal-dialog__actions button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host .modal-dialog__actions button{min-width:100%}}@media screen and (-ms-high-contrast: active){:host .modal-dialog__actions button{border:2px solid currentcolor}}:host .modal-dialog__actions button.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host .modal-dialog__actions button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .modal-dialog__actions .submit{transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;background:#007ac7;border-color:#007ac7;color:#fff;--color: #fff}:host .modal-dialog__actions .submit:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host .modal-dialog__actions .submit[aria-selected=true],:host .modal-dialog__actions .submit:active,:host .modal-dialog__actions .submit.active,:host .modal-dialog__actions .submit.active:hover,:host .modal-dialog__actions .submit:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .modal-dialog__actions .submit:focus-visible{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3!important}:host .modal-dialog__actions .submit:disabled,:host .modal-dialog__actions .submit.disabled,:host .modal-dialog__actions .submit[aria-disabled=true]{background:var(--form-control-primary-bg-disabled)!important;color:var(--text-primary-disabled-color)!important;border-color:var(--border-primary-disabled-color)!important;cursor:not-allowed}:host .modal-dialog__actions .submit:disabled::placeholder,:host .modal-dialog__actions .submit.disabled::placeholder,:host .modal-dialog__actions .submit[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .modal-dialog__actions .secondary{transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;background:transparent;border-color:#007ac7;color:#007ac7;--color: rgb(0, 122, 199)}:host .modal-dialog__actions .secondary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions .secondary:focus,:host .modal-dialog__actions .secondary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .modal-dialog__actions .secondary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host .modal-dialog__actions .secondary[aria-selected=true],:host .modal-dialog__actions .secondary:active,:host .modal-dialog__actions .secondary.active,:host .modal-dialog__actions .secondary.active:hover,:host .modal-dialog__actions .secondary:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .modal-dialog__actions .secondary:disabled,:host .modal-dialog__actions .secondary.disabled,:host .modal-dialog__actions .secondary[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .modal-dialog__actions .secondary:disabled::placeholder,:host .modal-dialog__actions .secondary.disabled::placeholder,:host .modal-dialog__actions .secondary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .modal-dialog__actions .danger{color:#bb000c;--color: rgb(187, 0, 12);border-color:transparent;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .modal-dialog__actions .danger:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#d81a1a;color:#fff;--background: rgb(216, 26, 26);--color: rgb(255, 255, 255);border-color:#d81a1a}:host .modal-dialog__actions .danger[aria-selected=true],:host .modal-dialog__actions .danger:active,:host .modal-dialog__actions .danger.active,:host .modal-dialog__actions .danger.active:hover,:host .modal-dialog__actions .danger:active:hover{background-color:#bb000c;color:#fff;--background: rgb(187, 0, 12);--color: rgb(255, 255, 255);border-color:#bb000c}:host .modal-dialog__actions .danger[aria-selected]:hover,:host .modal-dialog__actions .danger.active:hover,:host .modal-dialog__actions .danger:active:hover{opacity:.9}:host .modal-dialog__actions .danger:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions .danger:focus,:host .modal-dialog__actions .danger:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nggv-dialog', exportAs: 'dialog', template: "<div\n  class=\"modal-dialog__container\"\n  *transloco=\"let t\"\n  #dialog\n  role=\"dialog\"\n  aria-dialog=\"true\"\n  [attr.aria-labelledby]=\"dialogTitleId\"\n  [attr.aria-describedby]=\"dialogBodyId\"\n>\n  <header class=\"modal-dialog__heading\">\n    <h3 [attr.id]=\"dialogTitleId\">{{ t(heading || title || '') }}</h3>\n    <button\n      data-thook=\"dialog-close\"\n      (click)=\"onAction($event, 'close')\"\n      (keydown.enter)=\"onAction($event, 'close')\"\n      [attr.aria-label]=\"closeButtonAriaLabel\"\n      class=\"nggv-modal-slideout__close\"\n    >\n      <i></i>\n    </button>\n  </header>\n  <section class=\"modal-dialog__body\" [attr.id]=\"dialogBodyId\">\n    <div [innerHtml]=\"content\"></div>\n    <ng-content></ng-content>\n  </section>\n  <footer class=\"modal-dialog__actions\">\n    <button\n      class=\"danger\"\n      type=\"reset\"\n      [attr.data-thook]=\"'dialog-' + (_buttons?.negative || 'negative')\"\n      (click)=\"onAction($event, 'negative')\"\n      (keydown.enter)=\"onAction($event, 'negative')\"\n      *ngIf=\"_buttons && _buttons.negative\"\n    >\n      {{ t(_buttons.negative) }}\n    </button>\n    <button\n      class=\"secondary\"\n      type=\"button\"\n      [attr.data-thook]=\"'dialog-' + (_buttons?.neutral || 'neutral')\"\n      (click)=\"onAction($event, 'neutral')\"\n      (keydown.enter)=\"onAction($event, 'neutral')\"\n      *ngIf=\"_buttons && _buttons.neutral\"\n    >\n      {{ t(_buttons.neutral) }}\n    </button>\n    <button\n      class=\"submit\"\n      type=\"submit\"\n      [attr.data-thook]=\"'dialog-' + (_buttons?.positive || 'positive')\"\n      (click)=\"onAction($event, 'positive')\"\n      (keydown.enter)=\"onAction($event, 'positive')\"\n      *ngIf=\"_buttons && _buttons.positive\"\n    >\n      {{ t(_buttons.positive) }}\n    </button>\n  </footer>\n</div>\n\n<div class=\"nggv-backdrop\"></div>\n", styles: [":host{--grey-500: rgb(222, 222, 222);--background-hsl: 0deg, 0%, 0%;--gds-ref-pallet-base200: hsl(0, 0%, 91%);--gds-sys-color-base: hsl(0, 0%, 20%);--gds-sys-color-font: hsl(0, 0%, 20%);--gds-sys-shape-corner-round: 50%;--sg-border-color: hsl(0, 0%, 53%);--sg-border-radius: .25rem;--sg-border-width-50: .5px;--sg-border-width: 1px;--sg-hsl-contrast: 0deg, 0%, 0%;--sg-modal-backdrop-background: rgba(0, 0, 0, .5);--sg-modal-background: #fff;--sg-modal-box-shadow: 0 .125rem .375rem rgba(0, 0, 0, .15);--sg-z-index-modal-backdrop: 1040;--sg-z-index-modal: 1050;--text-primary-color: rgb(51, 51, 51);inset:0;position:fixed;display:grid;place-content:center;z-index:calc(var(--sg-z-index-modal-backdrop) + 1)}:host .modal-dialog__container{background:var(--sg-modal-background);display:flex;flex-direction:column;box-shadow:var(--sg-modal-box-shadow);position:absolute;width:100%;z-index:var(--sg-z-index-modal);position:initial;width:375px;max-width:95vw}:host .modal-dialog__container>.header,:host .modal-dialog__container>header{padding:1rem;border-bottom:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .modal-dialog__container>.header h3,:host .modal-dialog__container>.header .h3,:host .modal-dialog__container>header h3,:host .modal-dialog__container>header .h3{margin-bottom:0;margin-top:0}:host .modal-dialog__container>.header h3+.close,:host .modal-dialog__container>.header .h3+.close,:host .modal-dialog__container>header h3+.close,:host .modal-dialog__container>header .h3+.close{margin:-7px;min-width:2rem}:host .modal-dialog__container>.body{padding:1rem;overflow:auto;width:100%}:host .modal-dialog__container>.body p{margin-bottom:0;margin-top:0}:host .modal-dialog__container>.footer,:host .modal-dialog__container>footer{padding:1rem;width:100%}@media (min-width: 36em){:host .modal-dialog__container>.footer,:host .modal-dialog__container>footer{display:flex;justify-content:flex-end}}@media (max-width: 35.98em){:host .modal-dialog__container>.footer button+button,:host .modal-dialog__container>.footer button+.button,:host .modal-dialog__container>.footer .button+button,:host .modal-dialog__container>.footer .button+.button,:host .modal-dialog__container>footer button+button,:host .modal-dialog__container>footer button+.button,:host .modal-dialog__container>footer .button+button,:host .modal-dialog__container>footer .button+.button{margin-top:.75rem}}@media (min-width: 36em){:host .modal-dialog__container>.footer button+button,:host .modal-dialog__container>.footer button+.button,:host .modal-dialog__container>.footer .button+button,:host .modal-dialog__container>.footer .button+.button,:host .modal-dialog__container>footer button+button,:host .modal-dialog__container>footer button+.button,:host .modal-dialog__container>footer .button+button,:host .modal-dialog__container>footer .button+.button{margin-left:.75rem}}:host .modal-dialog__container.medium{width:512px}:host .modal-dialog__container.large{width:720px}:host .modal-dialog__heading{box-sizing:border-box;padding:1rem;border-bottom:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .modal-dialog__heading h3,:host .modal-dialog__heading .h3{margin-bottom:0;margin-top:0}:host .modal-dialog__heading h3+.close,:host .modal-dialog__heading .h3+.close{margin:-7px;min-width:2rem}:host .modal-dialog__body{padding:1rem;overflow:auto;width:100%}:host .modal-dialog__body p{margin-bottom:0;margin-top:0}:host .modal-dialog__actions,:host .modal-dialog__heading,:host .modal-dialog__body{box-sizing:border-box}:host .nggv-backdrop{background:var(--sg-modal-backdrop-background);inset:0;position:fixed;z-index:var(--sg-z-index-modal-backdrop);display:block;transition:opacity .5s cubic-bezier(.33,1,.68,1)}:host .nggv-backdrop--transparent{opacity:0}:host .nggv-backdrop--transparent.entered,:host .nggv-backdrop--transparent.is-entering{opacity:1}:host .nggv-backdrop--transparent.is-exiting{opacity:0}:host .nggv-modal-slideout__close{background-color:transparent;padding:0;font-size:0;background:var(--gds-sys-color-surface);border:0;border-radius:50%;content:\"\";cursor:pointer;display:flex;font-family:inherit;height:2rem;position:relative;width:2rem}@media (hover: none) and (pointer: coarse){:host .nggv-modal-slideout__close:not(:disabled):not(.disabled){padding:.375rem;height:2.75rem;width:2.75rem}:host .nggv-modal-slideout__close:not(:disabled):not(.disabled)>i{background:var(--gds-ref-pallet-base200);height:2rem;width:2rem;border-radius:50%;position:relative;--color: var(--gds-sys-color-base)}:host .nggv-modal-slideout__close:not(:disabled):not(.disabled)>div:after,:host .nggv-modal-slideout__close:not(:disabled):not(.disabled)>div:before{height:.789375rem;width:.130625rem;top:.625rem}}:host .nggv-modal-slideout__close:focus:not(:focus-visible){box-shadow:none;outline:0}:host .nggv-modal-slideout__close:focus,:host .nggv-modal-slideout__close:focus-visible i{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .nggv-modal-slideout__close>i{border-radius:var(--gds-sys-shape-corner-round);display:block;width:100%;height:100%}:host .nggv-modal-slideout__close>i:after,:host .nggv-modal-slideout__close>i:before{background:var(--gds-sys-color-font);content:\"\";display:block;height:.789375rem;width:.130625rem;border-radius:.5px;left:calc(50% - .0625rem);position:absolute;top:.625rem}:host .nggv-modal-slideout__close>i:after{transform:rotate(45deg)}:host .nggv-modal-slideout__close>i:before{transform:rotate(-45deg)}:host .nggv-modal-slideout__close>svg path{fill:var(--gds-sys-color-font)}@media (min-width: 48em){:host .nggv-modal-slideout__close:not(:disabled,.disabled):hover>i{background:color-mix(in srgb,var(--gds-sys-color-font) 10%,transparent)}:host .nggv-modal-slideout__close:not(:disabled,.disabled):hover:active>i{background:color-mix(in srgb,var(--gds-sys-color-font) 20%,transparent)}}:host .modal-dialog__actions button{background-color:transparent;border:0;cursor:pointer;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center;font-size:1rem;font-family:inherit}:host .modal-dialog__actions button:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions button:focus,:host .modal-dialog__actions button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host .modal-dialog__actions button{min-width:100%}}@media screen and (-ms-high-contrast: active){:host .modal-dialog__actions button{border:2px solid currentcolor}}:host .modal-dialog__actions button.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host .modal-dialog__actions button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .modal-dialog__actions .submit{transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;background:#007ac7;border-color:#007ac7;color:#fff;--color: #fff}:host .modal-dialog__actions .submit:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host .modal-dialog__actions .submit[aria-selected=true],:host .modal-dialog__actions .submit:active,:host .modal-dialog__actions .submit.active,:host .modal-dialog__actions .submit.active:hover,:host .modal-dialog__actions .submit:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .modal-dialog__actions .submit:focus-visible{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3!important}:host .modal-dialog__actions .submit:disabled,:host .modal-dialog__actions .submit.disabled,:host .modal-dialog__actions .submit[aria-disabled=true]{background:var(--form-control-primary-bg-disabled)!important;color:var(--text-primary-disabled-color)!important;border-color:var(--border-primary-disabled-color)!important;cursor:not-allowed}:host .modal-dialog__actions .submit:disabled::placeholder,:host .modal-dialog__actions .submit.disabled::placeholder,:host .modal-dialog__actions .submit[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .modal-dialog__actions .secondary{transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;background:transparent;border-color:#007ac7;color:#007ac7;--color: rgb(0, 122, 199)}:host .modal-dialog__actions .secondary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions .secondary:focus,:host .modal-dialog__actions .secondary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .modal-dialog__actions .secondary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host .modal-dialog__actions .secondary[aria-selected=true],:host .modal-dialog__actions .secondary:active,:host .modal-dialog__actions .secondary.active,:host .modal-dialog__actions .secondary.active:hover,:host .modal-dialog__actions .secondary:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .modal-dialog__actions .secondary:disabled,:host .modal-dialog__actions .secondary.disabled,:host .modal-dialog__actions .secondary[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .modal-dialog__actions .secondary:disabled::placeholder,:host .modal-dialog__actions .secondary.disabled::placeholder,:host .modal-dialog__actions .secondary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .modal-dialog__actions .danger{color:#bb000c;--color: rgb(187, 0, 12);border-color:transparent;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .modal-dialog__actions .danger:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#d81a1a;color:#fff;--background: rgb(216, 26, 26);--color: rgb(255, 255, 255);border-color:#d81a1a}:host .modal-dialog__actions .danger[aria-selected=true],:host .modal-dialog__actions .danger:active,:host .modal-dialog__actions .danger.active,:host .modal-dialog__actions .danger.active:hover,:host .modal-dialog__actions .danger:active:hover{background-color:#bb000c;color:#fff;--background: rgb(187, 0, 12);--color: rgb(255, 255, 255);border-color:#bb000c}:host .modal-dialog__actions .danger[aria-selected]:hover,:host .modal-dialog__actions .danger.active:hover,:host .modal-dialog__actions .danger:active:hover{opacity:.9}:host .modal-dialog__actions .danger:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions .danger:focus,:host .modal-dialog__actions .danger:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { dialogRef: [{
+                type: ViewChild,
+                args: ['dialog']
+            }], thook: [{
+                type: HostBinding,
+                args: ['attr.data-thook']
+            }, {
+                type: Input
+            }], baseClass: [{
+                type: HostBinding,
+                args: ['class.gds-modal-dialog']
+            }], _shown: [{
+                type: HostBinding,
+                args: ['class.-active']
+            }], shown: [{
+                type: Input
+            }], ariaHidden: [{
+                type: HostBinding,
+                args: ['attr.aria-hidden']
+            }], initiallyShown: [{
+                type: Input
+            }], heading: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], content: [{
+                type: Input
+            }], autoClose: [{
+                type: Input
+            }], payload: [{
+                type: Input
+            }], dialogTitleId: [{
+                type: Input
+            }], dialogBodyId: [{
+                type: Input
+            }], closeModalOnEscape: [{
+                type: Input
+            }], closeButtonAriaLabel: [{
+                type: Input
+            }], buttons: [{
+                type: Input
+            }], nggvCloseEvent: [{
+                type: Output
+            }], nggvPositiveEvent: [{
+                type: Output
+            }], nggvNeutralEvent: [{
+                type: Output
+            }], nggvNegativeEvent: [{
+                type: Output
+            }], close: [{
+                type: HostListener,
+                args: ['click', ['$event', '"host"']]
+            }, {
+                type: HostListener,
+                args: ['document:keydown.escape', ['$event']]
+            }], focusTrap: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+var KeyboardKey;
+(function (KeyboardKey) {
+    KeyboardKey["Escape"] = "Escape";
+    KeyboardKey["Space"] = "Space";
+    KeyboardKey["Enter"] = "Enter";
+    KeyboardKey["ArrowUp"] = "ArrowUp";
+    KeyboardKey["ArrowDown"] = "ArrowDown";
+})(KeyboardKey || (KeyboardKey = {}));
+
+class NggvFoldOutComponent {
+    constructor() {
+        /** Special property used for selecting DOM elements during automated UI testing. */
+        this.thook = 'fold-out';
+        /** @internal */
+        this.shown = false;
+        this.activeIndex = -1;
+        this.firstArrowClick = true;
+        this.ariaFocusAttributeName = 'aria-focus';
+        this.blurAllElements = () => this.children.forEach(this.blurElement);
+        this.blurElement = (element) => element.setAttribute(this.ariaFocusAttributeName, 'false');
+        this.focusElement = (element) => element.setAttribute(this.ariaFocusAttributeName, 'true');
+        this.getChildIndex = (element) => element ? this.children.indexOf(element) : -1;
+    }
+    get children() {
+        return Array.from((this.container?.nativeElement).children ?? []);
+    }
+    get lastChild() {
+        return this.children[this.children.length - 1] || undefined;
+    }
+    get focusedElement() {
+        return this.children[this.activeIndex] || undefined;
+    }
+    ngAfterViewInit() {
+        this.blurAllElements();
+    }
+    ngOnDestroy() {
+        this.onClickSubscription?.unsubscribe();
+        this.onKeyUpSubscription?.unsubscribe();
+    }
+    /** Toggle display of the option list */
+    toggleVisibility() {
+        this.setVisibility(!this.shown);
+    }
+    setVisibility(setVisibility = true) {
+        if (this.shown === setVisibility) {
+            return;
+        }
+        this.resetChildren();
+        this.shown = setVisibility;
+        if (this.shown) {
+            this.subscribeToOutsideClickEvent();
+            this.subscribeToKeyDownEvent();
+        }
+        else {
+            this.onClickSubscription?.unsubscribe();
+            this.onKeyUpSubscription?.unsubscribe();
+        }
+    }
+    /**
+     * Closes the fold-out on click outside.
+     */
+    subscribeToOutsideClickEvent() {
+        this.onClickSubscription = fromEvent(document, 'click')
+            .pipe(takeWhile(() => this.shown))
+            .subscribe({
+            next: (event) => {
+                if (this.shown &&
+                    !this.inputRef?.nativeElement.contains(event.target)) {
+                    this.setVisibility(false);
+                }
+            },
+        });
+    }
+    subscribeToKeyDownEvent() {
+        if (!this.children.length) {
+            return;
+        }
+        this.onKeyUpSubscription = fromEvent(document, 'keydown')
+            .pipe(takeWhile(() => this.shown), filter((event) => Object.values(KeyboardKey).includes(event.code)))
+            .subscribe((event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.onKeyDown(event);
+        });
+    }
+    onKeyDown(event) {
+        switch (event.code) {
+            case KeyboardKey.Escape:
+                this.setVisibility(false);
+                break;
+            case KeyboardKey.Enter:
+            case KeyboardKey.Space:
+                this.takeAction();
+                break;
+            case KeyboardKey.ArrowUp:
+                this.handleArrowUpClick();
+                break;
+            case KeyboardKey.ArrowDown:
+                this.handleArrowDownClick();
+                break;
+        }
+    }
+    handleArrowUpClick() {
+        this.activeIndex = this.firstArrowClick
+            ? this.getChildIndex(this.lastChild)
+            : this.activeIndex === 0
+                ? this.getChildIndex(this.lastChild)
+                : this.activeIndex - 1;
+        this.firstArrowClick = false;
+        this.handleFocus();
+    }
+    handleArrowDownClick() {
+        this.activeIndex = this.firstArrowClick
+            ? 0
+            : (this.activeIndex + 1) % this.children.length;
+        this.firstArrowClick = false;
+        this.handleFocus();
+    }
+    handleFocus() {
+        this.blurAllElements();
+        this.focusElement(this.children[this.activeIndex]);
+    }
+    takeAction() {
+        if (this.focusedElement) {
+            this.focusedElement.click();
+        }
+        this.setVisibility(false);
+    }
+    resetChildren() {
+        this.blurAllElements();
+        this.activeIndex = -1;
+        this.firstArrowClick = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvFoldOutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvFoldOutComponent, selector: "nggv-fold-out", inputs: { thook: "thook", alignOptions: "alignOptions", text: "text", ariaLabel: "ariaLabel" }, host: { properties: { "attr.data-thook": "this.thook" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["foldout"], descendants: true, read: ElementRef }, { propertyName: "container", first: true, predicate: ["childrenContainer"], descendants: true }], ngImport: i0, template: "<div #foldout>\n  <button\n    data-thook=\"fold-out-toggle\"\n    class=\"fold-out-button\"\n    [ngClass]=\"{ 'no-text': !text }\"\n    (click)=\"toggleVisibility()\"\n    [attr.aria-expanded]=\"shown\"\n    [attr.aria-label]=\"ariaLabel\"\n  >\n    <ng-container *ngTemplateOutlet=\"text ? withText : default\"> </ng-container>\n  </button>\n\n  <div\n    #childrenContainer\n    class=\"nggv-fold-out__popover\"\n    [ngClass]=\"{ 'flex-right': alignOptions === 'right' }\"\n    [class.nggv-fold-out__popover-expanded]=\"shown\"\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n\n<ng-template #withText>\n  {{ text }}\n  <gds-icon-dot-grid-one-horizontal\n    width=\"24\"\n    height=\"24\"\n    *nggCoreElement\n  ></gds-icon-dot-grid-one-horizontal>\n</ng-template>\n\n<ng-template #default>\n  <gds-icon-dot-grid-one-horizontal\n    width=\"24\"\n    height=\"24\"\n    *nggCoreElement\n  ></gds-icon-dot-grid-one-horizontal>\n  <ng-template></ng-template\n></ng-template>\n", styles: ["i.sg-icon{font-size:0;width:1rem;height:1rem;display:inline-block}i.sg-icon:before{content:\"\";display:inline-block;background:var(--color);width:100%;height:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}i.sg-icon.sg-icon-calendar:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E\")}i.sg-icon.sg-icon-calendar-range:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E\")}i.sg-icon.sg-icon-ellipsis:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E\")}i.sg-icon.sg-icon-grip-vertical:before{-webkit-mask-image:url(\"data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E\")}i.sg-icon.sg-icon-next:before{background:none;border-bottom:2px solid;border-left:2px solid;content:\"\";display:block;height:12px;margin-left:-10px;margin-top:2px;transform:translate(75%) rotate(-135deg) scaleZ(-1);transition:transform .3s ease-in;width:12px}i.sg-icon.sg-icon-previous:before{background:none;border-bottom:2px solid;border-left:2px solid;content:\"\";display:block;height:12px;margin-left:-4px;margin-top:2px;transform:translate(75%) rotate(45deg) scaleZ(-1);transition:transform .3s ease-in;width:12px}i.sg-icon.sg-icon-ellipsis:before{margin-right:-2px}:host{--grey-400: rgb(233, 233, 233);--grey-500: rgb(222, 222, 222);--sg-z-index-popover: 999;--sg-card-background: #fff;--sg-card-border: 1px solid #e9e9e9;--sg-card-border-radius: 4px;--sg-border-radius: 4px;--sg-card-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, .1019607843);--gds-ref-pallet-base800: #333}:host .flex-right{right:0}:host .fold-out-button{border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;display:inline-flex;justify-content:center;background-color:transparent;border:.0625rem solid transparent;padding:.625rem;height:2.75rem;width:2.75rem;min-width:auto;--color: var(--gds-ref-pallet-base800);border-color:transparent;color:var(--gds-ref-pallet-base800);display:flex;align-items:center;gap:.5rem;line-height:.75;padding-inline:.4375rem;width:auto}:host .fold-out-button:focus:not(:focus-visible){box-shadow:none;outline:0}:host .fold-out-button:focus,:host .fold-out-button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host .fold-out-button{min-width:100%}}@media screen and (-ms-high-contrast: active){:host .fold-out-button{border:2px solid currentcolor}}:host .fold-out-button.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host .fold-out-button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}.form-group :host .fold-out-button{margin-top:-.625rem}:host .fold-out-button.small{height:2rem;width:2rem;padding:.4375rem;line-height:1.125rem}:host .fold-out-button svg{height:1rem;width:1rem}:host .fold-out-button path,:host .fold-out-button line,:host .fold-out-button circle,:host .fold-out-button rect,:host .fold-out-button ellipse,:host .fold-out-button polyline,:host .fold-out-button text{fill:var(--gds-ref-pallet-base800);stroke:var(--gds-ref-pallet-base800);transition:all .3s cubic-bezier(.23,1,.32,1)}:host .fold-out-button:hover,:host .fold-out-button.highlighted{background-color:#0000001a;border-color:transparent}:host .fold-out-button:active,:host .fold-out-button.highlighted:hover{background-color:#0003;border-color:transparent}@media (max-width: 35.98em){:host .fold-out-button{min-width:initial}}:host .nggv-fold-out__popover{background-clip:border-box;background:var(--sg-card-background);border:var(--sg-card-border);border-radius:var(--sg-card-border-radius);box-shadow:var(--sg-card-box-shadow);color:var(--sg-card-color);display:flex;flex-direction:column;padding:1rem;width:fit-content;display:none;padding:0}:host .nggv-fold-out__popover>header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem;margin-block-end:1rem}:host .nggv-fold-out__popover>header .close{margin:-.5rem -.5rem -.5rem .5rem}:host .nggv-fold-out__popover>*:not(header,footer){flex:1 1 auto}:host .nggv-fold-out__popover>footer{margin-top:.75rem}@media (min-width: 36em){:host .nggv-fold-out__popover>footer{display:flex;justify-content:flex-end}}@media (max-width: 35.98em){:host .nggv-fold-out__popover>footer button:not(.link)+button,:host .nggv-fold-out__popover>footer button:not(.link)+.button,:host .nggv-fold-out__popover>footer .button:not(.link)+button,:host .nggv-fold-out__popover>footer .button:not(.link)+.button{margin-top:.75rem}}@media (min-width: 36em){:host .nggv-fold-out__popover>footer button:not(.link)+button,:host .nggv-fold-out__popover>footer button:not(.link)+.button,:host .nggv-fold-out__popover>footer .button:not(.link)+button,:host .nggv-fold-out__popover>footer .button:not(.link)+.button{margin-left:.75rem}}:host .nggv-fold-out__popover-expanded{display:block;position:absolute;z-index:var(--sg-z-index-popover)}:host ::ng-deep .nggv-field-dropdown__options__label{padding:.75rem 1rem;line-height:1.25;cursor:pointer;display:flex;gap:.75rem;-webkit-user-select:none;user-select:none}:host ::ng-deep .nggv-field-dropdown__options__label:hover,:host ::ng-deep .nggv-field-dropdown__options__label:focus-visible{background-color:var(--grey-400)}:host ::ng-deep .nggv-field-dropdown__options__label:active{background-color:var(--grey-400)}:host ::ng-deep .nggv-field-dropdown__options__label:focus{outline-color:#000;outline-offset:-.25rem}:host ::ng-deep .nggv-field-dropdown__options__label.active.sg-highlighted,:host ::ng-deep .nggv-field-dropdown__options__label[aria-selected=true]{background:var(--grey-1000);color:#fff}:host ::ng-deep .nggv-field-dropdown__options__label.delete-option{color:#bb000c}:host ::ng-deep .nggv-field-dropdown__options__label:hover,:host ::ng-deep .nggv-field-dropdown__options__label:focus-visible,:host ::ng-deep .nggv-field-dropdown__options__label[aria-focus=true]{background-color:var(--grey-400)}:host ::ng-deep .nggv-field-dropdown__options__label.delete-option:hover,:host ::ng-deep .nggv-field-dropdown__options__label.delete-option:focus-visible,:host ::ng-deep .nggv-field-dropdown__options__label.delete-option[aria-focus=true]{background-color:#d81a1a;color:#fff}:host ::ng-deep .nggv-field-dropdown__options__label:active{background-color:var(--grey-500)}:host ::ng-deep .nggv-field-dropdown__options__label.delete-option:active{background-color:#bb000c;color:#fff}:host ::ng-deep .nggv-field-dropdown__options__label:focus-visible{outline-color:#000;outline-offset:-.25rem}:host ::ng-deep .nggv-field-dropdown__options__label[aria-hidden=true]{display:none}:host ::ng-deep .nggv-field-dropdown__options__label[highlighted]{background:var(--grey-1000);color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NggCoreElementDirective, selector: "[nggCoreElement]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvFoldOutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nggv-fold-out', template: "<div #foldout>\n  <button\n    data-thook=\"fold-out-toggle\"\n    class=\"fold-out-button\"\n    [ngClass]=\"{ 'no-text': !text }\"\n    (click)=\"toggleVisibility()\"\n    [attr.aria-expanded]=\"shown\"\n    [attr.aria-label]=\"ariaLabel\"\n  >\n    <ng-container *ngTemplateOutlet=\"text ? withText : default\"> </ng-container>\n  </button>\n\n  <div\n    #childrenContainer\n    class=\"nggv-fold-out__popover\"\n    [ngClass]=\"{ 'flex-right': alignOptions === 'right' }\"\n    [class.nggv-fold-out__popover-expanded]=\"shown\"\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n\n<ng-template #withText>\n  {{ text }}\n  <gds-icon-dot-grid-one-horizontal\n    width=\"24\"\n    height=\"24\"\n    *nggCoreElement\n  ></gds-icon-dot-grid-one-horizontal>\n</ng-template>\n\n<ng-template #default>\n  <gds-icon-dot-grid-one-horizontal\n    width=\"24\"\n    height=\"24\"\n    *nggCoreElement\n  ></gds-icon-dot-grid-one-horizontal>\n  <ng-template></ng-template\n></ng-template>\n", styles: ["i.sg-icon{font-size:0;width:1rem;height:1rem;display:inline-block}i.sg-icon:before{content:\"\";display:inline-block;background:var(--color);width:100%;height:100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}i.sg-icon.sg-icon-calendar:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E\")}i.sg-icon.sg-icon-calendar-range:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E\")}i.sg-icon.sg-icon-ellipsis:before{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E\")}i.sg-icon.sg-icon-grip-vertical:before{-webkit-mask-image:url(\"data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E\")}i.sg-icon.sg-icon-next:before{background:none;border-bottom:2px solid;border-left:2px solid;content:\"\";display:block;height:12px;margin-left:-10px;margin-top:2px;transform:translate(75%) rotate(-135deg) scaleZ(-1);transition:transform .3s ease-in;width:12px}i.sg-icon.sg-icon-previous:before{background:none;border-bottom:2px solid;border-left:2px solid;content:\"\";display:block;height:12px;margin-left:-4px;margin-top:2px;transform:translate(75%) rotate(45deg) scaleZ(-1);transition:transform .3s ease-in;width:12px}i.sg-icon.sg-icon-ellipsis:before{margin-right:-2px}:host{--grey-400: rgb(233, 233, 233);--grey-500: rgb(222, 222, 222);--sg-z-index-popover: 999;--sg-card-background: #fff;--sg-card-border: 1px solid #e9e9e9;--sg-card-border-radius: 4px;--sg-border-radius: 4px;--sg-card-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, .1019607843);--gds-ref-pallet-base800: #333}:host .flex-right{right:0}:host .fold-out-button{border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;display:inline-flex;justify-content:center;background-color:transparent;border:.0625rem solid transparent;padding:.625rem;height:2.75rem;width:2.75rem;min-width:auto;--color: var(--gds-ref-pallet-base800);border-color:transparent;color:var(--gds-ref-pallet-base800);display:flex;align-items:center;gap:.5rem;line-height:.75;padding-inline:.4375rem;width:auto}:host .fold-out-button:focus:not(:focus-visible){box-shadow:none;outline:0}:host .fold-out-button:focus,:host .fold-out-button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host .fold-out-button{min-width:100%}}@media screen and (-ms-high-contrast: active){:host .fold-out-button{border:2px solid currentcolor}}:host .fold-out-button.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host .fold-out-button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}.form-group :host .fold-out-button{margin-top:-.625rem}:host .fold-out-button.small{height:2rem;width:2rem;padding:.4375rem;line-height:1.125rem}:host .fold-out-button svg{height:1rem;width:1rem}:host .fold-out-button path,:host .fold-out-button line,:host .fold-out-button circle,:host .fold-out-button rect,:host .fold-out-button ellipse,:host .fold-out-button polyline,:host .fold-out-button text{fill:var(--gds-ref-pallet-base800);stroke:var(--gds-ref-pallet-base800);transition:all .3s cubic-bezier(.23,1,.32,1)}:host .fold-out-button:hover,:host .fold-out-button.highlighted{background-color:#0000001a;border-color:transparent}:host .fold-out-button:active,:host .fold-out-button.highlighted:hover{background-color:#0003;border-color:transparent}@media (max-width: 35.98em){:host .fold-out-button{min-width:initial}}:host .nggv-fold-out__popover{background-clip:border-box;background:var(--sg-card-background);border:var(--sg-card-border);border-radius:var(--sg-card-border-radius);box-shadow:var(--sg-card-box-shadow);color:var(--sg-card-color);display:flex;flex-direction:column;padding:1rem;width:fit-content;display:none;padding:0}:host .nggv-fold-out__popover>header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem;margin-block-end:1rem}:host .nggv-fold-out__popover>header .close{margin:-.5rem -.5rem -.5rem .5rem}:host .nggv-fold-out__popover>*:not(header,footer){flex:1 1 auto}:host .nggv-fold-out__popover>footer{margin-top:.75rem}@media (min-width: 36em){:host .nggv-fold-out__popover>footer{display:flex;justify-content:flex-end}}@media (max-width: 35.98em){:host .nggv-fold-out__popover>footer button:not(.link)+button,:host .nggv-fold-out__popover>footer button:not(.link)+.button,:host .nggv-fold-out__popover>footer .button:not(.link)+button,:host .nggv-fold-out__popover>footer .button:not(.link)+.button{margin-top:.75rem}}@media (min-width: 36em){:host .nggv-fold-out__popover>footer button:not(.link)+button,:host .nggv-fold-out__popover>footer button:not(.link)+.button,:host .nggv-fold-out__popover>footer .button:not(.link)+button,:host .nggv-fold-out__popover>footer .button:not(.link)+.button{margin-left:.75rem}}:host .nggv-fold-out__popover-expanded{display:block;position:absolute;z-index:var(--sg-z-index-popover)}:host ::ng-deep .nggv-field-dropdown__options__label{padding:.75rem 1rem;line-height:1.25;cursor:pointer;display:flex;gap:.75rem;-webkit-user-select:none;user-select:none}:host ::ng-deep .nggv-field-dropdown__options__label:hover,:host ::ng-deep .nggv-field-dropdown__options__label:focus-visible{background-color:var(--grey-400)}:host ::ng-deep .nggv-field-dropdown__options__label:active{background-color:var(--grey-400)}:host ::ng-deep .nggv-field-dropdown__options__label:focus{outline-color:#000;outline-offset:-.25rem}:host ::ng-deep .nggv-field-dropdown__options__label.active.sg-highlighted,:host ::ng-deep .nggv-field-dropdown__options__label[aria-selected=true]{background:var(--grey-1000);color:#fff}:host ::ng-deep .nggv-field-dropdown__options__label.delete-option{color:#bb000c}:host ::ng-deep .nggv-field-dropdown__options__label:hover,:host ::ng-deep .nggv-field-dropdown__options__label:focus-visible,:host ::ng-deep .nggv-field-dropdown__options__label[aria-focus=true]{background-color:var(--grey-400)}:host ::ng-deep .nggv-field-dropdown__options__label.delete-option:hover,:host ::ng-deep .nggv-field-dropdown__options__label.delete-option:focus-visible,:host ::ng-deep .nggv-field-dropdown__options__label.delete-option[aria-focus=true]{background-color:#d81a1a;color:#fff}:host ::ng-deep .nggv-field-dropdown__options__label:active{background-color:var(--grey-500)}:host ::ng-deep .nggv-field-dropdown__options__label.delete-option:active{background-color:#bb000c;color:#fff}:host ::ng-deep .nggv-field-dropdown__options__label:focus-visible{outline-color:#000;outline-offset:-.25rem}:host ::ng-deep .nggv-field-dropdown__options__label[aria-hidden=true]{display:none}:host ::ng-deep .nggv-field-dropdown__options__label[highlighted]{background:var(--grey-1000);color:#fff}\n"] }]
+        }], propDecorators: { thook: [{
+                type: HostBinding,
+                args: ['attr.data-thook']
+            }, {
+                type: Input
+            }], inputRef: [{
+                type: ViewChild,
+                args: ['foldout', { read: ElementRef }]
+            }], container: [{
+                type: ViewChild,
+                args: ['childrenContainer']
+            }], alignOptions: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }] } });
+
+class NggvFoldOutOptionDirective {
+    constructor() {
+        this.baseClass = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvFoldOutOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: NggvFoldOutOptionDirective, selector: "[nggvOption]", host: { properties: { "class.nggv-field-dropdown__options__label": "this.baseClass" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvFoldOutOptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nggvOption]',
+                }]
+        }], propDecorators: { baseClass: [{
+                type: HostBinding,
+                args: ['class.nggv-field-dropdown__options__label']
+            }] } });
+
+/** Modal slide-out component based on vanilla pattern library design.
+ * The modal title can be set using the @Input heading, and will automatically be translated if
+ * the string matches a cms key.
+ * Content can be injected into the body of the slide-out by either setting the @Input content to any type of
+ * markdown, or using content projection (adding content between the `nggv-slideout-modal`-start and end tag).
+ * If the content needs to stretch outside the normal padded area, add the attribute `slot="outside-content"` to the
+ * projected content main element.
+ * Test hooks:
+ * The modal hook defaults to 'slideout' but is customizeable.
+ * The closing button can be selected using 'slideout-close'.
+ * The backdrop is selectable using 'slideout-backdrop'.
+ */
+class NggvSlideOutComponent {
+    set shown(value) {
+        this._shown = value;
+        if (value) {
+            this.hideOverflow();
+        }
+        else {
+            this.resetOverflow();
+        }
+    }
+    get shown() {
+        return this._shown;
+    }
+    /** @internal */
+    get fromLeft() {
+        return this.side === 'left';
+    }
+    /** Buttons are defined as a key-value pair where key is one of "positive|neutral|negative" and value is the button label. */
+    set buttons(buttons) {
+        this._buttons = buttons;
+    }
+    constructor(host, renderer) {
+        this.host = host;
+        this.renderer = renderer;
+        /** Sets from which side the modal should open. */
+        this.side = 'right';
+        /** Defines the default visibility state of the slide-out. */
+        this._shown = false;
+        /** Defines the default visibility state of the modal. */
+        this.initiallyShown = false;
+        /** Sets whether it is possible to close the modal from the top right corner. */
+        this.closable = true;
+        /** Allows the modal content to decide the width of the modal. */
+        this.autoWidth = false;
+        /** Special property used for selecting DOM elements during automated UI testing. */
+        this.thook = 'slideout';
+        /** Will emit true on closing event. */
+        this.nggvCloseEvent = new EventEmitter();
+        this.nggvPositiveEvent = new EventEmitter();
+        this.nggvNeutralEvent = new EventEmitter();
+        this.nggvNegativeEvent = new EventEmitter();
+        // appends methods for opening and closing modal to native element
+        this.host.nativeElement.open = this.open.bind(this);
+        this.host.nativeElement.close = this.close.bind(this);
+    }
+    ngOnInit() {
+        this._shown = this.initiallyShown;
+        if (this.shown)
+            this.limitFocusable();
+    }
+    onAction(event, action) {
+        event.preventDefault();
+        switch (action) {
+            case 'positive':
+                this.nggvPositiveEvent.emit();
+                break;
+            case 'neutral':
+                this.nggvNeutralEvent.emit();
+                break;
+            case 'negative':
+                this.nggvNegativeEvent.emit();
+                break;
+        }
+        this.close(event, 'action');
+    }
+    /**
+     * Called on a modal element. Opens the modal and sets focus to the last focusable element in the modal.
+     *
+     * @param opener - reference to last focused element before opening modal
+     * @returns - true
+     */
+    open(opener) {
+        this._shown = true;
+        this.previous = opener || document.activeElement;
+        this.hideOverflow();
+        this.limitFocusable();
+        return true;
+    }
+    /**
+     * Called on a modal element. Closes the modal and emits a `nggvCloseEvent`. Sets focus to the lats focused element if an element was sent in to open function.
+     *
+     * @param event
+     * @param initiator
+     */
+    close(event, initiator) {
+        if (initiator === 'host' &&
+            event instanceof MouseEvent &&
+            event.target !== event.currentTarget)
+            return;
+        this.resetOverflow();
+        if (this.shown && this.closable) {
+            this.nggvCloseEvent.emit(this.shown);
+            this.shown = false;
+            window.setTimeout(() => {
+                if (this.previous)
+                    this.previous.focus();
+                this.previous = undefined;
+            });
+        }
+    }
+    /** @internal */
+    focusTrap(event) {
+        if (event.key !== 'Tab')
+            return;
+        if (event.shiftKey) {
+            // shift + tab
+            if (this.lastFocusable &&
+                document.activeElement === this.firstFocusable) {
+                this.lastFocusable.focus();
+                event.preventDefault();
+            }
+        }
+        else {
+            // tab
+            if (this.firstFocusable &&
+                document.activeElement === this.lastFocusable) {
+                this.firstFocusable.focus();
+                event.preventDefault();
+            }
+        }
+    }
+    limitFocusable() {
+        window.setTimeout(() => {
+            if (!this.slideOutRef)
+                return;
+            const focusable = this.slideOutRef.nativeElement.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+            this.firstFocusable = focusable[0];
+            this.lastFocusable = focusable[focusable.length - 1];
+            if (this.lastFocusable)
+                this.lastFocusable.focus();
+        });
+    }
+    hideOverflow() {
+        this.renderer.setStyle(document.body, 'overflow', 'hidden');
+    }
+    resetOverflow() {
+        this.renderer.removeStyle(document.body, 'overflow');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvSlideOutComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvSlideOutComponent, selector: "nggv-slideout-modal", inputs: { side: "side", shown: "shown", initiallyShown: "initiallyShown", heading: "heading", title: "title", content: "content", closable: "closable", autoWidth: "autoWidth", thook: "thook", closeButtonAriaLabel: "closeButtonAriaLabel", buttons: "buttons" }, outputs: { nggvCloseEvent: "nggvCloseEvent", nggvPositiveEvent: "nggvPositiveEvent", nggvNeutralEvent: "nggvNeutralEvent", nggvNegativeEvent: "nggvNegativeEvent" }, host: { listeners: { "click": "close($event,\"host\")", "document:keydown.escape": "close($event)", "keydown": "focusTrap($event)" } }, viewQueries: [{ propertyName: "slideOutRef", first: true, predicate: ["slideOut"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"shown\">\n  <div\n    [ngClass]=\"{\n      'gds-slide-out--left': fromLeft,\n      'gds-slide-out--right': !fromLeft,\n    }\"\n    *transloco=\"let t\"\n    [class.-active]=\"shown\"\n    [attr.data-thook]=\"thook\"\n    [attr.aria-hidden]=\"!shown\"\n    [@modalAnimation]\n  >\n    <div\n      #slideOut\n      class=\"gds-slide-out\"\n      [class.auto-width]=\"autoWidth\"\n      [class.entered]=\"shown\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"gds-modal-title\"\n      aria-describedby=\"gds-modal-body\"\n    >\n      <header class=\"gds-slide-out__header\">\n        <h3 id=\"gds-modal-title\">\n          {{ heading || title || '' }}\n        </h3>\n        <button\n          data-testid=\"modal-close-button\"\n          class=\"nggv-modal-slideout__close\"\n          (click)=\"this.close()\"\n          [attr.aria-label]=\"closeButtonAriaLabel\"\n        >\n          <i></i>\n        </button>\n      </header>\n\n      <section id=\"modal-body\">\n        <div class=\"gds-slide-out__content hide-if-empty\">\n          <div *ngIf=\"content\" [innerHtml]=\"content\"></div>\n          <ng-content></ng-content>\n        </div>\n        <ng-content select=\"[slot='outside-content']\"></ng-content>\n      </section>\n\n      <footer class=\"modal-dialog__actions\">\n        <button\n          class=\"danger\"\n          type=\"reset\"\n          [attr.data-thook]=\"'dialog-' + (_buttons?.negative || 'negative')\"\n          (click)=\"onAction($event, 'negative')\"\n          (keydown.enter)=\"onAction($event, 'negative')\"\n          *ngIf=\"_buttons && _buttons.negative\"\n        >\n          {{ t(_buttons.negative) }}\n        </button>\n\n        <button\n          class=\"secondary\"\n          type=\"button\"\n          [attr.data-thook]=\"'dialog-' + (_buttons?.neutral || 'neutral')\"\n          (click)=\"onAction($event, 'neutral')\"\n          (keydown.enter)=\"onAction($event, 'neutral')\"\n          *ngIf=\"_buttons && _buttons.neutral\"\n        >\n          {{ t(_buttons.neutral) }}\n        </button>\n\n        <button\n          class=\"primary\"\n          type=\"submit\"\n          [attr.data-thook]=\"'dialog-' + (_buttons?.positive || 'positive')\"\n          (click)=\"onAction($event, 'positive')\"\n          (keydown.enter)=\"onAction($event, 'positive')\"\n          *ngIf=\"_buttons && _buttons.positive\"\n        >\n          {{ t(_buttons.positive) }}\n        </button>\n      </footer>\n    </div>\n\n    <div\n      class=\"nggv-backdrop\"\n      data-thook=\"slideout-backdrop\"\n      (click)=\"close()\"\n    ></div>\n  </div>\n</ng-container>\n", styles: [":host{--background-hsl: 0deg, 0%, 0%;--gds-ref-pallet-base200: hsl(0, 0%, 91%);--gds-sys-color-base: hsl(0, 0%, 20%);--gds-sys-color-font: hsl(0, 0%, 20%);--gds-sys-shape-corner-round: 50%;--grey-500: rgb(222, 222, 222);--sg-border-color: hsl(0, 0%, 53%);--sg-border-radius: .25rem;--sg-border-width: 1px;--sg-hsl-contrast: 0deg, 0%, 0%;--sg-modal-backdrop-background: rgba(0, 0, 0, .5);--sg-modal-background: #fff;--sg-modal-box-shadow: 0 .125rem .375rem rgba(0, 0, 0, .15);--sg-z-index-modal-backdrop: 1040;--sg-z-index-modal: 1050;--text-primary-color: rgb(51, 51, 51)}:host .gds-slide-out{background:var(--sg-modal-background);display:flex;flex-direction:column;box-shadow:var(--sg-modal-box-shadow);position:absolute;width:100%;z-index:var(--sg-z-index-modal);position:fixed;height:100dvh;max-width:512px;min-height:-webkit-fill-available;min-height:-moz-available;min-height:stretch;right:0;top:0;transition:transform .35s cubic-bezier(.33,1,.68,1);transform:translate(100%);z-index:1050}:host .gds-slide-out>.header,:host .gds-slide-out>header{padding:1rem;border-bottom:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .gds-slide-out>.header h3,:host .gds-slide-out>.header .h3,:host .gds-slide-out>header h3,:host .gds-slide-out>header .h3{margin-bottom:0;margin-top:0}:host .gds-slide-out>.header h3+.close,:host .gds-slide-out>.header .h3+.close,:host .gds-slide-out>header h3+.close,:host .gds-slide-out>header .h3+.close{margin:-7px;min-width:2rem}:host .gds-slide-out>.body{padding:1rem;overflow:auto;width:100%}:host .gds-slide-out>.body p{margin-bottom:0;margin-top:0}:host .gds-slide-out>.footer,:host .gds-slide-out>footer{padding:1rem;width:100%}@media (min-width: 36em){:host .gds-slide-out>.footer,:host .gds-slide-out>footer{display:flex;justify-content:flex-end}}@media (max-width: 35.98em){:host .gds-slide-out>.footer button+button,:host .gds-slide-out>.footer button+.button,:host .gds-slide-out>.footer .button+button,:host .gds-slide-out>.footer .button+.button,:host .gds-slide-out>footer button+button,:host .gds-slide-out>footer button+.button,:host .gds-slide-out>footer .button+button,:host .gds-slide-out>footer .button+.button{margin-top:.75rem}}@media (min-width: 36em){:host .gds-slide-out>.footer button+button,:host .gds-slide-out>.footer button+.button,:host .gds-slide-out>.footer .button+button,:host .gds-slide-out>.footer .button+.button,:host .gds-slide-out>footer button+button,:host .gds-slide-out>footer button+.button,:host .gds-slide-out>footer .button+button,:host .gds-slide-out>footer .button+.button{margin-left:.75rem}}:host .gds-slide-out.is-entering,:host .gds-slide-out.entered{transform:translate(0)}:host .gds-slide-out.is-exiting{transform:translate(100%)}:host .gds-slide-out.large{max-width:720px}:host .gds-slide-out>.body{flex:1 0}:host .gds-slide-out.left{left:0}:host .gds-slide-out.gds-slide-out--768{max-width:48rem}:host .gds-slide-out.gds-slide-out--960{max-width:60rem}:host .gds-slide-out.gds-slide-out--768 header,:host .gds-slide-out.gds-slide-out--960 header{padding:1.5rem 2rem 1rem}:host .gds-slide-out.gds-slide-out--768 .body,:host .gds-slide-out.gds-slide-out--960 .body{padding:2rem 2rem 1rem}:host .gds-slide-out.gds-slide-out--768 footer,:host .gds-slide-out.gds-slide-out--960 footer{padding:1rem 2rem 2rem}:host .gds-slide-out.auto-width{width:auto;max-width:initial}:host .hide-if-empty:empty{display:none}:host .nggv-backdrop{background:var(--sg-modal-backdrop-background);inset:0;position:fixed;z-index:var(--sg-z-index-modal-backdrop);display:block;transition:opacity .5s cubic-bezier(.33,1,.68,1)}:host .nggv-backdrop--transparent{opacity:0}:host .nggv-backdrop--transparent.entered,:host .nggv-backdrop--transparent.is-entering{opacity:1}:host .nggv-backdrop--transparent.is-exiting{opacity:0}:host .gds-slide-out__content{padding:1rem;overflow:auto;width:100%}:host .gds-slide-out__content p{margin-bottom:0;margin-top:0}:host .modal-dialog__actions,:host .gds-slide-out__header,:host .modal-body,:host .gds-slide-out__content{box-sizing:border-box}:host .modal-slide-out__heading{padding:1rem;border-bottom:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .modal-slide-out__heading h3,:host .modal-slide-out__heading .h3{margin-bottom:0;margin-top:0}:host .modal-slide-out__heading h3+.close,:host .modal-slide-out__heading .h3+.close{margin:-7px;min-width:2rem}:host .nggv-modal-slideout__close{background-color:transparent;padding:0;font-size:0;background:var(--gds-sys-color-surface);border:0;border-radius:50%;content:\"\";cursor:pointer;display:flex;font-family:inherit;height:2rem;position:relative;width:2rem}@media (hover: none) and (pointer: coarse){:host .nggv-modal-slideout__close:not(:disabled):not(.disabled){padding:.375rem;height:2.75rem;width:2.75rem}:host .nggv-modal-slideout__close:not(:disabled):not(.disabled)>i{background:var(--gds-ref-pallet-base200);height:2rem;width:2rem;border-radius:50%;position:relative;--color: var(--gds-sys-color-base)}:host .nggv-modal-slideout__close:not(:disabled):not(.disabled)>div:after,:host .nggv-modal-slideout__close:not(:disabled):not(.disabled)>div:before{height:.789375rem;width:.130625rem;top:.625rem}}:host .nggv-modal-slideout__close:focus:not(:focus-visible){box-shadow:none;outline:0}:host .nggv-modal-slideout__close:focus,:host .nggv-modal-slideout__close:focus-visible i{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .nggv-modal-slideout__close>i{border-radius:var(--gds-sys-shape-corner-round);display:block;width:100%;height:100%}:host .nggv-modal-slideout__close>i:after,:host .nggv-modal-slideout__close>i:before{background:var(--gds-sys-color-font);content:\"\";display:block;height:.789375rem;width:.130625rem;border-radius:.5px;left:calc(50% - .0625rem);position:absolute;top:.625rem}:host .nggv-modal-slideout__close>i:after{transform:rotate(45deg)}:host .nggv-modal-slideout__close>i:before{transform:rotate(-45deg)}:host .nggv-modal-slideout__close>svg path{fill:var(--gds-sys-color-font)}@media (min-width: 48em){:host .nggv-modal-slideout__close:not(:disabled,.disabled):hover>i{background:color-mix(in srgb,var(--gds-sys-color-font) 10%,transparent)}:host .nggv-modal-slideout__close:not(:disabled,.disabled):hover:active>i{background:color-mix(in srgb,var(--gds-sys-color-font) 20%,transparent)}}:host .modal-dialog__actions button{background-color:transparent;border:0;cursor:pointer;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center;font-size:1rem;font-family:inherit}:host .modal-dialog__actions button:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions button:focus,:host .modal-dialog__actions button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host .modal-dialog__actions button{min-width:100%}}@media screen and (-ms-high-contrast: active){:host .modal-dialog__actions button{border:2px solid currentcolor}}:host .modal-dialog__actions button.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host .modal-dialog__actions button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .modal-dialog__actions .primary{transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;background:#007ac7;border-color:#007ac7;color:#fff;--color: #fff}:host .modal-dialog__actions .primary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host .modal-dialog__actions .primary[aria-selected=true],:host .modal-dialog__actions .primary:active,:host .modal-dialog__actions .primary.active,:host .modal-dialog__actions .primary.active:hover,:host .modal-dialog__actions .primary:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .modal-dialog__actions .primary:focus-visible{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3!important}:host .modal-dialog__actions .primary:disabled,:host .modal-dialog__actions .primary.disabled,:host .modal-dialog__actions .primary[aria-disabled=true]{background:var(--form-control-primary-bg-disabled)!important;color:var(--text-primary-disabled-color)!important;border-color:var(--border-primary-disabled-color)!important;cursor:not-allowed}:host .modal-dialog__actions .primary:disabled::placeholder,:host .modal-dialog__actions .primary.disabled::placeholder,:host .modal-dialog__actions .primary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .modal-dialog__actions .secondary{transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;background:transparent;border-color:#007ac7;color:#007ac7;--color: rgb(0, 122, 199)}:host .modal-dialog__actions .secondary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions .secondary:focus,:host .modal-dialog__actions .secondary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .modal-dialog__actions .secondary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host .modal-dialog__actions .secondary[aria-selected=true],:host .modal-dialog__actions .secondary:active,:host .modal-dialog__actions .secondary.active,:host .modal-dialog__actions .secondary.active:hover,:host .modal-dialog__actions .secondary:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .modal-dialog__actions .secondary:disabled,:host .modal-dialog__actions .secondary.disabled,:host .modal-dialog__actions .secondary[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .modal-dialog__actions .secondary:disabled::placeholder,:host .modal-dialog__actions .secondary.disabled::placeholder,:host .modal-dialog__actions .secondary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .modal-dialog__actions .danger{color:#bb000c;--color: rgb(187, 0, 12);border-color:transparent;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .modal-dialog__actions .danger:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#d81a1a;color:#fff;--background: rgb(216, 26, 26);--color: rgb(255, 255, 255);border-color:#d81a1a}:host .modal-dialog__actions .danger[aria-selected=true],:host .modal-dialog__actions .danger:active,:host .modal-dialog__actions .danger.active,:host .modal-dialog__actions .danger.active:hover,:host .modal-dialog__actions .danger:active:hover{background-color:#bb000c;color:#fff;--background: rgb(187, 0, 12);--color: rgb(255, 255, 255);border-color:#bb000c}:host .modal-dialog__actions .danger[aria-selected]:hover,:host .modal-dialog__actions .danger.active:hover,:host .modal-dialog__actions .danger:active:hover{opacity:.9}:host .modal-dialog__actions .danger:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions .danger:focus,:host .modal-dialog__actions .danger:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host #sdv-modal-body{flex:1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], animations: [
+            trigger('modalAnimation', [
+                transition(':enter', [
+                    query('.gds-slide-out', style({ transform: 'translateX(100%)' }), {
+                        optional: true,
+                    }),
+                    query('.gds-backdrop, [role=dialog]', style({ opacity: '0' }), {
+                        optional: true,
+                    }),
+                    group([
+                        query('.gds-slide-out', animate('350ms cubic-bezier(0.33, 1, 0.68, 1)', style({ transform: 'translateX(0)' })), { optional: true }),
+                        query('.gds-backdrop, [role=dialog]', animate('350ms cubic-bezier(0.33, 1, 0.68, 1)', style({ opacity: '1' })), { optional: true }),
+                    ]),
+                ]),
+                transition(':leave', [
+                    query('.gds-slide-out', style({ transform: 'translateX(0)' }), {
+                        optional: true,
+                    }),
+                    group([
+                        query('.gds-slide-out', animate('350ms cubic-bezier(0.33, 1, 0.68, 1)', style({ transform: 'translateX(100%)' })), { optional: true }),
+                        query('.gds-backdrop, [role=dialog]', animate('350ms cubic-bezier(0.33, 1, 0.68, 1)', style({ opacity: '0' })), { optional: true }),
+                    ]),
+                ]),
+            ]),
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvSlideOutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nggv-slideout-modal', animations: [
+                        trigger('modalAnimation', [
+                            transition(':enter', [
+                                query('.gds-slide-out', style({ transform: 'translateX(100%)' }), {
+                                    optional: true,
+                                }),
+                                query('.gds-backdrop, [role=dialog]', style({ opacity: '0' }), {
+                                    optional: true,
+                                }),
+                                group([
+                                    query('.gds-slide-out', animate('350ms cubic-bezier(0.33, 1, 0.68, 1)', style({ transform: 'translateX(0)' })), { optional: true }),
+                                    query('.gds-backdrop, [role=dialog]', animate('350ms cubic-bezier(0.33, 1, 0.68, 1)', style({ opacity: '1' })), { optional: true }),
+                                ]),
+                            ]),
+                            transition(':leave', [
+                                query('.gds-slide-out', style({ transform: 'translateX(0)' }), {
+                                    optional: true,
+                                }),
+                                group([
+                                    query('.gds-slide-out', animate('350ms cubic-bezier(0.33, 1, 0.68, 1)', style({ transform: 'translateX(100%)' })), { optional: true }),
+                                    query('.gds-backdrop, [role=dialog]', animate('350ms cubic-bezier(0.33, 1, 0.68, 1)', style({ opacity: '0' })), { optional: true }),
+                                ]),
+                            ]),
+                        ]),
+                    ], template: "<ng-container *ngIf=\"shown\">\n  <div\n    [ngClass]=\"{\n      'gds-slide-out--left': fromLeft,\n      'gds-slide-out--right': !fromLeft,\n    }\"\n    *transloco=\"let t\"\n    [class.-active]=\"shown\"\n    [attr.data-thook]=\"thook\"\n    [attr.aria-hidden]=\"!shown\"\n    [@modalAnimation]\n  >\n    <div\n      #slideOut\n      class=\"gds-slide-out\"\n      [class.auto-width]=\"autoWidth\"\n      [class.entered]=\"shown\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"gds-modal-title\"\n      aria-describedby=\"gds-modal-body\"\n    >\n      <header class=\"gds-slide-out__header\">\n        <h3 id=\"gds-modal-title\">\n          {{ heading || title || '' }}\n        </h3>\n        <button\n          data-testid=\"modal-close-button\"\n          class=\"nggv-modal-slideout__close\"\n          (click)=\"this.close()\"\n          [attr.aria-label]=\"closeButtonAriaLabel\"\n        >\n          <i></i>\n        </button>\n      </header>\n\n      <section id=\"modal-body\">\n        <div class=\"gds-slide-out__content hide-if-empty\">\n          <div *ngIf=\"content\" [innerHtml]=\"content\"></div>\n          <ng-content></ng-content>\n        </div>\n        <ng-content select=\"[slot='outside-content']\"></ng-content>\n      </section>\n\n      <footer class=\"modal-dialog__actions\">\n        <button\n          class=\"danger\"\n          type=\"reset\"\n          [attr.data-thook]=\"'dialog-' + (_buttons?.negative || 'negative')\"\n          (click)=\"onAction($event, 'negative')\"\n          (keydown.enter)=\"onAction($event, 'negative')\"\n          *ngIf=\"_buttons && _buttons.negative\"\n        >\n          {{ t(_buttons.negative) }}\n        </button>\n\n        <button\n          class=\"secondary\"\n          type=\"button\"\n          [attr.data-thook]=\"'dialog-' + (_buttons?.neutral || 'neutral')\"\n          (click)=\"onAction($event, 'neutral')\"\n          (keydown.enter)=\"onAction($event, 'neutral')\"\n          *ngIf=\"_buttons && _buttons.neutral\"\n        >\n          {{ t(_buttons.neutral) }}\n        </button>\n\n        <button\n          class=\"primary\"\n          type=\"submit\"\n          [attr.data-thook]=\"'dialog-' + (_buttons?.positive || 'positive')\"\n          (click)=\"onAction($event, 'positive')\"\n          (keydown.enter)=\"onAction($event, 'positive')\"\n          *ngIf=\"_buttons && _buttons.positive\"\n        >\n          {{ t(_buttons.positive) }}\n        </button>\n      </footer>\n    </div>\n\n    <div\n      class=\"nggv-backdrop\"\n      data-thook=\"slideout-backdrop\"\n      (click)=\"close()\"\n    ></div>\n  </div>\n</ng-container>\n", styles: [":host{--background-hsl: 0deg, 0%, 0%;--gds-ref-pallet-base200: hsl(0, 0%, 91%);--gds-sys-color-base: hsl(0, 0%, 20%);--gds-sys-color-font: hsl(0, 0%, 20%);--gds-sys-shape-corner-round: 50%;--grey-500: rgb(222, 222, 222);--sg-border-color: hsl(0, 0%, 53%);--sg-border-radius: .25rem;--sg-border-width: 1px;--sg-hsl-contrast: 0deg, 0%, 0%;--sg-modal-backdrop-background: rgba(0, 0, 0, .5);--sg-modal-background: #fff;--sg-modal-box-shadow: 0 .125rem .375rem rgba(0, 0, 0, .15);--sg-z-index-modal-backdrop: 1040;--sg-z-index-modal: 1050;--text-primary-color: rgb(51, 51, 51)}:host .gds-slide-out{background:var(--sg-modal-background);display:flex;flex-direction:column;box-shadow:var(--sg-modal-box-shadow);position:absolute;width:100%;z-index:var(--sg-z-index-modal);position:fixed;height:100dvh;max-width:512px;min-height:-webkit-fill-available;min-height:-moz-available;min-height:stretch;right:0;top:0;transition:transform .35s cubic-bezier(.33,1,.68,1);transform:translate(100%);z-index:1050}:host .gds-slide-out>.header,:host .gds-slide-out>header{padding:1rem;border-bottom:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .gds-slide-out>.header h3,:host .gds-slide-out>.header .h3,:host .gds-slide-out>header h3,:host .gds-slide-out>header .h3{margin-bottom:0;margin-top:0}:host .gds-slide-out>.header h3+.close,:host .gds-slide-out>.header .h3+.close,:host .gds-slide-out>header h3+.close,:host .gds-slide-out>header .h3+.close{margin:-7px;min-width:2rem}:host .gds-slide-out>.body{padding:1rem;overflow:auto;width:100%}:host .gds-slide-out>.body p{margin-bottom:0;margin-top:0}:host .gds-slide-out>.footer,:host .gds-slide-out>footer{padding:1rem;width:100%}@media (min-width: 36em){:host .gds-slide-out>.footer,:host .gds-slide-out>footer{display:flex;justify-content:flex-end}}@media (max-width: 35.98em){:host .gds-slide-out>.footer button+button,:host .gds-slide-out>.footer button+.button,:host .gds-slide-out>.footer .button+button,:host .gds-slide-out>.footer .button+.button,:host .gds-slide-out>footer button+button,:host .gds-slide-out>footer button+.button,:host .gds-slide-out>footer .button+button,:host .gds-slide-out>footer .button+.button{margin-top:.75rem}}@media (min-width: 36em){:host .gds-slide-out>.footer button+button,:host .gds-slide-out>.footer button+.button,:host .gds-slide-out>.footer .button+button,:host .gds-slide-out>.footer .button+.button,:host .gds-slide-out>footer button+button,:host .gds-slide-out>footer button+.button,:host .gds-slide-out>footer .button+button,:host .gds-slide-out>footer .button+.button{margin-left:.75rem}}:host .gds-slide-out.is-entering,:host .gds-slide-out.entered{transform:translate(0)}:host .gds-slide-out.is-exiting{transform:translate(100%)}:host .gds-slide-out.large{max-width:720px}:host .gds-slide-out>.body{flex:1 0}:host .gds-slide-out.left{left:0}:host .gds-slide-out.gds-slide-out--768{max-width:48rem}:host .gds-slide-out.gds-slide-out--960{max-width:60rem}:host .gds-slide-out.gds-slide-out--768 header,:host .gds-slide-out.gds-slide-out--960 header{padding:1.5rem 2rem 1rem}:host .gds-slide-out.gds-slide-out--768 .body,:host .gds-slide-out.gds-slide-out--960 .body{padding:2rem 2rem 1rem}:host .gds-slide-out.gds-slide-out--768 footer,:host .gds-slide-out.gds-slide-out--960 footer{padding:1rem 2rem 2rem}:host .gds-slide-out.auto-width{width:auto;max-width:initial}:host .hide-if-empty:empty{display:none}:host .nggv-backdrop{background:var(--sg-modal-backdrop-background);inset:0;position:fixed;z-index:var(--sg-z-index-modal-backdrop);display:block;transition:opacity .5s cubic-bezier(.33,1,.68,1)}:host .nggv-backdrop--transparent{opacity:0}:host .nggv-backdrop--transparent.entered,:host .nggv-backdrop--transparent.is-entering{opacity:1}:host .nggv-backdrop--transparent.is-exiting{opacity:0}:host .gds-slide-out__content{padding:1rem;overflow:auto;width:100%}:host .gds-slide-out__content p{margin-bottom:0;margin-top:0}:host .modal-dialog__actions,:host .gds-slide-out__header,:host .modal-body,:host .gds-slide-out__content{box-sizing:border-box}:host .modal-slide-out__heading{padding:1rem;border-bottom:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .modal-slide-out__heading h3,:host .modal-slide-out__heading .h3{margin-bottom:0;margin-top:0}:host .modal-slide-out__heading h3+.close,:host .modal-slide-out__heading .h3+.close{margin:-7px;min-width:2rem}:host .nggv-modal-slideout__close{background-color:transparent;padding:0;font-size:0;background:var(--gds-sys-color-surface);border:0;border-radius:50%;content:\"\";cursor:pointer;display:flex;font-family:inherit;height:2rem;position:relative;width:2rem}@media (hover: none) and (pointer: coarse){:host .nggv-modal-slideout__close:not(:disabled):not(.disabled){padding:.375rem;height:2.75rem;width:2.75rem}:host .nggv-modal-slideout__close:not(:disabled):not(.disabled)>i{background:var(--gds-ref-pallet-base200);height:2rem;width:2rem;border-radius:50%;position:relative;--color: var(--gds-sys-color-base)}:host .nggv-modal-slideout__close:not(:disabled):not(.disabled)>div:after,:host .nggv-modal-slideout__close:not(:disabled):not(.disabled)>div:before{height:.789375rem;width:.130625rem;top:.625rem}}:host .nggv-modal-slideout__close:focus:not(:focus-visible){box-shadow:none;outline:0}:host .nggv-modal-slideout__close:focus,:host .nggv-modal-slideout__close:focus-visible i{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .nggv-modal-slideout__close>i{border-radius:var(--gds-sys-shape-corner-round);display:block;width:100%;height:100%}:host .nggv-modal-slideout__close>i:after,:host .nggv-modal-slideout__close>i:before{background:var(--gds-sys-color-font);content:\"\";display:block;height:.789375rem;width:.130625rem;border-radius:.5px;left:calc(50% - .0625rem);position:absolute;top:.625rem}:host .nggv-modal-slideout__close>i:after{transform:rotate(45deg)}:host .nggv-modal-slideout__close>i:before{transform:rotate(-45deg)}:host .nggv-modal-slideout__close>svg path{fill:var(--gds-sys-color-font)}@media (min-width: 48em){:host .nggv-modal-slideout__close:not(:disabled,.disabled):hover>i{background:color-mix(in srgb,var(--gds-sys-color-font) 10%,transparent)}:host .nggv-modal-slideout__close:not(:disabled,.disabled):hover:active>i{background:color-mix(in srgb,var(--gds-sys-color-font) 20%,transparent)}}:host .modal-dialog__actions button{background-color:transparent;border:0;cursor:pointer;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center;font-size:1rem;font-family:inherit}:host .modal-dialog__actions button:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions button:focus,:host .modal-dialog__actions button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host .modal-dialog__actions button{min-width:100%}}@media screen and (-ms-high-contrast: active){:host .modal-dialog__actions button{border:2px solid currentcolor}}:host .modal-dialog__actions button.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host .modal-dialog__actions button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .modal-dialog__actions .primary{transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;background:#007ac7;border-color:#007ac7;color:#fff;--color: #fff}:host .modal-dialog__actions .primary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host .modal-dialog__actions .primary[aria-selected=true],:host .modal-dialog__actions .primary:active,:host .modal-dialog__actions .primary.active,:host .modal-dialog__actions .primary.active:hover,:host .modal-dialog__actions .primary:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .modal-dialog__actions .primary:focus-visible{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3!important}:host .modal-dialog__actions .primary:disabled,:host .modal-dialog__actions .primary.disabled,:host .modal-dialog__actions .primary[aria-disabled=true]{background:var(--form-control-primary-bg-disabled)!important;color:var(--text-primary-disabled-color)!important;border-color:var(--border-primary-disabled-color)!important;cursor:not-allowed}:host .modal-dialog__actions .primary:disabled::placeholder,:host .modal-dialog__actions .primary.disabled::placeholder,:host .modal-dialog__actions .primary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .modal-dialog__actions .secondary{transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;background:transparent;border-color:#007ac7;color:#007ac7;--color: rgb(0, 122, 199)}:host .modal-dialog__actions .secondary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions .secondary:focus,:host .modal-dialog__actions .secondary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .modal-dialog__actions .secondary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host .modal-dialog__actions .secondary[aria-selected=true],:host .modal-dialog__actions .secondary:active,:host .modal-dialog__actions .secondary.active,:host .modal-dialog__actions .secondary.active:hover,:host .modal-dialog__actions .secondary:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .modal-dialog__actions .secondary:disabled,:host .modal-dialog__actions .secondary.disabled,:host .modal-dialog__actions .secondary[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .modal-dialog__actions .secondary:disabled::placeholder,:host .modal-dialog__actions .secondary.disabled::placeholder,:host .modal-dialog__actions .secondary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .modal-dialog__actions .danger{color:#bb000c;--color: rgb(187, 0, 12);border-color:transparent;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .modal-dialog__actions .danger:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#d81a1a;color:#fff;--background: rgb(216, 26, 26);--color: rgb(255, 255, 255);border-color:#d81a1a}:host .modal-dialog__actions .danger[aria-selected=true],:host .modal-dialog__actions .danger:active,:host .modal-dialog__actions .danger.active,:host .modal-dialog__actions .danger.active:hover,:host .modal-dialog__actions .danger:active:hover{background-color:#bb000c;color:#fff;--background: rgb(187, 0, 12);--color: rgb(255, 255, 255);border-color:#bb000c}:host .modal-dialog__actions .danger[aria-selected]:hover,:host .modal-dialog__actions .danger.active:hover,:host .modal-dialog__actions .danger:active:hover{opacity:.9}:host .modal-dialog__actions .danger:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions .danger:focus,:host .modal-dialog__actions .danger:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host #sdv-modal-body{flex:1}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { slideOutRef: [{
+                type: ViewChild,
+                args: ['slideOut']
+            }], side: [{
+                type: Input
+            }], shown: [{
+                type: Input
+            }], initiallyShown: [{
+                type: Input
+            }], heading: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], content: [{
+                type: Input
+            }], closable: [{
+                type: Input
+            }], autoWidth: [{
+                type: Input
+            }], thook: [{
+                type: Input
+            }], closeButtonAriaLabel: [{
+                type: Input
+            }], buttons: [{
+                type: Input
+            }], nggvCloseEvent: [{
+                type: Output
+            }], nggvPositiveEvent: [{
+                type: Output
+            }], nggvNeutralEvent: [{
+                type: Output
+            }], nggvNegativeEvent: [{
+                type: Output
+            }], close: [{
+                type: HostListener,
+                args: ['click', ['$event', '"host"']]
+            }, {
+                type: HostListener,
+                args: ['document:keydown.escape', ['$event']]
+            }], focusTrap: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+class NggvModalModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: NggvModalModule, declarations: [NggvDialogComponent,
+            NggvSlideOutComponent,
+            NggvFoldOutComponent,
+            NggvFoldOutOptionDirective], imports: [CommonModule,
+            NggvButtonModule,
+            NggvI18nModule,
+            NggCoreWrapperModule], exports: [NggvDialogComponent,
+            NggvSlideOutComponent,
+            NggvFoldOutComponent,
+            NggvFoldOutOptionDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvModalModule, imports: [CommonModule,
+            NggvButtonModule,
+            NggvI18nModule,
+            NggCoreWrapperModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvModalModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        NggvButtonModule,
+                        NggvI18nModule,
+                        NggCoreWrapperModule,
+                    ],
+                    declarations: [
+                        NggvDialogComponent,
+                        NggvSlideOutComponent,
+                        NggvFoldOutComponent,
+                        NggvFoldOutOptionDirective,
+                    ],
+                    exports: [
+                        NggvDialogComponent,
+                        NggvSlideOutComponent,
+                        NggvFoldOutComponent,
+                        NggvFoldOutOptionDirective,
+                    ],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NggvDialogComponent, NggvFoldOutComponent, NggvFoldOutOptionDirective, NggvModalModule, NggvSlideOutComponent };
+//# sourceMappingURL=sebgroup-green-angular-src-v-angular-modal.mjs.map