npm - @sebgroup/green-angular - Versions diffs - 5.3.4 → 5.4.0 - Mend

@sebgroup/green-angular 5.3.4 → 5.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/fesm2022/sebgroup-green-angular-src-v-angular-tooltip.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sebgroup-green-angular-src-v-angular-tooltip.mjs","sources":["../../../../libs/angular/src/v-angular/tooltip/tooltip.styles.ts","../../../../libs/angular/src/v-angular/tooltip/tooltip.directive.ts","../../../../libs/angular/src/v-angular/tooltip/tooltip.module.ts","../../../../libs/angular/src/v-angular/tooltip/sebgroup-green-angular-src-v-angular-tooltip.ts"],"sourcesContent":["export const tooltipBoxStyles = new Map<string, any>([\n ['position', 'absolute'],\n ['z-index', '1040'],\n ['border-radius', '.25rem'],\n ['padding', '.5rem 1rem'],\n ['background-color', '#1a1a1a'],\n ['color', '#fff'],\n ['font-size', '0.875rem'],\n ['font-weight', '400'],\n ['line-height', '1.5'],\n ['padding', '0.5rem'],\n ['pointer-events', 'none'],\n])\n\nexport const tooltipArrowTopStyles = new Map<string, any>([\n ['position', 'absolute'],\n ['width', '0'],\n ['height', '0'],\n ['border', '0.5rem solid transparent'],\n ['bottom', '-1rem'],\n ['left', '50%'],\n ['transform', 'translateX(-50%)'],\n ['border-color', '#1a1a1a transparent transparent'],\n])\n\nexport const tooltipArrowBottomStyles = new Map<string, any>([\n ['position', 'absolute'],\n ['width', '0'],\n ['height', '0'],\n ['border', '0.5rem solid transparent'],\n ['top', '-1rem'],\n ['left', '50%'],\n ['transform', 'translateX(-50%)'],\n ['border-color', 'transparent transparent #1a1a1a'],\n])\n\nexport const tooltipArrowLeftStyles = new Map<string, any>([\n ['position', 'absolute'],\n ['width', '0'],\n ['height', '0'],\n ['border', '0.5rem solid transparent'],\n ['right', '-1rem'],\n ['top', '50%'],\n ['transform', 'translateY(-50%)'],\n ['border-color', 'transparent transparent transparent #1a1a1a'],\n])\n\nexport const tooltipArrowRightStyles = new Map<string, any>([\n ['position', 'absolute'],\n ['width', '0'],\n ['height', '0'],\n ['border', '0.5rem solid transparent'],\n ['left', '-1rem'],\n ['top', '50%'],\n ['transform', 'translateY(-50%)'],\n ['border-color', 'transparent #1a1a1a transparent transparent'],\n])\n\nexport const tooltipArrowStyles = {\n top: tooltipArrowTopStyles,\n bottom: tooltipArrowBottomStyles,\n left: tooltipArrowLeftStyles,\n right: tooltipArrowRightStyles,\n}\n","import {\n AfterViewInit,\n Directive,\n ElementRef,\n EventEmitter,\n HostListener,\n Input,\n OnChanges,\n OnDestroy,\n Output,\n Renderer2,\n SimpleChange,\n SimpleChanges,\n} from '@angular/core'\n\nimport { tooltipArrowStyles, tooltipBoxStyles } from './tooltip.styles'\n\nexport type Placement = 'top' \| 'right' \| 'bottom' \| 'left'\n\ntype Position = {\n top?: number\n right?: number\n bottom?: number\n left?: number\n}\n\n/*\n A tooltip is a text label that acts as a helper to a specific item.\n * Recommended to use value `top` or `bottom` with `placement` for responsive design.\n * Dynamic resizing and tooltip position are a work in progress.\n * https://designlibrary.sebgroup.com/components/component-tooltip\n /\n@Directive({\n selector: '[nggvTooltip]',\n})\nexport class NggvTooltipDirective\n implements AfterViewInit, OnChanges, OnDestroy\n{\n /* The text that will be shown in the tooltip. /\n @Input() nggvTooltip?: string\n /* Special property used for selecting DOM elements during automated UI testing. /\n @Input() thook = 'tooltip'\n /* The side of the anchor which the tooltip will be rendered.\n * Recommended `top` and `bottom` for responsive designs as these are more stable.\n /\n @Input() placement: Placement = 'top'\n /* Initial state and subsequent updates on wether the tooltip is visible. /\n @Input() shown = false\n /* How far off from the text the tooltip will be rendered. /\n @Input() offset = 10\n /* How frequently the tooltip will be re-rendered when the page size changes. /\n @Input() resizeThrottle = 50\n /* Id of tooltip element. /\n @Input() tooltipId?: string\n /* Numeric max-width for tooltip. /\n @Input() maxWidth = 343\n\n /* Emits a show event triggered changing visibility state of the tooltip. /\n @Output() nggvShow = new EventEmitter<HTMLElement>()\n /* Emits a hide event triggered changing visibility state of the tooltip. /\n @Output() nggvHide = new EventEmitter<HTMLElement>()\n\n /* @internal /\n protected timeout = 0\n\n /* @internal /\n protected parentElement: HTMLElement\n\n /* @internal /\n protected anchorElement: HTMLElement\n\n /* @internal /\n protected tooltipElement: HTMLElement \| undefined\n\n /* @internal /\n protected arrowElement: HTMLElement \| undefined\n\n /* @internal Check if changes should trigger a re-render /\n static shouldUpdate(change: SimpleChange) {\n return (\n change &&\n !change.firstChange &&\n change.previousValue !== change.currentValue\n )\n }\n\n constructor(\n private anchorElementRef: ElementRef,\n private renderer: Renderer2,\n ) {\n this.anchorElement = this.anchorElementRef.nativeElement\n this.parentElement = document.body\n }\n\n ngAfterViewInit() {\n // Set a timeout to allow view to fully render before creating tooltip.\n setTimeout(() => (this.shown ? this.show(true) : this.hide(true)))\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (\n NggvTooltipDirective.shouldUpdate(changes.nggvTooltip) \|\|\n NggvTooltipDirective.shouldUpdate(changes.placement) \|\|\n NggvTooltipDirective.shouldUpdate(changes.thook)\n ) {\n this.shown ? this.show(true) : this.hide(true)\n }\n\n if (NggvTooltipDirective.shouldUpdate(changes.shown)) {\n this.shown ? this.show() : this.hide()\n }\n\n if (NggvTooltipDirective.shouldUpdate(changes.offset)) {\n this.updatePosition()\n }\n }\n\n ngOnDestroy() {\n this.hide(true)\n }\n\n /* @internal /\n @HostListener('mouseenter')\n @HostListener('focus')\n onMouseEnter() {\n this.show()\n }\n\n /* @internal /\n @HostListener('mouseleave')\n @HostListener('blur')\n @HostListener('keyup.escape')\n onMouseLeave() {\n this.hide()\n }\n\n /* @internal /\n @HostListener('window:resize')\n resize() {\n if (this.timeout) return\n this.timeout = window.setTimeout(() => {\n this.timeout = 0\n this.updatePosition()\n }, this.resizeThrottle)\n }\n\n /\n Sets the visibility state of the tooltip to true and creates a new tooltip if it doesn't exist or `recreate` is set.\n * @param recreate if set to true, destroy any existing tooltip and create a new one.\n /\n show(recreate = false) {\n // Require tooltip text to create\n if (!this.nggvTooltip \|\| this.nggvTooltip.length === 0) return\n\n if (recreate \|\| !this.tooltipElement) {\n this.hide(true)\n this.create(this.nggvTooltip)\n } else {\n this.renderer.appendChild(this.parentElement, this.tooltipElement)\n }\n\n this.updatePosition()\n this.shown = true\n this.nggvShow.emit(this.tooltipElement)\n }\n\n /\n Sets the visibility state of the tooltip to false and destroys an existing tooltip if `destroy` is set.\n * @param destroy if set to true, destroy any existing tooltip.\n /\n hide(destroy = false) {\n if (!this.tooltipElement) return\n if (this.parentElement.contains(this.tooltipElement)) {\n this.renderer.removeChild(this.parentElement, this.tooltipElement)\n }\n if (destroy) this.destroy()\n this.shown = false\n this.nggvHide.emit(this.tooltipElement)\n }\n\n /\n @internal\n * Creates a new tooltip with the set placement and a given text as its body.\n * @param text the string to be displayed in the tooltip body.\n /\n create(text: string) {\n this.tooltipElement = this.renderer.createElement('div')\n this.renderer.addClass(this.tooltipElement, 'gds-tooltip')\n this.renderer.setAttribute(this.tooltipElement, 'data-thook', this.thook)\n this.renderer.setAttribute(this.tooltipElement, 'role', 'tooltip')\n if (this.tooltipId) {\n this.renderer.setAttribute(this.tooltipElement, 'id', this.tooltipId)\n }\n // set styling\n Array.from(tooltipBoxStyles.entries()).forEach(([style, value]) => {\n this.renderer.setStyle(this.tooltipElement, style, value)\n })\n const relativeMaxWidth = this.pxToRem(this.maxWidth)\n this.renderer.setStyle(this.tooltipElement, 'max-width', relativeMaxWidth)\n this.renderer.appendChild(\n this.tooltipElement,\n this.renderer.createText(text),\n )\n\n // add tooltip to DOM\n this.renderer.appendChild(this.parentElement, this.tooltipElement)\n\n this.arrowElement = this.renderer.createElement('div')\n this.renderer.addClass(\n this.arrowElement,\n `gds-tooltip__arrow-${this.placement}`,\n )\n\n // add arrow to tooltip element\n this.renderer.appendChild(this.tooltipElement, this.arrowElement)\n }\n\n /\n @internal\n * Destroys the current tooltip by un-setting variables, should only be used after detaching elements from the DOM.\n /\n destroy() {\n this.tooltipElement = undefined\n this.arrowElement = undefined\n }\n\n /\n @internal\n * Recalculates the position of the tooltip.\n /\n updatePosition() {\n if (!this.tooltipElement \|\| !this.arrowElement) return\n const scrollPos =\n window.pageYOffset \|\|\n document.documentElement.scrollTop \|\|\n this.parentElement.scrollTop \|\|\n 0\n const anchorRect = this.anchorElement.getBoundingClientRect()\n const tooltipRect = this.tooltipElement.getBoundingClientRect()\n const arrowRect = this.arrowElement.getBoundingClientRect()\n\n switch (this.placement) {\n case 'top':\n this.alignVertical(\n true,\n scrollPos,\n anchorRect,\n tooltipRect.width,\n tooltipRect.height,\n arrowRect.width,\n )\n break\n\n case 'bottom':\n this.alignVertical(\n false,\n scrollPos,\n anchorRect,\n tooltipRect.width,\n tooltipRect.height,\n arrowRect.width,\n )\n break\n\n case 'left':\n this.alignHorizontal(true, scrollPos, anchorRect, tooltipRect.height)\n break\n\n case 'right':\n this.alignHorizontal(false, scrollPos, anchorRect, tooltipRect.height)\n break\n\n default:\n return\n }\n }\n\n /\n @internal\n * Calculates and set the position of the tooltip when the placement is `top` or `bottom`.\n /\n alignVertical(\n above: boolean,\n scrollPos: number,\n anchor: DOMRect,\n tooltipWidth: number,\n tooltipHeight: number,\n arrowWidth: number,\n ) {\n const width = this.parentElement.clientWidth\n const anchorMidX = anchor.left + anchor.width / 2\n const tooltip: Position = {}\n const arrow: Position = {}\n\n if (above)\n tooltip.top = anchor.top - tooltipHeight - this.offset + scrollPos\n else tooltip.top = anchor.bottom + this.offset + scrollPos\n\n if (anchorMidX < width / 2) {\n tooltip.left = Math.max(0, anchorMidX - tooltipWidth / 2)\n arrow.left = anchorMidX - tooltip.left\n } else {\n tooltip.right = Math.max(0, width - (anchorMidX + tooltipWidth / 2))\n arrow.right = width - anchorMidX - tooltip.right - arrowWidth\n }\n\n this.setStyle(tooltip, arrow)\n }\n\n /\n @internal\n * Calculates and set the position of the tooltip when the placement is `left` or `right`.\n /\n alignHorizontal(\n before: boolean,\n scrollPos: number,\n anchor: DOMRect,\n tooltipHeight: number,\n ) {\n const width = this.parentElement.clientWidth\n const top = anchor.top + (anchor.height - tooltipHeight) / 2 + scrollPos\n const tooltip: Position = { top }\n const arrow: Position = { top: tooltipHeight / 2 }\n\n if (before) tooltip.right = width - anchor.left + this.offset\n else tooltip.left = anchor.right + this.offset\n\n this.setStyle(tooltip, arrow)\n }\n\n /\n @internal\n * Updates the CSS properties for the tooltip position.\n /\n setStyle(tooltip: Position, arrow: Position) {\n // Tooltip\n Object.entries(tooltip).forEach(([prop, value]) => {\n const position = this.pxToRem(value)\n this.renderer.setStyle(this.tooltipElement, prop, position)\n })\n\n // Arrow\n Object.entries(arrow).forEach(([prop, value]) => {\n const position = this.pxToRem(value)\n this.renderer.setStyle(this.arrowElement, prop, position)\n })\n\n Array.from(tooltipArrowStyles[this.placement].entries()).forEach(\n ([style, value]) => {\n this.renderer.setStyle(this.arrowElement, style, value)\n },\n )\n }\n\n private pxToRem(value: number): string {\n const fontSizePx = window\n ?.getComputedStyle(this.parentElement)\n ?.getPropertyValue('font-size')\n const fontSizeNumberMatch = fontSizePx?.match(/\\d{1,}/)\n const fontSize = fontSizeNumberMatch ? +fontSizeNumberMatch[0] : 16\n const remValue = value / fontSize\n return `${remValue}rem`\n }\n}\n","import { NgModule } from '@angular/core'\n\nimport { NggvI18nModule } from '@sebgroup/green-angular/src/v-angular/i18n'\nimport { NggvTooltipDirective } from './tooltip.directive'\n\n@NgModule({\n declarations: [NggvTooltipDirective],\n exports: [NggvTooltipDirective],\n imports: [NggvI18nModule],\n})\nexport class NggvTooltipModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"sebgroup-green-angular-src-v-angular-tooltip.mjs","sources":["../../../../libs/angular/src/v-angular/tooltip/tooltip.styles.ts","../../../../libs/angular/src/v-angular/tooltip/tooltip.directive.ts","../../../../libs/angular/src/v-angular/tooltip/tooltip.module.ts","../../../../libs/angular/src/v-angular/tooltip/sebgroup-green-angular-src-v-angular-tooltip.ts"],"sourcesContent":["export const tooltipBoxStyles = new Map<string, any>([\n ['position', 'absolute'],\n ['z-index', '1045'],\n ['border-radius', '.25rem'],\n ['padding', '.5rem 1rem'],\n ['background-color', '#1a1a1a'],\n ['color', '#fff'],\n ['font-size', '0.875rem'],\n ['font-weight', '400'],\n ['line-height', '1.5'],\n ['padding', '0.5rem'],\n ['pointer-events', 'none'],\n])\n\nexport const tooltipArrowTopStyles = new Map<string, any>([\n ['position', 'absolute'],\n ['width', '0'],\n ['height', '0'],\n ['border', '0.5rem solid transparent'],\n ['bottom', '-1rem'],\n ['left', '50%'],\n ['transform', 'translateX(-50%)'],\n ['border-color', '#1a1a1a transparent transparent'],\n])\n\nexport const tooltipArrowBottomStyles = new Map<string, any>([\n ['position', 'absolute'],\n ['width', '0'],\n ['height', '0'],\n ['border', '0.5rem solid transparent'],\n ['top', '-1rem'],\n ['left', '50%'],\n ['transform', 'translateX(-50%)'],\n ['border-color', 'transparent transparent #1a1a1a'],\n])\n\nexport const tooltipArrowLeftStyles = new Map<string, any>([\n ['position', 'absolute'],\n ['width', '0'],\n ['height', '0'],\n ['border', '0.5rem solid transparent'],\n ['right', '-1rem'],\n ['top', '50%'],\n ['transform', 'translateY(-50%)'],\n ['border-color', 'transparent transparent transparent #1a1a1a'],\n])\n\nexport const tooltipArrowRightStyles = new Map<string, any>([\n ['position', 'absolute'],\n ['width', '0'],\n ['height', '0'],\n ['border', '0.5rem solid transparent'],\n ['left', '-1rem'],\n ['top', '50%'],\n ['transform', 'translateY(-50%)'],\n ['border-color', 'transparent #1a1a1a transparent transparent'],\n])\n\nexport const tooltipArrowStyles = {\n top: tooltipArrowTopStyles,\n bottom: tooltipArrowBottomStyles,\n left: tooltipArrowLeftStyles,\n right: tooltipArrowRightStyles,\n}\n","import {\n AfterViewInit,\n Directive,\n ElementRef,\n EventEmitter,\n HostListener,\n Input,\n OnChanges,\n OnDestroy,\n Output,\n Renderer2,\n SimpleChange,\n SimpleChanges,\n} from '@angular/core'\n\nimport { tooltipArrowStyles, tooltipBoxStyles } from './tooltip.styles'\n\nexport type Placement = 'top' \| 'right' \| 'bottom' \| 'left'\n\ntype Position = {\n top?: number\n right?: number\n bottom?: number\n left?: number\n}\n\n/*\n A tooltip is a text label that acts as a helper to a specific item.\n * Recommended to use value `top` or `bottom` with `placement` for responsive design.\n * Dynamic resizing and tooltip position are a work in progress.\n * https://designlibrary.sebgroup.com/components/component-tooltip\n /\n@Directive({\n selector: '[nggvTooltip]',\n})\nexport class NggvTooltipDirective\n implements AfterViewInit, OnChanges, OnDestroy\n{\n /* The text that will be shown in the tooltip. /\n @Input() nggvTooltip?: string\n /* Special property used for selecting DOM elements during automated UI testing. /\n @Input() thook = 'tooltip'\n /* The side of the anchor which the tooltip will be rendered.\n * Recommended `top` and `bottom` for responsive designs as these are more stable.\n /\n @Input() placement: Placement = 'top'\n /* Initial state and subsequent updates on wether the tooltip is visible. /\n @Input() shown = false\n /* How far off from the text the tooltip will be rendered. /\n @Input() offset = 10\n /* How frequently the tooltip will be re-rendered when the page size changes. /\n @Input() resizeThrottle = 50\n /* Id of tooltip element. /\n @Input() tooltipId?: string\n /* Numeric max-width for tooltip. /\n @Input() maxWidth = 343\n\n /* Emits a show event triggered changing visibility state of the tooltip. /\n @Output() nggvShow = new EventEmitter<HTMLElement>()\n /* Emits a hide event triggered changing visibility state of the tooltip. /\n @Output() nggvHide = new EventEmitter<HTMLElement>()\n\n /* @internal /\n protected timeout = 0\n\n /* @internal /\n protected parentElement: HTMLElement\n\n /* @internal /\n protected anchorElement: HTMLElement\n\n /* @internal /\n protected tooltipElement: HTMLElement \| undefined\n\n /* @internal /\n protected arrowElement: HTMLElement \| undefined\n\n /* @internal Check if changes should trigger a re-render /\n static shouldUpdate(change: SimpleChange) {\n return (\n change &&\n !change.firstChange &&\n change.previousValue !== change.currentValue\n )\n }\n\n constructor(\n private anchorElementRef: ElementRef,\n private renderer: Renderer2,\n ) {\n this.anchorElement = this.anchorElementRef.nativeElement\n this.parentElement = document.body\n }\n\n ngAfterViewInit() {\n // Set a timeout to allow view to fully render before creating tooltip.\n setTimeout(() => (this.shown ? this.show(true) : this.hide(true)))\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (\n NggvTooltipDirective.shouldUpdate(changes.nggvTooltip) \|\|\n NggvTooltipDirective.shouldUpdate(changes.placement) \|\|\n NggvTooltipDirective.shouldUpdate(changes.thook)\n ) {\n this.shown ? this.show(true) : this.hide(true)\n }\n\n if (NggvTooltipDirective.shouldUpdate(changes.shown)) {\n this.shown ? this.show() : this.hide()\n }\n\n if (NggvTooltipDirective.shouldUpdate(changes.offset)) {\n this.updatePosition()\n }\n }\n\n ngOnDestroy() {\n this.hide(true)\n }\n\n /* @internal /\n @HostListener('mouseenter')\n @HostListener('focus')\n onMouseEnter() {\n this.show()\n }\n\n /* @internal /\n @HostListener('mouseleave')\n @HostListener('blur')\n @HostListener('keyup.escape')\n onMouseLeave() {\n this.hide()\n }\n\n /* @internal /\n @HostListener('window:resize')\n resize() {\n if (this.timeout) return\n this.timeout = window.setTimeout(() => {\n this.timeout = 0\n this.updatePosition()\n }, this.resizeThrottle)\n }\n\n /\n Sets the visibility state of the tooltip to true and creates a new tooltip if it doesn't exist or `recreate` is set.\n * @param recreate if set to true, destroy any existing tooltip and create a new one.\n /\n show(recreate = false) {\n // Require tooltip text to create\n if (!this.nggvTooltip \|\| this.nggvTooltip.length === 0) return\n\n if (recreate \|\| !this.tooltipElement) {\n this.hide(true)\n this.create(this.nggvTooltip)\n } else {\n this.renderer.appendChild(this.parentElement, this.tooltipElement)\n }\n\n this.updatePosition()\n this.shown = true\n this.nggvShow.emit(this.tooltipElement)\n }\n\n /\n Sets the visibility state of the tooltip to false and destroys an existing tooltip if `destroy` is set.\n * @param destroy if set to true, destroy any existing tooltip.\n /\n hide(destroy = false) {\n if (!this.tooltipElement) return\n if (this.parentElement.contains(this.tooltipElement)) {\n this.renderer.removeChild(this.parentElement, this.tooltipElement)\n }\n if (destroy) this.destroy()\n this.shown = false\n this.nggvHide.emit(this.tooltipElement)\n }\n\n /\n @internal\n * Creates a new tooltip with the set placement and a given text as its body.\n * @param text the string to be displayed in the tooltip body.\n /\n create(text: string) {\n this.tooltipElement = this.renderer.createElement('div')\n this.renderer.addClass(this.tooltipElement, 'gds-tooltip')\n this.renderer.setAttribute(this.tooltipElement, 'data-thook', this.thook)\n this.renderer.setAttribute(this.tooltipElement, 'role', 'tooltip')\n if (this.tooltipId) {\n this.renderer.setAttribute(this.tooltipElement, 'id', this.tooltipId)\n }\n // set styling\n Array.from(tooltipBoxStyles.entries()).forEach(([style, value]) => {\n this.renderer.setStyle(this.tooltipElement, style, value)\n })\n const relativeMaxWidth = this.pxToRem(this.maxWidth)\n this.renderer.setStyle(this.tooltipElement, 'max-width', relativeMaxWidth)\n this.renderer.appendChild(\n this.tooltipElement,\n this.renderer.createText(text),\n )\n\n // add tooltip to DOM\n this.renderer.appendChild(this.parentElement, this.tooltipElement)\n\n this.arrowElement = this.renderer.createElement('div')\n this.renderer.addClass(\n this.arrowElement,\n `gds-tooltip__arrow-${this.placement}`,\n )\n\n // add arrow to tooltip element\n this.renderer.appendChild(this.tooltipElement, this.arrowElement)\n }\n\n /\n @internal\n * Destroys the current tooltip by un-setting variables, should only be used after detaching elements from the DOM.\n /\n destroy() {\n this.tooltipElement = undefined\n this.arrowElement = undefined\n }\n\n /\n @internal\n * Recalculates the position of the tooltip.\n /\n updatePosition() {\n if (!this.tooltipElement \|\| !this.arrowElement) return\n const scrollPos =\n window.pageYOffset \|\|\n document.documentElement.scrollTop \|\|\n this.parentElement.scrollTop \|\|\n 0\n const anchorRect = this.anchorElement.getBoundingClientRect()\n const tooltipRect = this.tooltipElement.getBoundingClientRect()\n const arrowRect = this.arrowElement.getBoundingClientRect()\n\n switch (this.placement) {\n case 'top':\n this.alignVertical(\n true,\n scrollPos,\n anchorRect,\n tooltipRect.width,\n tooltipRect.height,\n arrowRect.width,\n )\n break\n\n case 'bottom':\n this.alignVertical(\n false,\n scrollPos,\n anchorRect,\n tooltipRect.width,\n tooltipRect.height,\n arrowRect.width,\n )\n break\n\n case 'left':\n this.alignHorizontal(true, scrollPos, anchorRect, tooltipRect.height)\n break\n\n case 'right':\n this.alignHorizontal(false, scrollPos, anchorRect, tooltipRect.height)\n break\n\n default:\n return\n }\n }\n\n /\n @internal\n * Calculates and set the position of the tooltip when the placement is `top` or `bottom`.\n /\n alignVertical(\n above: boolean,\n scrollPos: number,\n anchor: DOMRect,\n tooltipWidth: number,\n tooltipHeight: number,\n arrowWidth: number,\n ) {\n const width = this.parentElement.clientWidth\n const anchorMidX = anchor.left + anchor.width / 2\n const tooltip: Position = {}\n const arrow: Position = {}\n\n if (above)\n tooltip.top = anchor.top - tooltipHeight - this.offset + scrollPos\n else tooltip.top = anchor.bottom + this.offset + scrollPos\n\n if (anchorMidX < width / 2) {\n tooltip.left = Math.max(0, anchorMidX - tooltipWidth / 2)\n arrow.left = anchorMidX - tooltip.left\n } else {\n tooltip.right = Math.max(0, width - (anchorMidX + tooltipWidth / 2))\n arrow.right = width - anchorMidX - tooltip.right - arrowWidth\n }\n\n this.setStyle(tooltip, arrow)\n }\n\n /\n @internal\n * Calculates and set the position of the tooltip when the placement is `left` or `right`.\n /\n alignHorizontal(\n before: boolean,\n scrollPos: number,\n anchor: DOMRect,\n tooltipHeight: number,\n ) {\n const width = this.parentElement.clientWidth\n const top = anchor.top + (anchor.height - tooltipHeight) / 2 + scrollPos\n const tooltip: Position = { top }\n const arrow: Position = { top: tooltipHeight / 2 }\n\n if (before) tooltip.right = width - anchor.left + this.offset\n else tooltip.left = anchor.right + this.offset\n\n this.setStyle(tooltip, arrow)\n }\n\n /\n @internal\n * Updates the CSS properties for the tooltip position.\n /\n setStyle(tooltip: Position, arrow: Position) {\n // Tooltip\n Object.entries(tooltip).forEach(([prop, value]) => {\n const position = this.pxToRem(value)\n this.renderer.setStyle(this.tooltipElement, prop, position)\n })\n\n // Arrow\n Object.entries(arrow).forEach(([prop, value]) => {\n const position = this.pxToRem(value)\n this.renderer.setStyle(this.arrowElement, prop, position)\n })\n\n Array.from(tooltipArrowStyles[this.placement].entries()).forEach(\n ([style, value]) => {\n this.renderer.setStyle(this.arrowElement, style, value)\n },\n )\n }\n\n private pxToRem(value: number): string {\n const fontSizePx = window\n ?.getComputedStyle(this.parentElement)\n ?.getPropertyValue('font-size')\n const fontSizeNumberMatch = fontSizePx?.match(/\\d{1,}/)\n const fontSize = fontSizeNumberMatch ? +fontSizeNumberMatch[0] : 16\n const remValue = value / fontSize\n return `${remValue}rem`\n }\n}\n","import { NgModule } from '@angular/core'\n\nimport { NggvI18nModule } from '@sebgroup/green-angular/src/v-angular/i18n'\nimport { NggvTooltipDirective } from './tooltip.directive'\n\n@NgModule({\n declarations: [NggvTooltipDirective],\n exports: [NggvTooltipDirective],\n imports: [NggvI18nModule],\n})\nexport class NggvTooltipModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/sebgroup-green-angular-v-angular.mjs CHANGED Viewed

@@ -4633,11 +4633,11 @@ class NggvInputComponent extends NggvBaseControlValueAccessorComponent$1 {
         this.inputChange$.next(this.state);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvInputComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvInputComponent, selector: "nggv-input", inputs: { thook: "thook", type: "type", placeholder: "placeholder", autocomplete: "autocomplete", readonly: "readonly", email: "email", min: "min", max: "max", step: "step", minLength: "minLength", minlength: "minlength", maxLength: "maxLength", maxlength: "maxlength", showCharacterCountdown: "showCharacterCountdown", pattern: "pattern", debounceTime: "debounceTime", inputMask: "inputMask" }, outputs: { nggvInput: "nggvInput" }, host: { properties: { "class": "this.class", "attr.data-thook": "this.thook" } }, usesInheritance: true, ngImport: i0, template: "<!-- LABEL -->\n<label\n  [id]=\"id + '-label'\"\n  class=\"gds-field-label hide-if-empty\"\n  [attr.for]=\"id + '-input'\"\n  *transloco=\"let t; read: scope\"\n>\n  <ng-template\n    *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n  ></ng-template>\n  <ng-template #basicLabelContentTpl>\n    <!-- to trigger css:empty if no label was added -->\n    <ng-container *ngIf=\"label\">\n      {{ label }}\n      <span\n        *ngIf=\"optional === true || (required !== true && optional !== false)\"\n        class=\"gds-field-label--optional\"\n      >\n        ({{ t('label.optional') }})\n      </span>\n    </ng-container>\n  </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div class=\"form-info description hide-if-empty\" *ngIf=\"descriptionIsVisible\">\n  {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n  <div\n    [id]=\"id + '-input'\"\n    class=\"nggv-field--locked\"\n    [attr.name]=\"name\"\n    [attr.value]=\"state\"\n    [attr.role]=\"role\"\n  >\n    <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n    <ng-container *ngIf=\"state\">\n      <ng-container *ngIf=\"!inputMask\">\n        {{ state }}\n      </ng-container>\n      <ng-container *ngIf=\"!!inputMask\">\n        {{ state | nggvInputMaskFormat: inputMask }}\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-container>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n  <div class=\"gds-input-wrapper\" [class.nggv-field--error]=\"invalid\">\n    <div class=\"input-group-prefix hide-if-empty\">\n      <ng-content select=\"[slot='prefix']\"></ng-content>\n    </div>\n\n    <!-- INPUT FIELD -->\n    <div class=\"input-group\" *ngIf=\"!inputMask\">\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        [attr.type]=\"type\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\n        [attr.email]=\"email\"\n        [attr.aria-describedby]=\"id + '-message'\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [step]=\"step\"\n        [attr.maxlength]=\"maxlength\"\n        [attr.minlength]=\"minlength\"\n        [pattern]=\"pattern\"\n        title=\"\"\n        [disabled]=\"disabled\"\n        [autocomplete]=\"autocomplete\"\n        [autofocus]=\"autofocus\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [value]=\"state\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n    </div>\n\n    <!-- INPUT FIELD WITH MASK -->\n    <div\n      class=\"input-group\"\n      *ngIf=\"!!inputMask && (hideInput$ | async) === false\"\n    >\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        autocomplete=\"off\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [attr.aria-describedby]=\"id + '-message'\"\n        [nggvInputMask]=\"inputMask\"\n        title=\"\"\n        [formControl]=\"control\"\n      />\n    </div>\n\n    <div class=\"input-group-suffix hide-if-empty\">\n      <ng-content select=\"[slot='suffix']\"></ng-content>\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <!-- ERRORS -->\n  <div\n    class=\"gds-form-item__footer error-wrapper\"\n    *transloco=\"let t; read: scope\"\n  >\n    <span\n      class=\"form-info form-info--error\"\n      [attr.for]=\"id + '-input'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span class=\"error-icon\">\n        <gds-icon-triangle-exclamation\n          width=\"16\"\n          height=\"16\"\n          solid=\"true\"\n          *nggCoreElement\n        ></gds-icon-triangle-exclamation>\n      </span>\n\n      <span\n        *ngIf=\"error; else errorsRef\"\n        [attr.data-thook]=\"thook + '-errorlabel'\"\n        >{{ error }}</span\n      >\n      <ng-template #errorsRef>\n        <span\n          *ngIf=\"firstError as error\"\n          [attr.data-thook]=\"thook + '-errorlabel'\"\n        >\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </span>\n\n    <ng-container *ngIf=\"!inputMask && hasMaxLength && showCharacterCountdown\">\n      <span\n        *nggvCharacterCountdown=\"\n          maxlength;\n          currentLength: (inputRef?.nativeElement?.value ?? '').length;\n          charactersLeft as charactersLeft\n        \"\n        class=\"form-info\"\n        style=\"text-align: right\"\n      >\n        {{ charactersLeft }} {{ t('label.maxlength') }}\n      </span>\n    </ng-container>\n  </div>\n</ng-container>\n", styles: [":host{--sg-text-primary: #333;--sg-form-control-bg: #fff;--gds-ref-pallet-base100: hsl(0, 0%, 97%);--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686}:host *{box-sizing:border-box}:host.gds-form-item{display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0}:host.gds-form-item:not(:last-child){margin-bottom:1.5rem}:host.gds-form-item .gds-form-item__header{display:flex}:host.gds-form-item .gds-form-item__header .form-info{font-weight:400}:host.gds-form-item .gds-form-item__header button.icon.small{margin-top:-.5rem;margin-right:-.5rem}:host.gds-form-item .gds-form-item__labels{flex:1;margin-bottom:.5rem}:host.gds-form-item .gds-form-item__labels .form-info{margin-bottom:0}:host.gds-form-item .gds-form-item__labels .form-info a:link:not(.button,[aria-disabled]){color:#0062bc}:host.gds-form-item .gds-form-item__labels>*{width:100%;display:block}:host.gds-form-item .gds-form-item__expandable-info{overflow:hidden;font-size:.875rem;line-height:1.25rem;transition:height .3s cubic-bezier(.23,1,.32,1)}:host.gds-form-item .gds-form-item__expandable-info>div{padding-bottom:.5rem}:host.gds-form-item .gds-form-item__backdrop{position:absolute;inset:0;background:var(--gds-ref-pallet-base100);border-radius:2px;z-index:-1;margin:-1rem;opacity:0;transition:all .3s cubic-bezier(.23,1,.32,1);border:1px solid transparent}@media (prefers-reduced-motion: reduce){:host.gds-form-item .gds-form-item__backdrop{transition:none}}:host.gds-form-item:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-ref-pallet-base600)}:host.gds-form-item .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:1rem}:host.gds-form-item .gds-form-item__footer:not(:empty)>span{font-weight:500}:host .hide-if-empty:empty{display:none}:host input:not([type]),:host input[type=date],:host input[type=datetime],:host input[type=datetime-local],:host input[type=email],:host input[type=month],:host input[type=number],:host input[type=password],:host input[type=search],:host input[type=tel],:host input[type=text],:host input[type=time],:host input[type=url],:host input[type=week]{padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);background-color:var(--sg-form-control-bg);color:var(--sg-text-primary);min-height:2.75rem;display:flex;align-items:center;justify-content:center}:host input:not([type]):focus:not(:focus-visible),:host input[type=date]:focus:not(:focus-visible),:host input[type=datetime]:focus:not(:focus-visible),:host input[type=datetime-local]:focus:not(:focus-visible),:host input[type=email]:focus:not(:focus-visible),:host input[type=month]:focus:not(:focus-visible),:host input[type=number]:focus:not(:focus-visible),:host input[type=password]:focus:not(:focus-visible),:host input[type=search]:focus:not(:focus-visible),:host input[type=tel]:focus:not(:focus-visible),:host input[type=text]:focus:not(:focus-visible),:host input[type=time]:focus:not(:focus-visible),:host input[type=url]:focus:not(:focus-visible),:host input[type=week]:focus:not(:focus-visible){box-shadow:none;outline:0}:host input:not([type]):focus,:host input:not([type]):focus-visible,:host input[type=date]:focus,:host input[type=date]:focus-visible,:host input[type=datetime]:focus,:host input[type=datetime]:focus-visible,:host input[type=datetime-local]:focus,:host input[type=datetime-local]:focus-visible,:host input[type=email]:focus,:host input[type=email]:focus-visible,:host input[type=month]:focus,:host input[type=month]:focus-visible,:host input[type=number]:focus,:host input[type=number]:focus-visible,:host input[type=password]:focus,:host input[type=password]:focus-visible,:host input[type=search]:focus,:host input[type=search]:focus-visible,:host input[type=tel]:focus,:host input[type=tel]:focus-visible,:host input[type=text]:focus,:host input[type=text]:focus-visible,:host input[type=time]:focus,:host input[type=time]:focus-visible,:host input[type=url]:focus,:host input[type=url]:focus-visible,:host input[type=week]:focus,:host input[type=week]:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host input:not([type]).small,:host input[type=date].small,:host input[type=datetime].small,:host input[type=datetime-local].small,:host input[type=email].small,:host input[type=month].small,:host input[type=number].small,:host input[type=password].small,:host input[type=search].small,:host input[type=tel].small,:host input[type=text].small,:host input[type=time].small,:host input[type=url].small,:host input[type=week].small{min-height:2rem;padding:.25rem .75rem;line-height:1rem}@media screen and (-ms-high-contrast: active){:host input:not([type]),:host input[type=date],:host input[type=datetime],:host input[type=datetime-local],:host input[type=email],:host input[type=month],:host input[type=number],:host input[type=password],:host input[type=search],:host input[type=tel],:host input[type=text],:host input[type=time],:host input[type=url],:host input[type=week]{border:2px solid currentcolor}}:host input:not([type]):disabled,:host input:not([type]).disabled,:host input:not([type])[aria-disabled=true],:host input[type=date]:disabled,:host input[type=date].disabled,:host input[type=date][aria-disabled=true],:host input[type=datetime]:disabled,:host input[type=datetime].disabled,:host input[type=datetime][aria-disabled=true],:host input[type=datetime-local]:disabled,:host input[type=datetime-local].disabled,:host input[type=datetime-local][aria-disabled=true],:host input[type=email]:disabled,:host input[type=email].disabled,:host input[type=email][aria-disabled=true],:host input[type=month]:disabled,:host input[type=month].disabled,:host input[type=month][aria-disabled=true],:host input[type=number]:disabled,:host input[type=number].disabled,:host input[type=number][aria-disabled=true],:host input[type=password]:disabled,:host input[type=password].disabled,:host input[type=password][aria-disabled=true],:host input[type=search]:disabled,:host input[type=search].disabled,:host input[type=search][aria-disabled=true],:host input[type=tel]:disabled,:host input[type=tel].disabled,:host input[type=tel][aria-disabled=true],:host input[type=text]:disabled,:host input[type=text].disabled,:host input[type=text][aria-disabled=true],:host input[type=time]:disabled,:host input[type=time].disabled,:host input[type=time][aria-disabled=true],:host input[type=url]:disabled,:host input[type=url].disabled,:host input[type=url][aria-disabled=true],:host input[type=week]:disabled,:host input[type=week].disabled,:host input[type=week][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 input:not([type]):disabled::placeholder,:host input:not([type]).disabled::placeholder,:host input:not([type])[aria-disabled=true]::placeholder,:host input[type=date]:disabled::placeholder,:host input[type=date].disabled::placeholder,:host input[type=date][aria-disabled=true]::placeholder,:host input[type=datetime]:disabled::placeholder,:host input[type=datetime].disabled::placeholder,:host input[type=datetime][aria-disabled=true]::placeholder,:host input[type=datetime-local]:disabled::placeholder,:host input[type=datetime-local].disabled::placeholder,:host input[type=datetime-local][aria-disabled=true]::placeholder,:host input[type=email]:disabled::placeholder,:host input[type=email].disabled::placeholder,:host input[type=email][aria-disabled=true]::placeholder,:host input[type=month]:disabled::placeholder,:host input[type=month].disabled::placeholder,:host input[type=month][aria-disabled=true]::placeholder,:host input[type=number]:disabled::placeholder,:host input[type=number].disabled::placeholder,:host input[type=number][aria-disabled=true]::placeholder,:host input[type=password]:disabled::placeholder,:host input[type=password].disabled::placeholder,:host input[type=password][aria-disabled=true]::placeholder,:host input[type=search]:disabled::placeholder,:host input[type=search].disabled::placeholder,:host input[type=search][aria-disabled=true]::placeholder,:host input[type=tel]:disabled::placeholder,:host input[type=tel].disabled::placeholder,:host input[type=tel][aria-disabled=true]::placeholder,:host input[type=text]:disabled::placeholder,:host input[type=text].disabled::placeholder,:host input[type=text][aria-disabled=true]::placeholder,:host input[type=time]:disabled::placeholder,:host input[type=time].disabled::placeholder,:host input[type=time][aria-disabled=true]::placeholder,:host input[type=url]:disabled::placeholder,:host input[type=url].disabled::placeholder,:host input[type=url][aria-disabled=true]::placeholder,:host input[type=week]:disabled::placeholder,:host input[type=week].disabled::placeholder,:host input[type=week][aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host input:not([type]):hover,:host input[type=date]:hover,:host input[type=datetime]:hover,:host input[type=datetime-local]:hover,:host input[type=email]:hover,:host input[type=month]:hover,:host input[type=number]:hover,:host input[type=password]:hover,:host input[type=search]:hover,:host input[type=tel]:hover,:host input[type=text]:hover,:host input[type=time]:hover,:host input[type=url]:hover,:host input[type=week]:hover{background-color:var(--gds-ref-pallet-base100)}:host input[type=number]{-moz-appearance:textfield}:host input[type=number]::-webkit-outer-spin-button,:host input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host input{width:100%;line-height:18px;font-size:1rem;font-family:inherit}:host .gds-input-wrapper{position:relative;transition:all .2s ease-in-out,outline-offset 0s,outline-width 0s;border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;height:2.625rem;display:flex}:host .gds-input-wrapper:before{background:transparent;border-radius:0 0 4px 4px;clip-path:inset(4px 0 0 0);content:\"\";display:block;height:4px;position:absolute;transition:.3s ease-in-out;width:100%}:host .gds-input-wrapper:before{bottom:0}.is-invalid :host .gds-input-wrapper{color:var(--intent-danger-background);opacity:1}.is-invalid :host .gds-input-wrapper:before{background:var(--intent-danger-background);clip-path:inset(1px 0 0 0)}:host .gds-input-wrapper *,:host .gds-input-wrapper *:before,:host .gds-input-wrapper *:after{box-sizing:border-box}:host .gds-input-wrapper .input-group-prefix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-right-radius:0!important;border-bottom-right-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-prefix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .gds-input-wrapper .input-group-prefix{min-width:initial}}:host .gds-input-wrapper .input-group-prefix:empty{display:none}:host .gds-input-wrapper .input-group-suffix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-suffix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .gds-input-wrapper .input-group-suffix{min-width:initial}}:host .gds-input-wrapper .input-group-suffix:empty{display:none}:host .gds-input-wrapper .input-group{width:100%}:host .gds-input-wrapper .input-group input{outline:none;min-height:2.5rem;height:2.625rem;line-height:1.5;font-size:1rem;font-family:inherit;border:none;min-height:2.375rem;width:100%}:host .gds-input-wrapper .input-group input *,:host .gds-input-wrapper .input-group input *:before,:host .gds-input-wrapper .input-group input *:after{box-sizing:border-box}:host .gds-input-wrapper .input-group input:hover{border-color:#41b0ee}:host .gds-input-wrapper .input-group input:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .gds-input-wrapper .input-group input:active{border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]::placeholder{color:#cecece}:host .gds-input-wrapper .input-group input:not(:focus){border-right:none;padding-right:0}:host .gds-input-wrapper .input-group input:focus{padding-right:0}:host .gds-input-wrapper:has(.input-group-prefix:not(:empty)) .input-group input{border-bottom-left-radius:0;border-top-left-radius:0}:host .gds-input-wrapper:has(.input-group-suffix:not(:empty)) .input-group input{border-bottom-right-radius:0;border-top-right-radius:0}:host label:is(label),:host .label:is(label),:host legend:is(label){margin-bottom:0}:host label.form-control,:host .label.form-control,:host legend.form-control{width:fit-content}@supports (-moz-appearance: none){:host label.form-control:focus:not(:focus-visible),:host .label.form-control:focus:not(:focus-visible),:host legend.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:focus,:host label.form-control:focus-within,:host .label.form-control:focus,:host .label.form-control:focus-within,:host legend.form-control:focus,:host legend.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host label:not(.form-control),:host .label:not(.form-control),:host legend:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host label+input,:host label+textarea,fieldset :host label+div,:host label+button,:host label+.group-stepper,:host label+.stepper-wrapper,:host label+.group,:host .label+input,:host .label+textarea,fieldset :host .label+div,:host .label+button,:host .label+.group-stepper,:host .label+.stepper-wrapper,:host .label+.group,:host legend+input,:host legend+textarea,fieldset :host legend+div,:host legend+button,:host legend+.group-stepper,:host legend+.stepper-wrapper,:host legend+.group{margin-top:.5rem}:host label+.form-info,:host .label+.form-info,:host legend+.form-info{margin-bottom:.5rem}:host .gds-field-label--optional{font-weight:400}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}:host .gds-form-item__footer .form-info{font-weight:500}:host .gds-form-item__footer .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .form-info--error .error-icon{margin-top:.128rem;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4$1.NggvInputMaskDirective, selector: "[nggvInputMask]", inputs: ["nggvInputMask"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.CharacterCountdownDirective, selector: "[nggvCharacterCountdown]", inputs: ["nggvCharacterCountdown", "nggvCharacterCountdownCurrentLength"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.InputMaskFormatPipe, name: "nggvInputMaskFormat" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvInputComponent, selector: "nggv-input", inputs: { thook: "thook", type: "type", placeholder: "placeholder", autocomplete: "autocomplete", readonly: "readonly", email: "email", min: "min", max: "max", step: "step", minLength: "minLength", minlength: "minlength", maxLength: "maxLength", maxlength: "maxlength", showCharacterCountdown: "showCharacterCountdown", pattern: "pattern", debounceTime: "debounceTime", inputMask: "inputMask" }, outputs: { nggvInput: "nggvInput" }, host: { properties: { "class": "this.class", "attr.data-thook": "this.thook" } }, usesInheritance: true, ngImport: i0, template: "<!-- LABEL -->\n<label\n  [id]=\"id + '-label'\"\n  class=\"gds-field-label hide-if-empty\"\n  [attr.for]=\"id + '-input'\"\n  *transloco=\"let t; read: scope\"\n>\n  <ng-template\n    *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n  ></ng-template>\n  <ng-template #basicLabelContentTpl>\n    <!-- to trigger css:empty if no label was added -->\n    <ng-container *ngIf=\"label\">\n      {{ label }}\n      <span\n        *ngIf=\"optional === true || (required !== true && optional !== false)\"\n        class=\"gds-field-label--optional\"\n      >\n        ({{ t('label.optional') }})\n      </span>\n    </ng-container>\n  </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div class=\"form-info description hide-if-empty\" *ngIf=\"descriptionIsVisible\">\n  {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n  <div\n    [id]=\"id + '-input'\"\n    class=\"nggv-field--locked\"\n    [attr.name]=\"name\"\n    [attr.value]=\"state\"\n    [attr.role]=\"role\"\n  >\n    <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n    <ng-container *ngIf=\"state\">\n      <ng-container *ngIf=\"!inputMask\">\n        {{ state }}\n      </ng-container>\n      <ng-container *ngIf=\"!!inputMask\">\n        {{ state | nggvInputMaskFormat: inputMask }}\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-container>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n  <div class=\"gds-input-wrapper\" [class.nggv-field--error]=\"invalid\">\n    <div class=\"input-group-prefix hide-if-empty\">\n      <ng-content select=\"[slot='prefix']\"></ng-content>\n    </div>\n\n    <!-- INPUT FIELD -->\n    <div class=\"input-group\" *ngIf=\"!inputMask\">\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        [attr.type]=\"type\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\n        [attr.email]=\"email\"\n        [attr.aria-describedby]=\"id + '-message'\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [step]=\"step\"\n        [attr.maxlength]=\"maxlength\"\n        [attr.minlength]=\"minlength\"\n        [pattern]=\"pattern\"\n        title=\"\"\n        [disabled]=\"disabled\"\n        [autocomplete]=\"autocomplete\"\n        [autofocus]=\"autofocus\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [value]=\"state\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n    </div>\n\n    <!-- INPUT FIELD WITH MASK -->\n    <div\n      class=\"input-group\"\n      *ngIf=\"!!inputMask && (hideInput$ | async) === false\"\n    >\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        autocomplete=\"off\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [attr.aria-describedby]=\"id + '-message'\"\n        [nggvInputMask]=\"inputMask\"\n        title=\"\"\n        [formControl]=\"control\"\n      />\n    </div>\n\n    <div class=\"input-group-suffix hide-if-empty\">\n      <ng-content select=\"[slot='suffix']\"></ng-content>\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <!-- ERRORS -->\n  <div\n    class=\"gds-form-item__footer error-wrapper\"\n    *transloco=\"let t; read: scope\"\n  >\n    <span\n      class=\"form-info form-info--error\"\n      [attr.for]=\"id + '-input'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span class=\"error-icon\">\n        <gds-icon-triangle-exclamation\n          width=\"16\"\n          height=\"16\"\n          solid=\"true\"\n          *nggCoreElement\n        ></gds-icon-triangle-exclamation>\n      </span>\n\n      <span\n        *ngIf=\"error; else errorsRef\"\n        [attr.data-thook]=\"thook + '-errorlabel'\"\n        >{{ error }}</span\n      >\n      <ng-template #errorsRef>\n        <span\n          *ngIf=\"firstError as error\"\n          [attr.data-thook]=\"thook + '-errorlabel'\"\n        >\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </span>\n\n    <ng-container *ngIf=\"!inputMask && hasMaxLength && showCharacterCountdown\">\n      <span\n        *nggvCharacterCountdown=\"\n          maxlength;\n          currentLength: (inputRef?.nativeElement?.value ?? '').length;\n          charactersLeft as charactersLeft\n        \"\n        class=\"form-info form-info--countdown\"\n        style=\"text-align: right\"\n      >\n        {{ charactersLeft }} {{ t('label.maxlength') }}\n      </span>\n    </ng-container>\n  </div>\n</ng-container>\n", styles: [":host{--sg-text-primary: #333;--sg-form-control-bg: #fff;--gds-ref-pallet-base100: hsl(0, 0%, 97%);--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686}:host *{box-sizing:border-box}:host.gds-form-item{display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0}:host.gds-form-item:not(:last-child){margin-bottom:1.5rem}:host.gds-form-item .gds-form-item__header{display:flex}:host.gds-form-item .gds-form-item__header .form-info{font-weight:400}:host.gds-form-item .gds-form-item__header button.icon.small{margin-top:-.5rem;margin-right:-.5rem}:host.gds-form-item .gds-form-item__labels{flex:1;margin-bottom:.5rem}:host.gds-form-item .gds-form-item__labels .form-info{margin-bottom:0}:host.gds-form-item .gds-form-item__labels .form-info a:link:not(.button,[aria-disabled]){color:#0062bc}:host.gds-form-item .gds-form-item__labels>*{width:100%;display:block}:host.gds-form-item .gds-form-item__expandable-info{overflow:hidden;font-size:.875rem;line-height:1.25rem;transition:height .3s cubic-bezier(.23,1,.32,1)}:host.gds-form-item .gds-form-item__expandable-info>div{padding-bottom:.5rem}:host.gds-form-item .gds-form-item__backdrop{position:absolute;inset:0;background:var(--gds-ref-pallet-base100);border-radius:2px;z-index:-1;margin:-1rem;opacity:0;transition:all .3s cubic-bezier(.23,1,.32,1);border:1px solid transparent}@media (prefers-reduced-motion: reduce){:host.gds-form-item .gds-form-item__backdrop{transition:none}}:host.gds-form-item:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-ref-pallet-base600)}:host.gds-form-item .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:.5rem}:host.gds-form-item .gds-form-item__footer:not(:empty)>span,:host.gds-form-item .gds-form-item__footer:not(:empty)>.form-info{font-weight:500;line-height:1.125}:host.gds-form-item .gds-form-item__footer:not(:empty) .form-info{font-weight:500}:host.gds-form-item .gds-form-item__footer:not(:empty) .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host.gds-form-item .gds-form-item__footer:not(:empty) .form-info--error .error-icon{margin-top:.128rem;align-items:center}:host.gds-form-item .gds-form-item__footer:not(:empty)>.form-info--countdown{font-weight:400}:host .hide-if-empty:empty{display:none}:host input:not([type]),:host input[type=date],:host input[type=datetime],:host input[type=datetime-local],:host input[type=email],:host input[type=month],:host input[type=number],:host input[type=password],:host input[type=search],:host input[type=tel],:host input[type=text],:host input[type=time],:host input[type=url],:host input[type=week]{padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);background-color:var(--sg-form-control-bg);color:var(--sg-text-primary);min-height:2.75rem;display:flex;align-items:center;justify-content:center}:host input:not([type]):focus:not(:focus-visible),:host input[type=date]:focus:not(:focus-visible),:host input[type=datetime]:focus:not(:focus-visible),:host input[type=datetime-local]:focus:not(:focus-visible),:host input[type=email]:focus:not(:focus-visible),:host input[type=month]:focus:not(:focus-visible),:host input[type=number]:focus:not(:focus-visible),:host input[type=password]:focus:not(:focus-visible),:host input[type=search]:focus:not(:focus-visible),:host input[type=tel]:focus:not(:focus-visible),:host input[type=text]:focus:not(:focus-visible),:host input[type=time]:focus:not(:focus-visible),:host input[type=url]:focus:not(:focus-visible),:host input[type=week]:focus:not(:focus-visible){box-shadow:none;outline:0}:host input:not([type]):focus,:host input:not([type]):focus-visible,:host input[type=date]:focus,:host input[type=date]:focus-visible,:host input[type=datetime]:focus,:host input[type=datetime]:focus-visible,:host input[type=datetime-local]:focus,:host input[type=datetime-local]:focus-visible,:host input[type=email]:focus,:host input[type=email]:focus-visible,:host input[type=month]:focus,:host input[type=month]:focus-visible,:host input[type=number]:focus,:host input[type=number]:focus-visible,:host input[type=password]:focus,:host input[type=password]:focus-visible,:host input[type=search]:focus,:host input[type=search]:focus-visible,:host input[type=tel]:focus,:host input[type=tel]:focus-visible,:host input[type=text]:focus,:host input[type=text]:focus-visible,:host input[type=time]:focus,:host input[type=time]:focus-visible,:host input[type=url]:focus,:host input[type=url]:focus-visible,:host input[type=week]:focus,:host input[type=week]:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host input:not([type]).small,:host input[type=date].small,:host input[type=datetime].small,:host input[type=datetime-local].small,:host input[type=email].small,:host input[type=month].small,:host input[type=number].small,:host input[type=password].small,:host input[type=search].small,:host input[type=tel].small,:host input[type=text].small,:host input[type=time].small,:host input[type=url].small,:host input[type=week].small{min-height:2rem;padding:.25rem .75rem;line-height:1rem}@media screen and (-ms-high-contrast: active){:host input:not([type]),:host input[type=date],:host input[type=datetime],:host input[type=datetime-local],:host input[type=email],:host input[type=month],:host input[type=number],:host input[type=password],:host input[type=search],:host input[type=tel],:host input[type=text],:host input[type=time],:host input[type=url],:host input[type=week]{border:2px solid currentcolor}}:host input:not([type]):disabled,:host input:not([type]).disabled,:host input:not([type])[aria-disabled=true],:host input[type=date]:disabled,:host input[type=date].disabled,:host input[type=date][aria-disabled=true],:host input[type=datetime]:disabled,:host input[type=datetime].disabled,:host input[type=datetime][aria-disabled=true],:host input[type=datetime-local]:disabled,:host input[type=datetime-local].disabled,:host input[type=datetime-local][aria-disabled=true],:host input[type=email]:disabled,:host input[type=email].disabled,:host input[type=email][aria-disabled=true],:host input[type=month]:disabled,:host input[type=month].disabled,:host input[type=month][aria-disabled=true],:host input[type=number]:disabled,:host input[type=number].disabled,:host input[type=number][aria-disabled=true],:host input[type=password]:disabled,:host input[type=password].disabled,:host input[type=password][aria-disabled=true],:host input[type=search]:disabled,:host input[type=search].disabled,:host input[type=search][aria-disabled=true],:host input[type=tel]:disabled,:host input[type=tel].disabled,:host input[type=tel][aria-disabled=true],:host input[type=text]:disabled,:host input[type=text].disabled,:host input[type=text][aria-disabled=true],:host input[type=time]:disabled,:host input[type=time].disabled,:host input[type=time][aria-disabled=true],:host input[type=url]:disabled,:host input[type=url].disabled,:host input[type=url][aria-disabled=true],:host input[type=week]:disabled,:host input[type=week].disabled,:host input[type=week][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 input:not([type]):disabled::placeholder,:host input:not([type]).disabled::placeholder,:host input:not([type])[aria-disabled=true]::placeholder,:host input[type=date]:disabled::placeholder,:host input[type=date].disabled::placeholder,:host input[type=date][aria-disabled=true]::placeholder,:host input[type=datetime]:disabled::placeholder,:host input[type=datetime].disabled::placeholder,:host input[type=datetime][aria-disabled=true]::placeholder,:host input[type=datetime-local]:disabled::placeholder,:host input[type=datetime-local].disabled::placeholder,:host input[type=datetime-local][aria-disabled=true]::placeholder,:host input[type=email]:disabled::placeholder,:host input[type=email].disabled::placeholder,:host input[type=email][aria-disabled=true]::placeholder,:host input[type=month]:disabled::placeholder,:host input[type=month].disabled::placeholder,:host input[type=month][aria-disabled=true]::placeholder,:host input[type=number]:disabled::placeholder,:host input[type=number].disabled::placeholder,:host input[type=number][aria-disabled=true]::placeholder,:host input[type=password]:disabled::placeholder,:host input[type=password].disabled::placeholder,:host input[type=password][aria-disabled=true]::placeholder,:host input[type=search]:disabled::placeholder,:host input[type=search].disabled::placeholder,:host input[type=search][aria-disabled=true]::placeholder,:host input[type=tel]:disabled::placeholder,:host input[type=tel].disabled::placeholder,:host input[type=tel][aria-disabled=true]::placeholder,:host input[type=text]:disabled::placeholder,:host input[type=text].disabled::placeholder,:host input[type=text][aria-disabled=true]::placeholder,:host input[type=time]:disabled::placeholder,:host input[type=time].disabled::placeholder,:host input[type=time][aria-disabled=true]::placeholder,:host input[type=url]:disabled::placeholder,:host input[type=url].disabled::placeholder,:host input[type=url][aria-disabled=true]::placeholder,:host input[type=week]:disabled::placeholder,:host input[type=week].disabled::placeholder,:host input[type=week][aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host input:not([type]):hover,:host input[type=date]:hover,:host input[type=datetime]:hover,:host input[type=datetime-local]:hover,:host input[type=email]:hover,:host input[type=month]:hover,:host input[type=number]:hover,:host input[type=password]:hover,:host input[type=search]:hover,:host input[type=tel]:hover,:host input[type=text]:hover,:host input[type=time]:hover,:host input[type=url]:hover,:host input[type=week]:hover{background-color:var(--gds-ref-pallet-base100)}:host input[type=number]{-moz-appearance:textfield}:host input[type=number]::-webkit-outer-spin-button,:host input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host input{width:100%;line-height:18px;font-size:1rem;font-family:inherit}:host .gds-input-wrapper{position:relative;transition:all .2s ease-in-out,outline-offset 0s,outline-width 0s;border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;height:2.625rem;display:flex}:host .gds-input-wrapper:before{background:transparent;border-radius:0 0 4px 4px;clip-path:inset(4px 0 0 0);content:\"\";display:block;height:4px;position:absolute;transition:.3s ease-in-out;width:100%}:host .gds-input-wrapper:before{bottom:0}.is-invalid :host .gds-input-wrapper{color:var(--intent-danger-background);opacity:1}.is-invalid :host .gds-input-wrapper:before{background:var(--intent-danger-background);clip-path:inset(1px 0 0 0)}:host .gds-input-wrapper *,:host .gds-input-wrapper *:before,:host .gds-input-wrapper *:after{box-sizing:border-box}:host .gds-input-wrapper .input-group-prefix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-right-radius:0!important;border-bottom-right-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-prefix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .gds-input-wrapper .input-group-prefix{min-width:initial}}:host .gds-input-wrapper .input-group-prefix:empty{display:none}:host .gds-input-wrapper .input-group-suffix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-suffix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .gds-input-wrapper .input-group-suffix{min-width:initial}}:host .gds-input-wrapper .input-group-suffix:empty{display:none}:host .gds-input-wrapper .input-group{width:100%}:host .gds-input-wrapper .input-group input{outline:none;min-height:2.5rem;height:2.625rem;line-height:1.5;font-size:1rem;font-family:inherit;border:none;min-height:2.375rem;width:100%}:host .gds-input-wrapper .input-group input *,:host .gds-input-wrapper .input-group input *:before,:host .gds-input-wrapper .input-group input *:after{box-sizing:border-box}:host .gds-input-wrapper .input-group input:hover{border-color:#41b0ee}:host .gds-input-wrapper .input-group input:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .gds-input-wrapper .input-group input:active{border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]::placeholder{color:#cecece}:host .gds-input-wrapper .input-group input:not(:focus){border-right:none;padding-right:0}:host .gds-input-wrapper .input-group input:focus{padding-right:0}:host .gds-input-wrapper:has(.input-group-prefix:not(:empty)) .input-group input{border-bottom-left-radius:0;border-top-left-radius:0}:host .gds-input-wrapper:has(.input-group-suffix:not(:empty)) .input-group input{border-bottom-right-radius:0;border-top-right-radius:0}:host label:is(label),:host .label:is(label),:host legend:is(label){margin-bottom:0}:host label.form-control,:host .label.form-control,:host legend.form-control{width:fit-content}@supports (-moz-appearance: none){:host label.form-control:focus:not(:focus-visible),:host .label.form-control:focus:not(:focus-visible),:host legend.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:focus,:host label.form-control:focus-within,:host .label.form-control:focus,:host .label.form-control:focus-within,:host legend.form-control:focus,:host legend.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host label:not(.form-control),:host .label:not(.form-control),:host legend:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host label+input,:host label+textarea,fieldset :host label+div,:host label+button,:host label+.group-stepper,:host label+.stepper-wrapper,:host label+.group,:host .label+input,:host .label+textarea,fieldset :host .label+div,:host .label+button,:host .label+.group-stepper,:host .label+.stepper-wrapper,:host .label+.group,:host legend+input,:host legend+textarea,fieldset :host legend+div,:host legend+button,:host legend+.group-stepper,:host legend+.stepper-wrapper,:host legend+.group{margin-top:.5rem}:host label+.form-info,:host .label+.form-info,:host legend+.form-info{margin-bottom:.5rem}:host .gds-field-label--optional{font-weight:400}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4$1.NggvInputMaskDirective, selector: "[nggvInputMask]", inputs: ["nggvInputMask"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.CharacterCountdownDirective, selector: "[nggvCharacterCountdown]", inputs: ["nggvCharacterCountdown", "nggvCharacterCountdownCurrentLength"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.InputMaskFormatPipe, name: "nggvInputMaskFormat" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nggv-input', template: "<!-- LABEL -->\n<label\n  [id]=\"id + '-label'\"\n  class=\"gds-field-label hide-if-empty\"\n  [attr.for]=\"id + '-input'\"\n  *transloco=\"let t; read: scope\"\n>\n  <ng-template\n    *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n  ></ng-template>\n  <ng-template #basicLabelContentTpl>\n    <!-- to trigger css:empty if no label was added -->\n    <ng-container *ngIf=\"label\">\n      {{ label }}\n      <span\n        *ngIf=\"optional === true || (required !== true && optional !== false)\"\n        class=\"gds-field-label--optional\"\n      >\n        ({{ t('label.optional') }})\n      </span>\n    </ng-container>\n  </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div class=\"form-info description hide-if-empty\" *ngIf=\"descriptionIsVisible\">\n  {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n  <div\n    [id]=\"id + '-input'\"\n    class=\"nggv-field--locked\"\n    [attr.name]=\"name\"\n    [attr.value]=\"state\"\n    [attr.role]=\"role\"\n  >\n    <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n    <ng-container *ngIf=\"state\">\n      <ng-container *ngIf=\"!inputMask\">\n        {{ state }}\n      </ng-container>\n      <ng-container *ngIf=\"!!inputMask\">\n        {{ state | nggvInputMaskFormat: inputMask }}\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-container>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n  <div class=\"gds-input-wrapper\" [class.nggv-field--error]=\"invalid\">\n    <div class=\"input-group-prefix hide-if-empty\">\n      <ng-content select=\"[slot='prefix']\"></ng-content>\n    </div>\n\n    <!-- INPUT FIELD -->\n    <div class=\"input-group\" *ngIf=\"!inputMask\">\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        [attr.type]=\"type\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\n        [attr.email]=\"email\"\n        [attr.aria-describedby]=\"id + '-message'\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [step]=\"step\"\n        [attr.maxlength]=\"maxlength\"\n        [attr.minlength]=\"minlength\"\n        [pattern]=\"pattern\"\n        title=\"\"\n        [disabled]=\"disabled\"\n        [autocomplete]=\"autocomplete\"\n        [autofocus]=\"autofocus\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [value]=\"state\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n    </div>\n\n    <!-- INPUT FIELD WITH MASK -->\n    <div\n      class=\"input-group\"\n      *ngIf=\"!!inputMask && (hideInput$ | async) === false\"\n    >\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        autocomplete=\"off\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [attr.aria-describedby]=\"id + '-message'\"\n        [nggvInputMask]=\"inputMask\"\n        title=\"\"\n        [formControl]=\"control\"\n      />\n    </div>\n\n    <div class=\"input-group-suffix hide-if-empty\">\n      <ng-content select=\"[slot='suffix']\"></ng-content>\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <!-- ERRORS -->\n  <div\n    class=\"gds-form-item__footer error-wrapper\"\n    *transloco=\"let t; read: scope\"\n  >\n    <span\n      class=\"form-info form-info--error\"\n      [attr.for]=\"id + '-input'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span class=\"error-icon\">\n        <gds-icon-triangle-exclamation\n          width=\"16\"\n          height=\"16\"\n          solid=\"true\"\n          *nggCoreElement\n        ></gds-icon-triangle-exclamation>\n      </span>\n\n      <span\n        *ngIf=\"error; else errorsRef\"\n        [attr.data-thook]=\"thook + '-errorlabel'\"\n        >{{ error }}</span\n      >\n      <ng-template #errorsRef>\n        <span\n          *ngIf=\"firstError as error\"\n          [attr.data-thook]=\"thook + '-errorlabel'\"\n        >\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </span>\n\n    <ng-container *ngIf=\"!inputMask && hasMaxLength && showCharacterCountdown\">\n      <span\n        *nggvCharacterCountdown=\"\n          maxlength;\n          currentLength: (inputRef?.nativeElement?.value ?? '').length;\n          charactersLeft as charactersLeft\n        \"\n        class=\"form-info\"\n        style=\"text-align: right\"\n      >\n        {{ charactersLeft }} {{ t('label.maxlength') }}\n      </span>\n    </ng-container>\n  </div>\n</ng-container>\n", styles: [":host{--sg-text-primary: #333;--sg-form-control-bg: #fff;--gds-ref-pallet-base100: hsl(0, 0%, 97%);--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686}:host *{box-sizing:border-box}:host.gds-form-item{display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0}:host.gds-form-item:not(:last-child){margin-bottom:1.5rem}:host.gds-form-item .gds-form-item__header{display:flex}:host.gds-form-item .gds-form-item__header .form-info{font-weight:400}:host.gds-form-item .gds-form-item__header button.icon.small{margin-top:-.5rem;margin-right:-.5rem}:host.gds-form-item .gds-form-item__labels{flex:1;margin-bottom:.5rem}:host.gds-form-item .gds-form-item__labels .form-info{margin-bottom:0}:host.gds-form-item .gds-form-item__labels .form-info a:link:not(.button,[aria-disabled]){color:#0062bc}:host.gds-form-item .gds-form-item__labels>*{width:100%;display:block}:host.gds-form-item .gds-form-item__expandable-info{overflow:hidden;font-size:.875rem;line-height:1.25rem;transition:height .3s cubic-bezier(.23,1,.32,1)}:host.gds-form-item .gds-form-item__expandable-info>div{padding-bottom:.5rem}:host.gds-form-item .gds-form-item__backdrop{position:absolute;inset:0;background:var(--gds-ref-pallet-base100);border-radius:2px;z-index:-1;margin:-1rem;opacity:0;transition:all .3s cubic-bezier(.23,1,.32,1);border:1px solid transparent}@media (prefers-reduced-motion: reduce){:host.gds-form-item .gds-form-item__backdrop{transition:none}}:host.gds-form-item:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-ref-pallet-base600)}:host.gds-form-item .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:1rem}:host.gds-form-item .gds-form-item__footer:not(:empty)>span{font-weight:500}:host .hide-if-empty:empty{display:none}:host input:not([type]),:host input[type=date],:host input[type=datetime],:host input[type=datetime-local],:host input[type=email],:host input[type=month],:host input[type=number],:host input[type=password],:host input[type=search],:host input[type=tel],:host input[type=text],:host input[type=time],:host input[type=url],:host input[type=week]{padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);background-color:var(--sg-form-control-bg);color:var(--sg-text-primary);min-height:2.75rem;display:flex;align-items:center;justify-content:center}:host input:not([type]):focus:not(:focus-visible),:host input[type=date]:focus:not(:focus-visible),:host input[type=datetime]:focus:not(:focus-visible),:host input[type=datetime-local]:focus:not(:focus-visible),:host input[type=email]:focus:not(:focus-visible),:host input[type=month]:focus:not(:focus-visible),:host input[type=number]:focus:not(:focus-visible),:host input[type=password]:focus:not(:focus-visible),:host input[type=search]:focus:not(:focus-visible),:host input[type=tel]:focus:not(:focus-visible),:host input[type=text]:focus:not(:focus-visible),:host input[type=time]:focus:not(:focus-visible),:host input[type=url]:focus:not(:focus-visible),:host input[type=week]:focus:not(:focus-visible){box-shadow:none;outline:0}:host input:not([type]):focus,:host input:not([type]):focus-visible,:host input[type=date]:focus,:host input[type=date]:focus-visible,:host input[type=datetime]:focus,:host input[type=datetime]:focus-visible,:host input[type=datetime-local]:focus,:host input[type=datetime-local]:focus-visible,:host input[type=email]:focus,:host input[type=email]:focus-visible,:host input[type=month]:focus,:host input[type=month]:focus-visible,:host input[type=number]:focus,:host input[type=number]:focus-visible,:host input[type=password]:focus,:host input[type=password]:focus-visible,:host input[type=search]:focus,:host input[type=search]:focus-visible,:host input[type=tel]:focus,:host input[type=tel]:focus-visible,:host input[type=text]:focus,:host input[type=text]:focus-visible,:host input[type=time]:focus,:host input[type=time]:focus-visible,:host input[type=url]:focus,:host input[type=url]:focus-visible,:host input[type=week]:focus,:host input[type=week]:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host input:not([type]).small,:host input[type=date].small,:host input[type=datetime].small,:host input[type=datetime-local].small,:host input[type=email].small,:host input[type=month].small,:host input[type=number].small,:host input[type=password].small,:host input[type=search].small,:host input[type=tel].small,:host input[type=text].small,:host input[type=time].small,:host input[type=url].small,:host input[type=week].small{min-height:2rem;padding:.25rem .75rem;line-height:1rem}@media screen and (-ms-high-contrast: active){:host input:not([type]),:host input[type=date],:host input[type=datetime],:host input[type=datetime-local],:host input[type=email],:host input[type=month],:host input[type=number],:host input[type=password],:host input[type=search],:host input[type=tel],:host input[type=text],:host input[type=time],:host input[type=url],:host input[type=week]{border:2px solid currentcolor}}:host input:not([type]):disabled,:host input:not([type]).disabled,:host input:not([type])[aria-disabled=true],:host input[type=date]:disabled,:host input[type=date].disabled,:host input[type=date][aria-disabled=true],:host input[type=datetime]:disabled,:host input[type=datetime].disabled,:host input[type=datetime][aria-disabled=true],:host input[type=datetime-local]:disabled,:host input[type=datetime-local].disabled,:host input[type=datetime-local][aria-disabled=true],:host input[type=email]:disabled,:host input[type=email].disabled,:host input[type=email][aria-disabled=true],:host input[type=month]:disabled,:host input[type=month].disabled,:host input[type=month][aria-disabled=true],:host input[type=number]:disabled,:host input[type=number].disabled,:host input[type=number][aria-disabled=true],:host input[type=password]:disabled,:host input[type=password].disabled,:host input[type=password][aria-disabled=true],:host input[type=search]:disabled,:host input[type=search].disabled,:host input[type=search][aria-disabled=true],:host input[type=tel]:disabled,:host input[type=tel].disabled,:host input[type=tel][aria-disabled=true],:host input[type=text]:disabled,:host input[type=text].disabled,:host input[type=text][aria-disabled=true],:host input[type=time]:disabled,:host input[type=time].disabled,:host input[type=time][aria-disabled=true],:host input[type=url]:disabled,:host input[type=url].disabled,:host input[type=url][aria-disabled=true],:host input[type=week]:disabled,:host input[type=week].disabled,:host input[type=week][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 input:not([type]):disabled::placeholder,:host input:not([type]).disabled::placeholder,:host input:not([type])[aria-disabled=true]::placeholder,:host input[type=date]:disabled::placeholder,:host input[type=date].disabled::placeholder,:host input[type=date][aria-disabled=true]::placeholder,:host input[type=datetime]:disabled::placeholder,:host input[type=datetime].disabled::placeholder,:host input[type=datetime][aria-disabled=true]::placeholder,:host input[type=datetime-local]:disabled::placeholder,:host input[type=datetime-local].disabled::placeholder,:host input[type=datetime-local][aria-disabled=true]::placeholder,:host input[type=email]:disabled::placeholder,:host input[type=email].disabled::placeholder,:host input[type=email][aria-disabled=true]::placeholder,:host input[type=month]:disabled::placeholder,:host input[type=month].disabled::placeholder,:host input[type=month][aria-disabled=true]::placeholder,:host input[type=number]:disabled::placeholder,:host input[type=number].disabled::placeholder,:host input[type=number][aria-disabled=true]::placeholder,:host input[type=password]:disabled::placeholder,:host input[type=password].disabled::placeholder,:host input[type=password][aria-disabled=true]::placeholder,:host input[type=search]:disabled::placeholder,:host input[type=search].disabled::placeholder,:host input[type=search][aria-disabled=true]::placeholder,:host input[type=tel]:disabled::placeholder,:host input[type=tel].disabled::placeholder,:host input[type=tel][aria-disabled=true]::placeholder,:host input[type=text]:disabled::placeholder,:host input[type=text].disabled::placeholder,:host input[type=text][aria-disabled=true]::placeholder,:host input[type=time]:disabled::placeholder,:host input[type=time].disabled::placeholder,:host input[type=time][aria-disabled=true]::placeholder,:host input[type=url]:disabled::placeholder,:host input[type=url].disabled::placeholder,:host input[type=url][aria-disabled=true]::placeholder,:host input[type=week]:disabled::placeholder,:host input[type=week].disabled::placeholder,:host input[type=week][aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host input:not([type]):hover,:host input[type=date]:hover,:host input[type=datetime]:hover,:host input[type=datetime-local]:hover,:host input[type=email]:hover,:host input[type=month]:hover,:host input[type=number]:hover,:host input[type=password]:hover,:host input[type=search]:hover,:host input[type=tel]:hover,:host input[type=text]:hover,:host input[type=time]:hover,:host input[type=url]:hover,:host input[type=week]:hover{background-color:var(--gds-ref-pallet-base100)}:host input[type=number]{-moz-appearance:textfield}:host input[type=number]::-webkit-outer-spin-button,:host input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host input{width:100%;line-height:18px;font-size:1rem;font-family:inherit}:host .gds-input-wrapper{position:relative;transition:all .2s ease-in-out,outline-offset 0s,outline-width 0s;border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;height:2.625rem;display:flex}:host .gds-input-wrapper:before{background:transparent;border-radius:0 0 4px 4px;clip-path:inset(4px 0 0 0);content:\"\";display:block;height:4px;position:absolute;transition:.3s ease-in-out;width:100%}:host .gds-input-wrapper:before{bottom:0}.is-invalid :host .gds-input-wrapper{color:var(--intent-danger-background);opacity:1}.is-invalid :host .gds-input-wrapper:before{background:var(--intent-danger-background);clip-path:inset(1px 0 0 0)}:host .gds-input-wrapper *,:host .gds-input-wrapper *:before,:host .gds-input-wrapper *:after{box-sizing:border-box}:host .gds-input-wrapper .input-group-prefix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-right-radius:0!important;border-bottom-right-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-prefix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .gds-input-wrapper .input-group-prefix{min-width:initial}}:host .gds-input-wrapper .input-group-prefix:empty{display:none}:host .gds-input-wrapper .input-group-suffix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-suffix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .gds-input-wrapper .input-group-suffix{min-width:initial}}:host .gds-input-wrapper .input-group-suffix:empty{display:none}:host .gds-input-wrapper .input-group{width:100%}:host .gds-input-wrapper .input-group input{outline:none;min-height:2.5rem;height:2.625rem;line-height:1.5;font-size:1rem;font-family:inherit;border:none;min-height:2.375rem;width:100%}:host .gds-input-wrapper .input-group input *,:host .gds-input-wrapper .input-group input *:before,:host .gds-input-wrapper .input-group input *:after{box-sizing:border-box}:host .gds-input-wrapper .input-group input:hover{border-color:#41b0ee}:host .gds-input-wrapper .input-group input:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .gds-input-wrapper .input-group input:active{border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]::placeholder{color:#cecece}:host .gds-input-wrapper .input-group input:not(:focus){border-right:none;padding-right:0}:host .gds-input-wrapper .input-group input:focus{padding-right:0}:host .gds-input-wrapper:has(.input-group-prefix:not(:empty)) .input-group input{border-bottom-left-radius:0;border-top-left-radius:0}:host .gds-input-wrapper:has(.input-group-suffix:not(:empty)) .input-group input{border-bottom-right-radius:0;border-top-right-radius:0}:host label:is(label),:host .label:is(label),:host legend:is(label){margin-bottom:0}:host label.form-control,:host .label.form-control,:host legend.form-control{width:fit-content}@supports (-moz-appearance: none){:host label.form-control:focus:not(:focus-visible),:host .label.form-control:focus:not(:focus-visible),:host legend.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:focus,:host label.form-control:focus-within,:host .label.form-control:focus,:host .label.form-control:focus-within,:host legend.form-control:focus,:host legend.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host label:not(.form-control),:host .label:not(.form-control),:host legend:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host label+input,:host label+textarea,fieldset :host label+div,:host label+button,:host label+.group-stepper,:host label+.stepper-wrapper,:host label+.group,:host .label+input,:host .label+textarea,fieldset :host .label+div,:host .label+button,:host .label+.group-stepper,:host .label+.stepper-wrapper,:host .label+.group,:host legend+input,:host legend+textarea,fieldset :host legend+div,:host legend+button,:host legend+.group-stepper,:host legend+.stepper-wrapper,:host legend+.group{margin-top:.5rem}:host label+.form-info,:host .label+.form-info,:host legend+.form-info{margin-bottom:.5rem}:host .gds-field-label--optional{font-weight:400}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}:host .gds-form-item__footer .form-info{font-weight:500}:host .gds-form-item__footer .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .form-info--error .error-icon{margin-top:.128rem;align-items:center}\n"] }]
+            args: [{ selector: 'nggv-input', template: "<!-- LABEL -->\n<label\n  [id]=\"id + '-label'\"\n  class=\"gds-field-label hide-if-empty\"\n  [attr.for]=\"id + '-input'\"\n  *transloco=\"let t; read: scope\"\n>\n  <ng-template\n    *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n  ></ng-template>\n  <ng-template #basicLabelContentTpl>\n    <!-- to trigger css:empty if no label was added -->\n    <ng-container *ngIf=\"label\">\n      {{ label }}\n      <span\n        *ngIf=\"optional === true || (required !== true && optional !== false)\"\n        class=\"gds-field-label--optional\"\n      >\n        ({{ t('label.optional') }})\n      </span>\n    </ng-container>\n  </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div class=\"form-info description hide-if-empty\" *ngIf=\"descriptionIsVisible\">\n  {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n  <div\n    [id]=\"id + '-input'\"\n    class=\"nggv-field--locked\"\n    [attr.name]=\"name\"\n    [attr.value]=\"state\"\n    [attr.role]=\"role\"\n  >\n    <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n    <ng-container *ngIf=\"state\">\n      <ng-container *ngIf=\"!inputMask\">\n        {{ state }}\n      </ng-container>\n      <ng-container *ngIf=\"!!inputMask\">\n        {{ state | nggvInputMaskFormat: inputMask }}\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-container>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n  <div class=\"gds-input-wrapper\" [class.nggv-field--error]=\"invalid\">\n    <div class=\"input-group-prefix hide-if-empty\">\n      <ng-content select=\"[slot='prefix']\"></ng-content>\n    </div>\n\n    <!-- INPUT FIELD -->\n    <div class=\"input-group\" *ngIf=\"!inputMask\">\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        [attr.type]=\"type\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\n        [attr.email]=\"email\"\n        [attr.aria-describedby]=\"id + '-message'\"\n        [min]=\"min\"\n        [max]=\"max\"\n        [step]=\"step\"\n        [attr.maxlength]=\"maxlength\"\n        [attr.minlength]=\"minlength\"\n        [pattern]=\"pattern\"\n        title=\"\"\n        [disabled]=\"disabled\"\n        [autocomplete]=\"autocomplete\"\n        [autofocus]=\"autofocus\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [value]=\"state\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n    </div>\n\n    <!-- INPUT FIELD WITH MASK -->\n    <div\n      class=\"input-group\"\n      *ngIf=\"!!inputMask && (hideInput$ | async) === false\"\n    >\n      <input\n        #input\n        [id]=\"id + '-input'\"\n        class=\"gds-field\"\n        autocomplete=\"off\"\n        [attr.name]=\"name\"\n        [attr.required]=\"required\"\n        [readOnly]=\"readonly\"\n        [attr.role]=\"role\"\n        [attr.placeholder]=\"placeholder\"\n        [attr.aria-label]=\"description\"\n        [attr.aria-describedby]=\"id + '-message'\"\n        [nggvInputMask]=\"inputMask\"\n        title=\"\"\n        [formControl]=\"control\"\n      />\n    </div>\n\n    <div class=\"input-group-suffix hide-if-empty\">\n      <ng-content select=\"[slot='suffix']\"></ng-content>\n      <ng-content></ng-content>\n    </div>\n  </div>\n\n  <!-- ERRORS -->\n  <div\n    class=\"gds-form-item__footer error-wrapper\"\n    *transloco=\"let t; read: scope\"\n  >\n    <span\n      class=\"form-info form-info--error\"\n      [attr.for]=\"id + '-input'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span class=\"error-icon\">\n        <gds-icon-triangle-exclamation\n          width=\"16\"\n          height=\"16\"\n          solid=\"true\"\n          *nggCoreElement\n        ></gds-icon-triangle-exclamation>\n      </span>\n\n      <span\n        *ngIf=\"error; else errorsRef\"\n        [attr.data-thook]=\"thook + '-errorlabel'\"\n        >{{ error }}</span\n      >\n      <ng-template #errorsRef>\n        <span\n          *ngIf=\"firstError as error\"\n          [attr.data-thook]=\"thook + '-errorlabel'\"\n        >\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </span>\n\n    <ng-container *ngIf=\"!inputMask && hasMaxLength && showCharacterCountdown\">\n      <span\n        *nggvCharacterCountdown=\"\n          maxlength;\n          currentLength: (inputRef?.nativeElement?.value ?? '').length;\n          charactersLeft as charactersLeft\n        \"\n        class=\"form-info form-info--countdown\"\n        style=\"text-align: right\"\n      >\n        {{ charactersLeft }} {{ t('label.maxlength') }}\n      </span>\n    </ng-container>\n  </div>\n</ng-container>\n", styles: [":host{--sg-text-primary: #333;--sg-form-control-bg: #fff;--gds-ref-pallet-base100: hsl(0, 0%, 97%);--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686}:host *{box-sizing:border-box}:host.gds-form-item{display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0}:host.gds-form-item:not(:last-child){margin-bottom:1.5rem}:host.gds-form-item .gds-form-item__header{display:flex}:host.gds-form-item .gds-form-item__header .form-info{font-weight:400}:host.gds-form-item .gds-form-item__header button.icon.small{margin-top:-.5rem;margin-right:-.5rem}:host.gds-form-item .gds-form-item__labels{flex:1;margin-bottom:.5rem}:host.gds-form-item .gds-form-item__labels .form-info{margin-bottom:0}:host.gds-form-item .gds-form-item__labels .form-info a:link:not(.button,[aria-disabled]){color:#0062bc}:host.gds-form-item .gds-form-item__labels>*{width:100%;display:block}:host.gds-form-item .gds-form-item__expandable-info{overflow:hidden;font-size:.875rem;line-height:1.25rem;transition:height .3s cubic-bezier(.23,1,.32,1)}:host.gds-form-item .gds-form-item__expandable-info>div{padding-bottom:.5rem}:host.gds-form-item .gds-form-item__backdrop{position:absolute;inset:0;background:var(--gds-ref-pallet-base100);border-radius:2px;z-index:-1;margin:-1rem;opacity:0;transition:all .3s cubic-bezier(.23,1,.32,1);border:1px solid transparent}@media (prefers-reduced-motion: reduce){:host.gds-form-item .gds-form-item__backdrop{transition:none}}:host.gds-form-item:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-ref-pallet-base600)}:host.gds-form-item .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:.5rem}:host.gds-form-item .gds-form-item__footer:not(:empty)>span,:host.gds-form-item .gds-form-item__footer:not(:empty)>.form-info{font-weight:500;line-height:1.125}:host.gds-form-item .gds-form-item__footer:not(:empty) .form-info{font-weight:500}:host.gds-form-item .gds-form-item__footer:not(:empty) .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host.gds-form-item .gds-form-item__footer:not(:empty) .form-info--error .error-icon{margin-top:.128rem;align-items:center}:host.gds-form-item .gds-form-item__footer:not(:empty)>.form-info--countdown{font-weight:400}:host .hide-if-empty:empty{display:none}:host input:not([type]),:host input[type=date],:host input[type=datetime],:host input[type=datetime-local],:host input[type=email],:host input[type=month],:host input[type=number],:host input[type=password],:host input[type=search],:host input[type=tel],:host input[type=text],:host input[type=time],:host input[type=url],:host input[type=week]{padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);background-color:var(--sg-form-control-bg);color:var(--sg-text-primary);min-height:2.75rem;display:flex;align-items:center;justify-content:center}:host input:not([type]):focus:not(:focus-visible),:host input[type=date]:focus:not(:focus-visible),:host input[type=datetime]:focus:not(:focus-visible),:host input[type=datetime-local]:focus:not(:focus-visible),:host input[type=email]:focus:not(:focus-visible),:host input[type=month]:focus:not(:focus-visible),:host input[type=number]:focus:not(:focus-visible),:host input[type=password]:focus:not(:focus-visible),:host input[type=search]:focus:not(:focus-visible),:host input[type=tel]:focus:not(:focus-visible),:host input[type=text]:focus:not(:focus-visible),:host input[type=time]:focus:not(:focus-visible),:host input[type=url]:focus:not(:focus-visible),:host input[type=week]:focus:not(:focus-visible){box-shadow:none;outline:0}:host input:not([type]):focus,:host input:not([type]):focus-visible,:host input[type=date]:focus,:host input[type=date]:focus-visible,:host input[type=datetime]:focus,:host input[type=datetime]:focus-visible,:host input[type=datetime-local]:focus,:host input[type=datetime-local]:focus-visible,:host input[type=email]:focus,:host input[type=email]:focus-visible,:host input[type=month]:focus,:host input[type=month]:focus-visible,:host input[type=number]:focus,:host input[type=number]:focus-visible,:host input[type=password]:focus,:host input[type=password]:focus-visible,:host input[type=search]:focus,:host input[type=search]:focus-visible,:host input[type=tel]:focus,:host input[type=tel]:focus-visible,:host input[type=text]:focus,:host input[type=text]:focus-visible,:host input[type=time]:focus,:host input[type=time]:focus-visible,:host input[type=url]:focus,:host input[type=url]:focus-visible,:host input[type=week]:focus,:host input[type=week]:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host input:not([type]).small,:host input[type=date].small,:host input[type=datetime].small,:host input[type=datetime-local].small,:host input[type=email].small,:host input[type=month].small,:host input[type=number].small,:host input[type=password].small,:host input[type=search].small,:host input[type=tel].small,:host input[type=text].small,:host input[type=time].small,:host input[type=url].small,:host input[type=week].small{min-height:2rem;padding:.25rem .75rem;line-height:1rem}@media screen and (-ms-high-contrast: active){:host input:not([type]),:host input[type=date],:host input[type=datetime],:host input[type=datetime-local],:host input[type=email],:host input[type=month],:host input[type=number],:host input[type=password],:host input[type=search],:host input[type=tel],:host input[type=text],:host input[type=time],:host input[type=url],:host input[type=week]{border:2px solid currentcolor}}:host input:not([type]):disabled,:host input:not([type]).disabled,:host input:not([type])[aria-disabled=true],:host input[type=date]:disabled,:host input[type=date].disabled,:host input[type=date][aria-disabled=true],:host input[type=datetime]:disabled,:host input[type=datetime].disabled,:host input[type=datetime][aria-disabled=true],:host input[type=datetime-local]:disabled,:host input[type=datetime-local].disabled,:host input[type=datetime-local][aria-disabled=true],:host input[type=email]:disabled,:host input[type=email].disabled,:host input[type=email][aria-disabled=true],:host input[type=month]:disabled,:host input[type=month].disabled,:host input[type=month][aria-disabled=true],:host input[type=number]:disabled,:host input[type=number].disabled,:host input[type=number][aria-disabled=true],:host input[type=password]:disabled,:host input[type=password].disabled,:host input[type=password][aria-disabled=true],:host input[type=search]:disabled,:host input[type=search].disabled,:host input[type=search][aria-disabled=true],:host input[type=tel]:disabled,:host input[type=tel].disabled,:host input[type=tel][aria-disabled=true],:host input[type=text]:disabled,:host input[type=text].disabled,:host input[type=text][aria-disabled=true],:host input[type=time]:disabled,:host input[type=time].disabled,:host input[type=time][aria-disabled=true],:host input[type=url]:disabled,:host input[type=url].disabled,:host input[type=url][aria-disabled=true],:host input[type=week]:disabled,:host input[type=week].disabled,:host input[type=week][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 input:not([type]):disabled::placeholder,:host input:not([type]).disabled::placeholder,:host input:not([type])[aria-disabled=true]::placeholder,:host input[type=date]:disabled::placeholder,:host input[type=date].disabled::placeholder,:host input[type=date][aria-disabled=true]::placeholder,:host input[type=datetime]:disabled::placeholder,:host input[type=datetime].disabled::placeholder,:host input[type=datetime][aria-disabled=true]::placeholder,:host input[type=datetime-local]:disabled::placeholder,:host input[type=datetime-local].disabled::placeholder,:host input[type=datetime-local][aria-disabled=true]::placeholder,:host input[type=email]:disabled::placeholder,:host input[type=email].disabled::placeholder,:host input[type=email][aria-disabled=true]::placeholder,:host input[type=month]:disabled::placeholder,:host input[type=month].disabled::placeholder,:host input[type=month][aria-disabled=true]::placeholder,:host input[type=number]:disabled::placeholder,:host input[type=number].disabled::placeholder,:host input[type=number][aria-disabled=true]::placeholder,:host input[type=password]:disabled::placeholder,:host input[type=password].disabled::placeholder,:host input[type=password][aria-disabled=true]::placeholder,:host input[type=search]:disabled::placeholder,:host input[type=search].disabled::placeholder,:host input[type=search][aria-disabled=true]::placeholder,:host input[type=tel]:disabled::placeholder,:host input[type=tel].disabled::placeholder,:host input[type=tel][aria-disabled=true]::placeholder,:host input[type=text]:disabled::placeholder,:host input[type=text].disabled::placeholder,:host input[type=text][aria-disabled=true]::placeholder,:host input[type=time]:disabled::placeholder,:host input[type=time].disabled::placeholder,:host input[type=time][aria-disabled=true]::placeholder,:host input[type=url]:disabled::placeholder,:host input[type=url].disabled::placeholder,:host input[type=url][aria-disabled=true]::placeholder,:host input[type=week]:disabled::placeholder,:host input[type=week].disabled::placeholder,:host input[type=week][aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host input:not([type]):hover,:host input[type=date]:hover,:host input[type=datetime]:hover,:host input[type=datetime-local]:hover,:host input[type=email]:hover,:host input[type=month]:hover,:host input[type=number]:hover,:host input[type=password]:hover,:host input[type=search]:hover,:host input[type=tel]:hover,:host input[type=text]:hover,:host input[type=time]:hover,:host input[type=url]:hover,:host input[type=week]:hover{background-color:var(--gds-ref-pallet-base100)}:host input[type=number]{-moz-appearance:textfield}:host input[type=number]::-webkit-outer-spin-button,:host input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host input{width:100%;line-height:18px;font-size:1rem;font-family:inherit}:host .gds-input-wrapper{position:relative;transition:all .2s ease-in-out,outline-offset 0s,outline-width 0s;border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit;height:2.625rem;display:flex}:host .gds-input-wrapper:before{background:transparent;border-radius:0 0 4px 4px;clip-path:inset(4px 0 0 0);content:\"\";display:block;height:4px;position:absolute;transition:.3s ease-in-out;width:100%}:host .gds-input-wrapper:before{bottom:0}.is-invalid :host .gds-input-wrapper{color:var(--intent-danger-background);opacity:1}.is-invalid :host .gds-input-wrapper:before{background:var(--intent-danger-background);clip-path:inset(1px 0 0 0)}:host .gds-input-wrapper *,:host .gds-input-wrapper *:before,:host .gds-input-wrapper *:after{box-sizing:border-box}:host .gds-input-wrapper .input-group-prefix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-right-radius:0!important;border-bottom-right-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-prefix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .gds-input-wrapper .input-group-prefix{min-width:initial}}:host .gds-input-wrapper .input-group-prefix:empty{display:none}:host .gds-input-wrapper .input-group-suffix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-suffix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media (max-width: 35.98em){:host .gds-input-wrapper .input-group-suffix{min-width:initial}}:host .gds-input-wrapper .input-group-suffix:empty{display:none}:host .gds-input-wrapper .input-group{width:100%}:host .gds-input-wrapper .input-group input{outline:none;min-height:2.5rem;height:2.625rem;line-height:1.5;font-size:1rem;font-family:inherit;border:none;min-height:2.375rem;width:100%}:host .gds-input-wrapper .input-group input *,:host .gds-input-wrapper .input-group input *:before,:host .gds-input-wrapper .input-group input *:after{box-sizing:border-box}:host .gds-input-wrapper .input-group input:hover{border-color:#41b0ee}:host .gds-input-wrapper .input-group input:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .gds-input-wrapper .input-group input:active{border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]::placeholder{color:#cecece}:host .gds-input-wrapper .input-group input:not(:focus){border-right:none;padding-right:0}:host .gds-input-wrapper .input-group input:focus{padding-right:0}:host .gds-input-wrapper:has(.input-group-prefix:not(:empty)) .input-group input{border-bottom-left-radius:0;border-top-left-radius:0}:host .gds-input-wrapper:has(.input-group-suffix:not(:empty)) .input-group input{border-bottom-right-radius:0;border-top-right-radius:0}:host label:is(label),:host .label:is(label),:host legend:is(label){margin-bottom:0}:host label.form-control,:host .label.form-control,:host legend.form-control{width:fit-content}@supports (-moz-appearance: none){:host label.form-control:focus:not(:focus-visible),:host .label.form-control:focus:not(:focus-visible),:host legend.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:focus,:host label.form-control:focus-within,:host .label.form-control:focus,:host .label.form-control:focus-within,:host legend.form-control:focus,:host legend.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host label:not(.form-control),:host .label:not(.form-control),:host legend:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host label+input,:host label+textarea,fieldset :host label+div,:host label+button,:host label+.group-stepper,:host label+.stepper-wrapper,:host label+.group,:host .label+input,:host .label+textarea,fieldset :host .label+div,:host .label+button,:host .label+.group-stepper,:host .label+.stepper-wrapper,:host .label+.group,:host legend+input,:host legend+textarea,fieldset :host legend+div,:host legend+button,:host legend+.group-stepper,:host legend+.stepper-wrapper,:host legend+.group{margin-top:.5rem}:host label+.form-info,:host .label+.form-info,:host legend+.form-info{margin-bottom:.5rem}:host .gds-field-label--optional{font-weight:400}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -5105,11 +5105,11 @@ class NggvDialogComponent {
         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", "attr.aria-hidden": "this.ariaHidden" } }, viewQueries: [{ propertyName: "dialogRef", first: true, predicate: ["dialog"], descendants: true }], exportAs: ["dialog"], ngImport: i0, template: "<ng-container *ngIf=\"shown\">\n  <div class=\"modal-dialog__wrapper\" [class.-active]=\"shown\">\n    <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    <div class=\"nggv-backdrop\"></div>\n  </div>\n</ng-container>\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)}:host .modal-dialog__wrapper{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: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
+    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", "attr.aria-hidden": "this.ariaHidden" } }, viewQueries: [{ propertyName: "dialogRef", first: true, predicate: ["dialog"], descendants: true }], exportAs: ["dialog"], ngImport: i0, template: "<ng-container *ngIf=\"shown\">\n  <div class=\"modal-dialog__wrapper\" [class.-active]=\"shown\">\n    <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    <div class=\"nggv-backdrop\"></div>\n  </div>\n</ng-container>\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)}:host .modal-dialog__wrapper{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;min-height:2rem;min-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: i3.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: "<ng-container *ngIf=\"shown\">\n  <div class=\"modal-dialog__wrapper\" [class.-active]=\"shown\">\n    <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    <div class=\"nggv-backdrop\"></div>\n  </div>\n</ng-container>\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)}:host .modal-dialog__wrapper{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"] }]
+            args: [{ selector: 'nggv-dialog', exportAs: 'dialog', template: "<ng-container *ngIf=\"shown\">\n  <div class=\"modal-dialog__wrapper\" [class.-active]=\"shown\">\n    <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    <div class=\"nggv-backdrop\"></div>\n  </div>\n</ng-container>\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)}:host .modal-dialog__wrapper{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;min-height:2rem;min-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']
@@ -7184,7 +7184,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 const tooltipBoxStyles = new Map([
     ['position', 'absolute'],
-    ['z-index', '1040'],
+    ['z-index', '1045'],
     ['border-radius', '.25rem'],
     ['padding', '.5rem 1rem'],
     ['background-color', '#1a1a1a'],