npm - @testgorilla/tgo-ui - Versions diffs - 9.3.3 → 10.1.0 - Mend

@testgorilla/tgo-ui 9.3.3 → 10.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (190) hide show

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

@@ -18,7 +18,7 @@ class ScaleTableComponent {
          * @type {ApplicationTheme}
          * @memberof ScaleTableComponent
          */
-        this.applicationTheme = input('light', ...(ngDevMode ? [{ debugName: "applicationTheme" }] : []));
+        this.applicationTheme = input('light', ...(ngDevMode ? [{ debugName: "applicationTheme" }] : /* istanbul ignore next */ []));
         /**
          *
          * Defines items with their text and it's values
@@ -26,7 +26,7 @@ class ScaleTableComponent {
          * @type {ScaleTable}
          * @memberof ScaleTableComponent
          */
-        this.scaleItems = model.required(...(ngDevMode ? [{ debugName: "scaleItems" }] : []));
+        this.scaleItems = model.required(...(ngDevMode ? [{ debugName: "scaleItems" }] : /* istanbul ignore next */ []));
         /**
          *
          * Defines description of scales
@@ -34,10 +34,10 @@ class ScaleTableComponent {
          * @type {string[]}
          * @memberof ScaleTableComponent
          */
-        this.labels = input.required(...(ngDevMode ? [{ debugName: "labels" }] : []));
-        this.hideBetterExperience = model(false, ...(ngDevMode ? [{ debugName: "hideBetterExperience" }] : []));
+        this.labels = input.required(...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+        this.hideBetterExperience = model(false, ...(ngDevMode ? [{ debugName: "hideBetterExperience" }] : /* istanbul ignore next */ []));
         this.scaleItemChange = output();
-        this.scaleCount = computed(() => this.labels().length, ...(ngDevMode ? [{ debugName: "scaleCount" }] : []));
+        this.scaleCount = computed(() => this.labels().length, ...(ngDevMode ? [{ debugName: "scaleCount" }] : /* istanbul ignore next */ []));
         this.translationContext = 'SCALE_TABLE.';
     }
     select(scaleItemIndex, scaleIndex) {
@@ -50,10 +50,10 @@ class ScaleTableComponent {
             return [...items];
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ScaleTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ScaleTableComponent, isStandalone: true, selector: "ui-scale-table", inputs: { applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null }, scaleItems: { classPropertyName: "scaleItems", publicName: "scaleItems", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, hideBetterExperience: { classPropertyName: "hideBetterExperience", publicName: "hideBetterExperience", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scaleItems: "scaleItemsChange", hideBetterExperience: "hideBetterExperienceChange", scaleItemChange: "scaleItemChange" }, host: { properties: { "style.--scale-count": "scaleCount()" } }, ngImport: i0, template: "<div class=\"scale-table\">\n  <div class=\"better-experience\" [class.hide]=\"hideBetterExperience()\">\n    <ui-icon [size]=\"'24'\" [name]=\"'Device-rotate-in-line'\" class=\"mobile-landscape-icon\" />\n    <p>{{ 'SCALE_TABLE.ROTATE_DEVICE' | uiTranslate | async }}</p>\n    <ui-button\n      iconName=\"Close\"\n      variant=\"icon-button\"\n      size=\"small\"\n      [justIcon]=\"true\"\n      [tooltip]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n      (click)=\"hideBetterExperience.set(true)\"\n    />\n  </div>\n  <!-- Header -->\n  <div tabindex=\"0\" [attr.aria-label]=\"'scale header'\" class=\"scale-table-header\">\n    @for (label of labels(); track $index) {\n      <div\n        tabindex=\"0\"\n        role=\"heading\"\n        [attr.aria-level]=\"3\"\n        [attr.aria-label]=\"label + ' as ' + ($index + 1)\"\n        class=\"scale-size\"\n      >\n        {{ label }}\n      </div>\n    }\n  </div>\n  <!-- Scale Items -->\n  @for (scale of scaleItems(); track scale.text) {\n    <div class=\"scale-table-row\" tabindex=\"0\" role=\"radiogroup\" [attr.aria-label]=\"scale.text\">\n      <div class=\"scale-text\">{{ scale.text }}</div>\n      <ui-scale\n        [selectedIndex]=\"scale.value ?? null\"\n        [length]=\"scale.length ?? labels().length\"\n        [applicationTheme]=\"applicationTheme()\"\n        (selectedIndexChange)=\"select($index, $event)\"\n      />\n    </div>\n  }\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{font:\"ModernGothic\",serif;position:relative;display:flex;overflow:auto;align-items:start}.scale-table{display:flex;flex-direction:column;width:100%}.scale-table-header{display:flex;flex-direction:row;align-items:center;justify-content:end;min-width:fit-content;position:sticky;top:0;border-bottom:1px solid #d3d3d3;background-color:#fff;align-items:baseline;box-shadow:0 4px 16px #24242414;padding-inline-start:16px;padding-inline-end:8px;padding-top:4px}.scale-table-row{display:flex;justify-content:space-between;gap:8px;align-items:center;padding-top:8px;padding-bottom:8px;padding-inline-start:16px;padding-inline-end:8px;min-width:fit-content;border-bottom:1px solid #d3d3d3}.scale-size{width:80px;text-align:center;flex-shrink:0;color:#242424;font-size:12px;font-family:ModernGothic;align-self:stretch;padding:4px}ui-scale{width:calc(var(--scale-count, 5) * 80px);flex-shrink:0}.scale-text{font-weight:400;font-size:16px;line-height:24px;letter-spacing:0%;vertical-align:middle;text-align:justify;font-family:ModernGothic;max-width:800px}.border-bottom{border-bottom:1px solid #d3d3d3}.better-experience{display:none;flex-direction:row;align-items:center;gap:8px;border-radius:10px;padding:12px 16px;background:#d9e8ff;justify-content:center}.better-experience p{flex:1 1 0%;font-size:14px;line-height:22px;font-weight:400;font-size:16px;line-height:24px;letter-spacing:0%;vertical-align:middle;margin:0}.background-white{background-color:#fff}@media(max-width:960px){.scale-table-header{padding-left:0;padding-right:0;justify-content:start}.scale-table-row{padding-left:0;padding-right:0;flex-direction:column;align-items:start}.scale-size{width:calc(100% / var(--scale-count));min-width:40px;padding:0}ui-scale{width:100%;min-width:calc(var(--scale-count) * 40px);align-self:center}}@media screen and (min-width:1280px){.scale-size{width:104px;min-width:104px}ui-scale{min-width:calc(var(--scale-count) * 104px);align-self:center}}@media screen and (orientation:portrait)and (max-width:560px){.better-experience{display:flex}}.hide{display:none}\n"], dependencies: [{ kind: "ngmodule", type: ScaleComponentModule }, { kind: "component", type: i1.ScaleComponent, selector: "ui-scale", inputs: ["selectedIndex", "length", "applicationTheme", "companyColor"], outputs: ["selectedIndexChange"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i2.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "ngmodule", type: ButtonComponentModule }, { kind: "component", type: i3.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "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: 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: ScaleTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ScaleTableComponent, isStandalone: true, selector: "ui-scale-table", inputs: { applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null }, scaleItems: { classPropertyName: "scaleItems", publicName: "scaleItems", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, hideBetterExperience: { classPropertyName: "hideBetterExperience", publicName: "hideBetterExperience", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scaleItems: "scaleItemsChange", hideBetterExperience: "hideBetterExperienceChange", scaleItemChange: "scaleItemChange" }, host: { properties: { "style.--scale-count": "scaleCount()" } }, ngImport: i0, template: "<div class=\"scale-table\">\n  <div class=\"better-experience\" [class.hide]=\"hideBetterExperience()\">\n    <ui-icon [size]=\"'24'\" [name]=\"'Device-rotate-in-line'\" class=\"mobile-landscape-icon\" />\n    <p>{{ 'SCALE_TABLE.ROTATE_DEVICE' | uiTranslate | async }}</p>\n    <ui-button\n      iconName=\"Close\"\n      variant=\"icon-button\"\n      size=\"small\"\n      [justIcon]=\"true\"\n      [tooltip]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n      (click)=\"hideBetterExperience.set(true)\"\n    />\n  </div>\n  <!-- Header -->\n  <div tabindex=\"0\" [attr.aria-label]=\"'scale header'\" class=\"scale-table-header\">\n    @for (label of labels(); track $index) {\n      <div\n        tabindex=\"0\"\n        role=\"heading\"\n        [attr.aria-level]=\"3\"\n        [attr.aria-label]=\"label + ' as ' + ($index + 1)\"\n        class=\"scale-size\"\n      >\n        {{ label }}\n      </div>\n    }\n  </div>\n  <!-- Scale Items -->\n  @for (scale of scaleItems(); track scale.text) {\n    <div class=\"scale-table-row\" tabindex=\"0\" role=\"radiogroup\" [attr.aria-label]=\"scale.text\">\n      <div class=\"scale-text\">{{ scale.text }}</div>\n      <ui-scale\n        [selectedIndex]=\"scale.value ?? null\"\n        [length]=\"scale.length ?? labels().length\"\n        [applicationTheme]=\"applicationTheme()\"\n        (selectedIndexChange)=\"select($index, $event)\"\n      />\n    </div>\n  }\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{font:\"ModernGothic\",serif;position:relative;display:flex;overflow:auto;align-items:start}.scale-table{display:flex;flex-direction:column;width:100%}.scale-table-header{display:flex;flex-direction:row;align-items:center;justify-content:end;min-width:fit-content;position:sticky;top:0;border-bottom:1px solid #d3d3d3;background-color:#fff;align-items:baseline;box-shadow:0 4px 16px #24242414;padding-inline-start:16px;padding-inline-end:8px;padding-top:4px}.scale-table-row{display:flex;justify-content:space-between;gap:8px;align-items:center;padding-top:8px;padding-bottom:8px;padding-inline-start:16px;padding-inline-end:8px;min-width:fit-content;border-bottom:1px solid #d3d3d3}.scale-size{width:80px;text-align:center;flex-shrink:0;color:#242424;font-size:12px;font-family:ModernGothic;align-self:stretch;padding:4px}ui-scale{width:calc(var(--scale-count, 5) * 80px);flex-shrink:0}.scale-text{font-weight:400;font-size:16px;line-height:24px;letter-spacing:0%;vertical-align:middle;text-align:justify;font-family:ModernGothic;max-width:800px}.border-bottom{border-bottom:1px solid #d3d3d3}.better-experience{display:none;flex-direction:row;align-items:center;gap:8px;border-radius:10px;padding:12px 16px;background:#d9e8ff;justify-content:center}.better-experience p{flex:1 1 0%;font-size:14px;line-height:22px;font-weight:400;font-size:16px;line-height:24px;letter-spacing:0%;vertical-align:middle;margin:0}.background-white{background-color:#fff}@media(max-width:960px){.scale-table-header{padding-left:0;padding-right:0;justify-content:start}.scale-table-row{padding-left:0;padding-right:0;flex-direction:column;align-items:start}.scale-size{width:calc(100% / var(--scale-count));min-width:40px;padding:0}ui-scale{width:100%;min-width:calc(var(--scale-count) * 40px);align-self:center}}@media screen and (min-width:1280px){.scale-size{width:104px;min-width:104px}ui-scale{min-width:calc(var(--scale-count) * 104px);align-self:center}}@media screen and (orientation:portrait)and (max-width:560px){.better-experience{display:flex}}.hide{display:none}\n"], dependencies: [{ kind: "ngmodule", type: ScaleComponentModule }, { kind: "component", type: i1.ScaleComponent, selector: "ui-scale", inputs: ["selectedIndex", "length", "applicationTheme", "companyColor"], outputs: ["selectedIndexChange"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i2.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "ngmodule", type: ButtonComponentModule }, { kind: "component", type: i3.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "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: 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: ScaleTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ScaleTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-scale-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [UiTranslatePipe, ScaleComponentModule, AsyncPipe, IconComponentModule, ButtonComponentModule], host: {
                         '[style.--scale-count]': 'scaleCount()',

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

	@@ -1 +1 @@
1	- {"version":3,"file":"testgorilla-tgo-ui-components-scale-table.mjs","sources":["../../../components/scale-table/scale-table.component.ts","../../../components/scale-table/scale-table.component.html","../../../components/scale-table/testgorilla-tgo-ui-components-scale-table.ts"],"sourcesContent":["import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, input, model, output } from '@angular/core';\n\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { ApplicationTheme, UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { ScaleComponentModule } from '@testgorilla/tgo-ui/components/scale';\n\nimport { ScaleItem } from './scale-table.model';\n\n@Component({\n selector: 'ui-scale-table',\n templateUrl: './scale-table.component.html',\n styleUrls: ['./scale-table.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [UiTranslatePipe, ScaleComponentModule, AsyncPipe, IconComponentModule, ButtonComponentModule],\n host: {\n '[style.--scale-count]': 'scaleCount()',\n },\n})\nexport class ScaleTableComponent {\n /*\n \n * Defines the application theme\n \n @type {ApplicationTheme}\n * @memberof ScaleTableComponent\n /\n public applicationTheme = input<ApplicationTheme>('light');\n\n /\n \n * Defines items with their text and it's values\n \n @type {ScaleTable}\n * @memberof ScaleTableComponent\n /\n public scaleItems = model.required<ScaleItem[]>();\n\n /\n \n * Defines description of scales\n \n @type {string[]}\n * @memberof ScaleTableComponent\n /\n public labels = input.required<string[]>();\n public hideBetterExperience = model(false);\n public scaleItemChange = output<{\n item: ScaleItem;\n label: string;\n }>();\n scaleCount = computed(() => this.labels().length);\n\n protected readonly translationContext = 'SCALE_TABLE.';\n\n public select(scaleItemIndex: number, scaleIndex: number): void {\n this.scaleItems.update(items => {\n items[scaleItemIndex].value = scaleIndex;\n this.scaleItemChange.emit({\n item: items[scaleItemIndex],\n label: this.labels()[scaleIndex],\n });\n return [...items];\n });\n }\n}\n","<div class=\"scale-table\">\n <div class=\"better-experience\" [class.hide]=\"hideBetterExperience()\">\n <ui-icon [size]=\"'24'\" [name]=\"'Device-rotate-in-line'\" class=\"mobile-landscape-icon\" />\n <p>{{ 'SCALE_TABLE.ROTATE_DEVICE' \| uiTranslate \| async }}</p>\n <ui-button\n iconName=\"Close\"\n variant=\"icon-button\"\n size=\"small\"\n [justIcon]=\"true\"\n [tooltip]=\"('COMMON.CLOSE' \| uiTranslate \| async)!\"\n (click)=\"hideBetterExperience.set(true)\"\n />\n </div>\n <!-- Header -->\n <div tabindex=\"0\" [attr.aria-label]=\"'scale header'\" class=\"scale-table-header\">\n @for (label of labels(); track $index) {\n <div\n tabindex=\"0\"\n role=\"heading\"\n [attr.aria-level]=\"3\"\n [attr.aria-label]=\"label + ' as ' + ($index + 1)\"\n class=\"scale-size\"\n >\n {{ label }}\n </div>\n }\n </div>\n <!-- Scale Items -->\n @for (scale of scaleItems(); track scale.text) {\n <div class=\"scale-table-row\" tabindex=\"0\" role=\"radiogroup\" [attr.aria-label]=\"scale.text\">\n <div class=\"scale-text\">{{ scale.text }}</div>\n <ui-scale\n [selectedIndex]=\"scale.value ?? null\"\n [length]=\"scale.length ?? labels().length\"\n [applicationTheme]=\"applicationTheme()\"\n (selectedIndexChange)=\"select($index, $event)\"\n />\n </div>\n }\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;MAoBa,mBAAmB,CAAA;AAVhC,IAAA,WAAA,GAAA;AAWE;;;;;;AAMG;AACI,QAAA,IAAA,CAAA,gBAAgB,GAAG,KAAK,CAAmB,OAAO,~~4DAAC~~;AAE1D;;;;;;AAMG;AACI,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAC,QAAQ,~~qDAAe~~;AAEjD;;;;;;AAMG;AACI,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK,CAAC,QAAQ,~~iDAAY~~;AACnC,QAAA,IAAA,CAAA,oBAAoB,GAAG,KAAK,CAAC,KAAK,~~gEAAC~~;QACnC,IAAA,CAAA,eAAe,GAAG,MAAM,EAG3B;AACJ,QAAA,IAAA,CAAA,UAAU,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,MAAM,~~sDAAC~~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"}
1	+ {"version":3,"file":"testgorilla-tgo-ui-components-scale-table.mjs","sources":["../../../components/scale-table/scale-table.component.ts","../../../components/scale-table/scale-table.component.html","../../../components/scale-table/testgorilla-tgo-ui-components-scale-table.ts"],"sourcesContent":["import { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, input, model, output } from '@angular/core';\n\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { ApplicationTheme, UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { ScaleComponentModule } from '@testgorilla/tgo-ui/components/scale';\n\nimport { ScaleItem } from './scale-table.model';\n\n@Component({\n selector: 'ui-scale-table',\n templateUrl: './scale-table.component.html',\n styleUrls: ['./scale-table.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [UiTranslatePipe, ScaleComponentModule, AsyncPipe, IconComponentModule, ButtonComponentModule],\n host: {\n '[style.--scale-count]': 'scaleCount()',\n },\n})\nexport class ScaleTableComponent {\n /*\n \n * Defines the application theme\n \n @type {ApplicationTheme}\n * @memberof ScaleTableComponent\n /\n public applicationTheme = input<ApplicationTheme>('light');\n\n /\n \n * Defines items with their text and it's values\n \n @type {ScaleTable}\n * @memberof ScaleTableComponent\n /\n public scaleItems = model.required<ScaleItem[]>();\n\n /\n \n * Defines description of scales\n \n @type {string[]}\n * @memberof ScaleTableComponent\n /\n public labels = input.required<string[]>();\n public hideBetterExperience = model(false);\n public scaleItemChange = output<{\n item: ScaleItem;\n label: string;\n }>();\n scaleCount = computed(() => this.labels().length);\n\n protected readonly translationContext = 'SCALE_TABLE.';\n\n public select(scaleItemIndex: number, scaleIndex: number): void {\n this.scaleItems.update(items => {\n items[scaleItemIndex].value = scaleIndex;\n this.scaleItemChange.emit({\n item: items[scaleItemIndex],\n label: this.labels()[scaleIndex],\n });\n return [...items];\n });\n }\n}\n","<div class=\"scale-table\">\n <div class=\"better-experience\" [class.hide]=\"hideBetterExperience()\">\n <ui-icon [size]=\"'24'\" [name]=\"'Device-rotate-in-line'\" class=\"mobile-landscape-icon\" />\n <p>{{ 'SCALE_TABLE.ROTATE_DEVICE' \| uiTranslate \| async }}</p>\n <ui-button\n iconName=\"Close\"\n variant=\"icon-button\"\n size=\"small\"\n [justIcon]=\"true\"\n [tooltip]=\"('COMMON.CLOSE' \| uiTranslate \| async)!\"\n (click)=\"hideBetterExperience.set(true)\"\n />\n </div>\n <!-- Header -->\n <div tabindex=\"0\" [attr.aria-label]=\"'scale header'\" class=\"scale-table-header\">\n @for (label of labels(); track $index) {\n <div\n tabindex=\"0\"\n role=\"heading\"\n [attr.aria-level]=\"3\"\n [attr.aria-label]=\"label + ' as ' + ($index + 1)\"\n class=\"scale-size\"\n >\n {{ label }}\n </div>\n }\n </div>\n <!-- Scale Items -->\n @for (scale of scaleItems(); track scale.text) {\n <div class=\"scale-table-row\" tabindex=\"0\" role=\"radiogroup\" [attr.aria-label]=\"scale.text\">\n <div class=\"scale-text\">{{ scale.text }}</div>\n <ui-scale\n [selectedIndex]=\"scale.value ?? null\"\n [length]=\"scale.length ?? labels().length\"\n [applicationTheme]=\"applicationTheme()\"\n (selectedIndexChange)=\"select($index, $event)\"\n />\n </div>\n }\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -42,7 +42,7 @@ class ScaleComponent {
          */
         this.companyColor = '';
         this.selectedIndexChange = new EventEmitter();
-        this.styles = signal({ '--hover-color': '#FFB3EE', '--selected-color': '#D410AA' }, ...(ngDevMode ? [{ debugName: "styles" }] : []));
+        this.styles = signal({ '--hover-color': '#FFB3EE', '--selected-color': '#D410AA' }, ...(ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []));
         if (defaultAppTheme) {
             this.applicationTheme = defaultAppTheme;
         }
@@ -107,10 +107,10 @@ class ScaleComponent {
             this.select(0);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.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: "20.3.25", type: ScaleComponent, isStandalone: true, selector: "ui-scale", inputs: { selectedIndex: "selectedIndex", length: "length", applicationTheme: "applicationTheme", companyColor: "companyColor" }, 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>\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    >\n      {{ item + 1 }}\n    </div>\n  }\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.scale{display:flex;align-content:center;justify-content:flex-start;align-items:center;width:100%}.scale-item{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;width:calc(100% / var(--scale-count));min-width:24px;height:48px;border:1px solid #919191;border-left:0;cursor:pointer;font-size:16px;font-weight:400;font-family:ModernGothic,serif;background-color:#fff}.scale-item:hover:not(.scale-item-selected){background-color:var(--hover-color)}.scale-item:first-child{border-radius:10px 0 0 10px;border-left:1px solid #919191}.scale-item:last-child{border-radius:0 10px 10px 0}.scale-item-selected{background-color:var(--selected-color);color:#fff;font-weight:700}@keyframes focus-ring-animation{0%{box-shadow:0 0 0 4px #242424}to{box-shadow:0 0 0 2px #242424}}.scale-item.scale-item-focus-prev{border-right:none}.scale-item:focus-visible{outline:none;border-radius:8px;border:2px solid #ffffff;box-shadow:0 0 0 2px #242424;z-index:1;animation:focus-ring-animation .4s forwards}.scale-classic .scale-item{border-color:#e0e0e0;font-family:Open Sans,serif}.scale-classic .scale-item:first-child{border-radius:4px 0 0 4px;border-left:1px solid #e0e0e0}.scale-classic .scale-item:last-child{border-radius:0 4px 4px 0}.scale-classic .scale-item:not(.scale-item-selected){color:#242424}.scale-classic .scale-item:hover:not(.scale-item-selected){background-color:#b5ddd5}.scale-classic .scale-item-selected{background-color:#46a997}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", 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.18", type: ScaleComponent, isStandalone: true, selector: "ui-scale", inputs: { selectedIndex: "selectedIndex", length: "length", applicationTheme: "applicationTheme", companyColor: "companyColor" }, 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>\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    >\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: "20.3.25", ngImport: i0, type: ScaleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", 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>\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    >\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: [{
@@ -134,11 +134,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }] } });
 class ScaleComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ScaleComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: ScaleComponentModule, imports: [CommonModule, ScaleComponent], exports: [ScaleComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ScaleComponentModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ScaleComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ScaleComponentModule, imports: [CommonModule, ScaleComponent], exports: [ScaleComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ScaleComponentModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ScaleComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ScaleComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ScaleComponent],

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

	@@ -1 +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 @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>\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 >\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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"}
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 @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>\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 >\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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"}

package/fesm2022/testgorilla-tgo-ui-components-segmented-bar.mjs CHANGED Viewed

@@ -85,10 +85,10 @@ class SegmentedBarComponent {
             .map((segment, index) => `${segment.tooltip || `Value ${index}`}: ${segment.value}`)
             .join(', '));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SegmentedBarComponent, 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: SegmentedBarComponent, isStandalone: true, selector: "ui-segmented-bar", inputs: { width: "width", size: "size", segments: "segments", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", tooltipStats: "tooltipStats" }, ngImport: i0, template: "<div\n  class=\"segmented-bar-container\"\n  [attr.theme]=\"applicationTheme\"\n  [ngClass]=\"'segment-size-' + size\"\n  [style.width]=\"width\"\n  [uiTooltipTemplate]=\"segmentedStats\"\n  [showTooltip]=\"tooltipStats\"\n  [attr.aria-label]=\"accessibleValueText\"\n  role=\"graphics-object\"\n  [tabIndex]=\"0\"\n>\n  @for (segment of segmentList; track segment) {\n    @if (segment.value) {\n      <div\n        class=\"segmented-bar\"\n        [ngClass]=\"segment.color\"\n        [ngStyle]=\"{ flex: segment.value }\"\n        [matTooltip]=\"!tooltipStats ? (segment.tooltip ?? '') : ''\"\n        [matTooltipClass]=\"applicationTheme\"\n        [attr.aria-hidden]=\"true\"\n        [attr.aria-required]=\"ariaRequired\"\n      >\n        @if (segment.icon) {\n          <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"segment.icon\"></ui-icon>\n        }\n        <span>{{ segment.value }}</span>\n      </div>\n    }\n  }\n</div>\n<ng-template #segmentedStats>\n  <div class=\"stats-container\">\n    <div class=\"name-column\">\n      @for (segment of segmentList; track segment.value) {\n        <div class=\"segment\">\n          <div [class]=\"'point ' + segment.color\"></div>\n          <span [class]=\"'label ' + segment.color\">{{ segment.tooltip }}</span>\n        </div>\n      }\n    </div>\n\n    <div class=\"value-column\">\n      @for (segment of segmentList; track segment.value) {\n        <div class=\"segment\">\n          <span>{{ segment.value }}</span>\n        </div>\n      }\n    </div>\n\n    <div class=\"percentage-column\">\n      @for (segment of segmentList; track segment.value) {\n        <div class=\"segment\">\n          <span>{{ segment.percentage }}</span>\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.segmented-bar-container{width:100%;display:flex;flex-direction:row}.segmented-bar-container.segment-size-small{height:16px}.segmented-bar-container.segment-size-large{height:30px}.segmented-bar-container .segmented-bar{color:#000;font-weight:700;display:flex;justify-content:center;align-items:center;background:#46a997}.segmented-bar-container .segmented-bar ui-icon{margin-right:4px}.segmented-bar-container .segmented-bar.teal{background:#46a997}.segmented-bar-container .segmented-bar.rhubarb{background:#cb7b7a}.segmented-bar-container .segmented-bar.light-teal{background:#cbd6cb}.segmented-bar-container .segmented-bar.grey{background:#ededed}.segmented-bar-container[theme=dark].segment-size-small,.segmented-bar-container[theme=light].segment-size-small{font-size:12px}.segmented-bar-container[theme=dark].segment-size-large,.segmented-bar-container[theme=light].segment-size-large{font-size:14px}.segmented-bar-container[theme=dark] .segmented-bar,.segmented-bar-container[theme=light] .segmented-bar{padding:0 4px;color:#242424;background:#d4f2c3}.segmented-bar-container[theme=dark] .segmented-bar.teal,.segmented-bar-container[theme=light] .segmented-bar.teal{background:#d4f2c3}.segmented-bar-container[theme=dark] .segmented-bar.rhubarb,.segmented-bar-container[theme=light] .segmented-bar.rhubarb{background:#ffac9a}.segmented-bar-container[theme=dark] .segmented-bar.light-teal,.segmented-bar-container[theme=light] .segmented-bar.light-teal{background:#ffe1b3}.segmented-bar-container[theme=dark] .segmented-bar.grey,.segmented-bar-container[theme=light] .segmented-bar.grey{background:#e9e9e9}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mat-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}.stats-container{display:flex;flex-direction:row;max-width:248px}.stats-container .segment{display:flex;flex-direction:row;align-items:center}.stats-container .segment .point{margin-right:4px;width:8px;height:8px;border-radius:50%}.stats-container .segment .point.teal{background:#d4f2c3}.stats-container .segment .point.rhubarb{background:#ffac9a}.stats-container .segment .point.light-teal{background:#ffe1b3}.stats-container .segment .point.grey{background:#e9e9e9}.stats-container .segment .label{margin-right:8px}.stats-container .segment .label.teal{color:#d4f2c3}.stats-container .segment .label.rhubarb{color:#ffac9a}.stats-container .segment .label.light-teal{color:#ffe1b3}.stats-container .segment .label.grey{color:#e9e9e9}.stats-container .name-column span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.stats-container .value-column{margin-right:8px;color:#fff;min-width:28px}.stats-container .percentage-column{min-width:28px;color:#919191}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TooltipTemplateDirective, selector: "[uiTooltipTemplate]", inputs: ["tooltipPosition", "showTooltip", "uiTooltipTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i1.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SegmentedBarComponent, 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: SegmentedBarComponent, isStandalone: true, selector: "ui-segmented-bar", inputs: { width: "width", size: "size", segments: "segments", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", tooltipStats: "tooltipStats" }, ngImport: i0, template: "<div\n  class=\"segmented-bar-container\"\n  [attr.theme]=\"applicationTheme\"\n  [ngClass]=\"'segment-size-' + size\"\n  [style.width]=\"width\"\n  [uiTooltipTemplate]=\"segmentedStats\"\n  [showTooltip]=\"tooltipStats\"\n  [attr.aria-label]=\"accessibleValueText\"\n  role=\"graphics-object\"\n  [tabIndex]=\"0\"\n>\n  @for (segment of segmentList; track segment) {\n    @if (segment.value) {\n      <div\n        class=\"segmented-bar\"\n        [ngClass]=\"segment.color\"\n        [ngStyle]=\"{ flex: segment.value }\"\n        [matTooltip]=\"!tooltipStats ? (segment.tooltip ?? '') : ''\"\n        [matTooltipClass]=\"applicationTheme\"\n        [attr.aria-hidden]=\"true\"\n        [attr.aria-required]=\"ariaRequired\"\n      >\n        @if (segment.icon) {\n          <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"segment.icon\"></ui-icon>\n        }\n        <span>{{ segment.value }}</span>\n      </div>\n    }\n  }\n</div>\n<ng-template #segmentedStats>\n  <div class=\"stats-container\">\n    <div class=\"name-column\">\n      @for (segment of segmentList; track segment.value) {\n        <div class=\"segment\">\n          <div [class]=\"'point ' + segment.color\"></div>\n          <span [class]=\"'label ' + segment.color\">{{ segment.tooltip }}</span>\n        </div>\n      }\n    </div>\n\n    <div class=\"value-column\">\n      @for (segment of segmentList; track segment.value) {\n        <div class=\"segment\">\n          <span>{{ segment.value }}</span>\n        </div>\n      }\n    </div>\n\n    <div class=\"percentage-column\">\n      @for (segment of segmentList; track segment.value) {\n        <div class=\"segment\">\n          <span>{{ segment.percentage }}</span>\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.segmented-bar-container{width:100%;display:flex;flex-direction:row}.segmented-bar-container.segment-size-small{height:16px}.segmented-bar-container.segment-size-large{height:30px}.segmented-bar-container .segmented-bar{color:#000;font-weight:700;display:flex;justify-content:center;align-items:center;background:#46a997}.segmented-bar-container .segmented-bar ui-icon{margin-right:4px}.segmented-bar-container .segmented-bar.teal{background:#46a997}.segmented-bar-container .segmented-bar.rhubarb{background:#cb7b7a}.segmented-bar-container .segmented-bar.light-teal{background:#cbd6cb}.segmented-bar-container .segmented-bar.grey{background:#ededed}.segmented-bar-container[theme=dark].segment-size-small,.segmented-bar-container[theme=light].segment-size-small{font-size:12px}.segmented-bar-container[theme=dark].segment-size-large,.segmented-bar-container[theme=light].segment-size-large{font-size:14px}.segmented-bar-container[theme=dark] .segmented-bar,.segmented-bar-container[theme=light] .segmented-bar{padding:0 4px;color:#242424;background:#d4f2c3}.segmented-bar-container[theme=dark] .segmented-bar.teal,.segmented-bar-container[theme=light] .segmented-bar.teal{background:#d4f2c3}.segmented-bar-container[theme=dark] .segmented-bar.rhubarb,.segmented-bar-container[theme=light] .segmented-bar.rhubarb{background:#ffac9a}.segmented-bar-container[theme=dark] .segmented-bar.light-teal,.segmented-bar-container[theme=light] .segmented-bar.light-teal{background:#ffe1b3}.segmented-bar-container[theme=dark] .segmented-bar.grey,.segmented-bar-container[theme=light] .segmented-bar.grey{background:#e9e9e9}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mat-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}.stats-container{display:flex;flex-direction:row;max-width:248px}.stats-container .segment{display:flex;flex-direction:row;align-items:center}.stats-container .segment .point{margin-right:4px;width:8px;height:8px;border-radius:50%}.stats-container .segment .point.teal{background:#d4f2c3}.stats-container .segment .point.rhubarb{background:#ffac9a}.stats-container .segment .point.light-teal{background:#ffe1b3}.stats-container .segment .point.grey{background:#e9e9e9}.stats-container .segment .label{margin-right:8px}.stats-container .segment .label.teal{color:#d4f2c3}.stats-container .segment .label.rhubarb{color:#ffac9a}.stats-container .segment .label.light-teal{color:#ffe1b3}.stats-container .segment .label.grey{color:#e9e9e9}.stats-container .name-column span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.stats-container .value-column{margin-right:8px;color:#fff;min-width:28px}.stats-container .percentage-column{min-width:28px;color:#919191}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TooltipTemplateDirective, selector: "[uiTooltipTemplate]", inputs: ["tooltipPosition", "showTooltip", "uiTooltipTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i1.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SegmentedBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SegmentedBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-segmented-bar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, TooltipTemplateDirective, NgStyle, MatTooltip, IconComponentModule], template: "<div\n  class=\"segmented-bar-container\"\n  [attr.theme]=\"applicationTheme\"\n  [ngClass]=\"'segment-size-' + size\"\n  [style.width]=\"width\"\n  [uiTooltipTemplate]=\"segmentedStats\"\n  [showTooltip]=\"tooltipStats\"\n  [attr.aria-label]=\"accessibleValueText\"\n  role=\"graphics-object\"\n  [tabIndex]=\"0\"\n>\n  @for (segment of segmentList; track segment) {\n    @if (segment.value) {\n      <div\n        class=\"segmented-bar\"\n        [ngClass]=\"segment.color\"\n        [ngStyle]=\"{ flex: segment.value }\"\n        [matTooltip]=\"!tooltipStats ? (segment.tooltip ?? '') : ''\"\n        [matTooltipClass]=\"applicationTheme\"\n        [attr.aria-hidden]=\"true\"\n        [attr.aria-required]=\"ariaRequired\"\n      >\n        @if (segment.icon) {\n          <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"segment.icon\"></ui-icon>\n        }\n        <span>{{ segment.value }}</span>\n      </div>\n    }\n  }\n</div>\n<ng-template #segmentedStats>\n  <div class=\"stats-container\">\n    <div class=\"name-column\">\n      @for (segment of segmentList; track segment.value) {\n        <div class=\"segment\">\n          <div [class]=\"'point ' + segment.color\"></div>\n          <span [class]=\"'label ' + segment.color\">{{ segment.tooltip }}</span>\n        </div>\n      }\n    </div>\n\n    <div class=\"value-column\">\n      @for (segment of segmentList; track segment.value) {\n        <div class=\"segment\">\n          <span>{{ segment.value }}</span>\n        </div>\n      }\n    </div>\n\n    <div class=\"percentage-column\">\n      @for (segment of segmentList; track segment.value) {\n        <div class=\"segment\">\n          <span>{{ segment.percentage }}</span>\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.segmented-bar-container{width:100%;display:flex;flex-direction:row}.segmented-bar-container.segment-size-small{height:16px}.segmented-bar-container.segment-size-large{height:30px}.segmented-bar-container .segmented-bar{color:#000;font-weight:700;display:flex;justify-content:center;align-items:center;background:#46a997}.segmented-bar-container .segmented-bar ui-icon{margin-right:4px}.segmented-bar-container .segmented-bar.teal{background:#46a997}.segmented-bar-container .segmented-bar.rhubarb{background:#cb7b7a}.segmented-bar-container .segmented-bar.light-teal{background:#cbd6cb}.segmented-bar-container .segmented-bar.grey{background:#ededed}.segmented-bar-container[theme=dark].segment-size-small,.segmented-bar-container[theme=light].segment-size-small{font-size:12px}.segmented-bar-container[theme=dark].segment-size-large,.segmented-bar-container[theme=light].segment-size-large{font-size:14px}.segmented-bar-container[theme=dark] .segmented-bar,.segmented-bar-container[theme=light] .segmented-bar{padding:0 4px;color:#242424;background:#d4f2c3}.segmented-bar-container[theme=dark] .segmented-bar.teal,.segmented-bar-container[theme=light] .segmented-bar.teal{background:#d4f2c3}.segmented-bar-container[theme=dark] .segmented-bar.rhubarb,.segmented-bar-container[theme=light] .segmented-bar.rhubarb{background:#ffac9a}.segmented-bar-container[theme=dark] .segmented-bar.light-teal,.segmented-bar-container[theme=light] .segmented-bar.light-teal{background:#ffe1b3}.segmented-bar-container[theme=dark] .segmented-bar.grey,.segmented-bar-container[theme=light] .segmented-bar.grey{background:#e9e9e9}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mat-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}.stats-container{display:flex;flex-direction:row;max-width:248px}.stats-container .segment{display:flex;flex-direction:row;align-items:center}.stats-container .segment .point{margin-right:4px;width:8px;height:8px;border-radius:50%}.stats-container .segment .point.teal{background:#d4f2c3}.stats-container .segment .point.rhubarb{background:#ffac9a}.stats-container .segment .point.light-teal{background:#ffe1b3}.stats-container .segment .point.grey{background:#e9e9e9}.stats-container .segment .label{margin-right:8px}.stats-container .segment .label.teal{color:#d4f2c3}.stats-container .segment .label.rhubarb{color:#ffac9a}.stats-container .segment .label.light-teal{color:#ffe1b3}.stats-container .segment .label.grey{color:#e9e9e9}.stats-container .name-column span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.stats-container .value-column{margin-right:8px;color:#fff;min-width:28px}.stats-container .percentage-column{min-width:28px;color:#919191}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -114,21 +114,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }] } });
 class SegmentedBarComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SegmentedBarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: SegmentedBarComponentModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SegmentedBarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: SegmentedBarComponentModule, imports: [CommonModule,
             MatTooltipModule,
             MatInputModule,
             IconComponentModule,
             TooltipComponentModule,
             SegmentedBarComponent], exports: [SegmentedBarComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SegmentedBarComponentModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SegmentedBarComponentModule, imports: [CommonModule,
             MatTooltipModule,
             MatInputModule,
             IconComponentModule,
             TooltipComponentModule,
             SegmentedBarComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SegmentedBarComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SegmentedBarComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/testgorilla-tgo-ui-components-segmented-button.mjs CHANGED Viewed

@@ -70,8 +70,8 @@ class SegmentedButtonComponent {
         this.value = value;
         this.buttonSelected.emit(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SegmentedButtonComponent, 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: SegmentedButtonComponent, isStandalone: true, selector: "ui-segmented-button", inputs: { buttonConfig: "buttonConfig", disabled: "disabled", fullWidth: "fullWidth", value: "value", applicationTheme: "applicationTheme" }, outputs: { buttonSelected: "buttonSelected" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SegmentedButtonComponent, 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: SegmentedButtonComponent, isStandalone: true, selector: "ui-segmented-button", inputs: { buttonConfig: "buttonConfig", disabled: "disabled", fullWidth: "fullWidth", value: "value", applicationTheme: "applicationTheme" }, outputs: { buttonSelected: "buttonSelected" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SegmentedButtonComponent),
@@ -79,7 +79,7 @@ class SegmentedButtonComponent {
             },
         ], ngImport: i0, template: "<mat-button-toggle-group\n  class=\"segmented-button-container\"\n  [attr.theme]=\"applicationTheme\"\n  [ngClass]=\"{ disabled, 'full-width': fullWidth }\"\n  [value]=\"value\"\n  [hideSingleSelectionIndicator]=\"true\"\n  (change)=\"manualChangeValue($event)\"\n>\n  @for (button of buttonConfig; track button) {\n    <mat-button-toggle\n      [disableRipple]=\"true\"\n      [value]=\"button.value\"\n      [ngClass]=\"{ disabled: button.disabled }\"\n      [matTooltip]=\"button.tooltip ?? ''\"\n    >\n      @if (button.template) {\n        <ng-container [ngTemplateOutlet]=\"button.template\"></ng-container>\n      } @else {\n        {{ button.label }}\n      }\n    </mat-button-toggle>\n  }\n</mat-button-toggle-group>\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}h1,h2,h3,.h1,.h2,.h3{font-weight:400;margin:0}h4,h5,h6,.h4,.h5,.h6{font-weight:700;margin:0}h1,.h1{font-size:40px;line-height:60px;font-weight:700}h2,.h2{font-size:24px;line-height:36px}h2.bold,.h2.bold{font-weight:700}h3,.h3{font-size:20px;line-height:28px}h3.bold,.h3.bold{font-weight:700}h4,.h4{font-size:16px;line-height:24px}h5,.h5{font-size:14px;line-height:20px}h6,.h6{font-size:12px;line-height:16px;text-transform:uppercase}body{font-size:14px;line-height:20px}strong,b{font-weight:700!important}.featured{font-size:16px;line-height:24px}p .semibold,.featured .semibold,.caption .semibold{font-weight:600;color:#d410aa}small{font-size:8px;line-height:12px}caption,.caption{font-size:12px;line-height:16px;display:inline-block}*[theme=dark] h1,*[theme=dark] .h1,*[theme=light] h1,*[theme=light] .h1{color:#242424;font-size:32px;line-height:48px;font-weight:400}*[theme=dark] h1.black,*[theme=dark] .h1.black,*[theme=light] h1.black,*[theme=light] .h1.black{font-family:ModernGothic,sans-serif!important;font-weight:900}*[theme=dark] h2,*[theme=dark] .h2,*[theme=light] h2,*[theme=light] .h2{color:#242424;font-size:24px;line-height:30px;font-weight:900;font-family:ModernGothic,sans-serif!important}*[theme=dark] h3,*[theme=dark] .h3,*[theme=light] h3,*[theme=light] .h3{font-size:20px;line-height:26px;font-weight:400;color:#242424}*[theme=dark] h3.bold,*[theme=dark] .h3.bold,*[theme=light] h3.bold,*[theme=light] .h3.bold{font-family:ModernGothic,sans-serif!important;font-weight:700}*[theme=dark] h4,*[theme=dark] .h4,*[theme=light] h4,*[theme=light] .h4{font-size:16px;line-height:20px;font-weight:700;color:#242424;font-family:ModernGothic,sans-serif!important}*[theme=dark] h5,*[theme=dark] .h5,*[theme=light] h5,*[theme=light] .h5{font-size:14px;line-height:18px;font-weight:700;color:#242424;font-family:ModernGothic,sans-serif!important}*[theme=dark] .body-large,*[theme=light] .body-large{font-weight:700;font-size:14px;line-height:22px}*[theme=dark] .body-large-bold,*[theme=light] .body-large-bold{font-weight:700;font-size:16px;line-height:24px}*[theme=dark] .body-large-regular,*[theme=light] .body-large-regular{font-weight:400;font-size:16px;line-height:24px}*[theme=dark] .body-small-bold,*[theme=light] .body-small-bold{font-weight:700;font-size:12px;line-height:16px}*[theme=dark] .body-small-regular,*[theme=light] .body-small-regular{font-weight:400;font-size:12px;line-height:16px}*[theme=dark] .hyperlink-large,*[theme=light] .hyperlink-large{font-weight:500;font-size:16px;line-height:24px}*[theme=dark] .hyperlink,*[theme=light] .hyperlink{font-weight:500;font-size:14px;line-height:22px}*[theme=dark] .hyperlink-small,*[theme=light] .hyperlink-small{font-weight:500;font-size:12px;line-height:16px}*[theme=dark] .button-label,*[theme=light] .button-label{font-weight:500;font-size:14px;font-feature-settings:\"capb\"}*[theme=dark] .label,*[theme=light] .label{font-weight:400;font-size:14px;font-feature-settings:\"capb\"}*[theme=dark] .large-hover-state,*[theme=light] .large-hover-state{font-weight:700;text-decoration:underline;font-size:16px;line-height:24px}*[theme=dark] .hover-state,*[theme=light] .hover-state{font-weight:700;text-decoration:underline;font-size:14px;line-height:22px}*[theme=dark] h1,*[theme=dark] .h1,*[theme=dark] h2,*[theme=dark] .h2,*[theme=dark] h3,*[theme=dark] .h3,*[theme=dark] h4,*[theme=dark] .h4,*[theme=dark] h5,*[theme=dark] .h5{color:#fff}.segmented-button-container.full-width,.segmented-button-container.full-width .mat-button-toggle{width:100%}.segmented-button-container[theme=classic] .mat-button-toggle{min-width:80px;height:40px}.segmented-button-container[theme=classic] .mat-button-toggle ::ng-deep .mat-button-toggle-button,.segmented-button-container[theme=classic] .mat-button-toggle .mat-button-toggle-label-content{height:40px;display:flex;align-items:center}.segmented-button-container[theme=classic] .mat-button-toggle.mat-button-toggle-checked{background-color:#276678;color:#fff}.segmented-button-container[theme=light],.segmented-button-container[theme=dark]{border-color:#919191;overflow:visible}.segmented-button-container[theme=light]:first-child,.segmented-button-container[theme=light] .mat-button-toggle:first-child,.segmented-button-container[theme=dark]:first-child,.segmented-button-container[theme=dark] .mat-button-toggle:first-child{border-bottom-left-radius:10px;border-top-left-radius:10px}.segmented-button-container[theme=light]:last-child,.segmented-button-container[theme=light] .mat-button-toggle:last-child,.segmented-button-container[theme=dark]:last-child,.segmented-button-container[theme=dark] .mat-button-toggle:last-child{border-bottom-right-radius:10px;border-top-right-radius:10px}.segmented-button-container[theme=light] .mat-button-toggle,.segmented-button-container[theme=dark] .mat-button-toggle{min-height:48px;min-width:80px;border-color:#919191}.segmented-button-container[theme=light] .mat-button-toggle ::ng-deep .mat-button-toggle-label-content,.segmented-button-container[theme=dark] .mat-button-toggle ::ng-deep .mat-button-toggle-label-content{color:#242424;font-weight:400;font-size:14px;font-feature-settings:\"capb\"}.segmented-button-container[theme=light] .mat-button-toggle:hover,.segmented-button-container[theme=dark] .mat-button-toggle:hover{background:#fff2fc}.segmented-button-container[theme=light] .mat-button-toggle.mat-button-toggle-checked,.segmented-button-container[theme=dark] .mat-button-toggle.mat-button-toggle-checked{background:#ffe6fa}.segmented-button-container[theme=light] .mat-button-toggle.mat-button-toggle-checked ::ng-deep .mat-button-toggle-label-content,.segmented-button-container[theme=dark] .mat-button-toggle.mat-button-toggle-checked ::ng-deep .mat-button-toggle-label-content{font-weight:700}.segmented-button-container[theme=light] .mat-button-toggle ::ng-deep .mat-button-toggle-focus-overlay,.segmented-button-container[theme=dark] .mat-button-toggle ::ng-deep .mat-button-toggle-focus-overlay{display:none}.segmented-button-container[theme=light] .mat-button-toggle.disabled,.segmented-button-container[theme=dark] .mat-button-toggle.disabled{pointer-events:none;background:#fff}.segmented-button-container[theme=light] .mat-button-toggle.disabled ::ng-deep .mat-button-toggle-label-content,.segmented-button-container[theme=dark] .mat-button-toggle.disabled ::ng-deep .mat-button-toggle-label-content{color:#919191;font-weight:400}.segmented-button-container.disabled{pointer-events:none}.segmented-button-container.disabled .mat-button-toggle{background:#fff}.segmented-button-container.disabled .mat-button-toggle ::ng-deep .mat-button-toggle-label-content{color:#919191;font-weight:400}\n"], dependencies: [{ kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SegmentedButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SegmentedButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-segmented-button', providers: [
                         {
@@ -109,11 +109,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }] } });
 class SegmentedButtonComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SegmentedButtonComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: SegmentedButtonComponentModule, imports: [CommonModule, MatButtonToggleModule, FormsModule, MatTooltipModule, SegmentedButtonComponent], exports: [SegmentedButtonComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SegmentedButtonComponentModule, imports: [CommonModule, MatButtonToggleModule, FormsModule, MatTooltipModule, SegmentedButtonComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SegmentedButtonComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: SegmentedButtonComponentModule, imports: [CommonModule, MatButtonToggleModule, FormsModule, MatTooltipModule, SegmentedButtonComponent], exports: [SegmentedButtonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SegmentedButtonComponentModule, imports: [CommonModule, MatButtonToggleModule, FormsModule, MatTooltipModule, SegmentedButtonComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SegmentedButtonComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SegmentedButtonComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [SegmentedButtonComponent],

package/fesm2022/testgorilla-tgo-ui-components-segmented-toggle.mjs CHANGED Viewed

@@ -7,28 +7,28 @@ class SegmentedToggleComponent {
     constructor() {
         this.hostRef = inject(ElementRef);
         this.destroyRef = inject(DestroyRef);
-        this.options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
-        this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
-        this.applicationTheme = input(undefined, ...(ngDevMode ? [{ debugName: "applicationTheme" }] : []));
+        this.options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.applicationTheme = input(undefined, ...(ngDevMode ? [{ debugName: "applicationTheme" }] : /* istanbul ignore next */ []));
         this.defaultAppTheme = inject('CANOPYUI_DEFAULT_APPLICATION_THEME', {
             optional: true,
         });
-        this.theme = computed(() => this.applicationTheme() ?? this.defaultAppTheme ?? 'light', ...(ngDevMode ? [{ debugName: "theme" }] : []));
+        this.theme = computed(() => this.applicationTheme() ?? this.defaultAppTheme ?? 'light', ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
         /** One ElementRef per segment button; used to measure the active pill geometry. */
-        this.optionButtons = viewChildren('optionButton', ...(ngDevMode ? [{ debugName: "optionButtons" }] : []));
+        this.optionButtons = viewChildren('optionButton', ...(ngDevMode ? [{ debugName: "optionButtons" }] : /* istanbul ignore next */ []));
         /** Index of the selected option; -1 when value() matches no option. */
-        this.selectedIndex = computed(() => this.options().findIndex(option => option.value === this.value()), ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
+        this.selectedIndex = computed(() => this.options().findIndex(option => option.value === this.value()), ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
         /** True when the currently-selected option is flagged `brand: true`. */
-        this.selectedOptionIsBrand = computed(() => this.options()[this.selectedIndex()]?.brand === true, ...(ngDevMode ? [{ debugName: "selectedOptionIsBrand" }] : []));
+        this.selectedOptionIsBrand = computed(() => this.options()[this.selectedIndex()]?.brand === true, ...(ngDevMode ? [{ debugName: "selectedOptionIsBrand" }] : /* istanbul ignore next */ []));
         /** Measured pixel geometry of the active button, driving the sliding indicator. */
-        this.indicatorOffset = signal(0, ...(ngDevMode ? [{ debugName: "indicatorOffset" }] : []));
-        this.indicatorTop = signal(0, ...(ngDevMode ? [{ debugName: "indicatorTop" }] : []));
-        this.indicatorWidth = signal(0, ...(ngDevMode ? [{ debugName: "indicatorWidth" }] : []));
-        this.indicatorHeight = signal(0, ...(ngDevMode ? [{ debugName: "indicatorHeight" }] : []));
+        this.indicatorOffset = signal(0, ...(ngDevMode ? [{ debugName: "indicatorOffset" }] : /* istanbul ignore next */ []));
+        this.indicatorTop = signal(0, ...(ngDevMode ? [{ debugName: "indicatorTop" }] : /* istanbul ignore next */ []));
+        this.indicatorWidth = signal(0, ...(ngDevMode ? [{ debugName: "indicatorWidth" }] : /* istanbul ignore next */ []));
+        this.indicatorHeight = signal(0, ...(ngDevMode ? [{ debugName: "indicatorHeight" }] : /* istanbul ignore next */ []));
         /** Enables the slide transition only after the initial position is painted. */
-        this.animated = signal(false, ...(ngDevMode ? [{ debugName: "animated" }] : []));
+        this.animated = signal(false, ...(ngDevMode ? [{ debugName: "animated" }] : /* istanbul ignore next */ []));
         // Re-measure after every render that follows a selection or options change.
         afterRenderEffect(() => {
             // Read these so the effect re-runs (post-render) whenever selection changes.
@@ -82,10 +82,10 @@ class SegmentedToggleComponent {
         this.indicatorWidth.set(button.offsetWidth);
         this.indicatorHeight.set(button.offsetHeight);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SegmentedToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SegmentedToggleComponent, isStandalone: true, selector: "ui-segmented-toggle", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.theme": "theme()", "class.ui-segmented-toggle--brand-active": "selectedOptionIsBrand()", "class.ui-segmented-toggle--disabled": "disabled()" } }, viewQueries: [{ propertyName: "optionButtons", predicate: ["optionButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ui-segmented-toggle__group\" role=\"group\" [attr.aria-label]=\"ariaLabel()\">\n  <span\n    class=\"ui-segmented-toggle__indicator\"\n    [class.ui-segmented-toggle__indicator--hidden]=\"selectedIndex() < 0\"\n    [class.ui-segmented-toggle__indicator--animated]=\"animated()\"\n    aria-hidden=\"true\"\n    [style.transform]=\"'translateX(' + indicatorOffset() + 'px) translateY(' + indicatorTop() + 'px)'\"\n    [style.width.px]=\"indicatorWidth()\"\n    [style.height.px]=\"indicatorHeight()\"\n  ></span>\n\n  @for (option of options(); track option.value) {\n    <button\n      #optionButton\n      type=\"button\"\n      class=\"ui-segmented-toggle__option\"\n      [attr.aria-pressed]=\"isSelected(option.value)\"\n      [attr.aria-label]=\"fallbackAriaLabel(option)\"\n      [disabled]=\"disabled()\"\n      (click)=\"select(option.value)\"\n    >\n      @if (option.icon) {\n        <ui-icon\n          class=\"ui-segmented-toggle__icon\"\n          [name]=\"option.icon\"\n          size=\"16\"\n          [attr.aria-hidden]=\"option.iconAriaLabel ? null : 'true'\"\n        ></ui-icon>\n        @if (option.iconAriaLabel) {\n          <span class=\"ui-segmented-toggle__sr-only\">{{ option.iconAriaLabel }}</span>\n        }\n      }\n      @if (option.label) {\n        <span class=\"ui-segmented-toggle__label\">{{ option.label }}</span>\n      }\n    </button>\n  }\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:inline-flex}.ui-segmented-toggle__group{position:relative;display:flex;align-items:center;gap:0;padding:4px;box-shadow:inset 0 0 0 1px #242424;border-radius:999px;background:#fff}.ui-segmented-toggle__indicator{position:absolute;top:0;left:0;z-index:0;border-radius:999px;background:#242424}.ui-segmented-toggle__indicator--hidden{opacity:0}.ui-segmented-toggle__indicator--animated{transition:transform .2s ease,width .2s ease}.ui-segmented-toggle__option{--cnp-icon-color: #242424;position:relative;z-index:1;display:inline-flex;flex:0 0 auto;gap:4px;align-items:center;justify-content:center;margin:0;padding:3px 16px;border:0;border-radius:999px;background:transparent;color:#242424;font:inherit;white-space:nowrap;cursor:pointer}.ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #ffffff;color:#fff}.ui-segmented-toggle__option[aria-pressed=true] .ui-segmented-toggle__label{font-weight:700}:host(.ui-segmented-toggle--brand-active) .ui-segmented-toggle__indicator{background:#d410aa}:host(.ui-segmented-toggle--brand-active) .ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #ffe6fa;color:#ffe6fa}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__group{box-shadow:inset 0 0 0 1px #919191}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__indicator{background:#e9e9e9}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__option,:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #919191;color:#919191;cursor:not-allowed}.ui-segmented-toggle__sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.ui-segmented-toggle__indicator--animated{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i1.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SegmentedToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: SegmentedToggleComponent, isStandalone: true, selector: "ui-segmented-toggle", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.theme": "theme()", "class.ui-segmented-toggle--brand-active": "selectedOptionIsBrand()", "class.ui-segmented-toggle--disabled": "disabled()" } }, viewQueries: [{ propertyName: "optionButtons", predicate: ["optionButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ui-segmented-toggle__group\" role=\"group\" [attr.aria-label]=\"ariaLabel()\">\n  <span\n    class=\"ui-segmented-toggle__indicator\"\n    [class.ui-segmented-toggle__indicator--hidden]=\"selectedIndex() < 0\"\n    [class.ui-segmented-toggle__indicator--animated]=\"animated()\"\n    aria-hidden=\"true\"\n    [style.transform]=\"'translateX(' + indicatorOffset() + 'px) translateY(' + indicatorTop() + 'px)'\"\n    [style.width.px]=\"indicatorWidth()\"\n    [style.height.px]=\"indicatorHeight()\"\n  ></span>\n\n  @for (option of options(); track option.value) {\n    <button\n      #optionButton\n      type=\"button\"\n      class=\"ui-segmented-toggle__option\"\n      [attr.aria-pressed]=\"isSelected(option.value)\"\n      [attr.aria-label]=\"fallbackAriaLabel(option)\"\n      [disabled]=\"disabled()\"\n      (click)=\"select(option.value)\"\n    >\n      @if (option.icon) {\n        <ui-icon\n          class=\"ui-segmented-toggle__icon\"\n          [name]=\"option.icon\"\n          size=\"16\"\n          [attr.aria-hidden]=\"option.iconAriaLabel ? null : 'true'\"\n        ></ui-icon>\n        @if (option.iconAriaLabel) {\n          <span class=\"ui-segmented-toggle__sr-only\">{{ option.iconAriaLabel }}</span>\n        }\n      }\n      @if (option.label) {\n        <span class=\"ui-segmented-toggle__label\">{{ option.label }}</span>\n      }\n    </button>\n  }\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:inline-flex}.ui-segmented-toggle__group{position:relative;display:flex;align-items:center;gap:0;padding:4px;box-shadow:inset 0 0 0 1px #242424;border-radius:999px;background:#fff}.ui-segmented-toggle__indicator{position:absolute;top:0;left:0;z-index:0;border-radius:999px;background:#242424}.ui-segmented-toggle__indicator--hidden{opacity:0}.ui-segmented-toggle__indicator--animated{transition:transform .2s ease,width .2s ease}.ui-segmented-toggle__option{--cnp-icon-color: #242424;position:relative;z-index:1;display:inline-flex;flex:0 0 auto;gap:4px;align-items:center;justify-content:center;margin:0;padding:3px 16px;border:0;border-radius:999px;background:transparent;color:#242424;font:inherit;white-space:nowrap;cursor:pointer}.ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #ffffff;color:#fff}.ui-segmented-toggle__option[aria-pressed=true] .ui-segmented-toggle__label{font-weight:700}:host(.ui-segmented-toggle--brand-active) .ui-segmented-toggle__indicator{background:#d410aa}:host(.ui-segmented-toggle--brand-active) .ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #ffe6fa;color:#ffe6fa}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__group{box-shadow:inset 0 0 0 1px #919191}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__indicator{background:#e9e9e9}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__option,:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #919191;color:#919191;cursor:not-allowed}.ui-segmented-toggle__sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.ui-segmented-toggle__indicator--animated{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i1.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SegmentedToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SegmentedToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-segmented-toggle', standalone: true, imports: [IconComponentModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[attr.theme]': 'theme()',

package/fesm2022/testgorilla-tgo-ui-components-segmented-toggle.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"testgorilla-tgo-ui-components-segmented-toggle.mjs","sources":["../../../components/segmented-toggle/segmented-toggle.component.ts","../../../components/segmented-toggle/segmented-toggle.component.html","../../../components/segmented-toggle/testgorilla-tgo-ui-components-segmented-toggle.ts"],"sourcesContent":["import {\n afterNextRender,\n afterRenderEffect,\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n DestroyRef,\n ElementRef,\n inject,\n input,\n model,\n signal,\n viewChildren,\n} from '@angular/core';\n\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\n\nimport { SegmentedToggleOption } from './segmented-toggle.model';\n\n@Component({\n selector: 'ui-segmented-toggle',\n standalone: true,\n imports: [IconComponentModule],\n templateUrl: './segmented-toggle.component.html',\n styleUrls: ['./segmented-toggle.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[attr.theme]': 'theme()',\n '[class.ui-segmented-toggle--brand-active]': 'selectedOptionIsBrand()',\n '[class.ui-segmented-toggle--disabled]': 'disabled()',\n },\n})\nexport class SegmentedToggleComponent<T> {\n private readonly hostRef = inject<ElementRef<HTMLElement>>(ElementRef);\n private readonly destroyRef = inject(DestroyRef);\n\n readonly options = input.required<SegmentedToggleOption<T>[]>();\n readonly value = model<T>();\n readonly disabled = input(false, { transform: booleanAttribute });\n readonly ariaLabel = input<string>();\n readonly applicationTheme = input<ApplicationTheme \| undefined>(undefined);\n private readonly defaultAppTheme = inject<ApplicationTheme>('CANOPYUI_DEFAULT_APPLICATION_THEME' as never, {\n optional: true,\n });\n readonly theme = computed<ApplicationTheme>(() => this.applicationTheme() ?? this.defaultAppTheme ?? 'light');\n\n /** One ElementRef per segment button; used to measure the active pill geometry. /\n private readonly optionButtons = viewChildren<ElementRef<HTMLButtonElement>>('optionButton');\n\n /* Index of the selected option; -1 when value() matches no option. /\n protected readonly selectedIndex = computed(() => this.options().findIndex(option => option.value === this.value()));\n\n /* True when the currently-selected option is flagged `brand: true`. /\n protected readonly selectedOptionIsBrand = computed(() => this.options()[this.selectedIndex()]?.brand === true);\n\n /* Measured pixel geometry of the active button, driving the sliding indicator. /\n protected readonly indicatorOffset = signal(0);\n protected readonly indicatorTop = signal(0);\n protected readonly indicatorWidth = signal(0);\n protected readonly indicatorHeight = signal(0);\n\n /* Enables the slide transition only after the initial position is painted. /\n protected readonly animated = signal(false);\n\n constructor() {\n // Re-measure after every render that follows a selection or options change.\n afterRenderEffect(() => {\n // Read these so the effect re-runs (post-render) whenever selection changes.\n this.value();\n this.options();\n this.measureIndicator();\n });\n\n // Re-measure on container resize (width changes don't touch any signal).\n afterNextRender(() => {\n // Position the indicator for the initial selection without animating, then\n // enable the slide on the next frame so only user-driven changes animate.\n this.measureIndicator();\n requestAnimationFrame(() => this.animated.set(true));\n\n if (typeof ResizeObserver === 'undefined') {\n return;\n }\n const observer = new ResizeObserver(() => this.measureIndicator());\n observer.observe(this.hostRef.nativeElement);\n this.destroyRef.onDestroy(() => observer.disconnect());\n });\n }\n\n protected select(optionValue: T): void {\n if (this.disabled()) {\n return;\n }\n this.value.set(optionValue);\n }\n\n protected isSelected(optionValue: T): boolean {\n return optionValue === this.value();\n }\n\n /\n Last-resort accessible name for a segment. Used only for an icon-only option\n * that provides neither a visible `label` nor an `iconAriaLabel`, so the button\n * is never a nameless control. When a label or icon label is present those name\n * the button and this returns `null` (no `aria-label` attribute).\n /\n protected fallbackAriaLabel(option: SegmentedToggleOption<T>): string \| null {\n if (option.label \|\| option.iconAriaLabel) {\n return null;\n }\n return String(option.value);\n }\n\n /* Reads the active button's box and writes it to the indicator signals. /\n private measureIndicator(): void {\n const button = this.optionButtons()[this.selectedIndex()]?.nativeElement;\n if (!button) {\n return;\n }\n this.indicatorOffset.set(button.offsetLeft);\n this.indicatorTop.set(button.offsetTop);\n this.indicatorWidth.set(button.offsetWidth);\n this.indicatorHeight.set(button.offsetHeight);\n }\n}\n","<div class=\"ui-segmented-toggle__group\" role=\"group\" [attr.aria-label]=\"ariaLabel()\">\n <span\n class=\"ui-segmented-toggle__indicator\"\n [class.ui-segmented-toggle__indicator--hidden]=\"selectedIndex() < 0\"\n [class.ui-segmented-toggle__indicator--animated]=\"animated()\"\n aria-hidden=\"true\"\n [style.transform]=\"'translateX(' + indicatorOffset() + 'px) translateY(' + indicatorTop() + 'px)'\"\n [style.width.px]=\"indicatorWidth()\"\n [style.height.px]=\"indicatorHeight()\"\n ></span>\n\n @for (option of options(); track option.value) {\n <button\n #optionButton\n type=\"button\"\n class=\"ui-segmented-toggle__option\"\n [attr.aria-pressed]=\"isSelected(option.value)\"\n [attr.aria-label]=\"fallbackAriaLabel(option)\"\n [disabled]=\"disabled()\"\n (click)=\"select(option.value)\"\n >\n @if (option.icon) {\n <ui-icon\n class=\"ui-segmented-toggle__icon\"\n [name]=\"option.icon\"\n size=\"16\"\n [attr.aria-hidden]=\"option.iconAriaLabel ? null : 'true'\"\n ></ui-icon>\n @if (option.iconAriaLabel) {\n <span class=\"ui-segmented-toggle__sr-only\">{{ option.iconAriaLabel }}</span>\n }\n }\n @if (option.label) {\n <span class=\"ui-segmented-toggle__label\">{{ option.label }}</span>\n }\n </button>\n }\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"testgorilla-tgo-ui-components-segmented-toggle.mjs","sources":["../../../components/segmented-toggle/segmented-toggle.component.ts","../../../components/segmented-toggle/segmented-toggle.component.html","../../../components/segmented-toggle/testgorilla-tgo-ui-components-segmented-toggle.ts"],"sourcesContent":["import {\n afterNextRender,\n afterRenderEffect,\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n DestroyRef,\n ElementRef,\n inject,\n input,\n model,\n signal,\n viewChildren,\n} from '@angular/core';\n\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\n\nimport { SegmentedToggleOption } from './segmented-toggle.model';\n\n@Component({\n selector: 'ui-segmented-toggle',\n standalone: true,\n imports: [IconComponentModule],\n templateUrl: './segmented-toggle.component.html',\n styleUrls: ['./segmented-toggle.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[attr.theme]': 'theme()',\n '[class.ui-segmented-toggle--brand-active]': 'selectedOptionIsBrand()',\n '[class.ui-segmented-toggle--disabled]': 'disabled()',\n },\n})\nexport class SegmentedToggleComponent<T> {\n private readonly hostRef = inject<ElementRef<HTMLElement>>(ElementRef);\n private readonly destroyRef = inject(DestroyRef);\n\n readonly options = input.required<SegmentedToggleOption<T>[]>();\n readonly value = model<T>();\n readonly disabled = input(false, { transform: booleanAttribute });\n readonly ariaLabel = input<string>();\n readonly applicationTheme = input<ApplicationTheme \| undefined>(undefined);\n private readonly defaultAppTheme = inject<ApplicationTheme>('CANOPYUI_DEFAULT_APPLICATION_THEME' as never, {\n optional: true,\n });\n readonly theme = computed<ApplicationTheme>(() => this.applicationTheme() ?? this.defaultAppTheme ?? 'light');\n\n /** One ElementRef per segment button; used to measure the active pill geometry. /\n private readonly optionButtons = viewChildren<ElementRef<HTMLButtonElement>>('optionButton');\n\n /* Index of the selected option; -1 when value() matches no option. /\n protected readonly selectedIndex = computed(() => this.options().findIndex(option => option.value === this.value()));\n\n /* True when the currently-selected option is flagged `brand: true`. /\n protected readonly selectedOptionIsBrand = computed(() => this.options()[this.selectedIndex()]?.brand === true);\n\n /* Measured pixel geometry of the active button, driving the sliding indicator. /\n protected readonly indicatorOffset = signal(0);\n protected readonly indicatorTop = signal(0);\n protected readonly indicatorWidth = signal(0);\n protected readonly indicatorHeight = signal(0);\n\n /* Enables the slide transition only after the initial position is painted. /\n protected readonly animated = signal(false);\n\n constructor() {\n // Re-measure after every render that follows a selection or options change.\n afterRenderEffect(() => {\n // Read these so the effect re-runs (post-render) whenever selection changes.\n this.value();\n this.options();\n this.measureIndicator();\n });\n\n // Re-measure on container resize (width changes don't touch any signal).\n afterNextRender(() => {\n // Position the indicator for the initial selection without animating, then\n // enable the slide on the next frame so only user-driven changes animate.\n this.measureIndicator();\n requestAnimationFrame(() => this.animated.set(true));\n\n if (typeof ResizeObserver === 'undefined') {\n return;\n }\n const observer = new ResizeObserver(() => this.measureIndicator());\n observer.observe(this.hostRef.nativeElement);\n this.destroyRef.onDestroy(() => observer.disconnect());\n });\n }\n\n protected select(optionValue: T): void {\n if (this.disabled()) {\n return;\n }\n this.value.set(optionValue);\n }\n\n protected isSelected(optionValue: T): boolean {\n return optionValue === this.value();\n }\n\n /\n Last-resort accessible name for a segment. Used only for an icon-only option\n * that provides neither a visible `label` nor an `iconAriaLabel`, so the button\n * is never a nameless control. When a label or icon label is present those name\n * the button and this returns `null` (no `aria-label` attribute).\n /\n protected fallbackAriaLabel(option: SegmentedToggleOption<T>): string \| null {\n if (option.label \|\| option.iconAriaLabel) {\n return null;\n }\n return String(option.value);\n }\n\n /* Reads the active button's box and writes it to the indicator signals. /\n private measureIndicator(): void {\n const button = this.optionButtons()[this.selectedIndex()]?.nativeElement;\n if (!button) {\n return;\n }\n this.indicatorOffset.set(button.offsetLeft);\n this.indicatorTop.set(button.offsetTop);\n this.indicatorWidth.set(button.offsetWidth);\n this.indicatorHeight.set(button.offsetHeight);\n }\n}\n","<div class=\"ui-segmented-toggle__group\" role=\"group\" [attr.aria-label]=\"ariaLabel()\">\n <span\n class=\"ui-segmented-toggle__indicator\"\n [class.ui-segmented-toggle__indicator--hidden]=\"selectedIndex() < 0\"\n [class.ui-segmented-toggle__indicator--animated]=\"animated()\"\n aria-hidden=\"true\"\n [style.transform]=\"'translateX(' + indicatorOffset() + 'px) translateY(' + indicatorTop() + 'px)'\"\n [style.width.px]=\"indicatorWidth()\"\n [style.height.px]=\"indicatorHeight()\"\n ></span>\n\n @for (option of options(); track option.value) {\n <button\n #optionButton\n type=\"button\"\n class=\"ui-segmented-toggle__option\"\n [attr.aria-pressed]=\"isSelected(option.value)\"\n [attr.aria-label]=\"fallbackAriaLabel(option)\"\n [disabled]=\"disabled()\"\n (click)=\"select(option.value)\"\n >\n @if (option.icon) {\n <ui-icon\n class=\"ui-segmented-toggle__icon\"\n [name]=\"option.icon\"\n size=\"16\"\n [attr.aria-hidden]=\"option.iconAriaLabel ? null : 'true'\"\n ></ui-icon>\n @if (option.iconAriaLabel) {\n <span class=\"ui-segmented-toggle__sr-only\">{{ option.iconAriaLabel }}</span>\n }\n }\n @if (option.label) {\n <span class=\"ui-segmented-toggle__label\">{{ option.label }}</span>\n }\n </button>\n }\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}