npm - @testgorilla/tgo-ui - Versions diffs - 7.0.0-beta.0 → 7.0.0 - Mend

@testgorilla/tgo-ui 7.0.0-beta.0 → 7.0.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 (518) hide show

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';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { ScaleComponentModule } from '@testgorilla/tgo-ui/components/scale';\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":";;;;;;;;;;;MAmBa,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~~;QAE9B,IAAA,CAAA,kBAAkB,GAAG,cAAc;AAYvD,IAAA;IAVQ,MAAM,CAAC,cAAsB,EAAE,UAAkB,EAAA;AACtD,QAAA,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,KAAK,IAAG;AAC7B,YAAA,KAAK,CAAC,cAAc,CAAC,CAAC,KAAK,GAAG,UAAU;AACxC,YAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;AACxB,gBAAA,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC;AAC3B,gBAAA,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,UAAU,CAAC;AACjC,aAAA,CAAC;AACF,YAAA,OAAO,CAAC,GAAG,KAAK,CAAC;AACnB,QAAA,CAAC,CAAC;IACJ;+GA7CW,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAnB,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,oBAAA,EAAA,EAAA,iBAAA,EAAA,sBAAA,EAAA,UAAA,EAAA,sBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,4BAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,qBAAA,EAAA,cAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECnBhC,s5CAwCA,EAAA,MAAA,EAAA,CAAA,0oIAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,~~ED1B6B~~,oBAAoB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,cAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,cAAA,CAAA,EAAA,OAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,~~EAAa~~,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,OAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,iBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,qBAAqB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,SAAA,EAAA,OAAA,EAAA,cAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,SAAA,EAAA,WAAA,EAAA,KAAA,EAAA,WAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,MAAA,EAAA,cAAA,EAAA,mBAAA,EAAA,kBAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,YAAA,CAAA,EAAA,OAAA,EAAA,CAAA,kBAAA,EAAA,kBAAA,CAAA,EAAA,~~EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAA5F,eAAe,EAAA,IAAA,EAAA,aAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAwB,SAAS,EAAA,IAAA,EAAA,OAAA,EAAA,~~CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;~~4FAK/C~~,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAV/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,mBAGT,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,eAAe,EAAE,oBAAoB,EAAE,SAAS,EAAE,mBAAmB,EAAE,qBAAqB,CAAC,EAAA,IAAA,EACjG;AACJ,wBAAA,uBAAuB,EAAE,cAAc;AACxC,qBAAA,EAAA,QAAA,EAAA,s5CAAA,EAAA,MAAA,EAAA,CAAA,0oIAAA,CAAA,EAAA;;;AEjBH;;AAEG;;;;"}
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';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { ScaleComponentModule } from '@testgorilla/tgo-ui/components/scale';\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

@@ -43,7 +43,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' });
         if (defaultAppTheme) {
             this.applicationTheme = defaultAppTheme;
         }
@@ -110,12 +110,12 @@ class ScaleComponent {
             this.select(0);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.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: "20.3.18", type: ScaleComponent, isStandalone: false, 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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ScaleComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: ScaleComponent, isStandalone: false, 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  <div\n    class=\"scale-item\"\n    *ngFor=\"let item of items\"\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</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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ScaleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ScaleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-scale', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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"] }]
+            args: [{ selector: 'ui-scale', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  [style.--scale-count]=\"items.length\"\n  class=\"scale\"\n  [ngStyle]=\"styles()\"\n  [ngClass]=\"{ 'scale-classic': applicationTheme === 'classic' }\"\n>\n  <div\n    class=\"scale-item\"\n    *ngFor=\"let item of items\"\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</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.scale{display:flex;align-content:center;justify-content:flex-start;align-items:center;width:100%}.scale-item{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;width:calc(100% / var(--scale-count));min-width:24px;height:48px;border:1px solid #919191;border-left:0;cursor:pointer;font-size:16px;font-weight:400;font-family:ModernGothic,serif;background-color:#fff}.scale-item:hover:not(.scale-item-selected){background-color:var(--hover-color)}.scale-item:first-child{border-radius:10px 0 0 10px;border-left:1px solid #919191}.scale-item:last-child{border-radius:0 10px 10px 0}.scale-item-selected{background-color:var(--selected-color);color:#fff;font-weight:700}@keyframes focus-ring-animation{0%{box-shadow:0 0 0 4px #242424}to{box-shadow:0 0 0 2px #242424}}.scale-item.scale-item-focus-prev{border-right:none}.scale-item:focus-visible{outline:none;border-radius:8px;border:2px solid #ffffff;box-shadow:0 0 0 2px #242424;z-index:1;animation:focus-ring-animation .4s forwards}.scale-classic .scale-item{border-color:#e0e0e0;font-family:Open Sans,serif}.scale-classic .scale-item:first-child{border-radius:4px 0 0 4px;border-left:1px solid #e0e0e0}.scale-classic .scale-item:last-child{border-radius:0 4px 4px 0}.scale-classic .scale-item:not(.scale-item-selected){color:#242424}.scale-classic .scale-item:hover:not(.scale-item-selected){background-color:#b5ddd5}.scale-classic .scale-item-selected{background-color:#46a997}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -137,11 +137,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             }] } });
 class ScaleComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ScaleComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: ScaleComponentModule, declarations: [ScaleComponent], imports: [CommonModule], exports: [ScaleComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ScaleComponentModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ScaleComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: ScaleComponentModule, declarations: [ScaleComponent], imports: [CommonModule], exports: [ScaleComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ScaleComponentModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ScaleComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ScaleComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [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 {\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';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { 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 standalone: false,\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>;\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 if (this.selectedIndex === null) {\n this.selectedIndex = 0;\n }\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 { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ScaleComponent } from './scale.component';\n\n@NgModule({\n declarations: [ScaleComponent],\n imports: [CommonModule],\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 {\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';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { 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 standalone: false,\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>;\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 if (this.selectedIndex === null) {\n this.selectedIndex = 0;\n }\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 <div\n class=\"scale-item\"\n ngFor=\"let item of items\"\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</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ScaleComponent } from './scale.component';\n\n@NgModule({\n declarations: [ScaleComponent],\n imports: [CommonModule],\n exports: [ScaleComponent],\n})\nexport class ScaleComponentModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;MA0Ba,cAAc,CAAA;AAczB;;;;AAIG;IACH,IAAa,MAAM,CAAC,MAAc,EAAA;AAChC,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC;aACjD,IAAI,CAAC,CAAC;aACN,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IACrB;AAwBA,IAAA,WAAA,CAC6E,eAAiC,EAAA;QAAjC,IAAA,CAAA,eAAe,GAAf,eAAe;QA/C3E,IAAA,CAAA,UAAU,GAAG,CAAC;QACd,IAAA,CAAA,cAAc,GAAG,CAAC;QACzB,IAAA,CAAA,KAAK,GAAa,EAAE;AAI9B;;;;AAIG;QACM,IAAA,CAAA,aAAa,GAAkB,IAAI;AAa5C;;;;;;AAMG;QACM,IAAA,CAAA,gBAAgB,GAAqB,OAAO;AAErD;;;;;;AAMG;QACM,IAAA,CAAA,YAAY,GAAG,EAAE;AAEhB,QAAA,IAAA,CAAA,mBAAmB,GAAG,IAAI,YAAY,EAAU;AAE1D,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,kBAAkB,EAAE,SAAS,EAAE,CAAC;QAK5E,IAAI,eAAe,EAAE;AACnB,YAAA,IAAI,CAAC,gBAAgB,GAAG,eAAe;QACzC;AACA,QAAA,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,cAAc;IACnC;IAEA,QAAQ,GAAA;AACN,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,IAAI,CAAC,eAAe,EAAE;QACxB;IACF;AAEA,IAAA,WAAW,CAAC,OAAsB,EAAA;AAChC,QAAA,IAAI,OAAO,CAAC,cAAc,CAAC,EAAE;YAC3B,IAAI,CAAC,eAAe,EAAE;QACxB;IACF;AAEU,IAAA,MAAM,CAAC,KAAa,EAAA;AAC5B,QAAA,IAAI,CAAC,aAAa,GAAG,KAAK;QAC1B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;IACnD;IAEA,SAAS,CAAC,KAAoB,EAAE,KAAa,EAAA;AAC3C,QAAA,IAAI,IAAI,CAAC,aAAa,KAAK,IAAI,EAAE;AAC/B,YAAA,IAAI,CAAC,aAAa,GAAG,CAAC;QACxB;AACA,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;;AAE3D,YAAA,IAAI,CAAC,MAAM,CAAC,CAAC,KAAK,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;AAC5C,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;QACpC;AAAO,aAAA,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE;;YAE/D,IAAI,CAAC,MAAM,CAAC,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;AAChE,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;QACpC;AAAO,aAAA,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;;AAErD,YAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;AAClB,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;QACpC;IACF;AAEA,IAAA,SAAS,CAAC,KAAa,EAAA;AACrB,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,aAAa;QAChE,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,KAAK,EAAE;QACjB;IACF;AAEA,IAAA,YAAY,CAAC,KAAa,EAAA;AACxB,QAAA,IAAI,KAAK,KAAK,CAAC,EAAE;AACf,YAAA,OAAO,0BAA0B;QACnC;AAAO,aAAA,IAAI,KAAK,KAAK,CAAC,EAAE;AACtB,YAAA,OAAO,oBAAoB;QAC7B;AACA,QAAA,OAAO,EAAE;IACX;IAEQ,eAAe,GAAA;AACrB,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE;QAC5B,MAAM,CAAC,eAAe,CAAC,GAAG,iBAAiB,CAAC,IAAI,CAAC,YAAY,CAAC;AAC9D,QAAA,MAAM,CAAC,kBAAkB,CAAC,GAAG,IAAI,CAAC,YAAY;AAC9C,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC;IACzB;AAEA,IAAA,OAAO,CAAC,IAAY,EAAA;;QAElB,IAAI,IAAI,CAAC,aAAa,KAAK,IAAI,IAAI,IAAI,KAAK,CAAC,EAAE;AAC7C,YAAA,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;QAChB;IACF;AAxHW,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,kBAgDH,oCAAoC,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAhD/C,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,cAAc,iXC1B3B,s4BAyBA,EAAA,MAAA,EAAA,CAAA,sjHAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FDCa,cAAc,EAAA,UAAA,EAAA,CAAA;kBAP1B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,UAAU,EAAA,eAAA,EAGH,uBAAuB,CAAC,MAAM,cACnC,KAAK,EAAA,QAAA,EAAA,s4BAAA,EAAA,MAAA,EAAA,CAAA,sjHAAA,CAAA,EAAA;;0BAkDd;;0BAAY,MAAM;2BAAC,oCAAoC;yCA3C/B,UAAU,EAAA,CAAA;sBAApC,YAAY;uBAAC,WAAW;gBAOhB,aAAa,EAAA,CAAA;sBAArB;gBAOY,MAAM,EAAA,CAAA;sBAAlB;gBAaQ,gBAAgB,EAAA,CAAA;sBAAxB;gBASQ,YAAY,EAAA,CAAA;sBAApB;gBAES,mBAAmB,EAAA,CAAA;sBAA5B;;;ME5DU,oBAAoB,CAAA;+GAApB,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAApB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,oBAAoB,EAAA,YAAA,EAAA,CAJhB,cAAc,CAAA,EAAA,OAAA,EAAA,CACnB,YAAY,aACZ,cAAc,CAAA,EAAA,CAAA,CAAA;AAEb,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,oBAAoB,YAHrB,YAAY,CAAA,EAAA,CAAA,CAAA;;4FAGX,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBALhC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,YAAY,EAAE,CAAC,cAAc,CAAC;oBAC9B,OAAO,EAAE,CAAC,YAAY,CAAC;oBACvB,OAAO,EAAE,CAAC,cAAc,CAAC;AAC1B,iBAAA;;;ACRD;;AAEG;;;;"}

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

@@ -87,12 +87,12 @@ class SegmentedBarComponent {
             .map((segment, index) => `${segment.tooltip || `Value ${index}`}: ${segment.value}`)
             .join(', ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.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: "20.3.18", type: SegmentedBarComponent, isStandalone: false, 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  <ng-container *ngFor=\"let segment of segmentList\">\n    <div\n      class=\"segmented-bar\"\n      *ngIf=\"segment.value\"\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      <ui-icon *ngIf=\"segment.icon\" [applicationTheme]=\"applicationTheme\" [name]=\"segment.icon\"></ui-icon>\n      <span>{{ segment.value }}</span>\n    </div>\n  </ng-container>\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\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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i3.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: i4.TooltipTemplateDirective, selector: "[uiTooltipTemplate]", inputs: ["tooltipPosition", "showTooltip", "uiTooltipTemplate"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", 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: "19.2.20", type: SegmentedBarComponent, isStandalone: false, 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  <ng-container *ngFor=\"let segment of segmentList\">\n    <div\n      class=\"segmented-bar\"\n      *ngIf=\"segment.value\"\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      <ui-icon *ngIf=\"segment.icon\" [applicationTheme]=\"applicationTheme\" [name]=\"segment.icon\"></ui-icon>\n      <span>{{ segment.value }}</span>\n    </div>\n  </ng-container>\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\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;--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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i3.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: i4.TooltipTemplateDirective, selector: "[uiTooltipTemplate]", inputs: ["tooltipPosition", "showTooltip", "uiTooltipTemplate"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SegmentedBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SegmentedBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-segmented-bar', standalone: false, 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  <ng-container *ngFor=\"let segment of segmentList\">\n    <div\n      class=\"segmented-bar\"\n      *ngIf=\"segment.value\"\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      <ui-icon *ngIf=\"segment.icon\" [applicationTheme]=\"applicationTheme\" [name]=\"segment.icon\"></ui-icon>\n      <span>{{ segment.value }}</span>\n    </div>\n  </ng-container>\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\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"] }]
+            args: [{ selector: 'ui-segmented-bar', standalone: false, 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  <ng-container *ngFor=\"let segment of segmentList\">\n    <div\n      class=\"segmented-bar\"\n      *ngIf=\"segment.value\"\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      <ui-icon *ngIf=\"segment.icon\" [applicationTheme]=\"applicationTheme\" [name]=\"segment.icon\"></ui-icon>\n      <span>{{ segment.value }}</span>\n    </div>\n  </ng-container>\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\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;--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: [{
                     type: Optional
                 }, {
@@ -116,11 +116,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             }] } });
 class SegmentedBarComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SegmentedBarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: SegmentedBarComponentModule, declarations: [SegmentedBarComponent], imports: [CommonModule, MatTooltipModule, MatInputModule, IconComponentModule, TooltipComponentModule], exports: [SegmentedBarComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SegmentedBarComponentModule, imports: [CommonModule, MatTooltipModule, MatInputModule, IconComponentModule, TooltipComponentModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SegmentedBarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: SegmentedBarComponentModule, declarations: [SegmentedBarComponent], imports: [CommonModule, MatTooltipModule, MatInputModule, IconComponentModule, TooltipComponentModule], exports: [SegmentedBarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SegmentedBarComponentModule, imports: [CommonModule, MatTooltipModule, MatInputModule, IconComponentModule, TooltipComponentModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SegmentedBarComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SegmentedBarComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SegmentedBarComponent],

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

	@@ -1 +1 @@
1	- {"version":3,"file":"testgorilla-tgo-ui-components-segmented-bar.mjs","sources":["../../../components/segmented-bar/segmented-bar.component.ts","../../../components/segmented-bar/segmented-bar.component.html","../../../components/segmented-bar/segmented-bar.component.module.ts","../../../components/segmented-bar/testgorilla-tgo-ui-components-segmented-bar.ts"],"sourcesContent":["import { Component, Inject, Input, Optional } from '@angular/core';\nimport { SegmentedBar, SegmentedBarVariant, SegmentedBarWithPercentage } from './segmented-bar.model';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\n\n@Component({\n selector: 'ui-segmented-bar',\n templateUrl: './segmented-bar.component.html',\n styleUrls: ['./segmented-bar.component.scss'],\n standalone: false,\n})\nexport class SegmentedBarComponent {\n /*\n The width of the segmented bar. Defaults to '100%'.\n * You can use '100%' or '100px' for this field. 100 is just an example\n * @default '100%'\n * @type {string}\n * @memberof SegmentedBarComponent\n /\n @Input() width = '100%';\n\n /\n The size variant of the segmented bar. Can be 'small' or 'large'.\n * Defaults to 'large'.\n * @default 'large'\n * @type {SegmentedBarVariant}\n * @memberof SegmentedBarComponent\n /\n @Input() size: SegmentedBarVariant = 'large';\n\n /\n The segments to be displayed in the segmented bar.\n * @required true\n * @type {SegmentedBar}\n * @memberof SegmentedBarComponent\n /\n @Input({ required: true }) set segments(segments: SegmentedBar[]) {\n this.segmentList = this.calculatePercentages(segments);\n }\n\n /\n \n * Defines the application theme\n \n @type {ApplicationTheme}\n * @memberof SegmentedBarComponent\n /\n @Input() applicationTheme: ApplicationTheme = 'light';\n\n /\n A string representing the ARIA label for accessibility.\n * This label is used to provide an accessible name for the input element.\n * @type {string}\n * @memberof SegmentedBarComponent\n /\n @Input() ariaLabel: string;\n\n /\n A string representing the ARIA requirement for accessibility.\n * This attribute is used to indicate whether an input field is required for form submission.\n * @type {boolean}\n * @memberof SegmentedBarComponent\n /\n @Input() ariaRequired = false;\n\n /\n Groups the tooltips into one template\n \n @type {boolean}\n * @memberof SegmentedBarComponent\n /\n @Input() tooltipStats = false;\n\n segmentList: SegmentedBarWithPercentage[] = [];\n\n constructor(\n @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n ) {\n if (defaultAppTheme) {\n this.applicationTheme = defaultAppTheme;\n }\n }\n\n calculatePercentages(segments: SegmentedBar[]): SegmentedBarWithPercentage[] {\n const total = segments.reduce((sum, segment) => sum + segment.value, 0);\n return segments.map(segment => {\n const percentage = (segment.value / total) 100;\n let percentageLabel = '';\n\n if (percentage === 0) {\n percentageLabel = '0%';\n } else if (percentage > 0 && percentage < 1) {\n percentageLabel = '>1%';\n } else {\n percentageLabel = `${Math.ceil(percentage)}%`;\n }\n\n return { ...segment, percentage: percentageLabel };\n });\n }\n\n get accessibleValueText(): string {\n return this.segmentList\n .map((segment, index) => `${segment.tooltip \|\| `Value ${index}`}: ${segment.value}`)\n .join(', ');\n }\n}\n","<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 <ng-container ngFor=\"let segment of segmentList\">\n <div\n class=\"segmented-bar\"\n ngIf=\"segment.value\"\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 <ui-icon ngIf=\"segment.icon\" [applicationTheme]=\"applicationTheme\" [name]=\"segment.icon\"></ui-icon>\n <span>{{ segment.value }}</span>\n </div>\n </ng-container>\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\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","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { SegmentedBarComponent } from './segmented-bar.component';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { MatInputModule } from '@angular/material/input';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { TooltipComponentModule } from '@testgorilla/tgo-ui/components/tooltip';\n\n@NgModule({\n declarations: [SegmentedBarComponent],\n imports: [CommonModule, MatTooltipModule, MatInputModule, IconComponentModule, TooltipComponentModule],\n exports: [SegmentedBarComponent],\n})\nexport class SegmentedBarComponentModule {}\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-bar.mjs","sources":["../../../components/segmented-bar/segmented-bar.component.ts","../../../components/segmented-bar/segmented-bar.component.html","../../../components/segmented-bar/segmented-bar.component.module.ts","../../../components/segmented-bar/testgorilla-tgo-ui-components-segmented-bar.ts"],"sourcesContent":["import { Component, Inject, Input, Optional } from '@angular/core';\nimport { SegmentedBar, SegmentedBarVariant, SegmentedBarWithPercentage } from './segmented-bar.model';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\n\n@Component({\n selector: 'ui-segmented-bar',\n templateUrl: './segmented-bar.component.html',\n styleUrls: ['./segmented-bar.component.scss'],\n standalone: false,\n})\nexport class SegmentedBarComponent {\n /*\n The width of the segmented bar. Defaults to '100%'.\n * You can use '100%' or '100px' for this field. 100 is just an example\n * @default '100%'\n * @type {string}\n * @memberof SegmentedBarComponent\n /\n @Input() width = '100%';\n\n /\n The size variant of the segmented bar. Can be 'small' or 'large'.\n * Defaults to 'large'.\n * @default 'large'\n * @type {SegmentedBarVariant}\n * @memberof SegmentedBarComponent\n /\n @Input() size: SegmentedBarVariant = 'large';\n\n /\n The segments to be displayed in the segmented bar.\n * @required true\n * @type {SegmentedBar}\n * @memberof SegmentedBarComponent\n /\n @Input({ required: true }) set segments(segments: SegmentedBar[]) {\n this.segmentList = this.calculatePercentages(segments);\n }\n\n /\n \n * Defines the application theme\n \n @type {ApplicationTheme}\n * @memberof SegmentedBarComponent\n /\n @Input() applicationTheme: ApplicationTheme = 'light';\n\n /\n A string representing the ARIA label for accessibility.\n * This label is used to provide an accessible name for the input element.\n * @type {string}\n * @memberof SegmentedBarComponent\n /\n @Input() ariaLabel: string;\n\n /\n A string representing the ARIA requirement for accessibility.\n * This attribute is used to indicate whether an input field is required for form submission.\n * @type {boolean}\n * @memberof SegmentedBarComponent\n /\n @Input() ariaRequired = false;\n\n /\n Groups the tooltips into one template\n \n @type {boolean}\n * @memberof SegmentedBarComponent\n /\n @Input() tooltipStats = false;\n\n segmentList: SegmentedBarWithPercentage[] = [];\n\n constructor(\n @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n ) {\n if (defaultAppTheme) {\n this.applicationTheme = defaultAppTheme;\n }\n }\n\n calculatePercentages(segments: SegmentedBar[]): SegmentedBarWithPercentage[] {\n const total = segments.reduce((sum, segment) => sum + segment.value, 0);\n return segments.map(segment => {\n const percentage = (segment.value / total) 100;\n let percentageLabel = '';\n\n if (percentage === 0) {\n percentageLabel = '0%';\n } else if (percentage > 0 && percentage < 1) {\n percentageLabel = '>1%';\n } else {\n percentageLabel = `${Math.ceil(percentage)}%`;\n }\n\n return { ...segment, percentage: percentageLabel };\n });\n }\n\n get accessibleValueText(): string {\n return this.segmentList\n .map((segment, index) => `${segment.tooltip \|\| `Value ${index}`}: ${segment.value}`)\n .join(', ');\n }\n}\n","<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 <ng-container ngFor=\"let segment of segmentList\">\n <div\n class=\"segmented-bar\"\n ngIf=\"segment.value\"\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 <ui-icon ngIf=\"segment.icon\" [applicationTheme]=\"applicationTheme\" [name]=\"segment.icon\"></ui-icon>\n <span>{{ segment.value }}</span>\n </div>\n </ng-container>\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\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","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { SegmentedBarComponent } from './segmented-bar.component';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { MatInputModule } from '@angular/material/input';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { TooltipComponentModule } from '@testgorilla/tgo-ui/components/tooltip';\n\n@NgModule({\n declarations: [SegmentedBarComponent],\n imports: [CommonModule, MatTooltipModule, MatInputModule, IconComponentModule, TooltipComponentModule],\n exports: [SegmentedBarComponent],\n})\nexport class SegmentedBarComponentModule {}\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-button.mjs CHANGED Viewed

@@ -68,16 +68,16 @@ class SegmentedButtonComponent {
         this.value = value;
         this.buttonSelected.emit(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.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: "20.3.18", type: SegmentedButtonComponent, isStandalone: false, 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: "19.2.20", ngImport: i0, type: SegmentedButtonComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: SegmentedButtonComponent, isStandalone: false, 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),
                 multi: true,
             },
-        ], 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:#46a997}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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2.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: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], 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  <mat-button-toggle\n    [disableRipple]=\"true\"\n    *ngFor=\"let button of buttonConfig\"\n    [value]=\"button.value\"\n    [ngClass]=\"{ disabled: button.disabled }\"\n    [matTooltip]=\"button.tooltip ?? ''\"\n  >\n    <ng-container *ngIf=\"button.template; else label\" [ngTemplateOutlet]=\"button.template\"></ng-container>\n    <ng-template #label>{{ button.label }}</ng-template>\n  </mat-button-toggle>\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:#46a997}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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2.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: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SegmentedButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SegmentedButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-segmented-button', providers: [
                         {
@@ -85,7 +85,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                             useExisting: forwardRef(() => SegmentedButtonComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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:#46a997}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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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  <mat-button-toggle\n    [disableRipple]=\"true\"\n    *ngFor=\"let button of buttonConfig\"\n    [value]=\"button.value\"\n    [ngClass]=\"{ disabled: button.disabled }\"\n    [matTooltip]=\"button.tooltip ?? ''\"\n  >\n    <ng-container *ngIf=\"button.template; else label\" [ngTemplateOutlet]=\"button.template\"></ng-container>\n    <ng-template #label>{{ button.label }}</ng-template>\n  </mat-button-toggle>\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:#46a997}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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -107,11 +107,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             }] } });
 class SegmentedButtonComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SegmentedButtonComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: SegmentedButtonComponentModule, declarations: [SegmentedButtonComponent], imports: [CommonModule, MatButtonToggleModule, FormsModule, MatTooltipModule], exports: [SegmentedButtonComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SegmentedButtonComponentModule, imports: [CommonModule, MatButtonToggleModule, FormsModule, MatTooltipModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SegmentedButtonComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: SegmentedButtonComponentModule, declarations: [SegmentedButtonComponent], imports: [CommonModule, MatButtonToggleModule, FormsModule, MatTooltipModule], exports: [SegmentedButtonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SegmentedButtonComponentModule, imports: [CommonModule, MatButtonToggleModule, FormsModule, MatTooltipModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SegmentedButtonComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SegmentedButtonComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SegmentedButtonComponent],

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

	@@ -1 +1 @@
1	- {"version":3,"file":"testgorilla-tgo-ui-components-segmented-button.mjs","sources":["../../../components/segmented-button/segmented-button.component.ts","../../../components/segmented-button/segmented-button.component.html","../../../components/segmented-button/segmented-button.component.module.ts","../../../components/segmented-button/testgorilla-tgo-ui-components-segmented-button.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n forwardRef,\n Inject,\n Input,\n Optional,\n Output,\n} from '@angular/core';\nimport { SegmentedButton } from './segmented-button.model';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\n\n@Component({\n selector: 'ui-segmented-button',\n templateUrl: './segmented-button.component.html',\n styleUrls: ['./segmented-button.component.scss'],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SegmentedButtonComponent),\n multi: true,\n },\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false,\n})\nexport class SegmentedButtonComponent implements ControlValueAccessor {\n /*\n Input property to set the buttons for the segmented button.\n * @type SegmentedButton\n * @memberof SegmentedButtonComponent\n /\n @Input({ required: true }) buttonConfig: SegmentedButton[];\n\n /\n Whether the component is disabled.\n * Default: false.\n \n @type {boolean}\n * @memberof SegmentedButtonComponent\n /\n @Input() disabled = false;\n\n /\n Indicator of the Segmented Button width\n \n @memberof SegmentedButtonComponent\n /\n @Input() fullWidth = false;\n\n /\n Selected button\n \n @memberof SegmentedButtonComponent\n /\n @Input() set value(v: any) {\n this._value = v;\n this.onChange(v);\n }\n\n /\n \n * Defines the application theme\n \n @type {ApplicationTheme}\n * @memberof SegmentedButtonComponent\n /\n @Input() applicationTheme: ApplicationTheme = 'light';\n\n @Output() buttonSelected = new EventEmitter<any>();\n\n protected _value: any;\n\n get value(): any {\n return this._value;\n }\n\n constructor(\n @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n ) {\n if (defaultAppTheme) {\n this.applicationTheme = defaultAppTheme;\n }\n }\n\n onChange = (_v: any) => {};\n onTouch = () => {};\n\n writeValue(obj: any): void {\n this.value = obj;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n }\n\n registerOnChange(fn: any): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: any): void {\n this.onTouch = fn;\n }\n\n manualChangeValue({ value }: any) {\n this.value = value;\n this.buttonSelected.emit(value);\n }\n}\n","<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","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { SegmentedButtonComponent } from './segmented-button.component';\nimport { MatButtonToggleModule } from '@angular/material/button-toggle';\nimport { FormsModule } from '@angular/forms';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\n@NgModule({\n declarations: [SegmentedButtonComponent],\n exports: [SegmentedButtonComponent],\n imports: [CommonModule, MatButtonToggleModule, FormsModule, MatTooltipModule],\n})\nexport class SegmentedButtonComponentModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;MA4Ba,wBAAwB,CAAA;AAwBnC;;;;AAIG;IACH,IAAa,KAAK,CAAC,CAAM,EAAA;AACvB,QAAA,IAAI,CAAC,MAAM,GAAG,CAAC;AACf,QAAA,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;IAClB;AAeA,IAAA,IAAI,KAAK,GAAA;QACP,OAAO,IAAI,CAAC,MAAM;IACpB;AAEA,IAAA,WAAA,CAC6E,eAAiC,EAAA;QAAjC,IAAA,CAAA,eAAe,GAAf,eAAe;AA5C5F;;;;;;AAMG;QACM,IAAA,CAAA,QAAQ,GAAG,KAAK;AAEzB;;;;AAIG;QACM,IAAA,CAAA,SAAS,GAAG,KAAK;AAY1B;;;;;;AAMG;QACM,IAAA,CAAA,gBAAgB,GAAqB,OAAO;AAE3C,QAAA,IAAA,CAAA,cAAc,GAAG,IAAI,YAAY,EAAO;AAgBlD,QAAA,IAAA,CAAA,QAAQ,GAAG,CAAC,EAAO,KAAI,EAAE,CAAC;AAC1B,QAAA,IAAA,CAAA,OAAO,GAAG,MAAK,EAAE,CAAC;QANhB,IAAI,eAAe,EAAE;AACnB,YAAA,IAAI,CAAC,gBAAgB,GAAG,eAAe;QACzC;IACF;AAKA,IAAA,UAAU,CAAC,GAAQ,EAAA;AACjB,QAAA,IAAI,CAAC,KAAK,GAAG,GAAG;IAClB;AAEA,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AAClC,QAAA,IAAI,CAAC,QAAQ,GAAG,UAAU;IAC5B;AAEA,IAAA,gBAAgB,CAAC,EAAO,EAAA;AACtB,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;IACpB;AAEA,IAAA,iBAAiB,CAAC,EAAO,EAAA;AACvB,QAAA,IAAI,CAAC,OAAO,GAAG,EAAE;IACnB;IAEA,iBAAiB,CAAC,EAAE,KAAK,EAAO,EAAA;AAC9B,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK;AAClB,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC;IACjC;AAjFW,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,wBAAwB,kBAoDb,oCAAoC,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AApD/C,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,wBAAwB,EAAA,YAAA,EAAA,KAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,QAAA,EAAA,UAAA,EAAA,SAAA,EAAA,WAAA,EAAA,KAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,EAAA,OAAA,EAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,SAAA,EAVxB;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,wBAAwB,CAAC;AACvD,gBAAA,KAAK,EAAE,IAAI;AACZ,aAAA;AACF,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECxBH,~~2tBAuBA~~,EAAA,MAAA,EAAA,CAAA,ooRAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,MAAA,EAAA,UAAA,EAAA,OAAA,EAAA,UAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,8BAAA,EAAA,gCAAA,CAAA,EAAA,OAAA,EAAA,CAAA,aAAA,EAAA,QAAA,CAAA,EAAA,QAAA,EAAA,CAAA,sBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,MAAA,EAAA,OAAA,EAAA,UAAA,EAAA,eAAA,EAAA,YAAA,EAAA,SAAA,EAAA,UAAA,EAAA,qBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,QAAA,CAAA,EAAA,QAAA,EAAA,CAAA,iBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,4BAAA,EAAA,oBAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,yBAAA,EAAA,YAAA,EAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;~~4FDKa~~,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAdpC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,qBAAqB,EAAA,SAAA,EAGpB;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,8BAA8B,CAAC;AACvD,4BAAA,KAAK,EAAE,IAAI;AACZ,yBAAA;AACF,qBAAA,EAAA,eAAA,EACgB,uBAAuB,CAAC,MAAM,EAAA,UAAA,EACnC,KAAK,EAAA,QAAA,EAAA,~~2tBAAA~~,EAAA,MAAA,EAAA,CAAA,ooRAAA,CAAA,EAAA;;0BAsDd;;0BAAY,MAAM;2BAAC,oCAAoC~~;;sBA9CzD~~,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE~~;;sBASxB;;sBAOA;;sBAOA;;sBAYA;;sBAEA~~;;;ME3DU,8BAA8B,CAAA;+GAA9B,8BAA8B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;gHAA9B,8BAA8B,EAAA,YAAA,EAAA,CAJ1B,wBAAwB,CAAA,EAAA,OAAA,EAAA,CAE7B,YAAY,EAAE,qBAAqB,EAAE,WAAW,EAAE,gBAAgB,CAAA,EAAA,OAAA,EAAA,CADlE,wBAAwB,CAAA,EAAA,CAAA,CAAA;AAGvB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,8BAA8B,YAF/B,YAAY,EAAE,qBAAqB,EAAE,WAAW,EAAE,gBAAgB,CAAA,EAAA,CAAA,CAAA;;4FAEjE,8BAA8B,EAAA,UAAA,EAAA,CAAA;kBAL1C,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,YAAY,EAAE,CAAC,wBAAwB,CAAC;oBACxC,OAAO,EAAE,CAAC,wBAAwB,CAAC;oBACnC,OAAO,EAAE,CAAC,YAAY,EAAE,qBAAqB,EAAE,WAAW,EAAE,gBAAgB,CAAC;AAC9E,iBAAA;;;ACXD;;AAEG;;;;"}
1	+ {"version":3,"file":"testgorilla-tgo-ui-components-segmented-button.mjs","sources":["../../../components/segmented-button/segmented-button.component.ts","../../../components/segmented-button/segmented-button.component.html","../../../components/segmented-button/segmented-button.component.module.ts","../../../components/segmented-button/testgorilla-tgo-ui-components-segmented-button.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n EventEmitter,\n forwardRef,\n Inject,\n Input,\n Optional,\n Output,\n} from '@angular/core';\nimport { SegmentedButton } from './segmented-button.model';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\n\n@Component({\n selector: 'ui-segmented-button',\n templateUrl: './segmented-button.component.html',\n styleUrls: ['./segmented-button.component.scss'],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SegmentedButtonComponent),\n multi: true,\n },\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false,\n})\nexport class SegmentedButtonComponent implements ControlValueAccessor {\n /*\n Input property to set the buttons for the segmented button.\n * @type SegmentedButton\n * @memberof SegmentedButtonComponent\n /\n @Input({ required: true }) buttonConfig: SegmentedButton[];\n\n /\n Whether the component is disabled.\n * Default: false.\n \n @type {boolean}\n * @memberof SegmentedButtonComponent\n /\n @Input() disabled = false;\n\n /\n Indicator of the Segmented Button width\n \n @memberof SegmentedButtonComponent\n /\n @Input() fullWidth = false;\n\n /\n Selected button\n \n @memberof SegmentedButtonComponent\n /\n @Input() set value(v: any) {\n this._value = v;\n this.onChange(v);\n }\n\n /\n \n * Defines the application theme\n \n @type {ApplicationTheme}\n * @memberof SegmentedButtonComponent\n /\n @Input() applicationTheme: ApplicationTheme = 'light';\n\n @Output() buttonSelected = new EventEmitter<any>();\n\n protected _value: any;\n\n get value(): any {\n return this._value;\n }\n\n constructor(\n @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n ) {\n if (defaultAppTheme) {\n this.applicationTheme = defaultAppTheme;\n }\n }\n\n onChange = (_v: any) => {};\n onTouch = () => {};\n\n writeValue(obj: any): void {\n this.value = obj;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n }\n\n registerOnChange(fn: any): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: any): void {\n this.onTouch = fn;\n }\n\n manualChangeValue({ value }: any) {\n this.value = value;\n this.buttonSelected.emit(value);\n }\n}\n","<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 <mat-button-toggle\n [disableRipple]=\"true\"\n ngFor=\"let button of buttonConfig\"\n [value]=\"button.value\"\n [ngClass]=\"{ disabled: button.disabled }\"\n [matTooltip]=\"button.tooltip ?? ''\"\n >\n <ng-container ngIf=\"button.template; else label\" [ngTemplateOutlet]=\"button.template\"></ng-container>\n <ng-template #label>{{ button.label }}</ng-template>\n </mat-button-toggle>\n</mat-button-toggle-group>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { SegmentedButtonComponent } from './segmented-button.component';\nimport { MatButtonToggleModule } from '@angular/material/button-toggle';\nimport { FormsModule } from '@angular/forms';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\n@NgModule({\n declarations: [SegmentedButtonComponent],\n exports: [SegmentedButtonComponent],\n imports: [CommonModule, MatButtonToggleModule, FormsModule, MatTooltipModule],\n})\nexport class SegmentedButtonComponentModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}