npm - @testgorilla/tgo-ui - Versions diffs - 11.22.3 → 12.0.0 - Mend

@testgorilla/tgo-ui 11.22.3 → 12.0.0

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

Files changed (225) hide show

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

@@ -1,154 +1,246 @@
-import { NgClass, NgStyle, CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { Input, Optional, Inject, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
-import * as i1 from '@testgorilla/tgo-ui/components/icon';
-import { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
-import { TooltipTemplateDirective, TooltipComponentModule } from '@testgorilla/tgo-ui/components/tooltip';
-import { MatInputModule } from '@angular/material/input';
-class SegmentedBarComponent {
-    /**
-     * The segments to be displayed in the segmented bar.
-     * @required true
-     * @type {SegmentedBar}
-     * @memberof SegmentedBarComponent
-     */
-    set segments(segments) {
-        this.segmentList = this.calculatePercentages(segments);
-    }
-    constructor(defaultAppTheme) {
-        this.defaultAppTheme = defaultAppTheme;
-        /**
-         * The width of the segmented bar. Defaults to '100%'.
-         * You can use '100%' or '100px' for this field. 100 is just an example
-         * @default '100%'
-         * @type {string}
-         * @memberof SegmentedBarComponent
-         */
-        this.width = '100%';
-        /**
-         * The size variant of the segmented bar. Can be 'small' or 'large'.
-         * Defaults to 'large'.
-         * @default 'large'
-         * @type {SegmentedBarVariant}
-         * @memberof SegmentedBarComponent
-         */
-        this.size = 'large';
-        /**
-         *
-         * Defines the application theme
-         *
-         * @type {ApplicationTheme}
-         * @memberof SegmentedBarComponent
-         */
-        this.applicationTheme = 'light';
-        /**
-         * A string representing the ARIA requirement for accessibility.
-         * This attribute is used to indicate whether an input field is required for form submission.
-         * @type {boolean}
-         * @memberof SegmentedBarComponent
-         */
-        this.ariaRequired = false;
-        /**
-         * Groups the tooltips into one template
-         *
-         * @type {boolean}
-         * @memberof SegmentedBarComponent
-         */
-        this.tooltipStats = false;
-        this.testId = null;
-        this.segmentList = [];
-        if (defaultAppTheme) {
-            this.applicationTheme = defaultAppTheme;
-        }
-    }
-    calculatePercentages(segments) {
-        const total = segments.reduce((sum, segment) => sum + segment.value, 0);
-        return segments.map(segment => {
-            const percentage = (segment.value / total) * 100;
-            let percentageLabel = '';
-            if (percentage === 0) {
-                percentageLabel = '0%';
-            }
-            else if (percentage > 0 && percentage < 1) {
-                percentageLabel = '>1%';
-            }
-            else {
-                percentageLabel = `${Math.ceil(percentage)}%`;
-            }
-            return { ...segment, percentage: percentageLabel };
-        });
-    }
-    get accessibleValueText() {
-        return (this.segmentList
-            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- an empty tooltip falls back to a generated label
-            .map((segment, index) => `${segment.tooltip || `Value ${index}`}: ${segment.value}`)
-            .join(', '));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SegmentedBarComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", 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.25", 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  [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
-                }, {
-                    type: Inject,
-                    args: ['CANOPYUI_DEFAULT_APPLICATION_THEME']
-                }] }], propDecorators: { width: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], segments: [{
-                type: Input,
-                args: [{ required: true }]
-            }], applicationTheme: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input
-            }], ariaRequired: [{
-                type: Input
-            }], tooltipStats: [{
-                type: Input
-            }], testId: [{
-                type: Input
-            }] } });
-class SegmentedBarComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SegmentedBarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: SegmentedBarComponentModule, imports: [CommonModule,
-            MatTooltipModule,
-            MatInputModule,
-            IconComponentModule,
-            TooltipComponentModule,
-            SegmentedBarComponent], exports: [SegmentedBarComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SegmentedBarComponentModule, imports: [CommonModule,
-            MatTooltipModule,
-            MatInputModule,
-            IconComponentModule,
-            TooltipComponentModule,
-            SegmentedBarComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SegmentedBarComponentModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        MatTooltipModule,
-                        MatInputModule,
-                        IconComponentModule,
-                        TooltipComponentModule,
-                        SegmentedBarComponent,
-                    ],
-                    exports: [SegmentedBarComponent],
-                }]
-        }] });
-/**
- * Generated bundle index. Do not edit.
- */
+import { CommonModule, NgClass, NgStyle } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Inject, Input, NgModule, Optional } from "@angular/core";
+import { MatTooltip, MatTooltipModule } from "@angular/material/tooltip";
+import * as i1 from "@testgorilla/tgo-ui/components/icon";
+import { IconComponentModule } from "@testgorilla/tgo-ui/components/icon";
+import { TooltipComponentModule, TooltipTemplateDirective } from "@testgorilla/tgo-ui/components/tooltip";
+import { MatInputModule } from "@angular/material/input";
+var SegmentedBarComponent = class SegmentedBarComponent {
+	set segments(segments) {
+		this.segmentList = this.calculatePercentages(segments);
+	}
+	constructor(defaultAppTheme) {
+		this.defaultAppTheme = defaultAppTheme;
+		this.width = "100%";
+		this.size = "large";
+		this.applicationTheme = "light";
+		this.ariaRequired = false;
+		this.tooltipStats = false;
+		this.testId = null;
+		this.segmentList = [];
+		if (defaultAppTheme) this.applicationTheme = defaultAppTheme;
+	}
+	calculatePercentages(segments) {
+		const total = segments.reduce((sum, segment) => sum + segment.value, 0);
+		return segments.map((segment) => {
+			const percentage = segment.value / total * 100;
+			let percentageLabel;
+			if (percentage === 0) percentageLabel = "0%";
+			else if (percentage > 0 && percentage < 1) percentageLabel = ">1%";
+			else percentageLabel = `${Math.ceil(percentage)}%`;
+			return {
+				...segment,
+				percentage: percentageLabel
+			};
+		});
+	}
+	get accessibleValueText() {
+		return this.segmentList.map((segment, index) => `${segment.tooltip || `Value ${index}`}: ${segment.value}`).join(", ");
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			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: "22.2.4",
+			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: "22.2.4",
+	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  [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: void 0,
+		decorators: [{ type: Optional }, {
+			type: Inject,
+			args: ["CANOPYUI_DEFAULT_APPLICATION_THEME"]
+		}]
+	}],
+	propDecorators: {
+		width: [{ type: Input }],
+		size: [{ type: Input }],
+		segments: [{
+			type: Input,
+			args: [{ required: true }]
+		}],
+		applicationTheme: [{ type: Input }],
+		ariaLabel: [{ type: Input }],
+		ariaRequired: [{ type: Input }],
+		tooltipStats: [{ type: Input }],
+		testId: [{ type: Input }]
+	}
+});
+var SegmentedBarComponentModule = class SegmentedBarComponentModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: SegmentedBarComponentModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: SegmentedBarComponentModule,
+			imports: [
+				CommonModule,
+				MatTooltipModule,
+				MatInputModule,
+				IconComponentModule,
+				TooltipComponentModule,
+				SegmentedBarComponent
+			],
+			exports: [SegmentedBarComponent]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: SegmentedBarComponentModule,
+			imports: [
+				CommonModule,
+				MatTooltipModule,
+				MatInputModule,
+				IconComponentModule,
+				TooltipComponentModule,
+				SegmentedBarComponent
+			]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: SegmentedBarComponentModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [
+				CommonModule,
+				MatTooltipModule,
+				MatInputModule,
+				IconComponentModule,
+				TooltipComponentModule,
+				SegmentedBarComponent
+			],
+			exports: [SegmentedBarComponent]
+		}]
+	}]
+});
 export { SegmentedBarComponent, SegmentedBarComponentModule };
-//# sourceMappingURL=testgorilla-tgo-ui-components-segmented-bar.mjs.map
+//# sourceMappingURL=testgorilla-tgo-ui-components-segmented-bar.mjs.map

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 @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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"}
1	+ {"version":3,"file":"testgorilla-tgo-ui-components-segmented-bar.mjs","names":[],"sources":["../../../components/segmented-bar/segmented-bar.component.ts","../../../components/segmented-bar/segmented-bar.component.html","../../../components/segmented-bar/segmented-bar.component.module.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: string;\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"],"mappings":"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"}