@testgorilla/tgo-ui 12.3.0 → 12.3.2

package/fesm2022/testgorilla-tgo-ui-components-radio-button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"testgorilla-tgo-ui-components-radio-button.mjs","names":[],"sources":["../../../components/radio-button/radio-button.component.ts","../../../components/radio-button/radio-button.component.html","../../../components/radio-button/radio-button.component.module.ts"],"sourcesContent":["/* eslint-disable no-underscore-dangle */\nimport { FocusMonitor } from '@angular/cdk/a11y';\nimport { NgClass } from '@angular/common';\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  DestroyRef,\n  EventEmitter,\n  HostBinding,\n  HostListener,\n  inject,\n  Input,\n  NgZone,\n  OnChanges,\n  OnDestroy,\n  OnInit,\n  Output,\n  ProviderToken,\n  SimpleChanges,\n  ViewChild,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor, NgControl } from '@angular/forms';\nimport { MatRadioButton } from '@angular/material/radio';\nimport { MatTooltip } from '@angular/material/tooltip';\n\nimport { ApplicationTheme, Alignment, EllipseTextDirective } from '@testgorilla/tgo-ui/components/core';\n\nimport { RadioButtonEventType } from './radio-button.model';\n\n@Component({\n  selector: 'ui-radio-button',\n  templateUrl: './radio-button.component.html',\n  styleUrls: ['./radio-button.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    // Needs to be removed since it causes some a11y issues (https://github.com/angular/components/issues/21266).\n    '[attr.tabindex]': 'null',\n    '[attr.aria-label]': 'null',\n    '[attr.aria-labelledby]': 'null',\n    '[attr.aria-describedby]': 'null',\n    // Note: under normal conditions focus shouldn't land on this element, however it may be\n    // programmatically set, for example inside of a focus trap, in this case we want to forward\n    // the focus to the mat-radio-button element.\n    '(focus)': 'radioElement.focus()',\n  },\n  imports: [NgClass, MatRadioButton, EllipseTextDirective, MatTooltip],\n})\nexport class RadioButtonComponent implements OnInit, OnChanges, ControlValueAccessor, AfterViewInit, OnDestroy {\n  private _isProcessingClick = false;\n\n  @HostListener('click', ['$event'])\n  onHostClick(event: MouseEvent): void {\n    if (this._isProcessingClick) {\n      return;\n    }\n    const target = event.target as HTMLElement | null;\n    const targetClasses: string = target?.classList?.value ?? '';\n    const fromMediaArea = this.mediaCard && target?.closest?.('.media-card-wrapper');\n    if (targetClasses.includes('mat-mdc-radio-button') || targetClasses.includes('mdc-form-field') || fromMediaArea) {\n      this._isProcessingClick = true;\n      this.radioElement._inputElement.nativeElement.click();\n      this._isProcessingClick = false;\n    }\n  }\n  /**\n   * Determines whether the radio button is disabled.\n   * Default: false.\n   *\n   * @type {boolean}\n   * @memberof RadioButtonComponent\n   */\n  @Input() disabled = false;\n\n  /**\n   * Determines whether the radio button is checked.\n   * Default: false.\n   *\n   * @type {boolean}\n   * @memberof RadioButtonComponent\n   */\n  //@Input() selected = false;\n\n  _selected = false;\n  @Input()\n  get selected() {\n    return this._selected;\n  }\n  set selected(selected: boolean) {\n    this._selected = selected;\n  }\n\n  /**\n   * Determines whether the radio button can be unchecked.\n   * Default: false.\n   *\n   * @type {boolean}\n   * @memberof RadioButtonComponent\n   */\n  @Input() allowUnselect = false;\n\n  /**\n   * Determines the radio button color.\n   * Default: Test Gorilla primary color.\n   *\n   * @type {string}\n   * @memberof RadioButtonComponent\n   */\n  @HostBinding('style.--color')\n  @Input()\n  companyColor: string | null = null;\n\n  /**\n   * Used to group radios for unique selection.\n   *\n   * @type {string}\n   * @memberof RadioButtonComponent\n   */\n  @Input() name = '';\n\n  /**\n   * Text content will be applied to the input element if present.\n   *\n   * @type {string}\n   * @memberof RadioButtonComponent\n   */\n  @Input() label = '';\n\n  /**\n   * Determines whether the radio button is a multiple choice cell.\n   * Default: false\n   *\n   * @type {boolean}\n   * @memberof RadioButtonComponent\n   */\n  @Input() multiple = false;\n\n  /**\n   * Renders the radio button as a media card. The image/video/gif passed via\n   * the `[radio-media]` content slot fills the card and the radio + label sit\n   * on top, in the bottom-left, with a dark scrim for contrast.\n   *\n   * @type {boolean}\n   * @memberof RadioButtonComponent\n   */\n  @Input() mediaCard = false;\n\n  /**\n   * Determines value of the radio button.\n   * Default: false\n   *\n   * @type {any}\n   * @memberof RadioButtonComponent\n   */\n  @Input() value: unknown;\n\n  /**\n   *\n   * Defines the application theme\n   *\n   * @type {ApplicationTheme}\n   * @memberof RadioButtonComponent\n   */\n  @Input() applicationTheme: ApplicationTheme = 'light';\n\n  /**\n   * A string representing the ARIA label for accessibility.\n   * This label is used to provide an accessible name for the input element.\n   * @type {string}\n   * @memberof RadioButtonComponent\n   */\n  @Input() ariaLabel: string;\n\n  @Input() testId: string | null = null;\n\n  /**\n   * A string representing the ARIA requirement for accessibility.\n   * This attribute is used to indicate whether an input field is required for form submission.\n   * @type {boolean}\n   * @memberof RadioButtonComponent\n   */\n  @Input() ariaRequired = false;\n\n  /**\n   * Defines if checkbox has error\n   *\n   * @type {boolean}\n   * @memberof RadioButtonComponent\n   */\n  @Input() hasError = false;\n\n  /**\n   * A string representing the ARIA requirement for accessibility.\n   * This attribute is used to indicate whether an input field is required for form submission.\n   * @type {string}\n   * @memberof RadioButtonComponent\n   */\n  @Input() ariaLabelledby = '';\n\n  /**\n   * A string representing the ARIA requirement for accessibility.\n   * This attribute is used to indicate whether an input field is required for form submission.\n   * @type {string}\n   * @memberof RadioButtonComponent\n   */\n  @Input() ariaDescribedby = '';\n\n  /**\n   *  Truncate text if it is too long\n   * @type {boolean}\n   * @memberof RadioButtonComponent\n   */\n  @Input() truncateText = false;\n\n  /**\n   * Text alignment\n   * @type {'center' | 'top'}\n   * @memberof RadioButtonComponent\n   */\n  @Input() alignment: Alignment = 'center';\n\n  /**\n   * Sets the tab index for the checkbox component.\n   * This determines the order in which elements receive focus when the user navigates through them using the Tab key.\n   * Default value is 0.\n   *\n   * @type {number}\n   * @memberof RadioButtonComponent\n   */\n  @Input() tabIndex = 0;\n\n  /**\n   * Show tooltip when label is truncated\n   * @type {boolean}\n   * @memberof RadioButtonComponent\n   */\n  @Input() hideTooltipOnEllipsis = false;\n\n  /**\n   * Event emitted when the checked state of the radio button changes.\n   *\n   * @type {boolean}\n   * @memberof RadioButtonComponent\n   */\n  @Output() changeRadio = new EventEmitter<RadioButtonEventType>();\n\n  classMultiple: string;\n  showTooltip = false;\n  protected origin: string | null = null;\n\n  @ViewChild('radio') radioElement: MatRadioButton;\n\n  private appliedTestId: string | null = null;\n  @ViewChild('tooltip') tooltipElement: MatTooltip;\n\n  private readonly defaultAppTheme = inject(\n    'CANOPYUI_DEFAULT_APPLICATION_THEME' as unknown as ProviderToken<ApplicationTheme>,\n    {\n      optional: true,\n    }\n  );\n  public ngControl = inject(NgControl, { optional: true, self: true });\n  public hostNgControl = inject(NgControl, { optional: true, host: true });\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly focusMonitor = inject(FocusMonitor);\n  private readonly ngZone = inject(NgZone);\n  private readonly cdr = inject(ChangeDetectorRef);\n\n  constructor() {\n    if (this.defaultAppTheme) {\n      this.applicationTheme = this.defaultAppTheme;\n    }\n\n    if (this.ngControl !== null) {\n      this.ngControl.valueAccessor = this;\n    }\n  }\n\n  ngOnInit() {\n    this.checkHost();\n    this.classMultiple = this.setClass();\n  }\n\n  ngOnChanges(changes: SimpleChanges) {\n    if (changes['selected']) {\n      this.classMultiple = this.setClass();\n    }\n    this.setCompanyColor();\n    this.applyTestId();\n  }\n\n  // MatRadioButton takes no attribute passthrough, so the id is set on the native input directly.\n  private applyTestId(): void {\n    if (!this.radioElement || this.testId === this.appliedTestId) {\n      return;\n    }\n    const radioNativeInput = this.radioElement._inputElement.nativeElement;\n    if (this.testId) {\n      radioNativeInput.setAttribute('data-testid', this.testId);\n    } else {\n      radioNativeInput.removeAttribute('data-testid');\n    }\n    this.appliedTestId = this.testId;\n  }\n\n  ngAfterViewInit() {\n    this.radioElement._inputElement.nativeElement.setAttribute('role', 'radio');\n    this.applyTestId();\n    this.radioElement._inputElement.nativeElement.onclick = () => {\n      this.clickRadio();\n    };\n\n    this.focusMonitor\n      .monitor(this.radioElement._inputElement.nativeElement)\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(origin =>\n        this.ngZone.run(() => {\n          this.origin = origin;\n          this.cdr.markForCheck();\n          this.onFocus(origin === 'keyboard');\n        })\n      );\n  }\n\n  ngOnDestroy(): void {\n    this.focusMonitor.stopMonitoring(this.radioElement._inputElement.nativeElement);\n  }\n\n  //Click method\n  clickRadio() {\n    if (this.allowUnselect) {\n      this.radioElement.checked = !this.radioElement.checked;\n      this._selected = this.radioElement.checked;\n      this.classMultiple = this.setClass();\n      this.selected = this.radioElement.checked;\n      this.changeRadio?.emit({\n        optionName: this.radioElement.value as string,\n        optionChecked: this.radioElement.checked,\n      });\n    } else {\n      if (!this.hostNgControl) {\n        this.selected = true;\n      }\n      this.changeRadio.emit({ optionName: this.radioElement.value as string, optionChecked: true });\n    }\n    if (this.disabled) {\n      this._selected = false;\n      this.changeRadio.emit({ optionName: '', optionChecked: false });\n    }\n    this.onChange(this._selected);\n  }\n\n  writeValue(value: unknown): void {\n    if (typeof value === 'boolean' || value === this.value) {\n      this.selected = value as boolean;\n    }\n    // The forms API calls this from outside the component's own change\n    // detection — under OnPush the view must be marked explicitly.\n    this.cdr.markForCheck();\n  }\n\n  registerOnChange(fn: (value: boolean) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouch = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n    this.cdr.markForCheck();\n  }\n\n  onChange: (value: boolean) => void = () => {};\n\n  /**\n   * @ignore\n   */\n  onTouch = () => {};\n\n  //Set class for multiple radio\n  setClass(): string {\n    if (this.multiple) {\n      return this._selected ? 'multiple-checked' : 'multiple-unchecked';\n    }\n    return '';\n  }\n\n  onLabelEllipsisChange(isEllipsis: boolean): void {\n    this.showTooltip = isEllipsis && !this.hideTooltipOnEllipsis;\n  }\n\n  private checkHost(): void {\n    if (this.hostNgControl) {\n      this.selected = this.value === this.hostNgControl.value;\n      this.hostNgControl.valueChanges?.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {\n        this.selected = value === this.value;\n        this.classMultiple = this.setClass();\n      });\n    }\n  }\n\n  private setCompanyColor(): void {\n    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- empty companyColor falls back to the theme colour\n    this.companyColor = this.companyColor\n      ? this.companyColor\n      : this.applicationTheme === 'classic'\n        ? '#46A997'\n        : '#D410AA';\n  }\n\n  onFocus(isFocus: boolean): void {\n    setTimeout(() => {\n      if (this.tooltipElement) {\n        if (this.showTooltip && isFocus) {\n          this.tooltipElement.show();\n        } else {\n          this.tooltipElement.hide();\n        }\n      }\n    }, 0);\n  }\n\n  focus(): void {\n    this.radioElement.focus();\n  }\n}\n","<div\n  #radioContainer\n  tabindex=\"0\"\n  [class]=\"multiple ? 'radio-container' : 'radio'\"\n  [class.multiple-disabled]=\"disabled && multiple\"\n  [class.media-card]=\"mediaCard\"\n  [class.media-card-selected]=\"mediaCard && selected\"\n  [ngClass]=\"classMultiple\"\n  [attr.alignment]=\"alignment\"\n  [attr.truncate-text]=\"truncateText\"\n  [attr.theme]=\"applicationTheme\"\n  [attr.hasError]=\"hasError\"\n  (keydown.enter)=\"clickRadio(); radioContainer.focus()\"\n  (keydown.space)=\"clickRadio(); radioContainer.focus()\"\n>\n  @if (mediaCard) {\n    <div class=\"media-card-wrapper\" aria-hidden=\"true\">\n      <ng-content select=\"[radio-media]\"></ng-content>\n    </div>\n  }\n  <mat-radio-button\n    #radio\n    [checked]=\"selected\"\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [value]=\"value\"\n    class=\"radio-button\"\n    [required]=\"ariaRequired\"\n    [aria-label]=\"ariaLabel\"\n    [aria-labelledby]=\"ariaLabelledby ? ariaLabelledby : label\"\n    [aria-describedby]=\"ariaDescribedby\"\n    (keydown.enter)=\"$event.preventDefault()\"\n    (keydown.space)=\"$event.preventDefault()\"\n    [tabIndex]=\"tabIndex\"\n  >\n    @if (label) {\n      <span\n        #tooltip=\"matTooltip\"\n        class=\"label\"\n        uiEllipseText\n        (onChangeTextState)=\"onLabelEllipsisChange($event)\"\n        [matTooltip]=\"showTooltip ? label : ''\"\n        [matTooltipClass]=\"applicationTheme\"\n        >{{ label }}</span\n      >\n    }\n    <ng-content select=\"[radio-label]\"></ng-content>\n  </mat-radio-button>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatRadioModule } from '@angular/material/radio';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\nimport { FocusVisibleDirective } from '@testgorilla/tgo-ui/components/checkbox';\nimport { EllipseTextDirective } from '@testgorilla/tgo-ui/components/core';\n\nimport { RadioButtonComponent } from './radio-button.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    MatRadioModule,\n    FormsModule,\n    ReactiveFormsModule,\n    MatInputModule,\n    EllipseTextDirective,\n    MatTooltipModule,\n    MatCheckboxModule,\n    FocusVisibleDirective,\n    RadioButtonComponent,\n  ],\n  exports: [RadioButtonComponent],\n})\nexport class RadioButtonComponentModule {}\n"],"mappings":"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"}
+{"version":3,"file":"testgorilla-tgo-ui-components-radio-button.mjs","names":[],"sources":["../../../components/radio-button/radio-button.component.ts","../../../components/radio-button/radio-button.component.html","../../../components/radio-button/radio-button.component.module.ts"],"sourcesContent":["/* eslint-disable no-underscore-dangle */\nimport { FocusMonitor } from '@angular/cdk/a11y';\nimport { NgClass } from '@angular/common';\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  DestroyRef,\n  EventEmitter,\n  HostBinding,\n  HostListener,\n  inject,\n  Input,\n  NgZone,\n  OnChanges,\n  OnDestroy,\n  OnInit,\n  Output,\n  ProviderToken,\n  SimpleChanges,\n  ViewChild,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor, NgControl } from '@angular/forms';\nimport { MatRadioButton } from '@angular/material/radio';\nimport { MatTooltip } from '@angular/material/tooltip';\n\nimport { ApplicationTheme, Alignment, EllipseTextDirective } from '@testgorilla/tgo-ui/components/core';\n\nimport { RadioButtonEventType } from './radio-button.model';\n\n@Component({\n  selector: 'ui-radio-button',\n  templateUrl: './radio-button.component.html',\n  styleUrls: ['./radio-button.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    // Needs to be removed since it causes some a11y issues (https://github.com/angular/components/issues/21266).\n    '[attr.tabindex]': 'null',\n    '[attr.aria-label]': 'null',\n    '[attr.aria-labelledby]': 'null',\n    '[attr.aria-describedby]': 'null',\n    // Note: under normal conditions focus shouldn't land on this element, however it may be\n    // programmatically set, for example inside of a focus trap, in this case we want to forward\n    // the focus to the mat-radio-button element.\n    '(focus)': 'radioElement.focus()',\n  },\n  imports: [NgClass, MatRadioButton, EllipseTextDirective, MatTooltip],\n})\nexport class RadioButtonComponent implements OnInit, OnChanges, ControlValueAccessor, AfterViewInit, OnDestroy {\n  private _isProcessingClick = false;\n\n  @HostListener('click', ['$event'])\n  onHostClick(event: MouseEvent): void {\n    if (this._isProcessingClick) {\n      return;\n    }\n    const target = event.target as HTMLElement | null;\n    const targetClasses: string = target?.classList?.value ?? '';\n    const fromMediaArea = this.mediaCard && target?.closest?.('.media-card-wrapper');\n    if (targetClasses.includes('mat-mdc-radio-button') || targetClasses.includes('mdc-form-field') || fromMediaArea) {\n      this._isProcessingClick = true;\n      this.radioElement._inputElement.nativeElement.click();\n      this._isProcessingClick = false;\n    }\n  }\n  /**\n   * Determines whether the radio button is disabled.\n   * Default: false.\n   *\n   * @type {boolean}\n   * @memberof RadioButtonComponent\n   */\n  @Input() disabled = false;\n\n  /**\n   * Determines whether the radio button is checked.\n   * Default: false.\n   *\n   * @type {boolean}\n   * @memberof RadioButtonComponent\n   */\n  //@Input() selected = false;\n\n  _selected = false;\n  @Input()\n  get selected() {\n    return this._selected;\n  }\n  set selected(selected: boolean) {\n    this._selected = selected;\n  }\n\n  /**\n   * Determines whether the radio button can be unchecked.\n   * Default: false.\n   *\n   * @type {boolean}\n   * @memberof RadioButtonComponent\n   */\n  @Input() allowUnselect = false;\n\n  /**\n   * Determines the radio button color.\n   * Default: Test Gorilla primary color.\n   *\n   * @type {string}\n   * @memberof RadioButtonComponent\n   */\n  @HostBinding('style.--color')\n  @Input()\n  companyColor: string | null = null;\n\n  /**\n   * Used to group radios for unique selection.\n   *\n   * @type {string}\n   * @memberof RadioButtonComponent\n   */\n  @Input() name = '';\n\n  /**\n   * Text content will be applied to the input element if present.\n   *\n   * @type {string}\n   * @memberof RadioButtonComponent\n   */\n  @Input() label = '';\n\n  /**\n   * Determines whether the radio button is a multiple choice cell.\n   * Default: false\n   *\n   * @type {boolean}\n   * @memberof RadioButtonComponent\n   */\n  @Input() multiple = false;\n\n  /**\n   * Renders the radio button as a media card. The image/video/gif passed via\n   * the `[radio-media]` content slot fills the card and the radio + label sit\n   * on top, in the bottom-left, with a dark scrim for contrast.\n   *\n   * @type {boolean}\n   * @memberof RadioButtonComponent\n   */\n  @Input() mediaCard = false;\n\n  /**\n   * Determines value of the radio button.\n   * Default: false\n   *\n   * @type {any}\n   * @memberof RadioButtonComponent\n   */\n  @Input() value: unknown;\n\n  /**\n   *\n   * Defines the application theme\n   *\n   * @type {ApplicationTheme}\n   * @memberof RadioButtonComponent\n   */\n  @Input() applicationTheme: ApplicationTheme = 'light';\n\n  /**\n   * A string representing the ARIA label for accessibility.\n   * This label is used to provide an accessible name for the input element.\n   * @type {string}\n   * @memberof RadioButtonComponent\n   */\n  @Input() ariaLabel: string;\n\n  @Input() testId: string | null = null;\n\n  /**\n   * A string representing the ARIA requirement for accessibility.\n   * This attribute is used to indicate whether an input field is required for form submission.\n   * @type {boolean}\n   * @memberof RadioButtonComponent\n   */\n  @Input() ariaRequired = false;\n\n  /**\n   * Defines if checkbox has error\n   *\n   * @type {boolean}\n   * @memberof RadioButtonComponent\n   */\n  @Input() hasError = false;\n\n  /**\n   * A string representing the ARIA requirement for accessibility.\n   * This attribute is used to indicate whether an input field is required for form submission.\n   * @type {string}\n   * @memberof RadioButtonComponent\n   */\n  @Input() ariaLabelledby = '';\n\n  /**\n   * A string representing the ARIA requirement for accessibility.\n   * This attribute is used to indicate whether an input field is required for form submission.\n   * @type {string}\n   * @memberof RadioButtonComponent\n   */\n  @Input() ariaDescribedby = '';\n\n  /**\n   *  Truncate text if it is too long\n   * @type {boolean}\n   * @memberof RadioButtonComponent\n   */\n  @Input() truncateText = false;\n\n  /**\n   * Text alignment\n   * @type {'center' | 'top'}\n   * @memberof RadioButtonComponent\n   */\n  @Input() alignment: Alignment = 'center';\n\n  /**\n   * Sets the tab index for the checkbox component.\n   * This determines the order in which elements receive focus when the user navigates through them using the Tab key.\n   * Default value is 0.\n   *\n   * @type {number}\n   * @memberof RadioButtonComponent\n   */\n  @Input() tabIndex = 0;\n\n  /**\n   * Show tooltip when label is truncated\n   * @type {boolean}\n   * @memberof RadioButtonComponent\n   */\n  @Input() hideTooltipOnEllipsis = false;\n\n  /**\n   * Event emitted when the checked state of the radio button changes.\n   *\n   * @type {boolean}\n   * @memberof RadioButtonComponent\n   */\n  @Output() changeRadio = new EventEmitter<RadioButtonEventType>();\n\n  classMultiple: string;\n  showTooltip = false;\n  protected origin: string | null = null;\n\n  @ViewChild('radio') radioElement: MatRadioButton;\n\n  private appliedTestId: string | null = null;\n  @ViewChild('tooltip') tooltipElement: MatTooltip;\n\n  private readonly defaultAppTheme = inject(\n    'CANOPYUI_DEFAULT_APPLICATION_THEME' as unknown as ProviderToken<ApplicationTheme>,\n    {\n      optional: true,\n    }\n  );\n  public ngControl = inject(NgControl, { optional: true, self: true });\n  public hostNgControl = inject(NgControl, { optional: true, host: true });\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly focusMonitor = inject(FocusMonitor);\n  private readonly ngZone = inject(NgZone);\n  private readonly cdr = inject(ChangeDetectorRef);\n\n  constructor() {\n    if (this.defaultAppTheme) {\n      this.applicationTheme = this.defaultAppTheme;\n    }\n\n    if (this.ngControl !== null) {\n      this.ngControl.valueAccessor = this;\n    }\n  }\n\n  ngOnInit() {\n    this.checkHost();\n    this.classMultiple = this.setClass();\n  }\n\n  ngOnChanges(changes: SimpleChanges) {\n    if (changes['selected']) {\n      this.classMultiple = this.setClass();\n    }\n    this.setCompanyColor();\n    this.applyTestId();\n  }\n\n  // MatRadioButton takes no attribute passthrough, so the id is set on the native input directly.\n  private applyTestId(): void {\n    if (!this.radioElement || this.testId === this.appliedTestId) {\n      return;\n    }\n    const radioNativeInput = this.radioElement._inputElement.nativeElement;\n    if (this.testId) {\n      radioNativeInput.setAttribute('data-testid', this.testId);\n    } else {\n      radioNativeInput.removeAttribute('data-testid');\n    }\n    this.appliedTestId = this.testId;\n  }\n\n  ngAfterViewInit() {\n    this.radioElement._inputElement.nativeElement.setAttribute('role', 'radio');\n    this.applyTestId();\n    this.radioElement._inputElement.nativeElement.onclick = () => {\n      this.clickRadio();\n    };\n\n    this.focusMonitor\n      .monitor(this.radioElement._inputElement.nativeElement)\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(origin =>\n        this.ngZone.run(() => {\n          this.origin = origin;\n          this.cdr.markForCheck();\n          this.onFocus(origin === 'keyboard');\n        })\n      );\n  }\n\n  ngOnDestroy(): void {\n    this.focusMonitor.stopMonitoring(this.radioElement._inputElement.nativeElement);\n  }\n\n  //Click method\n  clickRadio() {\n    if (this.allowUnselect) {\n      this.radioElement.checked = !this.radioElement.checked;\n      this._selected = this.radioElement.checked;\n      this.classMultiple = this.setClass();\n      this.selected = this.radioElement.checked;\n      this.changeRadio?.emit({\n        optionName: this.radioElement.value as string,\n        optionChecked: this.radioElement.checked,\n      });\n    } else {\n      if (!this.hostNgControl) {\n        this.selected = true;\n      }\n      this.changeRadio.emit({ optionName: this.radioElement.value as string, optionChecked: true });\n    }\n    if (this.disabled) {\n      this._selected = false;\n      this.changeRadio.emit({ optionName: '', optionChecked: false });\n    }\n    this.onChange(this._selected);\n  }\n\n  writeValue(value: unknown): void {\n    if (typeof value === 'boolean' || value === this.value) {\n      this.selected = value as boolean;\n    }\n    // The forms API calls this from outside the component's own change\n    // detection — under OnPush the view must be marked explicitly.\n    this.cdr.markForCheck();\n  }\n\n  registerOnChange(fn: (value: boolean) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouch = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n    this.cdr.markForCheck();\n  }\n\n  onChange: (value: boolean) => void = () => {};\n\n  /**\n   * @ignore\n   */\n  onTouch = () => {};\n\n  //Set class for multiple radio\n  setClass(): string {\n    if (this.multiple) {\n      return this._selected ? 'multiple-checked' : 'multiple-unchecked';\n    }\n    return '';\n  }\n\n  onLabelEllipsisChange(isEllipsis: boolean): void {\n    this.showTooltip = isEllipsis && !this.hideTooltipOnEllipsis;\n  }\n\n  // A radio without a `value` matches nothing: an unset model (`undefined` from a template `a?.b`\n  // binding since Angular 22, `null` before) must not select it.\n  private matchesControlValue(controlValue: unknown): boolean {\n    return this.value !== undefined && controlValue === this.value;\n  }\n\n  private checkHost(): void {\n    if (this.hostNgControl) {\n      this.selected = this.matchesControlValue(this.hostNgControl.value);\n      this.hostNgControl.valueChanges?.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {\n        this.selected = this.matchesControlValue(value);\n        this.classMultiple = this.setClass();\n      });\n    }\n  }\n\n  private setCompanyColor(): void {\n    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- empty companyColor falls back to the theme colour\n    this.companyColor = this.companyColor\n      ? this.companyColor\n      : this.applicationTheme === 'classic'\n        ? '#46A997'\n        : '#D410AA';\n  }\n\n  onFocus(isFocus: boolean): void {\n    setTimeout(() => {\n      if (this.tooltipElement) {\n        if (this.showTooltip && isFocus) {\n          this.tooltipElement.show();\n        } else {\n          this.tooltipElement.hide();\n        }\n      }\n    }, 0);\n  }\n\n  focus(): void {\n    this.radioElement.focus();\n  }\n}\n","<div\n  #radioContainer\n  tabindex=\"0\"\n  [class]=\"multiple ? 'radio-container' : 'radio'\"\n  [class.multiple-disabled]=\"disabled && multiple\"\n  [class.media-card]=\"mediaCard\"\n  [class.media-card-selected]=\"mediaCard && selected\"\n  [ngClass]=\"classMultiple\"\n  [attr.alignment]=\"alignment\"\n  [attr.truncate-text]=\"truncateText\"\n  [attr.theme]=\"applicationTheme\"\n  [attr.hasError]=\"hasError\"\n  (keydown.enter)=\"clickRadio(); radioContainer.focus()\"\n  (keydown.space)=\"clickRadio(); radioContainer.focus()\"\n>\n  @if (mediaCard) {\n    <div class=\"media-card-wrapper\" aria-hidden=\"true\">\n      <ng-content select=\"[radio-media]\"></ng-content>\n    </div>\n  }\n  <mat-radio-button\n    #radio\n    [checked]=\"selected\"\n    [disabled]=\"disabled\"\n    [name]=\"name\"\n    [value]=\"value\"\n    class=\"radio-button\"\n    [required]=\"ariaRequired\"\n    [aria-label]=\"ariaLabel\"\n    [aria-labelledby]=\"ariaLabelledby ? ariaLabelledby : label\"\n    [aria-describedby]=\"ariaDescribedby\"\n    (keydown.enter)=\"$event.preventDefault()\"\n    (keydown.space)=\"$event.preventDefault()\"\n    [tabIndex]=\"tabIndex\"\n  >\n    @if (label) {\n      <span\n        #tooltip=\"matTooltip\"\n        class=\"label\"\n        uiEllipseText\n        (onChangeTextState)=\"onLabelEllipsisChange($event)\"\n        [matTooltip]=\"showTooltip ? label : ''\"\n        [matTooltipClass]=\"applicationTheme\"\n        >{{ label }}</span\n      >\n    }\n    <ng-content select=\"[radio-label]\"></ng-content>\n  </mat-radio-button>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatRadioModule } from '@angular/material/radio';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\nimport { FocusVisibleDirective } from '@testgorilla/tgo-ui/components/checkbox';\nimport { EllipseTextDirective } from '@testgorilla/tgo-ui/components/core';\n\nimport { RadioButtonComponent } from './radio-button.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    MatRadioModule,\n    FormsModule,\n    ReactiveFormsModule,\n    MatInputModule,\n    EllipseTextDirective,\n    MatTooltipModule,\n    MatCheckboxModule,\n    FocusVisibleDirective,\n    RadioButtonComponent,\n  ],\n  exports: [RadioButtonComponent],\n})\nexport class RadioButtonComponentModule {}\n"],"mappings":"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"}

package/fesm2022/testgorilla-tgo-ui-components-scale.mjs

@@ -89,7 +89,11 @@ var ScaleComponent = class ScaleComponent {
 			isStandalone: true,
 			selector: "ui-scale",
 			inputs: {
-				selectedIndex: "selectedIndex",
+				selectedIndex: [
+					"selectedIndex",
+					"selectedIndex",
+					(value) => value ?? null
+				],
 				length: "length",
 				applicationTheme: "applicationTheme",
 				companyColor: "companyColor",
@@ -148,7 +152,10 @@ i0.ɵɵngDeclareClassMetadata({
 			type: ViewChildren,
 			args: ["scaleItem"]
 		}],
-		selectedIndex: [{ type: Input }],
+		selectedIndex: [{
+			type: Input,
+			args: [{ transform: (value) => value ?? null }]
+		}],
 		length: [{ type: Input }],
 		applicationTheme: [{ type: Input }],
 		companyColor: [{ type: Input }],

package/fesm2022/testgorilla-tgo-ui-components-scale.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"testgorilla-tgo-ui-components-scale.mjs","names":[],"sources":["../../../components/scale/scale.component.ts","../../../components/scale/scale.component.html","../../../components/scale/scale.component.module.ts"],"sourcesContent":["import { NgStyle, NgClass } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  EventEmitter,\n  Inject,\n  Input,\n  OnChanges,\n  OnInit,\n  Optional,\n  Output,\n  QueryList,\n  signal,\n  SimpleChanges,\n  ViewChildren,\n} from '@angular/core';\n\nimport { ApplicationTheme, hexToRgbWithAlpha } from '@testgorilla/tgo-ui/components/core';\n\n@Component({\n  selector: 'ui-scale',\n  templateUrl: './scale.component.html',\n  styleUrls: ['./scale.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [NgStyle, NgClass],\n})\nexport class ScaleComponent implements OnInit, OnChanges {\n  private readonly MIN_LENGTH = 1;\n  private readonly DEFAULT_LENGTH = 5;\n  protected items: number[] = [];\n\n  @ViewChildren('scaleItem') scaleItems!: QueryList<ElementRef<HTMLElement>>;\n\n  /**\n   * The value representing the selected item of the scale.\n   * @type {number}\n   * @memberof ScaleComponent\n   */\n  @Input() selectedIndex: number | null = null;\n\n  /**\n   * The max number of items in the scale.\n   * @type {number}\n   * @memberof ScaleComponent\n   */\n  @Input() set length(length: number) {\n    this.items = Array(Math.max(length, this.MIN_LENGTH))\n      .fill(0)\n      .map((_, i) => i);\n  }\n\n  /**\n   *\n   * Defines the application theme\n   *\n   * @type {ApplicationTheme}\n   * @memberof ScaleComponent\n   */\n  @Input() applicationTheme: ApplicationTheme = 'light';\n\n  /**\n   * Color of the option hover.\n   * Defaults to Test Gorilla primary color.\n   *\n   * @type {string}\n   * @memberof ScaleComponent\n   */\n  @Input() companyColor = '';\n\n  @Input() testId: string | null = null;\n\n  @Input() ariaLabel = '';\n\n  itemTestId(item: number): string | null {\n    return this.testId ? `${this.testId}-${item + 1}` : null;\n  }\n\n  @Output() selectedIndexChange = new EventEmitter<number>();\n\n  styles = signal({ '--hover-color': '#FFB3EE', '--selected-color': '#D410AA' });\n\n  constructor(\n    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n  ) {\n    if (defaultAppTheme) {\n      this.applicationTheme = defaultAppTheme;\n    }\n    this.length = this.DEFAULT_LENGTH;\n  }\n\n  ngOnInit() {\n    if (this.companyColor) {\n      this.setCompanyColor();\n    }\n  }\n\n  ngOnChanges(changes: SimpleChanges) {\n    if (changes['companyColor']) {\n      this.setCompanyColor();\n    }\n  }\n\n  protected select(index: number): void {\n    this.selectedIndex = index;\n    this.selectedIndexChange.emit(this.selectedIndex);\n  }\n\n  onKeyDown(event: KeyboardEvent, index: number) {\n    this.selectedIndex ??= 0;\n    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n      // Move to the next item (wrap around)\n      this.select((index + 1) % this.items.length);\n      this.focusItem(this.selectedIndex);\n    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n      // Move to the previous item (wrap around)\n      this.select((index - 1 + this.items.length) % this.items.length);\n      this.focusItem(this.selectedIndex);\n    } else if (event.key === ' ' || event.key === 'Enter') {\n      // Select the current item\n      this.select(index);\n      this.focusItem(this.selectedIndex);\n    }\n  }\n\n  focusItem(index: number) {\n    const element = this.scaleItems?.toArray()[index]?.nativeElement;\n    if (element) {\n      element.focus();\n    }\n  }\n\n  getAriaLabel(index: number): string {\n    if (index === 0) {\n      return '1 - Not at all important';\n    } else if (index === 4) {\n      return '5 - Very important';\n    }\n    return '';\n  }\n\n  private setCompanyColor(): void {\n    const styles = this.styles();\n    styles['--hover-color'] = hexToRgbWithAlpha(this.companyColor);\n    styles['--selected-color'] = this.companyColor;\n    this.styles.set(styles);\n  }\n\n  onFocus(item: number): void {\n    // If no item is selected when the component receives focus, select the first item\n    if (this.selectedIndex === null && item === 0) {\n      this.select(0);\n    }\n  }\n}\n","<div\n  [style.--scale-count]=\"items.length\"\n  class=\"scale\"\n  [ngStyle]=\"styles()\"\n  [ngClass]=\"{ 'scale-classic': applicationTheme === 'classic' }\"\n  [attr.data-testid]=\"testId\"\n  [attr.aria-label]=\"ariaLabel || null\"\n  role=\"radiogroup\"\n>\n  @for (item of items; track item) {\n    <div\n      class=\"scale-item\"\n      (click)=\"select(item)\"\n      #scaleItem\n      role=\"radio\"\n      (keydown)=\"onKeyDown($event, item)\"\n      (focus)=\"onFocus(item)\"\n      [class.scale-item-focus-prev]=\"selectedIndex && selectedIndex > 0 ? item === selectedIndex - 1 : false\"\n      [attr.tabindex]=\"selectedIndex === null ? (item === 0 ? '0' : '-1') : item === selectedIndex ? '0' : '-1'\"\n      [attr.aria-checked]=\"\n        selectedIndex === null ? (item === 0 ? 'true' : 'false') : item === selectedIndex ? 'true' : 'false'\n      \"\n      [attr.aria-label]=\"getAriaLabel(item)\"\n      [ngClass]=\"{ 'scale-item-selected': item === selectedIndex }\"\n      [attr.data-testid]=\"itemTestId(item)\"\n    >\n      {{ item + 1 }}\n    </div>\n  }\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { ScaleComponent } from './scale.component';\n\n@NgModule({\n  imports: [CommonModule, ScaleComponent],\n  exports: [ScaleComponent],\n})\nexport class ScaleComponentModule {}\n"],"mappings":"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"}
+{"version":3,"file":"testgorilla-tgo-ui-components-scale.mjs","names":[],"sources":["../../../components/scale/scale.component.ts","../../../components/scale/scale.component.html","../../../components/scale/scale.component.module.ts"],"sourcesContent":["import { NgStyle, NgClass } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  EventEmitter,\n  Inject,\n  Input,\n  OnChanges,\n  OnInit,\n  Optional,\n  Output,\n  QueryList,\n  signal,\n  SimpleChanges,\n  ViewChildren,\n} from '@angular/core';\n\nimport { ApplicationTheme, hexToRgbWithAlpha } from '@testgorilla/tgo-ui/components/core';\n\n@Component({\n  selector: 'ui-scale',\n  templateUrl: './scale.component.html',\n  styleUrls: ['./scale.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [NgStyle, NgClass],\n})\nexport class ScaleComponent implements OnInit, OnChanges {\n  private readonly MIN_LENGTH = 1;\n  private readonly DEFAULT_LENGTH = 5;\n  protected items: number[] = [];\n\n  @ViewChildren('scaleItem') scaleItems!: QueryList<ElementRef<HTMLElement>>;\n\n  /**\n   * The value representing the selected item of the scale.\n   * @type {number}\n   * @memberof ScaleComponent\n   */\n  // A template `a?.b` binding yields `undefined` since Angular 22 (it was `null`). Both mean \"nothing selected\".\n  @Input({ transform: (value: number | null | undefined): number | null => value ?? null })\n  selectedIndex: number | null = null;\n\n  /**\n   * The max number of items in the scale.\n   * @type {number}\n   * @memberof ScaleComponent\n   */\n  @Input() set length(length: number) {\n    this.items = Array(Math.max(length, this.MIN_LENGTH))\n      .fill(0)\n      .map((_, i) => i);\n  }\n\n  /**\n   *\n   * Defines the application theme\n   *\n   * @type {ApplicationTheme}\n   * @memberof ScaleComponent\n   */\n  @Input() applicationTheme: ApplicationTheme = 'light';\n\n  /**\n   * Color of the option hover.\n   * Defaults to Test Gorilla primary color.\n   *\n   * @type {string}\n   * @memberof ScaleComponent\n   */\n  @Input() companyColor = '';\n\n  @Input() testId: string | null = null;\n\n  @Input() ariaLabel = '';\n\n  itemTestId(item: number): string | null {\n    return this.testId ? `${this.testId}-${item + 1}` : null;\n  }\n\n  @Output() selectedIndexChange = new EventEmitter<number>();\n\n  styles = signal({ '--hover-color': '#FFB3EE', '--selected-color': '#D410AA' });\n\n  constructor(\n    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n  ) {\n    if (defaultAppTheme) {\n      this.applicationTheme = defaultAppTheme;\n    }\n    this.length = this.DEFAULT_LENGTH;\n  }\n\n  ngOnInit() {\n    if (this.companyColor) {\n      this.setCompanyColor();\n    }\n  }\n\n  ngOnChanges(changes: SimpleChanges) {\n    if (changes['companyColor']) {\n      this.setCompanyColor();\n    }\n  }\n\n  protected select(index: number): void {\n    this.selectedIndex = index;\n    this.selectedIndexChange.emit(this.selectedIndex);\n  }\n\n  onKeyDown(event: KeyboardEvent, index: number) {\n    this.selectedIndex ??= 0;\n    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n      // Move to the next item (wrap around)\n      this.select((index + 1) % this.items.length);\n      this.focusItem(this.selectedIndex);\n    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n      // Move to the previous item (wrap around)\n      this.select((index - 1 + this.items.length) % this.items.length);\n      this.focusItem(this.selectedIndex);\n    } else if (event.key === ' ' || event.key === 'Enter') {\n      // Select the current item\n      this.select(index);\n      this.focusItem(this.selectedIndex);\n    }\n  }\n\n  focusItem(index: number) {\n    const element = this.scaleItems?.toArray()[index]?.nativeElement;\n    if (element) {\n      element.focus();\n    }\n  }\n\n  getAriaLabel(index: number): string {\n    if (index === 0) {\n      return '1 - Not at all important';\n    } else if (index === 4) {\n      return '5 - Very important';\n    }\n    return '';\n  }\n\n  private setCompanyColor(): void {\n    const styles = this.styles();\n    styles['--hover-color'] = hexToRgbWithAlpha(this.companyColor);\n    styles['--selected-color'] = this.companyColor;\n    this.styles.set(styles);\n  }\n\n  onFocus(item: number): void {\n    // If no item is selected when the component receives focus, select the first item\n    if (this.selectedIndex === null && item === 0) {\n      this.select(0);\n    }\n  }\n}\n","<div\n  [style.--scale-count]=\"items.length\"\n  class=\"scale\"\n  [ngStyle]=\"styles()\"\n  [ngClass]=\"{ 'scale-classic': applicationTheme === 'classic' }\"\n  [attr.data-testid]=\"testId\"\n  [attr.aria-label]=\"ariaLabel || null\"\n  role=\"radiogroup\"\n>\n  @for (item of items; track item) {\n    <div\n      class=\"scale-item\"\n      (click)=\"select(item)\"\n      #scaleItem\n      role=\"radio\"\n      (keydown)=\"onKeyDown($event, item)\"\n      (focus)=\"onFocus(item)\"\n      [class.scale-item-focus-prev]=\"selectedIndex && selectedIndex > 0 ? item === selectedIndex - 1 : false\"\n      [attr.tabindex]=\"selectedIndex === null ? (item === 0 ? '0' : '-1') : item === selectedIndex ? '0' : '-1'\"\n      [attr.aria-checked]=\"\n        selectedIndex === null ? (item === 0 ? 'true' : 'false') : item === selectedIndex ? 'true' : 'false'\n      \"\n      [attr.aria-label]=\"getAriaLabel(item)\"\n      [ngClass]=\"{ 'scale-item-selected': item === selectedIndex }\"\n      [attr.data-testid]=\"itemTestId(item)\"\n    >\n      {{ item + 1 }}\n    </div>\n  }\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { ScaleComponent } from './scale.component';\n\n@NgModule({\n  imports: [CommonModule, ScaleComponent],\n  exports: [ScaleComponent],\n})\nexport class ScaleComponentModule {}\n"],"mappings":"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"}

package/fesm2022/testgorilla-tgo-ui-components-side-sheet.mjs

@@ -164,8 +164,8 @@ var SideSheetComponent = class SideSheetComponent {
 				read: ViewContainerRef
 			}],
 			ngImport: i0,
-			template: "<ng-container>\n  <mat-drawer-container class=\"side-sheet-container\" [attr.theme]=\"applicationTheme\" [hasBackdrop]=\"true\">\n    <mat-drawer\n      (closedStart)=\"onOpenChange(false)\"\n      (openedStart)=\"onOpenChange(true)\"\n      #drawer\n      [mode]=\"'over'\"\n      [autoFocus]=\"false\"\n      class=\"side-sheet-content\"\n      [position]=\"position\"\n      [attr.data-testid]=\"testId\"\n    >\n      <div class=\"header\">\n        <div class=\"title\">\n          @if (showBackButton) {\n            <ui-button\n              [variant]=\"'icon-button'\"\n              [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-filled'\"\n              [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n              [applicationTheme]=\"applicationTheme\"\n              [tooltip]=\"('COMMON.BACK' | uiTranslate | async)!\"\n              [ariaLabel]=\"('COMMON.BACK' | uiTranslate | async)!\"\n              [testId]=\"backButtonTestId\"\n              (click)=\"onClose()\"\n            ></ui-button>\n          }\n          @if (title) {\n            <span [matTooltip]=\"showTitleTooltip ? title : ''\" [matTooltipClass]=\"applicationTheme\">{{ title }}</span>\n          }\n          @if (showLogo) {\n            <ui-logo></ui-logo>\n          }\n        </div>\n        <ui-button\n          [variant]=\"'icon-button'\"\n          [iconName]=\"'Close'\"\n          [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n          [applicationTheme]=\"applicationTheme\"\n          [tooltip]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n          [ariaLabel]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n          [testId]=\"closeButtonTestId\"\n          (click)=\"onClose()\"\n        ></ui-button>\n      </div>\n      <ng-container #container></ng-container>\n    </mat-drawer>\n    <mat-drawer-content>\n      <ng-content></ng-content>\n    </mat-drawer-content>\n  </mat-drawer-container>\n</ng-container>\n",
-			styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.side-sheet-container{position:absolute;inset:0;background:transparent}.side-sheet-container ::ng-deep .mat-drawer-backdrop{background-color:#000;opacity:25%}.side-sheet-container .side-sheet-content.mat-drawer-opened{width:600px;box-shadow:2px 24px 48px 8px #00000014;padding:0 32px 32px;align-items:flex-start;flex-direction:column;z-index:3;background:#f6f6f6}.side-sheet-container .side-sheet-content.mat-drawer-opened .header{background:#f6f6f6;padding:32px 5px;width:100%;display:flex;top:0;position:sticky;justify-content:center}.side-sheet-container .side-sheet-content.mat-drawer-opened .header ui-button{margin-top:-5px}.side-sheet-container .side-sheet-content.mat-drawer-opened .header .title{display:flex;justify-content:left;margin-right:8px;width:100%;gap:8px}.side-sheet-container .side-sheet-content.mat-drawer-opened .header .title span{line-height:28px;font-size:20px;font-weight:700;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media(max-width:600px){.side-sheet-container .side-sheet-content.mat-drawer-opened{padding:0 16px 16px;width:100%}.side-sheet-container .side-sheet-content.mat-drawer-opened .header{padding:32px 16px}}.side-sheet-container[theme=dark] .side-sheet-content,.side-sheet-container[theme=light] .side-sheet-content{box-shadow:0 4px 100px #24242414}.side-sheet-container[theme=dark] .side-sheet-content .header .title span,.side-sheet-container[theme=light] .side-sheet-content .header .title span{color:#242424}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mat-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"],
+			template: "<ng-container>\n  <mat-drawer-container class=\"side-sheet-container\" [attr.theme]=\"applicationTheme\" [hasBackdrop]=\"true\">\n    <mat-drawer\n      (closedStart)=\"onOpenChange(false)\"\n      (openedStart)=\"onOpenChange(true)\"\n      #drawer\n      [mode]=\"'over'\"\n      [autoFocus]=\"'.header'\"\n      class=\"side-sheet-content\"\n      [position]=\"position\"\n      [attr.data-testid]=\"testId\"\n    >\n      <div class=\"header\">\n        <div class=\"title\">\n          @if (showBackButton) {\n            <ui-button\n              [variant]=\"'icon-button'\"\n              [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-filled'\"\n              [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n              [applicationTheme]=\"applicationTheme\"\n              [tooltip]=\"('COMMON.BACK' | uiTranslate | async)!\"\n              [ariaLabel]=\"('COMMON.BACK' | uiTranslate | async)!\"\n              [testId]=\"backButtonTestId\"\n              (click)=\"onClose()\"\n            ></ui-button>\n          }\n          @if (title) {\n            <span [matTooltip]=\"showTitleTooltip ? title : ''\" [matTooltipClass]=\"applicationTheme\">{{ title }}</span>\n          }\n          @if (showLogo) {\n            <ui-logo></ui-logo>\n          }\n        </div>\n        <ui-button\n          [variant]=\"'icon-button'\"\n          [iconName]=\"'Close'\"\n          [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n          [applicationTheme]=\"applicationTheme\"\n          [tooltip]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n          [ariaLabel]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n          [testId]=\"closeButtonTestId\"\n          (click)=\"onClose()\"\n        ></ui-button>\n      </div>\n      <ng-container #container></ng-container>\n    </mat-drawer>\n    <mat-drawer-content>\n      <ng-content></ng-content>\n    </mat-drawer-content>\n  </mat-drawer-container>\n</ng-container>\n",
+			styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.side-sheet-container{position:absolute;inset:0;background:transparent}.side-sheet-container ::ng-deep .mat-drawer-backdrop{background-color:#000;opacity:25%}.side-sheet-container .side-sheet-content.mat-drawer-opened{width:600px;box-shadow:2px 24px 48px 8px #00000014;padding:0 32px 32px;align-items:flex-start;flex-direction:column;z-index:3;background:#f6f6f6}.side-sheet-container .side-sheet-content.mat-drawer-opened .header{background:#f6f6f6;padding:32px 5px;width:100%;display:flex;top:0;position:sticky;justify-content:center}.side-sheet-container .side-sheet-content.mat-drawer-opened .header:focus{outline:none}.side-sheet-container .side-sheet-content.mat-drawer-opened .header ui-button{margin-top:-5px}.side-sheet-container .side-sheet-content.mat-drawer-opened .header .title{display:flex;justify-content:left;margin-right:8px;width:100%;gap:8px}.side-sheet-container .side-sheet-content.mat-drawer-opened .header .title span{line-height:28px;font-size:20px;font-weight:700;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media(max-width:600px){.side-sheet-container .side-sheet-content.mat-drawer-opened{padding:0 16px 16px;width:100%}.side-sheet-container .side-sheet-content.mat-drawer-opened .header{padding:32px 16px}}.side-sheet-container[theme=dark] .side-sheet-content,.side-sheet-container[theme=light] .side-sheet-content{box-shadow:0 4px 100px #24242414}.side-sheet-container[theme=dark] .side-sheet-content .header .title span,.side-sheet-container[theme=light] .side-sheet-content .header .title span{color:#242424}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mat-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"],
 			dependencies: [
 				{
 					kind: "component",
@@ -311,8 +311,8 @@ i0.ɵɵngDeclareClassMetadata({
 				AsyncPipe,
 				UiTranslatePipe
 			],
-			template: "<ng-container>\n  <mat-drawer-container class=\"side-sheet-container\" [attr.theme]=\"applicationTheme\" [hasBackdrop]=\"true\">\n    <mat-drawer\n      (closedStart)=\"onOpenChange(false)\"\n      (openedStart)=\"onOpenChange(true)\"\n      #drawer\n      [mode]=\"'over'\"\n      [autoFocus]=\"false\"\n      class=\"side-sheet-content\"\n      [position]=\"position\"\n      [attr.data-testid]=\"testId\"\n    >\n      <div class=\"header\">\n        <div class=\"title\">\n          @if (showBackButton) {\n            <ui-button\n              [variant]=\"'icon-button'\"\n              [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-filled'\"\n              [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n              [applicationTheme]=\"applicationTheme\"\n              [tooltip]=\"('COMMON.BACK' | uiTranslate | async)!\"\n              [ariaLabel]=\"('COMMON.BACK' | uiTranslate | async)!\"\n              [testId]=\"backButtonTestId\"\n              (click)=\"onClose()\"\n            ></ui-button>\n          }\n          @if (title) {\n            <span [matTooltip]=\"showTitleTooltip ? title : ''\" [matTooltipClass]=\"applicationTheme\">{{ title }}</span>\n          }\n          @if (showLogo) {\n            <ui-logo></ui-logo>\n          }\n        </div>\n        <ui-button\n          [variant]=\"'icon-button'\"\n          [iconName]=\"'Close'\"\n          [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n          [applicationTheme]=\"applicationTheme\"\n          [tooltip]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n          [ariaLabel]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n          [testId]=\"closeButtonTestId\"\n          (click)=\"onClose()\"\n        ></ui-button>\n      </div>\n      <ng-container #container></ng-container>\n    </mat-drawer>\n    <mat-drawer-content>\n      <ng-content></ng-content>\n    </mat-drawer-content>\n  </mat-drawer-container>\n</ng-container>\n",
-			styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.side-sheet-container{position:absolute;inset:0;background:transparent}.side-sheet-container ::ng-deep .mat-drawer-backdrop{background-color:#000;opacity:25%}.side-sheet-container .side-sheet-content.mat-drawer-opened{width:600px;box-shadow:2px 24px 48px 8px #00000014;padding:0 32px 32px;align-items:flex-start;flex-direction:column;z-index:3;background:#f6f6f6}.side-sheet-container .side-sheet-content.mat-drawer-opened .header{background:#f6f6f6;padding:32px 5px;width:100%;display:flex;top:0;position:sticky;justify-content:center}.side-sheet-container .side-sheet-content.mat-drawer-opened .header ui-button{margin-top:-5px}.side-sheet-container .side-sheet-content.mat-drawer-opened .header .title{display:flex;justify-content:left;margin-right:8px;width:100%;gap:8px}.side-sheet-container .side-sheet-content.mat-drawer-opened .header .title span{line-height:28px;font-size:20px;font-weight:700;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media(max-width:600px){.side-sheet-container .side-sheet-content.mat-drawer-opened{padding:0 16px 16px;width:100%}.side-sheet-container .side-sheet-content.mat-drawer-opened .header{padding:32px 16px}}.side-sheet-container[theme=dark] .side-sheet-content,.side-sheet-container[theme=light] .side-sheet-content{box-shadow:0 4px 100px #24242414}.side-sheet-container[theme=dark] .side-sheet-content .header .title span,.side-sheet-container[theme=light] .side-sheet-content .header .title span{color:#242424}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mat-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"]
+			template: "<ng-container>\n  <mat-drawer-container class=\"side-sheet-container\" [attr.theme]=\"applicationTheme\" [hasBackdrop]=\"true\">\n    <mat-drawer\n      (closedStart)=\"onOpenChange(false)\"\n      (openedStart)=\"onOpenChange(true)\"\n      #drawer\n      [mode]=\"'over'\"\n      [autoFocus]=\"'.header'\"\n      class=\"side-sheet-content\"\n      [position]=\"position\"\n      [attr.data-testid]=\"testId\"\n    >\n      <div class=\"header\">\n        <div class=\"title\">\n          @if (showBackButton) {\n            <ui-button\n              [variant]=\"'icon-button'\"\n              [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-filled'\"\n              [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n              [applicationTheme]=\"applicationTheme\"\n              [tooltip]=\"('COMMON.BACK' | uiTranslate | async)!\"\n              [ariaLabel]=\"('COMMON.BACK' | uiTranslate | async)!\"\n              [testId]=\"backButtonTestId\"\n              (click)=\"onClose()\"\n            ></ui-button>\n          }\n          @if (title) {\n            <span [matTooltip]=\"showTitleTooltip ? title : ''\" [matTooltipClass]=\"applicationTheme\">{{ title }}</span>\n          }\n          @if (showLogo) {\n            <ui-logo></ui-logo>\n          }\n        </div>\n        <ui-button\n          [variant]=\"'icon-button'\"\n          [iconName]=\"'Close'\"\n          [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n          [applicationTheme]=\"applicationTheme\"\n          [tooltip]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n          [ariaLabel]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n          [testId]=\"closeButtonTestId\"\n          (click)=\"onClose()\"\n        ></ui-button>\n      </div>\n      <ng-container #container></ng-container>\n    </mat-drawer>\n    <mat-drawer-content>\n      <ng-content></ng-content>\n    </mat-drawer-content>\n  </mat-drawer-container>\n</ng-container>\n",
+			styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.side-sheet-container{position:absolute;inset:0;background:transparent}.side-sheet-container ::ng-deep .mat-drawer-backdrop{background-color:#000;opacity:25%}.side-sheet-container .side-sheet-content.mat-drawer-opened{width:600px;box-shadow:2px 24px 48px 8px #00000014;padding:0 32px 32px;align-items:flex-start;flex-direction:column;z-index:3;background:#f6f6f6}.side-sheet-container .side-sheet-content.mat-drawer-opened .header{background:#f6f6f6;padding:32px 5px;width:100%;display:flex;top:0;position:sticky;justify-content:center}.side-sheet-container .side-sheet-content.mat-drawer-opened .header:focus{outline:none}.side-sheet-container .side-sheet-content.mat-drawer-opened .header ui-button{margin-top:-5px}.side-sheet-container .side-sheet-content.mat-drawer-opened .header .title{display:flex;justify-content:left;margin-right:8px;width:100%;gap:8px}.side-sheet-container .side-sheet-content.mat-drawer-opened .header .title span{line-height:28px;font-size:20px;font-weight:700;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media(max-width:600px){.side-sheet-container .side-sheet-content.mat-drawer-opened{padding:0 16px 16px;width:100%}.side-sheet-container .side-sheet-content.mat-drawer-opened .header{padding:32px 16px}}.side-sheet-container[theme=dark] .side-sheet-content,.side-sheet-container[theme=light] .side-sheet-content{box-shadow:0 4px 100px #24242414}.side-sheet-container[theme=dark] .side-sheet-content .header .title span,.side-sheet-container[theme=light] .side-sheet-content .header .title span{color:#242424}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mat-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"]
 		}]
 	}],
 	ctorParameters: () => [

package/fesm2022/testgorilla-tgo-ui-components-side-sheet.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"testgorilla-tgo-ui-components-side-sheet.mjs","names":["i1.SideSheetService"],"sources":["../../../components/side-sheet/side-sheet.service.ts","../../../components/side-sheet/side-sheet.component.ts","../../../components/side-sheet/side-sheet.component.html","../../../components/side-sheet/side-sheet.component.module.ts"],"sourcesContent":["import { ApplicationRef, Injectable, Type, ViewContainerRef } from '@angular/core';\nimport { Observable, Subject } from 'rxjs';\n\nimport { SideSheetConfig } from './side-sheet.model';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class SideSheetService {\n  private readonly componentRef$ = new Subject<SideSheetConfig | null>();\n\n  constructor(private readonly applicationRef: ApplicationRef) {}\n\n  open<T>(config: SideSheetConfig): T {\n    const { componentRef: _componentRef, inputs, ...configFields } = config;\n    const rootViewContainerRef = this.applicationRef.components[0].injector.get(ViewContainerRef);\n    const componentReference = rootViewContainerRef.createComponent(config.componentRef as Type<unknown>);\n\n    Object.entries(inputs ?? {}).forEach(([key, value]) => componentReference.setInput(key, value));\n\n    this.componentRef$.next({ ...configFields, componentRef: componentReference });\n    return componentReference.instance as T;\n  }\n\n  close(): void {\n    this.componentRef$.next(null);\n  }\n\n  getComponentRef(): Observable<SideSheetConfig | null> {\n    return this.componentRef$.asObservable();\n  }\n}\n","import { AsyncPipe } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ComponentRef,\n  DestroyRef,\n  EventEmitter,\n  HostListener,\n  Inject,\n  Input,\n  OnInit,\n  Optional,\n  Output,\n  ViewChild,\n  ViewContainerRef,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { MatDrawer, MatDrawerContainer, MatDrawerContent } from '@angular/material/sidenav';\nimport { MatTooltip } from '@angular/material/tooltip';\n\nimport { ButtonComponent } from '@testgorilla/tgo-ui/components/button';\nimport { ApplicationTheme, UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { LogoComponent } from '@testgorilla/tgo-ui/components/logo';\n\nimport { SideSheetConfig, SideSheetPosition } from './side-sheet.model';\nimport { SideSheetService } from './side-sheet.service';\n\n@Component({\n  selector: 'ui-side-sheet',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './side-sheet.component.html',\n  styleUrls: ['./side-sheet.component.scss'],\n  imports: [\n    MatDrawerContainer,\n    MatDrawer,\n    ButtonComponent,\n    MatTooltip,\n    LogoComponent,\n    MatDrawerContent,\n    AsyncPipe,\n    UiTranslatePipe,\n  ],\n})\nexport class SideSheetComponent implements OnInit {\n  /**\n   * Set position. Defaults \"end\"\n   *\n   * @type {SideSheetPosition}\n   * @memberof SideSheetComponent\n   */\n  @Input() position: SideSheetPosition = 'end';\n\n  /**\n   *\n   * Defines the application theme\n   *\n   * @type {ApplicationTheme}\n   * @memberof SideSheetComponent\n   */\n  @Input() applicationTheme: ApplicationTheme = 'light';\n\n  @Input() testId: string | null = null;\n\n  get closeButtonTestId(): string | null {\n    return this.testId ? `${this.testId}-close` : null;\n  }\n\n  get backButtonTestId(): string | null {\n    return this.testId ? `${this.testId}-back` : null;\n  }\n\n  @Output() openChange = new EventEmitter<boolean>();\n\n  @ViewChild('drawer') drawer: MatDrawer;\n  @ViewChild('container', { read: ViewContainerRef, static: false }) container: ViewContainerRef;\n\n  @HostListener('keydown.esc')\n  onEscPress(): void {\n    void this.drawer.close();\n  }\n\n  protected title = '';\n  protected showBackButton = false;\n  protected showTitleTooltip = false;\n  protected showLogo = false;\n  protected componentRef$ = this.sideSheetService.getComponentRef();\n\n  constructor(\n    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,\n    private readonly sideSheetService: SideSheetService,\n    private readonly destroyRef: DestroyRef,\n    private readonly cdr: ChangeDetectorRef\n  ) {\n    if (defaultAppTheme) {\n      this.applicationTheme = defaultAppTheme;\n    }\n  }\n\n  ngOnInit(): void {\n    this.setComponentRef();\n  }\n\n  private setComponentRef(): void {\n    this.componentRef$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(config => {\n      if (config?.componentRef && this.container && this.drawer) {\n        this.setConfig(config);\n        // `open()`/`close()` rather than `toggle()`: `SideSheetService` broadcasts to every\n        // sheet regardless of its state, and a toggle on an already-closed drawer would slide\n        // open an empty panel (e.g. a `close()` issued after the drawer self-closed).\n        void this.drawer.open();\n        this.container.clear();\n        this.container.insert((config.componentRef as ComponentRef<unknown>).hostView);\n      } else if (!config) {\n        void this.drawer.close();\n        this.container.clear();\n      }\n      // Async mutation of template-bound config fields (title/showLogo/...).\n      this.cdr.markForCheck();\n    });\n  }\n\n  private setConfig(config: SideSheetConfig): void {\n    this.title = config.title ?? '';\n    this.showLogo = config.showLogo ?? false;\n    this.showBackButton = config.showBackButton ?? false;\n    this.showTitleTooltip = config.showTitleTooltip ?? false;\n\n    if (config.closed) {\n      config.closed.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {\n        void this.drawer.close();\n      });\n    }\n  }\n\n  protected onClose(): void {\n    void this.drawer.close();\n  }\n\n  onOpenChange(isOpened: boolean): void {\n    this.openChange.emit(isOpened);\n  }\n}\n","<ng-container>\n  <mat-drawer-container class=\"side-sheet-container\" [attr.theme]=\"applicationTheme\" [hasBackdrop]=\"true\">\n    <mat-drawer\n      (closedStart)=\"onOpenChange(false)\"\n      (openedStart)=\"onOpenChange(true)\"\n      #drawer\n      [mode]=\"'over'\"\n      [autoFocus]=\"false\"\n      class=\"side-sheet-content\"\n      [position]=\"position\"\n      [attr.data-testid]=\"testId\"\n    >\n      <div class=\"header\">\n        <div class=\"title\">\n          @if (showBackButton) {\n            <ui-button\n              [variant]=\"'icon-button'\"\n              [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-filled'\"\n              [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n              [applicationTheme]=\"applicationTheme\"\n              [tooltip]=\"('COMMON.BACK' | uiTranslate | async)!\"\n              [ariaLabel]=\"('COMMON.BACK' | uiTranslate | async)!\"\n              [testId]=\"backButtonTestId\"\n              (click)=\"onClose()\"\n            ></ui-button>\n          }\n          @if (title) {\n            <span [matTooltip]=\"showTitleTooltip ? title : ''\" [matTooltipClass]=\"applicationTheme\">{{ title }}</span>\n          }\n          @if (showLogo) {\n            <ui-logo></ui-logo>\n          }\n        </div>\n        <ui-button\n          [variant]=\"'icon-button'\"\n          [iconName]=\"'Close'\"\n          [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n          [applicationTheme]=\"applicationTheme\"\n          [tooltip]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n          [ariaLabel]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n          [testId]=\"closeButtonTestId\"\n          (click)=\"onClose()\"\n        ></ui-button>\n      </div>\n      <ng-container #container></ng-container>\n    </mat-drawer>\n    <mat-drawer-content>\n      <ng-content></ng-content>\n    </mat-drawer-content>\n  </mat-drawer-container>\n</ng-container>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { MatSidenavModule } from '@angular/material/sidenav';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { LogoComponentModule } from '@testgorilla/tgo-ui/components/logo';\n\nimport { SideSheetComponent } from './side-sheet.component';\n\n@NgModule({\n  exports: [SideSheetComponent],\n  imports: [\n    CommonModule,\n    IconComponentModule,\n    ButtonComponentModule,\n    MatTooltipModule,\n    MatSidenavModule,\n    UiTranslatePipe,\n    LogoComponentModule,\n    SideSheetComponent,\n  ],\n})\nexport class SideSheetComponentModule {}\n"],"mappings":"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"}
+{"version":3,"file":"testgorilla-tgo-ui-components-side-sheet.mjs","names":["i1.SideSheetService"],"sources":["../../../components/side-sheet/side-sheet.service.ts","../../../components/side-sheet/side-sheet.component.ts","../../../components/side-sheet/side-sheet.component.html","../../../components/side-sheet/side-sheet.component.module.ts"],"sourcesContent":["import { ApplicationRef, Injectable, Type, ViewContainerRef } from '@angular/core';\nimport { Observable, Subject } from 'rxjs';\n\nimport { SideSheetConfig } from './side-sheet.model';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class SideSheetService {\n  private readonly componentRef$ = new Subject<SideSheetConfig | null>();\n\n  constructor(private readonly applicationRef: ApplicationRef) {}\n\n  open<T>(config: SideSheetConfig): T {\n    const { componentRef: _componentRef, inputs, ...configFields } = config;\n    const rootViewContainerRef = this.applicationRef.components[0].injector.get(ViewContainerRef);\n    const componentReference = rootViewContainerRef.createComponent(config.componentRef as Type<unknown>);\n\n    Object.entries(inputs ?? {}).forEach(([key, value]) => componentReference.setInput(key, value));\n\n    this.componentRef$.next({ ...configFields, componentRef: componentReference });\n    return componentReference.instance as T;\n  }\n\n  close(): void {\n    this.componentRef$.next(null);\n  }\n\n  getComponentRef(): Observable<SideSheetConfig | null> {\n    return this.componentRef$.asObservable();\n  }\n}\n","import { AsyncPipe } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ComponentRef,\n  DestroyRef,\n  EventEmitter,\n  HostListener,\n  Inject,\n  Input,\n  OnInit,\n  Optional,\n  Output,\n  ViewChild,\n  ViewContainerRef,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { MatDrawer, MatDrawerContainer, MatDrawerContent } from '@angular/material/sidenav';\nimport { MatTooltip } from '@angular/material/tooltip';\n\nimport { ButtonComponent } from '@testgorilla/tgo-ui/components/button';\nimport { ApplicationTheme, UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { LogoComponent } from '@testgorilla/tgo-ui/components/logo';\n\nimport { SideSheetConfig, SideSheetPosition } from './side-sheet.model';\nimport { SideSheetService } from './side-sheet.service';\n\n@Component({\n  selector: 'ui-side-sheet',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './side-sheet.component.html',\n  styleUrls: ['./side-sheet.component.scss'],\n  imports: [\n    MatDrawerContainer,\n    MatDrawer,\n    ButtonComponent,\n    MatTooltip,\n    LogoComponent,\n    MatDrawerContent,\n    AsyncPipe,\n    UiTranslatePipe,\n  ],\n})\nexport class SideSheetComponent implements OnInit {\n  /**\n   * Set position. Defaults \"end\"\n   *\n   * @type {SideSheetPosition}\n   * @memberof SideSheetComponent\n   */\n  @Input() position: SideSheetPosition = 'end';\n\n  /**\n   *\n   * Defines the application theme\n   *\n   * @type {ApplicationTheme}\n   * @memberof SideSheetComponent\n   */\n  @Input() applicationTheme: ApplicationTheme = 'light';\n\n  @Input() testId: string | null = null;\n\n  get closeButtonTestId(): string | null {\n    return this.testId ? `${this.testId}-close` : null;\n  }\n\n  get backButtonTestId(): string | null {\n    return this.testId ? `${this.testId}-back` : null;\n  }\n\n  @Output() openChange = new EventEmitter<boolean>();\n\n  @ViewChild('drawer') drawer: MatDrawer;\n  @ViewChild('container', { read: ViewContainerRef, static: false }) container: ViewContainerRef;\n\n  @HostListener('keydown.esc')\n  onEscPress(): void {\n    void this.drawer.close();\n  }\n\n  protected title = '';\n  protected showBackButton = false;\n  protected showTitleTooltip = false;\n  protected showLogo = false;\n  protected componentRef$ = this.sideSheetService.getComponentRef();\n\n  constructor(\n    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,\n    private readonly sideSheetService: SideSheetService,\n    private readonly destroyRef: DestroyRef,\n    private readonly cdr: ChangeDetectorRef\n  ) {\n    if (defaultAppTheme) {\n      this.applicationTheme = defaultAppTheme;\n    }\n  }\n\n  ngOnInit(): void {\n    this.setComponentRef();\n  }\n\n  private setComponentRef(): void {\n    this.componentRef$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(config => {\n      if (config?.componentRef && this.container && this.drawer) {\n        this.setConfig(config);\n        // `open()`/`close()` rather than `toggle()`: `SideSheetService` broadcasts to every\n        // sheet regardless of its state, and a toggle on an already-closed drawer would slide\n        // open an empty panel (e.g. a `close()` issued after the drawer self-closed).\n        void this.drawer.open();\n        this.container.clear();\n        this.container.insert((config.componentRef as ComponentRef<unknown>).hostView);\n      } else if (!config) {\n        void this.drawer.close();\n        this.container.clear();\n      }\n      // Async mutation of template-bound config fields (title/showLogo/...).\n      this.cdr.markForCheck();\n    });\n  }\n\n  private setConfig(config: SideSheetConfig): void {\n    this.title = config.title ?? '';\n    this.showLogo = config.showLogo ?? false;\n    this.showBackButton = config.showBackButton ?? false;\n    this.showTitleTooltip = config.showTitleTooltip ?? false;\n\n    if (config.closed) {\n      config.closed.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {\n        void this.drawer.close();\n      });\n    }\n  }\n\n  protected onClose(): void {\n    void this.drawer.close();\n  }\n\n  onOpenChange(isOpened: boolean): void {\n    this.openChange.emit(isOpened);\n  }\n}\n","<ng-container>\n  <mat-drawer-container class=\"side-sheet-container\" [attr.theme]=\"applicationTheme\" [hasBackdrop]=\"true\">\n    <mat-drawer\n      (closedStart)=\"onOpenChange(false)\"\n      (openedStart)=\"onOpenChange(true)\"\n      #drawer\n      [mode]=\"'over'\"\n      [autoFocus]=\"'.header'\"\n      class=\"side-sheet-content\"\n      [position]=\"position\"\n      [attr.data-testid]=\"testId\"\n    >\n      <div class=\"header\">\n        <div class=\"title\">\n          @if (showBackButton) {\n            <ui-button\n              [variant]=\"'icon-button'\"\n              [iconName]=\"applicationTheme === 'classic' ? 'Arrow_left' : 'Arrow-chevron-left-filled'\"\n              [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n              [applicationTheme]=\"applicationTheme\"\n              [tooltip]=\"('COMMON.BACK' | uiTranslate | async)!\"\n              [ariaLabel]=\"('COMMON.BACK' | uiTranslate | async)!\"\n              [testId]=\"backButtonTestId\"\n              (click)=\"onClose()\"\n            ></ui-button>\n          }\n          @if (title) {\n            <span [matTooltip]=\"showTitleTooltip ? title : ''\" [matTooltipClass]=\"applicationTheme\">{{ title }}</span>\n          }\n          @if (showLogo) {\n            <ui-logo></ui-logo>\n          }\n        </div>\n        <ui-button\n          [variant]=\"'icon-button'\"\n          [iconName]=\"'Close'\"\n          [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n          [applicationTheme]=\"applicationTheme\"\n          [tooltip]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n          [ariaLabel]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n          [testId]=\"closeButtonTestId\"\n          (click)=\"onClose()\"\n        ></ui-button>\n      </div>\n      <ng-container #container></ng-container>\n    </mat-drawer>\n    <mat-drawer-content>\n      <ng-content></ng-content>\n    </mat-drawer-content>\n  </mat-drawer-container>\n</ng-container>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { MatSidenavModule } from '@angular/material/sidenav';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { LogoComponentModule } from '@testgorilla/tgo-ui/components/logo';\n\nimport { SideSheetComponent } from './side-sheet.component';\n\n@NgModule({\n  exports: [SideSheetComponent],\n  imports: [\n    CommonModule,\n    IconComponentModule,\n    ButtonComponentModule,\n    MatTooltipModule,\n    MatSidenavModule,\n    UiTranslatePipe,\n    LogoComponentModule,\n    SideSheetComponent,\n  ],\n})\nexport class SideSheetComponentModule {}\n"],"mappings":"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"}

package/fesm2022/testgorilla-tgo-ui-components-slider.mjs

@@ -13,6 +13,9 @@ import { NgxMaskDirective, provideNgxMask } from "ngx-mask";
 import { UiTranslatePipe } from "@testgorilla/tgo-ui/components/core";
 import * as i5 from "@testgorilla/tgo-ui/components/icon";
 import { IconComponentModule } from "@testgorilla/tgo-ui/components/icon";
+function nullishToNull(value) {
+	return value ?? null;
+}
 var SliderComponent = class SliderComponent {
 	get startThumbTestId() {
 		return this.testId ? `${this.testId}-start` : "slider-start-thumb";
@@ -223,14 +226,14 @@ var SliderComponent = class SliderComponent {
 					publicName: "sliderStart",
 					isSignal: false,
 					isRequired: false,
-					transformFunction: null
+					transformFunction: nullishToNull
 				},
 				sliderEnd: {
 					classPropertyName: "sliderEnd",
 					publicName: "sliderEnd",
 					isSignal: false,
 					isRequired: false,
-					transformFunction: null
+					transformFunction: nullishToNull
 				},
 				label: {
 					classPropertyName: "label",
@@ -611,8 +614,14 @@ i0.ɵɵngDeclareClassMetadata({
 		min: [{ type: Input }],
 		percentage: [{ type: Input }],
 		disabled: [{ type: Input }],
-		sliderStart: [{ type: Input }],
-		sliderEnd: [{ type: Input }],
+		sliderStart: [{
+			type: Input,
+			args: [{ transform: nullishToNull }]
+		}],
+		sliderEnd: [{
+			type: Input,
+			args: [{ transform: nullishToNull }]
+		}],
 		label: [{ type: Input }],
 		showInputs: [{ type: Input }],
 		step: [{ type: Input }],

package/fesm2022/testgorilla-tgo-ui-components-slider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"testgorilla-tgo-ui-components-slider.mjs","names":[],"sources":["../../../components/slider/slider.component.ts","../../../components/slider/slider.component.html","../../../components/slider/slider.component.module.ts"],"sourcesContent":["import { CommonModule, DecimalPipe } from '@angular/common';\nimport {\n  afterNextRender,\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  computed,\n  DestroyRef,\n  ElementRef,\n  EventEmitter,\n  forwardRef,\n  inject,\n  Inject,\n  input,\n  Input,\n  Optional,\n  NgZone,\n  output,\n  Output,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport {\n  AbstractControl,\n  FormsModule,\n  NG_VALIDATORS,\n  NG_VALUE_ACCESSOR,\n  ValidationErrors,\n  Validator,\n} from '@angular/forms';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatSlider, MatSliderDragEvent, MatSliderModule } from '@angular/material/slider';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { NgxMaskDirective, provideNgxMask } from 'ngx-mask';\n\nimport { ApplicationTheme, UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\n\nimport { SliderValue, SliderVariant } from './slider.model';\n\n@Component({\n  selector: 'ui-slider',\n  templateUrl: './slider.component.html',\n  styleUrls: ['./slider.component.scss'],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => SliderComponent),\n      multi: true,\n    },\n    {\n      provide: NG_VALIDATORS,\n      useExisting: forwardRef(() => SliderComponent),\n      multi: true,\n    },\n    provideNgxMask(),\n    DecimalPipe,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    CommonModule,\n    MatSliderModule,\n    FormsModule,\n    MatInputModule,\n    MatTooltipModule,\n    IconComponentModule,\n    UiTranslatePipe,\n    NgxMaskDirective,\n  ],\n})\nexport class SliderComponent implements Validator {\n  /**\n   * The maximum value of the slider.\n   *\n   * @type {number}\n   * @default 100\n   */\n  @Input() max = 100;\n\n  /**\n   * The minimum value of the slider.\n   *\n   * @type {number}\n   * @default 0\n   */\n  @Input() min = 0;\n\n  /**\n   * A flag indicating whether the slider displays values as percentages.\n   *\n   * @type {boolean}\n   * @default true\n   */\n  @Input() percentage = false;\n\n  /**\n   * A flag indicating whether the slider is disabled.\n   *\n   * @type {boolean}\n   * @default true\n   */\n  @Input() disabled = false;\n\n  /**\n   * The starting value of the slider.\n   *\n   * @type {number}\n   * @default 0\n   */\n  @Input() sliderStart = 0;\n\n  /**\n   * The ending value of the slider.\n   *\n   * @type {number}\n   * @default 100\n   */\n  @Input() sliderEnd = 100;\n\n  /**\n   * The label for the slider.\n   *\n   * @type {string}\n   * @default ''\n   */\n  @Input() label = '';\n\n  /**\n   * Show slider inputs.\n   *\n   * @type {boolean}\n   * @default true\n   */\n  @Input() showInputs = true;\n\n  /**\n   * Step number.\n   *\n   * @type {number}\n   * @default 1\n   */\n  @Input() step = 1;\n\n  /**\n   *\n   * Defines the application theme\n   *\n   * @type {ApplicationTheme}\n   * @memberof SliderComponent\n   */\n  @Input() applicationTheme: ApplicationTheme = 'light';\n\n  /**\n   *\n   * Defines the variant slider\n   *\n   * @type {SliderVariant}\n   * @memberof SliderComponent\n   */\n  @Input() variant: SliderVariant = 'range';\n\n  @Input() testId: string | null = null;\n\n  get startThumbTestId(): string {\n    return this.testId ? `${this.testId}-start` : 'slider-start-thumb';\n  }\n\n  get endThumbTestId(): string {\n    return this.testId ? `${this.testId}-end` : 'slider-end-thumb';\n  }\n\n  get startInputTestId(): string {\n    return this.testId ? `${this.testId}-input-start` : 'slider.input-start';\n  }\n\n  get endInputTestId(): string {\n    return this.testId ? `${this.testId}-input-end` : 'slider.input-end';\n  }\n\n  /**\n   * Controls whether decimal values are allowed in the input fields.\n   * When true, inputs accept decimal numbers (up to 2 decimal places).\n   * When false, inputs only accept whole numbers.\n   */\n  useDecimal = input<boolean>(false);\n\n  /**\n   * Controls whether numbers are displayed with thousands separators.\n   * When true, displays numbers like \"100,000\" instead of \"100000\".\n   * This is independent of useDecimal - you can have thousands separators\n   * without decimals, or decimals without thousands separators.\n   */\n  useThousandsSeparator = input<boolean>(false);\n\n  minLabel = input<string>();\n\n  maxLabel = input<string>();\n\n  inputWidth = input(80);\n\n  /**\n   * Controls whether the value bubble pops above the thumb on hover and while dragging.\n   * Set it to false for scrubber-style sliders whose designs do not show one.\n   * Applies to both the basic and the range variant.\n   */\n  showValueBubble = input(true, { transform: booleanAttribute });\n\n  @Output() sliderValueChange = new EventEmitter<SliderValue>();\n\n  /**\n   * Emitted with the current value when the user starts dragging the thumb.\n   * Basic variant only, and never emitted for programmatic value writes, so a consumer\n   * that also drives the slider on a timer can tell a user drag apart from its own write.\n   */\n  dragStart = output<number>();\n\n  /**\n   * Emitted with the released value when the user stops dragging the thumb.\n   * Basic variant only. See {@link dragStart}.\n   */\n  dragEnd = output<number>();\n\n  /**\n   * Emitted with the thumb's current value on every move while the user is dragging it.\n   * Basic variant only, and pointer drag only: keyboard seeks and programmatic writes never\n   * emit it and keep arriving through `sliderValueChange`. See {@link dragStart}.\n   */\n  dragMove = output<number>();\n\n  // Keyboard seeks and writeValue also update ngModel, so only a live pointer drag may emit dragMove.\n  private isDragging = false;\n\n  /**\n   * Tracks hover, so the value bubble markup is only mounted while the pointer is over the slider.\n   * Starts true to keep the at-rest markup identical to what the component shipped before\n   * `showValueBubble` existed: Material leaves the bubble invisible until the thumb is active, and\n   * unmounting it changes how the disabled slider's opacity layer rasterises its text.\n   */\n  private readonly isHovered = signal(true);\n\n  /** Material renders the value bubble only while `discrete` is set, so gate it on both hover and the input. */\n  protected readonly isDiscrete = computed(() => this.showValueBubble() && this.isHovered());\n\n  cdr = inject(ChangeDetectorRef);\n  decimalPipe = inject(DecimalPipe);\n  private control?: AbstractControl;\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly ngZone = inject(NgZone);\n\n  private readonly matSlider = viewChild(MatSlider);\n  private readonly matSliderElement = viewChild(MatSlider, { read: ElementRef });\n\n  constructor(\n    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n  ) {\n    if (defaultAppTheme) {\n      this.applicationTheme = defaultAppTheme;\n      this.cdr.markForCheck();\n    }\n    this.formatLabel = this.formatLabel.bind(this);\n    // Runs after MatSlider has created its own observer, and only in the browser.\n    afterNextRender(() => this.observeRangeResize());\n  }\n\n  /**\n   * Works around MatSlider's resize handling for the range variant. On a resize, `_onResize()`\n   * repositions the end thumb before the start thumb, and clamps the end thumb so it cannot sit\n   * left of the start thumb's position — which at that point is still the pre-resize one. When the\n   * slider shrinks to under about half its width, the end thumb is clamped to that stale position\n   * and stays there, because nothing repositions it afterwards. Running the resize step once more,\n   * after Material's own observer, places the end thumb against the start thumb's new position.\n   * Growing the slider never clamps, so the extra pass is a no-op there.\n   */\n  private observeRangeResize(): void {\n    const host = this.matSliderElement()?.nativeElement as HTMLElement | undefined;\n    if (!host || typeof ResizeObserver === 'undefined') {\n      return;\n    }\n\n    // Created after MatSlider's own observer (afterNextRender runs once its view has initialised), and ResizeObserver\n    // delivers to observers in creation order, so this always runs after Material's pass.\n    const observer = this.ngZone.runOutsideAngular(\n      () =>\n        new ResizeObserver(() => {\n          // A single thumb has no sibling to clamp against. Checked here, as `variant` can change later.\n          if (this.isBasicSlider) {\n            return;\n          }\n          const slider = this.matSlider() as unknown as\n            | { _onResize?: () => void; _isActive?: () => boolean }\n            | undefined;\n          /* eslint-disable no-underscore-dangle -- MatSlider internals: _onResize repositions the thumbs, _isActive reports a drag */\n          // Material skips resizes mid-drag too; repositioning a thumb under the pointer would make it jump.\n          if (slider?._isActive?.()) {\n            return;\n          }\n          slider?._onResize?.();\n          /* eslint-enable no-underscore-dangle */\n        })\n    );\n    observer.observe(host);\n    this.destroyRef.onDestroy(() => observer.disconnect());\n  }\n\n  private value: SliderValue = { start: 0, end: 100 };\n  protected translationContext = 'SLIDER.';\n  protected touchedControlName = '';\n\n  onChange: (value: SliderValue) => void = () => {};\n  onTouch: () => void = () => {};\n\n  registerOnChange(fn: (value: SliderValue) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouch = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n    this.cdr.markForCheck();\n  }\n\n  writeValue(value: SliderValue): void {\n    this.value = value;\n    this.sliderEnd = value.end;\n    this.cdr.markForCheck();\n    // Update sliderStart in a separate detection cycle to ensure proper rendering o mat-slider\n    setTimeout(() => {\n      this.sliderStart = value.start;\n      this.cdr.markForCheck();\n      if (this.control) {\n        this.control.updateValueAndValidity({ emitEvent: false });\n      }\n    });\n  }\n\n  protected onValueChange(ev?: number): void {\n    const value: SliderValue = { start: Number(this.sliderStart), end: Number(this.sliderEnd) };\n\n    if (ev) {\n      value.start = ev;\n      value.end = 0;\n    }\n\n    this.value = value;\n    this.onChange(value);\n    this.sliderValueChange.emit(value);\n    this.cdr.markForCheck();\n    this.onTouch();\n  }\n\n  protected onSliderHover(isHovered: boolean): void {\n    this.isHovered.set(isHovered);\n  }\n\n  protected onDragStart(event: MatSliderDragEvent): void {\n    this.isDragging = true;\n    this.dragStart.emit(event.value);\n  }\n\n  protected onDragMove(value: number): void {\n    if (this.isDragging) {\n      this.dragMove.emit(value);\n    }\n  }\n\n  protected onDragEnd(event: MatSliderDragEvent): void {\n    this.isDragging = false;\n    this.dragEnd.emit(event.value);\n  }\n\n  protected onInputBlur(inputName: string): void {\n    this.touchedControlName = inputName;\n    const value: SliderValue = { start: Number(this.sliderStart), end: Number(this.sliderEnd) };\n\n    if (this.isValueChanged(value)) {\n      this.onValueChange();\n    }\n  }\n\n  protected onInputFocus(): void {\n    this.touchedControlName = '';\n    this.cdr.markForCheck();\n  }\n\n  private isValueChanged(value: SliderValue): boolean {\n    return this.value.start !== value.start || this.value.end !== value.end;\n  }\n\n  get hasError(): boolean {\n    return (\n      this.max < Number(this.sliderEnd) ||\n      this.min > Number(this.sliderStart) ||\n      this.min > Number(this.sliderEnd) ||\n      this.max < Number(this.sliderStart) ||\n      Number(this.sliderEnd) < Number(this.sliderStart)\n    );\n  }\n\n  get isBasicSlider(): boolean {\n    return this.variant === 'basic';\n  }\n\n  formatLabel(value: number): string {\n    return this.useThousandsSeparator()\n      ? (this.decimalPipe.transform(value, '1.0-0') ?? value.toString())\n      : value.toString();\n  }\n\n  validate(control: AbstractControl): ValidationErrors | null {\n    this.control = control;\n    return this.hasError && this.touchedControlName ? { invalidSlider: true } : null;\n  }\n}\n","<ng-container>\n  <div\n    class=\"slider-container\"\n    [attr.theme]=\"applicationTheme\"\n    [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\"\n  >\n    @if (label) {\n      <div class=\"slider-label\">{{ label }}</div>\n    }\n\n    <div class=\"slider\">\n      @if (!isBasicSlider) {\n        <div class=\"min-value\">\n          <span>\n            @if (useThousandsSeparator()) {\n              {{ min | number }}\n            } @else {\n              {{ min }}\n            }\n            @if (percentage) {\n              %\n            }\n          </span>\n        </div>\n      }\n      <mat-slider\n        [disableRipple]=\"applicationTheme !== 'classic'\"\n        [discrete]=\"isDiscrete()\"\n        [disabled]=\"disabled\"\n        [max]=\"max\"\n        [min]=\"min\"\n        [step]=\"step\"\n        (mouseenter)=\"onSliderHover(true)\"\n        (mouseleave)=\"onSliderHover(false)\"\n        [displayWith]=\"formatLabel\"\n      >\n        @if (isBasicSlider) {\n          <input\n            [attr.data-testid]=\"testId ?? 'slider-thumb'\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange($event)\"\n            (dragStart)=\"onDragStart($event)\"\n            (dragEnd)=\"onDragEnd($event)\"\n            [(ngModel)]=\"sliderStart\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (ngModelChange)=\"onDragMove($event)\"\n            matSliderThumb\n          />\n        } @else {\n          <input\n            [attr.data-testid]=\"startThumbTestId\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange()\"\n            [(ngModel)]=\"sliderStart\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            matSliderStartThumb\n          />\n          <input\n            [attr.data-testid]=\"endThumbTestId\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange()\"\n            [(ngModel)]=\"sliderEnd\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            matSliderEndThumb\n          />\n        }\n      </mat-slider>\n      @if (!isBasicSlider) {\n        <div class=\"max-value\">\n          <span>\n            @if (useThousandsSeparator()) {\n              {{ max | number }}\n            } @else {\n              {{ max }}\n            }\n            @if (percentage) {\n              %\n            }\n          </span>\n        </div>\n      }\n    </div>\n\n    @if (showInputs && !isBasicSlider) {\n      <div class=\"slider-input\">\n        <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n          @if (minLabel()) {\n            <mat-label>\n              {{ minLabel() }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          } @else {\n            <mat-label>\n              {{ 'COMMON.MIN' | uiTranslate | async }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          }\n          @if (useDecimal()) {\n            <input\n              [attr.data-testid]=\"startInputTestId\"\n              matInput\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderStart\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              [disabled]=\"disabled\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('start')\"\n              (keydown.enter)=\"onInputBlur('start')\"\n              mask=\"separator.2\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          } @else {\n            <input\n              [attr.data-testid]=\"startInputTestId\"\n              matInput\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderStart\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              [disabled]=\"disabled\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('start')\"\n              (keydown.enter)=\"onInputBlur('start')\"\n              mask=\"separator.0\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          }\n        </mat-form-field>\n        <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n          @if (maxLabel()) {\n            <mat-label>\n              {{ maxLabel() }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          } @else {\n            <mat-label>\n              {{ 'COMMON.MAX' | uiTranslate | async }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          }\n          @if (useDecimal()) {\n            <input\n              matInput\n              [disabled]=\"disabled\"\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderEnd\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('end')\"\n              (keydown.enter)=\"onInputBlur('end')\"\n              [attr.data-testid]=\"endInputTestId\"\n              mask=\"separator.2\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          } @else {\n            <input\n              matInput\n              [disabled]=\"disabled\"\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderEnd\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('end')\"\n              (keydown.enter)=\"onInputBlur('end')\"\n              mask=\"separator.0\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n              [attr.data-testid]=\"endInputTestId\"\n            />\n          }\n        </mat-form-field>\n      </div>\n    }\n\n    @if (hasError && touchedControlName) {\n      <mat-error class=\"slider-errors\">\n        @if (touchedControlName === 'start' && sliderStart > sliderEnd) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{\n              translationContext + 'MIN_MORE_THAN_MAX' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n            }}</span>\n          </div>\n        }\n        @if (touchedControlName === 'end' && sliderStart > sliderEnd) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{\n              translationContext + 'MAX_LESS_THAN_MIN' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n            }}</span>\n          </div>\n        }\n        @if (sliderStart < min) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{ 'COMMON.MIN' | uiTranslate | async }} {{ min }}</span>\n          </div>\n        }\n        @if (sliderEnd > max) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{ 'COMMON.MAX' | uiTranslate | async }} {{ max }}</span>\n          </div>\n        }\n      </mat-error>\n    }\n  </div>\n</ng-container>\n","import { NgModule } from '@angular/core';\n\nimport { SliderComponent } from './slider.component';\n\n@NgModule({\n  imports: [SliderComponent],\n  exports: [SliderComponent],\n})\nexport class SliderComponentModule {}\n"],"mappings":"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"}
+{"version":3,"file":"testgorilla-tgo-ui-components-slider.mjs","names":[],"sources":["../../../components/slider/slider.component.ts","../../../components/slider/slider.component.html","../../../components/slider/slider.component.module.ts"],"sourcesContent":["import { CommonModule, DecimalPipe } from '@angular/common';\nimport {\n  afterNextRender,\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  computed,\n  DestroyRef,\n  ElementRef,\n  EventEmitter,\n  forwardRef,\n  inject,\n  Inject,\n  input,\n  Input,\n  Optional,\n  NgZone,\n  output,\n  Output,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport {\n  AbstractControl,\n  FormsModule,\n  NG_VALIDATORS,\n  NG_VALUE_ACCESSOR,\n  ValidationErrors,\n  Validator,\n} from '@angular/forms';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatSlider, MatSliderDragEvent, MatSliderModule } from '@angular/material/slider';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { NgxMaskDirective, provideNgxMask } from 'ngx-mask';\n\nimport { ApplicationTheme, UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\n\nimport { SliderValue, SliderVariant } from './slider.model';\n\n// A template `a?.b` binding yields `undefined` since Angular 22 (it was `null`). MatSlider falls back to\n// the end of the track for `null`, but turns `undefined` into 0 and keeps it.\n// A function declaration: the Angular compiler cannot resolve an arrow-function constant as a transform.\nfunction nullishToNull(value: number | null | undefined): number {\n  return value ?? (null as unknown as number);\n}\n\n@Component({\n  selector: 'ui-slider',\n  templateUrl: './slider.component.html',\n  styleUrls: ['./slider.component.scss'],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => SliderComponent),\n      multi: true,\n    },\n    {\n      provide: NG_VALIDATORS,\n      useExisting: forwardRef(() => SliderComponent),\n      multi: true,\n    },\n    provideNgxMask(),\n    DecimalPipe,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    CommonModule,\n    MatSliderModule,\n    FormsModule,\n    MatInputModule,\n    MatTooltipModule,\n    IconComponentModule,\n    UiTranslatePipe,\n    NgxMaskDirective,\n  ],\n})\nexport class SliderComponent implements Validator {\n  /**\n   * The maximum value of the slider.\n   *\n   * @type {number}\n   * @default 100\n   */\n  @Input() max = 100;\n\n  /**\n   * The minimum value of the slider.\n   *\n   * @type {number}\n   * @default 0\n   */\n  @Input() min = 0;\n\n  /**\n   * A flag indicating whether the slider displays values as percentages.\n   *\n   * @type {boolean}\n   * @default true\n   */\n  @Input() percentage = false;\n\n  /**\n   * A flag indicating whether the slider is disabled.\n   *\n   * @type {boolean}\n   * @default true\n   */\n  @Input() disabled = false;\n\n  /**\n   * The starting value of the slider.\n   *\n   * @type {number}\n   * @default 0\n   */\n  @Input({ transform: nullishToNull }) sliderStart = 0;\n\n  /**\n   * The ending value of the slider.\n   *\n   * @type {number}\n   * @default 100\n   */\n  @Input({ transform: nullishToNull }) sliderEnd = 100;\n\n  /**\n   * The label for the slider.\n   *\n   * @type {string}\n   * @default ''\n   */\n  @Input() label = '';\n\n  /**\n   * Show slider inputs.\n   *\n   * @type {boolean}\n   * @default true\n   */\n  @Input() showInputs = true;\n\n  /**\n   * Step number.\n   *\n   * @type {number}\n   * @default 1\n   */\n  @Input() step = 1;\n\n  /**\n   *\n   * Defines the application theme\n   *\n   * @type {ApplicationTheme}\n   * @memberof SliderComponent\n   */\n  @Input() applicationTheme: ApplicationTheme = 'light';\n\n  /**\n   *\n   * Defines the variant slider\n   *\n   * @type {SliderVariant}\n   * @memberof SliderComponent\n   */\n  @Input() variant: SliderVariant = 'range';\n\n  @Input() testId: string | null = null;\n\n  get startThumbTestId(): string {\n    return this.testId ? `${this.testId}-start` : 'slider-start-thumb';\n  }\n\n  get endThumbTestId(): string {\n    return this.testId ? `${this.testId}-end` : 'slider-end-thumb';\n  }\n\n  get startInputTestId(): string {\n    return this.testId ? `${this.testId}-input-start` : 'slider.input-start';\n  }\n\n  get endInputTestId(): string {\n    return this.testId ? `${this.testId}-input-end` : 'slider.input-end';\n  }\n\n  /**\n   * Controls whether decimal values are allowed in the input fields.\n   * When true, inputs accept decimal numbers (up to 2 decimal places).\n   * When false, inputs only accept whole numbers.\n   */\n  useDecimal = input<boolean>(false);\n\n  /**\n   * Controls whether numbers are displayed with thousands separators.\n   * When true, displays numbers like \"100,000\" instead of \"100000\".\n   * This is independent of useDecimal - you can have thousands separators\n   * without decimals, or decimals without thousands separators.\n   */\n  useThousandsSeparator = input<boolean>(false);\n\n  minLabel = input<string>();\n\n  maxLabel = input<string>();\n\n  inputWidth = input(80);\n\n  /**\n   * Controls whether the value bubble pops above the thumb on hover and while dragging.\n   * Set it to false for scrubber-style sliders whose designs do not show one.\n   * Applies to both the basic and the range variant.\n   */\n  showValueBubble = input(true, { transform: booleanAttribute });\n\n  @Output() sliderValueChange = new EventEmitter<SliderValue>();\n\n  /**\n   * Emitted with the current value when the user starts dragging the thumb.\n   * Basic variant only, and never emitted for programmatic value writes, so a consumer\n   * that also drives the slider on a timer can tell a user drag apart from its own write.\n   */\n  dragStart = output<number>();\n\n  /**\n   * Emitted with the released value when the user stops dragging the thumb.\n   * Basic variant only. See {@link dragStart}.\n   */\n  dragEnd = output<number>();\n\n  /**\n   * Emitted with the thumb's current value on every move while the user is dragging it.\n   * Basic variant only, and pointer drag only: keyboard seeks and programmatic writes never\n   * emit it and keep arriving through `sliderValueChange`. See {@link dragStart}.\n   */\n  dragMove = output<number>();\n\n  // Keyboard seeks and writeValue also update ngModel, so only a live pointer drag may emit dragMove.\n  private isDragging = false;\n\n  /**\n   * Tracks hover, so the value bubble markup is only mounted while the pointer is over the slider.\n   * Starts true to keep the at-rest markup identical to what the component shipped before\n   * `showValueBubble` existed: Material leaves the bubble invisible until the thumb is active, and\n   * unmounting it changes how the disabled slider's opacity layer rasterises its text.\n   */\n  private readonly isHovered = signal(true);\n\n  /** Material renders the value bubble only while `discrete` is set, so gate it on both hover and the input. */\n  protected readonly isDiscrete = computed(() => this.showValueBubble() && this.isHovered());\n\n  cdr = inject(ChangeDetectorRef);\n  decimalPipe = inject(DecimalPipe);\n  private control?: AbstractControl;\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly ngZone = inject(NgZone);\n\n  private readonly matSlider = viewChild(MatSlider);\n  private readonly matSliderElement = viewChild(MatSlider, { read: ElementRef });\n\n  constructor(\n    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n  ) {\n    if (defaultAppTheme) {\n      this.applicationTheme = defaultAppTheme;\n      this.cdr.markForCheck();\n    }\n    this.formatLabel = this.formatLabel.bind(this);\n    // Runs after MatSlider has created its own observer, and only in the browser.\n    afterNextRender(() => this.observeRangeResize());\n  }\n\n  /**\n   * Works around MatSlider's resize handling for the range variant. On a resize, `_onResize()`\n   * repositions the end thumb before the start thumb, and clamps the end thumb so it cannot sit\n   * left of the start thumb's position — which at that point is still the pre-resize one. When the\n   * slider shrinks to under about half its width, the end thumb is clamped to that stale position\n   * and stays there, because nothing repositions it afterwards. Running the resize step once more,\n   * after Material's own observer, places the end thumb against the start thumb's new position.\n   * Growing the slider never clamps, so the extra pass is a no-op there.\n   */\n  private observeRangeResize(): void {\n    const host = this.matSliderElement()?.nativeElement as HTMLElement | undefined;\n    if (!host || typeof ResizeObserver === 'undefined') {\n      return;\n    }\n\n    // Created after MatSlider's own observer (afterNextRender runs once its view has initialised), and ResizeObserver\n    // delivers to observers in creation order, so this always runs after Material's pass.\n    const observer = this.ngZone.runOutsideAngular(\n      () =>\n        new ResizeObserver(() => {\n          // A single thumb has no sibling to clamp against. Checked here, as `variant` can change later.\n          if (this.isBasicSlider) {\n            return;\n          }\n          const slider = this.matSlider() as unknown as\n            | { _onResize?: () => void; _isActive?: () => boolean }\n            | undefined;\n          /* eslint-disable no-underscore-dangle -- MatSlider internals: _onResize repositions the thumbs, _isActive reports a drag */\n          // Material skips resizes mid-drag too; repositioning a thumb under the pointer would make it jump.\n          if (slider?._isActive?.()) {\n            return;\n          }\n          slider?._onResize?.();\n          /* eslint-enable no-underscore-dangle */\n        })\n    );\n    observer.observe(host);\n    this.destroyRef.onDestroy(() => observer.disconnect());\n  }\n\n  private value: SliderValue = { start: 0, end: 100 };\n  protected translationContext = 'SLIDER.';\n  protected touchedControlName = '';\n\n  onChange: (value: SliderValue) => void = () => {};\n  onTouch: () => void = () => {};\n\n  registerOnChange(fn: (value: SliderValue) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouch = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n    this.cdr.markForCheck();\n  }\n\n  writeValue(value: SliderValue): void {\n    this.value = value;\n    this.sliderEnd = value.end;\n    this.cdr.markForCheck();\n    // Update sliderStart in a separate detection cycle to ensure proper rendering o mat-slider\n    setTimeout(() => {\n      this.sliderStart = value.start;\n      this.cdr.markForCheck();\n      if (this.control) {\n        this.control.updateValueAndValidity({ emitEvent: false });\n      }\n    });\n  }\n\n  protected onValueChange(ev?: number): void {\n    const value: SliderValue = { start: Number(this.sliderStart), end: Number(this.sliderEnd) };\n\n    if (ev) {\n      value.start = ev;\n      value.end = 0;\n    }\n\n    this.value = value;\n    this.onChange(value);\n    this.sliderValueChange.emit(value);\n    this.cdr.markForCheck();\n    this.onTouch();\n  }\n\n  protected onSliderHover(isHovered: boolean): void {\n    this.isHovered.set(isHovered);\n  }\n\n  protected onDragStart(event: MatSliderDragEvent): void {\n    this.isDragging = true;\n    this.dragStart.emit(event.value);\n  }\n\n  protected onDragMove(value: number): void {\n    if (this.isDragging) {\n      this.dragMove.emit(value);\n    }\n  }\n\n  protected onDragEnd(event: MatSliderDragEvent): void {\n    this.isDragging = false;\n    this.dragEnd.emit(event.value);\n  }\n\n  protected onInputBlur(inputName: string): void {\n    this.touchedControlName = inputName;\n    const value: SliderValue = { start: Number(this.sliderStart), end: Number(this.sliderEnd) };\n\n    if (this.isValueChanged(value)) {\n      this.onValueChange();\n    }\n  }\n\n  protected onInputFocus(): void {\n    this.touchedControlName = '';\n    this.cdr.markForCheck();\n  }\n\n  private isValueChanged(value: SliderValue): boolean {\n    return this.value.start !== value.start || this.value.end !== value.end;\n  }\n\n  get hasError(): boolean {\n    return (\n      this.max < Number(this.sliderEnd) ||\n      this.min > Number(this.sliderStart) ||\n      this.min > Number(this.sliderEnd) ||\n      this.max < Number(this.sliderStart) ||\n      Number(this.sliderEnd) < Number(this.sliderStart)\n    );\n  }\n\n  get isBasicSlider(): boolean {\n    return this.variant === 'basic';\n  }\n\n  formatLabel(value: number): string {\n    return this.useThousandsSeparator()\n      ? (this.decimalPipe.transform(value, '1.0-0') ?? value.toString())\n      : value.toString();\n  }\n\n  validate(control: AbstractControl): ValidationErrors | null {\n    this.control = control;\n    return this.hasError && this.touchedControlName ? { invalidSlider: true } : null;\n  }\n}\n","<ng-container>\n  <div\n    class=\"slider-container\"\n    [attr.theme]=\"applicationTheme\"\n    [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\"\n  >\n    @if (label) {\n      <div class=\"slider-label\">{{ label }}</div>\n    }\n\n    <div class=\"slider\">\n      @if (!isBasicSlider) {\n        <div class=\"min-value\">\n          <span>\n            @if (useThousandsSeparator()) {\n              {{ min | number }}\n            } @else {\n              {{ min }}\n            }\n            @if (percentage) {\n              %\n            }\n          </span>\n        </div>\n      }\n      <mat-slider\n        [disableRipple]=\"applicationTheme !== 'classic'\"\n        [discrete]=\"isDiscrete()\"\n        [disabled]=\"disabled\"\n        [max]=\"max\"\n        [min]=\"min\"\n        [step]=\"step\"\n        (mouseenter)=\"onSliderHover(true)\"\n        (mouseleave)=\"onSliderHover(false)\"\n        [displayWith]=\"formatLabel\"\n      >\n        @if (isBasicSlider) {\n          <input\n            [attr.data-testid]=\"testId ?? 'slider-thumb'\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange($event)\"\n            (dragStart)=\"onDragStart($event)\"\n            (dragEnd)=\"onDragEnd($event)\"\n            [(ngModel)]=\"sliderStart\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            (ngModelChange)=\"onDragMove($event)\"\n            matSliderThumb\n          />\n        } @else {\n          <input\n            [attr.data-testid]=\"startThumbTestId\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange()\"\n            [(ngModel)]=\"sliderStart\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            matSliderStartThumb\n          />\n          <input\n            [attr.data-testid]=\"endThumbTestId\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange()\"\n            [(ngModel)]=\"sliderEnd\"\n            [ngModelOptions]=\"{ standalone: true }\"\n            matSliderEndThumb\n          />\n        }\n      </mat-slider>\n      @if (!isBasicSlider) {\n        <div class=\"max-value\">\n          <span>\n            @if (useThousandsSeparator()) {\n              {{ max | number }}\n            } @else {\n              {{ max }}\n            }\n            @if (percentage) {\n              %\n            }\n          </span>\n        </div>\n      }\n    </div>\n\n    @if (showInputs && !isBasicSlider) {\n      <div class=\"slider-input\">\n        <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n          @if (minLabel()) {\n            <mat-label>\n              {{ minLabel() }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          } @else {\n            <mat-label>\n              {{ 'COMMON.MIN' | uiTranslate | async }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          }\n          @if (useDecimal()) {\n            <input\n              [attr.data-testid]=\"startInputTestId\"\n              matInput\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderStart\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              [disabled]=\"disabled\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('start')\"\n              (keydown.enter)=\"onInputBlur('start')\"\n              mask=\"separator.2\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          } @else {\n            <input\n              [attr.data-testid]=\"startInputTestId\"\n              matInput\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderStart\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              [disabled]=\"disabled\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('start')\"\n              (keydown.enter)=\"onInputBlur('start')\"\n              mask=\"separator.0\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          }\n        </mat-form-field>\n        <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n          @if (maxLabel()) {\n            <mat-label>\n              {{ maxLabel() }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          } @else {\n            <mat-label>\n              {{ 'COMMON.MAX' | uiTranslate | async }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          }\n          @if (useDecimal()) {\n            <input\n              matInput\n              [disabled]=\"disabled\"\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderEnd\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('end')\"\n              (keydown.enter)=\"onInputBlur('end')\"\n              [attr.data-testid]=\"endInputTestId\"\n              mask=\"separator.2\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          } @else {\n            <input\n              matInput\n              [disabled]=\"disabled\"\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderEnd\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('end')\"\n              (keydown.enter)=\"onInputBlur('end')\"\n              mask=\"separator.0\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n              [attr.data-testid]=\"endInputTestId\"\n            />\n          }\n        </mat-form-field>\n      </div>\n    }\n\n    @if (hasError && touchedControlName) {\n      <mat-error class=\"slider-errors\">\n        @if (touchedControlName === 'start' && sliderStart > sliderEnd) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{\n              translationContext + 'MIN_MORE_THAN_MAX' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n            }}</span>\n          </div>\n        }\n        @if (touchedControlName === 'end' && sliderStart > sliderEnd) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{\n              translationContext + 'MAX_LESS_THAN_MIN' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n            }}</span>\n          </div>\n        }\n        @if (sliderStart < min) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{ 'COMMON.MIN' | uiTranslate | async }} {{ min }}</span>\n          </div>\n        }\n        @if (sliderEnd > max) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{ 'COMMON.MAX' | uiTranslate | async }} {{ max }}</span>\n          </div>\n        }\n      </mat-error>\n    }\n  </div>\n</ng-container>\n","import { NgModule } from '@angular/core';\n\nimport { SliderComponent } from './slider.component';\n\n@NgModule({\n  imports: [SliderComponent],\n  exports: [SliderComponent],\n})\nexport class SliderComponentModule {}\n"],"mappings":"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"}

package/fesm2022/testgorilla-tgo-ui-components-stepper.mjs

@@ -344,7 +344,7 @@ var StepperComponent = class StepperComponent {
 		}
 	}
 	set setSelectedIndex(value) {
-		this.selectedIndex = value;
+		this.selectedIndex = value ?? null;
 		if (!this.firstStepAutoSelect) this.itemSteps = this.itemSteps.map((step, i) => ({
 			...step,
 			isVisited: i === 0 && this.selectedIndex === -1 ? false : step.isVisited