npm - @testgorilla/tgo-ui - Versions diffs - 11.8.0 → 11.10.0 - Mend

@testgorilla/tgo-ui 11.8.0 → 11.10.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 (147) hide show

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

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

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 { NgClass, NgStyle } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Inject, Input, Optional } from '@angular/core';\nimport { MatTooltip } from '@angular/material/tooltip';\n\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { TooltipTemplateDirective } from '@testgorilla/tgo-ui/components/tooltip';\n\nimport { SegmentedBar, SegmentedBarVariant, SegmentedBarWithPercentage } from './segmented-bar.model';\n\n@Component({\n selector: 'ui-segmented-bar',\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './segmented-bar.component.html',\n styleUrls: ['./segmented-bar.component.scss'],\n imports: [NgClass, TooltipTemplateDirective, NgStyle, MatTooltip, IconComponentModule],\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 (\n this.segmentList\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- an empty tooltip falls back to a generated label\n .map((segment, index) => `${segment.tooltip \|\| `Value ${index}`}: ${segment.value}`)\n .join(', ')\n );\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 @for (segment of segmentList; track segment) {\n @if (segment.value) {\n <div\n class=\"segmented-bar\"\n [ngClass]=\"segment.color\"\n [ngStyle]=\"{ flex: segment.value }\"\n [matTooltip]=\"!tooltipStats ? (segment.tooltip ?? '') : ''\"\n [matTooltipClass]=\"applicationTheme\"\n [attr.aria-hidden]=\"true\"\n [attr.aria-required]=\"ariaRequired\"\n >\n @if (segment.icon) {\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"segment.icon\"></ui-icon>\n }\n <span>{{ segment.value }}</span>\n </div>\n }\n }\n</div>\n<ng-template #segmentedStats>\n <div class=\"stats-container\">\n <div class=\"name-column\">\n @for (segment of segmentList; track segment.value) {\n <div class=\"segment\">\n <div [class]=\"'point ' + segment.color\"></div>\n <span [class]=\"'label ' + segment.color\">{{ segment.tooltip }}</span>\n </div>\n }\n </div>\n\n <div class=\"value-column\">\n @for (segment of segmentList; track segment.value) {\n <div class=\"segment\">\n <span>{{ segment.value }}</span>\n </div>\n }\n </div>\n\n <div class=\"percentage-column\">\n @for (segment of segmentList; track segment.value) {\n <div class=\"segment\">\n <span>{{ segment.percentage }}</span>\n </div>\n }\n </div>\n </div>\n</ng-template>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { TooltipComponentModule } from '@testgorilla/tgo-ui/components/tooltip';\n\nimport { SegmentedBarComponent } from './segmented-bar.component';\n\n@NgModule({\n imports: [\n CommonModule,\n MatTooltipModule,\n MatInputModule,\n IconComponentModule,\n TooltipComponentModule,\n SegmentedBarComponent,\n ],\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 { NgClass, NgStyle } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Inject, Input, Optional } from '@angular/core';\nimport { MatTooltip } from '@angular/material/tooltip';\n\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { TooltipTemplateDirective } from '@testgorilla/tgo-ui/components/tooltip';\n\nimport { SegmentedBar, SegmentedBarVariant, SegmentedBarWithPercentage } from './segmented-bar.model';\n\n@Component({\n selector: 'ui-segmented-bar',\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './segmented-bar.component.html',\n styleUrls: ['./segmented-bar.component.scss'],\n imports: [NgClass, TooltipTemplateDirective, NgStyle, MatTooltip, IconComponentModule],\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 @Input() testId: string \| null = null;\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 (\n this.segmentList\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- an empty tooltip falls back to a generated label\n .map((segment, index) => `${segment.tooltip \|\| `Value ${index}`}: ${segment.value}`)\n .join(', ')\n );\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 [attr.data-testid]=\"testId\"\n>\n @for (segment of segmentList; track segment) {\n @if (segment.value) {\n <div\n class=\"segmented-bar\"\n [ngClass]=\"segment.color\"\n [ngStyle]=\"{ flex: segment.value }\"\n [matTooltip]=\"!tooltipStats ? (segment.tooltip ?? '') : ''\"\n [matTooltipClass]=\"applicationTheme\"\n [attr.aria-hidden]=\"true\"\n [attr.aria-required]=\"ariaRequired\"\n >\n @if (segment.icon) {\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"segment.icon\"></ui-icon>\n }\n <span>{{ segment.value }}</span>\n </div>\n }\n }\n</div>\n<ng-template #segmentedStats>\n <div class=\"stats-container\">\n <div class=\"name-column\">\n @for (segment of segmentList; track segment.value) {\n <div class=\"segment\">\n <div [class]=\"'point ' + segment.color\"></div>\n <span [class]=\"'label ' + segment.color\">{{ segment.tooltip }}</span>\n </div>\n }\n </div>\n\n <div class=\"value-column\">\n @for (segment of segmentList; track segment.value) {\n <div class=\"segment\">\n <span>{{ segment.value }}</span>\n </div>\n }\n </div>\n\n <div class=\"percentage-column\">\n @for (segment of segmentList; track segment.value) {\n <div class=\"segment\">\n <span>{{ segment.percentage }}</span>\n </div>\n }\n </div>\n </div>\n</ng-template>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { TooltipComponentModule } from '@testgorilla/tgo-ui/components/tooltip';\n\nimport { SegmentedBarComponent } from './segmented-bar.component';\n\n@NgModule({\n imports: [\n CommonModule,\n MatTooltipModule,\n MatInputModule,\n IconComponentModule,\n TooltipComponentModule,\n SegmentedBarComponent,\n ],\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

@@ -18,6 +18,12 @@ class SegmentedButtonComponent {
     get value() {
         return this._value;
     }
+    buttonTestId(button) {
+        if (button.testId) {
+            return button.testId;
+        }
+        return this.testId ? `${this.testId}-${button.value}` : null;
+    }
     constructor(defaultAppTheme) {
         this.defaultAppTheme = defaultAppTheme;
         /**
@@ -42,6 +48,8 @@ class SegmentedButtonComponent {
          * @memberof SegmentedButtonComponent
          */
         this.applicationTheme = 'light';
+        this.testId = null;
+        this.ariaLabel = '';
         this.buttonSelected = new EventEmitter();
         this.onChange = (_v) => { };
         this.onTouch = () => { };
@@ -71,13 +79,13 @@ class SegmentedButtonComponent {
         this.buttonSelected.emit(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SegmentedButtonComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: SegmentedButtonComponent, isStandalone: true, selector: "ui-segmented-button", inputs: { buttonConfig: "buttonConfig", disabled: "disabled", fullWidth: "fullWidth", value: "value", applicationTheme: "applicationTheme" }, outputs: { buttonSelected: "buttonSelected" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: SegmentedButtonComponent, isStandalone: true, selector: "ui-segmented-button", inputs: { buttonConfig: "buttonConfig", disabled: "disabled", fullWidth: "fullWidth", value: "value", applicationTheme: "applicationTheme", testId: "testId", ariaLabel: "ariaLabel" }, 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:#d410aa}small{font-size:8px;line-height:12px}caption,.caption{font-size:12px;line-height:16px;display:inline-block}*[theme=dark] h1,*[theme=dark] .h1,*[theme=light] h1,*[theme=light] .h1{color:#242424;font-size:32px;line-height:48px;font-weight:400}*[theme=dark] h1.black,*[theme=dark] .h1.black,*[theme=light] h1.black,*[theme=light] .h1.black{font-family:ModernGothic,sans-serif!important;font-weight:900}*[theme=dark] h2,*[theme=dark] .h2,*[theme=light] h2,*[theme=light] .h2{color:#242424;font-size:24px;line-height:30px;font-weight:900;font-family:ModernGothic,sans-serif!important}*[theme=dark] h3,*[theme=dark] .h3,*[theme=light] h3,*[theme=light] .h3{font-size:20px;line-height:26px;font-weight:400;color:#242424}*[theme=dark] h3.bold,*[theme=dark] .h3.bold,*[theme=light] h3.bold,*[theme=light] .h3.bold{font-family:ModernGothic,sans-serif!important;font-weight:700}*[theme=dark] h4,*[theme=dark] .h4,*[theme=light] h4,*[theme=light] .h4{font-size:16px;line-height:20px;font-weight:700;color:#242424;font-family:ModernGothic,sans-serif!important}*[theme=dark] h5,*[theme=dark] .h5,*[theme=light] h5,*[theme=light] .h5{font-size:14px;line-height:18px;font-weight:700;color:#242424;font-family:ModernGothic,sans-serif!important}*[theme=dark] .body-large,*[theme=light] .body-large{font-weight:700;font-size:14px;line-height:22px}*[theme=dark] .body-large-bold,*[theme=light] .body-large-bold{font-weight:700;font-size:16px;line-height:24px}*[theme=dark] .body-large-regular,*[theme=light] .body-large-regular{font-weight:400;font-size:16px;line-height:24px}*[theme=dark] .body-small-bold,*[theme=light] .body-small-bold{font-weight:700;font-size:12px;line-height:16px}*[theme=dark] .body-small-regular,*[theme=light] .body-small-regular{font-weight:400;font-size:12px;line-height:16px}*[theme=dark] .hyperlink-large,*[theme=light] .hyperlink-large{font-weight:500;font-size:16px;line-height:24px}*[theme=dark] .hyperlink,*[theme=light] .hyperlink{font-weight:500;font-size:14px;line-height:22px}*[theme=dark] .hyperlink-small,*[theme=light] .hyperlink-small{font-weight:500;font-size:12px;line-height:16px}*[theme=dark] .button-label,*[theme=light] .button-label{font-weight:500;font-size:14px;font-feature-settings:\"capb\"}*[theme=dark] .label,*[theme=light] .label{font-weight:400;font-size:14px;font-feature-settings:\"capb\"}*[theme=dark] .large-hover-state,*[theme=light] .large-hover-state{font-weight:700;text-decoration:underline;font-size:16px;line-height:24px}*[theme=dark] .hover-state,*[theme=light] .hover-state{font-weight:700;text-decoration:underline;font-size:14px;line-height:22px}*[theme=dark] h1,*[theme=dark] .h1,*[theme=dark] h2,*[theme=dark] .h2,*[theme=dark] h3,*[theme=dark] .h3,*[theme=dark] h4,*[theme=dark] .h4,*[theme=dark] h5,*[theme=dark] .h5{color:#fff}.segmented-button-container.full-width,.segmented-button-container.full-width .mat-button-toggle{width:100%}.segmented-button-container[theme=classic] .mat-button-toggle{min-width:80px;height:40px}.segmented-button-container[theme=classic] .mat-button-toggle ::ng-deep .mat-button-toggle-button,.segmented-button-container[theme=classic] .mat-button-toggle .mat-button-toggle-label-content{height:40px;display:flex;align-items:center}.segmented-button-container[theme=classic] .mat-button-toggle.mat-button-toggle-checked{background-color:#276678;color:#fff}.segmented-button-container[theme=light],.segmented-button-container[theme=dark]{border-color:#919191;overflow:visible}.segmented-button-container[theme=light]:first-child,.segmented-button-container[theme=light] .mat-button-toggle:first-child,.segmented-button-container[theme=dark]:first-child,.segmented-button-container[theme=dark] .mat-button-toggle:first-child{border-bottom-left-radius:10px;border-top-left-radius:10px}.segmented-button-container[theme=light]:last-child,.segmented-button-container[theme=light] .mat-button-toggle:last-child,.segmented-button-container[theme=dark]:last-child,.segmented-button-container[theme=dark] .mat-button-toggle:last-child{border-bottom-right-radius:10px;border-top-right-radius:10px}.segmented-button-container[theme=light] .mat-button-toggle,.segmented-button-container[theme=dark] .mat-button-toggle{min-height:48px;min-width:80px;border-color:#919191}.segmented-button-container[theme=light] .mat-button-toggle ::ng-deep .mat-button-toggle-label-content,.segmented-button-container[theme=dark] .mat-button-toggle ::ng-deep .mat-button-toggle-label-content{color:#242424;font-weight:400;font-size:14px;font-feature-settings:\"capb\"}.segmented-button-container[theme=light] .mat-button-toggle:hover,.segmented-button-container[theme=dark] .mat-button-toggle:hover{background:#fff2fc}.segmented-button-container[theme=light] .mat-button-toggle.mat-button-toggle-checked,.segmented-button-container[theme=dark] .mat-button-toggle.mat-button-toggle-checked{background:#ffe6fa}.segmented-button-container[theme=light] .mat-button-toggle.mat-button-toggle-checked ::ng-deep .mat-button-toggle-label-content,.segmented-button-container[theme=dark] .mat-button-toggle.mat-button-toggle-checked ::ng-deep .mat-button-toggle-label-content{font-weight:700}.segmented-button-container[theme=light] .mat-button-toggle ::ng-deep .mat-button-toggle-focus-overlay,.segmented-button-container[theme=dark] .mat-button-toggle ::ng-deep .mat-button-toggle-focus-overlay{display:none}.segmented-button-container[theme=light] .mat-button-toggle.disabled,.segmented-button-container[theme=dark] .mat-button-toggle.disabled{pointer-events:none;background:#fff}.segmented-button-container[theme=light] .mat-button-toggle.disabled ::ng-deep .mat-button-toggle-label-content,.segmented-button-container[theme=dark] .mat-button-toggle.disabled ::ng-deep .mat-button-toggle-label-content{color:#919191;font-weight:400}.segmented-button-container.disabled{pointer-events:none}.segmented-button-container.disabled .mat-button-toggle{background:#fff}.segmented-button-container.disabled .mat-button-toggle ::ng-deep .mat-button-toggle-label-content{color:#919191;font-weight:400}\n"], dependencies: [{ kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], 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  [attr.data-testid]=\"testId\"\n  [attr.aria-label]=\"ariaLabel || null\"\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      [attr.data-testid]=\"buttonTestId(button)\"\n      [aria-label]=\"button.ariaLabel ?? ''\"\n    >\n      @if (button.template) {\n        <ng-container [ngTemplateOutlet]=\"button.template\"></ng-container>\n      } @else {\n        {{ button.label }}\n      }\n    </mat-button-toggle>\n  }\n</mat-button-toggle-group>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}h1,h2,h3,.h1,.h2,.h3{font-weight:400;margin:0}h4,h5,h6,.h4,.h5,.h6{font-weight:700;margin:0}h1,.h1{font-size:40px;line-height:60px;font-weight:700}h2,.h2{font-size:24px;line-height:36px}h2.bold,.h2.bold{font-weight:700}h3,.h3{font-size:20px;line-height:28px}h3.bold,.h3.bold{font-weight:700}h4,.h4{font-size:16px;line-height:24px}h5,.h5{font-size:14px;line-height:20px}h6,.h6{font-size:12px;line-height:16px;text-transform:uppercase}body{font-size:14px;line-height:20px}strong,b{font-weight:700!important}.featured{font-size:16px;line-height:24px}p .semibold,.featured .semibold,.caption .semibold{font-weight:600;color:#d410aa}small{font-size:8px;line-height:12px}caption,.caption{font-size:12px;line-height:16px;display:inline-block}*[theme=dark] h1,*[theme=dark] .h1,*[theme=light] h1,*[theme=light] .h1{color:#242424;font-size:32px;line-height:48px;font-weight:400}*[theme=dark] h1.black,*[theme=dark] .h1.black,*[theme=light] h1.black,*[theme=light] .h1.black{font-family:ModernGothic,sans-serif!important;font-weight:900}*[theme=dark] h2,*[theme=dark] .h2,*[theme=light] h2,*[theme=light] .h2{color:#242424;font-size:24px;line-height:30px;font-weight:900;font-family:ModernGothic,sans-serif!important}*[theme=dark] h3,*[theme=dark] .h3,*[theme=light] h3,*[theme=light] .h3{font-size:20px;line-height:26px;font-weight:400;color:#242424}*[theme=dark] h3.bold,*[theme=dark] .h3.bold,*[theme=light] h3.bold,*[theme=light] .h3.bold{font-family:ModernGothic,sans-serif!important;font-weight:700}*[theme=dark] h4,*[theme=dark] .h4,*[theme=light] h4,*[theme=light] .h4{font-size:16px;line-height:20px;font-weight:700;color:#242424;font-family:ModernGothic,sans-serif!important}*[theme=dark] h5,*[theme=dark] .h5,*[theme=light] h5,*[theme=light] .h5{font-size:14px;line-height:18px;font-weight:700;color:#242424;font-family:ModernGothic,sans-serif!important}*[theme=dark] .body-large,*[theme=light] .body-large{font-weight:700;font-size:14px;line-height:22px}*[theme=dark] .body-large-bold,*[theme=light] .body-large-bold{font-weight:700;font-size:16px;line-height:24px}*[theme=dark] .body-large-regular,*[theme=light] .body-large-regular{font-weight:400;font-size:16px;line-height:24px}*[theme=dark] .body-small-bold,*[theme=light] .body-small-bold{font-weight:700;font-size:12px;line-height:16px}*[theme=dark] .body-small-regular,*[theme=light] .body-small-regular{font-weight:400;font-size:12px;line-height:16px}*[theme=dark] .hyperlink-large,*[theme=light] .hyperlink-large{font-weight:500;font-size:16px;line-height:24px}*[theme=dark] .hyperlink,*[theme=light] .hyperlink{font-weight:500;font-size:14px;line-height:22px}*[theme=dark] .hyperlink-small,*[theme=light] .hyperlink-small{font-weight:500;font-size:12px;line-height:16px}*[theme=dark] .button-label,*[theme=light] .button-label{font-weight:500;font-size:14px;font-feature-settings:\"capb\"}*[theme=dark] .label,*[theme=light] .label{font-weight:400;font-size:14px;font-feature-settings:\"capb\"}*[theme=dark] .large-hover-state,*[theme=light] .large-hover-state{font-weight:700;text-decoration:underline;font-size:16px;line-height:24px}*[theme=dark] .hover-state,*[theme=light] .hover-state{font-weight:700;text-decoration:underline;font-size:14px;line-height:22px}*[theme=dark] h1,*[theme=dark] .h1,*[theme=dark] h2,*[theme=dark] .h2,*[theme=dark] h3,*[theme=dark] .h3,*[theme=dark] h4,*[theme=dark] .h4,*[theme=dark] h5,*[theme=dark] .h5{color:#fff}.segmented-button-container.full-width,.segmented-button-container.full-width .mat-button-toggle{width:100%}.segmented-button-container[theme=classic] .mat-button-toggle{min-width:80px;height:40px}.segmented-button-container[theme=classic] .mat-button-toggle ::ng-deep .mat-button-toggle-button,.segmented-button-container[theme=classic] .mat-button-toggle .mat-button-toggle-label-content{height:40px;display:flex;align-items:center}.segmented-button-container[theme=classic] .mat-button-toggle.mat-button-toggle-checked{background-color:#276678;color:#fff}.segmented-button-container[theme=light],.segmented-button-container[theme=dark]{border-color:#919191;overflow:visible}.segmented-button-container[theme=light]:first-child,.segmented-button-container[theme=light] .mat-button-toggle:first-child,.segmented-button-container[theme=dark]:first-child,.segmented-button-container[theme=dark] .mat-button-toggle:first-child{border-bottom-left-radius:10px;border-top-left-radius:10px}.segmented-button-container[theme=light]:last-child,.segmented-button-container[theme=light] .mat-button-toggle:last-child,.segmented-button-container[theme=dark]:last-child,.segmented-button-container[theme=dark] .mat-button-toggle:last-child{border-bottom-right-radius:10px;border-top-right-radius:10px}.segmented-button-container[theme=light] .mat-button-toggle,.segmented-button-container[theme=dark] .mat-button-toggle{min-height:48px;min-width:80px;border-color:#919191}.segmented-button-container[theme=light] .mat-button-toggle ::ng-deep .mat-button-toggle-label-content,.segmented-button-container[theme=dark] .mat-button-toggle ::ng-deep .mat-button-toggle-label-content{color:#242424;font-weight:400;font-size:14px;font-feature-settings:\"capb\"}.segmented-button-container[theme=light] .mat-button-toggle:hover,.segmented-button-container[theme=dark] .mat-button-toggle:hover{background:#fff2fc}.segmented-button-container[theme=light] .mat-button-toggle.mat-button-toggle-checked,.segmented-button-container[theme=dark] .mat-button-toggle.mat-button-toggle-checked{background:#ffe6fa}.segmented-button-container[theme=light] .mat-button-toggle.mat-button-toggle-checked ::ng-deep .mat-button-toggle-label-content,.segmented-button-container[theme=dark] .mat-button-toggle.mat-button-toggle-checked ::ng-deep .mat-button-toggle-label-content{font-weight:700}.segmented-button-container[theme=light] .mat-button-toggle ::ng-deep .mat-button-toggle-focus-overlay,.segmented-button-container[theme=dark] .mat-button-toggle ::ng-deep .mat-button-toggle-focus-overlay{display:none}.segmented-button-container[theme=light] .mat-button-toggle.disabled,.segmented-button-container[theme=dark] .mat-button-toggle.disabled{pointer-events:none;background:#fff}.segmented-button-container[theme=light] .mat-button-toggle.disabled ::ng-deep .mat-button-toggle-label-content,.segmented-button-container[theme=dark] .mat-button-toggle.disabled ::ng-deep .mat-button-toggle-label-content{color:#919191;font-weight:400}.segmented-button-container.disabled{pointer-events:none}.segmented-button-container.disabled .mat-button-toggle{background:#fff}.segmented-button-container.disabled .mat-button-toggle ::ng-deep .mat-button-toggle-label-content{color:#919191;font-weight:400}\n"], dependencies: [{ kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SegmentedButtonComponent, decorators: [{
             type: Component,
@@ -87,7 +95,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                             useExisting: forwardRef(() => SegmentedButtonComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButtonToggleGroup, NgClass, MatButtonToggle, MatTooltip, NgTemplateOutlet], template: "<mat-button-toggle-group\n  class=\"segmented-button-container\"\n  [attr.theme]=\"applicationTheme\"\n  [ngClass]=\"{ disabled, 'full-width': fullWidth }\"\n  [value]=\"value\"\n  [hideSingleSelectionIndicator]=\"true\"\n  (change)=\"manualChangeValue($event)\"\n>\n  @for (button of buttonConfig; track button) {\n    <mat-button-toggle\n      [disableRipple]=\"true\"\n      [value]=\"button.value\"\n      [ngClass]=\"{ disabled: button.disabled }\"\n      [matTooltip]=\"button.tooltip ?? ''\"\n    >\n      @if (button.template) {\n        <ng-container [ngTemplateOutlet]=\"button.template\"></ng-container>\n      } @else {\n        {{ button.label }}\n      }\n    </mat-button-toggle>\n  }\n</mat-button-toggle-group>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}h1,h2,h3,.h1,.h2,.h3{font-weight:400;margin:0}h4,h5,h6,.h4,.h5,.h6{font-weight:700;margin:0}h1,.h1{font-size:40px;line-height:60px;font-weight:700}h2,.h2{font-size:24px;line-height:36px}h2.bold,.h2.bold{font-weight:700}h3,.h3{font-size:20px;line-height:28px}h3.bold,.h3.bold{font-weight:700}h4,.h4{font-size:16px;line-height:24px}h5,.h5{font-size:14px;line-height:20px}h6,.h6{font-size:12px;line-height:16px;text-transform:uppercase}body{font-size:14px;line-height:20px}strong,b{font-weight:700!important}.featured{font-size:16px;line-height:24px}p .semibold,.featured .semibold,.caption .semibold{font-weight:600;color:#d410aa}small{font-size:8px;line-height:12px}caption,.caption{font-size:12px;line-height:16px;display:inline-block}*[theme=dark] h1,*[theme=dark] .h1,*[theme=light] h1,*[theme=light] .h1{color:#242424;font-size:32px;line-height:48px;font-weight:400}*[theme=dark] h1.black,*[theme=dark] .h1.black,*[theme=light] h1.black,*[theme=light] .h1.black{font-family:ModernGothic,sans-serif!important;font-weight:900}*[theme=dark] h2,*[theme=dark] .h2,*[theme=light] h2,*[theme=light] .h2{color:#242424;font-size:24px;line-height:30px;font-weight:900;font-family:ModernGothic,sans-serif!important}*[theme=dark] h3,*[theme=dark] .h3,*[theme=light] h3,*[theme=light] .h3{font-size:20px;line-height:26px;font-weight:400;color:#242424}*[theme=dark] h3.bold,*[theme=dark] .h3.bold,*[theme=light] h3.bold,*[theme=light] .h3.bold{font-family:ModernGothic,sans-serif!important;font-weight:700}*[theme=dark] h4,*[theme=dark] .h4,*[theme=light] h4,*[theme=light] .h4{font-size:16px;line-height:20px;font-weight:700;color:#242424;font-family:ModernGothic,sans-serif!important}*[theme=dark] h5,*[theme=dark] .h5,*[theme=light] h5,*[theme=light] .h5{font-size:14px;line-height:18px;font-weight:700;color:#242424;font-family:ModernGothic,sans-serif!important}*[theme=dark] .body-large,*[theme=light] .body-large{font-weight:700;font-size:14px;line-height:22px}*[theme=dark] .body-large-bold,*[theme=light] .body-large-bold{font-weight:700;font-size:16px;line-height:24px}*[theme=dark] .body-large-regular,*[theme=light] .body-large-regular{font-weight:400;font-size:16px;line-height:24px}*[theme=dark] .body-small-bold,*[theme=light] .body-small-bold{font-weight:700;font-size:12px;line-height:16px}*[theme=dark] .body-small-regular,*[theme=light] .body-small-regular{font-weight:400;font-size:12px;line-height:16px}*[theme=dark] .hyperlink-large,*[theme=light] .hyperlink-large{font-weight:500;font-size:16px;line-height:24px}*[theme=dark] .hyperlink,*[theme=light] .hyperlink{font-weight:500;font-size:14px;line-height:22px}*[theme=dark] .hyperlink-small,*[theme=light] .hyperlink-small{font-weight:500;font-size:12px;line-height:16px}*[theme=dark] .button-label,*[theme=light] .button-label{font-weight:500;font-size:14px;font-feature-settings:\"capb\"}*[theme=dark] .label,*[theme=light] .label{font-weight:400;font-size:14px;font-feature-settings:\"capb\"}*[theme=dark] .large-hover-state,*[theme=light] .large-hover-state{font-weight:700;text-decoration:underline;font-size:16px;line-height:24px}*[theme=dark] .hover-state,*[theme=light] .hover-state{font-weight:700;text-decoration:underline;font-size:14px;line-height:22px}*[theme=dark] h1,*[theme=dark] .h1,*[theme=dark] h2,*[theme=dark] .h2,*[theme=dark] h3,*[theme=dark] .h3,*[theme=dark] h4,*[theme=dark] .h4,*[theme=dark] h5,*[theme=dark] .h5{color:#fff}.segmented-button-container.full-width,.segmented-button-container.full-width .mat-button-toggle{width:100%}.segmented-button-container[theme=classic] .mat-button-toggle{min-width:80px;height:40px}.segmented-button-container[theme=classic] .mat-button-toggle ::ng-deep .mat-button-toggle-button,.segmented-button-container[theme=classic] .mat-button-toggle .mat-button-toggle-label-content{height:40px;display:flex;align-items:center}.segmented-button-container[theme=classic] .mat-button-toggle.mat-button-toggle-checked{background-color:#276678;color:#fff}.segmented-button-container[theme=light],.segmented-button-container[theme=dark]{border-color:#919191;overflow:visible}.segmented-button-container[theme=light]:first-child,.segmented-button-container[theme=light] .mat-button-toggle:first-child,.segmented-button-container[theme=dark]:first-child,.segmented-button-container[theme=dark] .mat-button-toggle:first-child{border-bottom-left-radius:10px;border-top-left-radius:10px}.segmented-button-container[theme=light]:last-child,.segmented-button-container[theme=light] .mat-button-toggle:last-child,.segmented-button-container[theme=dark]:last-child,.segmented-button-container[theme=dark] .mat-button-toggle:last-child{border-bottom-right-radius:10px;border-top-right-radius:10px}.segmented-button-container[theme=light] .mat-button-toggle,.segmented-button-container[theme=dark] .mat-button-toggle{min-height:48px;min-width:80px;border-color:#919191}.segmented-button-container[theme=light] .mat-button-toggle ::ng-deep .mat-button-toggle-label-content,.segmented-button-container[theme=dark] .mat-button-toggle ::ng-deep .mat-button-toggle-label-content{color:#242424;font-weight:400;font-size:14px;font-feature-settings:\"capb\"}.segmented-button-container[theme=light] .mat-button-toggle:hover,.segmented-button-container[theme=dark] .mat-button-toggle:hover{background:#fff2fc}.segmented-button-container[theme=light] .mat-button-toggle.mat-button-toggle-checked,.segmented-button-container[theme=dark] .mat-button-toggle.mat-button-toggle-checked{background:#ffe6fa}.segmented-button-container[theme=light] .mat-button-toggle.mat-button-toggle-checked ::ng-deep .mat-button-toggle-label-content,.segmented-button-container[theme=dark] .mat-button-toggle.mat-button-toggle-checked ::ng-deep .mat-button-toggle-label-content{font-weight:700}.segmented-button-container[theme=light] .mat-button-toggle ::ng-deep .mat-button-toggle-focus-overlay,.segmented-button-container[theme=dark] .mat-button-toggle ::ng-deep .mat-button-toggle-focus-overlay{display:none}.segmented-button-container[theme=light] .mat-button-toggle.disabled,.segmented-button-container[theme=dark] .mat-button-toggle.disabled{pointer-events:none;background:#fff}.segmented-button-container[theme=light] .mat-button-toggle.disabled ::ng-deep .mat-button-toggle-label-content,.segmented-button-container[theme=dark] .mat-button-toggle.disabled ::ng-deep .mat-button-toggle-label-content{color:#919191;font-weight:400}.segmented-button-container.disabled{pointer-events:none}.segmented-button-container.disabled .mat-button-toggle{background:#fff}.segmented-button-container.disabled .mat-button-toggle ::ng-deep .mat-button-toggle-label-content{color:#919191;font-weight:400}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButtonToggleGroup, NgClass, MatButtonToggle, MatTooltip, NgTemplateOutlet], 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  [attr.data-testid]=\"testId\"\n  [attr.aria-label]=\"ariaLabel || null\"\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      [attr.data-testid]=\"buttonTestId(button)\"\n      [aria-label]=\"button.ariaLabel ?? ''\"\n    >\n      @if (button.template) {\n        <ng-container [ngTemplateOutlet]=\"button.template\"></ng-container>\n      } @else {\n        {{ button.label }}\n      }\n    </mat-button-toggle>\n  }\n</mat-button-toggle-group>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}h1,h2,h3,.h1,.h2,.h3{font-weight:400;margin:0}h4,h5,h6,.h4,.h5,.h6{font-weight:700;margin:0}h1,.h1{font-size:40px;line-height:60px;font-weight:700}h2,.h2{font-size:24px;line-height:36px}h2.bold,.h2.bold{font-weight:700}h3,.h3{font-size:20px;line-height:28px}h3.bold,.h3.bold{font-weight:700}h4,.h4{font-size:16px;line-height:24px}h5,.h5{font-size:14px;line-height:20px}h6,.h6{font-size:12px;line-height:16px;text-transform:uppercase}body{font-size:14px;line-height:20px}strong,b{font-weight:700!important}.featured{font-size:16px;line-height:24px}p .semibold,.featured .semibold,.caption .semibold{font-weight:600;color:#d410aa}small{font-size:8px;line-height:12px}caption,.caption{font-size:12px;line-height:16px;display:inline-block}*[theme=dark] h1,*[theme=dark] .h1,*[theme=light] h1,*[theme=light] .h1{color:#242424;font-size:32px;line-height:48px;font-weight:400}*[theme=dark] h1.black,*[theme=dark] .h1.black,*[theme=light] h1.black,*[theme=light] .h1.black{font-family:ModernGothic,sans-serif!important;font-weight:900}*[theme=dark] h2,*[theme=dark] .h2,*[theme=light] h2,*[theme=light] .h2{color:#242424;font-size:24px;line-height:30px;font-weight:900;font-family:ModernGothic,sans-serif!important}*[theme=dark] h3,*[theme=dark] .h3,*[theme=light] h3,*[theme=light] .h3{font-size:20px;line-height:26px;font-weight:400;color:#242424}*[theme=dark] h3.bold,*[theme=dark] .h3.bold,*[theme=light] h3.bold,*[theme=light] .h3.bold{font-family:ModernGothic,sans-serif!important;font-weight:700}*[theme=dark] h4,*[theme=dark] .h4,*[theme=light] h4,*[theme=light] .h4{font-size:16px;line-height:20px;font-weight:700;color:#242424;font-family:ModernGothic,sans-serif!important}*[theme=dark] h5,*[theme=dark] .h5,*[theme=light] h5,*[theme=light] .h5{font-size:14px;line-height:18px;font-weight:700;color:#242424;font-family:ModernGothic,sans-serif!important}*[theme=dark] .body-large,*[theme=light] .body-large{font-weight:700;font-size:14px;line-height:22px}*[theme=dark] .body-large-bold,*[theme=light] .body-large-bold{font-weight:700;font-size:16px;line-height:24px}*[theme=dark] .body-large-regular,*[theme=light] .body-large-regular{font-weight:400;font-size:16px;line-height:24px}*[theme=dark] .body-small-bold,*[theme=light] .body-small-bold{font-weight:700;font-size:12px;line-height:16px}*[theme=dark] .body-small-regular,*[theme=light] .body-small-regular{font-weight:400;font-size:12px;line-height:16px}*[theme=dark] .hyperlink-large,*[theme=light] .hyperlink-large{font-weight:500;font-size:16px;line-height:24px}*[theme=dark] .hyperlink,*[theme=light] .hyperlink{font-weight:500;font-size:14px;line-height:22px}*[theme=dark] .hyperlink-small,*[theme=light] .hyperlink-small{font-weight:500;font-size:12px;line-height:16px}*[theme=dark] .button-label,*[theme=light] .button-label{font-weight:500;font-size:14px;font-feature-settings:\"capb\"}*[theme=dark] .label,*[theme=light] .label{font-weight:400;font-size:14px;font-feature-settings:\"capb\"}*[theme=dark] .large-hover-state,*[theme=light] .large-hover-state{font-weight:700;text-decoration:underline;font-size:16px;line-height:24px}*[theme=dark] .hover-state,*[theme=light] .hover-state{font-weight:700;text-decoration:underline;font-size:14px;line-height:22px}*[theme=dark] h1,*[theme=dark] .h1,*[theme=dark] h2,*[theme=dark] .h2,*[theme=dark] h3,*[theme=dark] .h3,*[theme=dark] h4,*[theme=dark] .h4,*[theme=dark] h5,*[theme=dark] .h5{color:#fff}.segmented-button-container.full-width,.segmented-button-container.full-width .mat-button-toggle{width:100%}.segmented-button-container[theme=classic] .mat-button-toggle{min-width:80px;height:40px}.segmented-button-container[theme=classic] .mat-button-toggle ::ng-deep .mat-button-toggle-button,.segmented-button-container[theme=classic] .mat-button-toggle .mat-button-toggle-label-content{height:40px;display:flex;align-items:center}.segmented-button-container[theme=classic] .mat-button-toggle.mat-button-toggle-checked{background-color:#276678;color:#fff}.segmented-button-container[theme=light],.segmented-button-container[theme=dark]{border-color:#919191;overflow:visible}.segmented-button-container[theme=light]:first-child,.segmented-button-container[theme=light] .mat-button-toggle:first-child,.segmented-button-container[theme=dark]:first-child,.segmented-button-container[theme=dark] .mat-button-toggle:first-child{border-bottom-left-radius:10px;border-top-left-radius:10px}.segmented-button-container[theme=light]:last-child,.segmented-button-container[theme=light] .mat-button-toggle:last-child,.segmented-button-container[theme=dark]:last-child,.segmented-button-container[theme=dark] .mat-button-toggle:last-child{border-bottom-right-radius:10px;border-top-right-radius:10px}.segmented-button-container[theme=light] .mat-button-toggle,.segmented-button-container[theme=dark] .mat-button-toggle{min-height:48px;min-width:80px;border-color:#919191}.segmented-button-container[theme=light] .mat-button-toggle ::ng-deep .mat-button-toggle-label-content,.segmented-button-container[theme=dark] .mat-button-toggle ::ng-deep .mat-button-toggle-label-content{color:#242424;font-weight:400;font-size:14px;font-feature-settings:\"capb\"}.segmented-button-container[theme=light] .mat-button-toggle:hover,.segmented-button-container[theme=dark] .mat-button-toggle:hover{background:#fff2fc}.segmented-button-container[theme=light] .mat-button-toggle.mat-button-toggle-checked,.segmented-button-container[theme=dark] .mat-button-toggle.mat-button-toggle-checked{background:#ffe6fa}.segmented-button-container[theme=light] .mat-button-toggle.mat-button-toggle-checked ::ng-deep .mat-button-toggle-label-content,.segmented-button-container[theme=dark] .mat-button-toggle.mat-button-toggle-checked ::ng-deep .mat-button-toggle-label-content{font-weight:700}.segmented-button-container[theme=light] .mat-button-toggle ::ng-deep .mat-button-toggle-focus-overlay,.segmented-button-container[theme=dark] .mat-button-toggle ::ng-deep .mat-button-toggle-focus-overlay{display:none}.segmented-button-container[theme=light] .mat-button-toggle.disabled,.segmented-button-container[theme=dark] .mat-button-toggle.disabled{pointer-events:none;background:#fff}.segmented-button-container[theme=light] .mat-button-toggle.disabled ::ng-deep .mat-button-toggle-label-content,.segmented-button-container[theme=dark] .mat-button-toggle.disabled ::ng-deep .mat-button-toggle-label-content{color:#919191;font-weight:400}.segmented-button-container.disabled{pointer-events:none}.segmented-button-container.disabled .mat-button-toggle{background:#fff}.segmented-button-container.disabled .mat-button-toggle ::ng-deep .mat-button-toggle-label-content{color:#919191;font-weight:400}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -104,6 +112,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], applicationTheme: [{
                 type: Input
+            }], testId: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
             }], buttonSelected: [{
                 type: Output
             }] } });

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 { NgClass, NgTemplateOutlet } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n EventEmitter,\n forwardRef,\n Inject,\n inject,\n Input,\n Optional,\n Output,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { MatButtonToggleGroup, MatButtonToggle } from '@angular/material/button-toggle';\nimport { MatTooltip } from '@angular/material/tooltip';\n\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\n\nimport { SegmentedButton } from './segmented-button.model';\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 imports: [MatButtonToggleGroup, NgClass, MatButtonToggle, MatTooltip, NgTemplateOutlet],\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: string) {\n this._value = v;\n this.onChange(v);\n }\n\n get value(): string \| undefined {\n return this._value;\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<string>();\n\n protected _value?: string;\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: string): void => {};\n onTouch = (): void => {};\n\n private readonly cdr = inject(ChangeDetectorRef);\n\n writeValue(obj: string): void {\n this.value = obj;\n // The forms API calls this from outside the component's own change\n // detection — under OnPush the view must be marked explicitly.\n this.cdr.markForCheck();\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n this.cdr.markForCheck();\n }\n\n registerOnChange(fn: (value: string) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouch = fn;\n }\n\n manualChangeValue({ value }: SegmentedButton) {\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 { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MatButtonToggleModule } from '@angular/material/button-toggle';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\nimport { SegmentedButtonComponent } from './segmented-button.component';\n\n@NgModule({\n exports: [SegmentedButtonComponent],\n imports: [CommonModule, MatButtonToggleModule, FormsModule, MatTooltipModule, SegmentedButtonComponent],\n})\nexport class SegmentedButtonComponentModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;;MAmCa,wBAAwB,CAAA;AAwBnC;;;;AAIG;IACH,IAAa,KAAK,CAAC,CAAS,EAAA;AAC1B,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;AAgB1B;;;;;;AAMG;QACM,IAAA,CAAA,gBAAgB,GAAqB,OAAO;~~AAE3C~~,QAAA,IAAA,CAAA,cAAc,GAAG,IAAI,YAAY,EAAU;AAYrD,QAAA,IAAA,CAAA,QAAQ,GAAG,CAAC,EAAU,KAAU,EAAE,CAAC;AACnC,QAAA,IAAA,CAAA,OAAO,GAAG,MAAW,EAAE,CAAC;AAEP,QAAA,IAAA,CAAA,GAAG,GAAG,MAAM,CAAC,iBAAiB,CAAC;QAR9C,IAAI,eAAe,EAAE;AACnB,YAAA,IAAI,CAAC,gBAAgB,GAAG,eAAe;QACzC;IACF;AAOA,IAAA,UAAU,CAAC,GAAW,EAAA;AACpB,QAAA,IAAI,CAAC,KAAK,GAAG,GAAG;;;AAGhB,QAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;IACzB;AAEA,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AAClC,QAAA,IAAI,CAAC,QAAQ,GAAG,UAAU;AAC1B,QAAA,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE;IACzB;AAEA,IAAA,gBAAgB,CAAC,EAA2B,EAAA;AAC1C,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;IACpB;AAEA,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC9B,QAAA,IAAI,CAAC,OAAO,GAAG,EAAE;IACnB;IAEA,iBAAiB,CAAC,EAAE,KAAK,EAAmB,EAAA;AAC1C,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK;AAClB,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC;IACjC;~~AAvFW~~,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,IAAA,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;SACF,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC/BH,~~2tBAuBA~~,EAAA,MAAA,EAAA,CAAA,ooRAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,~~EDUY~~,oBAAoB,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,EAAE,OAAO,oFAAE,eAAe,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,EAAE,UAAU,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,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAE3E,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,OAAA,EACtC,CAAC,oBAAoB,EAAE,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,gBAAgB,CAAC,EAAA,QAAA,EAAA,~~2tBAAA~~,EAAA,MAAA,EAAA,CAAA,ooRAAA,CAAA,EAAA;;~~0BAsDpF~~;;0BAAY,MAAM;2BAAC,oCAAoC;;~~sBA9CzD~~,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;;sBASxB;;sBAOA;;sBAOA;;sBAgBA;;sBAEA;;;~~MEtEU~~,8BAA8B,CAAA;+GAA9B,8BAA8B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;gHAA9B,8BAA8B,EAAA,OAAA,EAAA,CAF/B,YAAY,EAAE,qBAAqB,EAAE,WAAW,EAAE,gBAAgB,EAAE,wBAAwB,CAAA,EAAA,OAAA,EAAA,CAD5F,wBAAwB,CAAA,EAAA,CAAA,CAAA;gHAGvB,8BAA8B,EAAA,OAAA,EAAA,CAF/B,YAAY,EAAE,qBAAqB,EAAE,WAAW,EAAE,gBAAgB,EAAE,wBAAwB,CAAA,EAAA,CAAA,CAAA;;4FAE3F,8BAA8B,EAAA,UAAA,EAAA,CAAA;kBAJ1C,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,wBAAwB,CAAC;oBACnC,OAAO,EAAE,CAAC,YAAY,EAAE,qBAAqB,EAAE,WAAW,EAAE,gBAAgB,EAAE,wBAAwB,CAAC;AACxG,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 { NgClass, NgTemplateOutlet } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n EventEmitter,\n forwardRef,\n Inject,\n inject,\n Input,\n Optional,\n Output,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { MatButtonToggleGroup, MatButtonToggle } from '@angular/material/button-toggle';\nimport { MatTooltip } from '@angular/material/tooltip';\n\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\n\nimport { SegmentedButton } from './segmented-button.model';\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 imports: [MatButtonToggleGroup, NgClass, MatButtonToggle, MatTooltip, NgTemplateOutlet],\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: string) {\n this._value = v;\n this.onChange(v);\n }\n\n get value(): string \| undefined {\n return this._value;\n }\n\n /\n \n * Defines the application theme\n \n @type {ApplicationTheme}\n * @memberof SegmentedButtonComponent\n /\n @Input() applicationTheme: ApplicationTheme = 'light';\n\n @Input() testId: string \| null = null;\n\n @Input() ariaLabel = '';\n\n protected buttonTestId(button: SegmentedButton): string \| null {\n if (button.testId) {\n return button.testId;\n }\n return this.testId ? `${this.testId}-${button.value}` : null;\n }\n\n @Output() buttonSelected = new EventEmitter<string>();\n\n protected _value?: string;\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: string): void => {};\n onTouch = (): void => {};\n\n private readonly cdr = inject(ChangeDetectorRef);\n\n writeValue(obj: string): void {\n this.value = obj;\n // The forms API calls this from outside the component's own change\n // detection — under OnPush the view must be marked explicitly.\n this.cdr.markForCheck();\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabled = isDisabled;\n this.cdr.markForCheck();\n }\n\n registerOnChange(fn: (value: string) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouch = fn;\n }\n\n manualChangeValue({ value }: SegmentedButton) {\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 [attr.data-testid]=\"testId\"\n [attr.aria-label]=\"ariaLabel \|\| null\"\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 [attr.data-testid]=\"buttonTestId(button)\"\n [aria-label]=\"button.ariaLabel ?? ''\"\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 { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MatButtonToggleModule } from '@angular/material/button-toggle';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\nimport { SegmentedButtonComponent } from './segmented-button.component';\n\n@NgModule({\n exports: [SegmentedButtonComponent],\n imports: [CommonModule, MatButtonToggleModule, FormsModule, MatTooltipModule, SegmentedButtonComponent],\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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"}

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

@@ -13,6 +13,7 @@ class SegmentedToggleComponent {
         this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.testId = input(null, ...(ngDevMode ? [{ debugName: "testId" }] : /* istanbul ignore next */ []));
         this.applicationTheme = input(undefined, ...(ngDevMode ? [{ debugName: "applicationTheme" }] : /* istanbul ignore next */ []));
         this.defaultAppTheme = inject('CANOPYUI_DEFAULT_APPLICATION_THEME', {
             optional: true,
@@ -73,6 +74,13 @@ class SegmentedToggleComponent {
         }
         return String(option.value);
     }
+    optionTestId(option) {
+        if (option.testId) {
+            return option.testId;
+        }
+        const testId = this.testId();
+        return testId ? `${testId}-${String(option.value)}` : null;
+    }
     /** Maps the option's Canopy tooltip position (default TOP) to the MatTooltip position. */
     tooltipPosition(option) {
         switch (option.tooltipPosition ?? TooltipPositionType.TOP) {
@@ -98,7 +106,7 @@ class SegmentedToggleComponent {
         this.indicatorHeight.set(button.offsetHeight);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SegmentedToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: SegmentedToggleComponent, isStandalone: true, selector: "ui-segmented-toggle", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.theme": "theme()", "class.ui-segmented-toggle--brand-active": "selectedOptionIsBrand()", "class.ui-segmented-toggle--disabled": "disabled()" } }, viewQueries: [{ propertyName: "optionButtons", predicate: ["optionButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ui-segmented-toggle__group\" role=\"group\" [attr.aria-label]=\"ariaLabel()\">\n  <span\n    class=\"ui-segmented-toggle__indicator\"\n    [class.ui-segmented-toggle__indicator--hidden]=\"selectedIndex() < 0\"\n    [class.ui-segmented-toggle__indicator--animated]=\"animated()\"\n    aria-hidden=\"true\"\n    [style.transform]=\"'translateX(' + indicatorOffset() + 'px) translateY(' + indicatorTop() + 'px)'\"\n    [style.width.px]=\"indicatorWidth()\"\n    [style.height.px]=\"indicatorHeight()\"\n  ></span>\n\n  @for (option of options(); track option.value) {\n    <button\n      #optionButton\n      type=\"button\"\n      class=\"ui-segmented-toggle__option\"\n      [attr.aria-pressed]=\"isSelected(option.value)\"\n      [attr.aria-label]=\"fallbackAriaLabel(option)\"\n      [disabled]=\"disabled()\"\n      [matTooltip]=\"option.tooltip ?? ''\"\n      [matTooltipPosition]=\"tooltipPosition(option)\"\n      [matTooltipClass]=\"theme()\"\n      (click)=\"select(option.value)\"\n    >\n      @if (option.icon) {\n        <ui-icon\n          class=\"ui-segmented-toggle__icon\"\n          [name]=\"option.icon\"\n          size=\"16\"\n          [attr.aria-hidden]=\"option.iconAriaLabel ? null : 'true'\"\n        ></ui-icon>\n        @if (option.iconAriaLabel) {\n          <span class=\"ui-segmented-toggle__sr-only\">{{ option.iconAriaLabel }}</span>\n        }\n      }\n      @if (option.label) {\n        <span class=\"ui-segmented-toggle__label\">{{ option.label }}</span>\n      }\n    </button>\n  }\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:inline-flex}.ui-segmented-toggle__group{position:relative;display:flex;align-items:center;gap:0;padding:4px;box-shadow:inset 0 0 0 1px #242424;border-radius:999px;background:#fff}.ui-segmented-toggle__indicator{position:absolute;top:0;left:0;z-index:0;border-radius:999px;background:#242424}.ui-segmented-toggle__indicator--hidden{opacity:0}.ui-segmented-toggle__indicator--animated{transition:transform .2s ease,width .2s ease}.ui-segmented-toggle__option{--cnp-icon-color: #242424;position:relative;z-index:1;display:inline-flex;flex:0 0 auto;gap:4px;align-items:center;justify-content:center;margin:0;padding:3px 16px;border:0;border-radius:999px;background:transparent;color:#242424;font:inherit;white-space:nowrap;cursor:pointer}.ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #ffffff;color:#fff}.ui-segmented-toggle__option[aria-pressed=true] .ui-segmented-toggle__label{font-weight:700}:host(.ui-segmented-toggle--brand-active) .ui-segmented-toggle__indicator{background:#d410aa}:host(.ui-segmented-toggle--brand-active) .ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #ffe6fa;color:#ffe6fa}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__group{box-shadow:inset 0 0 0 1px #919191}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__indicator{background:#e9e9e9}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__option,:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #919191;color:#919191;cursor:not-allowed}.ui-segmented-toggle__sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.ui-segmented-toggle__indicator--animated{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i1.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: SegmentedToggleComponent, isStandalone: true, selector: "ui-segmented-toggle", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.theme": "theme()", "class.ui-segmented-toggle--brand-active": "selectedOptionIsBrand()", "class.ui-segmented-toggle--disabled": "disabled()" } }, viewQueries: [{ propertyName: "optionButtons", predicate: ["optionButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ui-segmented-toggle__group\" role=\"group\" [attr.aria-label]=\"ariaLabel()\" [attr.data-testid]=\"testId()\">\n  <span\n    class=\"ui-segmented-toggle__indicator\"\n    [class.ui-segmented-toggle__indicator--hidden]=\"selectedIndex() < 0\"\n    [class.ui-segmented-toggle__indicator--animated]=\"animated()\"\n    aria-hidden=\"true\"\n    [style.transform]=\"'translateX(' + indicatorOffset() + 'px) translateY(' + indicatorTop() + 'px)'\"\n    [style.width.px]=\"indicatorWidth()\"\n    [style.height.px]=\"indicatorHeight()\"\n  ></span>\n\n  @for (option of options(); track option.value) {\n    <button\n      #optionButton\n      type=\"button\"\n      class=\"ui-segmented-toggle__option\"\n      [attr.aria-pressed]=\"isSelected(option.value)\"\n      [attr.aria-label]=\"fallbackAriaLabel(option)\"\n      [disabled]=\"disabled()\"\n      [matTooltip]=\"option.tooltip ?? ''\"\n      [matTooltipPosition]=\"tooltipPosition(option)\"\n      [matTooltipClass]=\"theme()\"\n      [attr.data-testid]=\"optionTestId(option)\"\n      (click)=\"select(option.value)\"\n    >\n      @if (option.icon) {\n        <ui-icon\n          class=\"ui-segmented-toggle__icon\"\n          [name]=\"option.icon\"\n          size=\"16\"\n          [attr.aria-hidden]=\"option.iconAriaLabel ? null : 'true'\"\n        ></ui-icon>\n        @if (option.iconAriaLabel) {\n          <span class=\"ui-segmented-toggle__sr-only\">{{ option.iconAriaLabel }}</span>\n        }\n      }\n      @if (option.label) {\n        <span class=\"ui-segmented-toggle__label\">{{ option.label }}</span>\n      }\n    </button>\n  }\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:inline-flex}.ui-segmented-toggle__group{position:relative;display:flex;align-items:center;gap:0;padding:4px;box-shadow:inset 0 0 0 1px #242424;border-radius:999px;background:#fff}.ui-segmented-toggle__indicator{position:absolute;top:0;left:0;z-index:0;border-radius:999px;background:#242424}.ui-segmented-toggle__indicator--hidden{opacity:0}.ui-segmented-toggle__indicator--animated{transition:transform .2s ease,width .2s ease,opacity .2s ease}.ui-segmented-toggle__option{--cnp-icon-color: #242424;position:relative;z-index:1;display:inline-flex;flex:0 0 auto;gap:4px;align-items:center;justify-content:center;margin:0;padding:3px 16px;border:0;border-radius:999px;background:transparent;color:#242424;font:inherit;white-space:nowrap;cursor:pointer;transition:transform .1s ease}.ui-segmented-toggle__option:hover:not(:disabled,[aria-pressed=true]){background:#f4f4f4}.ui-segmented-toggle__option:active:not(:disabled,[aria-pressed=true]){transform:scale(.97)}.ui-segmented-toggle__option:focus-visible{outline:2px solid #242424;outline-offset:-2px}.ui-segmented-toggle__option[aria-pressed=true]:focus-visible{outline-color:#919191}.ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #ffffff;color:#fff}.ui-segmented-toggle__option[aria-pressed=true] .ui-segmented-toggle__label{font-weight:700}:host(.ui-segmented-toggle--brand-active) .ui-segmented-toggle__indicator{background:#d410aa}:host(.ui-segmented-toggle--brand-active) .ui-segmented-toggle__option[aria-pressed=true]:focus-visible{outline-color:#fff}:host(.ui-segmented-toggle--brand-active) .ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #ffe6fa;color:#ffe6fa}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__group{box-shadow:inset 0 0 0 1px #919191}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__indicator{background:#e9e9e9}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__option,:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #919191;color:#919191;cursor:not-allowed}.ui-segmented-toggle__sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.ui-segmented-toggle__indicator--animated,.ui-segmented-toggle__option{transition:none}.ui-segmented-toggle__option:active:not(:disabled,[aria-pressed=true]){transform:none}}\n"], dependencies: [{ kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i1.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: 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: "21.2.19", ngImport: i0, type: SegmentedToggleComponent, decorators: [{
             type: Component,
@@ -106,8 +114,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                         '[attr.theme]': 'theme()',
                         '[class.ui-segmented-toggle--brand-active]': 'selectedOptionIsBrand()',
                         '[class.ui-segmented-toggle--disabled]': 'disabled()',
-                    }, template: "<div class=\"ui-segmented-toggle__group\" role=\"group\" [attr.aria-label]=\"ariaLabel()\">\n  <span\n    class=\"ui-segmented-toggle__indicator\"\n    [class.ui-segmented-toggle__indicator--hidden]=\"selectedIndex() < 0\"\n    [class.ui-segmented-toggle__indicator--animated]=\"animated()\"\n    aria-hidden=\"true\"\n    [style.transform]=\"'translateX(' + indicatorOffset() + 'px) translateY(' + indicatorTop() + 'px)'\"\n    [style.width.px]=\"indicatorWidth()\"\n    [style.height.px]=\"indicatorHeight()\"\n  ></span>\n\n  @for (option of options(); track option.value) {\n    <button\n      #optionButton\n      type=\"button\"\n      class=\"ui-segmented-toggle__option\"\n      [attr.aria-pressed]=\"isSelected(option.value)\"\n      [attr.aria-label]=\"fallbackAriaLabel(option)\"\n      [disabled]=\"disabled()\"\n      [matTooltip]=\"option.tooltip ?? ''\"\n      [matTooltipPosition]=\"tooltipPosition(option)\"\n      [matTooltipClass]=\"theme()\"\n      (click)=\"select(option.value)\"\n    >\n      @if (option.icon) {\n        <ui-icon\n          class=\"ui-segmented-toggle__icon\"\n          [name]=\"option.icon\"\n          size=\"16\"\n          [attr.aria-hidden]=\"option.iconAriaLabel ? null : 'true'\"\n        ></ui-icon>\n        @if (option.iconAriaLabel) {\n          <span class=\"ui-segmented-toggle__sr-only\">{{ option.iconAriaLabel }}</span>\n        }\n      }\n      @if (option.label) {\n        <span class=\"ui-segmented-toggle__label\">{{ option.label }}</span>\n      }\n    </button>\n  }\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:inline-flex}.ui-segmented-toggle__group{position:relative;display:flex;align-items:center;gap:0;padding:4px;box-shadow:inset 0 0 0 1px #242424;border-radius:999px;background:#fff}.ui-segmented-toggle__indicator{position:absolute;top:0;left:0;z-index:0;border-radius:999px;background:#242424}.ui-segmented-toggle__indicator--hidden{opacity:0}.ui-segmented-toggle__indicator--animated{transition:transform .2s ease,width .2s ease}.ui-segmented-toggle__option{--cnp-icon-color: #242424;position:relative;z-index:1;display:inline-flex;flex:0 0 auto;gap:4px;align-items:center;justify-content:center;margin:0;padding:3px 16px;border:0;border-radius:999px;background:transparent;color:#242424;font:inherit;white-space:nowrap;cursor:pointer}.ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #ffffff;color:#fff}.ui-segmented-toggle__option[aria-pressed=true] .ui-segmented-toggle__label{font-weight:700}:host(.ui-segmented-toggle--brand-active) .ui-segmented-toggle__indicator{background:#d410aa}:host(.ui-segmented-toggle--brand-active) .ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #ffe6fa;color:#ffe6fa}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__group{box-shadow:inset 0 0 0 1px #919191}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__indicator{background:#e9e9e9}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__option,:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #919191;color:#919191;cursor:not-allowed}.ui-segmented-toggle__sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.ui-segmented-toggle__indicator--animated{transition:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], applicationTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "applicationTheme", required: false }] }], optionButtons: [{ type: i0.ViewChildren, args: ['optionButton', { isSignal: true }] }] } });
+                    }, template: "<div class=\"ui-segmented-toggle__group\" role=\"group\" [attr.aria-label]=\"ariaLabel()\" [attr.data-testid]=\"testId()\">\n  <span\n    class=\"ui-segmented-toggle__indicator\"\n    [class.ui-segmented-toggle__indicator--hidden]=\"selectedIndex() < 0\"\n    [class.ui-segmented-toggle__indicator--animated]=\"animated()\"\n    aria-hidden=\"true\"\n    [style.transform]=\"'translateX(' + indicatorOffset() + 'px) translateY(' + indicatorTop() + 'px)'\"\n    [style.width.px]=\"indicatorWidth()\"\n    [style.height.px]=\"indicatorHeight()\"\n  ></span>\n\n  @for (option of options(); track option.value) {\n    <button\n      #optionButton\n      type=\"button\"\n      class=\"ui-segmented-toggle__option\"\n      [attr.aria-pressed]=\"isSelected(option.value)\"\n      [attr.aria-label]=\"fallbackAriaLabel(option)\"\n      [disabled]=\"disabled()\"\n      [matTooltip]=\"option.tooltip ?? ''\"\n      [matTooltipPosition]=\"tooltipPosition(option)\"\n      [matTooltipClass]=\"theme()\"\n      [attr.data-testid]=\"optionTestId(option)\"\n      (click)=\"select(option.value)\"\n    >\n      @if (option.icon) {\n        <ui-icon\n          class=\"ui-segmented-toggle__icon\"\n          [name]=\"option.icon\"\n          size=\"16\"\n          [attr.aria-hidden]=\"option.iconAriaLabel ? null : 'true'\"\n        ></ui-icon>\n        @if (option.iconAriaLabel) {\n          <span class=\"ui-segmented-toggle__sr-only\">{{ option.iconAriaLabel }}</span>\n        }\n      }\n      @if (option.label) {\n        <span class=\"ui-segmented-toggle__label\">{{ option.label }}</span>\n      }\n    </button>\n  }\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:inline-flex}.ui-segmented-toggle__group{position:relative;display:flex;align-items:center;gap:0;padding:4px;box-shadow:inset 0 0 0 1px #242424;border-radius:999px;background:#fff}.ui-segmented-toggle__indicator{position:absolute;top:0;left:0;z-index:0;border-radius:999px;background:#242424}.ui-segmented-toggle__indicator--hidden{opacity:0}.ui-segmented-toggle__indicator--animated{transition:transform .2s ease,width .2s ease,opacity .2s ease}.ui-segmented-toggle__option{--cnp-icon-color: #242424;position:relative;z-index:1;display:inline-flex;flex:0 0 auto;gap:4px;align-items:center;justify-content:center;margin:0;padding:3px 16px;border:0;border-radius:999px;background:transparent;color:#242424;font:inherit;white-space:nowrap;cursor:pointer;transition:transform .1s ease}.ui-segmented-toggle__option:hover:not(:disabled,[aria-pressed=true]){background:#f4f4f4}.ui-segmented-toggle__option:active:not(:disabled,[aria-pressed=true]){transform:scale(.97)}.ui-segmented-toggle__option:focus-visible{outline:2px solid #242424;outline-offset:-2px}.ui-segmented-toggle__option[aria-pressed=true]:focus-visible{outline-color:#919191}.ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #ffffff;color:#fff}.ui-segmented-toggle__option[aria-pressed=true] .ui-segmented-toggle__label{font-weight:700}:host(.ui-segmented-toggle--brand-active) .ui-segmented-toggle__indicator{background:#d410aa}:host(.ui-segmented-toggle--brand-active) .ui-segmented-toggle__option[aria-pressed=true]:focus-visible{outline-color:#fff}:host(.ui-segmented-toggle--brand-active) .ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #ffe6fa;color:#ffe6fa}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__group{box-shadow:inset 0 0 0 1px #919191}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__indicator{background:#e9e9e9}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__option,:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #919191;color:#919191;cursor:not-allowed}.ui-segmented-toggle__sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.ui-segmented-toggle__indicator--animated,.ui-segmented-toggle__option{transition:none}.ui-segmented-toggle__option:active:not(:disabled,[aria-pressed=true]){transform:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], applicationTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "applicationTheme", required: false }] }], optionButtons: [{ type: i0.ViewChildren, args: ['optionButton', { isSignal: true }] }] } });
 /**
  * Generated bundle index. Do not edit.

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

	@@ -1 +1 @@
1	- {"version":3,"file":"testgorilla-tgo-ui-components-segmented-toggle.mjs","sources":["../../../components/segmented-toggle/segmented-toggle.component.ts","../../../components/segmented-toggle/segmented-toggle.component.html","../../../components/segmented-toggle/testgorilla-tgo-ui-components-segmented-toggle.ts"],"sourcesContent":["import {\n afterNextRender,\n afterRenderEffect,\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n DestroyRef,\n ElementRef,\n inject,\n input,\n model,\n signal,\n viewChildren,\n} from '@angular/core';\nimport { MatTooltip, TooltipPosition } from '@angular/material/tooltip';\n\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { TooltipPositionType } from '@testgorilla/tgo-ui/components/tooltip';\n\nimport { SegmentedToggleOption } from './segmented-toggle.model';\n\n@Component({\n selector: 'ui-segmented-toggle',\n standalone: true,\n imports: [IconComponentModule, MatTooltip],\n templateUrl: './segmented-toggle.component.html',\n styleUrls: ['./segmented-toggle.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[attr.theme]': 'theme()',\n '[class.ui-segmented-toggle--brand-active]': 'selectedOptionIsBrand()',\n '[class.ui-segmented-toggle--disabled]': 'disabled()',\n },\n})\nexport class SegmentedToggleComponent<T> {\n private readonly hostRef = inject<ElementRef<HTMLElement>>(ElementRef);\n private readonly destroyRef = inject(DestroyRef);\n\n readonly options = input.required<SegmentedToggleOption<T>[]>();\n readonly value = model<T>();\n readonly disabled = input(false, { transform: booleanAttribute });\n readonly ariaLabel = input<string>();\n readonly applicationTheme = input<ApplicationTheme \| undefined>(undefined);\n private readonly defaultAppTheme = inject<ApplicationTheme>('CANOPYUI_DEFAULT_APPLICATION_THEME' as never, {\n optional: true,\n });\n readonly theme = computed<ApplicationTheme>(() => this.applicationTheme() ?? this.defaultAppTheme ?? 'light');\n\n /** One ElementRef per segment button; used to measure the active pill geometry. /\n private readonly optionButtons = viewChildren<ElementRef<HTMLButtonElement>>('optionButton');\n\n /* Index of the selected option; -1 when value() matches no option. /\n protected readonly selectedIndex = computed(() => this.options().findIndex(option => option.value === this.value()));\n\n /* True when the currently-selected option is flagged `brand: true`. /\n protected readonly selectedOptionIsBrand = computed(() => this.options()[this.selectedIndex()]?.brand === true);\n\n /* Measured pixel geometry of the active button, driving the sliding indicator. /\n protected readonly indicatorOffset = signal(0);\n protected readonly indicatorTop = signal(0);\n protected readonly indicatorWidth = signal(0);\n protected readonly indicatorHeight = signal(0);\n\n /* Enables the slide transition only after the initial position is painted. /\n protected readonly animated = signal(false);\n\n constructor() {\n // Re-measure after every render that follows a selection or options change.\n afterRenderEffect(() => {\n // Read these so the effect re-runs (post-render) whenever selection changes.\n this.value();\n this.options();\n this.measureIndicator();\n });\n\n // Re-measure on container resize (width changes don't touch any signal).\n afterNextRender(() => {\n // Position the indicator for the initial selection without animating, then\n // enable the slide on the next frame so only user-driven changes animate.\n this.measureIndicator();\n requestAnimationFrame(() => this.animated.set(true));\n\n if (typeof ResizeObserver === 'undefined') {\n return;\n }\n const observer = new ResizeObserver(() => this.measureIndicator());\n observer.observe(this.hostRef.nativeElement);\n this.destroyRef.onDestroy(() => observer.disconnect());\n });\n }\n\n protected select(optionValue: T): void {\n if (this.disabled()) {\n return;\n }\n this.value.set(optionValue);\n }\n\n protected isSelected(optionValue: T): boolean {\n return optionValue === this.value();\n }\n\n /\n Last-resort accessible name for a segment. Used only for an icon-only option\n * that provides neither a visible `label` nor an `iconAriaLabel`, so the button\n * is never a nameless control. When a label or icon label is present those name\n * the button and this returns `null` (no `aria-label` attribute).\n /\n protected fallbackAriaLabel(option: SegmentedToggleOption<T>): string \| null {\n if (option.label \|\| option.iconAriaLabel) {\n return null;\n }\n return String(option.value);\n }\n\n /* Maps the option's Canopy tooltip position (default TOP) to the MatTooltip position. /\n protected tooltipPosition(option: SegmentedToggleOption<T>): TooltipPosition {\n switch (option.tooltipPosition ?? TooltipPositionType.TOP) {\n case TooltipPositionType.BOTTOM:\n return 'below';\n case TooltipPositionType.LEFT:\n return 'left';\n case TooltipPositionType.RIGHT:\n return 'right';\n case TooltipPositionType.TOP:\n return 'above';\n }\n }\n\n /* Reads the active button's box and writes it to the indicator signals. /\n private measureIndicator(): void {\n const button = this.optionButtons()[this.selectedIndex()]?.nativeElement;\n if (!button) {\n return;\n }\n this.indicatorOffset.set(button.offsetLeft);\n this.indicatorTop.set(button.offsetTop);\n this.indicatorWidth.set(button.offsetWidth);\n this.indicatorHeight.set(button.offsetHeight);\n }\n}\n","<div class=\"ui-segmented-toggle__group\" role=\"group\" [attr.aria-label]=\"ariaLabel()\">\n <span\n class=\"ui-segmented-toggle__indicator\"\n [class.ui-segmented-toggle__indicator--hidden]=\"selectedIndex() < 0\"\n [class.ui-segmented-toggle__indicator--animated]=\"animated()\"\n aria-hidden=\"true\"\n [style.transform]=\"'translateX(' + indicatorOffset() + 'px) translateY(' + indicatorTop() + 'px)'\"\n [style.width.px]=\"indicatorWidth()\"\n [style.height.px]=\"indicatorHeight()\"\n ></span>\n\n @for (option of options(); track option.value) {\n <button\n #optionButton\n type=\"button\"\n class=\"ui-segmented-toggle__option\"\n [attr.aria-pressed]=\"isSelected(option.value)\"\n [attr.aria-label]=\"fallbackAriaLabel(option)\"\n [disabled]=\"disabled()\"\n [matTooltip]=\"option.tooltip ?? ''\"\n [matTooltipPosition]=\"tooltipPosition(option)\"\n [matTooltipClass]=\"theme()\"\n (click)=\"select(option.value)\"\n >\n @if (option.icon) {\n <ui-icon\n class=\"ui-segmented-toggle__icon\"\n [name]=\"option.icon\"\n size=\"16\"\n [attr.aria-hidden]=\"option.iconAriaLabel ? null : 'true'\"\n ></ui-icon>\n @if (option.iconAriaLabel) {\n <span class=\"ui-segmented-toggle__sr-only\">{{ option.iconAriaLabel }}</span>\n }\n }\n @if (option.label) {\n <span class=\"ui-segmented-toggle__label\">{{ option.label }}</span>\n }\n </button>\n }\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"testgorilla-tgo-ui-components-segmented-toggle.mjs","sources":["../../../components/segmented-toggle/segmented-toggle.component.ts","../../../components/segmented-toggle/segmented-toggle.component.html","../../../components/segmented-toggle/testgorilla-tgo-ui-components-segmented-toggle.ts"],"sourcesContent":["import {\n afterNextRender,\n afterRenderEffect,\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n DestroyRef,\n ElementRef,\n inject,\n input,\n model,\n signal,\n viewChildren,\n} from '@angular/core';\nimport { MatTooltip, TooltipPosition } from '@angular/material/tooltip';\n\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { TooltipPositionType } from '@testgorilla/tgo-ui/components/tooltip';\n\nimport { SegmentedToggleOption } from './segmented-toggle.model';\n\n@Component({\n selector: 'ui-segmented-toggle',\n standalone: true,\n imports: [IconComponentModule, MatTooltip],\n templateUrl: './segmented-toggle.component.html',\n styleUrls: ['./segmented-toggle.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[attr.theme]': 'theme()',\n '[class.ui-segmented-toggle--brand-active]': 'selectedOptionIsBrand()',\n '[class.ui-segmented-toggle--disabled]': 'disabled()',\n },\n})\nexport class SegmentedToggleComponent<T> {\n private readonly hostRef = inject<ElementRef<HTMLElement>>(ElementRef);\n private readonly destroyRef = inject(DestroyRef);\n\n readonly options = input.required<SegmentedToggleOption<T>[]>();\n readonly value = model<T>();\n readonly disabled = input(false, { transform: booleanAttribute });\n readonly ariaLabel = input<string>();\n\n readonly testId = input<string \| null>(null);\n readonly applicationTheme = input<ApplicationTheme \| undefined>(undefined);\n private readonly defaultAppTheme = inject<ApplicationTheme>('CANOPYUI_DEFAULT_APPLICATION_THEME' as never, {\n optional: true,\n });\n readonly theme = computed<ApplicationTheme>(() => this.applicationTheme() ?? this.defaultAppTheme ?? 'light');\n\n /** One ElementRef per segment button; used to measure the active pill geometry. /\n private readonly optionButtons = viewChildren<ElementRef<HTMLButtonElement>>('optionButton');\n\n /* Index of the selected option; -1 when value() matches no option. /\n protected readonly selectedIndex = computed(() => this.options().findIndex(option => option.value === this.value()));\n\n /* True when the currently-selected option is flagged `brand: true`. /\n protected readonly selectedOptionIsBrand = computed(() => this.options()[this.selectedIndex()]?.brand === true);\n\n /* Measured pixel geometry of the active button, driving the sliding indicator. /\n protected readonly indicatorOffset = signal(0);\n protected readonly indicatorTop = signal(0);\n protected readonly indicatorWidth = signal(0);\n protected readonly indicatorHeight = signal(0);\n\n /* Enables the slide transition only after the initial position is painted. /\n protected readonly animated = signal(false);\n\n constructor() {\n // Re-measure after every render that follows a selection or options change.\n afterRenderEffect(() => {\n // Read these so the effect re-runs (post-render) whenever selection changes.\n this.value();\n this.options();\n this.measureIndicator();\n });\n\n // Re-measure on container resize (width changes don't touch any signal).\n afterNextRender(() => {\n // Position the indicator for the initial selection without animating, then\n // enable the slide on the next frame so only user-driven changes animate.\n this.measureIndicator();\n requestAnimationFrame(() => this.animated.set(true));\n\n if (typeof ResizeObserver === 'undefined') {\n return;\n }\n const observer = new ResizeObserver(() => this.measureIndicator());\n observer.observe(this.hostRef.nativeElement);\n this.destroyRef.onDestroy(() => observer.disconnect());\n });\n }\n\n protected select(optionValue: T): void {\n if (this.disabled()) {\n return;\n }\n this.value.set(optionValue);\n }\n\n protected isSelected(optionValue: T): boolean {\n return optionValue === this.value();\n }\n\n /\n Last-resort accessible name for a segment. Used only for an icon-only option\n * that provides neither a visible `label` nor an `iconAriaLabel`, so the button\n * is never a nameless control. When a label or icon label is present those name\n * the button and this returns `null` (no `aria-label` attribute).\n /\n protected fallbackAriaLabel(option: SegmentedToggleOption<T>): string \| null {\n if (option.label \|\| option.iconAriaLabel) {\n return null;\n }\n return String(option.value);\n }\n\n protected optionTestId(option: SegmentedToggleOption<T>): string \| null {\n if (option.testId) {\n return option.testId;\n }\n const testId = this.testId();\n return testId ? `${testId}-${String(option.value)}` : null;\n }\n\n /* Maps the option's Canopy tooltip position (default TOP) to the MatTooltip position. /\n protected tooltipPosition(option: SegmentedToggleOption<T>): TooltipPosition {\n switch (option.tooltipPosition ?? TooltipPositionType.TOP) {\n case TooltipPositionType.BOTTOM:\n return 'below';\n case TooltipPositionType.LEFT:\n return 'left';\n case TooltipPositionType.RIGHT:\n return 'right';\n case TooltipPositionType.TOP:\n return 'above';\n }\n }\n\n /* Reads the active button's box and writes it to the indicator signals. /\n private measureIndicator(): void {\n const button = this.optionButtons()[this.selectedIndex()]?.nativeElement;\n if (!button) {\n return;\n }\n this.indicatorOffset.set(button.offsetLeft);\n this.indicatorTop.set(button.offsetTop);\n this.indicatorWidth.set(button.offsetWidth);\n this.indicatorHeight.set(button.offsetHeight);\n }\n}\n","<div class=\"ui-segmented-toggle__group\" role=\"group\" [attr.aria-label]=\"ariaLabel()\" [attr.data-testid]=\"testId()\">\n <span\n class=\"ui-segmented-toggle__indicator\"\n [class.ui-segmented-toggle__indicator--hidden]=\"selectedIndex() < 0\"\n [class.ui-segmented-toggle__indicator--animated]=\"animated()\"\n aria-hidden=\"true\"\n [style.transform]=\"'translateX(' + indicatorOffset() + 'px) translateY(' + indicatorTop() + 'px)'\"\n [style.width.px]=\"indicatorWidth()\"\n [style.height.px]=\"indicatorHeight()\"\n ></span>\n\n @for (option of options(); track option.value) {\n <button\n #optionButton\n type=\"button\"\n class=\"ui-segmented-toggle__option\"\n [attr.aria-pressed]=\"isSelected(option.value)\"\n [attr.aria-label]=\"fallbackAriaLabel(option)\"\n [disabled]=\"disabled()\"\n [matTooltip]=\"option.tooltip ?? ''\"\n [matTooltipPosition]=\"tooltipPosition(option)\"\n [matTooltipClass]=\"theme()\"\n [attr.data-testid]=\"optionTestId(option)\"\n (click)=\"select(option.value)\"\n >\n @if (option.icon) {\n <ui-icon\n class=\"ui-segmented-toggle__icon\"\n [name]=\"option.icon\"\n size=\"16\"\n [attr.aria-hidden]=\"option.iconAriaLabel ? null : 'true'\"\n ></ui-icon>\n @if (option.iconAriaLabel) {\n <span class=\"ui-segmented-toggle__sr-only\">{{ option.iconAriaLabel }}</span>\n }\n }\n @if (option.label) {\n <span class=\"ui-segmented-toggle__label\">{{ option.label }}</span>\n }\n </button>\n }\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;;;;MAoCa,wBAAwB,CAAA;AAkCnC,IAAA,WAAA,GAAA;AAjCiB,QAAA,IAAA,CAAA,OAAO,GAAG,MAAM,CAA0B,UAAU,CAAC;AACrD,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;AAEvC,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,6EAA8B;QACtD,IAAA,CAAA,KAAK,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAK;QAClB,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;QACxD,IAAA,CAAA,SAAS,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;AAE3B,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK,CAAgB,IAAI,6EAAC;AACnC,QAAA,IAAA,CAAA,gBAAgB,GAAG,KAAK,CAA+B,SAAS,uFAAC;AACzD,QAAA,IAAA,CAAA,eAAe,GAAG,MAAM,CAAmB,oCAA6C,EAAE;AACzG,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA,CAAC;AACO,QAAA,IAAA,CAAA,KAAK,GAAG,QAAQ,CAAmB,MAAM,IAAI,CAAC,gBAAgB,EAAE,IAAI,IAAI,CAAC,eAAe,IAAI,OAAO,4EAAC;;AAG5F,QAAA,IAAA,CAAA,aAAa,GAAG,YAAY,CAAgC,cAAc,oFAAC;;QAGzE,IAAA,CAAA,aAAa,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC,SAAS,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,eAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAC;;QAGjG,IAAA,CAAA,qBAAqB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,EAAE,KAAK,KAAK,IAAI,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,uBAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAC;;AAG5F,QAAA,IAAA,CAAA,eAAe,GAAG,MAAM,CAAC,CAAC,sFAAC;AAC3B,QAAA,IAAA,CAAA,YAAY,GAAG,MAAM,CAAC,CAAC,mFAAC;AACxB,QAAA,IAAA,CAAA,cAAc,GAAG,MAAM,CAAC,CAAC,qFAAC;AAC1B,QAAA,IAAA,CAAA,eAAe,GAAG,MAAM,CAAC,CAAC,sFAAC;;AAG3B,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,KAAK,+EAAC;;QAIzC,iBAAiB,CAAC,MAAK;;YAErB,IAAI,CAAC,KAAK,EAAE;YACZ,IAAI,CAAC,OAAO,EAAE;YACd,IAAI,CAAC,gBAAgB,EAAE;AACzB,QAAA,CAAC,CAAC;;QAGF,eAAe,CAAC,MAAK;;;YAGnB,IAAI,CAAC,gBAAgB,EAAE;AACvB,YAAA,qBAAqB,CAAC,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AAEpD,YAAA,IAAI,OAAO,cAAc,KAAK,WAAW,EAAE;gBACzC;YACF;AACA,YAAA,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAClE,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;AAC5C,YAAA,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,QAAQ,CAAC,UAAU,EAAE,CAAC;AACxD,QAAA,CAAC,CAAC;IACJ;AAEU,IAAA,MAAM,CAAC,WAAc,EAAA;AAC7B,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;YACnB;QACF;AACA,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC;IAC7B;AAEU,IAAA,UAAU,CAAC,WAAc,EAAA;AACjC,QAAA,OAAO,WAAW,KAAK,IAAI,CAAC,KAAK,EAAE;IACrC;AAEA;;;;;AAKG;AACO,IAAA,iBAAiB,CAAC,MAAgC,EAAA;QAC1D,IAAI,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,aAAa,EAAE;AACxC,YAAA,OAAO,IAAI;QACb;AACA,QAAA,OAAO,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC;IAC7B;AAEU,IAAA,YAAY,CAAC,MAAgC,EAAA;AACrD,QAAA,IAAI,MAAM,CAAC,MAAM,EAAE;YACjB,OAAO,MAAM,CAAC,MAAM;QACtB;AACA,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE;AAC5B,QAAA,OAAO,MAAM,GAAG,CAAA,EAAG,MAAM,IAAI,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA,CAAE,GAAG,IAAI;IAC5D;;AAGU,IAAA,eAAe,CAAC,MAAgC,EAAA;QACxD,QAAQ,MAAM,CAAC,eAAe,IAAI,mBAAmB,CAAC,GAAG;YACvD,KAAK,mBAAmB,CAAC,MAAM;AAC7B,gBAAA,OAAO,OAAO;YAChB,KAAK,mBAAmB,CAAC,IAAI;AAC3B,gBAAA,OAAO,MAAM;YACf,KAAK,mBAAmB,CAAC,KAAK;AAC5B,gBAAA,OAAO,OAAO;YAChB,KAAK,mBAAmB,CAAC,GAAG;AAC1B,gBAAA,OAAO,OAAO;;IAEpB;;IAGQ,gBAAgB,GAAA;AACtB,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,EAAE,aAAa;QACxE,IAAI,CAAC,MAAM,EAAE;YACX;QACF;QACA,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,MAAM,CAAC,UAAU,CAAC;QAC3C,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,SAAS,CAAC;QACvC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,WAAW,CAAC;QAC3C,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,MAAM,CAAC,YAAY,CAAC;IAC/C;+GAnHW,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAxB,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,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,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,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,aAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,YAAA,EAAA,SAAA,EAAA,yCAAA,EAAA,yBAAA,EAAA,qCAAA,EAAA,YAAA,EAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,eAAA,EAAA,SAAA,EAAA,CAAA,cAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECpCrC,2lDA0CA,EAAA,MAAA,EAAA,CAAA,igJAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDhBY,mBAAmB,sNAAE,UAAU,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;;4FAU9B,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAbpC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,qBAAqB,EAAA,UAAA,EACnB,IAAI,EAAA,OAAA,EACP,CAAC,mBAAmB,EAAE,UAAU,CAAC,EAAA,eAAA,EAGzB,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,cAAc,EAAE,SAAS;AACzB,wBAAA,2CAA2C,EAAE,yBAAyB;AACtE,wBAAA,uCAAuC,EAAE,YAAY;AACtD,qBAAA,EAAA,QAAA,EAAA,2lDAAA,EAAA,MAAA,EAAA,CAAA,igJAAA,CAAA,EAAA;ytBAmB4E,cAAc,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AErD7F;;AAEG;;;;"}