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

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

@@ -0,0 +1 @@
+{"version":3,"file":"sebgroup-green-angular-src-v-angular-modal.mjs","sources":["../../../../libs/angular/src/v-angular/modal/modal.globals.ts","../../../../libs/angular/src/v-angular/modal/dialog/dialog.component.ts","../../../../libs/angular/src/v-angular/modal/dialog/dialog.component.html","../../../../libs/angular/src/v-angular/modal/fold-out/keyboard-key.enum.ts","../../../../libs/angular/src/v-angular/modal/fold-out/fold-out.component.ts","../../../../libs/angular/src/v-angular/modal/fold-out/fold-out.component.html","../../../../libs/angular/src/v-angular/modal/fold-out/fold-out.directive.ts","../../../../libs/angular/src/v-angular/modal/slide-out/slide-out.component.ts","../../../../libs/angular/src/v-angular/modal/slide-out/slide-out.component.html","../../../../libs/angular/src/v-angular/modal/modal.module.ts","../../../../libs/angular/src/v-angular/modal/sebgroup-green-angular-src-v-angular-modal.ts"],"sourcesContent":["// We must force tsc to interpret this file as a module, resolves\n// \"Augmentations for the global scope can only be directly nested in external modules or ambient module declarations.\"\nexport {}\n\ndeclare global {\n  interface Window {\n    /** Counter for unique identifiers */\n    nggv: {\n      ids: { [namespace: string]: number; default: number }\n      nextId: (namespace?: string) => string\n    }\n  }\n}\n\n;(() => {\n  // Make sure there is an incremental ID each component can use\n  if (typeof window !== 'undefined' && !window.nggv) {\n    window.nggv = {\n      ids: { default: -1 },\n      nextId(namespace = 'default'): string {\n        let id = this.ids[namespace] || 0\n        if (typeof this.ids[namespace] === 'number') id++\n        this.ids[namespace] = id\n        return namespace === 'default'\n          ? `nggv-${id}`\n          : `nggv-${namespace}-${id}`\n      },\n    }\n  }\n})()\n","import {\n  Component,\n  ElementRef,\n  EventEmitter,\n  HostBinding,\n  HostListener,\n  Input,\n  OnInit,\n  Output,\n  Renderer2,\n  ViewChild,\n} from '@angular/core'\n\nimport { DialogButtons } from '../modal.types'\n\nexport interface DialogEvent<T = any> {\n  original: Event | undefined\n  payload: T | undefined\n}\n\n@Component({\n  selector: 'nggv-dialog',\n  templateUrl: './dialog.component.html',\n  styleUrls: ['./dialog.component.scss'],\n  exportAs: 'dialog',\n})\nexport class NggvDialogComponent implements OnInit {\n  @ViewChild('dialog') dialogRef: ElementRef | undefined\n\n  /** Special property used for selecting DOM elements during automated UI testing. */\n  @HostBinding('attr.data-thook') @Input() thook: string | null | undefined =\n    'dialog'\n  /** @internal */\n  @HostBinding('class.gds-modal-dialog') baseClass = true\n  /** @internal Defines the default visibility state of the dialog. */\n  @HostBinding('class.-active') _shown = false\n  @Input() set shown(value: boolean) {\n    this._shown = value\n    if (value) {\n      this.hideOverflow()\n    } else {\n      this.resetOverflow()\n    }\n  }\n  get shown() {\n    return this._shown\n  }\n\n  /** @internal */\n  @HostBinding('attr.aria-hidden') get ariaHidden() {\n    return !this.shown\n  }\n  /** Defines the default visibility state of the dialog. */\n  @Input() initiallyShown = false\n  /** Sets modal heading. Will be translated (using transloco) if the string matches a cms key. */\n  @Input() heading!: string\n  /**\n   * Sets modal title. Will be translated (using transloco) if the string matches a cms key.\n   * @deprecated - use heading instead.\n   */\n  @Input() title = 'Attention'\n  /** Sets content body and can contain html code. The content body can also be set by nesting children to the dialog tag. */\n  @Input() content?: string\n  /** Defines if dialog should close on action. */\n  @Input() autoClose = true\n  /** An array of event payloads that will be added to every click context menu item click. */\n  @Input() payload: any = {}\n\n  @Input() dialogTitleId!: string\n  /** Pass the null if you don't want dialog body to be announced by the screen reader */\n  @Input() dialogBodyId!: string | null\n  /** It gives an ability for parent component to control if modal should be closed on esc button click. */\n  @Input() closeModalOnEscape = true\n  /** Aria label for the Close button with \"X\" icon, in the header */\n  @Input() closeButtonAriaLabel?: string\n\n  _buttons: DialogButtons | undefined\n  /** Buttons are defined as a key-value pair where key is one of \"positive|neutral|negative\" and value is the button label. */\n  @Input() set buttons(buttons: DialogButtons) {\n    this._buttons = buttons\n  }\n  // /** @internal */\n  // closeIcon = faTimes\n\n  @Output() nggvCloseEvent = new EventEmitter<DialogEvent>()\n  @Output() nggvPositiveEvent = new EventEmitter<DialogEvent>()\n  @Output() nggvNeutralEvent = new EventEmitter<DialogEvent>()\n  @Output() nggvNegativeEvent = new EventEmitter<DialogEvent>()\n\n  protected _previous: HTMLElement | undefined\n  protected _firstFocusable: HTMLElement | undefined\n  protected _lastFocusable: HTMLElement | undefined\n\n  constructor(private renderer: Renderer2) {}\n\n  ngOnInit() {\n    this.dialogTitleId =\n      this.dialogTitleId ?? 'gds-dialog-title-' + window.nggv?.nextId()\n    if (this.dialogBodyId !== null) {\n      this.dialogBodyId =\n        this.dialogBodyId ?? 'gds-dialog-body-' + window.nggv?.nextId()\n    }\n\n    this._shown = this.initiallyShown\n    if (this.shown) this._limitFocusable()\n  }\n\n  public onAction(event: Event, action: string) {\n    event.preventDefault()\n    const emitEvent = {\n      original: event,\n      payload: this.payload,\n    }\n    switch (action) {\n      case 'positive':\n        this.nggvPositiveEvent.emit(emitEvent)\n        break\n      case 'neutral':\n        this.nggvNeutralEvent.emit(emitEvent)\n        break\n      case 'negative':\n        this.nggvNegativeEvent.emit(emitEvent)\n        break\n      // case 'close' is handled by if-statement below with call to this.close()\n    }\n    if (this.autoClose) this.close(event, 'action')\n  }\n\n  open(opener?: HTMLElement) {\n    this._shown = true\n    this._previous = opener || (document.activeElement as HTMLElement)\n    this.hideOverflow()\n    this._limitFocusable()\n    return true\n  }\n\n  protected _limitFocusable() {\n    window.setTimeout(() => {\n      if (!this.dialogRef) return\n      const focusable = this.dialogRef.nativeElement.querySelectorAll(\n        'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n      )\n      this._firstFocusable = focusable[0]\n      this._lastFocusable = focusable[focusable.length - 1]\n      if (this._firstFocusable) this._firstFocusable.focus()\n    })\n  }\n\n  @HostListener('click', ['$event', '\"host\"'])\n  @HostListener('document:keydown.escape', ['$event'])\n  close(event?: Event, initiator?: string) {\n    if (initiator === 'host' && event instanceof MouseEvent) return\n    // prevent modal from closing on esc button click when closeModalOnEscape is set to false\n    if (!this.closeModalOnEscape) return\n    if (this.shown) {\n      const emitEvent = {\n        original: event,\n        payload: this.payload,\n      }\n      this.nggvCloseEvent.emit(emitEvent)\n    }\n\n    this.resetOverflow()\n\n    this._shown = false\n    window.setTimeout(() => {\n      if (this._previous) this._previous.focus()\n      this._previous = undefined\n    })\n  }\n\n  @HostListener('keydown', ['$event'])\n  focusTrap(event: KeyboardEvent) {\n    if (event.key !== 'Tab') return\n    if (event.shiftKey) {\n      // shift + tab\n      if (\n        this._lastFocusable &&\n        document.activeElement === this._firstFocusable\n      ) {\n        this._lastFocusable.focus()\n        event.preventDefault()\n      }\n    } else {\n      // tab\n      if (\n        this._firstFocusable &&\n        document.activeElement === this._lastFocusable\n      ) {\n        this._firstFocusable.focus()\n        event.preventDefault()\n      }\n    }\n  }\n\n  // to prevent background scrolling when modal is open\n  private hideOverflow(): void {\n    this.renderer.setStyle(document.body, 'overflow', 'hidden')\n  }\n\n  private resetOverflow(): void {\n    this.renderer.removeStyle(document.body, 'overflow')\n  }\n}\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\n<div class=\"nggv-backdrop\"></div>\n","export enum KeyboardKey {\n  Escape = 'Escape',\n  Space = 'Space',\n  Enter = 'Enter',\n  ArrowUp = 'ArrowUp',\n  ArrowDown = 'ArrowDown',\n}\n","import {\n  AfterViewInit,\n  Component,\n  ElementRef,\n  HostBinding,\n  HostListener,\n  Input,\n  OnDestroy,\n  ViewChild,\n} from '@angular/core'\n\nimport '@sebgroup/green-core/components/icon/icons/dot-grid-one-horizontal.js'\n\nimport { fromEvent, Subscription } from 'rxjs'\nimport { filter, map, takeWhile } from 'rxjs/operators'\n\nimport { KeyboardKey } from './keyboard-key.enum'\n\n@Component({\n  selector: 'nggv-fold-out',\n  templateUrl: './fold-out.component.html',\n  styleUrls: ['./fold-out.component.scss'],\n})\nexport class NggvFoldOutComponent implements OnDestroy, AfterViewInit {\n  /** Special property used for selecting DOM elements during automated UI testing. */\n  @HostBinding('attr.data-thook') @Input() thook: string | null | undefined =\n    'fold-out'\n\n  @ViewChild('foldout', { read: ElementRef }) inputRef?: ElementRef\n  @ViewChild('childrenContainer') container?: ElementRef\n\n  /** Aligns the dropdown list with the buttons right or left side */\n  @Input() alignOptions!: 'left' | 'right'\n  /** Option to show text with action button */\n  @Input() text?: string\n  /** Aria label for the fold-out button */\n  @Input() ariaLabel?: string\n\n  /** @internal */\n  protected shown = false\n\n  private activeIndex = -1\n  private firstArrowClick = true\n  private ariaFocusAttributeName = 'aria-focus'\n  private blurAllElements = (): void => this.children.forEach(this.blurElement)\n  private blurElement = (element: HTMLElement): void =>\n    element.setAttribute(this.ariaFocusAttributeName, 'false')\n  private focusElement = (element: HTMLElement): void =>\n    element.setAttribute(this.ariaFocusAttributeName, 'true')\n  private getChildIndex = (element: HTMLElement | undefined): number =>\n    element ? this.children.indexOf(element) : -1\n\n  private onClickSubscription: Subscription | undefined\n  private onKeyUpSubscription: Subscription | undefined\n\n  private get children() {\n    return Array.from(\n      (this.container?.nativeElement as HTMLElement).children ?? [],\n    ) as HTMLElement[]\n  }\n\n  private get lastChild(): HTMLElement | undefined {\n    return this.children[this.children.length - 1] || undefined\n  }\n\n  private get focusedElement(): HTMLElement | undefined {\n    return this.children[this.activeIndex] || undefined\n  }\n\n  ngAfterViewInit(): void {\n    this.blurAllElements()\n  }\n\n  ngOnDestroy(): void {\n    this.onClickSubscription?.unsubscribe()\n    this.onKeyUpSubscription?.unsubscribe()\n  }\n\n  /** Toggle display of the option list */\n  toggleVisibility(): void {\n    this.setVisibility(!this.shown)\n  }\n\n  setVisibility(setVisibility = true): void {\n    if (this.shown === setVisibility) {\n      return\n    }\n\n    this.resetChildren()\n    this.shown = setVisibility\n\n    if (this.shown) {\n      this.subscribeToOutsideClickEvent()\n      this.subscribeToKeyDownEvent()\n    } else {\n      this.onClickSubscription?.unsubscribe()\n      this.onKeyUpSubscription?.unsubscribe()\n    }\n  }\n\n  /**\n   * Closes the fold-out on click outside.\n   */\n  private subscribeToOutsideClickEvent(): void {\n    this.onClickSubscription = fromEvent(document, 'click')\n      .pipe(takeWhile(() => this.shown))\n      .subscribe({\n        next: (event: Event) => {\n          if (\n            this.shown &&\n            !this.inputRef?.nativeElement.contains(event.target)\n          ) {\n            this.setVisibility(false)\n          }\n        },\n      })\n  }\n\n  private subscribeToKeyDownEvent(): void {\n    if (!this.children.length) {\n      return\n    }\n\n    this.onKeyUpSubscription = fromEvent<KeyboardEvent>(document, 'keydown')\n      .pipe(\n        takeWhile(() => this.shown),\n        filter((event) =>\n          Object.values(KeyboardKey).includes(event.code as KeyboardKey),\n        ),\n      )\n      .subscribe((event) => {\n        event.preventDefault()\n        event.stopPropagation()\n        this.onKeyDown(event)\n      })\n  }\n\n  private onKeyDown(event: KeyboardEvent): void {\n    switch (event.code) {\n      case KeyboardKey.Escape:\n        this.setVisibility(false)\n        break\n      case KeyboardKey.Enter:\n      case KeyboardKey.Space:\n        this.takeAction()\n        break\n      case KeyboardKey.ArrowUp:\n        this.handleArrowUpClick()\n        break\n      case KeyboardKey.ArrowDown:\n        this.handleArrowDownClick()\n        break\n    }\n  }\n\n  private handleArrowUpClick(): void {\n    this.activeIndex = this.firstArrowClick\n      ? this.getChildIndex(this.lastChild)\n      : this.activeIndex === 0\n        ? this.getChildIndex(this.lastChild)\n        : this.activeIndex - 1\n\n    this.firstArrowClick = false\n    this.handleFocus()\n  }\n\n  private handleArrowDownClick(): void {\n    this.activeIndex = this.firstArrowClick\n      ? 0\n      : (this.activeIndex + 1) % this.children.length\n    this.firstArrowClick = false\n    this.handleFocus()\n  }\n\n  private handleFocus(): void {\n    this.blurAllElements()\n    this.focusElement(this.children[this.activeIndex])\n  }\n\n  private takeAction(): void {\n    if (this.focusedElement) {\n      this.focusedElement.click()\n    }\n\n    this.setVisibility(false)\n  }\n\n  private resetChildren(): void {\n    this.blurAllElements()\n    this.activeIndex = -1\n    this.firstArrowClick = true\n  }\n}\n","<div #foldout>\n  <button\n    data-thook=\"fold-out-toggle\"\n    class=\"fold-out-button\"\n    [ngClass]=\"{ 'no-text': !text }\"\n    (click)=\"toggleVisibility()\"\n    [attr.aria-expanded]=\"shown\"\n    [attr.aria-label]=\"ariaLabel\"\n  >\n    <ng-container *ngTemplateOutlet=\"text ? withText : default\"> </ng-container>\n  </button>\n\n  <div\n    #childrenContainer\n    class=\"nggv-fold-out__popover\"\n    [ngClass]=\"{ 'flex-right': alignOptions === 'right' }\"\n    [class.nggv-fold-out__popover-expanded]=\"shown\"\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n\n<ng-template #withText>\n  {{ text }}\n  <gds-icon-dot-grid-one-horizontal\n    width=\"24\"\n    height=\"24\"\n    *nggCoreElement\n  ></gds-icon-dot-grid-one-horizontal>\n</ng-template>\n\n<ng-template #default>\n  <gds-icon-dot-grid-one-horizontal\n    width=\"24\"\n    height=\"24\"\n    *nggCoreElement\n  ></gds-icon-dot-grid-one-horizontal>\n  <ng-template></ng-template\n></ng-template>\n","import { Directive, HostBinding } from '@angular/core'\n\n@Directive({\n  selector: '[nggvOption]',\n})\nexport class NggvFoldOutOptionDirective {\n  @HostBinding('class.nggv-field-dropdown__options__label') baseClass = true\n}\n","import {\n  animate,\n  group,\n  query,\n  style,\n  transition,\n  trigger,\n} from '@angular/animations'\nimport {\n  Component,\n  ElementRef,\n  EventEmitter,\n  HostListener,\n  Input,\n  OnInit,\n  Output,\n  Renderer2,\n  ViewChild,\n} from '@angular/core'\n\nimport { DialogButtons } from '../modal.types'\n\n/** Modal slide-out component based on vanilla pattern library design.\n * The modal title can be set using the @Input heading, and will automatically be translated if\n * the string matches a cms key.\n * Content can be injected into the body of the slide-out by either setting the @Input content to any type of\n * markdown, or using content projection (adding content between the `nggv-slideout-modal`-start and end tag).\n * If the content needs to stretch outside the normal padded area, add the attribute `slot=\"outside-content\"` to the\n * projected content main element.\n * Test hooks:\n * The modal hook defaults to 'slideout' but is customizeable.\n * The closing button can be selected using 'slideout-close'.\n * The backdrop is selectable using 'slideout-backdrop'.\n */\n@Component({\n  selector: 'nggv-slideout-modal',\n  templateUrl: './slide-out.component.html',\n  styleUrls: ['./slide-out.component.scss'],\n  animations: [\n    trigger('modalAnimation', [\n      transition(':enter', [\n        query('.gds-slide-out', style({ transform: 'translateX(100%)' }), {\n          optional: true,\n        }),\n        query('.gds-backdrop, [role=dialog]', style({ opacity: '0' }), {\n          optional: true,\n        }),\n        group([\n          query(\n            '.gds-slide-out',\n            animate(\n              '350ms cubic-bezier(0.33, 1, 0.68, 1)',\n              style({ transform: 'translateX(0)' }),\n            ),\n            { optional: true },\n          ),\n          query(\n            '.gds-backdrop, [role=dialog]',\n            animate(\n              '350ms cubic-bezier(0.33, 1, 0.68, 1)',\n              style({ opacity: '1' }),\n            ),\n            { optional: true },\n          ),\n        ]),\n      ]),\n      transition(':leave', [\n        query('.gds-slide-out', style({ transform: 'translateX(0)' }), {\n          optional: true,\n        }),\n        group([\n          query(\n            '.gds-slide-out',\n            animate(\n              '350ms cubic-bezier(0.33, 1, 0.68, 1)',\n              style({ transform: 'translateX(100%)' }),\n            ),\n            { optional: true },\n          ),\n          query(\n            '.gds-backdrop, [role=dialog]',\n            animate(\n              '350ms cubic-bezier(0.33, 1, 0.68, 1)',\n              style({ opacity: '0' }),\n            ),\n            { optional: true },\n          ),\n        ]),\n      ]),\n    ]),\n  ],\n})\nexport class NggvSlideOutComponent implements OnInit {\n  /** @internal */\n  @ViewChild('slideOut') slideOutRef: ElementRef | undefined\n\n  /** Sets from which side the modal should open. */\n  @Input() side: 'left' | 'right' = 'right'\n  /** Defines the default visibility state of the slide-out. */\n  private _shown = false\n  @Input() set shown(value: boolean) {\n    this._shown = value\n    if (value) {\n      this.hideOverflow()\n    } else {\n      this.resetOverflow()\n    }\n  }\n  get shown() {\n    return this._shown\n  }\n  /** Defines the default visibility state of the modal. */\n  @Input() initiallyShown = false\n  /** Sets modal heading. Will be translated (using transloco) if the string matches a cms key. */\n  @Input() heading!: string\n  /**\n   * Sets modal title. Will be translated (using transloco) if the string matches a cms key.\n   * @deprecated - use @Input() heading instead.\n   */\n  @Input() title!: string\n  /** Sets content body of the modal and can contain html code. The content body can also be set by nesting children to the modal tag. */\n  @Input() content?: string\n  /** Sets whether it is possible to close the modal from the top right corner. */\n  @Input() closable = true\n  /** Allows the modal content to decide the width of the modal. */\n  @Input() autoWidth = false\n\n  /** Special property used for selecting DOM elements during automated UI testing. */\n  @Input() thook = 'slideout'\n\n  /** Aria label for the Close button with \"X\" icon, in the header */\n  @Input() closeButtonAriaLabel?: string\n\n  /** @internal */\n  get fromLeft(): boolean {\n    return this.side === 'left'\n  }\n\n  // /** @internal */\n  // closeIcon = faTimes;\n\n  _buttons: DialogButtons | undefined\n  /** Buttons are defined as a key-value pair where key is one of \"positive|neutral|negative\" and value is the button label. */\n  @Input() set buttons(buttons: DialogButtons) {\n    this._buttons = buttons\n  }\n\n  /** Will emit true on closing event. */\n  @Output() nggvCloseEvent = new EventEmitter<boolean>()\n  @Output() nggvPositiveEvent = new EventEmitter<void>()\n  @Output() nggvNeutralEvent = new EventEmitter<void>()\n  @Output() nggvNegativeEvent = new EventEmitter<void>()\n\n  private previous: HTMLElement | undefined\n  private firstFocusable: HTMLElement | undefined\n  private lastFocusable: HTMLElement | undefined\n\n  constructor(\n    private host: ElementRef,\n    private renderer: Renderer2,\n  ) {\n    // appends methods for opening and closing modal to native element\n    this.host.nativeElement.open = this.open.bind(this)\n    this.host.nativeElement.close = this.close.bind(this)\n  }\n\n  ngOnInit() {\n    this._shown = this.initiallyShown\n    if (this.shown) this.limitFocusable()\n  }\n\n  public onAction(event: Event, action: string) {\n    event.preventDefault()\n    switch (action) {\n      case 'positive':\n        this.nggvPositiveEvent.emit()\n        break\n      case 'neutral':\n        this.nggvNeutralEvent.emit()\n        break\n      case 'negative':\n        this.nggvNegativeEvent.emit()\n        break\n    }\n    this.close(event, 'action')\n  }\n\n  /**\n   * Called on a modal element. Opens the modal and sets focus to the last focusable element in the modal.\n   *\n   * @param opener - reference to last focused element before opening modal\n   * @returns - true\n   */\n  open(opener?: HTMLElement): boolean {\n    this._shown = true\n    this.previous = opener || (document.activeElement as HTMLElement)\n    this.hideOverflow()\n    this.limitFocusable()\n    return true\n  }\n\n  /**\n   * Called on a modal element. Closes the modal and emits a `nggvCloseEvent`. Sets focus to the lats focused element if an element was sent in to open function.\n   *\n   * @param event\n   * @param initiator\n   */\n  @HostListener('click', ['$event', '\"host\"'])\n  @HostListener('document:keydown.escape', ['$event'])\n  close(event?: Event, initiator?: string): void {\n    if (\n      initiator === 'host' &&\n      event instanceof MouseEvent &&\n      event.target !== event.currentTarget\n    )\n      return\n\n    this.resetOverflow()\n\n    if (this.shown && this.closable) {\n      this.nggvCloseEvent.emit(this.shown)\n      this.shown = false\n      window.setTimeout(() => {\n        if (this.previous) this.previous.focus()\n        this.previous = undefined\n      })\n    }\n  }\n\n  /** @internal */\n  @HostListener('keydown', ['$event'])\n  focusTrap(event: KeyboardEvent) {\n    if (event.key !== 'Tab') return\n    if (event.shiftKey) {\n      // shift + tab\n      if (\n        this.lastFocusable &&\n        document.activeElement === this.firstFocusable\n      ) {\n        this.lastFocusable.focus()\n        event.preventDefault()\n      }\n    } else {\n      // tab\n      if (\n        this.firstFocusable &&\n        document.activeElement === this.lastFocusable\n      ) {\n        this.firstFocusable.focus()\n        event.preventDefault()\n      }\n    }\n  }\n\n  private limitFocusable() {\n    window.setTimeout(() => {\n      if (!this.slideOutRef) return\n      const focusable = this.slideOutRef.nativeElement.querySelectorAll(\n        'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n      )\n      this.firstFocusable = focusable[0]\n      this.lastFocusable = focusable[focusable.length - 1]\n      if (this.lastFocusable) this.lastFocusable.focus()\n    })\n  }\n\n  private hideOverflow(): void {\n    this.renderer.setStyle(document.body, 'overflow', 'hidden')\n  }\n\n  private resetOverflow(): void {\n    this.renderer.removeStyle(document.body, 'overflow')\n  }\n}\n","<ng-container *ngIf=\"shown\">\n  <div\n    [ngClass]=\"{\n      'gds-slide-out--left': fromLeft,\n      'gds-slide-out--right': !fromLeft,\n    }\"\n    *transloco=\"let t\"\n    [class.-active]=\"shown\"\n    [attr.data-thook]=\"thook\"\n    [attr.aria-hidden]=\"!shown\"\n    [@modalAnimation]\n  >\n    <div\n      #slideOut\n      class=\"gds-slide-out\"\n      [class.auto-width]=\"autoWidth\"\n      [class.entered]=\"shown\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"gds-modal-title\"\n      aria-describedby=\"gds-modal-body\"\n    >\n      <header class=\"gds-slide-out__header\">\n        <h3 id=\"gds-modal-title\">\n          {{ heading || title || '' }}\n        </h3>\n        <button\n          data-testid=\"modal-close-button\"\n          class=\"nggv-modal-slideout__close\"\n          (click)=\"this.close()\"\n          [attr.aria-label]=\"closeButtonAriaLabel\"\n        >\n          <i></i>\n        </button>\n      </header>\n\n      <section id=\"modal-body\">\n        <div class=\"gds-slide-out__content hide-if-empty\">\n          <div *ngIf=\"content\" [innerHtml]=\"content\"></div>\n          <ng-content></ng-content>\n        </div>\n        <ng-content select=\"[slot='outside-content']\"></ng-content>\n      </section>\n\n      <footer class=\"modal-dialog__actions\">\n        <button\n          class=\"danger\"\n          type=\"reset\"\n          [attr.data-thook]=\"'dialog-' + (_buttons?.negative || 'negative')\"\n          (click)=\"onAction($event, 'negative')\"\n          (keydown.enter)=\"onAction($event, 'negative')\"\n          *ngIf=\"_buttons && _buttons.negative\"\n        >\n          {{ t(_buttons.negative) }}\n        </button>\n\n        <button\n          class=\"secondary\"\n          type=\"button\"\n          [attr.data-thook]=\"'dialog-' + (_buttons?.neutral || 'neutral')\"\n          (click)=\"onAction($event, 'neutral')\"\n          (keydown.enter)=\"onAction($event, 'neutral')\"\n          *ngIf=\"_buttons && _buttons.neutral\"\n        >\n          {{ t(_buttons.neutral) }}\n        </button>\n\n        <button\n          class=\"primary\"\n          type=\"submit\"\n          [attr.data-thook]=\"'dialog-' + (_buttons?.positive || 'positive')\"\n          (click)=\"onAction($event, 'positive')\"\n          (keydown.enter)=\"onAction($event, 'positive')\"\n          *ngIf=\"_buttons && _buttons.positive\"\n        >\n          {{ t(_buttons.positive) }}\n        </button>\n      </footer>\n    </div>\n\n    <div\n      class=\"nggv-backdrop\"\n      data-thook=\"slideout-backdrop\"\n      (click)=\"close()\"\n    ></div>\n  </div>\n</ng-container>\n","import './modal.globals'\n\nimport { CommonModule } from '@angular/common'\nimport { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'\n\nimport { NggCoreWrapperModule } from '@sebgroup/green-angular/src/lib/shared'\nimport { NggvButtonModule } from '@sebgroup/green-angular/src/v-angular/button'\nimport { NggvI18nModule } from '@sebgroup/green-angular/src/v-angular/i18n'\nimport { NggvDialogComponent } from './dialog/dialog.component'\nimport { NggvFoldOutComponent } from './fold-out/fold-out.component'\nimport { NggvFoldOutOptionDirective } from './fold-out/fold-out.directive'\nimport { NggvSlideOutComponent } from './slide-out/slide-out.component'\n\n@NgModule({\n  imports: [\n    CommonModule,\n    NggvButtonModule,\n    NggvI18nModule,\n    NggCoreWrapperModule,\n  ],\n  declarations: [\n    NggvDialogComponent,\n    NggvSlideOutComponent,\n    NggvFoldOutComponent,\n    NggvFoldOutOptionDirective,\n  ],\n  exports: [\n    NggvDialogComponent,\n    NggvSlideOutComponent,\n    NggvFoldOutComponent,\n    NggvFoldOutOptionDirective,\n  ],\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class NggvModalModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i2"],"mappings":"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"}

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

@@ -0,0 +1,185 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, Input, Output, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import '@sebgroup/green-core/components/icon/icons/chevron-left.js';
+import '@sebgroup/green-core/components/icon/icons/chevron-right.js';
+import '@sebgroup/green-core/components/icon/icons/arrow-left.js';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i3 from '@jsverse/transloco';
+import { TranslocoModule } from '@jsverse/transloco';
+import * as i4 from '@sebgroup/green-angular/src/lib/shared';
+import { NggCoreWrapperModule } from '@sebgroup/green-angular/src/lib/shared';
+import { NggvI18nModule } from '@sebgroup/green-angular/src/v-angular/i18n';
+
+/** The Pagination component is used to separate long sets of data so that it is easier for a user to consume information. To change the current page simply click on the page number. */
+class PaginationComponent {
+    constructor() {
+        /** Total size of pagination */
+        this.size = 0;
+        /** Selected page */
+        this.value = 1;
+        /** Use first and last navigation buttons*/
+        this.useFirstAndLast = true;
+        /** Use 'Go to page' input field */
+        this.showGoToPage = true;
+        /** Element class name */
+        this.className = '';
+        /** Callback on page change */
+        this.pageNumberChange = new EventEmitter();
+        /** @internal */
+        this.pageNumber = 0;
+        /** @internal */
+        this.list = [];
+        /** @internal */
+        this.dotnavList = [];
+        /** @internal */
+        this.pagingSize = 0;
+        /** @internal */
+        this.showEllipsisStart = false;
+        /** @internal */
+        this.showEllipsisEnd = false;
+    }
+    ngOnChanges(changes) {
+        if (changes?.offset || changes?.size) {
+            this.setPagingSize();
+        }
+        if (changes?.pagingLength || changes?.value) {
+            this.generateList();
+        }
+    }
+    /** @internal */
+    setPagingSize() {
+        const initialOffset = this.offset ? this.offset : 10;
+        this.pagingSize = Math.ceil(Number(this.size) / initialOffset);
+        this.generateList();
+    }
+    /** @internal */
+    handleOnChange(value) {
+        if (value <= 0) {
+            this.pageNumberChange.emit(1);
+        }
+        else if (value > this.pagingSize) {
+            this.pageNumberChange.emit(this.pagingSize);
+        }
+        else {
+            this.pageNumberChange.emit(value);
+        }
+    }
+    /** @internal */
+    handlePageInput(pageInput) {
+        this.handleOnChange(Number(pageInput));
+    }
+    /**
+     * Generates an array of the pages that needs to be displayed
+     * It depends on the size, offset, and the current value
+     */
+    generateList() {
+        const genList = [];
+        const length = this.pagingLength ? this.pagingLength : 5;
+        for (let i = 1; i <= this.pagingSize; i++) {
+            genList.push(i);
+        }
+        const medianValue = Math.ceil(length / 2);
+        let start = 0;
+        let end = this.pagingSize;
+        if (length < this.pagingSize) {
+            if (this.pagingSize - this.value < medianValue) {
+                start = this.pagingSize - length;
+            }
+            else if (this.value - medianValue > -1) {
+                start = this.value - medianValue;
+            }
+            end = start + length;
+        }
+        if (this.useFirstAndLast) {
+            if (start == 0) {
+                start = 1;
+                end = start + length;
+            }
+            if (end > this.pagingSize - 1) {
+                end = this.pagingSize - 1;
+                start = Math.max(1, end - length);
+            }
+        }
+        this.dotnavList = genList;
+        const pagingStart = genList[start];
+        const pagingEnd = genList[end - 1];
+        this.showEllipsisStart = pagingStart > 2;
+        this.showEllipsisEnd = pagingEnd < this.pagingSize - 1;
+        this.list = genList.slice(start, end);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PaginationComponent, selector: "nggv-pagination", inputs: { size: "size", value: "value", firstText: "firstText", lastText: "lastText", nextText: "nextText", offset: "offset", pagingLength: "pagingLength", previousText: "previousText", useFirstAndLast: "useFirstAndLast", useTextNav: "useTextNav", useDotNav: "useDotNav", showGoToPage: "showGoToPage", className: "className", id: "id" }, outputs: { pageNumberChange: "pageNumberChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pagination-wrapper\" [ngClass]=\"className\" [attr.id]=\"id\">\n  <nav class=\"custom-pagination\">\n    <ng-container *ngIf=\"useDotNav; else numNav\">\n      <ul class=\"pagination dotnav\">\n        <ng-container *ngFor=\"let num of dotnavList\">\n          <li class=\"page-item\" (click)=\"handleOnChange(num)\" [value]=\"num\">\n            <span\n              class=\"page-dot-link\"\n              [ngClass]=\"{ active: value === num }\"\n            ></span>\n          </li>\n        </ng-container>\n      </ul>\n    </ng-container>\n\n    <ng-template #numNav>\n      <ul class=\"pagination\">\n        <ng-container>\n          <li class=\"page-item\" (click)=\"handleOnChange(value - 1)\">\n            <button\n              class=\"page-link\"\n              [attr.title]=\"previousText\"\n              [attr.disabled]=\"value === 1 ? 'disabled' : null\"\n            >\n              <span class=\"nav-action\">\n                <ng-container *ngIf=\"useTextNav; else angleLeftIcon\">\n                  {{ previousText ? previousText : 'Previous' }}\n                </ng-container>\n                <ng-template #angleLeftIcon>\n                  <gds-icon-chevron-left\n                    *nggCoreElement\n                  ></gds-icon-chevron-left>\n                </ng-template>\n              </span>\n            </button>\n          </li>\n        </ng-container>\n\n        <ng-container *ngIf=\"useFirstAndLast\">\n          <li class=\"page-item\" (click)=\"handleOnChange(1)\">\n            <button\n              class=\"page-link\"\n              [ngClass]=\"{ active: value === 1 }\"\n              [attr.title]=\"firstText\"\n            >\n              <span class=\"nav-num\">{{ 1 }}</span>\n            </button>\n          </li>\n\n          <li class=\"page-item\" *ngIf=\"showEllipsisStart\">\n            <span class=\"page-link\" [attr.title]=\"'...'\">\n              <span class=\"nav-num\">...</span>\n            </span>\n          </li>\n        </ng-container>\n\n        <ng-container *ngFor=\"let num of list\">\n          <li\n            class=\"page-item\"\n            [ngClass]=\"{ active: value === num }\"\n            (click)=\"handleOnChange(num)\"\n            value=\"num\"\n          >\n            <button class=\"page-link\" [ngClass]=\"{ active: value === num }\">\n              <span class=\"nav-num\">{{ num }}</span>\n            </button>\n          </li>\n        </ng-container>\n\n        <ng-container *ngIf=\"useFirstAndLast\">\n          <li class=\"page-item\" *ngIf=\"showEllipsisEnd\">\n            <span class=\"page-link\" [attr.title]=\"'...'\">\n              <span class=\"nav-num\">...</span>\n            </span>\n          </li>\n\n          <li\n            class=\"page-item\"\n            (click)=\"handleOnChange(pagingSize)\"\n            *ngIf=\"pagingSize > 1\"\n          >\n            <button\n              class=\"page-link\"\n              [ngClass]=\"{ active: value === pagingSize }\"\n              [attr.title]=\"lastText\"\n            >\n              <span class=\"nav-num\">{{ pagingSize }}</span>\n            </button>\n          </li>\n        </ng-container>\n\n        <ng-container>\n          <li class=\"page-item\" (click)=\"handleOnChange(value + 1)\">\n            <button class=\"page-link\" [attr.title]=\"nextText\">\n              <span class=\"nav-action\">\n                <ng-container *ngIf=\"useTextNav; else angleRightIcon\">\n                  {{ nextText ? nextText : 'Next' }}\n                </ng-container>\n                <ng-template #angleRightIcon>\n                  <gds-icon-chevron-right\n                    *nggCoreElement\n                  ></gds-icon-chevron-right>\n                </ng-template>\n              </span>\n            </button>\n          </li>\n        </ng-container>\n\n        <ng-container *ngIf=\"showGoToPage\">\n          <li>\n            <div class=\"paging-input-wrapper\">\n              <div class=\"label-wrapper\">\n                <label for=\"pageInput\" *transloco=\"let t\">\n                  {{ t('label.gotopage') }}\n                </label>\n              </div>\n              <div class=\"input-wrapper\">\n                <input\n                  #pageInput\n                  data-thook=\"pagination-go-to-input\"\n                  min=\"1\"\n                  [max]=\"pagingSize\"\n                  id=\"pageInput\"\n                  class=\"gds-field\"\n                  type=\"number\"\n                  (keydown.enter)=\"handlePageInput(pageInput.value)\"\n                  [ngModel]=\"value\"\n                />\n                <button\n                  type=\"button\"\n                  data-thook=\"pagination-go-to-button\"\n                  (click)=\"handlePageInput(pageInput.value)\"\n                >\n                  <gds-icon-chevron-right\n                    *nggCoreElement\n                  ></gds-icon-chevron-right>\n                </button>\n              </div>\n            </div>\n          </li>\n        </ng-container>\n      </ul>\n    </ng-template>\n  </nav>\n</div>\n", styles: [":host .pagination-wrapper .paging-input-wrapper{display:flex}:host .pagination-wrapper .paging-input-wrapper .label-wrapper{margin:auto;padding:0 1em}:host .pagination-wrapper .paging-input-wrapper .input-wrapper{display:flex;border:.0625em solid #868686;border-radius:4px;height:100%}:host .pagination-wrapper .paging-input-wrapper .input-wrapper input{border:0;padding:.5em;min-height:2.5rem;width:60px;box-sizing:border-box;border-radius:3px;font-size:1rem;font-family:inherit}:host .pagination-wrapper .paging-input-wrapper .input-wrapper input:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .pagination-wrapper .paging-input-wrapper .input-wrapper>button{border:0;color:#1a1a1a;background-color:transparent;font-size:1rem;font-family:inherit}:host .pagination-wrapper .paging-input-wrapper .input-wrapper>button:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .pagination-wrapper>.custom-pagination>.pagination{display:flex;list-style:none;margin-top:10px;margin-bottom:10px}:host .pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link{position:relative;text-align:center;padding-top:0;padding-bottom:0;min-width:38px;height:40px;display:inline-flex;align-items:center;background-color:transparent;color:#1a1a1a;border:none;border-radius:4px;font-size:1rem;font-family:inherit}:host .pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link.active{background-color:#1a1a1a;color:#eee}:host .pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link>.nav-num{margin:0 auto}:host .pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link>.nav-action{margin:0 auto;display:inline-flex}:host .pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link:hover{box-shadow:0 2px 6px #eee}:host .pagination-wrapper>.custom-pagination>.pagination.dotnav .page-item{width:20px;height:25px}:host .pagination-wrapper>.custom-pagination>.pagination.dotnav .page-item .page-dot-link{position:relative;display:inline-block;width:10px;height:10px;border-radius:50%;cursor:pointer;background-color:#a2ddfe;transition:all .2s;margin:0 auto;will-change:transform}:host .pagination-wrapper>.custom-pagination>.pagination.dotnav .page-item .page-dot-link.active{background-color:#007ac7;cursor:default;transform:scale(1.3)}:host .pagination-wrapper>.custom-pagination>.pagination.dotnav .page-item .page-dot-link:hover:not(.active){background-color:#41b0ee}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nggv-pagination', template: "<div class=\"pagination-wrapper\" [ngClass]=\"className\" [attr.id]=\"id\">\n  <nav class=\"custom-pagination\">\n    <ng-container *ngIf=\"useDotNav; else numNav\">\n      <ul class=\"pagination dotnav\">\n        <ng-container *ngFor=\"let num of dotnavList\">\n          <li class=\"page-item\" (click)=\"handleOnChange(num)\" [value]=\"num\">\n            <span\n              class=\"page-dot-link\"\n              [ngClass]=\"{ active: value === num }\"\n            ></span>\n          </li>\n        </ng-container>\n      </ul>\n    </ng-container>\n\n    <ng-template #numNav>\n      <ul class=\"pagination\">\n        <ng-container>\n          <li class=\"page-item\" (click)=\"handleOnChange(value - 1)\">\n            <button\n              class=\"page-link\"\n              [attr.title]=\"previousText\"\n              [attr.disabled]=\"value === 1 ? 'disabled' : null\"\n            >\n              <span class=\"nav-action\">\n                <ng-container *ngIf=\"useTextNav; else angleLeftIcon\">\n                  {{ previousText ? previousText : 'Previous' }}\n                </ng-container>\n                <ng-template #angleLeftIcon>\n                  <gds-icon-chevron-left\n                    *nggCoreElement\n                  ></gds-icon-chevron-left>\n                </ng-template>\n              </span>\n            </button>\n          </li>\n        </ng-container>\n\n        <ng-container *ngIf=\"useFirstAndLast\">\n          <li class=\"page-item\" (click)=\"handleOnChange(1)\">\n            <button\n              class=\"page-link\"\n              [ngClass]=\"{ active: value === 1 }\"\n              [attr.title]=\"firstText\"\n            >\n              <span class=\"nav-num\">{{ 1 }}</span>\n            </button>\n          </li>\n\n          <li class=\"page-item\" *ngIf=\"showEllipsisStart\">\n            <span class=\"page-link\" [attr.title]=\"'...'\">\n              <span class=\"nav-num\">...</span>\n            </span>\n          </li>\n        </ng-container>\n\n        <ng-container *ngFor=\"let num of list\">\n          <li\n            class=\"page-item\"\n            [ngClass]=\"{ active: value === num }\"\n            (click)=\"handleOnChange(num)\"\n            value=\"num\"\n          >\n            <button class=\"page-link\" [ngClass]=\"{ active: value === num }\">\n              <span class=\"nav-num\">{{ num }}</span>\n            </button>\n          </li>\n        </ng-container>\n\n        <ng-container *ngIf=\"useFirstAndLast\">\n          <li class=\"page-item\" *ngIf=\"showEllipsisEnd\">\n            <span class=\"page-link\" [attr.title]=\"'...'\">\n              <span class=\"nav-num\">...</span>\n            </span>\n          </li>\n\n          <li\n            class=\"page-item\"\n            (click)=\"handleOnChange(pagingSize)\"\n            *ngIf=\"pagingSize > 1\"\n          >\n            <button\n              class=\"page-link\"\n              [ngClass]=\"{ active: value === pagingSize }\"\n              [attr.title]=\"lastText\"\n            >\n              <span class=\"nav-num\">{{ pagingSize }}</span>\n            </button>\n          </li>\n        </ng-container>\n\n        <ng-container>\n          <li class=\"page-item\" (click)=\"handleOnChange(value + 1)\">\n            <button class=\"page-link\" [attr.title]=\"nextText\">\n              <span class=\"nav-action\">\n                <ng-container *ngIf=\"useTextNav; else angleRightIcon\">\n                  {{ nextText ? nextText : 'Next' }}\n                </ng-container>\n                <ng-template #angleRightIcon>\n                  <gds-icon-chevron-right\n                    *nggCoreElement\n                  ></gds-icon-chevron-right>\n                </ng-template>\n              </span>\n            </button>\n          </li>\n        </ng-container>\n\n        <ng-container *ngIf=\"showGoToPage\">\n          <li>\n            <div class=\"paging-input-wrapper\">\n              <div class=\"label-wrapper\">\n                <label for=\"pageInput\" *transloco=\"let t\">\n                  {{ t('label.gotopage') }}\n                </label>\n              </div>\n              <div class=\"input-wrapper\">\n                <input\n                  #pageInput\n                  data-thook=\"pagination-go-to-input\"\n                  min=\"1\"\n                  [max]=\"pagingSize\"\n                  id=\"pageInput\"\n                  class=\"gds-field\"\n                  type=\"number\"\n                  (keydown.enter)=\"handlePageInput(pageInput.value)\"\n                  [ngModel]=\"value\"\n                />\n                <button\n                  type=\"button\"\n                  data-thook=\"pagination-go-to-button\"\n                  (click)=\"handlePageInput(pageInput.value)\"\n                >\n                  <gds-icon-chevron-right\n                    *nggCoreElement\n                  ></gds-icon-chevron-right>\n                </button>\n              </div>\n            </div>\n          </li>\n        </ng-container>\n      </ul>\n    </ng-template>\n  </nav>\n</div>\n", styles: [":host .pagination-wrapper .paging-input-wrapper{display:flex}:host .pagination-wrapper .paging-input-wrapper .label-wrapper{margin:auto;padding:0 1em}:host .pagination-wrapper .paging-input-wrapper .input-wrapper{display:flex;border:.0625em solid #868686;border-radius:4px;height:100%}:host .pagination-wrapper .paging-input-wrapper .input-wrapper input{border:0;padding:.5em;min-height:2.5rem;width:60px;box-sizing:border-box;border-radius:3px;font-size:1rem;font-family:inherit}:host .pagination-wrapper .paging-input-wrapper .input-wrapper input:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .pagination-wrapper .paging-input-wrapper .input-wrapper>button{border:0;color:#1a1a1a;background-color:transparent;font-size:1rem;font-family:inherit}:host .pagination-wrapper .paging-input-wrapper .input-wrapper>button:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .pagination-wrapper>.custom-pagination>.pagination{display:flex;list-style:none;margin-top:10px;margin-bottom:10px}:host .pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link{position:relative;text-align:center;padding-top:0;padding-bottom:0;min-width:38px;height:40px;display:inline-flex;align-items:center;background-color:transparent;color:#1a1a1a;border:none;border-radius:4px;font-size:1rem;font-family:inherit}:host .pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link.active{background-color:#1a1a1a;color:#eee}:host .pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link>.nav-num{margin:0 auto}:host .pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link>.nav-action{margin:0 auto;display:inline-flex}:host .pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link:hover{box-shadow:0 2px 6px #eee}:host .pagination-wrapper>.custom-pagination>.pagination.dotnav .page-item{width:20px;height:25px}:host .pagination-wrapper>.custom-pagination>.pagination.dotnav .page-item .page-dot-link{position:relative;display:inline-block;width:10px;height:10px;border-radius:50%;cursor:pointer;background-color:#a2ddfe;transition:all .2s;margin:0 auto;will-change:transform}:host .pagination-wrapper>.custom-pagination>.pagination.dotnav .page-item .page-dot-link.active{background-color:#007ac7;cursor:default;transform:scale(1.3)}:host .pagination-wrapper>.custom-pagination>.pagination.dotnav .page-item .page-dot-link:hover:not(.active){background-color:#41b0ee}\n"] }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], firstText: [{
+                type: Input
+            }], lastText: [{
+                type: Input
+            }], nextText: [{
+                type: Input
+            }], offset: [{
+                type: Input
+            }], pagingLength: [{
+                type: Input
+            }], previousText: [{
+                type: Input
+            }], useFirstAndLast: [{
+                type: Input
+            }], useTextNav: [{
+                type: Input
+            }], useDotNav: [{
+                type: Input
+            }], showGoToPage: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], pageNumberChange: [{
+                type: Output
+            }] } });
+
+class NggvPaginationModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvPaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: NggvPaginationModule, declarations: [PaginationComponent], imports: [CommonModule,
+            FormsModule,
+            NggvI18nModule,
+            TranslocoModule,
+            NggCoreWrapperModule], exports: [PaginationComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvPaginationModule, imports: [CommonModule,
+            FormsModule,
+            NggvI18nModule,
+            TranslocoModule,
+            NggCoreWrapperModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvPaginationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PaginationComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        NggvI18nModule,
+                        TranslocoModule,
+                        NggCoreWrapperModule,
+                    ],
+                    exports: [PaginationComponent],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NggvPaginationModule, PaginationComponent };
+//# sourceMappingURL=sebgroup-green-angular-src-v-angular-pagination.mjs.map

package/fesm2022/sebgroup-green-angular-src-v-angular-pagination.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sebgroup-green-angular-src-v-angular-pagination.mjs","sources":["../../../../libs/angular/src/v-angular/pagination/pagination.component.ts","../../../../libs/angular/src/v-angular/pagination/pagination.component.html","../../../../libs/angular/src/v-angular/pagination/pagination.module.ts","../../../../libs/angular/src/v-angular/pagination/sebgroup-green-angular-src-v-angular-pagination.ts"],"sourcesContent":["import {\n  Component,\n  EventEmitter,\n  Input,\n  OnChanges,\n  Output,\n  SimpleChanges,\n} from '@angular/core'\n\nimport '@sebgroup/green-core/components/icon/icons/chevron-left.js'\nimport '@sebgroup/green-core/components/icon/icons/chevron-right.js'\nimport '@sebgroup/green-core/components/icon/icons/arrow-left.js'\n\n/** The Pagination component is used to separate long sets of data so that it is easier for a user to consume information. To change the current page simply click on the page number. */\n@Component({\n  selector: 'nggv-pagination',\n  templateUrl: './pagination.component.html',\n  styleUrls: ['./pagination.component.scss'],\n})\nexport class PaginationComponent implements OnChanges {\n  /** Total size of pagination */\n  @Input() size = 0\n  /** Selected page */\n  @Input() value = 1\n  /** First page text */\n  @Input() firstText?: string\n  /** Last page text */\n  @Input() lastText?: string\n  /** Next page text */\n  @Input() nextText?: string\n  /** Offset per page */\n  @Input() offset?: number\n  /** Number of pages to display*/\n  @Input() pagingLength?: number\n  /** Previous page text */\n  @Input() previousText?: string\n  /** Use first and last navigation buttons*/\n  @Input() useFirstAndLast?: boolean = true\n  /** Use text-based navigation buttons*/\n  @Input() useTextNav?: boolean\n  /** Use dot-navigation */\n  @Input() useDotNav?: boolean\n  /** Use 'Go to page' input field */\n  @Input() showGoToPage = true\n  /** Element class name */\n  @Input() className = ''\n  /** Element ID */\n  @Input() id?: string\n  /** Callback on page change */\n  @Output() pageNumberChange: EventEmitter<number> = new EventEmitter<number>()\n\n  /** @internal */\n  pageNumber = 0\n  /** @internal */\n  list: Array<number> = []\n  /** @internal */\n  dotnavList: Array<number> = []\n  /** @internal */\n  pagingSize = 0\n  /** @internal */\n  showEllipsisStart = false\n  /** @internal */\n  showEllipsisEnd = false\n\n  ngOnChanges(changes: SimpleChanges) {\n    if (changes?.offset || changes?.size) {\n      this.setPagingSize()\n    }\n\n    if (changes?.pagingLength || changes?.value) {\n      this.generateList()\n    }\n  }\n\n  /** @internal */\n  setPagingSize() {\n    const initialOffset: number = this.offset ? this.offset : 10\n    this.pagingSize = Math.ceil(Number(this.size) / initialOffset)\n    this.generateList()\n  }\n\n  /** @internal */\n  handleOnChange(value: number): void {\n    if (value <= 0) {\n      this.pageNumberChange.emit(1)\n    } else if (value > this.pagingSize) {\n      this.pageNumberChange.emit(this.pagingSize)\n    } else {\n      this.pageNumberChange.emit(value)\n    }\n  }\n\n  /** @internal */\n  handlePageInput(pageInput: string) {\n    this.handleOnChange(Number(pageInput))\n  }\n\n  /**\n   * Generates an array of the pages that needs to be displayed\n   * It depends on the size, offset, and the current value\n   */\n  private generateList(): void {\n    const genList: Array<number> = []\n    const length: number = this.pagingLength ? this.pagingLength : 5\n\n    for (let i = 1; i <= this.pagingSize; i++) {\n      genList.push(i)\n    }\n\n    const medianValue: number = Math.ceil(length / 2)\n    let start = 0\n    let end = this.pagingSize\n\n    if (length < this.pagingSize) {\n      if (this.pagingSize - this.value < medianValue) {\n        start = this.pagingSize - length\n      } else if (this.value - medianValue > -1) {\n        start = this.value - medianValue\n      }\n      end = start + length\n    }\n    if (this.useFirstAndLast) {\n      if (start == 0) {\n        start = 1\n        end = start + length\n      }\n\n      if (end > this.pagingSize - 1) {\n        end = this.pagingSize - 1\n        start = Math.max(1, end - length)\n      }\n    }\n\n    this.dotnavList = genList\n    const pagingStart = genList[start]\n    const pagingEnd = genList[end - 1]\n    this.showEllipsisStart = pagingStart > 2\n    this.showEllipsisEnd = pagingEnd < this.pagingSize - 1\n    this.list = genList.slice(start, end)\n  }\n}\n","<div class=\"pagination-wrapper\" [ngClass]=\"className\" [attr.id]=\"id\">\n  <nav class=\"custom-pagination\">\n    <ng-container *ngIf=\"useDotNav; else numNav\">\n      <ul class=\"pagination dotnav\">\n        <ng-container *ngFor=\"let num of dotnavList\">\n          <li class=\"page-item\" (click)=\"handleOnChange(num)\" [value]=\"num\">\n            <span\n              class=\"page-dot-link\"\n              [ngClass]=\"{ active: value === num }\"\n            ></span>\n          </li>\n        </ng-container>\n      </ul>\n    </ng-container>\n\n    <ng-template #numNav>\n      <ul class=\"pagination\">\n        <ng-container>\n          <li class=\"page-item\" (click)=\"handleOnChange(value - 1)\">\n            <button\n              class=\"page-link\"\n              [attr.title]=\"previousText\"\n              [attr.disabled]=\"value === 1 ? 'disabled' : null\"\n            >\n              <span class=\"nav-action\">\n                <ng-container *ngIf=\"useTextNav; else angleLeftIcon\">\n                  {{ previousText ? previousText : 'Previous' }}\n                </ng-container>\n                <ng-template #angleLeftIcon>\n                  <gds-icon-chevron-left\n                    *nggCoreElement\n                  ></gds-icon-chevron-left>\n                </ng-template>\n              </span>\n            </button>\n          </li>\n        </ng-container>\n\n        <ng-container *ngIf=\"useFirstAndLast\">\n          <li class=\"page-item\" (click)=\"handleOnChange(1)\">\n            <button\n              class=\"page-link\"\n              [ngClass]=\"{ active: value === 1 }\"\n              [attr.title]=\"firstText\"\n            >\n              <span class=\"nav-num\">{{ 1 }}</span>\n            </button>\n          </li>\n\n          <li class=\"page-item\" *ngIf=\"showEllipsisStart\">\n            <span class=\"page-link\" [attr.title]=\"'...'\">\n              <span class=\"nav-num\">...</span>\n            </span>\n          </li>\n        </ng-container>\n\n        <ng-container *ngFor=\"let num of list\">\n          <li\n            class=\"page-item\"\n            [ngClass]=\"{ active: value === num }\"\n            (click)=\"handleOnChange(num)\"\n            value=\"num\"\n          >\n            <button class=\"page-link\" [ngClass]=\"{ active: value === num }\">\n              <span class=\"nav-num\">{{ num }}</span>\n            </button>\n          </li>\n        </ng-container>\n\n        <ng-container *ngIf=\"useFirstAndLast\">\n          <li class=\"page-item\" *ngIf=\"showEllipsisEnd\">\n            <span class=\"page-link\" [attr.title]=\"'...'\">\n              <span class=\"nav-num\">...</span>\n            </span>\n          </li>\n\n          <li\n            class=\"page-item\"\n            (click)=\"handleOnChange(pagingSize)\"\n            *ngIf=\"pagingSize > 1\"\n          >\n            <button\n              class=\"page-link\"\n              [ngClass]=\"{ active: value === pagingSize }\"\n              [attr.title]=\"lastText\"\n            >\n              <span class=\"nav-num\">{{ pagingSize }}</span>\n            </button>\n          </li>\n        </ng-container>\n\n        <ng-container>\n          <li class=\"page-item\" (click)=\"handleOnChange(value + 1)\">\n            <button class=\"page-link\" [attr.title]=\"nextText\">\n              <span class=\"nav-action\">\n                <ng-container *ngIf=\"useTextNav; else angleRightIcon\">\n                  {{ nextText ? nextText : 'Next' }}\n                </ng-container>\n                <ng-template #angleRightIcon>\n                  <gds-icon-chevron-right\n                    *nggCoreElement\n                  ></gds-icon-chevron-right>\n                </ng-template>\n              </span>\n            </button>\n          </li>\n        </ng-container>\n\n        <ng-container *ngIf=\"showGoToPage\">\n          <li>\n            <div class=\"paging-input-wrapper\">\n              <div class=\"label-wrapper\">\n                <label for=\"pageInput\" *transloco=\"let t\">\n                  {{ t('label.gotopage') }}\n                </label>\n              </div>\n              <div class=\"input-wrapper\">\n                <input\n                  #pageInput\n                  data-thook=\"pagination-go-to-input\"\n                  min=\"1\"\n                  [max]=\"pagingSize\"\n                  id=\"pageInput\"\n                  class=\"gds-field\"\n                  type=\"number\"\n                  (keydown.enter)=\"handlePageInput(pageInput.value)\"\n                  [ngModel]=\"value\"\n                />\n                <button\n                  type=\"button\"\n                  data-thook=\"pagination-go-to-button\"\n                  (click)=\"handlePageInput(pageInput.value)\"\n                >\n                  <gds-icon-chevron-right\n                    *nggCoreElement\n                  ></gds-icon-chevron-right>\n                </button>\n              </div>\n            </div>\n          </li>\n        </ng-container>\n      </ul>\n    </ng-template>\n  </nav>\n</div>\n","import { CommonModule } from '@angular/common'\nimport { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'\nimport { FormsModule } from '@angular/forms'\nimport { TranslocoModule } from '@jsverse/transloco'\n\nimport { NggCoreWrapperModule } from '@sebgroup/green-angular/src/lib/shared'\nimport { NggvI18nModule } from '@sebgroup/green-angular/src/v-angular/i18n'\nimport { PaginationComponent } from './pagination.component'\n\n@NgModule({\n  declarations: [PaginationComponent],\n  imports: [\n    CommonModule,\n    FormsModule,\n    NggvI18nModule,\n    TranslocoModule,\n    NggCoreWrapperModule,\n  ],\n  exports: [PaginationComponent],\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class NggvPaginationModule {}\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-src-v-angular-radio.mjs

@@ -0,0 +1,156 @@
+import '@sebgroup/green-core/components/icon/icons/triangle-exclamation.js';
+import * as i0 from '@angular/core';
+import { Injectable, Component, Self, Optional, Inject, HostBinding, Input, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import * as i1 from '@angular/forms';
+import * as i3 from '@jsverse/transloco';
+import { TRANSLOCO_SCOPE } from '@jsverse/transloco';
+import { NggvBaseControlValueAccessorComponent } from '@sebgroup/green-angular/src/v-angular/base-control-value-accessor';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i4 from '@sebgroup/green-angular/src/lib/shared';
+import { NggCoreWrapperModule } from '@sebgroup/green-angular/src/lib/shared';
+import { NggvI18nModule } from '@sebgroup/green-angular/src/v-angular/i18n';
+
+/** @internal Internal class used to uncheck radio buttons with the matching name. */
+class NggvRadioControlRegistry {
+    constructor() {
+        this._radios = [];
+    }
+    add(control, radio) {
+        this._radios.push([control, radio]);
+    }
+    remove(radio) {
+        for (let i = this._radios.length - 1; i >= 0; --i) {
+            if (this._radios[i][1] === radio) {
+                this._radios.splice(i, 1);
+                return;
+            }
+        }
+    }
+    select(radio) {
+        this._radios.forEach((controlPair) => {
+            if (this._isSameGroup(controlPair, radio) && controlPair[1] !== radio) {
+                controlPair[1].writeValue(radio.value);
+            }
+        });
+    }
+    _isSameGroup(controlPair, radio) {
+        if (!controlPair[0].control)
+            return false;
+        return (
+        //@ts-expect-error internal properties not exposed
+        controlPair[0]._parent === radio.ngControl._parent &&
+            controlPair[1].name === radio.name);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvRadioControlRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvRadioControlRegistry }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvRadioControlRegistry, decorators: [{
+            type: Injectable
+        }] });
+/**
+ * Use radio buttons when users must select one option in a list with exclusive options out of a set of two or more options.
+ * https://designlibrary.sebgroup.com/components/component-radiobutton
+ */
+class NggvRadioComponent extends NggvBaseControlValueAccessorComponent {
+    /**
+     * Creates a new RadioComponent
+     * @param ngControl optional FormControl provided when component is used in a form, through dependency injection.
+     * @param registry internal registry used to uncheck radio buttons with the matching name, through dependency injection.
+     * @param cdr change detection reference for rendering purposes.
+     */
+    constructor(ngControl, translocoScope, registry, cdr) {
+        super(ngControl, translocoScope, cdr);
+        this.ngControl = ngControl;
+        this.translocoScope = translocoScope;
+        this.registry = registry;
+        this.cdr = cdr;
+        /** Special property used for selecting DOM elements during automated UI testing. */
+        this.thook = 'radio';
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this._checkName();
+        this.registry.add(this.ngControl, this);
+    }
+    ngOnDestroy() {
+        this.registry.remove(this);
+    }
+    /** @internal */
+    onInputChange(event) {
+        event.stopPropagation();
+        if (this.disabled)
+            return;
+        this.onChange(this.state);
+    }
+    /** Writes a new value of true or false based on if argument matches this components value property. */
+    writeValue(value) {
+        // Phantom null value on first load https://github.com/angular/angular/pull/38140
+        super.writeValue(value === this.value);
+    }
+    /** Registers a callback function that is called when the child input element's value changes. */
+    registerOnChange(fn) {
+        // Override default to update registry
+        this.onChange = () => {
+            fn(this.value);
+            this.registry.select(this);
+        };
+    }
+    /** Checks that the name properties match and updates name property if only formControlName is given. */
+    _checkName() {
+        if (this.name &&
+            this.formControlName &&
+            this.name !== this.formControlName) {
+            throw new Error(`
+      If you define both a name and a formControlName attribute on your radio button, their values
+      must match. Ex: <input type="radio" formControlName="food" name="food">
+    `);
+        }
+        if (!this.name && this.formControlName)
+            this.name = this.formControlName;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvRadioComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: NggvRadioControlRegistry }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvRadioComponent, selector: "nggv-radio", inputs: { thook: "thook", formControlName: "formControlName" }, host: { properties: { "attr.data-thook": "this.thook" } }, providers: [NggvRadioControlRegistry], usesInheritance: true, ngImport: i0, template: "<!-- LOCKED INPUT -->\n<div *ngIf=\"locked && state\">\n  <div\n    [id]=\"id + '-radio'\"\n    class=\"nggv-field--locked\"\n    [attr.name]=\"name\"\n    [attr.value]=\"value\"\n  >\n    {{ label }}\n    <ng-template\n      *ngTemplateOutlet=\"labelContentTpl ?? null; context: { $implicit: value }\"\n    ></ng-template>\n  </div>\n</div>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n  <div>\n    <!-- RADIO BUTTON FIELD -->\n    <label [attr.for]=\"id + '-radio'\" class=\"form-control\">\n      <input\n        #input\n        type=\"radio\"\n        [attr.id]=\"id + '-radio'\"\n        [attr.name]=\"name\"\n        [attr.value]=\"value\"\n        [attr.required]=\"required\"\n        [disabled]=\"disabled\"\n        [autofocus]=\"autofocus\"\n        [attr.aria-label]=\"description\"\n        [checked]=\"state\"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"onInputChange($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n\n      <!-- LABEL -->\n      {{ label }}\n      <ng-template\n        *ngTemplateOutlet=\"\n          labelContentTpl ?? null;\n          context: { $implicit: value }\n        \"\n      ></ng-template>\n      <i></i>\n    </label>\n  </div>\n\n  <!-- ERRORS -->\n  <ng-container *transloco=\"let t; read: scope\">\n    <div\n      class=\"form-info form-info--error\"\n      [attr.for]=\"id + '-radio'\"\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      <span\n        *ngIf=\"error; else errorsRef\"\n        [attr.data-thook]=\"thook + '-errorlabel'\"\n      >\n        {{ error }}\n      </span>\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    </div>\n  </ng-container>\n\n  <!-- CHILDREN -->\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--gds-ref-pallet-base200: hsl(0, 0%, 91%);--gds-ref-pallet-base500: hsl(0, 0%, 68%);--gds-ref-pallet-base600: hsl(0, 0%, 53%);--gds-comp-checkbox-container-height: 1rem;--gds-comp-checkbox-container-width: 1rem;--gds-comp-checkbox-container-color: var(#fff);--gds-comp-checkbox-container-color-disabled: var(--gds-ref-pallet-base200);--gds-comp-checkbox-border-color: #333;--gds-comp-checkbox-border-radius: 2px;--gds-comp-checkbox-hover-border-color: var(--gds-ref-pallet-base600);--gds-comp-checkbox-container-color-selected: #333;--gds-comp-checkbox-border-color-selected: var(#fff);--gds-comp-checkbox-border-color-focus: var(--gds-sys-color-blue-dark-2);--gds-comp-radio-container-height: 1rem;--gds-comp-radio-container-width: 1rem;--gds-comp-radio-border-radius: 50%;--gds-comp-radio-ring-width: .1875rem;--gds-comp-radio-container-background-disabled: var(--gds-ref-pallet-base200);--gds-comp-radio-border: #333;--gds-comp-radio-border-checked: #333;--gds-comp-radio-border-hover: var(--gds-ref-pallet-base600);--gds-comp-radio-border-checked-hover: var(--gds-ref-pallet-base600);--gds-comp-radio-border-disabled: var(--gds-ref-pallet-base500);--gds-comp-radio-ring: var(#fff);--gds-comp-radio-ring-checked: var(#fff);--gds-comp-radio-ring-hover: var(#fff);--gds-comp-radio-ring-checked-hover: var(#fff);--gds-comp-radio-ring-disabled: var(#fff);--gds-comp-radio-dot: transparent;--gds-comp-radio-dot-checked: #333;--gds-comp-radio-dot-hover: var(--gds-ref-pallet-base600);--gds-comp-radio-dot-checked-hover: var(--gds-ref-pallet-base600);--gds-comp-radio-dot-disabled: var(--gds-ref-pallet-base600)}:host .nggv-field--locked{display:inline-block;border-radius:.25em;position:relative;min-height:2em;padding:.5em .75em .5em 0}:host .form-control{padding:.75rem 1rem;border:1px solid transparent;border-radius:var(--gds-sys-shape-corner-medium);align-items:center;cursor:pointer;display:flex;flex-direction:row-reverse;font:inherit;justify-content:flex-end;position:relative;user-select:none;-webkit-user-select:none}:host .form-control:has(input:disabled){cursor:not-allowed}:host label.form-control input[type=radio]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}:host label.form-control:has(input[type=radio]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:has(input[type=radio]:focus-visible):focus,:host label.form-control:has(input[type=radio]:focus-visible):focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host label.form-control input[type=radio]~i{margin-right:.75rem;margin-top:.0625rem;flex-shrink:0;position:relative;border-radius:var(--gds-comp-radio-border-radius);display:flex;height:var(--gds-comp-radio-container-height);width:var(--gds-comp-radio-container-width);box-shadow:inset 0 0 0 .05rem var(--gds-comp-radio-border)}:host label.form-control input[type=radio]~i:after{content:\"\";width:100%;height:100%;border-radius:var(--gds-comp-radio-border-radius);background-color:var(--gds-comp-radio-dot);transform:scale(.5)}:host label.form-control:hover input[type=radio]:not(.disabled,:disabled)~i{box-shadow:inset 0 0 0 .05rem var(--gds-comp-radio-border-hover)}:host label.form-control:hover input[type=radio]:not(.disabled,:disabled)~i:after{background-color:var(--gds-comp-radio-dot-hover)}:host label.form-control input[type=radio]:checked:not(.disabled,:disabled)~i{box-shadow:inset 0 0 0 .05rem var(--gds-comp-radio-border-checked)}:host label.form-control input[type=radio]:checked:not(.disabled,:disabled)~i:after{background-color:var(--gds-comp-radio-dot-checked)}:host label.form-control:hover input[type=radio]:checked:not(.disabled,:disabled)~i{box-shadow:inset 0 0 0 .05rem var(--gds-comp-radio-border-checked-hover)}:host label.form-control:hover input[type=radio]:checked:not(.disabled,:disabled)~i:after{background-color:var(--gds-comp-radio-dot-checked-hover)}:host .was-validated label.form-control input[type=radio]:not(.is-invalid):valid~i,:host label.form-control input[type=radio].is-valid~i{--border-color: var(--intent-success-background);--sg-border-color: var(--intent-success-background)}:host .was-validated label.form-control input[type=radio]:not(.is-valid):invalid~i,:host label.form-control input[type=radio].is-invalid~i{--border-color: var(--intent-danger-background);--sg-border-color: var(--intent-danger-background)}:host label.form-control input[type=radio]:disabled~i,:host label.form-control input[type=radio].disabled~i{background-color:var(--gds-comp-radio-container-background-disabled);box-shadow:inset 0 0 0 .05rem var(--gds-comp-radio-border-disabled)}:host label.form-control input[type=radio]:disabled~span,:host label.form-control input[type=radio].disabled~span{color:var(--text-disabled-color)!important;cursor:not-allowed}:host label.form-control input[type=radio]:disabled~span::placeholder,:host label.form-control input[type=radio].disabled~span::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=radio]:disabled:checked~i:after,:host label.form-control input[type=radio]:checked.disabled~i:after{background-color:var(--gds-comp-radio-dot-disabled)}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}:host .form-info{font-weight:500;padding-left:1rem;margin-top:-.25rem}:host .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .form-info--error .error-icon{margin-top:.128rem;align-items:center}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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.NggCoreElementDirective, selector: "[nggCoreElement]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvRadioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nggv-radio', providers: [NggvRadioControlRegistry], template: "<!-- LOCKED INPUT -->\n<div *ngIf=\"locked && state\">\n  <div\n    [id]=\"id + '-radio'\"\n    class=\"nggv-field--locked\"\n    [attr.name]=\"name\"\n    [attr.value]=\"value\"\n  >\n    {{ label }}\n    <ng-template\n      *ngTemplateOutlet=\"labelContentTpl ?? null; context: { $implicit: value }\"\n    ></ng-template>\n  </div>\n</div>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n  <div>\n    <!-- RADIO BUTTON FIELD -->\n    <label [attr.for]=\"id + '-radio'\" class=\"form-control\">\n      <input\n        #input\n        type=\"radio\"\n        [attr.id]=\"id + '-radio'\"\n        [attr.name]=\"name\"\n        [attr.value]=\"value\"\n        [attr.required]=\"required\"\n        [disabled]=\"disabled\"\n        [autofocus]=\"autofocus\"\n        [attr.aria-label]=\"description\"\n        [checked]=\"state\"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"onInputChange($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n\n      <!-- LABEL -->\n      {{ label }}\n      <ng-template\n        *ngTemplateOutlet=\"\n          labelContentTpl ?? null;\n          context: { $implicit: value }\n        \"\n      ></ng-template>\n      <i></i>\n    </label>\n  </div>\n\n  <!-- ERRORS -->\n  <ng-container *transloco=\"let t; read: scope\">\n    <div\n      class=\"form-info form-info--error\"\n      [attr.for]=\"id + '-radio'\"\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      <span\n        *ngIf=\"error; else errorsRef\"\n        [attr.data-thook]=\"thook + '-errorlabel'\"\n      >\n        {{ error }}\n      </span>\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    </div>\n  </ng-container>\n\n  <!-- CHILDREN -->\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--gds-ref-pallet-base200: hsl(0, 0%, 91%);--gds-ref-pallet-base500: hsl(0, 0%, 68%);--gds-ref-pallet-base600: hsl(0, 0%, 53%);--gds-comp-checkbox-container-height: 1rem;--gds-comp-checkbox-container-width: 1rem;--gds-comp-checkbox-container-color: var(#fff);--gds-comp-checkbox-container-color-disabled: var(--gds-ref-pallet-base200);--gds-comp-checkbox-border-color: #333;--gds-comp-checkbox-border-radius: 2px;--gds-comp-checkbox-hover-border-color: var(--gds-ref-pallet-base600);--gds-comp-checkbox-container-color-selected: #333;--gds-comp-checkbox-border-color-selected: var(#fff);--gds-comp-checkbox-border-color-focus: var(--gds-sys-color-blue-dark-2);--gds-comp-radio-container-height: 1rem;--gds-comp-radio-container-width: 1rem;--gds-comp-radio-border-radius: 50%;--gds-comp-radio-ring-width: .1875rem;--gds-comp-radio-container-background-disabled: var(--gds-ref-pallet-base200);--gds-comp-radio-border: #333;--gds-comp-radio-border-checked: #333;--gds-comp-radio-border-hover: var(--gds-ref-pallet-base600);--gds-comp-radio-border-checked-hover: var(--gds-ref-pallet-base600);--gds-comp-radio-border-disabled: var(--gds-ref-pallet-base500);--gds-comp-radio-ring: var(#fff);--gds-comp-radio-ring-checked: var(#fff);--gds-comp-radio-ring-hover: var(#fff);--gds-comp-radio-ring-checked-hover: var(#fff);--gds-comp-radio-ring-disabled: var(#fff);--gds-comp-radio-dot: transparent;--gds-comp-radio-dot-checked: #333;--gds-comp-radio-dot-hover: var(--gds-ref-pallet-base600);--gds-comp-radio-dot-checked-hover: var(--gds-ref-pallet-base600);--gds-comp-radio-dot-disabled: var(--gds-ref-pallet-base600)}:host .nggv-field--locked{display:inline-block;border-radius:.25em;position:relative;min-height:2em;padding:.5em .75em .5em 0}:host .form-control{padding:.75rem 1rem;border:1px solid transparent;border-radius:var(--gds-sys-shape-corner-medium);align-items:center;cursor:pointer;display:flex;flex-direction:row-reverse;font:inherit;justify-content:flex-end;position:relative;user-select:none;-webkit-user-select:none}:host .form-control:has(input:disabled){cursor:not-allowed}:host label.form-control input[type=radio]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}:host label.form-control:has(input[type=radio]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:has(input[type=radio]:focus-visible):focus,:host label.form-control:has(input[type=radio]:focus-visible):focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host label.form-control input[type=radio]~i{margin-right:.75rem;margin-top:.0625rem;flex-shrink:0;position:relative;border-radius:var(--gds-comp-radio-border-radius);display:flex;height:var(--gds-comp-radio-container-height);width:var(--gds-comp-radio-container-width);box-shadow:inset 0 0 0 .05rem var(--gds-comp-radio-border)}:host label.form-control input[type=radio]~i:after{content:\"\";width:100%;height:100%;border-radius:var(--gds-comp-radio-border-radius);background-color:var(--gds-comp-radio-dot);transform:scale(.5)}:host label.form-control:hover input[type=radio]:not(.disabled,:disabled)~i{box-shadow:inset 0 0 0 .05rem var(--gds-comp-radio-border-hover)}:host label.form-control:hover input[type=radio]:not(.disabled,:disabled)~i:after{background-color:var(--gds-comp-radio-dot-hover)}:host label.form-control input[type=radio]:checked:not(.disabled,:disabled)~i{box-shadow:inset 0 0 0 .05rem var(--gds-comp-radio-border-checked)}:host label.form-control input[type=radio]:checked:not(.disabled,:disabled)~i:after{background-color:var(--gds-comp-radio-dot-checked)}:host label.form-control:hover input[type=radio]:checked:not(.disabled,:disabled)~i{box-shadow:inset 0 0 0 .05rem var(--gds-comp-radio-border-checked-hover)}:host label.form-control:hover input[type=radio]:checked:not(.disabled,:disabled)~i:after{background-color:var(--gds-comp-radio-dot-checked-hover)}:host .was-validated label.form-control input[type=radio]:not(.is-invalid):valid~i,:host label.form-control input[type=radio].is-valid~i{--border-color: var(--intent-success-background);--sg-border-color: var(--intent-success-background)}:host .was-validated label.form-control input[type=radio]:not(.is-valid):invalid~i,:host label.form-control input[type=radio].is-invalid~i{--border-color: var(--intent-danger-background);--sg-border-color: var(--intent-danger-background)}:host label.form-control input[type=radio]:disabled~i,:host label.form-control input[type=radio].disabled~i{background-color:var(--gds-comp-radio-container-background-disabled);box-shadow:inset 0 0 0 .05rem var(--gds-comp-radio-border-disabled)}:host label.form-control input[type=radio]:disabled~span,:host label.form-control input[type=radio].disabled~span{color:var(--text-disabled-color)!important;cursor:not-allowed}:host label.form-control input[type=radio]:disabled~span::placeholder,:host label.form-control input[type=radio].disabled~span::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=radio]:disabled:checked~i:after,:host label.form-control input[type=radio]:checked.disabled~i:after{background-color:var(--gds-comp-radio-dot-disabled)}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}:host .form-info{font-weight:500;padding-left:1rem;margin-top:-.25rem}:host .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .form-info--error .error-icon{margin-top:.128rem;align-items:center}\n"] }]
+        }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [TRANSLOCO_SCOPE]
+                }] }, { type: NggvRadioControlRegistry }, { type: i0.ChangeDetectorRef }], propDecorators: { thook: [{
+                type: HostBinding,
+                args: ['attr.data-thook']
+            }, {
+                type: Input
+            }], formControlName: [{
+                type: Input
+            }] } });
+
+class NggvRadioModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: NggvRadioModule, declarations: [NggvRadioComponent], imports: [CommonModule, NggvI18nModule, NggCoreWrapperModule], exports: [NggvRadioComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvRadioModule, imports: [CommonModule, NggvI18nModule, NggCoreWrapperModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvRadioModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NggvRadioComponent],
+                    imports: [CommonModule, NggvI18nModule, NggCoreWrapperModule],
+                    exports: [NggvRadioComponent],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NggvRadioComponent, NggvRadioControlRegistry, NggvRadioModule };
+//# sourceMappingURL=sebgroup-green-angular-src-v-angular-radio.mjs.map