@testgorilla/tgo-ui 9.3.3 → 10.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"testgorilla-tgo-ui-components-slider.mjs","sources":["../../../components/slider/slider.component.ts","../../../components/slider/slider.component.html","../../../components/slider/slider.component.module.ts","../../../components/slider/testgorilla-tgo-ui-components-slider.ts"],"sourcesContent":["import { CommonModule, DecimalPipe } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  EventEmitter,\n  forwardRef,\n  inject,\n  Inject,\n  input,\n  Input,\n  Optional,\n  Output,\n} from '@angular/core';\nimport {\n  AbstractControl,\n  FormsModule,\n  NG_VALIDATORS,\n  NG_VALUE_ACCESSOR,\n  ValidationErrors,\n  Validator,\n} from '@angular/forms';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatSliderModule } from '@angular/material/slider';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { NgxMaskDirective, provideNgxMask } from 'ngx-mask';\n\nimport { ApplicationTheme, UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\n\nimport { SliderValue, SliderVariant } from './slider.model';\n\n@Component({\n  selector: 'ui-slider',\n  templateUrl: './slider.component.html',\n  styleUrls: ['./slider.component.scss'],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => SliderComponent),\n      multi: true,\n    },\n    {\n      provide: NG_VALIDATORS,\n      useExisting: forwardRef(() => SliderComponent),\n      multi: true,\n    },\n    provideNgxMask(),\n    DecimalPipe,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    CommonModule,\n    MatSliderModule,\n    FormsModule,\n    MatInputModule,\n    MatTooltipModule,\n    IconComponentModule,\n    UiTranslatePipe,\n    NgxMaskDirective,\n  ],\n})\nexport class SliderComponent implements Validator {\n  /**\n   * The maximum value of the slider.\n   *\n   * @type {number}\n   * @default 100\n   */\n  @Input() max = 100;\n\n  /**\n   * The minimum value of the slider.\n   *\n   * @type {number}\n   * @default 0\n   */\n  @Input() min = 0;\n\n  /**\n   * A flag indicating whether the slider displays values as percentages.\n   *\n   * @type {boolean}\n   * @default true\n   */\n  @Input() percentage = false;\n\n  /**\n   * A flag indicating whether the slider is disabled.\n   *\n   * @type {boolean}\n   * @default true\n   */\n  @Input() disabled = false;\n\n  /**\n   * The starting value of the slider.\n   *\n   * @type {number}\n   * @default 0\n   */\n  @Input() sliderStart = 0;\n\n  /**\n   * The ending value of the slider.\n   *\n   * @type {number}\n   * @default 100\n   */\n  @Input() sliderEnd = 100;\n\n  /**\n   * The label for the slider.\n   *\n   * @type {string}\n   * @default ''\n   */\n  @Input() label = '';\n\n  /**\n   * Show slider inputs.\n   *\n   * @type {boolean}\n   * @default true\n   */\n  @Input() showInputs = true;\n\n  /**\n   * Step number.\n   *\n   * @type {number}\n   * @default 1\n   */\n  @Input() step = 1;\n\n  /**\n   *\n   * Defines the application theme\n   *\n   * @type {ApplicationTheme}\n   * @memberof SliderComponent\n   */\n  @Input() applicationTheme: ApplicationTheme = 'light';\n\n  /**\n   *\n   * Defines the variant slider\n   *\n   * @type {SliderVariant}\n   * @memberof SliderComponent\n   */\n  @Input() variant: SliderVariant = 'range';\n\n  /**\n   * Controls whether decimal values are allowed in the input fields.\n   * When true, inputs accept decimal numbers (up to 2 decimal places).\n   * When false, inputs only accept whole numbers.\n   */\n  useDecimal = input<boolean>(false);\n\n  /**\n   * Controls whether numbers are displayed with thousands separators.\n   * When true, displays numbers like \"100,000\" instead of \"100000\".\n   * This is independent of useDecimal - you can have thousands separators\n   * without decimals, or decimals without thousands separators.\n   */\n  useThousandsSeparator = input<boolean>(false);\n\n  minLabel = input<string>();\n\n  maxLabel = input<string>();\n\n  inputWidth = input(80);\n\n  @Output() sliderValueChange = new EventEmitter<SliderValue>();\n\n  cdr = inject(ChangeDetectorRef);\n  decimalPipe = inject(DecimalPipe);\n  private control?: AbstractControl;\n\n  constructor(\n    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n  ) {\n    if (defaultAppTheme) {\n      this.applicationTheme = defaultAppTheme;\n      this.cdr.markForCheck();\n    }\n    this.formatLabel = this.formatLabel.bind(this);\n  }\n\n  private value: SliderValue = { start: 0, end: 100 };\n  protected translationContext = 'SLIDER.';\n  protected touchedControlName = '';\n\n  onChange: (value: SliderValue) => void = () => {};\n  onTouch: () => void = () => {};\n\n  registerOnChange(fn: (value: SliderValue) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouch = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n    this.cdr.markForCheck();\n  }\n\n  writeValue(value: SliderValue): void {\n    this.value = value;\n    this.sliderEnd = value.end;\n    this.cdr.markForCheck();\n    // Update sliderStart in a separate detection cycle to ensure proper rendering o mat-slider\n    setTimeout(() => {\n      this.sliderStart = value.start;\n      this.cdr.markForCheck();\n      if (this.control) {\n        this.control.updateValueAndValidity({ emitEvent: false });\n      }\n    });\n  }\n\n  protected onValueChange(ev?: number): void {\n    const value: SliderValue = { start: Number(this.sliderStart), end: Number(this.sliderEnd) };\n\n    if (ev) {\n      value.start = ev;\n      value.end = 0;\n    }\n\n    this.value = value;\n    this.onChange(value);\n    this.sliderValueChange.emit(value);\n    this.cdr.markForCheck();\n    this.onTouch();\n  }\n\n  protected onInputBlur(inputName: string): void {\n    this.touchedControlName = inputName;\n    const value: SliderValue = { start: Number(this.sliderStart), end: Number(this.sliderEnd) };\n\n    if (this.isValueChanged(value)) {\n      this.onValueChange();\n    }\n  }\n\n  protected onInputFocus(): void {\n    this.touchedControlName = '';\n    this.cdr.markForCheck();\n  }\n\n  private isValueChanged(value: SliderValue): boolean {\n    return this.value.start !== value.start || this.value.end !== value.end;\n  }\n\n  get hasError(): boolean {\n    return (\n      this.max < Number(this.sliderEnd) ||\n      this.min > Number(this.sliderStart) ||\n      this.min > Number(this.sliderEnd) ||\n      this.max < Number(this.sliderStart) ||\n      Number(this.sliderEnd) < Number(this.sliderStart)\n    );\n  }\n\n  get isBasicSlider(): boolean {\n    return this.variant === 'basic';\n  }\n\n  formatLabel(value: number): string {\n    return this.useThousandsSeparator()\n      ? (this.decimalPipe.transform(value, '1.0-0') ?? value.toString())\n      : value.toString();\n  }\n\n  validate(control: AbstractControl): ValidationErrors | null {\n    this.control = control;\n    return this.hasError && this.touchedControlName ? { invalidSlider: true } : null;\n  }\n}\n","<ng-container>\n  <div\n    class=\"slider-container\"\n    [attr.theme]=\"applicationTheme\"\n    [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\"\n  >\n    @if (label) {\n      <div class=\"slider-label\">{{ label }}</div>\n    }\n\n    <div class=\"slider\">\n      @if (!isBasicSlider) {\n        <div class=\"min-value\">\n          <span>\n            @if (useThousandsSeparator()) {\n              {{ min | number }}\n            } @else {\n              {{ min }}\n            }\n            @if (percentage) {\n              %\n            }\n          </span>\n        </div>\n      }\n      <mat-slider\n        [disableRipple]=\"applicationTheme !== 'classic'\"\n        #sliderElement\n        discrete\n        [disabled]=\"disabled\"\n        [max]=\"max\"\n        [min]=\"min\"\n        [step]=\"step\"\n        (mouseenter)=\"sliderElement.discrete = true\"\n        (mouseleave)=\"sliderElement.discrete = false\"\n        [displayWith]=\"formatLabel\"\n      >\n        @if (isBasicSlider) {\n          <input\n            data-testid=\"slider-thumb\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange($event)\"\n            [(ngModel)]=\"sliderStart\"\n            matSliderThumb\n          />\n        } @else {\n          <input\n            data-testid=\"slider-start-thumb\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange()\"\n            [(ngModel)]=\"sliderStart\"\n            matSliderStartThumb\n          />\n          <input\n            data-testid=\"slider-end-thumb\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange()\"\n            [(ngModel)]=\"sliderEnd\"\n            matSliderEndThumb\n          />\n        }\n      </mat-slider>\n      @if (!isBasicSlider) {\n        <div class=\"max-value\">\n          <span>\n            @if (useThousandsSeparator()) {\n              {{ max | number }}\n            } @else {\n              {{ max }}\n            }\n            @if (percentage) {\n              %\n            }\n          </span>\n        </div>\n      }\n    </div>\n\n    @if (showInputs && !isBasicSlider) {\n      <div class=\"slider-input\">\n        <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n          @if (minLabel()) {\n            <mat-label>\n              {{ minLabel() }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          } @else {\n            <mat-label>\n              {{ 'COMMON.MIN' | uiTranslate | async }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          }\n          @if (useDecimal()) {\n            <input\n              data-testid=\"slider.input-start\"\n              matInput\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderStart\"\n              [disabled]=\"disabled\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('start')\"\n              (keydown.enter)=\"onInputBlur('start')\"\n              mask=\"separator.2\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          } @else {\n            <input\n              data-testid=\"slider.input-start\"\n              matInput\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderStart\"\n              [disabled]=\"disabled\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('start')\"\n              (keydown.enter)=\"onInputBlur('start')\"\n              mask=\"separator.0\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          }\n        </mat-form-field>\n        <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n          @if (maxLabel()) {\n            <mat-label>\n              {{ maxLabel() }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          } @else {\n            <mat-label>\n              {{ 'COMMON.MAX' | uiTranslate | async }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          }\n          @if (useDecimal()) {\n            <input\n              matInput\n              [disabled]=\"disabled\"\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderEnd\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('end')\"\n              (keydown.enter)=\"onInputBlur('end')\"\n              data-testid=\"slider.input-end\"\n              mask=\"separator.2\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          } @else {\n            <input\n              matInput\n              [disabled]=\"disabled\"\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderEnd\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('end')\"\n              (keydown.enter)=\"onInputBlur('end')\"\n              mask=\"separator.0\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n              data-testid=\"slider.input-end\"\n            />\n          }\n        </mat-form-field>\n      </div>\n    }\n\n    @if (hasError && touchedControlName) {\n      <mat-error class=\"slider-errors\">\n        @if (touchedControlName === 'start' && sliderStart > sliderEnd) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{\n              translationContext + 'MIN_MORE_THAN_MAX' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n            }}</span>\n          </div>\n        }\n        @if (touchedControlName === 'end' && sliderStart > sliderEnd) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{\n              translationContext + 'MAX_LESS_THAN_MIN' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n            }}</span>\n          </div>\n        }\n        @if (sliderStart < min) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{ 'COMMON.MIN' | uiTranslate | async }} {{ min }}</span>\n          </div>\n        }\n        @if (sliderEnd > max) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{ 'COMMON.MAX' | uiTranslate | async }} {{ max }}</span>\n          </div>\n        }\n      </mat-error>\n    }\n  </div>\n</ng-container>\n","import { NgModule } from '@angular/core';\n\nimport { SliderComponent } from './slider.component';\n\n@NgModule({\n  imports: [SliderComponent],\n  exports: [SliderComponent],\n})\nexport class SliderComponentModule {}\n","/**\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-slider.mjs","sources":["../../../components/slider/slider.component.ts","../../../components/slider/slider.component.html","../../../components/slider/slider.component.module.ts","../../../components/slider/testgorilla-tgo-ui-components-slider.ts"],"sourcesContent":["import { CommonModule, DecimalPipe } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  EventEmitter,\n  forwardRef,\n  inject,\n  Inject,\n  input,\n  Input,\n  Optional,\n  Output,\n} from '@angular/core';\nimport {\n  AbstractControl,\n  FormsModule,\n  NG_VALIDATORS,\n  NG_VALUE_ACCESSOR,\n  ValidationErrors,\n  Validator,\n} from '@angular/forms';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatSliderModule } from '@angular/material/slider';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { NgxMaskDirective, provideNgxMask } from 'ngx-mask';\n\nimport { ApplicationTheme, UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\n\nimport { SliderValue, SliderVariant } from './slider.model';\n\n@Component({\n  selector: 'ui-slider',\n  templateUrl: './slider.component.html',\n  styleUrls: ['./slider.component.scss'],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => SliderComponent),\n      multi: true,\n    },\n    {\n      provide: NG_VALIDATORS,\n      useExisting: forwardRef(() => SliderComponent),\n      multi: true,\n    },\n    provideNgxMask(),\n    DecimalPipe,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    CommonModule,\n    MatSliderModule,\n    FormsModule,\n    MatInputModule,\n    MatTooltipModule,\n    IconComponentModule,\n    UiTranslatePipe,\n    NgxMaskDirective,\n  ],\n})\nexport class SliderComponent implements Validator {\n  /**\n   * The maximum value of the slider.\n   *\n   * @type {number}\n   * @default 100\n   */\n  @Input() max = 100;\n\n  /**\n   * The minimum value of the slider.\n   *\n   * @type {number}\n   * @default 0\n   */\n  @Input() min = 0;\n\n  /**\n   * A flag indicating whether the slider displays values as percentages.\n   *\n   * @type {boolean}\n   * @default true\n   */\n  @Input() percentage = false;\n\n  /**\n   * A flag indicating whether the slider is disabled.\n   *\n   * @type {boolean}\n   * @default true\n   */\n  @Input() disabled = false;\n\n  /**\n   * The starting value of the slider.\n   *\n   * @type {number}\n   * @default 0\n   */\n  @Input() sliderStart = 0;\n\n  /**\n   * The ending value of the slider.\n   *\n   * @type {number}\n   * @default 100\n   */\n  @Input() sliderEnd = 100;\n\n  /**\n   * The label for the slider.\n   *\n   * @type {string}\n   * @default ''\n   */\n  @Input() label = '';\n\n  /**\n   * Show slider inputs.\n   *\n   * @type {boolean}\n   * @default true\n   */\n  @Input() showInputs = true;\n\n  /**\n   * Step number.\n   *\n   * @type {number}\n   * @default 1\n   */\n  @Input() step = 1;\n\n  /**\n   *\n   * Defines the application theme\n   *\n   * @type {ApplicationTheme}\n   * @memberof SliderComponent\n   */\n  @Input() applicationTheme: ApplicationTheme = 'light';\n\n  /**\n   *\n   * Defines the variant slider\n   *\n   * @type {SliderVariant}\n   * @memberof SliderComponent\n   */\n  @Input() variant: SliderVariant = 'range';\n\n  /**\n   * Controls whether decimal values are allowed in the input fields.\n   * When true, inputs accept decimal numbers (up to 2 decimal places).\n   * When false, inputs only accept whole numbers.\n   */\n  useDecimal = input<boolean>(false);\n\n  /**\n   * Controls whether numbers are displayed with thousands separators.\n   * When true, displays numbers like \"100,000\" instead of \"100000\".\n   * This is independent of useDecimal - you can have thousands separators\n   * without decimals, or decimals without thousands separators.\n   */\n  useThousandsSeparator = input<boolean>(false);\n\n  minLabel = input<string>();\n\n  maxLabel = input<string>();\n\n  inputWidth = input(80);\n\n  @Output() sliderValueChange = new EventEmitter<SliderValue>();\n\n  cdr = inject(ChangeDetectorRef);\n  decimalPipe = inject(DecimalPipe);\n  private control?: AbstractControl;\n\n  constructor(\n    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n  ) {\n    if (defaultAppTheme) {\n      this.applicationTheme = defaultAppTheme;\n      this.cdr.markForCheck();\n    }\n    this.formatLabel = this.formatLabel.bind(this);\n  }\n\n  private value: SliderValue = { start: 0, end: 100 };\n  protected translationContext = 'SLIDER.';\n  protected touchedControlName = '';\n\n  onChange: (value: SliderValue) => void = () => {};\n  onTouch: () => void = () => {};\n\n  registerOnChange(fn: (value: SliderValue) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouch = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n    this.cdr.markForCheck();\n  }\n\n  writeValue(value: SliderValue): void {\n    this.value = value;\n    this.sliderEnd = value.end;\n    this.cdr.markForCheck();\n    // Update sliderStart in a separate detection cycle to ensure proper rendering o mat-slider\n    setTimeout(() => {\n      this.sliderStart = value.start;\n      this.cdr.markForCheck();\n      if (this.control) {\n        this.control.updateValueAndValidity({ emitEvent: false });\n      }\n    });\n  }\n\n  protected onValueChange(ev?: number): void {\n    const value: SliderValue = { start: Number(this.sliderStart), end: Number(this.sliderEnd) };\n\n    if (ev) {\n      value.start = ev;\n      value.end = 0;\n    }\n\n    this.value = value;\n    this.onChange(value);\n    this.sliderValueChange.emit(value);\n    this.cdr.markForCheck();\n    this.onTouch();\n  }\n\n  protected onInputBlur(inputName: string): void {\n    this.touchedControlName = inputName;\n    const value: SliderValue = { start: Number(this.sliderStart), end: Number(this.sliderEnd) };\n\n    if (this.isValueChanged(value)) {\n      this.onValueChange();\n    }\n  }\n\n  protected onInputFocus(): void {\n    this.touchedControlName = '';\n    this.cdr.markForCheck();\n  }\n\n  private isValueChanged(value: SliderValue): boolean {\n    return this.value.start !== value.start || this.value.end !== value.end;\n  }\n\n  get hasError(): boolean {\n    return (\n      this.max < Number(this.sliderEnd) ||\n      this.min > Number(this.sliderStart) ||\n      this.min > Number(this.sliderEnd) ||\n      this.max < Number(this.sliderStart) ||\n      Number(this.sliderEnd) < Number(this.sliderStart)\n    );\n  }\n\n  get isBasicSlider(): boolean {\n    return this.variant === 'basic';\n  }\n\n  formatLabel(value: number): string {\n    return this.useThousandsSeparator()\n      ? (this.decimalPipe.transform(value, '1.0-0') ?? value.toString())\n      : value.toString();\n  }\n\n  validate(control: AbstractControl): ValidationErrors | null {\n    this.control = control;\n    return this.hasError && this.touchedControlName ? { invalidSlider: true } : null;\n  }\n}\n","<ng-container>\n  <div\n    class=\"slider-container\"\n    [attr.theme]=\"applicationTheme\"\n    [ngClass]=\"{ disabled: disabled, error: hasError && touchedControlName }\"\n  >\n    @if (label) {\n      <div class=\"slider-label\">{{ label }}</div>\n    }\n\n    <div class=\"slider\">\n      @if (!isBasicSlider) {\n        <div class=\"min-value\">\n          <span>\n            @if (useThousandsSeparator()) {\n              {{ min | number }}\n            } @else {\n              {{ min }}\n            }\n            @if (percentage) {\n              %\n            }\n          </span>\n        </div>\n      }\n      <mat-slider\n        [disableRipple]=\"applicationTheme !== 'classic'\"\n        #sliderElement\n        discrete\n        [disabled]=\"disabled\"\n        [max]=\"max\"\n        [min]=\"min\"\n        [step]=\"step\"\n        (mouseenter)=\"sliderElement.discrete = true\"\n        (mouseleave)=\"sliderElement.discrete = false\"\n        [displayWith]=\"formatLabel\"\n      >\n        @if (isBasicSlider) {\n          <input\n            data-testid=\"slider-thumb\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange($event)\"\n            [(ngModel)]=\"sliderStart\"\n            matSliderThumb\n          />\n        } @else {\n          <input\n            data-testid=\"slider-start-thumb\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange()\"\n            [(ngModel)]=\"sliderStart\"\n            matSliderStartThumb\n          />\n          <input\n            data-testid=\"slider-end-thumb\"\n            [disabled]=\"disabled\"\n            (valueChange)=\"onValueChange()\"\n            [(ngModel)]=\"sliderEnd\"\n            matSliderEndThumb\n          />\n        }\n      </mat-slider>\n      @if (!isBasicSlider) {\n        <div class=\"max-value\">\n          <span>\n            @if (useThousandsSeparator()) {\n              {{ max | number }}\n            } @else {\n              {{ max }}\n            }\n            @if (percentage) {\n              %\n            }\n          </span>\n        </div>\n      }\n    </div>\n\n    @if (showInputs && !isBasicSlider) {\n      <div class=\"slider-input\">\n        <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n          @if (minLabel()) {\n            <mat-label>\n              {{ minLabel() }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          } @else {\n            <mat-label>\n              {{ 'COMMON.MIN' | uiTranslate | async }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          }\n          @if (useDecimal()) {\n            <input\n              data-testid=\"slider.input-start\"\n              matInput\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderStart\"\n              [disabled]=\"disabled\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('start')\"\n              (keydown.enter)=\"onInputBlur('start')\"\n              mask=\"separator.2\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          } @else {\n            <input\n              data-testid=\"slider.input-start\"\n              matInput\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderStart\"\n              [disabled]=\"disabled\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('start')\"\n              (keydown.enter)=\"onInputBlur('start')\"\n              mask=\"separator.0\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          }\n        </mat-form-field>\n        <mat-form-field [appearance]=\"'outline'\" [ngStyle]=\"{ width: inputWidth() + 'px' }\">\n          @if (maxLabel()) {\n            <mat-label>\n              {{ maxLabel() }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          } @else {\n            <mat-label>\n              {{ 'COMMON.MAX' | uiTranslate | async }}\n              @if (percentage) {\n                <span>%</span>\n              }\n            </mat-label>\n          }\n          @if (useDecimal()) {\n            <input\n              matInput\n              [disabled]=\"disabled\"\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderEnd\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('end')\"\n              (keydown.enter)=\"onInputBlur('end')\"\n              data-testid=\"slider.input-end\"\n              mask=\"separator.2\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n            />\n          } @else {\n            <input\n              matInput\n              [disabled]=\"disabled\"\n              [type]=\"'text'\"\n              [(ngModel)]=\"sliderEnd\"\n              (focus)=\"onInputFocus()\"\n              (blur)=\"onInputBlur('end')\"\n              (keydown.enter)=\"onInputBlur('end')\"\n              mask=\"separator.0\"\n              [thousandSeparator]=\"useThousandsSeparator() ? ',' : ''\"\n              data-testid=\"slider.input-end\"\n            />\n          }\n        </mat-form-field>\n      </div>\n    }\n\n    @if (hasError && touchedControlName) {\n      <mat-error class=\"slider-errors\">\n        @if (touchedControlName === 'start' && sliderStart > sliderEnd) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{\n              translationContext + 'MIN_MORE_THAN_MAX' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n            }}</span>\n          </div>\n        }\n        @if (touchedControlName === 'end' && sliderStart > sliderEnd) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{\n              translationContext + 'MAX_LESS_THAN_MIN' | uiTranslate: { min: sliderStart, max: sliderEnd } | async\n            }}</span>\n          </div>\n        }\n        @if (sliderStart < min) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{ 'COMMON.MIN' | uiTranslate | async }} {{ min }}</span>\n          </div>\n        }\n        @if (sliderEnd > max) {\n          <div class=\"validation-error\">\n            <ui-icon [name]=\"'Info'\"></ui-icon>\n            <span>{{ 'COMMON.MAX' | uiTranslate | async }} {{ max }}</span>\n          </div>\n        }\n      </mat-error>\n    }\n  </div>\n</ng-container>\n","import { NgModule } from '@angular/core';\n\nimport { SliderComponent } from './slider.component';\n\n@NgModule({\n  imports: [SliderComponent],\n  exports: [SliderComponent],\n})\nexport class SliderComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;MA8Da,eAAe,CAAA;AAsH1B,IAAA,WAAA,CAC6E,eAAiC,EAAA;QAAjC,IAAA,CAAA,eAAe,GAAf,eAAe;AAtH5F;;;;;AAKG;QACM,IAAA,CAAA,GAAG,GAAG,GAAG;AAElB;;;;;AAKG;QACM,IAAA,CAAA,GAAG,GAAG,CAAC;AAEhB;;;;;AAKG;QACM,IAAA,CAAA,UAAU,GAAG,KAAK;AAE3B;;;;;AAKG;QACM,IAAA,CAAA,QAAQ,GAAG,KAAK;AAEzB;;;;;AAKG;QACM,IAAA,CAAA,WAAW,GAAG,CAAC;AAExB;;;;;AAKG;QACM,IAAA,CAAA,SAAS,GAAG,GAAG;AAExB;;;;;AAKG;QACM,IAAA,CAAA,KAAK,GAAG,EAAE;AAEnB;;;;;AAKG;QACM,IAAA,CAAA,UAAU,GAAG,IAAI;AAE1B;;;;;AAKG;QACM,IAAA,CAAA,IAAI,GAAG,CAAC;AAEjB;;;;;;AAMG;QACM,IAAA,CAAA,gBAAgB,GAAqB,OAAO;AAErD;;;;;;AAMG;QACM,IAAA,CAAA,OAAO,GAAkB,OAAO;AAEzC;;;;AAIG;AACH,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAU,KAAK,iFAAC;AAElC;;;;;AAKG;AACH,QAAA,IAAA,CAAA,qBAAqB,GAAG,KAAK,CAAU,KAAK,4FAAC;QAE7C,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,UAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;QAE1B,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,UAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;AAE1B,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAC,EAAE,iFAAC;AAEZ,QAAA,IAAA,CAAA,iBAAiB,GAAG,IAAI,YAAY,EAAe;AAE7D,QAAA,IAAA,CAAA,GAAG,GAAG,MAAM,CAAC,iBAAiB,CAAC;AAC/B,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAAC,WAAW,CAAC;QAazB,IAAA,CAAA,KAAK,GAAgB,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE;QACzC,IAAA,CAAA,kBAAkB,GAAG,SAAS;QAC9B,IAAA,CAAA,kBAAkB,GAAG,EAAE;AAEjC,QAAA,IAAA,CAAA,QAAQ,GAAiC,MAAK,EAAE,CAAC;AACjD,QAAA,IAAA,CAAA,OAAO,GAAe,MAAK,EAAE,CAAC;QAZ5B,IAAI,eAAe,EAAE;AACnB,YAAA,IAAI,CAAC,gBAAgB,GAAG,eAAe;AACvC,YAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;QACzB;QACA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;IAChD;AASA,IAAA,gBAAgB,CAAC,EAAgC,EAAA;AAC/C,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;IACpB;AAEA,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC9B,QAAA,IAAI,CAAC,OAAO,GAAG,EAAE;IACnB;AAEA,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AAClC,QAAA,IAAI,CAAC,QAAQ,GAAG,UAAU;AAC1B,QAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;IACzB;AAEA,IAAA,UAAU,CAAC,KAAkB,EAAA;AAC3B,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK;AAClB,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,GAAG;AAC1B,QAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;;QAEvB,UAAU,CAAC,MAAK;AACd,YAAA,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,KAAK;AAC9B,YAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;AACvB,YAAA,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;YAC3D;AACF,QAAA,CAAC,CAAC;IACJ;AAEU,IAAA,aAAa,CAAC,EAAW,EAAA;QACjC,MAAM,KAAK,GAAgB,EAAE,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;QAE3F,IAAI,EAAE,EAAE;AACN,YAAA,KAAK,CAAC,KAAK,GAAG,EAAE;AAChB,YAAA,KAAK,CAAC,GAAG,GAAG,CAAC;QACf;AAEA,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK;AAClB,QAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;AACpB,QAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC;AAClC,QAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;QACvB,IAAI,CAAC,OAAO,EAAE;IAChB;AAEU,IAAA,WAAW,CAAC,SAAiB,EAAA;AACrC,QAAA,IAAI,CAAC,kBAAkB,GAAG,SAAS;QACnC,MAAM,KAAK,GAAgB,EAAE,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;AAE3F,QAAA,IAAI,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;YAC9B,IAAI,CAAC,aAAa,EAAE;QACtB;IACF;IAEU,YAAY,GAAA;AACpB,QAAA,IAAI,CAAC,kBAAkB,GAAG,EAAE;AAC5B,QAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;IACzB;AAEQ,IAAA,cAAc,CAAC,KAAkB,EAAA;AACvC,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,KAAK,CAAC,GAAG;IACzE;AAEA,IAAA,IAAI,QAAQ,GAAA;QACV,QACE,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;YACjC,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC;YACnC,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;YACjC,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC;AACnC,YAAA,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC;IAErD;AAEA,IAAA,IAAI,aAAa,GAAA;AACf,QAAA,OAAO,IAAI,CAAC,OAAO,KAAK,OAAO;IACjC;AAEA,IAAA,WAAW,CAAC,KAAa,EAAA;QACvB,OAAO,IAAI,CAAC,qBAAqB;AAC/B,eAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE;AACjE,cAAE,KAAK,CAAC,QAAQ,EAAE;IACtB;AAEA,IAAA,QAAQ,CAAC,OAAwB,EAAA;AAC/B,QAAA,IAAI,CAAC,OAAO,GAAG,OAAO;AACtB,QAAA,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,kBAAkB,GAAG,EAAE,aAAa,EAAE,IAAI,EAAE,GAAG,IAAI;IAClF;AA1NW,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,eAAe,kBAuHJ,oCAAoC,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAvH/C,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,GAAA,EAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,GAAA,EAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,KAAA,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,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,qBAAA,EAAA,EAAA,iBAAA,EAAA,uBAAA,EAAA,UAAA,EAAA,uBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,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,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,EAAA,SAAA,EA1Bf;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,eAAe,CAAC;AAC9C,gBAAA,KAAK,EAAE,IAAI;AACZ,aAAA;AACD,YAAA;AACE,gBAAA,OAAO,EAAE,aAAa;AACtB,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,eAAe,CAAC;AAC9C,gBAAA,KAAK,EAAE,IAAI;AACZ,aAAA;AACD,YAAA,cAAc,EAAE;YAChB,WAAW;AACZ,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECjDH,2iNA6MA,EAAA,MAAA,EAAA,CAAA,2qRAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDzJI,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACZ,eAAe,4jBACf,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACX,cAAc,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,yHAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,IAAA,EAAA,aAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,mBAAA,EAAA,kBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,qBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,OAAA,EAAA,YAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,WAAA,CAAA,EAAA,QAAA,EAAA,CAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,WAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,CAAA,IAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACd,gBAAgB,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAChB,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,WAAA,EAAA,IAAA,EAEnB,gBAAgB,0pBADhB,eAAe,EAAA,IAAA,EAAA,aAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAIN,eAAe,EAAA,UAAA,EAAA,CAAA;kBA9B3B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,EAAA,SAAA,EAGV;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,qBAAqB,CAAC;AAC9C,4BAAA,KAAK,EAAE,IAAI;AACZ,yBAAA;AACD,wBAAA;AACE,4BAAA,OAAO,EAAE,aAAa;AACtB,4BAAA,WAAW,EAAE,UAAU,CAAC,qBAAqB,CAAC;AAC9C,4BAAA,KAAK,EAAE,IAAI;AACZ,yBAAA;AACD,wBAAA,cAAc,EAAE;wBAChB,WAAW;qBACZ,EAAA,eAAA,EACgB,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC;wBACP,YAAY;wBACZ,eAAe;wBACf,WAAW;wBACX,cAAc;wBACd,gBAAgB;wBAChB,mBAAmB;wBACnB,eAAe;wBACf,gBAAgB;AACjB,qBAAA,EAAA,QAAA,EAAA,2iNAAA,EAAA,MAAA,EAAA,CAAA,2qRAAA,CAAA,EAAA;;0BAyHE;;0BAAY,MAAM;2BAAC,oCAAoC;;sBAhHzD;;sBAQA;;sBAQA;;sBAQA;;sBAQA;;sBAQA;;sBAQA;;sBAQA;;sBAQA;;sBASA;;sBASA;;sBAuBA;;;MEtKU,qBAAqB,CAAA;+GAArB,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;gHAArB,qBAAqB,EAAA,OAAA,EAAA,CAHtB,eAAe,CAAA,EAAA,OAAA,EAAA,CACf,eAAe,CAAA,EAAA,CAAA,CAAA;AAEd,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,qBAAqB,YAHtB,eAAe,CAAA,EAAA,CAAA,CAAA;;4FAGd,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAJjC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,eAAe,CAAC;oBAC1B,OAAO,EAAE,CAAC,eAAe,CAAC;AAC3B,iBAAA;;;ACPD;;AAEG;;;;"}

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

@@ -171,8 +171,8 @@ class SnackbarComponent {
             this.snackbarRef.dismiss();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SnackbarComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: MAT_SNACK_BAR_DATA }, { token: i1.MatSnackBarRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SnackbarComponent, isStandalone: true, selector: "ui-snackbar", inputs: { snackbarType: "snackbarType", message: "message", html: "html", seconds: "seconds", includeDismissButton: "includeDismissButton", fixed: "fixed", linkText: "linkText", linkUrl: "linkUrl", linkTarget: "linkTarget", variant: "variant", applicationTheme: "applicationTheme", closeButtonTooltip: "closeButtonTooltip", ariaDescribedby: "ariaDescribedby" }, ngImport: i0, template: "<ng-container>\n  @if (visible) {\n    <div\n      [ngClass]=\"snackbarType + ' ' + position\"\n      [@openClose]\n      class=\"snackbar-container\"\n      [attr.theme]=\"applicationTheme\"\n      [class.mobile]=\"variant === 'mobile'\"\n      [class.desktop]=\"variant === 'desktop'\"\n      (mouseenter)=\"onMouseEnter()\"\n      (mouseleave)=\"onMouseLeave()\"\n      data-testid=\"snackbar-wrapper\"\n      [attr.data-test-snackbar-type]=\"snackbarType\"\n      [attr.aria-describedby]=\"'describedby'\"\n      role=\"alert\"\n      [attr.aria-labelledby]=\"'labelledby'\"\n    >\n      <span style=\"position: absolute; left: -9999px\" id=\"labelledby\">{{\n        'ALERT_BANNER.' + (snackbarType | uppercase) | uiTranslate | async\n      }}</span>\n      <span style=\"position: absolute; left: -9999px\"\n        >{{ message }}\n        @if (!!linkText) {\n          <a [target]=\"linkTarget\" [href]=\"linkUrl\" (click)=\"onLinkClick($event)\">{{ linkText }}</a>\n        }\n      </span>\n      <span [style.display]=\"'none'\" id=\"describedby\">{{ ariaDescribedby }}</span>\n      <div\n        aria-hidden=\"true\"\n        class=\"snackbar-text\"\n        [matTooltip]=\"message.length > maxCharacters ? message : ''\"\n        data-testid=\"snackbar-content\"\n      >\n        @if (applicationTheme === 'classic') {\n          <ui-icon [name]=\"iconName\" size=\"24\"></ui-icon>\n        }\n        {{ message.length > maxCharacters ? (message | slice: 0 : maxCharacters) + '..' : message }}\n        @if (safeHtml) {\n          <div [innerHTML]=\"safeHtml\"></div>\n        }\n        @if (!!linkText) {\n          <a [target]=\"linkTarget\" [href]=\"linkUrl\" (click)=\"onLinkClick($event)\">{{ linkText }}</a>\n        }\n      </div>\n      @if (includeDismissButton && applicationTheme === 'classic') {\n        <ui-button\n          variant=\"text\"\n          [label]=\"(translationContext + 'DISMISS' | uiTranslate | async)!\"\n          [applicationTheme]=\"applicationTheme !== 'classic' ? 'light' : 'classic'\"\n          (buttonClickEvent)=\"dismissClick()\"\n          data-testid=\"snackbar-dismiss-button\"\n        ></ui-button>\n      }\n      @if (includeDismissButton && applicationTheme !== 'classic') {\n        <ui-button\n          [variant]=\"'icon-button'\"\n          [applicationTheme]=\"'light'\"\n          [iconName]=\"'Close-in-line'\"\n          [size]=\"'small'\"\n          [tooltip]=\"(closeButtonTooltip || ('COMMON.CLOSE' | uiTranslate | async))!\"\n          (click)=\"dismissClick()\"\n          data-testid=\"snackbar-dismiss-button\"\n        ></ui-button>\n      }\n    </div>\n  }\n</ng-container>\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{display:flex;width:100%;justify-content:center}:host .snackbar-container{max-width:600px}:host .alert-container,:host .snackbar-container{margin:0 auto;display:flex;padding:0 14px;border-radius:4px;align-items:center;justify-content:space-between;opacity:1;min-height:48px}:host .alert-container.fixed,:host .snackbar-container.fixed{position:fixed}:host .alert-container.static,:host .snackbar-container.static{position:relative}:host .alert-container ui-icon,:host .snackbar-container ui-icon{margin-right:14px}:host .alert-container ui-button,:host .snackbar-container ui-button{margin-left:14px}:host .alert-container ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container ::ng-deep button.mat-mdc-unelevated-button.big{padding:0;min-width:auto}:host .alert-container .alert-text,:host .alert-container .snackbar-text,:host .snackbar-container .alert-text,:host .snackbar-container .snackbar-text{display:flex;align-items:center;color:#000}:host .alert-container .alert-text a,:host .alert-container .snackbar-text a,:host .snackbar-container .alert-text a,:host .snackbar-container .snackbar-text a{color:#000;text-decoration:underline;font-weight:700}:host .alert-container .alert-text a:hover,:host .alert-container .alert-text a:visited,:host .alert-container .alert-text a:focus,:host .alert-container .snackbar-text a:hover,:host .alert-container .snackbar-text a:visited,:host .alert-container .snackbar-text a:focus,:host .snackbar-container .alert-text a:hover,:host .snackbar-container .alert-text a:visited,:host .snackbar-container .alert-text a:focus,:host .snackbar-container .snackbar-text a:hover,:host .snackbar-container .snackbar-text a:visited,:host .snackbar-container .snackbar-text a:focus{text-decoration:none}:host .alert-container.success,:host .snackbar-container.success{background-color:#cbd6cb}:host .alert-container.info,:host .snackbar-container.info{background-color:#c8d7de}:host .alert-container.warning,:host .snackbar-container.warning{background-color:#f0d6bb}:host .alert-container.error,:host .snackbar-container.error{background-color:#e3c3c6}:host .alert-container[theme=dark].success,:host .alert-container[theme=light].success,:host .snackbar-container[theme=dark].success,:host .snackbar-container[theme=light].success{background-color:#aae47a}:host .alert-container[theme=dark].info,:host .alert-container[theme=light].info,:host .snackbar-container[theme=dark].info,:host .snackbar-container[theme=light].info{background-color:#d9e8ff}:host .alert-container[theme=dark].warning,:host .alert-container[theme=light].warning,:host .snackbar-container[theme=dark].warning,:host .snackbar-container[theme=light].warning{background-color:#ffe1b3}:host .alert-container[theme=dark].error,:host .alert-container[theme=light].error,:host .snackbar-container[theme=dark].error,:host .snackbar-container[theme=light].error{background-color:#ffac9a}:host .alert-container[theme=dark].ai,:host .alert-container[theme=light].ai,:host .snackbar-container[theme=dark].ai,:host .snackbar-container[theme=light].ai{background-color:#fff2fc;border:1px solid #ffe6fa;padding:12px 16px}:host .alert-container[theme=dark].ai ::ng-deep button.mat-mdc-unelevated-button.big,:host .alert-container[theme=light].ai ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container[theme=dark].ai ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container[theme=light].ai ::ng-deep button.mat-mdc-unelevated-button.big{padding:12px 24px}::ng-deep .display-none{display:none!important}@media(max-width:600px){:host .alert-container,:host .snackbar-container{padding:8px 14px}}:host .snackbar-container{bottom:0;z-index:98}:host .snackbar-container[theme=dark] ui-icon,:host .snackbar-container[theme=light] ui-icon{margin-right:10px;cursor:pointer}:host .snackbar-container[theme=dark] .snackbar-text,:host .snackbar-container[theme=light] .snackbar-text{padding-left:10px;margin-right:8px}:host .snackbar-container[theme=dark] .snackbar-text a,:host .snackbar-container[theme=light] .snackbar-text a{margin-left:4px}:host .snackbar-container[theme=dark].desktop,:host .snackbar-container[theme=light].desktop{border-radius:24px;box-shadow:0 4px 16px #2424240a;width:fit-content;max-width:600px;min-height:48px;line-height:1.4;font-size:14px;padding:16px 24px}:host .snackbar-container[theme=dark].mobile,:host .snackbar-container[theme=light].mobile{width:100%;min-width:100%;word-break:break-word}:host .mat-mdc-snack-bar-container{margin:16px 8px}::ng-deep .mdc-snackbar__surface{height:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i2.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "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"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SnackbarComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: MAT_SNACK_BAR_DATA }, { token: i1.MatSnackBarRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: SnackbarComponent, isStandalone: true, selector: "ui-snackbar", inputs: { snackbarType: "snackbarType", message: "message", html: "html", seconds: "seconds", includeDismissButton: "includeDismissButton", fixed: "fixed", linkText: "linkText", linkUrl: "linkUrl", linkTarget: "linkTarget", variant: "variant", applicationTheme: "applicationTheme", closeButtonTooltip: "closeButtonTooltip", ariaDescribedby: "ariaDescribedby" }, ngImport: i0, template: "<ng-container>\n  @if (visible) {\n    <div\n      [ngClass]=\"snackbarType + ' ' + position\"\n      [@openClose]\n      class=\"snackbar-container\"\n      [attr.theme]=\"applicationTheme\"\n      [class.mobile]=\"variant === 'mobile'\"\n      [class.desktop]=\"variant === 'desktop'\"\n      (mouseenter)=\"onMouseEnter()\"\n      (mouseleave)=\"onMouseLeave()\"\n      data-testid=\"snackbar-wrapper\"\n      [attr.data-test-snackbar-type]=\"snackbarType\"\n      [attr.aria-describedby]=\"'describedby'\"\n      role=\"alert\"\n      [attr.aria-labelledby]=\"'labelledby'\"\n    >\n      <span style=\"position: absolute; left: -9999px\" id=\"labelledby\">{{\n        'ALERT_BANNER.' + (snackbarType | uppercase) | uiTranslate | async\n      }}</span>\n      <span style=\"position: absolute; left: -9999px\"\n        >{{ message }}\n        @if (!!linkText) {\n          <a [target]=\"linkTarget\" [href]=\"linkUrl\" (click)=\"onLinkClick($event)\">{{ linkText }}</a>\n        }\n      </span>\n      <span [style.display]=\"'none'\" id=\"describedby\">{{ ariaDescribedby }}</span>\n      <div\n        aria-hidden=\"true\"\n        class=\"snackbar-text\"\n        [matTooltip]=\"message.length > maxCharacters ? message : ''\"\n        data-testid=\"snackbar-content\"\n      >\n        @if (applicationTheme === 'classic') {\n          <ui-icon [name]=\"iconName\" size=\"24\"></ui-icon>\n        }\n        {{ message.length > maxCharacters ? (message | slice: 0 : maxCharacters) + '..' : message }}\n        @if (safeHtml) {\n          <div [innerHTML]=\"safeHtml\"></div>\n        }\n        @if (!!linkText) {\n          <a [target]=\"linkTarget\" [href]=\"linkUrl\" (click)=\"onLinkClick($event)\">{{ linkText }}</a>\n        }\n      </div>\n      @if (includeDismissButton && applicationTheme === 'classic') {\n        <ui-button\n          variant=\"text\"\n          [label]=\"(translationContext + 'DISMISS' | uiTranslate | async)!\"\n          [applicationTheme]=\"applicationTheme !== 'classic' ? 'light' : 'classic'\"\n          (buttonClickEvent)=\"dismissClick()\"\n          data-testid=\"snackbar-dismiss-button\"\n        ></ui-button>\n      }\n      @if (includeDismissButton && applicationTheme !== 'classic') {\n        <ui-button\n          [variant]=\"'icon-button'\"\n          [applicationTheme]=\"'light'\"\n          [iconName]=\"'Close-in-line'\"\n          [size]=\"'small'\"\n          [tooltip]=\"(closeButtonTooltip || ('COMMON.CLOSE' | uiTranslate | async))!\"\n          (click)=\"dismissClick()\"\n          data-testid=\"snackbar-dismiss-button\"\n        ></ui-button>\n      }\n    </div>\n  }\n</ng-container>\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{display:flex;width:100%;justify-content:center}:host .snackbar-container{max-width:600px}:host .alert-container,:host .snackbar-container{margin:0 auto;display:flex;padding:0 14px;border-radius:4px;align-items:center;justify-content:space-between;opacity:1;min-height:48px}:host .alert-container.fixed,:host .snackbar-container.fixed{position:fixed}:host .alert-container.static,:host .snackbar-container.static{position:relative}:host .alert-container ui-icon,:host .snackbar-container ui-icon{margin-right:14px}:host .alert-container ui-button,:host .snackbar-container ui-button{margin-left:14px}:host .alert-container ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container ::ng-deep button.mat-mdc-unelevated-button.big{padding:0;min-width:auto}:host .alert-container .alert-text,:host .alert-container .snackbar-text,:host .snackbar-container .alert-text,:host .snackbar-container .snackbar-text{display:flex;align-items:center;color:#000}:host .alert-container .alert-text a,:host .alert-container .snackbar-text a,:host .snackbar-container .alert-text a,:host .snackbar-container .snackbar-text a{color:#000;text-decoration:underline;font-weight:700}:host .alert-container .alert-text a:hover,:host .alert-container .alert-text a:visited,:host .alert-container .alert-text a:focus,:host .alert-container .snackbar-text a:hover,:host .alert-container .snackbar-text a:visited,:host .alert-container .snackbar-text a:focus,:host .snackbar-container .alert-text a:hover,:host .snackbar-container .alert-text a:visited,:host .snackbar-container .alert-text a:focus,:host .snackbar-container .snackbar-text a:hover,:host .snackbar-container .snackbar-text a:visited,:host .snackbar-container .snackbar-text a:focus{text-decoration:none}:host .alert-container.success,:host .snackbar-container.success{background-color:#cbd6cb}:host .alert-container.info,:host .snackbar-container.info{background-color:#c8d7de}:host .alert-container.warning,:host .snackbar-container.warning{background-color:#f0d6bb}:host .alert-container.error,:host .snackbar-container.error{background-color:#e3c3c6}:host .alert-container[theme=dark].success,:host .alert-container[theme=light].success,:host .snackbar-container[theme=dark].success,:host .snackbar-container[theme=light].success{background-color:#aae47a}:host .alert-container[theme=dark].info,:host .alert-container[theme=light].info,:host .snackbar-container[theme=dark].info,:host .snackbar-container[theme=light].info{background-color:#d9e8ff}:host .alert-container[theme=dark].warning,:host .alert-container[theme=light].warning,:host .snackbar-container[theme=dark].warning,:host .snackbar-container[theme=light].warning{background-color:#ffe1b3}:host .alert-container[theme=dark].error,:host .alert-container[theme=light].error,:host .snackbar-container[theme=dark].error,:host .snackbar-container[theme=light].error{background-color:#ffac9a}:host .alert-container[theme=dark].ai,:host .alert-container[theme=light].ai,:host .snackbar-container[theme=dark].ai,:host .snackbar-container[theme=light].ai{background-color:#fff2fc;border:1px solid #ffe6fa;padding:12px 16px}:host .alert-container[theme=dark].ai ::ng-deep button.mat-mdc-unelevated-button.big,:host .alert-container[theme=light].ai ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container[theme=dark].ai ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container[theme=light].ai ::ng-deep button.mat-mdc-unelevated-button.big{padding:12px 24px}::ng-deep .display-none{display:none!important}@media(max-width:600px){:host .alert-container,:host .snackbar-container{padding:8px 14px}}:host .snackbar-container{bottom:0;z-index:98}:host .snackbar-container[theme=dark] ui-icon,:host .snackbar-container[theme=light] ui-icon{margin-right:10px;cursor:pointer}:host .snackbar-container[theme=dark] .snackbar-text,:host .snackbar-container[theme=light] .snackbar-text{padding-left:10px;margin-right:8px}:host .snackbar-container[theme=dark] .snackbar-text a,:host .snackbar-container[theme=light] .snackbar-text a{margin-left:4px}:host .snackbar-container[theme=dark].desktop,:host .snackbar-container[theme=light].desktop{border-radius:24px;box-shadow:0 4px 16px #2424240a;width:fit-content;max-width:600px;min-height:48px;line-height:1.4;font-size:14px;padding:16px 24px}:host .snackbar-container[theme=dark].mobile,:host .snackbar-container[theme=light].mobile{width:100%;min-width:100%;word-break:break-word}:host .mat-mdc-snack-bar-container{margin:16px 8px}::ng-deep .mdc-snackbar__surface{height:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i2.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "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"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], animations: [
             trigger('openClose', [
                 transition(':enter', [
                     style({ bottom: '-55px', opacity: 0 }),
@@ -185,7 +185,7 @@ class SnackbarComponent {
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SnackbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SnackbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-snackbar', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
                         trigger('openClose', [
@@ -276,30 +276,30 @@ class SnackbarService {
         }
         return componentRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SnackbarService, deps: [{ token: i1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SnackbarService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SnackbarService, deps: [{ token: i1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SnackbarService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SnackbarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SnackbarService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.MatSnackBar }] });
 
 class SnackbarComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SnackbarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: SnackbarComponentModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SnackbarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: SnackbarComponentModule, imports: [CommonModule,
             ButtonComponentModule,
             IconComponentModule,
             UiTranslatePipe,
             MatSnackBarModule,
             MatTooltipModule,
             SnackbarComponent], exports: [SnackbarComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SnackbarComponentModule, providers: [SnackbarService], imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SnackbarComponentModule, providers: [SnackbarService], imports: [CommonModule,
             ButtonComponentModule,
             IconComponentModule,
             MatSnackBarModule,
             MatTooltipModule,
             SnackbarComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SnackbarComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SnackbarComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/testgorilla-tgo-ui-components-spider-chart.mjs

@@ -442,10 +442,10 @@ class SpiderChartComponent {
         const firstLine = this.getFirstLine(label);
         return label.substring(firstLine.length).trim();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SpiderChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SpiderChartComponent, isStandalone: true, selector: "ui-spider-chart", inputs: { size: "size", spiderChartData: "spiderChartData", stepSize: "stepSize", ariaLabel: "ariaLabel", loading: "loading", applicationTheme: "applicationTheme" }, viewQueries: [{ propertyName: "chart", first: true, predicate: BaseChartDirective, descendants: true }, { propertyName: "labelContainers", predicate: ["labelContainer"], descendants: true }, { propertyName: "fakeDataPoints", predicate: ["fakeDataPoints"], descendants: true }, { propertyName: "fakeDataPointsSecondary", predicate: ["fakeDataPointsSecondary"], descendants: true }, { propertyName: "legendItems", predicate: ["legendItem"], descendants: true }], ngImport: i0, template: "<div class=\"spider-chart-container\" tabindex=\"0\" [attr.aria-label]=\"ariaLabel\">\n  <div\n    class=\"spacing-container\"\n    [ngClass]=\"{ 'small-spacing': radarChartData.labels && radarChartData.labels.length % 2 === 1 && !loading }\"\n  >\n    <div\n      class=\"chart-container\"\n      [style.width]=\"size === 'large' ? '280px' : '200px'\"\n      [style.height]=\"size === 'large' ? '280px' : '200px'\"\n    >\n      @if (!loading) {\n        <canvas baseChart [data]=\"radarChartData\" [options]=\"radarChartOptions\" type=\"radar\" class=\"chart\"> </canvas>\n      } @else {\n        <canvas baseChart [data]=\"loadingChartData\" [options]=\"loadingChartOptions\" type=\"radar\" class=\"chart\">\n        </canvas>\n        <ui-spinner></ui-spinner>\n      }\n\n      @if (labelPositionsVisible) {\n        <div class=\"overlay-container\" [style.visibility]=\"labelStylesCached ? 'visible' : 'hidden'\">\n          @for (label of spiderChartData.labels; track label) {\n            <div\n              class=\"label-container\"\n              #labelContainer\n              [matTooltip]=\"spiderChartData.labelDescription[$index]\"\n              [tabindex]=\"$index === 0 ? '0' : '-1'\"\n              (keydown)=\"onLabelKeyDown($event, $index)\"\n              [attr.aria-label]=\"spiderChartData.labelDescription[$index]\"\n              [style.left]=\"labelStyles[label]?.left\"\n              [style.bottom]=\"labelStyles[label]?.bottom\"\n            >\n              @if (!(label.length > 20 && size === 'large' && spiderChartData.labels.length < 9)) {\n                <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n                  {{ label }}\n                </div>\n              } @else {\n                <div>\n                  <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n                    {{ label | memoizeFunc: getFirstLine }}\n                  </div>\n                  <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n                    {{ label | memoizeFunc: getSecondLine : this }}\n                  </div>\n                </div>\n              }\n              <span class=\"value\">{{ spiderChartData.plotData[0].data[$index] }}</span>\n            </div>\n            <span\n              class=\"fake-data-points\"\n              #fakeDataPoints\n              [tabindex]=\"focusedLabelIndex === $index ? '0' : '-1'\"\n              (focus)=\"$index === focusedLabelIndex ? showTooltipForDataPoint($index) : null\"\n              (keydown)=\"onFakeDataPointsKeyDown($event, $index)\"\n            >\n            </span>\n            @if (radarChartData.datasets.length > 1) {\n              <span\n                class=\"fake-data-points-secondary\"\n                #fakeDataPointsSecondary\n                [tabindex]=\"focusedFakeDataPointIndex === $index ? '0' : '-1'\"\n                (focus)=\"$index === focusedFakeDataPointIndex ? showTooltipForDataPoint($index, true) : null\"\n                (keydown)=\"onFakeDataPointsKeyDown($event, $index, true)\"\n              >\n              </span>\n            }\n          }\n        </div>\n      }\n    </div>\n  </div>\n  @if (radarChartData.datasets.length > 0) {\n    <div class=\"legend-container\">\n      @for (dataset of radarChartData.datasets; track dataset.label) {\n        <div\n          class=\"legend-item\"\n          (click)=\"toggleDatasetVisibility($index)\"\n          [tabindex]=\"$index === 0 ? '0' : '-1'\"\n          role=\"button\"\n          [attr.aria-pressed]=\"isDatasetVisible($index) ? false : true\"\n          [attr.aria-label]=\"\n            isDatasetVisible($index)\n              ? (translationContext + 'DATASET_VISIBLE' | uiTranslate: { dataset: dataset.label } | async)\n              : (translationContext + 'DATASET_HIDDEN' | uiTranslate: { dataset: dataset.label } | async)\n          \"\n          (keydown)=\"onLegendItemKeyDown($event, $index)\"\n          #legendItem\n        >\n          <span class=\"legend-line\" [ngClass]=\"{ 'solid-line': $index === 0, 'dashed-line': $index === 1 }\"></span>\n          <span class=\"legend-label\" [style.text-decoration]=\"isDatasetVisible($index) ? 'none' : 'line-through'\">\n            {{ dataset.label }}\n          </span>\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}.spider-chart-container{display:flex;flex-direction:column;align-items:center}.spider-chart-container .spacing-container{padding:40px 140px}.spider-chart-container .spacing-container.small-spacing{padding:0 80px}.spider-chart-container .spacing-container .chart-container{position:relative}.spider-chart-container .spacing-container .chart-container .overlay-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container{display:flex;gap:4px;position:absolute;pointer-events:all;cursor:pointer}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .fake-data-points{visibility:hidden}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container:focus{outline:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .label{font-size:12px;border-bottom:1px dashed #d3d3d3;white-space:nowrap;overflow:hidden;width:fit-content;text-overflow:ellipsis}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .value{font-weight:700}.spider-chart-container .legend-container{display:flex;gap:16px;cursor:pointer}.spider-chart-container .legend-container .legend-item{display:flex;align-items:center;gap:8px}.spider-chart-container .legend-container .legend-item .legend-line{display:inline-block;width:11px;height:4px}.spider-chart-container .legend-container .legend-item .solid-line{background-color:#d410aa}.spider-chart-container .legend-container .legend-item .dashed-line{border-top:2px dashed #242424}:host ::ng-deep .spider-chart-container .spinner-container.loader{position:absolute}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: BaseChartDirective, selector: "canvas[baseChart]", inputs: ["type", "legend", "data", "options", "plugins", "labels", "datasets"], outputs: ["chartClick", "chartHover"], exportAs: ["base-chart"] }, { kind: "component", type: SpinnerComponent, selector: "ui-spinner", inputs: ["size", "isLoader", "text", "applicationTheme", "iconName", "iconSize"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: MemoizeFuncPipe, name: "memoizeFunc" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SpiderChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: SpiderChartComponent, isStandalone: true, selector: "ui-spider-chart", inputs: { size: "size", spiderChartData: "spiderChartData", stepSize: "stepSize", ariaLabel: "ariaLabel", loading: "loading", applicationTheme: "applicationTheme" }, viewQueries: [{ propertyName: "chart", first: true, predicate: BaseChartDirective, descendants: true }, { propertyName: "labelContainers", predicate: ["labelContainer"], descendants: true }, { propertyName: "fakeDataPoints", predicate: ["fakeDataPoints"], descendants: true }, { propertyName: "fakeDataPointsSecondary", predicate: ["fakeDataPointsSecondary"], descendants: true }, { propertyName: "legendItems", predicate: ["legendItem"], descendants: true }], ngImport: i0, template: "<div class=\"spider-chart-container\" tabindex=\"0\" [attr.aria-label]=\"ariaLabel\">\n  <div\n    class=\"spacing-container\"\n    [ngClass]=\"{ 'small-spacing': radarChartData.labels && radarChartData.labels.length % 2 === 1 && !loading }\"\n  >\n    <div\n      class=\"chart-container\"\n      [style.width]=\"size === 'large' ? '280px' : '200px'\"\n      [style.height]=\"size === 'large' ? '280px' : '200px'\"\n    >\n      @if (!loading) {\n        <canvas baseChart [data]=\"radarChartData\" [options]=\"radarChartOptions\" type=\"radar\" class=\"chart\"> </canvas>\n      } @else {\n        <canvas baseChart [data]=\"loadingChartData\" [options]=\"loadingChartOptions\" type=\"radar\" class=\"chart\">\n        </canvas>\n        <ui-spinner></ui-spinner>\n      }\n\n      @if (labelPositionsVisible) {\n        <div class=\"overlay-container\" [style.visibility]=\"labelStylesCached ? 'visible' : 'hidden'\">\n          @for (label of spiderChartData.labels; track label) {\n            <div\n              class=\"label-container\"\n              #labelContainer\n              [matTooltip]=\"spiderChartData.labelDescription[$index]\"\n              [tabindex]=\"$index === 0 ? '0' : '-1'\"\n              (keydown)=\"onLabelKeyDown($event, $index)\"\n              [attr.aria-label]=\"spiderChartData.labelDescription[$index]\"\n              [style.left]=\"labelStyles[label]?.left\"\n              [style.bottom]=\"labelStyles[label]?.bottom\"\n            >\n              @if (!(label.length > 20 && size === 'large' && spiderChartData.labels.length < 9)) {\n                <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n                  {{ label }}\n                </div>\n              } @else {\n                <div>\n                  <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n                    {{ label | memoizeFunc: getFirstLine }}\n                  </div>\n                  <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n                    {{ label | memoizeFunc: getSecondLine : this }}\n                  </div>\n                </div>\n              }\n              <span class=\"value\">{{ spiderChartData.plotData[0].data[$index] }}</span>\n            </div>\n            <span\n              class=\"fake-data-points\"\n              #fakeDataPoints\n              [tabindex]=\"focusedLabelIndex === $index ? '0' : '-1'\"\n              (focus)=\"$index === focusedLabelIndex ? showTooltipForDataPoint($index) : null\"\n              (keydown)=\"onFakeDataPointsKeyDown($event, $index)\"\n            >\n            </span>\n            @if (radarChartData.datasets.length > 1) {\n              <span\n                class=\"fake-data-points-secondary\"\n                #fakeDataPointsSecondary\n                [tabindex]=\"focusedFakeDataPointIndex === $index ? '0' : '-1'\"\n                (focus)=\"$index === focusedFakeDataPointIndex ? showTooltipForDataPoint($index, true) : null\"\n                (keydown)=\"onFakeDataPointsKeyDown($event, $index, true)\"\n              >\n              </span>\n            }\n          }\n        </div>\n      }\n    </div>\n  </div>\n  @if (radarChartData.datasets.length > 0) {\n    <div class=\"legend-container\">\n      @for (dataset of radarChartData.datasets; track dataset.label) {\n        <div\n          class=\"legend-item\"\n          (click)=\"toggleDatasetVisibility($index)\"\n          [tabindex]=\"$index === 0 ? '0' : '-1'\"\n          role=\"button\"\n          [attr.aria-pressed]=\"isDatasetVisible($index) ? false : true\"\n          [attr.aria-label]=\"\n            isDatasetVisible($index)\n              ? (translationContext + 'DATASET_VISIBLE' | uiTranslate: { dataset: dataset.label } | async)\n              : (translationContext + 'DATASET_HIDDEN' | uiTranslate: { dataset: dataset.label } | async)\n          \"\n          (keydown)=\"onLegendItemKeyDown($event, $index)\"\n          #legendItem\n        >\n          <span class=\"legend-line\" [ngClass]=\"{ 'solid-line': $index === 0, 'dashed-line': $index === 1 }\"></span>\n          <span class=\"legend-label\" [style.text-decoration]=\"isDatasetVisible($index) ? 'none' : 'line-through'\">\n            {{ dataset.label }}\n          </span>\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}.spider-chart-container{display:flex;flex-direction:column;align-items:center}.spider-chart-container .spacing-container{padding:40px 140px}.spider-chart-container .spacing-container.small-spacing{padding:0 80px}.spider-chart-container .spacing-container .chart-container{position:relative}.spider-chart-container .spacing-container .chart-container .overlay-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container{display:flex;gap:4px;position:absolute;pointer-events:all;cursor:pointer}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .fake-data-points{visibility:hidden}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container:focus{outline:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .label{font-size:12px;border-bottom:1px dashed #d3d3d3;white-space:nowrap;overflow:hidden;width:fit-content;text-overflow:ellipsis}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .value{font-weight:700}.spider-chart-container .legend-container{display:flex;gap:16px;cursor:pointer}.spider-chart-container .legend-container .legend-item{display:flex;align-items:center;gap:8px}.spider-chart-container .legend-container .legend-item .legend-line{display:inline-block;width:11px;height:4px}.spider-chart-container .legend-container .legend-item .solid-line{background-color:#d410aa}.spider-chart-container .legend-container .legend-item .dashed-line{border-top:2px dashed #242424}:host ::ng-deep .spider-chart-container .spinner-container.loader{position:absolute}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: BaseChartDirective, selector: "canvas[baseChart]", inputs: ["type", "legend", "data", "options", "plugins", "labels", "datasets"], outputs: ["chartClick", "chartHover"], exportAs: ["base-chart"] }, { kind: "component", type: SpinnerComponent, selector: "ui-spinner", inputs: ["size", "isLoader", "text", "applicationTheme", "iconName", "iconSize"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: MemoizeFuncPipe, name: "memoizeFunc" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SpiderChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SpiderChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-spider-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, BaseChartDirective, SpinnerComponent, MatTooltip, UiTranslatePipe, MemoizeFuncPipe, AsyncPipe], template: "<div class=\"spider-chart-container\" tabindex=\"0\" [attr.aria-label]=\"ariaLabel\">\n  <div\n    class=\"spacing-container\"\n    [ngClass]=\"{ 'small-spacing': radarChartData.labels && radarChartData.labels.length % 2 === 1 && !loading }\"\n  >\n    <div\n      class=\"chart-container\"\n      [style.width]=\"size === 'large' ? '280px' : '200px'\"\n      [style.height]=\"size === 'large' ? '280px' : '200px'\"\n    >\n      @if (!loading) {\n        <canvas baseChart [data]=\"radarChartData\" [options]=\"radarChartOptions\" type=\"radar\" class=\"chart\"> </canvas>\n      } @else {\n        <canvas baseChart [data]=\"loadingChartData\" [options]=\"loadingChartOptions\" type=\"radar\" class=\"chart\">\n        </canvas>\n        <ui-spinner></ui-spinner>\n      }\n\n      @if (labelPositionsVisible) {\n        <div class=\"overlay-container\" [style.visibility]=\"labelStylesCached ? 'visible' : 'hidden'\">\n          @for (label of spiderChartData.labels; track label) {\n            <div\n              class=\"label-container\"\n              #labelContainer\n              [matTooltip]=\"spiderChartData.labelDescription[$index]\"\n              [tabindex]=\"$index === 0 ? '0' : '-1'\"\n              (keydown)=\"onLabelKeyDown($event, $index)\"\n              [attr.aria-label]=\"spiderChartData.labelDescription[$index]\"\n              [style.left]=\"labelStyles[label]?.left\"\n              [style.bottom]=\"labelStyles[label]?.bottom\"\n            >\n              @if (!(label.length > 20 && size === 'large' && spiderChartData.labels.length < 9)) {\n                <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n                  {{ label }}\n                </div>\n              } @else {\n                <div>\n                  <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n                    {{ label | memoizeFunc: getFirstLine }}\n                  </div>\n                  <div class=\"label\" [style.max-width]=\"size === 'large' ? '135px' : '100px'\">\n                    {{ label | memoizeFunc: getSecondLine : this }}\n                  </div>\n                </div>\n              }\n              <span class=\"value\">{{ spiderChartData.plotData[0].data[$index] }}</span>\n            </div>\n            <span\n              class=\"fake-data-points\"\n              #fakeDataPoints\n              [tabindex]=\"focusedLabelIndex === $index ? '0' : '-1'\"\n              (focus)=\"$index === focusedLabelIndex ? showTooltipForDataPoint($index) : null\"\n              (keydown)=\"onFakeDataPointsKeyDown($event, $index)\"\n            >\n            </span>\n            @if (radarChartData.datasets.length > 1) {\n              <span\n                class=\"fake-data-points-secondary\"\n                #fakeDataPointsSecondary\n                [tabindex]=\"focusedFakeDataPointIndex === $index ? '0' : '-1'\"\n                (focus)=\"$index === focusedFakeDataPointIndex ? showTooltipForDataPoint($index, true) : null\"\n                (keydown)=\"onFakeDataPointsKeyDown($event, $index, true)\"\n              >\n              </span>\n            }\n          }\n        </div>\n      }\n    </div>\n  </div>\n  @if (radarChartData.datasets.length > 0) {\n    <div class=\"legend-container\">\n      @for (dataset of radarChartData.datasets; track dataset.label) {\n        <div\n          class=\"legend-item\"\n          (click)=\"toggleDatasetVisibility($index)\"\n          [tabindex]=\"$index === 0 ? '0' : '-1'\"\n          role=\"button\"\n          [attr.aria-pressed]=\"isDatasetVisible($index) ? false : true\"\n          [attr.aria-label]=\"\n            isDatasetVisible($index)\n              ? (translationContext + 'DATASET_VISIBLE' | uiTranslate: { dataset: dataset.label } | async)\n              : (translationContext + 'DATASET_HIDDEN' | uiTranslate: { dataset: dataset.label } | async)\n          \"\n          (keydown)=\"onLegendItemKeyDown($event, $index)\"\n          #legendItem\n        >\n          <span class=\"legend-line\" [ngClass]=\"{ 'solid-line': $index === 0, 'dashed-line': $index === 1 }\"></span>\n          <span class=\"legend-label\" [style.text-decoration]=\"isDatasetVisible($index) ? 'none' : 'line-through'\">\n            {{ dataset.label }}\n          </span>\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}.spider-chart-container{display:flex;flex-direction:column;align-items:center}.spider-chart-container .spacing-container{padding:40px 140px}.spider-chart-container .spacing-container.small-spacing{padding:0 80px}.spider-chart-container .spacing-container .chart-container{position:relative}.spider-chart-container .spacing-container .chart-container .overlay-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container{display:flex;gap:4px;position:absolute;pointer-events:all;cursor:pointer}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .fake-data-points{visibility:hidden}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container:focus{outline:none}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .label{font-size:12px;border-bottom:1px dashed #d3d3d3;white-space:nowrap;overflow:hidden;width:fit-content;text-overflow:ellipsis}.spider-chart-container .spacing-container .chart-container .overlay-container .label-container .value{font-weight:700}.spider-chart-container .legend-container{display:flex;gap:16px;cursor:pointer}.spider-chart-container .legend-container .legend-item{display:flex;align-items:center;gap:8px}.spider-chart-container .legend-container .legend-item .legend-line{display:inline-block;width:11px;height:4px}.spider-chart-container .legend-container .legend-item .solid-line{background-color:#d410aa}.spider-chart-container .legend-container .legend-item .dashed-line{border-top:2px dashed #242424}:host ::ng-deep .spider-chart-container .spinner-container.loader{position:absolute}\n"] }]
         }], propDecorators: { size: [{
@@ -479,8 +479,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 
 Chart.register(...registerables);
 class SpiderChartComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SpiderChartComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: SpiderChartComponentModule, imports: [NgClass,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SpiderChartComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: SpiderChartComponentModule, imports: [NgClass,
             UiTranslatePipe,
             BaseChartDirective,
             MatTooltipModule,
@@ -488,12 +488,12 @@ class SpiderChartComponentModule {
             SpinnerComponentModule,
             CommonModule,
             SpiderChartComponent], exports: [SpiderChartComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SpiderChartComponentModule, imports: [MatTooltipModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SpiderChartComponentModule, imports: [MatTooltipModule,
             SpinnerComponentModule,
             CommonModule,
             SpiderChartComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SpiderChartComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SpiderChartComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [SpiderChartComponent],

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

@@ -59,10 +59,10 @@ class SpinnerComponent {
         this.classes = `${this.size === 'large' ? 'large' : 'small'} ${this.isLoader ? 'loader' : ''} ${this.text ? 'with-text' : ''} ${this.applicationTheme}`;
         this.classes = this.classes.replace(/\s+/g, ' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SpinnerComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SpinnerComponent, isStandalone: true, selector: "ui-spinner", inputs: { size: "size", isLoader: "isLoader", text: "text", applicationTheme: "applicationTheme", iconName: "iconName", iconSize: "iconSize" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"spinner-container\"\n  [ngClass]=\"classes\"\n  [attr.theme]=\"applicationTheme\"\n  [attr.aria-label]=\"'COMMON.LOADING' | uiTranslate | async\"\n  role=\"alert\"\n>\n  @if (!iconName) {\n    <svg class=\"spinner\" viewBox=\"0 0 50 50\">\n      <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\"></circle>\n    </svg>\n  } @else {\n    <ui-icon [name]=\"iconName\" [size]=\"iconSize\"></ui-icon>\n  }\n\n  @if (text) {\n    <h3 class=\"spinner-text\">{{ text }}</h3>\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}.spinner-container.large{width:48px;height:48px;stroke-width:8px}.spinner-container.large .spinner{width:48px;height:48px}.spinner-container.small{stroke-width:4px;width:16px;height:16px}.spinner-container.small .spinner{width:16px;height:16px}.spinner-container.with-text{display:flex;flex-direction:column;align-items:center;justify-content:center;width:unset;height:unset}.spinner-container .spinner{animation:rotate 2s linear infinite;width:48px;height:48px}.spinner-container .spinner .path{stroke:#d410aa;stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}.spinner-container .spinner-text{margin-top:24px;max-width:330px;overflow-wrap:normal;text-align:center;font-size:16px;line-height:24px;font-weight:400;color:#242424;overflow:hidden;max-height:72px}.spinner-container.classic .spinner .path{stroke:#276678}.spinner-container.loader{position:fixed;top:50%;left:50%;z-index:999;transform:translate(-50%,-50%)}.spinner-container[theme=dark] .path{stroke:#fff!important}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i1.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { 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.18", ngImport: i0, type: SpinnerComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: SpinnerComponent, isStandalone: true, selector: "ui-spinner", inputs: { size: "size", isLoader: "isLoader", text: "text", applicationTheme: "applicationTheme", iconName: "iconName", iconSize: "iconSize" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"spinner-container\"\n  [ngClass]=\"classes\"\n  [attr.theme]=\"applicationTheme\"\n  [attr.aria-label]=\"'COMMON.LOADING' | uiTranslate | async\"\n  role=\"alert\"\n>\n  @if (!iconName) {\n    <svg class=\"spinner\" viewBox=\"0 0 50 50\">\n      <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\"></circle>\n    </svg>\n  } @else {\n    <ui-icon [name]=\"iconName\" [size]=\"iconSize\"></ui-icon>\n  }\n\n  @if (text) {\n    <h3 class=\"spinner-text\">{{ text }}</h3>\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}.spinner-container.large{width:48px;height:48px;stroke-width:8px}.spinner-container.large .spinner{width:48px;height:48px}.spinner-container.small{stroke-width:4px;width:16px;height:16px}.spinner-container.small .spinner{width:16px;height:16px}.spinner-container.with-text{display:flex;flex-direction:column;align-items:center;justify-content:center;width:unset;height:unset}.spinner-container .spinner{animation:rotate 2s linear infinite;width:48px;height:48px}.spinner-container .spinner .path{stroke:#d410aa;stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}.spinner-container .spinner-text{margin-top:24px;max-width:330px;overflow-wrap:normal;text-align:center;font-size:16px;line-height:24px;font-weight:400;color:#242424;overflow:hidden;max-height:72px}.spinner-container.classic .spinner .path{stroke:#276678}.spinner-container.loader{position:fixed;top:50%;left:50%;z-index:999;transform:translate(-50%,-50%)}.spinner-container[theme=dark] .path{stroke:#fff!important}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i1.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-spinner', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, IconComponentModule, UiTranslatePipe, AsyncPipe], template: "<div\n  class=\"spinner-container\"\n  [ngClass]=\"classes\"\n  [attr.theme]=\"applicationTheme\"\n  [attr.aria-label]=\"'COMMON.LOADING' | uiTranslate | async\"\n  role=\"alert\"\n>\n  @if (!iconName) {\n    <svg class=\"spinner\" viewBox=\"0 0 50 50\">\n      <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\"></circle>\n    </svg>\n  } @else {\n    <ui-icon [name]=\"iconName\" [size]=\"iconSize\"></ui-icon>\n  }\n\n  @if (text) {\n    <h3 class=\"spinner-text\">{{ text }}</h3>\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}.spinner-container.large{width:48px;height:48px;stroke-width:8px}.spinner-container.large .spinner{width:48px;height:48px}.spinner-container.small{stroke-width:4px;width:16px;height:16px}.spinner-container.small .spinner{width:16px;height:16px}.spinner-container.with-text{display:flex;flex-direction:column;align-items:center;justify-content:center;width:unset;height:unset}.spinner-container .spinner{animation:rotate 2s linear infinite;width:48px;height:48px}.spinner-container .spinner .path{stroke:#d410aa;stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}.spinner-container .spinner-text{margin-top:24px;max-width:330px;overflow-wrap:normal;text-align:center;font-size:16px;line-height:24px;font-weight:400;color:#242424;overflow:hidden;max-height:72px}.spinner-container.classic .spinner .path{stroke:#276678}.spinner-container.loader{position:fixed;top:50%;left:50%;z-index:999;transform:translate(-50%,-50%)}.spinner-container[theme=dark] .path{stroke:#fff!important}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -85,11 +85,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }] } });
 
 class SpinnerComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SpinnerComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: SpinnerComponentModule, imports: [NgClass, UiTranslatePipe, AsyncPipe, IconComponentModule, SpinnerComponent], exports: [SpinnerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SpinnerComponentModule, imports: [IconComponentModule, SpinnerComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SpinnerComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: SpinnerComponentModule, imports: [NgClass, UiTranslatePipe, AsyncPipe, IconComponentModule, SpinnerComponent], exports: [SpinnerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SpinnerComponentModule, imports: [IconComponentModule, SpinnerComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SpinnerComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SpinnerComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [SpinnerComponent],