@testgorilla/tgo-ui 11.22.3 → 12.0.0

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

@@ -1,163 +1,206 @@
-import { NgStyle, NgClass, CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { EventEmitter, signal, Output, Input, ViewChildren, Optional, Inject, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { hexToRgbWithAlpha } from '@testgorilla/tgo-ui/components/core';
-
-class ScaleComponent {
-    /**
-     * The max number of items in the scale.
-     * @type {number}
-     * @memberof ScaleComponent
-     */
-    set length(length) {
-        this.items = Array(Math.max(length, this.MIN_LENGTH))
-            .fill(0)
-            .map((_, i) => i);
-    }
-    itemTestId(item) {
-        return this.testId ? `${this.testId}-${item + 1}` : null;
-    }
-    constructor(defaultAppTheme) {
-        this.defaultAppTheme = defaultAppTheme;
-        this.MIN_LENGTH = 1;
-        this.DEFAULT_LENGTH = 5;
-        this.items = [];
-        /**
-         * The value representing the selected item of the scale.
-         * @type {number}
-         * @memberof ScaleComponent
-         */
-        this.selectedIndex = null;
-        /**
-         *
-         * Defines the application theme
-         *
-         * @type {ApplicationTheme}
-         * @memberof ScaleComponent
-         */
-        this.applicationTheme = 'light';
-        /**
-         * Color of the option hover.
-         * Defaults to Test Gorilla primary color.
-         *
-         * @type {string}
-         * @memberof ScaleComponent
-         */
-        this.companyColor = '';
-        this.testId = null;
-        this.ariaLabel = '';
-        this.selectedIndexChange = new EventEmitter();
-        this.styles = signal({ '--hover-color': '#FFB3EE', '--selected-color': '#D410AA' }, ...(ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []));
-        if (defaultAppTheme) {
-            this.applicationTheme = defaultAppTheme;
-        }
-        this.length = this.DEFAULT_LENGTH;
-    }
-    ngOnInit() {
-        if (this.companyColor) {
-            this.setCompanyColor();
-        }
-    }
-    ngOnChanges(changes) {
-        if (changes['companyColor']) {
-            this.setCompanyColor();
-        }
-    }
-    select(index) {
-        this.selectedIndex = index;
-        this.selectedIndexChange.emit(this.selectedIndex);
-    }
-    onKeyDown(event, index) {
-        this.selectedIndex ??= 0;
-        if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
-            // Move to the next item (wrap around)
-            this.select((index + 1) % this.items.length);
-            this.focusItem(this.selectedIndex);
-        }
-        else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
-            // Move to the previous item (wrap around)
-            this.select((index - 1 + this.items.length) % this.items.length);
-            this.focusItem(this.selectedIndex);
-        }
-        else if (event.key === ' ' || event.key === 'Enter') {
-            // Select the current item
-            this.select(index);
-            this.focusItem(this.selectedIndex);
-        }
-    }
-    focusItem(index) {
-        const element = this.scaleItems?.toArray()[index]?.nativeElement;
-        if (element) {
-            element.focus();
-        }
-    }
-    getAriaLabel(index) {
-        if (index === 0) {
-            return '1 - Not at all important';
-        }
-        else if (index === 4) {
-            return '5 - Very important';
-        }
-        return '';
-    }
-    setCompanyColor() {
-        const styles = this.styles();
-        styles['--hover-color'] = hexToRgbWithAlpha(this.companyColor);
-        styles['--selected-color'] = this.companyColor;
-        this.styles.set(styles);
-    }
-    onFocus(item) {
-        // If no item is selected when the component receives focus, select the first item
-        if (this.selectedIndex === null && item === 0) {
-            this.select(0);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ScaleComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: ScaleComponent, isStandalone: true, selector: "ui-scale", inputs: { selectedIndex: "selectedIndex", length: "length", applicationTheme: "applicationTheme", companyColor: "companyColor", testId: "testId", ariaLabel: "ariaLabel" }, outputs: { selectedIndexChange: "selectedIndexChange" }, viewQueries: [{ propertyName: "scaleItems", predicate: ["scaleItem"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  [style.--scale-count]=\"items.length\"\n  class=\"scale\"\n  [ngStyle]=\"styles()\"\n  [ngClass]=\"{ 'scale-classic': applicationTheme === 'classic' }\"\n  [attr.data-testid]=\"testId\"\n  [attr.aria-label]=\"ariaLabel || null\"\n  role=\"radiogroup\"\n>\n  @for (item of items; track item) {\n    <div\n      class=\"scale-item\"\n      (click)=\"select(item)\"\n      #scaleItem\n      role=\"radio\"\n      (keydown)=\"onKeyDown($event, item)\"\n      (focus)=\"onFocus(item)\"\n      [class.scale-item-focus-prev]=\"selectedIndex && selectedIndex > 0 ? item === selectedIndex - 1 : false\"\n      [attr.tabindex]=\"selectedIndex === null ? (item === 0 ? '0' : '-1') : item === selectedIndex ? '0' : '-1'\"\n      [attr.aria-checked]=\"\n        selectedIndex === null ? (item === 0 ? 'true' : 'false') : item === selectedIndex ? 'true' : 'false'\n      \"\n      [attr.aria-label]=\"getAriaLabel(item)\"\n      [ngClass]=\"{ 'scale-item-selected': item === selectedIndex }\"\n      [attr.data-testid]=\"itemTestId(item)\"\n    >\n      {{ item + 1 }}\n    </div>\n  }\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.scale{display:flex;align-content:center;justify-content:flex-start;align-items:center;width:100%}.scale-item{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;width:calc(100% / var(--scale-count));min-width:24px;height:48px;border:1px solid #919191;border-left:0;cursor:pointer;font-size:16px;font-weight:400;font-family:ModernGothic,serif;background-color:#fff}.scale-item:hover:not(.scale-item-selected){background-color:var(--hover-color)}.scale-item:first-child{border-radius:10px 0 0 10px;border-left:1px solid #919191}.scale-item:last-child{border-radius:0 10px 10px 0}.scale-item-selected{background-color:var(--selected-color);color:#fff;font-weight:700}@keyframes focus-ring-animation{0%{box-shadow:0 0 0 4px #242424}to{box-shadow:0 0 0 2px #242424}}.scale-item.scale-item-focus-prev{border-right:none}.scale-item:focus-visible{outline:none;border-radius:8px;border:2px solid #ffffff;box-shadow:0 0 0 2px #242424;z-index:1;animation:focus-ring-animation .4s forwards}.scale-classic .scale-item{border-color:#e0e0e0;font-family:Open Sans,serif}.scale-classic .scale-item:first-child{border-radius:4px 0 0 4px;border-left:1px solid #e0e0e0}.scale-classic .scale-item:last-child{border-radius:0 4px 4px 0}.scale-classic .scale-item:not(.scale-item-selected){color:#242424}.scale-classic .scale-item:hover:not(.scale-item-selected){background-color:#b5ddd5}.scale-classic .scale-item-selected{background-color:#46a997}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ScaleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-scale', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgStyle, NgClass], template: "<div\n  [style.--scale-count]=\"items.length\"\n  class=\"scale\"\n  [ngStyle]=\"styles()\"\n  [ngClass]=\"{ 'scale-classic': applicationTheme === 'classic' }\"\n  [attr.data-testid]=\"testId\"\n  [attr.aria-label]=\"ariaLabel || null\"\n  role=\"radiogroup\"\n>\n  @for (item of items; track item) {\n    <div\n      class=\"scale-item\"\n      (click)=\"select(item)\"\n      #scaleItem\n      role=\"radio\"\n      (keydown)=\"onKeyDown($event, item)\"\n      (focus)=\"onFocus(item)\"\n      [class.scale-item-focus-prev]=\"selectedIndex && selectedIndex > 0 ? item === selectedIndex - 1 : false\"\n      [attr.tabindex]=\"selectedIndex === null ? (item === 0 ? '0' : '-1') : item === selectedIndex ? '0' : '-1'\"\n      [attr.aria-checked]=\"\n        selectedIndex === null ? (item === 0 ? 'true' : 'false') : item === selectedIndex ? 'true' : 'false'\n      \"\n      [attr.aria-label]=\"getAriaLabel(item)\"\n      [ngClass]=\"{ 'scale-item-selected': item === selectedIndex }\"\n      [attr.data-testid]=\"itemTestId(item)\"\n    >\n      {{ item + 1 }}\n    </div>\n  }\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.scale{display:flex;align-content:center;justify-content:flex-start;align-items:center;width:100%}.scale-item{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;width:calc(100% / var(--scale-count));min-width:24px;height:48px;border:1px solid #919191;border-left:0;cursor:pointer;font-size:16px;font-weight:400;font-family:ModernGothic,serif;background-color:#fff}.scale-item:hover:not(.scale-item-selected){background-color:var(--hover-color)}.scale-item:first-child{border-radius:10px 0 0 10px;border-left:1px solid #919191}.scale-item:last-child{border-radius:0 10px 10px 0}.scale-item-selected{background-color:var(--selected-color);color:#fff;font-weight:700}@keyframes focus-ring-animation{0%{box-shadow:0 0 0 4px #242424}to{box-shadow:0 0 0 2px #242424}}.scale-item.scale-item-focus-prev{border-right:none}.scale-item:focus-visible{outline:none;border-radius:8px;border:2px solid #ffffff;box-shadow:0 0 0 2px #242424;z-index:1;animation:focus-ring-animation .4s forwards}.scale-classic .scale-item{border-color:#e0e0e0;font-family:Open Sans,serif}.scale-classic .scale-item:first-child{border-radius:4px 0 0 4px;border-left:1px solid #e0e0e0}.scale-classic .scale-item:last-child{border-radius:0 4px 4px 0}.scale-classic .scale-item:not(.scale-item-selected){color:#242424}.scale-classic .scale-item:hover:not(.scale-item-selected){background-color:#b5ddd5}.scale-classic .scale-item-selected{background-color:#46a997}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: ['CANOPYUI_DEFAULT_APPLICATION_THEME']
-                }] }], propDecorators: { scaleItems: [{
-                type: ViewChildren,
-                args: ['scaleItem']
-            }], selectedIndex: [{
-                type: Input
-            }], length: [{
-                type: Input
-            }], applicationTheme: [{
-                type: Input
-            }], companyColor: [{
-                type: Input
-            }], testId: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input
-            }], selectedIndexChange: [{
-                type: Output
-            }] } });
-
-class ScaleComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ScaleComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: ScaleComponentModule, imports: [CommonModule, ScaleComponent], exports: [ScaleComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ScaleComponentModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ScaleComponentModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, ScaleComponent],
-                    exports: [ScaleComponent],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import { CommonModule, NgClass, NgStyle } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, NgModule, Optional, Output, ViewChildren, signal } from "@angular/core";
+import { hexToRgbWithAlpha } from "@testgorilla/tgo-ui/components/core";
+var ScaleComponent = class ScaleComponent {
+	set length(length) {
+		this.items = Array(Math.max(length, this.MIN_LENGTH)).fill(0).map((_, i) => i);
+	}
+	itemTestId(item) {
+		return this.testId ? `${this.testId}-${item + 1}` : null;
+	}
+	constructor(defaultAppTheme) {
+		this.defaultAppTheme = defaultAppTheme;
+		this.MIN_LENGTH = 1;
+		this.DEFAULT_LENGTH = 5;
+		this.items = [];
+		this.selectedIndex = null;
+		this.applicationTheme = "light";
+		this.companyColor = "";
+		this.testId = null;
+		this.ariaLabel = "";
+		this.selectedIndexChange = new EventEmitter();
+		this.styles = signal({
+			"--hover-color": "#FFB3EE",
+			"--selected-color": "#D410AA"
+		}, ...ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []);
+		if (defaultAppTheme) this.applicationTheme = defaultAppTheme;
+		this.length = this.DEFAULT_LENGTH;
+	}
+	ngOnInit() {
+		if (this.companyColor) this.setCompanyColor();
+	}
+	ngOnChanges(changes) {
+		if (changes["companyColor"]) this.setCompanyColor();
+	}
+	select(index) {
+		this.selectedIndex = index;
+		this.selectedIndexChange.emit(this.selectedIndex);
+	}
+	onKeyDown(event, index) {
+		this.selectedIndex ??= 0;
+		if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+			this.select((index + 1) % this.items.length);
+			this.focusItem(this.selectedIndex);
+		} else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+			this.select((index - 1 + this.items.length) % this.items.length);
+			this.focusItem(this.selectedIndex);
+		} else if (event.key === " " || event.key === "Enter") {
+			this.select(index);
+			this.focusItem(this.selectedIndex);
+		}
+	}
+	focusItem(index) {
+		const element = this.scaleItems?.toArray()[index]?.nativeElement;
+		if (element) element.focus();
+	}
+	getAriaLabel(index) {
+		if (index === 0) return "1 - Not at all important";
+		else if (index === 4) return "5 - Very important";
+		return "";
+	}
+	setCompanyColor() {
+		const styles = this.styles();
+		styles["--hover-color"] = hexToRgbWithAlpha(this.companyColor);
+		styles["--selected-color"] = this.companyColor;
+		this.styles.set(styles);
+	}
+	onFocus(item) {
+		if (this.selectedIndex === null && item === 0) this.select(0);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: ScaleComponent,
+			deps: [{
+				token: "CANOPYUI_DEFAULT_APPLICATION_THEME",
+				optional: true
+			}],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.4",
+			type: ScaleComponent,
+			isStandalone: true,
+			selector: "ui-scale",
+			inputs: {
+				selectedIndex: "selectedIndex",
+				length: "length",
+				applicationTheme: "applicationTheme",
+				companyColor: "companyColor",
+				testId: "testId",
+				ariaLabel: "ariaLabel"
+			},
+			outputs: { selectedIndexChange: "selectedIndexChange" },
+			viewQueries: [{
+				propertyName: "scaleItems",
+				predicate: ["scaleItem"],
+				descendants: true
+			}],
+			usesOnChanges: true,
+			ngImport: i0,
+			template: "<div\n  [style.--scale-count]=\"items.length\"\n  class=\"scale\"\n  [ngStyle]=\"styles()\"\n  [ngClass]=\"{ 'scale-classic': applicationTheme === 'classic' }\"\n  [attr.data-testid]=\"testId\"\n  [attr.aria-label]=\"ariaLabel || null\"\n  role=\"radiogroup\"\n>\n  @for (item of items; track item) {\n    <div\n      class=\"scale-item\"\n      (click)=\"select(item)\"\n      #scaleItem\n      role=\"radio\"\n      (keydown)=\"onKeyDown($event, item)\"\n      (focus)=\"onFocus(item)\"\n      [class.scale-item-focus-prev]=\"selectedIndex && selectedIndex > 0 ? item === selectedIndex - 1 : false\"\n      [attr.tabindex]=\"selectedIndex === null ? (item === 0 ? '0' : '-1') : item === selectedIndex ? '0' : '-1'\"\n      [attr.aria-checked]=\"\n        selectedIndex === null ? (item === 0 ? 'true' : 'false') : item === selectedIndex ? 'true' : 'false'\n      \"\n      [attr.aria-label]=\"getAriaLabel(item)\"\n      [ngClass]=\"{ 'scale-item-selected': item === selectedIndex }\"\n      [attr.data-testid]=\"itemTestId(item)\"\n    >\n      {{ item + 1 }}\n    </div>\n  }\n</div>\n",
+			styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.scale{display:flex;align-content:center;justify-content:flex-start;align-items:center;width:100%}.scale-item{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;width:calc(100% / var(--scale-count));min-width:24px;height:48px;border:1px solid #919191;border-left:0;cursor:pointer;font-size:16px;font-weight:400;font-family:ModernGothic,serif;background-color:#fff}.scale-item:hover:not(.scale-item-selected){background-color:var(--hover-color)}.scale-item:first-child{border-radius:10px 0 0 10px;border-left:1px solid #919191}.scale-item:last-child{border-radius:0 10px 10px 0}.scale-item-selected{background-color:var(--selected-color);color:#fff;font-weight:700}@keyframes focus-ring-animation{0%{box-shadow:0 0 0 4px #242424}to{box-shadow:0 0 0 2px #242424}}.scale-item.scale-item-focus-prev{border-right:none}.scale-item:focus-visible{outline:none;border-radius:8px;border:2px solid #ffffff;box-shadow:0 0 0 2px #242424;z-index:1;animation:focus-ring-animation .4s forwards}.scale-classic .scale-item{border-color:#e0e0e0;font-family:Open Sans,serif}.scale-classic .scale-item:first-child{border-radius:4px 0 0 4px;border-left:1px solid #e0e0e0}.scale-classic .scale-item:last-child{border-radius:0 4px 4px 0}.scale-classic .scale-item:not(.scale-item-selected){color:#242424}.scale-classic .scale-item:hover:not(.scale-item-selected){background-color:#b5ddd5}.scale-classic .scale-item-selected{background-color:#46a997}\n"],
+			dependencies: [{
+				kind: "directive",
+				type: NgStyle,
+				selector: "[ngStyle]",
+				inputs: ["ngStyle"]
+			}, {
+				kind: "directive",
+				type: NgClass,
+				selector: "[ngClass]",
+				inputs: ["class", "ngClass"]
+			}],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: ScaleComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-scale",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [NgStyle, NgClass],
+			template: "<div\n  [style.--scale-count]=\"items.length\"\n  class=\"scale\"\n  [ngStyle]=\"styles()\"\n  [ngClass]=\"{ 'scale-classic': applicationTheme === 'classic' }\"\n  [attr.data-testid]=\"testId\"\n  [attr.aria-label]=\"ariaLabel || null\"\n  role=\"radiogroup\"\n>\n  @for (item of items; track item) {\n    <div\n      class=\"scale-item\"\n      (click)=\"select(item)\"\n      #scaleItem\n      role=\"radio\"\n      (keydown)=\"onKeyDown($event, item)\"\n      (focus)=\"onFocus(item)\"\n      [class.scale-item-focus-prev]=\"selectedIndex && selectedIndex > 0 ? item === selectedIndex - 1 : false\"\n      [attr.tabindex]=\"selectedIndex === null ? (item === 0 ? '0' : '-1') : item === selectedIndex ? '0' : '-1'\"\n      [attr.aria-checked]=\"\n        selectedIndex === null ? (item === 0 ? 'true' : 'false') : item === selectedIndex ? 'true' : 'false'\n      \"\n      [attr.aria-label]=\"getAriaLabel(item)\"\n      [ngClass]=\"{ 'scale-item-selected': item === selectedIndex }\"\n      [attr.data-testid]=\"itemTestId(item)\"\n    >\n      {{ item + 1 }}\n    </div>\n  }\n</div>\n",
+			styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.scale{display:flex;align-content:center;justify-content:flex-start;align-items:center;width:100%}.scale-item{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;width:calc(100% / var(--scale-count));min-width:24px;height:48px;border:1px solid #919191;border-left:0;cursor:pointer;font-size:16px;font-weight:400;font-family:ModernGothic,serif;background-color:#fff}.scale-item:hover:not(.scale-item-selected){background-color:var(--hover-color)}.scale-item:first-child{border-radius:10px 0 0 10px;border-left:1px solid #919191}.scale-item:last-child{border-radius:0 10px 10px 0}.scale-item-selected{background-color:var(--selected-color);color:#fff;font-weight:700}@keyframes focus-ring-animation{0%{box-shadow:0 0 0 4px #242424}to{box-shadow:0 0 0 2px #242424}}.scale-item.scale-item-focus-prev{border-right:none}.scale-item:focus-visible{outline:none;border-radius:8px;border:2px solid #ffffff;box-shadow:0 0 0 2px #242424;z-index:1;animation:focus-ring-animation .4s forwards}.scale-classic .scale-item{border-color:#e0e0e0;font-family:Open Sans,serif}.scale-classic .scale-item:first-child{border-radius:4px 0 0 4px;border-left:1px solid #e0e0e0}.scale-classic .scale-item:last-child{border-radius:0 4px 4px 0}.scale-classic .scale-item:not(.scale-item-selected){color:#242424}.scale-classic .scale-item:hover:not(.scale-item-selected){background-color:#b5ddd5}.scale-classic .scale-item-selected{background-color:#46a997}\n"]
+		}]
+	}],
+	ctorParameters: () => [{
+		type: void 0,
+		decorators: [{ type: Optional }, {
+			type: Inject,
+			args: ["CANOPYUI_DEFAULT_APPLICATION_THEME"]
+		}]
+	}],
+	propDecorators: {
+		scaleItems: [{
+			type: ViewChildren,
+			args: ["scaleItem"]
+		}],
+		selectedIndex: [{ type: Input }],
+		length: [{ type: Input }],
+		applicationTheme: [{ type: Input }],
+		companyColor: [{ type: Input }],
+		testId: [{ type: Input }],
+		ariaLabel: [{ type: Input }],
+		selectedIndexChange: [{ type: Output }]
+	}
+});
+var ScaleComponentModule = class ScaleComponentModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: ScaleComponentModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: ScaleComponentModule,
+			imports: [CommonModule, ScaleComponent],
+			exports: [ScaleComponent]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: ScaleComponentModule,
+			imports: [CommonModule]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: ScaleComponentModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [CommonModule, ScaleComponent],
+			exports: [ScaleComponent]
+		}]
+	}]
+});
 export { ScaleComponent, ScaleComponentModule };
-//# sourceMappingURL=testgorilla-tgo-ui-components-scale.mjs.map
+
+//# sourceMappingURL=testgorilla-tgo-ui-components-scale.mjs.map

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

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