@testgorilla/tgo-ui 11.17.0 → 11.18.0

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

@@ -1 +1 @@
-{"version":3,"file":"testgorilla-tgo-ui-components-radio-button.mjs","sources":["../../../components/radio-button/radio-button.component.ts","../../../components/radio-button/radio-button.component.html","../../../components/radio-button/radio-button.component.module.ts","../../../components/radio-button/testgorilla-tgo-ui-components-radio-button.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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"testgorilla-tgo-ui-components-radio-button.mjs","sources":["../../../components/radio-button/radio-button.component.ts","../../../components/radio-button/radio-button.component.html","../../../components/radio-button/radio-button.component.module.ts","../../../components/radio-button/testgorilla-tgo-ui-components-radio-button.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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -14,10 +14,10 @@ class HalfStarPipe {
     transform(index, value) {
         return Math.ceil(value) === index && !Number.isInteger(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: HalfStarPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: HalfStarPipe, isStandalone: true, name: "halfStar" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: HalfStarPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.23", ngImport: i0, type: HalfStarPipe, isStandalone: true, name: "halfStar" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: HalfStarPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: HalfStarPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'halfStar' }]
         }] });
@@ -95,10 +95,10 @@ class RatingComponent {
     onHover(index) {
         this.hoverIndex = index + 1;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: RatingComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: RatingComponent, isStandalone: true, selector: "ui-rating", inputs: { applicationTheme: "applicationTheme", value: "value", theme: "theme", disabled: "disabled", ariaLabel: "ariaLabel", testId: "testId", ariaRequired: "ariaRequired", barWidth: "barWidth", canUnselect: "canUnselect", length: "length" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div\n  class=\"rating\"\n  (mouseleave)=\"onHover(-1)\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-required]=\"ariaRequired\"\n  [attr.data-testid]=\"testId\"\n>\n  @if (theme === 'block') {\n    @for (item of items; track item) {\n      <div\n        class=\"rating-item\"\n        [attr.theme]=\"applicationTheme\"\n        tabindex=\"0\"\n        (click)=\"select(item)\"\n        (keydown.enter)=\"select(item)\"\n        (mouseenter)=\"onHover(item)\"\n        [ngClass]=\"{ 'rating-item-selected': item < value, 'rating-item-hover': item < hoverIndex }\"\n        [ngStyle]=\"{ 'width.px': barWidth }\"\n        [attr.data-testid]=\"itemTestId(item)\"\n      ></div>\n    }\n  } @else {\n    <div class=\"star-container\" [attr.theme]=\"applicationTheme\">\n      @for (item of items; track item; let i = $index) {\n        <div\n          #star\n          class=\"star\"\n          tabindex=\"0\"\n          [tabIndex]=\"0\"\n          (mouseenter)=\"onHover(item)\"\n          (mouseleave)=\"onHover(-1)\"\n          [ngClass]=\"{\n            filled: value > i,\n            hover: item < hoverIndex && (value ? item >= value : true),\n            disabled,\n            'filled-half': i + 1 | halfStar: value,\n          }\"\n          (click)=\"select(item); star.blur()\"\n          (keydown.enter)=\"select(item); star.blur()\"\n          [attr.data-testid]=\"itemTestId(item)\"\n        ></div>\n      }\n    </div>\n  }\n</div>\n", styles: [".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}.rating{display:flex;align-content:center;justify-content:flex-start;align-items:center}.rating-item{width:35px;height:16px;border:1px solid #e0e0e0;border-left:0;cursor:pointer}.rating-item-hover{border:0;background-color:#b5ddd5}.rating-item-hover[theme=dark],.rating-item-hover[theme=light]{background-color:color-mix(in srgb,var(--ui-rating-color, #d410aa) 40%,#fff)}.rating-item-hover:not(:first-child){border-left:1px solid #ffffff}.rating-item:first-child{border-radius:4px 0 0 4px}.rating-item:first-child:not(.rating-item-selected):not(.rating-item-hover){border-left:1px solid #e0e0e0}.rating-item:last-child{border-radius:0 4px 4px 0}.rating-item:first-child:last-child{border-radius:4px}.rating-item-selected{border:0;background-color:#46a997}.rating-item-selected[theme=dark],.rating-item-selected[theme=light]{background-color:var(--ui-rating-color, #d410aa)}.rating-item-selected:not(:first-child){border-left:1px solid #ffffff}.rating .star-container{display:flex;flex-direction:row;min-height:24px}.rating .star-container .star{width:24px;height:24px;background:url(/icons/rating-icons/Star-outline.svg) no-repeat center;background-size:100%;margin-right:4px}.rating .star-container .star:last-child{margin-right:0}.rating .star-container .star:focus{outline:1px dashed #888888}.rating .star-container .star:hover,.rating .star-container .star.hover,.rating .star-container .star:focus{opacity:.5}.rating .star-container .star.filled-half{background-image:none;-webkit-mask:url(/icons/rating-icons/Star-half.svg) no-repeat center/100%!important;mask:url(/icons/rating-icons/Star-half.svg) no-repeat center/100%!important;background-color:var(--ui-rating-color, #d410aa)}.rating .star-container .star.disabled{pointer-events:none;background-image:url(/icons/rating-icons/Star-filled-disabled.svg)}.rating .star-container .star:active{opacity:1}.rating .star-container .star-filled,.rating .star-container[theme=dark] .star.filled,.rating .star-container[theme=light] .star.filled,.rating .star-container[theme=dark] .star:hover,.rating .star-container[theme=dark] .star.hover,.rating .star-container[theme=dark] .star:focus,.rating .star-container[theme=light] .star:hover,.rating .star-container[theme=light] .star.hover,.rating .star-container[theme=light] .star:focus,.rating .star-container .star:hover,.rating .star-container .star.hover,.rating .star-container .star:focus,.rating .star-container .star.filled,.rating .star-container .star:active{background-image:none;-webkit-mask:url(/icons/rating-icons/Star-filled.svg) no-repeat center/100%;mask:url(/icons/rating-icons/Star-filled.svg) no-repeat center/100%;background-color:var(--ui-rating-color, #d410aa)}.rating .star-container[theme=dark] .star,.rating .star-container[theme=light] .star{cursor:pointer;background:url(/icons/rebrand/Review-star-in-line.svg) no-repeat center}.rating .star-container[theme=dark] .star:hover,.rating .star-container[theme=dark] .star.hover,.rating .star-container[theme=dark] .star:focus,.rating .star-container[theme=light] .star:hover,.rating .star-container[theme=light] .star.hover,.rating .star-container[theme=light] .star:focus{opacity:.5}.rating .star-container[theme=dark] .star:focus,.rating .star-container[theme=light] .star:focus{outline-offset:4px}.rating .star-container[theme=dark] .star.filled-half,.rating .star-container[theme=light] .star.filled-half{background-image:none;-webkit-mask:url(/icons/rebrand/Review-half-star-filled.svg) no-repeat center/100%!important;mask:url(/icons/rebrand/Review-half-star-filled.svg) no-repeat center/100%!important;background-color:var(--ui-rating-color, #d410aa)}.rating .star-container[theme=dark] .star.disabled,.rating .star-container[theme=light] .star.disabled{background-image:url(/icons/rebrand/Review-star-filled-disabled.svg)}.rating .star-container[theme=dark] .star-filled,.rating .star-container[theme=dark] .star:hover,.rating .star-container[theme=dark] .star.hover,.rating .star-container[theme=dark] .star:focus,.rating .star-container[theme=dark] .star.filled,.rating .star-container[theme=dark] .star:active,.rating .star-container[theme=light] .star-filled,.rating .star-container[theme=light] .star:hover,.rating .star-container[theme=light] .star.hover,.rating .star-container[theme=light] .star:focus,.rating .star-container[theme=light] .star.filled,.rating .star-container[theme=light] .star:active{background-image:none;-webkit-mask:url(/icons/rebrand/Review-star-filled.svg) no-repeat center/100%;mask:url(/icons/rebrand/Review-star-filled.svg) no-repeat center/100%;background-color:var(--ui-rating-color, #d410aa)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: HalfStarPipe, name: "halfStar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: RatingComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: RatingComponent, isStandalone: true, selector: "ui-rating", inputs: { applicationTheme: "applicationTheme", value: "value", theme: "theme", disabled: "disabled", ariaLabel: "ariaLabel", testId: "testId", ariaRequired: "ariaRequired", barWidth: "barWidth", canUnselect: "canUnselect", length: "length" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div\n  class=\"rating\"\n  (mouseleave)=\"onHover(-1)\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-required]=\"ariaRequired\"\n  [attr.data-testid]=\"testId\"\n>\n  @if (theme === 'block') {\n    @for (item of items; track item) {\n      <div\n        class=\"rating-item\"\n        [attr.theme]=\"applicationTheme\"\n        tabindex=\"0\"\n        (click)=\"select(item)\"\n        (keydown.enter)=\"select(item)\"\n        (mouseenter)=\"onHover(item)\"\n        [ngClass]=\"{ 'rating-item-selected': item < value, 'rating-item-hover': item < hoverIndex }\"\n        [ngStyle]=\"{ 'width.px': barWidth }\"\n        [attr.data-testid]=\"itemTestId(item)\"\n      ></div>\n    }\n  } @else {\n    <div class=\"star-container\" [attr.theme]=\"applicationTheme\">\n      @for (item of items; track item; let i = $index) {\n        <div\n          #star\n          class=\"star\"\n          tabindex=\"0\"\n          [tabIndex]=\"0\"\n          (mouseenter)=\"onHover(item)\"\n          (mouseleave)=\"onHover(-1)\"\n          [ngClass]=\"{\n            filled: value > i,\n            hover: item < hoverIndex && (value ? item >= value : true),\n            disabled,\n            'filled-half': i + 1 | halfStar: value,\n          }\"\n          (click)=\"select(item); star.blur()\"\n          (keydown.enter)=\"select(item); star.blur()\"\n          [attr.data-testid]=\"itemTestId(item)\"\n        ></div>\n      }\n    </div>\n  }\n</div>\n", styles: [".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}.rating{display:flex;align-content:center;justify-content:flex-start;align-items:center}.rating-item{width:35px;height:16px;border:1px solid #e0e0e0;border-left:0;cursor:pointer}.rating-item-hover{border:0;background-color:#b5ddd5}.rating-item-hover[theme=dark],.rating-item-hover[theme=light]{background-color:color-mix(in srgb,var(--ui-rating-color, #d410aa) 40%,#fff)}.rating-item-hover:not(:first-child){border-left:1px solid #ffffff}.rating-item:first-child{border-radius:4px 0 0 4px}.rating-item:first-child:not(.rating-item-selected):not(.rating-item-hover){border-left:1px solid #e0e0e0}.rating-item:last-child{border-radius:0 4px 4px 0}.rating-item:first-child:last-child{border-radius:4px}.rating-item-selected{border:0;background-color:#46a997}.rating-item-selected[theme=dark],.rating-item-selected[theme=light]{background-color:var(--ui-rating-color, #d410aa)}.rating-item-selected:not(:first-child){border-left:1px solid #ffffff}.rating .star-container{display:flex;flex-direction:row;min-height:24px}.rating .star-container .star{width:24px;height:24px;background:url(/icons/rating-icons/Star-outline.svg) no-repeat center;background-size:100%;margin-right:4px}.rating .star-container .star:last-child{margin-right:0}.rating .star-container .star:focus{outline:1px dashed #888888}.rating .star-container .star:hover,.rating .star-container .star.hover,.rating .star-container .star:focus{opacity:.5}.rating .star-container .star.filled-half{background-image:none;-webkit-mask:url(/icons/rating-icons/Star-half.svg) no-repeat center/100%!important;mask:url(/icons/rating-icons/Star-half.svg) no-repeat center/100%!important;background-color:var(--ui-rating-color, #d410aa)}.rating .star-container .star.disabled{pointer-events:none;background-image:url(/icons/rating-icons/Star-filled-disabled.svg)}.rating .star-container .star:active{opacity:1}.rating .star-container .star-filled,.rating .star-container[theme=dark] .star.filled,.rating .star-container[theme=light] .star.filled,.rating .star-container[theme=dark] .star:hover,.rating .star-container[theme=dark] .star.hover,.rating .star-container[theme=dark] .star:focus,.rating .star-container[theme=light] .star:hover,.rating .star-container[theme=light] .star.hover,.rating .star-container[theme=light] .star:focus,.rating .star-container .star:hover,.rating .star-container .star.hover,.rating .star-container .star:focus,.rating .star-container .star.filled,.rating .star-container .star:active{background-image:none;-webkit-mask:url(/icons/rating-icons/Star-filled.svg) no-repeat center/100%;mask:url(/icons/rating-icons/Star-filled.svg) no-repeat center/100%;background-color:var(--ui-rating-color, #d410aa)}.rating .star-container[theme=dark] .star,.rating .star-container[theme=light] .star{cursor:pointer;background:url(/icons/rebrand/Review-star-in-line.svg) no-repeat center}.rating .star-container[theme=dark] .star:hover,.rating .star-container[theme=dark] .star.hover,.rating .star-container[theme=dark] .star:focus,.rating .star-container[theme=light] .star:hover,.rating .star-container[theme=light] .star.hover,.rating .star-container[theme=light] .star:focus{opacity:.5}.rating .star-container[theme=dark] .star:focus,.rating .star-container[theme=light] .star:focus{outline-offset:4px}.rating .star-container[theme=dark] .star.filled-half,.rating .star-container[theme=light] .star.filled-half{background-image:none;-webkit-mask:url(/icons/rebrand/Review-half-star-filled.svg) no-repeat center/100%!important;mask:url(/icons/rebrand/Review-half-star-filled.svg) no-repeat center/100%!important;background-color:var(--ui-rating-color, #d410aa)}.rating .star-container[theme=dark] .star.disabled,.rating .star-container[theme=light] .star.disabled{background-image:url(/icons/rebrand/Review-star-filled-disabled.svg)}.rating .star-container[theme=dark] .star-filled,.rating .star-container[theme=dark] .star:hover,.rating .star-container[theme=dark] .star.hover,.rating .star-container[theme=dark] .star:focus,.rating .star-container[theme=dark] .star.filled,.rating .star-container[theme=dark] .star:active,.rating .star-container[theme=light] .star-filled,.rating .star-container[theme=light] .star:hover,.rating .star-container[theme=light] .star.hover,.rating .star-container[theme=light] .star:focus,.rating .star-container[theme=light] .star.filled,.rating .star-container[theme=light] .star:active{background-image:none;-webkit-mask:url(/icons/rebrand/Review-star-filled.svg) no-repeat center/100%;mask:url(/icons/rebrand/Review-star-filled.svg) no-repeat center/100%;background-color:var(--ui-rating-color, #d410aa)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: HalfStarPipe, name: "halfStar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: RatingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: RatingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-rating', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, NgStyle, HalfStarPipe], template: "<div\n  class=\"rating\"\n  (mouseleave)=\"onHover(-1)\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-required]=\"ariaRequired\"\n  [attr.data-testid]=\"testId\"\n>\n  @if (theme === 'block') {\n    @for (item of items; track item) {\n      <div\n        class=\"rating-item\"\n        [attr.theme]=\"applicationTheme\"\n        tabindex=\"0\"\n        (click)=\"select(item)\"\n        (keydown.enter)=\"select(item)\"\n        (mouseenter)=\"onHover(item)\"\n        [ngClass]=\"{ 'rating-item-selected': item < value, 'rating-item-hover': item < hoverIndex }\"\n        [ngStyle]=\"{ 'width.px': barWidth }\"\n        [attr.data-testid]=\"itemTestId(item)\"\n      ></div>\n    }\n  } @else {\n    <div class=\"star-container\" [attr.theme]=\"applicationTheme\">\n      @for (item of items; track item; let i = $index) {\n        <div\n          #star\n          class=\"star\"\n          tabindex=\"0\"\n          [tabIndex]=\"0\"\n          (mouseenter)=\"onHover(item)\"\n          (mouseleave)=\"onHover(-1)\"\n          [ngClass]=\"{\n            filled: value > i,\n            hover: item < hoverIndex && (value ? item >= value : true),\n            disabled,\n            'filled-half': i + 1 | halfStar: value,\n          }\"\n          (click)=\"select(item); star.blur()\"\n          (keydown.enter)=\"select(item); star.blur()\"\n          [attr.data-testid]=\"itemTestId(item)\"\n        ></div>\n      }\n    </div>\n  }\n</div>\n", styles: [".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}.rating{display:flex;align-content:center;justify-content:flex-start;align-items:center}.rating-item{width:35px;height:16px;border:1px solid #e0e0e0;border-left:0;cursor:pointer}.rating-item-hover{border:0;background-color:#b5ddd5}.rating-item-hover[theme=dark],.rating-item-hover[theme=light]{background-color:color-mix(in srgb,var(--ui-rating-color, #d410aa) 40%,#fff)}.rating-item-hover:not(:first-child){border-left:1px solid #ffffff}.rating-item:first-child{border-radius:4px 0 0 4px}.rating-item:first-child:not(.rating-item-selected):not(.rating-item-hover){border-left:1px solid #e0e0e0}.rating-item:last-child{border-radius:0 4px 4px 0}.rating-item:first-child:last-child{border-radius:4px}.rating-item-selected{border:0;background-color:#46a997}.rating-item-selected[theme=dark],.rating-item-selected[theme=light]{background-color:var(--ui-rating-color, #d410aa)}.rating-item-selected:not(:first-child){border-left:1px solid #ffffff}.rating .star-container{display:flex;flex-direction:row;min-height:24px}.rating .star-container .star{width:24px;height:24px;background:url(/icons/rating-icons/Star-outline.svg) no-repeat center;background-size:100%;margin-right:4px}.rating .star-container .star:last-child{margin-right:0}.rating .star-container .star:focus{outline:1px dashed #888888}.rating .star-container .star:hover,.rating .star-container .star.hover,.rating .star-container .star:focus{opacity:.5}.rating .star-container .star.filled-half{background-image:none;-webkit-mask:url(/icons/rating-icons/Star-half.svg) no-repeat center/100%!important;mask:url(/icons/rating-icons/Star-half.svg) no-repeat center/100%!important;background-color:var(--ui-rating-color, #d410aa)}.rating .star-container .star.disabled{pointer-events:none;background-image:url(/icons/rating-icons/Star-filled-disabled.svg)}.rating .star-container .star:active{opacity:1}.rating .star-container .star-filled,.rating .star-container[theme=dark] .star.filled,.rating .star-container[theme=light] .star.filled,.rating .star-container[theme=dark] .star:hover,.rating .star-container[theme=dark] .star.hover,.rating .star-container[theme=dark] .star:focus,.rating .star-container[theme=light] .star:hover,.rating .star-container[theme=light] .star.hover,.rating .star-container[theme=light] .star:focus,.rating .star-container .star:hover,.rating .star-container .star.hover,.rating .star-container .star:focus,.rating .star-container .star.filled,.rating .star-container .star:active{background-image:none;-webkit-mask:url(/icons/rating-icons/Star-filled.svg) no-repeat center/100%;mask:url(/icons/rating-icons/Star-filled.svg) no-repeat center/100%;background-color:var(--ui-rating-color, #d410aa)}.rating .star-container[theme=dark] .star,.rating .star-container[theme=light] .star{cursor:pointer;background:url(/icons/rebrand/Review-star-in-line.svg) no-repeat center}.rating .star-container[theme=dark] .star:hover,.rating .star-container[theme=dark] .star.hover,.rating .star-container[theme=dark] .star:focus,.rating .star-container[theme=light] .star:hover,.rating .star-container[theme=light] .star.hover,.rating .star-container[theme=light] .star:focus{opacity:.5}.rating .star-container[theme=dark] .star:focus,.rating .star-container[theme=light] .star:focus{outline-offset:4px}.rating .star-container[theme=dark] .star.filled-half,.rating .star-container[theme=light] .star.filled-half{background-image:none;-webkit-mask:url(/icons/rebrand/Review-half-star-filled.svg) no-repeat center/100%!important;mask:url(/icons/rebrand/Review-half-star-filled.svg) no-repeat center/100%!important;background-color:var(--ui-rating-color, #d410aa)}.rating .star-container[theme=dark] .star.disabled,.rating .star-container[theme=light] .star.disabled{background-image:url(/icons/rebrand/Review-star-filled-disabled.svg)}.rating .star-container[theme=dark] .star-filled,.rating .star-container[theme=dark] .star:hover,.rating .star-container[theme=dark] .star.hover,.rating .star-container[theme=dark] .star:focus,.rating .star-container[theme=dark] .star.filled,.rating .star-container[theme=dark] .star:active,.rating .star-container[theme=light] .star-filled,.rating .star-container[theme=light] .star:hover,.rating .star-container[theme=light] .star.hover,.rating .star-container[theme=light] .star:focus,.rating .star-container[theme=light] .star.filled,.rating .star-container[theme=light] .star:active{background-image:none;-webkit-mask:url(/icons/rebrand/Review-star-filled.svg) no-repeat center/100%;mask:url(/icons/rebrand/Review-star-filled.svg) no-repeat center/100%;background-color:var(--ui-rating-color, #d410aa)}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -131,11 +131,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             }] } });
 
 class RatingComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: RatingComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: RatingComponentModule, imports: [CommonModule, MatInputModule, RatingComponent, HalfStarPipe], exports: [RatingComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: RatingComponentModule, imports: [CommonModule, MatInputModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: RatingComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.23", ngImport: i0, type: RatingComponentModule, imports: [CommonModule, MatInputModule, RatingComponent, HalfStarPipe], exports: [RatingComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: RatingComponentModule, imports: [CommonModule, MatInputModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: RatingComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: RatingComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, MatInputModule, RatingComponent, HalfStarPipe],

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

@@ -1 +1 @@
-{"version":3,"file":"testgorilla-tgo-ui-components-rating.mjs","sources":["../../../components/rating/half-star.pipe.ts","../../../components/rating/rating.component.ts","../../../components/rating/rating.component.html","../../../components/rating/rating.component.module.ts","../../../components/rating/testgorilla-tgo-ui-components-rating.ts"],"sourcesContent":["import { Pipe, PipeTransform } from '@angular/core';\n\n@Pipe({ name: 'halfStar' })\nexport class HalfStarPipe implements PipeTransform {\n  /**\n   * @description Used to indicate whether display half-star icon.\n   * Returns true if the rounded value of the current element\n   * is equal to it's index, and value is not integer (e.g. index = 4, value = 3.5),\n   * @param index the index of the current element\n   * @param value the value of the current element\n   */\n  transform(index: number, value: number): boolean {\n    return Math.ceil(value) === index && !Number.isInteger(value);\n  }\n}\n","import { NgClass, NgStyle } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, Optional, Output } from '@angular/core';\n\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\n\nimport { HalfStarPipe } from './half-star.pipe';\n\nexport type RatingComponentTheme = 'stars' | 'block';\n\n@Component({\n  selector: 'ui-rating',\n  templateUrl: './rating.component.html',\n  styleUrls: ['./rating.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [NgClass, NgStyle, HalfStarPipe],\n})\nexport class RatingComponent {\n  private readonly MIN_LENGTH = 0;\n  private readonly DEFAULT_LENGTH = 5;\n  protected items: number[] = [];\n  protected hoverIndex: number;\n\n  /**\n   *\n   * Defines the application theme where accordion is used\n   *\n   * @type {ApplicationTheme}\n   * @memberof AccordionComponent\n   */\n  @Input() applicationTheme: ApplicationTheme = 'light';\n\n  /**\n   * The value representing the rating.\n   * @type {number}\n   * @memberof RatingComponent\n   */\n  @Input() value: number;\n\n  /**\n   * The theme of the rating component. Defaults \"block\".\n   * @type {RatingComponentTheme}\n   * @memberof RatingComponent\n   */\n  @Input() theme: RatingComponentTheme = 'block';\n\n  /**\n   * A flag indicating whether the rating component is disabled.\n   * @type {boolean}\n   * @memberof RatingComponent\n   */\n  @Input() disabled = false;\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 RatingComponent\n   */\n  @Input() ariaLabel: string;\n\n  @Input() testId: string | null = null;\n\n  itemTestId(item: number): string | null {\n    return this.testId ? `${this.testId}-${item + 1}` : null;\n  }\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 RatingComponent\n   */\n  @Input() ariaRequired = false;\n\n  /**\n   * The width of the rating bar.\n   * @type {number}\n   * @memberof RatingComponent\n   */\n  @Input() barWidth = 35;\n\n  /**\n   * A flag indicating whether the rating can be unselected by clicking on the same value.\n   * When false, clicking on the same value will not change the rating.\n   * @type {boolean}\n   * @memberof RatingComponent\n   */\n  @Input() canUnselect = true;\n\n  @Input() set length(length: number) {\n    this.items = Array(Math.max(length, this.MIN_LENGTH))\n      .fill(0)\n      .map((x, i) => i);\n  }\n\n  @Output() valueChange = new EventEmitter<number>();\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  protected select(index: number): void {\n    const newValue = index + 1;\n\n    // If canUnselect is false and we're clicking on the same value, don't change anything\n    if (!this.canUnselect && this.value === newValue) {\n      return;\n    }\n\n    this.value = this.value === newValue ? 0 : newValue;\n    this.valueChange.emit(this.value);\n  }\n\n  protected onHover(index: number): void {\n    this.hoverIndex = index + 1;\n  }\n}\n","<div\n  class=\"rating\"\n  (mouseleave)=\"onHover(-1)\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-required]=\"ariaRequired\"\n  [attr.data-testid]=\"testId\"\n>\n  @if (theme === 'block') {\n    @for (item of items; track item) {\n      <div\n        class=\"rating-item\"\n        [attr.theme]=\"applicationTheme\"\n        tabindex=\"0\"\n        (click)=\"select(item)\"\n        (keydown.enter)=\"select(item)\"\n        (mouseenter)=\"onHover(item)\"\n        [ngClass]=\"{ 'rating-item-selected': item < value, 'rating-item-hover': item < hoverIndex }\"\n        [ngStyle]=\"{ 'width.px': barWidth }\"\n        [attr.data-testid]=\"itemTestId(item)\"\n      ></div>\n    }\n  } @else {\n    <div class=\"star-container\" [attr.theme]=\"applicationTheme\">\n      @for (item of items; track item; let i = $index) {\n        <div\n          #star\n          class=\"star\"\n          tabindex=\"0\"\n          [tabIndex]=\"0\"\n          (mouseenter)=\"onHover(item)\"\n          (mouseleave)=\"onHover(-1)\"\n          [ngClass]=\"{\n            filled: value > i,\n            hover: item < hoverIndex && (value ? item >= value : true),\n            disabled,\n            'filled-half': i + 1 | halfStar: value,\n          }\"\n          (click)=\"select(item); star.blur()\"\n          (keydown.enter)=\"select(item); star.blur()\"\n          [attr.data-testid]=\"itemTestId(item)\"\n        ></div>\n      }\n    </div>\n  }\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { MatInputModule } from '@angular/material/input';\n\nimport { HalfStarPipe } from './half-star.pipe';\nimport { RatingComponent } from './rating.component';\n\n@NgModule({\n  imports: [CommonModule, MatInputModule, RatingComponent, HalfStarPipe],\n  exports: [RatingComponent],\n})\nexport class RatingComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"testgorilla-tgo-ui-components-rating.mjs","sources":["../../../components/rating/half-star.pipe.ts","../../../components/rating/rating.component.ts","../../../components/rating/rating.component.html","../../../components/rating/rating.component.module.ts","../../../components/rating/testgorilla-tgo-ui-components-rating.ts"],"sourcesContent":["import { Pipe, PipeTransform } from '@angular/core';\n\n@Pipe({ name: 'halfStar' })\nexport class HalfStarPipe implements PipeTransform {\n  /**\n   * @description Used to indicate whether display half-star icon.\n   * Returns true if the rounded value of the current element\n   * is equal to it's index, and value is not integer (e.g. index = 4, value = 3.5),\n   * @param index the index of the current element\n   * @param value the value of the current element\n   */\n  transform(index: number, value: number): boolean {\n    return Math.ceil(value) === index && !Number.isInteger(value);\n  }\n}\n","import { NgClass, NgStyle } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, Optional, Output } from '@angular/core';\n\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\n\nimport { HalfStarPipe } from './half-star.pipe';\n\nexport type RatingComponentTheme = 'stars' | 'block';\n\n@Component({\n  selector: 'ui-rating',\n  templateUrl: './rating.component.html',\n  styleUrls: ['./rating.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [NgClass, NgStyle, HalfStarPipe],\n})\nexport class RatingComponent {\n  private readonly MIN_LENGTH = 0;\n  private readonly DEFAULT_LENGTH = 5;\n  protected items: number[] = [];\n  protected hoverIndex: number;\n\n  /**\n   *\n   * Defines the application theme where accordion is used\n   *\n   * @type {ApplicationTheme}\n   * @memberof AccordionComponent\n   */\n  @Input() applicationTheme: ApplicationTheme = 'light';\n\n  /**\n   * The value representing the rating.\n   * @type {number}\n   * @memberof RatingComponent\n   */\n  @Input() value: number;\n\n  /**\n   * The theme of the rating component. Defaults \"block\".\n   * @type {RatingComponentTheme}\n   * @memberof RatingComponent\n   */\n  @Input() theme: RatingComponentTheme = 'block';\n\n  /**\n   * A flag indicating whether the rating component is disabled.\n   * @type {boolean}\n   * @memberof RatingComponent\n   */\n  @Input() disabled = false;\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 RatingComponent\n   */\n  @Input() ariaLabel: string;\n\n  @Input() testId: string | null = null;\n\n  itemTestId(item: number): string | null {\n    return this.testId ? `${this.testId}-${item + 1}` : null;\n  }\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 RatingComponent\n   */\n  @Input() ariaRequired = false;\n\n  /**\n   * The width of the rating bar.\n   * @type {number}\n   * @memberof RatingComponent\n   */\n  @Input() barWidth = 35;\n\n  /**\n   * A flag indicating whether the rating can be unselected by clicking on the same value.\n   * When false, clicking on the same value will not change the rating.\n   * @type {boolean}\n   * @memberof RatingComponent\n   */\n  @Input() canUnselect = true;\n\n  @Input() set length(length: number) {\n    this.items = Array(Math.max(length, this.MIN_LENGTH))\n      .fill(0)\n      .map((x, i) => i);\n  }\n\n  @Output() valueChange = new EventEmitter<number>();\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  protected select(index: number): void {\n    const newValue = index + 1;\n\n    // If canUnselect is false and we're clicking on the same value, don't change anything\n    if (!this.canUnselect && this.value === newValue) {\n      return;\n    }\n\n    this.value = this.value === newValue ? 0 : newValue;\n    this.valueChange.emit(this.value);\n  }\n\n  protected onHover(index: number): void {\n    this.hoverIndex = index + 1;\n  }\n}\n","<div\n  class=\"rating\"\n  (mouseleave)=\"onHover(-1)\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-required]=\"ariaRequired\"\n  [attr.data-testid]=\"testId\"\n>\n  @if (theme === 'block') {\n    @for (item of items; track item) {\n      <div\n        class=\"rating-item\"\n        [attr.theme]=\"applicationTheme\"\n        tabindex=\"0\"\n        (click)=\"select(item)\"\n        (keydown.enter)=\"select(item)\"\n        (mouseenter)=\"onHover(item)\"\n        [ngClass]=\"{ 'rating-item-selected': item < value, 'rating-item-hover': item < hoverIndex }\"\n        [ngStyle]=\"{ 'width.px': barWidth }\"\n        [attr.data-testid]=\"itemTestId(item)\"\n      ></div>\n    }\n  } @else {\n    <div class=\"star-container\" [attr.theme]=\"applicationTheme\">\n      @for (item of items; track item; let i = $index) {\n        <div\n          #star\n          class=\"star\"\n          tabindex=\"0\"\n          [tabIndex]=\"0\"\n          (mouseenter)=\"onHover(item)\"\n          (mouseleave)=\"onHover(-1)\"\n          [ngClass]=\"{\n            filled: value > i,\n            hover: item < hoverIndex && (value ? item >= value : true),\n            disabled,\n            'filled-half': i + 1 | halfStar: value,\n          }\"\n          (click)=\"select(item); star.blur()\"\n          (keydown.enter)=\"select(item); star.blur()\"\n          [attr.data-testid]=\"itemTestId(item)\"\n        ></div>\n      }\n    </div>\n  }\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { MatInputModule } from '@angular/material/input';\n\nimport { HalfStarPipe } from './half-star.pipe';\nimport { RatingComponent } from './rating.component';\n\n@NgModule({\n  imports: [CommonModule, MatInputModule, RatingComponent, HalfStarPipe],\n  exports: [RatingComponent],\n})\nexport class RatingComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -50,10 +50,10 @@ class ScaleTableComponent {
             return [...items];
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScaleTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ScaleTableComponent, isStandalone: true, selector: "ui-scale-table", inputs: { applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null }, scaleItems: { classPropertyName: "scaleItems", publicName: "scaleItems", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, hideBetterExperience: { classPropertyName: "hideBetterExperience", publicName: "hideBetterExperience", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scaleItems: "scaleItemsChange", hideBetterExperience: "hideBetterExperienceChange", scaleItemChange: "scaleItemChange" }, host: { properties: { "style.--scale-count": "scaleCount()" } }, ngImport: i0, template: "<div class=\"scale-table\">\n  <div class=\"better-experience\" [class.hide]=\"hideBetterExperience()\">\n    <ui-icon [size]=\"'24'\" [name]=\"'Device-rotate-in-line'\" class=\"mobile-landscape-icon\" />\n    <p>{{ 'SCALE_TABLE.ROTATE_DEVICE' | uiTranslate | async }}</p>\n    <ui-button\n      iconName=\"Close\"\n      variant=\"icon-button\"\n      size=\"small\"\n      [justIcon]=\"true\"\n      [tooltip]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n      (click)=\"hideBetterExperience.set(true)\"\n    />\n  </div>\n  <!-- Header -->\n  <div tabindex=\"0\" [attr.aria-label]=\"'scale header'\" class=\"scale-table-header\">\n    @for (label of labels(); track $index) {\n      <div\n        tabindex=\"0\"\n        role=\"heading\"\n        [attr.aria-level]=\"3\"\n        [attr.aria-label]=\"label + ' as ' + ($index + 1)\"\n        class=\"scale-size\"\n      >\n        {{ label }}\n      </div>\n    }\n  </div>\n  <!-- Scale Items -->\n  @for (scale of scaleItems(); track scale.text) {\n    <div class=\"scale-table-row\" tabindex=\"0\" role=\"radiogroup\" [attr.aria-label]=\"scale.text\">\n      <div class=\"scale-text\">{{ scale.text }}</div>\n      <ui-scale\n        [selectedIndex]=\"scale.value ?? null\"\n        [length]=\"scale.length ?? labels().length\"\n        [applicationTheme]=\"applicationTheme()\"\n        (selectedIndexChange)=\"select($index, $event)\"\n      />\n    </div>\n  }\n</div>\n", styles: [".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}:host{font:\"ModernGothic\",serif;position:relative;display:flex;overflow:auto;align-items:start}.scale-table{display:flex;flex-direction:column;width:100%}.scale-table-header{display:flex;flex-direction:row;align-items:center;justify-content:end;min-width:fit-content;position:sticky;top:0;border-bottom:1px solid #d3d3d3;background-color:#fff;align-items:baseline;box-shadow:0 4px 16px #24242414;padding-inline-start:16px;padding-inline-end:8px;padding-top:4px}.scale-table-row{display:flex;justify-content:space-between;gap:8px;align-items:center;padding-top:8px;padding-bottom:8px;padding-inline-start:16px;padding-inline-end:8px;min-width:fit-content;border-bottom:1px solid #d3d3d3}.scale-size{width:80px;text-align:center;flex-shrink:0;color:#242424;font-size:12px;font-family:ModernGothic;align-self:stretch;padding:4px}ui-scale{width:calc(var(--scale-count, 5) * 80px);flex-shrink:0}.scale-text{font-weight:400;font-size:16px;line-height:24px;letter-spacing:0%;vertical-align:middle;text-align:justify;font-family:ModernGothic;max-width:800px}.border-bottom{border-bottom:1px solid #d3d3d3}.better-experience{display:none;flex-direction:row;align-items:center;gap:8px;border-radius:10px;padding:12px 16px;background:#d9e8ff;justify-content:center}.better-experience p{flex:1 1 0%;font-size:14px;line-height:22px;font-weight:400;font-size:16px;line-height:24px;letter-spacing:0%;vertical-align:middle;margin:0}.background-white{background-color:#fff}@media(max-width:960px){.scale-table-header{padding-left:0;padding-right:0;justify-content:start}.scale-table-row{padding-left:0;padding-right:0;flex-direction:column;align-items:start}.scale-size{width:calc(100% / var(--scale-count));min-width:40px;padding:0}ui-scale{width:100%;min-width:calc(var(--scale-count) * 40px);align-self:center}}@media screen and (min-width:1280px){.scale-size{width:104px;min-width:104px}ui-scale{min-width:calc(var(--scale-count) * 104px);align-self:center}}@media screen and (orientation:portrait)and (max-width:560px){.better-experience{display:flex}}.hide{display:none}\n"], dependencies: [{ kind: "ngmodule", type: ScaleComponentModule }, { kind: "component", type: i1.ScaleComponent, selector: "ui-scale", inputs: ["selectedIndex", "length", "applicationTheme", "companyColor", "testId", "ariaLabel"], outputs: ["selectedIndexChange"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i2.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "ngmodule", type: ButtonComponentModule }, { kind: "component", type: i3.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "trailingIconName", "trailingIconFilled", "disabled", "loading", "loadingWithLabel", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaExpanded", "ariaControls", "ariaPressed", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled", "testId"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ScaleTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: ScaleTableComponent, isStandalone: true, selector: "ui-scale-table", inputs: { applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null }, scaleItems: { classPropertyName: "scaleItems", publicName: "scaleItems", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, hideBetterExperience: { classPropertyName: "hideBetterExperience", publicName: "hideBetterExperience", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scaleItems: "scaleItemsChange", hideBetterExperience: "hideBetterExperienceChange", scaleItemChange: "scaleItemChange" }, host: { properties: { "style.--scale-count": "scaleCount()" } }, ngImport: i0, template: "<div class=\"scale-table\">\n  <div class=\"better-experience\" [class.hide]=\"hideBetterExperience()\">\n    <ui-icon [size]=\"'24'\" [name]=\"'Device-rotate-in-line'\" class=\"mobile-landscape-icon\" />\n    <p>{{ 'SCALE_TABLE.ROTATE_DEVICE' | uiTranslate | async }}</p>\n    <ui-button\n      iconName=\"Close\"\n      variant=\"icon-button\"\n      size=\"small\"\n      [justIcon]=\"true\"\n      [tooltip]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n      (click)=\"hideBetterExperience.set(true)\"\n    />\n  </div>\n  <!-- Header -->\n  <div tabindex=\"0\" [attr.aria-label]=\"'scale header'\" class=\"scale-table-header\">\n    @for (label of labels(); track $index) {\n      <div\n        tabindex=\"0\"\n        role=\"heading\"\n        [attr.aria-level]=\"3\"\n        [attr.aria-label]=\"label + ' as ' + ($index + 1)\"\n        class=\"scale-size\"\n      >\n        {{ label }}\n      </div>\n    }\n  </div>\n  <!-- Scale Items -->\n  @for (scale of scaleItems(); track scale.text) {\n    <div class=\"scale-table-row\" tabindex=\"0\" role=\"radiogroup\" [attr.aria-label]=\"scale.text\">\n      <div class=\"scale-text\">{{ scale.text }}</div>\n      <ui-scale\n        [selectedIndex]=\"scale.value ?? null\"\n        [length]=\"scale.length ?? labels().length\"\n        [applicationTheme]=\"applicationTheme()\"\n        (selectedIndexChange)=\"select($index, $event)\"\n      />\n    </div>\n  }\n</div>\n", styles: [".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}:host{font:\"ModernGothic\",serif;position:relative;display:flex;overflow:auto;align-items:start}.scale-table{display:flex;flex-direction:column;width:100%}.scale-table-header{display:flex;flex-direction:row;align-items:center;justify-content:end;min-width:fit-content;position:sticky;top:0;border-bottom:1px solid #d3d3d3;background-color:#fff;align-items:baseline;box-shadow:0 4px 16px #24242414;padding-inline-start:16px;padding-inline-end:8px;padding-top:4px}.scale-table-row{display:flex;justify-content:space-between;gap:8px;align-items:center;padding-top:8px;padding-bottom:8px;padding-inline-start:16px;padding-inline-end:8px;min-width:fit-content;border-bottom:1px solid #d3d3d3}.scale-size{width:80px;text-align:center;flex-shrink:0;color:#242424;font-size:12px;font-family:ModernGothic;align-self:stretch;padding:4px}ui-scale{width:calc(var(--scale-count, 5) * 80px);flex-shrink:0}.scale-text{font-weight:400;font-size:16px;line-height:24px;letter-spacing:0%;vertical-align:middle;text-align:justify;font-family:ModernGothic;max-width:800px}.border-bottom{border-bottom:1px solid #d3d3d3}.better-experience{display:none;flex-direction:row;align-items:center;gap:8px;border-radius:10px;padding:12px 16px;background:#d9e8ff;justify-content:center}.better-experience p{flex:1 1 0%;font-size:14px;line-height:22px;font-weight:400;font-size:16px;line-height:24px;letter-spacing:0%;vertical-align:middle;margin:0}.background-white{background-color:#fff}@media(max-width:960px){.scale-table-header{padding-left:0;padding-right:0;justify-content:start}.scale-table-row{padding-left:0;padding-right:0;flex-direction:column;align-items:start}.scale-size{width:calc(100% / var(--scale-count));min-width:40px;padding:0}ui-scale{width:100%;min-width:calc(var(--scale-count) * 40px);align-self:center}}@media screen and (min-width:1280px){.scale-size{width:104px;min-width:104px}ui-scale{min-width:calc(var(--scale-count) * 104px);align-self:center}}@media screen and (orientation:portrait)and (max-width:560px){.better-experience{display:flex}}.hide{display:none}\n"], dependencies: [{ kind: "ngmodule", type: ScaleComponentModule }, { kind: "component", type: i1.ScaleComponent, selector: "ui-scale", inputs: ["selectedIndex", "length", "applicationTheme", "companyColor", "testId", "ariaLabel"], outputs: ["selectedIndexChange"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i2.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "ngmodule", type: ButtonComponentModule }, { kind: "component", type: i3.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "trailingIconName", "trailingIconFilled", "disabled", "loading", "loadingWithLabel", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaExpanded", "ariaControls", "ariaPressed", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled", "testId"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScaleTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ScaleTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-scale-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [UiTranslatePipe, ScaleComponentModule, AsyncPipe, IconComponentModule, ButtonComponentModule], host: {
                         '[style.--scale-count]': 'scaleCount()',

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

@@ -1 +1 @@
-{"version":3,"file":"testgorilla-tgo-ui-components-scale-table.mjs","sources":["../../../components/scale-table/scale-table.component.ts","../../../components/scale-table/scale-table.component.html","../../../components/scale-table/testgorilla-tgo-ui-components-scale-table.ts"],"sourcesContent":["import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, input, model, output } from '@angular/core';\n\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { ApplicationTheme, UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { ScaleComponentModule } from '@testgorilla/tgo-ui/components/scale';\n\nimport { ScaleItem } from './scale-table.model';\n\n@Component({\n  selector: 'ui-scale-table',\n  templateUrl: './scale-table.component.html',\n  styleUrls: ['./scale-table.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [UiTranslatePipe, ScaleComponentModule, AsyncPipe, IconComponentModule, ButtonComponentModule],\n  host: {\n    '[style.--scale-count]': 'scaleCount()',\n  },\n})\nexport class ScaleTableComponent {\n  /**\n   *\n   * Defines the application theme\n   *\n   * @type {ApplicationTheme}\n   * @memberof ScaleTableComponent\n   */\n  public applicationTheme = input<ApplicationTheme>('light');\n\n  /**\n   *\n   * Defines items with their text and it's values\n   *\n   * @type {ScaleTable}\n   * @memberof ScaleTableComponent\n   */\n  public scaleItems = model.required<ScaleItem[]>();\n\n  /**\n   *\n   * Defines description of scales\n   *\n   * @type {string[]}\n   * @memberof ScaleTableComponent\n   */\n  public labels = input.required<string[]>();\n  public hideBetterExperience = model(false);\n  public scaleItemChange = output<{\n    item: ScaleItem;\n    label: string;\n  }>();\n  scaleCount = computed(() => this.labels().length);\n\n  protected readonly translationContext = 'SCALE_TABLE.';\n\n  public select(scaleItemIndex: number, scaleIndex: number): void {\n    this.scaleItems.update(items => {\n      items[scaleItemIndex].value = scaleIndex;\n      this.scaleItemChange.emit({\n        item: items[scaleItemIndex],\n        label: this.labels()[scaleIndex],\n      });\n      return [...items];\n    });\n  }\n}\n","<div class=\"scale-table\">\n  <div class=\"better-experience\" [class.hide]=\"hideBetterExperience()\">\n    <ui-icon [size]=\"'24'\" [name]=\"'Device-rotate-in-line'\" class=\"mobile-landscape-icon\" />\n    <p>{{ 'SCALE_TABLE.ROTATE_DEVICE' | uiTranslate | async }}</p>\n    <ui-button\n      iconName=\"Close\"\n      variant=\"icon-button\"\n      size=\"small\"\n      [justIcon]=\"true\"\n      [tooltip]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n      (click)=\"hideBetterExperience.set(true)\"\n    />\n  </div>\n  <!-- Header -->\n  <div tabindex=\"0\" [attr.aria-label]=\"'scale header'\" class=\"scale-table-header\">\n    @for (label of labels(); track $index) {\n      <div\n        tabindex=\"0\"\n        role=\"heading\"\n        [attr.aria-level]=\"3\"\n        [attr.aria-label]=\"label + ' as ' + ($index + 1)\"\n        class=\"scale-size\"\n      >\n        {{ label }}\n      </div>\n    }\n  </div>\n  <!-- Scale Items -->\n  @for (scale of scaleItems(); track scale.text) {\n    <div class=\"scale-table-row\" tabindex=\"0\" role=\"radiogroup\" [attr.aria-label]=\"scale.text\">\n      <div class=\"scale-text\">{{ scale.text }}</div>\n      <ui-scale\n        [selectedIndex]=\"scale.value ?? null\"\n        [length]=\"scale.length ?? labels().length\"\n        [applicationTheme]=\"applicationTheme()\"\n        (selectedIndexChange)=\"select($index, $event)\"\n      />\n    </div>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;MAoBa,mBAAmB,CAAA;AAVhC,IAAA,WAAA,GAAA;AAWE;;;;;;AAMG;AACI,QAAA,IAAA,CAAA,gBAAgB,GAAG,KAAK,CAAmB,OAAO,uFAAC;AAE1D;;;;;;AAMG;AACI,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAC,QAAQ,gFAAe;AAEjD;;;;;;AAMG;AACI,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK,CAAC,QAAQ,4EAAY;AACnC,QAAA,IAAA,CAAA,oBAAoB,GAAG,KAAK,CAAC,KAAK,2FAAC;QACnC,IAAA,CAAA,eAAe,GAAG,MAAM,EAG3B;AACJ,QAAA,IAAA,CAAA,UAAU,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,MAAM,iFAAC;QAE9B,IAAA,CAAA,kBAAkB,GAAG,cAAc;AAYvD,IAAA;IAVQ,MAAM,CAAC,cAAsB,EAAE,UAAkB,EAAA;AACtD,QAAA,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,IAAG;AAC7B,YAAA,KAAK,CAAC,cAAc,CAAC,CAAC,KAAK,GAAG,UAAU;AACxC,YAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;AACxB,gBAAA,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC;AAC3B,gBAAA,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,UAAU,CAAC;AACjC,aAAA,CAAC;AACF,YAAA,OAAO,CAAC,GAAG,KAAK,CAAC;AACnB,QAAA,CAAC,CAAC;IACJ;+GA7CW,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAnB,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,oBAAA,EAAA,EAAA,iBAAA,EAAA,sBAAA,EAAA,UAAA,EAAA,sBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,4BAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,qBAAA,EAAA,cAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECpBhC,s5CAwCA,EAAA,MAAA,EAAA,CAAA,ooIAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDzB6B,oBAAoB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,cAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,cAAA,EAAA,QAAA,EAAA,WAAA,CAAA,EAAA,OAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAa,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,OAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,iBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,qBAAqB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,SAAA,EAAA,OAAA,EAAA,cAAA,EAAA,UAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,UAAA,EAAA,SAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,KAAA,EAAA,WAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,MAAA,EAAA,cAAA,EAAA,mBAAA,EAAA,kBAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,cAAA,EAAA,aAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,YAAA,EAAA,QAAA,CAAA,EAAA,OAAA,EAAA,CAAA,kBAAA,EAAA,kBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAA5F,eAAe,EAAA,IAAA,EAAA,aAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAwB,SAAS,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAK/C,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAV/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,mBAGT,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,eAAe,EAAE,oBAAoB,EAAE,SAAS,EAAE,mBAAmB,EAAE,qBAAqB,CAAC,EAAA,IAAA,EACjG;AACJ,wBAAA,uBAAuB,EAAE,cAAc;AACxC,qBAAA,EAAA,QAAA,EAAA,s5CAAA,EAAA,MAAA,EAAA,CAAA,ooIAAA,CAAA,EAAA;;;AElBH;;AAEG;;;;"}
+{"version":3,"file":"testgorilla-tgo-ui-components-scale-table.mjs","sources":["../../../components/scale-table/scale-table.component.ts","../../../components/scale-table/scale-table.component.html","../../../components/scale-table/testgorilla-tgo-ui-components-scale-table.ts"],"sourcesContent":["import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, input, model, output } from '@angular/core';\n\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { ApplicationTheme, UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { ScaleComponentModule } from '@testgorilla/tgo-ui/components/scale';\n\nimport { ScaleItem } from './scale-table.model';\n\n@Component({\n  selector: 'ui-scale-table',\n  templateUrl: './scale-table.component.html',\n  styleUrls: ['./scale-table.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [UiTranslatePipe, ScaleComponentModule, AsyncPipe, IconComponentModule, ButtonComponentModule],\n  host: {\n    '[style.--scale-count]': 'scaleCount()',\n  },\n})\nexport class ScaleTableComponent {\n  /**\n   *\n   * Defines the application theme\n   *\n   * @type {ApplicationTheme}\n   * @memberof ScaleTableComponent\n   */\n  public applicationTheme = input<ApplicationTheme>('light');\n\n  /**\n   *\n   * Defines items with their text and it's values\n   *\n   * @type {ScaleTable}\n   * @memberof ScaleTableComponent\n   */\n  public scaleItems = model.required<ScaleItem[]>();\n\n  /**\n   *\n   * Defines description of scales\n   *\n   * @type {string[]}\n   * @memberof ScaleTableComponent\n   */\n  public labels = input.required<string[]>();\n  public hideBetterExperience = model(false);\n  public scaleItemChange = output<{\n    item: ScaleItem;\n    label: string;\n  }>();\n  scaleCount = computed(() => this.labels().length);\n\n  protected readonly translationContext = 'SCALE_TABLE.';\n\n  public select(scaleItemIndex: number, scaleIndex: number): void {\n    this.scaleItems.update(items => {\n      items[scaleItemIndex].value = scaleIndex;\n      this.scaleItemChange.emit({\n        item: items[scaleItemIndex],\n        label: this.labels()[scaleIndex],\n      });\n      return [...items];\n    });\n  }\n}\n","<div class=\"scale-table\">\n  <div class=\"better-experience\" [class.hide]=\"hideBetterExperience()\">\n    <ui-icon [size]=\"'24'\" [name]=\"'Device-rotate-in-line'\" class=\"mobile-landscape-icon\" />\n    <p>{{ 'SCALE_TABLE.ROTATE_DEVICE' | uiTranslate | async }}</p>\n    <ui-button\n      iconName=\"Close\"\n      variant=\"icon-button\"\n      size=\"small\"\n      [justIcon]=\"true\"\n      [tooltip]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n      (click)=\"hideBetterExperience.set(true)\"\n    />\n  </div>\n  <!-- Header -->\n  <div tabindex=\"0\" [attr.aria-label]=\"'scale header'\" class=\"scale-table-header\">\n    @for (label of labels(); track $index) {\n      <div\n        tabindex=\"0\"\n        role=\"heading\"\n        [attr.aria-level]=\"3\"\n        [attr.aria-label]=\"label + ' as ' + ($index + 1)\"\n        class=\"scale-size\"\n      >\n        {{ label }}\n      </div>\n    }\n  </div>\n  <!-- Scale Items -->\n  @for (scale of scaleItems(); track scale.text) {\n    <div class=\"scale-table-row\" tabindex=\"0\" role=\"radiogroup\" [attr.aria-label]=\"scale.text\">\n      <div class=\"scale-text\">{{ scale.text }}</div>\n      <ui-scale\n        [selectedIndex]=\"scale.value ?? null\"\n        [length]=\"scale.length ?? labels().length\"\n        [applicationTheme]=\"applicationTheme()\"\n        (selectedIndexChange)=\"select($index, $event)\"\n      />\n    </div>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -112,10 +112,10 @@ class ScaleComponent {
             this.select(0);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScaleComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ScaleComponent, isStandalone: true, selector: "ui-scale", inputs: { selectedIndex: "selectedIndex", length: "length", applicationTheme: "applicationTheme", companyColor: "companyColor", testId: "testId", ariaLabel: "ariaLabel" }, outputs: { selectedIndexChange: "selectedIndexChange" }, viewQueries: [{ propertyName: "scaleItems", predicate: ["scaleItem"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<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", styles: [".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}.scale{display:flex;align-content:center;justify-content:flex-start;align-items:center;width:100%}.scale-item{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;width:calc(100% / var(--scale-count));min-width:24px;height:48px;border:1px solid #919191;border-left:0;cursor:pointer;font-size:16px;font-weight:400;font-family:ModernGothic,serif;background-color:#fff}.scale-item:hover:not(.scale-item-selected){background-color:var(--hover-color)}.scale-item:first-child{border-radius:10px 0 0 10px;border-left:1px solid #919191}.scale-item:last-child{border-radius:0 10px 10px 0}.scale-item-selected{background-color:var(--selected-color);color:#fff;font-weight:700}@keyframes focus-ring-animation{0%{box-shadow:0 0 0 4px #242424}to{box-shadow:0 0 0 2px #242424}}.scale-item.scale-item-focus-prev{border-right:none}.scale-item:focus-visible{outline:none;border-radius:8px;border:2px solid #ffffff;box-shadow:0 0 0 2px #242424;z-index:1;animation:focus-ring-animation .4s forwards}.scale-classic .scale-item{border-color:#e0e0e0;font-family:Open Sans,serif}.scale-classic .scale-item:first-child{border-radius:4px 0 0 4px;border-left:1px solid #e0e0e0}.scale-classic .scale-item:last-child{border-radius:0 4px 4px 0}.scale-classic .scale-item:not(.scale-item-selected){color:#242424}.scale-classic .scale-item:hover:not(.scale-item-selected){background-color:#b5ddd5}.scale-classic .scale-item-selected{background-color:#46a997}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ScaleComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: ScaleComponent, isStandalone: true, selector: "ui-scale", inputs: { selectedIndex: "selectedIndex", length: "length", applicationTheme: "applicationTheme", companyColor: "companyColor", testId: "testId", ariaLabel: "ariaLabel" }, outputs: { selectedIndexChange: "selectedIndexChange" }, viewQueries: [{ propertyName: "scaleItems", predicate: ["scaleItem"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<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", styles: [".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}.scale{display:flex;align-content:center;justify-content:flex-start;align-items:center;width:100%}.scale-item{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;width:calc(100% / var(--scale-count));min-width:24px;height:48px;border:1px solid #919191;border-left:0;cursor:pointer;font-size:16px;font-weight:400;font-family:ModernGothic,serif;background-color:#fff}.scale-item:hover:not(.scale-item-selected){background-color:var(--hover-color)}.scale-item:first-child{border-radius:10px 0 0 10px;border-left:1px solid #919191}.scale-item:last-child{border-radius:0 10px 10px 0}.scale-item-selected{background-color:var(--selected-color);color:#fff;font-weight:700}@keyframes focus-ring-animation{0%{box-shadow:0 0 0 4px #242424}to{box-shadow:0 0 0 2px #242424}}.scale-item.scale-item-focus-prev{border-right:none}.scale-item:focus-visible{outline:none;border-radius:8px;border:2px solid #ffffff;box-shadow:0 0 0 2px #242424;z-index:1;animation:focus-ring-animation .4s forwards}.scale-classic .scale-item{border-color:#e0e0e0;font-family:Open Sans,serif}.scale-classic .scale-item:first-child{border-radius:4px 0 0 4px;border-left:1px solid #e0e0e0}.scale-classic .scale-item:last-child{border-radius:0 4px 4px 0}.scale-classic .scale-item:not(.scale-item-selected){color:#242424}.scale-classic .scale-item:hover:not(.scale-item-selected){background-color:#b5ddd5}.scale-classic .scale-item-selected{background-color:#46a997}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScaleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ScaleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-scale', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgStyle, NgClass], template: "<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", styles: [".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}.scale{display:flex;align-content:center;justify-content:flex-start;align-items:center;width:100%}.scale-item{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;width:calc(100% / var(--scale-count));min-width:24px;height:48px;border:1px solid #919191;border-left:0;cursor:pointer;font-size:16px;font-weight:400;font-family:ModernGothic,serif;background-color:#fff}.scale-item:hover:not(.scale-item-selected){background-color:var(--hover-color)}.scale-item:first-child{border-radius:10px 0 0 10px;border-left:1px solid #919191}.scale-item:last-child{border-radius:0 10px 10px 0}.scale-item-selected{background-color:var(--selected-color);color:#fff;font-weight:700}@keyframes focus-ring-animation{0%{box-shadow:0 0 0 4px #242424}to{box-shadow:0 0 0 2px #242424}}.scale-item.scale-item-focus-prev{border-right:none}.scale-item:focus-visible{outline:none;border-radius:8px;border:2px solid #ffffff;box-shadow:0 0 0 2px #242424;z-index:1;animation:focus-ring-animation .4s forwards}.scale-classic .scale-item{border-color:#e0e0e0;font-family:Open Sans,serif}.scale-classic .scale-item:first-child{border-radius:4px 0 0 4px;border-left:1px solid #e0e0e0}.scale-classic .scale-item:last-child{border-radius:0 4px 4px 0}.scale-classic .scale-item:not(.scale-item-selected){color:#242424}.scale-classic .scale-item:hover:not(.scale-item-selected){background-color:#b5ddd5}.scale-classic .scale-item-selected{background-color:#46a997}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -143,11 +143,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             }] } });
 
 class ScaleComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScaleComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: ScaleComponentModule, imports: [CommonModule, ScaleComponent], exports: [ScaleComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScaleComponentModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ScaleComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.23", ngImport: i0, type: ScaleComponentModule, imports: [CommonModule, ScaleComponent], exports: [ScaleComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ScaleComponentModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ScaleComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ScaleComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ScaleComponent],

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

@@ -1 +1 @@
-{"version":3,"file":"testgorilla-tgo-ui-components-scale.mjs","sources":["../../../components/scale/scale.component.ts","../../../components/scale/scale.component.html","../../../components/scale/scale.component.module.ts","../../../components/scale/testgorilla-tgo-ui-components-scale.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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MA2Ba,cAAc,CAAA;AAczB;;;;AAIG;IACH,IAAa,MAAM,CAAC,MAAc,EAAA;AAChC,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC;aACjD,IAAI,CAAC,CAAC;aACN,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IACrB;AAwBA,IAAA,UAAU,CAAC,IAAY,EAAA;AACrB,QAAA,OAAO,IAAI,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAA,CAAA,EAAI,IAAI,GAAG,CAAC,CAAA,CAAE,GAAG,IAAI;IAC1D;AAMA,IAAA,WAAA,CAC6E,eAAiC,EAAA;QAAjC,IAAA,CAAA,eAAe,GAAf,eAAe;QAvD3E,IAAA,CAAA,UAAU,GAAG,CAAC;QACd,IAAA,CAAA,cAAc,GAAG,CAAC;QACzB,IAAA,CAAA,KAAK,GAAa,EAAE;AAI9B;;;;AAIG;QACM,IAAA,CAAA,aAAa,GAAkB,IAAI;AAa5C;;;;;;AAMG;QACM,IAAA,CAAA,gBAAgB,GAAqB,OAAO;AAErD;;;;;;AAMG;QACM,IAAA,CAAA,YAAY,GAAG,EAAE;QAEjB,IAAA,CAAA,MAAM,GAAkB,IAAI;QAE5B,IAAA,CAAA,SAAS,GAAG,EAAE;AAMb,QAAA,IAAA,CAAA,mBAAmB,GAAG,IAAI,YAAY,EAAU;AAE1D,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,kBAAkB,EAAE,SAAS,EAAE,6EAAC;QAK5E,IAAI,eAAe,EAAE;AACnB,YAAA,IAAI,CAAC,gBAAgB,GAAG,eAAe;QACzC;AACA,QAAA,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,cAAc;IACnC;IAEA,QAAQ,GAAA;AACN,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,IAAI,CAAC,eAAe,EAAE;QACxB;IACF;AAEA,IAAA,WAAW,CAAC,OAAsB,EAAA;AAChC,QAAA,IAAI,OAAO,CAAC,cAAc,CAAC,EAAE;YAC3B,IAAI,CAAC,eAAe,EAAE;QACxB;IACF;AAEU,IAAA,MAAM,CAAC,KAAa,EAAA;AAC5B,QAAA,IAAI,CAAC,aAAa,GAAG,KAAK;QAC1B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;IACnD;IAEA,SAAS,CAAC,KAAoB,EAAE,KAAa,EAAA;AAC3C,QAAA,IAAI,CAAC,aAAa,KAAK,CAAC;AACxB,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;;AAE3D,YAAA,IAAI,CAAC,MAAM,CAAC,CAAC,KAAK,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;AAC5C,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;QACpC;AAAO,aAAA,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE;;YAE/D,IAAI,CAAC,MAAM,CAAC,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;AAChE,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;QACpC;AAAO,aAAA,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;;AAErD,YAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;AAClB,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;QACpC;IACF;AAEA,IAAA,SAAS,CAAC,KAAa,EAAA;AACrB,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,aAAa;QAChE,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,KAAK,EAAE;QACjB;IACF;AAEA,IAAA,YAAY,CAAC,KAAa,EAAA;AACxB,QAAA,IAAI,KAAK,KAAK,CAAC,EAAE;AACf,YAAA,OAAO,0BAA0B;QACnC;AAAO,aAAA,IAAI,KAAK,KAAK,CAAC,EAAE;AACtB,YAAA,OAAO,oBAAoB;QAC7B;AACA,QAAA,OAAO,EAAE;IACX;IAEQ,eAAe,GAAA;AACrB,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE;QAC5B,MAAM,CAAC,eAAe,CAAC,GAAG,iBAAiB,CAAC,IAAI,CAAC,YAAY,CAAC;AAC9D,QAAA,MAAM,CAAC,kBAAkB,CAAC,GAAG,IAAI,CAAC,YAAY;AAC9C,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC;IACzB;AAEA,IAAA,OAAO,CAAC,IAAY,EAAA;;QAElB,IAAI,IAAI,CAAC,aAAa,KAAK,IAAI,IAAI,IAAI,KAAK,CAAC,EAAE;AAC7C,YAAA,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;QAChB;IACF;AA9HW,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,kBAwDH,oCAAoC,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAxD/C,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,aAAA,EAAA,eAAA,EAAA,MAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,YAAA,EAAA,cAAA,EAAA,MAAA,EAAA,QAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,OAAA,EAAA,EAAA,mBAAA,EAAA,qBAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,YAAA,EAAA,SAAA,EAAA,CAAA,WAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC3B3B,mkCA8BA,EAAA,MAAA,EAAA,CAAA,sjHAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDLY,OAAO,2EAAE,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAEf,cAAc,EAAA,UAAA,EAAA,CAAA;kBAP1B,SAAS;+BACE,UAAU,EAAA,eAAA,EAGH,uBAAuB,CAAC,MAAM,WACtC,CAAC,OAAO,EAAE,OAAO,CAAC,EAAA,QAAA,EAAA,mkCAAA,EAAA,MAAA,EAAA,CAAA,sjHAAA,CAAA,EAAA;;0BA0DxB;;0BAAY,MAAM;2BAAC,oCAAoC;;sBAnDzD,YAAY;uBAAC,WAAW;;sBAOxB;;sBAOA;;sBAaA;;sBASA;;sBAEA;;sBAEA;;sBAMA;;;MErEU,oBAAoB,CAAA;+GAApB,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAApB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,oBAAoB,EAAA,OAAA,EAAA,CAHrB,YAAY,EAAE,cAAc,aAC5B,cAAc,CAAA,EAAA,CAAA,CAAA;AAEb,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,oBAAoB,YAHrB,YAAY,CAAA,EAAA,CAAA,CAAA;;4FAGX,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAJhC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,cAAc,CAAC;oBACvC,OAAO,EAAE,CAAC,cAAc,CAAC;AAC1B,iBAAA;;;ACRD;;AAEG;;;;"}
+{"version":3,"file":"testgorilla-tgo-ui-components-scale.mjs","sources":["../../../components/scale/scale.component.ts","../../../components/scale/scale.component.html","../../../components/scale/scale.component.module.ts","../../../components/scale/testgorilla-tgo-ui-components-scale.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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}