@testgorilla/tgo-ui 11.3.0 → 11.4.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.
- package/fesm2022/testgorilla-tgo-ui-components-badge.mjs +3 -2
- package/fesm2022/testgorilla-tgo-ui-components-badge.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-popover.mjs +8 -5
- package/fesm2022/testgorilla-tgo-ui-components-popover.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-segmented-toggle.mjs +18 -3
- package/fesm2022/testgorilla-tgo-ui-components-segmented-toggle.mjs.map +1 -1
- package/mcp/catalog.json +1 -1
- package/package.json +1 -1
- package/types/testgorilla-tgo-ui-components-badge.d.ts +2 -1
- package/types/testgorilla-tgo-ui-components-popover.d.ts +3 -1
- package/types/testgorilla-tgo-ui-components-segmented-toggle.d.ts +11 -0
|
@@ -30,6 +30,7 @@ var RebrandBadgeColorEnum;
|
|
|
30
30
|
RebrandBadgeColorEnum["BLUE_40"] = "blue-40";
|
|
31
31
|
RebrandBadgeColorEnum["BLUE_20"] = "blue-20";
|
|
32
32
|
RebrandBadgeColorEnum["PINK_30"] = "pink-30";
|
|
33
|
+
RebrandBadgeColorEnum["PINK_50"] = "pink-50";
|
|
33
34
|
RebrandBadgeColorEnum["BLUE_10"] = "blue-10";
|
|
34
35
|
RebrandBadgeColorEnum["GREY_30"] = "grey-30";
|
|
35
36
|
RebrandBadgeColorEnum["GREY_20"] = "grey-20";
|
|
@@ -156,11 +157,11 @@ class BadgeComponent {
|
|
|
156
157
|
return this.applicationTheme === 'classic';
|
|
157
158
|
}
|
|
158
159
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: BadgeComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
159
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: BadgeComponent, isStandalone: true, selector: "ui-badge", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, staticLabel: { classPropertyName: "staticLabel", publicName: "staticLabel", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingIconColor: { classPropertyName: "trailingIconColor", publicName: "trailingIconColor", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: false, isRequired: false, transformFunction: null }, notificationsAmount: { classPropertyName: "notificationsAmount", publicName: "notificationsAmount", isSignal: false, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: false, isRequired: false, transformFunction: null }, rebrandColor: { classPropertyName: "rebrandColor", publicName: "rebrandColor", isSignal: false, isRequired: false, transformFunction: null }, truncateLabel: { classPropertyName: "truncateLabel", publicName: "truncateLabel", isSignal: false, isRequired: false, transformFunction: null }, enableAnimation: { classPropertyName: "enableAnimation", publicName: "enableAnimation", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n [class]=\"'badge badge-container-' + variant\"\n [class.no-label]=\"!label && !staticLabel && !trailingIcon()\"\n [attr.aria-label]=\"label + (staticLabel ? ' ' + staticLabel : '')\"\n [attr.theme]=\"applicationTheme\"\n [attr.color]=\"isClassicTheme ? color : rebrandColor\"\n [matTooltip]=\"\n label.length > 25 - (staticLabel.length < 4 ? staticLabel.length : 4)\n ? label + (staticLabel ? ' ' + staticLabel : '')\n : ''\n \"\n [matTooltipClass]=\"applicationTheme\"\n>\n @switch (variant) {\n @case (badgeVariant.PRIMARY) {\n @if (icon) {\n <ui-icon\n [class.badge-icon]=\"!!label || !!staticLabel || !!trailingIcon\"\n [name]=\"icon\"\n [color]=\"resolvedIconColor\"\n ></ui-icon>\n }\n }\n @case (badgeVariant.PRIMARY_AI) {\n <ng-container [ngTemplateOutlet]=\"aiIconTpl\"></ng-container>\n }\n @case (badgeVariant.SECONDARY_AI) {\n <ng-container [ngTemplateOutlet]=\"aiIconTpl\"></ng-container>\n }\n @case (badgeVariant.SECONDARY) {\n <div class=\"point\" [attr.color]=\"isClassicTheme ? color : rebrandColor\"></div>\n }\n @case (badgeVariant.NOTIFICATION) {\n <div class=\"number-notification\">{{ notificationsAmount }}</div>\n }\n }\n @if (variant !== badgeVariant.NOTIFICATION) {\n <div class=\"label\" [class.empty]=\"!label && !staticLabel\" [class.animated]=\"enableAnimation\">\n {{\n label.length > 25 - (staticLabel.length < 4 ? staticLabel.length : 4) && truncateLabel\n ? (label | slice: 0 : 25 - (staticLabel.length < 4 ? staticLabel.length : 4)) + '...'\n : label\n }}\n </div>\n }\n @if (staticLabel && variant !== badgeVariant.NOTIFICATION) {\n <span class=\"static-label\">{{ staticLabel | slice: 0 : 4 }}</span>\n }\n @if (trailingIcon() && variant === badgeVariant.PRIMARY) {\n <ui-icon class=\"badge-icon-trailing\" [name]=\"trailingIcon()\" [color]=\"resolvedTrailingIconColor\"></ui-icon>\n }\n</div>\n\n<ng-template #aiIconTpl>\n <ui-icon class=\"badge-icon\" [name]=\"'Sparkle-in-line'\" [color]=\"'ai'\"></ui-icon>\n</ng-template>\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:block}:host .badge-container-primary,:host .badge-container-primary-ai,:host .badge-container-secondary,:host .badge-container-secondary-ai,:host .badge-container-notification{width:fit-content}:host .badge-container-primary,:host .badge-container-primary-ai,:host .badge-container-secondary,:host .badge-container-secondary-ai{height:24px;padding:0 8px;border-radius:21px;color:#fff;line-height:10px;transition:all .2s ease-out}:host .badge-container-primary .label,:host .badge-container-primary-ai .label,:host .badge-container-secondary .label,:host .badge-container-secondary-ai .label{font-size:12px;line-height:14px}:host .badge-container-primary .label.animated,:host .badge-container-primary-ai .label.animated,:host .badge-container-secondary .label.animated,:host .badge-container-secondary-ai .label.animated{display:inline-block;max-width:500px;opacity:1;overflow:hidden;white-space:nowrap;transition:max-width .25s ease-in-out,opacity .2s ease-in-out;will-change:max-width,opacity;contain:layout style}:host .badge-container-primary .label.empty,:host .badge-container-primary-ai .label.empty,:host .badge-container-secondary .label.empty,:host .badge-container-secondary-ai .label.empty{max-width:0;opacity:0}:host .badge-container-primary .static-label,:host .badge-container-primary-ai .static-label,:host .badge-container-secondary .static-label,:host .badge-container-secondary-ai .static-label{font-size:12px;line-height:14px;white-space:nowrap;flex-shrink:0;margin-left:2px}:host .badge-container-primary .badge-icon:not(:last-child),:host .badge-container-primary-ai .badge-icon:not(:last-child),:host .badge-container-secondary .badge-icon:not(:last-child),:host .badge-container-secondary-ai .badge-icon:not(:last-child){margin-right:8px}:host .badge-container-primary .badge-icon-trailing,:host .badge-container-primary-ai .badge-icon-trailing,:host .badge-container-secondary .badge-icon-trailing,:host .badge-container-secondary-ai .badge-icon-trailing{margin-left:8px}:host .badge-container-primary.no-label .badge-icon,:host .badge-container-primary-ai.no-label .badge-icon,:host .badge-container-secondary.no-label .badge-icon,:host .badge-container-secondary-ai.no-label .badge-icon{margin-right:0}:host .badge-container-secondary{padding:0}:host .badge-container-primary-ai.no-label{padding:4px}:host .badge-container-secondary .point,:host .badge-container-secondary-ai .point{border-radius:50%;padding:4px;margin-right:8px}:host .badge-container-secondary .label,:host .badge-container-secondary-ai .label{color:#000!important;width:100%}:host .badge-container-secondary[theme=dark],:host .badge-container-secondary[theme=light],:host .badge-container-secondary-ai[theme=dark],:host .badge-container-secondary-ai[theme=light]{color:#242424}:host .badge-container-secondary .badge-icon:not(:last-child),:host .badge-container-secondary-ai .badge-icon:not(:last-child){margin-right:4px}:host .badge-container-notification{min-width:20px;height:20px;border-radius:50%;color:#fff;line-height:10px}:host .badge-container-notification .label{font-size:12px}:host .badge-container-notification[theme=dark],:host .badge-container-notification[theme=light]{background:#242424!important;color:#fff!important;border-color:1px solid #ffffff}:host .badge{width:100%!important;max-width:fit-content!important}:host .badge .label{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;box-sizing:border-box!important}.flex-center,:host .badge-container-primary,:host .badge-container-primary-ai,:host .badge-container-secondary,:host .badge-container-secondary-ai,:host .badge-container-notification{display:flex;align-items:center;justify-content:center}.background-colors[color=red],:host [color=red].badge-container-primary,:host [color=red].badge-container-primary-ai,:host .badge-container-secondary [color=red].point,:host .badge-container-secondary-ai [color=red].point,:host [color=red].badge-container-notification{background:#cb7b7a}.background-colors[color=grey-medium],:host [color=grey-medium].badge-container-primary,:host [color=grey-medium].badge-container-primary-ai,:host .badge-container-secondary [color=grey-medium].point,:host .badge-container-secondary-ai [color=grey-medium].point,:host [color=grey-medium].badge-container-notification{background:#e0e0e0;color:#000}.background-colors[color=teal],:host [color=teal].badge-container-primary,:host [color=teal].badge-container-primary-ai,:host .badge-container-secondary [color=teal].point,:host .badge-container-secondary-ai [color=teal].point,:host [color=teal].badge-container-notification{background:#46a997}.background-colors[color=yellow],:host [color=yellow].badge-container-primary,:host [color=yellow].badge-container-primary-ai,:host .badge-container-secondary [color=yellow].point,:host .badge-container-secondary-ai [color=yellow].point,:host [color=yellow].badge-container-notification{background:#cca45f}.background-colors[color=petrol],:host [color=petrol].badge-container-primary,:host [color=petrol].badge-container-primary-ai,:host .badge-container-secondary [color=petrol].point,:host .badge-container-secondary-ai [color=petrol].point,:host [color=petrol].badge-container-notification{background:#276678}.background-colors[color=teal-60w],:host [color=teal-60w].badge-container-primary,:host [color=teal-60w].badge-container-primary-ai,:host .badge-container-secondary [color=teal-60w].point,:host .badge-container-secondary-ai [color=teal-60w].point,:host [color=teal-60w].badge-container-notification{background:#b5ddd5;color:#000}.background-colors[color=petrol-90w],:host [color=petrol-90w].badge-container-primary,:host [color=petrol-90w].badge-container-primary-ai,:host .badge-container-secondary [color=petrol-90w].point,:host .badge-container-secondary-ai [color=petrol-90w].point,:host [color=petrol-90w].badge-container-notification{background:#e9f0f1;color:#000}.background-colors[color=petrol-60w],:host [color=petrol-60w].badge-container-primary,:host [color=petrol-60w].badge-container-primary-ai,:host .badge-container-secondary [color=petrol-60w].point,:host .badge-container-secondary-ai [color=petrol-60w].point,:host [color=petrol-60w].badge-container-notification{background:#a9c2c9;color:#000}.background-colors[color=grey-dark],:host [color=grey-dark].badge-container-primary,:host [color=grey-dark].badge-container-primary-ai,:host .badge-container-secondary [color=grey-dark].point,:host .badge-container-secondary-ai [color=grey-dark].point,:host [color=grey-dark].badge-container-notification{background:#888}.background-colors[color=success],:host [color=success].badge-container-primary,:host [color=success].badge-container-primary-ai,:host .badge-container-secondary [color=success].point,:host .badge-container-secondary-ai [color=success].point,:host [color=success].badge-container-notification{background:#d4f2c3;color:#242424}.background-colors[color=warning],:host [color=warning].badge-container-primary,:host [color=warning].badge-container-primary-ai,:host .badge-container-secondary [color=warning].point,:host .badge-container-secondary-ai [color=warning].point,:host [color=warning].badge-container-notification{background:#ffe1b3;color:#242424}.background-colors[color=negative],:host [color=negative].badge-container-primary,:host [color=negative].badge-container-primary-ai,:host .badge-container-secondary [color=negative].point,:host .badge-container-secondary-ai [color=negative].point,:host [color=negative].badge-container-notification{background:#ffac9a;color:#242424}.background-colors[color=info],:host [color=info].badge-container-primary,:host [color=info].badge-container-primary-ai,:host .badge-container-secondary [color=info].point,:host .badge-container-secondary-ai [color=info].point,:host [color=info].badge-container-notification{background:#d9e8ff;color:#242424}.background-colors[color=brand],:host [color=brand].badge-container-primary,:host [color=brand].badge-container-primary-ai,:host .badge-container-secondary [color=brand].point,:host .badge-container-secondary-ai [color=brand].point,:host [color=brand].badge-container-notification{background:#ffe6fa;color:#242424}.background-colors[color=neutral],:host [color=neutral].badge-container-primary,:host [color=neutral].badge-container-primary-ai,:host .badge-container-secondary [color=neutral].point,:host .badge-container-secondary-ai [color=neutral].point,:host [color=neutral].badge-container-notification{background:#e9e9e9;color:#242424}.background-colors[color=blue-20],:host [color=blue-20].badge-container-primary,:host [color=blue-20].badge-container-primary-ai,:host .badge-container-secondary [color=blue-20].point,:host .badge-container-secondary-ai [color=blue-20].point,:host [color=blue-20].badge-container-notification{background:#99c1fe;color:#242424}.background-colors[color=blue-30],:host [color=blue-30].badge-container-primary,:host [color=blue-30].badge-container-primary-ai,:host .badge-container-secondary [color=blue-30].point,:host .badge-container-secondary-ai [color=blue-30].point,:host [color=blue-30].badge-container-notification{background:#277cfd;color:#fff}.background-colors[color=blue-40],:host [color=blue-40].badge-container-primary,:host [color=blue-40].badge-container-primary-ai,:host .badge-container-secondary [color=blue-40].point,:host .badge-container-secondary-ai [color=blue-40].point,:host [color=blue-40].badge-container-notification{background:#0165fc;color:#fff}.background-colors[color=pink-30],:host [color=pink-30].badge-container-primary,:host [color=pink-30].badge-container-primary-ai,:host .badge-container-secondary [color=pink-30].point,:host .badge-container-secondary-ai [color=pink-30].point,:host [color=pink-30].badge-container-notification{background:#ffb3ee;color:#242424}.background-colors[color=blue-10],:host [color=blue-10].badge-container-primary,:host [color=blue-10].badge-container-primary-ai,:host .badge-container-secondary [color=blue-10].point,:host .badge-container-secondary-ai [color=blue-10].point,:host [color=blue-10].badge-container-notification{background:#d9e8ff;color:#242424}.background-colors[color=grey-30],:host [color=grey-30].badge-container-primary,:host [color=grey-30].badge-container-primary-ai,:host .badge-container-secondary [color=grey-30].point,:host .badge-container-secondary-ai [color=grey-30].point,:host [color=grey-30].badge-container-notification{background:#d3d3d3;color:#242424}.background-colors[color=grey-20],:host [color=grey-20].badge-container-primary,:host [color=grey-20].badge-container-primary-ai,:host .badge-container-secondary [color=grey-20].point,:host .badge-container-secondary-ai [color=grey-20].point,:host [color=grey-20].badge-container-notification{background:#e9e9e9;color:#242424}.background-colors[color=grey-10],:host [color=grey-10].badge-container-primary,:host [color=grey-10].badge-container-primary-ai,:host .badge-container-secondary [color=grey-10].point,:host .badge-container-secondary-ai [color=grey-10].point,:host [color=grey-10].badge-container-notification{background:#f4f4f4;color:#242424}\n"], dependencies: [{ 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"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SlicePipe, name: "slice" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
160
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: BadgeComponent, isStandalone: true, selector: "ui-badge", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, staticLabel: { classPropertyName: "staticLabel", publicName: "staticLabel", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingIconColor: { classPropertyName: "trailingIconColor", publicName: "trailingIconColor", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: false, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: false, isRequired: false, transformFunction: null }, notificationsAmount: { classPropertyName: "notificationsAmount", publicName: "notificationsAmount", isSignal: false, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: false, isRequired: false, transformFunction: null }, rebrandColor: { classPropertyName: "rebrandColor", publicName: "rebrandColor", isSignal: false, isRequired: false, transformFunction: null }, truncateLabel: { classPropertyName: "truncateLabel", publicName: "truncateLabel", isSignal: false, isRequired: false, transformFunction: null }, enableAnimation: { classPropertyName: "enableAnimation", publicName: "enableAnimation", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n [class]=\"'badge badge-container-' + variant\"\n [class.no-label]=\"!label && !staticLabel && !trailingIcon()\"\n [attr.aria-label]=\"label + (staticLabel ? ' ' + staticLabel : '')\"\n [attr.theme]=\"applicationTheme\"\n [attr.color]=\"isClassicTheme ? color : rebrandColor\"\n [matTooltip]=\"\n label.length > 25 - (staticLabel.length < 4 ? staticLabel.length : 4)\n ? label + (staticLabel ? ' ' + staticLabel : '')\n : ''\n \"\n [matTooltipClass]=\"applicationTheme\"\n>\n @switch (variant) {\n @case (badgeVariant.PRIMARY) {\n @if (icon) {\n <ui-icon\n [class.badge-icon]=\"!!label || !!staticLabel || !!trailingIcon\"\n [name]=\"icon\"\n [color]=\"resolvedIconColor\"\n ></ui-icon>\n }\n }\n @case (badgeVariant.PRIMARY_AI) {\n <ng-container [ngTemplateOutlet]=\"aiIconTpl\"></ng-container>\n }\n @case (badgeVariant.SECONDARY_AI) {\n <ng-container [ngTemplateOutlet]=\"aiIconTpl\"></ng-container>\n }\n @case (badgeVariant.SECONDARY) {\n <div class=\"point\" [attr.color]=\"isClassicTheme ? color : rebrandColor\"></div>\n }\n @case (badgeVariant.NOTIFICATION) {\n <div class=\"number-notification\">{{ notificationsAmount }}</div>\n }\n }\n @if (variant !== badgeVariant.NOTIFICATION) {\n <div class=\"label\" [class.empty]=\"!label && !staticLabel\" [class.animated]=\"enableAnimation\">\n {{\n label.length > 25 - (staticLabel.length < 4 ? staticLabel.length : 4) && truncateLabel\n ? (label | slice: 0 : 25 - (staticLabel.length < 4 ? staticLabel.length : 4)) + '...'\n : label\n }}\n </div>\n }\n @if (staticLabel && variant !== badgeVariant.NOTIFICATION) {\n <span class=\"static-label\">{{ staticLabel | slice: 0 : 4 }}</span>\n }\n @if (trailingIcon() && variant === badgeVariant.PRIMARY) {\n <ui-icon class=\"badge-icon-trailing\" [name]=\"trailingIcon()\" [color]=\"resolvedTrailingIconColor\"></ui-icon>\n }\n</div>\n\n<ng-template #aiIconTpl>\n <ui-icon class=\"badge-icon\" [name]=\"'Sparkle-in-line'\" [color]=\"'ai'\"></ui-icon>\n</ng-template>\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:block}:host .badge-container-primary,:host .badge-container-primary-ai,:host .badge-container-secondary,:host .badge-container-secondary-ai,:host .badge-container-notification{width:fit-content}:host .badge-container-primary,:host .badge-container-primary-ai,:host .badge-container-secondary,:host .badge-container-secondary-ai{height:24px;padding:0 8px;border-radius:21px;color:#fff;line-height:10px;transition:all .2s ease-out}:host .badge-container-primary .label,:host .badge-container-primary-ai .label,:host .badge-container-secondary .label,:host .badge-container-secondary-ai .label{font-size:12px;line-height:14px}:host .badge-container-primary .label.animated,:host .badge-container-primary-ai .label.animated,:host .badge-container-secondary .label.animated,:host .badge-container-secondary-ai .label.animated{display:inline-block;max-width:500px;opacity:1;overflow:hidden;white-space:nowrap;transition:max-width .25s ease-in-out,opacity .2s ease-in-out;will-change:max-width,opacity;contain:layout style}:host .badge-container-primary .label.empty,:host .badge-container-primary-ai .label.empty,:host .badge-container-secondary .label.empty,:host .badge-container-secondary-ai .label.empty{max-width:0;opacity:0}:host .badge-container-primary .static-label,:host .badge-container-primary-ai .static-label,:host .badge-container-secondary .static-label,:host .badge-container-secondary-ai .static-label{font-size:12px;line-height:14px;white-space:nowrap;flex-shrink:0;margin-left:2px}:host .badge-container-primary .badge-icon:not(:last-child),:host .badge-container-primary-ai .badge-icon:not(:last-child),:host .badge-container-secondary .badge-icon:not(:last-child),:host .badge-container-secondary-ai .badge-icon:not(:last-child){margin-right:8px}:host .badge-container-primary .badge-icon-trailing,:host .badge-container-primary-ai .badge-icon-trailing,:host .badge-container-secondary .badge-icon-trailing,:host .badge-container-secondary-ai .badge-icon-trailing{margin-left:8px}:host .badge-container-primary.no-label .badge-icon,:host .badge-container-primary-ai.no-label .badge-icon,:host .badge-container-secondary.no-label .badge-icon,:host .badge-container-secondary-ai.no-label .badge-icon{margin-right:0}:host .badge-container-secondary{padding:0}:host .badge-container-primary-ai.no-label{padding:4px}:host .badge-container-secondary .point,:host .badge-container-secondary-ai .point{border-radius:50%;padding:4px;margin-right:8px}:host .badge-container-secondary .label,:host .badge-container-secondary-ai .label{color:#000!important;width:100%}:host .badge-container-secondary[theme=dark],:host .badge-container-secondary[theme=light],:host .badge-container-secondary-ai[theme=dark],:host .badge-container-secondary-ai[theme=light]{color:#242424}:host .badge-container-secondary .badge-icon:not(:last-child),:host .badge-container-secondary-ai .badge-icon:not(:last-child){margin-right:4px}:host .badge-container-notification{min-width:20px;height:20px;border-radius:50%;color:#fff;line-height:10px}:host .badge-container-notification .label{font-size:12px}:host .badge-container-notification[theme=dark],:host .badge-container-notification[theme=light]{background:#242424!important;color:#fff!important;border-color:1px solid #ffffff}:host .badge{width:100%!important;max-width:fit-content!important}:host .badge .label{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;box-sizing:border-box!important}.flex-center,:host .badge-container-primary,:host .badge-container-primary-ai,:host .badge-container-secondary,:host .badge-container-secondary-ai,:host .badge-container-notification{display:flex;align-items:center;justify-content:center}.background-colors[color=red],:host [color=red].badge-container-primary,:host [color=red].badge-container-primary-ai,:host .badge-container-secondary [color=red].point,:host .badge-container-secondary-ai [color=red].point,:host [color=red].badge-container-notification{background:#cb7b7a}.background-colors[color=grey-medium],:host [color=grey-medium].badge-container-primary,:host [color=grey-medium].badge-container-primary-ai,:host .badge-container-secondary [color=grey-medium].point,:host .badge-container-secondary-ai [color=grey-medium].point,:host [color=grey-medium].badge-container-notification{background:#e0e0e0;color:#000}.background-colors[color=teal],:host [color=teal].badge-container-primary,:host [color=teal].badge-container-primary-ai,:host .badge-container-secondary [color=teal].point,:host .badge-container-secondary-ai [color=teal].point,:host [color=teal].badge-container-notification{background:#46a997}.background-colors[color=yellow],:host [color=yellow].badge-container-primary,:host [color=yellow].badge-container-primary-ai,:host .badge-container-secondary [color=yellow].point,:host .badge-container-secondary-ai [color=yellow].point,:host [color=yellow].badge-container-notification{background:#cca45f}.background-colors[color=petrol],:host [color=petrol].badge-container-primary,:host [color=petrol].badge-container-primary-ai,:host .badge-container-secondary [color=petrol].point,:host .badge-container-secondary-ai [color=petrol].point,:host [color=petrol].badge-container-notification{background:#276678}.background-colors[color=teal-60w],:host [color=teal-60w].badge-container-primary,:host [color=teal-60w].badge-container-primary-ai,:host .badge-container-secondary [color=teal-60w].point,:host .badge-container-secondary-ai [color=teal-60w].point,:host [color=teal-60w].badge-container-notification{background:#b5ddd5;color:#000}.background-colors[color=petrol-90w],:host [color=petrol-90w].badge-container-primary,:host [color=petrol-90w].badge-container-primary-ai,:host .badge-container-secondary [color=petrol-90w].point,:host .badge-container-secondary-ai [color=petrol-90w].point,:host [color=petrol-90w].badge-container-notification{background:#e9f0f1;color:#000}.background-colors[color=petrol-60w],:host [color=petrol-60w].badge-container-primary,:host [color=petrol-60w].badge-container-primary-ai,:host .badge-container-secondary [color=petrol-60w].point,:host .badge-container-secondary-ai [color=petrol-60w].point,:host [color=petrol-60w].badge-container-notification{background:#a9c2c9;color:#000}.background-colors[color=grey-dark],:host [color=grey-dark].badge-container-primary,:host [color=grey-dark].badge-container-primary-ai,:host .badge-container-secondary [color=grey-dark].point,:host .badge-container-secondary-ai [color=grey-dark].point,:host [color=grey-dark].badge-container-notification{background:#888}.background-colors[color=success],:host [color=success].badge-container-primary,:host [color=success].badge-container-primary-ai,:host .badge-container-secondary [color=success].point,:host .badge-container-secondary-ai [color=success].point,:host [color=success].badge-container-notification{background:#d4f2c3;color:#242424}.background-colors[color=warning],:host [color=warning].badge-container-primary,:host [color=warning].badge-container-primary-ai,:host .badge-container-secondary [color=warning].point,:host .badge-container-secondary-ai [color=warning].point,:host [color=warning].badge-container-notification{background:#ffe1b3;color:#242424}.background-colors[color=negative],:host [color=negative].badge-container-primary,:host [color=negative].badge-container-primary-ai,:host .badge-container-secondary [color=negative].point,:host .badge-container-secondary-ai [color=negative].point,:host [color=negative].badge-container-notification{background:#ffac9a;color:#242424}.background-colors[color=info],:host [color=info].badge-container-primary,:host [color=info].badge-container-primary-ai,:host .badge-container-secondary [color=info].point,:host .badge-container-secondary-ai [color=info].point,:host [color=info].badge-container-notification{background:#d9e8ff;color:#242424}.background-colors[color=brand],:host [color=brand].badge-container-primary,:host [color=brand].badge-container-primary-ai,:host .badge-container-secondary [color=brand].point,:host .badge-container-secondary-ai [color=brand].point,:host [color=brand].badge-container-notification{background:#ffe6fa;color:#242424}.background-colors[color=neutral],:host [color=neutral].badge-container-primary,:host [color=neutral].badge-container-primary-ai,:host .badge-container-secondary [color=neutral].point,:host .badge-container-secondary-ai [color=neutral].point,:host [color=neutral].badge-container-notification{background:#e9e9e9;color:#242424}.background-colors[color=blue-20],:host [color=blue-20].badge-container-primary,:host [color=blue-20].badge-container-primary-ai,:host .badge-container-secondary [color=blue-20].point,:host .badge-container-secondary-ai [color=blue-20].point,:host [color=blue-20].badge-container-notification{background:#99c1fe;color:#242424}.background-colors[color=blue-30],:host [color=blue-30].badge-container-primary,:host [color=blue-30].badge-container-primary-ai,:host .badge-container-secondary [color=blue-30].point,:host .badge-container-secondary-ai [color=blue-30].point,:host [color=blue-30].badge-container-notification{background:#277cfd;color:#fff}.background-colors[color=blue-40],:host [color=blue-40].badge-container-primary,:host [color=blue-40].badge-container-primary-ai,:host .badge-container-secondary [color=blue-40].point,:host .badge-container-secondary-ai [color=blue-40].point,:host [color=blue-40].badge-container-notification{background:#0165fc;color:#fff}.background-colors[color=pink-30],:host [color=pink-30].badge-container-primary,:host [color=pink-30].badge-container-primary-ai,:host .badge-container-secondary [color=pink-30].point,:host .badge-container-secondary-ai [color=pink-30].point,:host [color=pink-30].badge-container-notification{background:#ffb3ee;color:#242424}.background-colors[color=pink-50],:host [color=pink-50].badge-container-primary,:host [color=pink-50].badge-container-primary-ai,:host .badge-container-secondary [color=pink-50].point,:host .badge-container-secondary-ai [color=pink-50].point,:host [color=pink-50].badge-container-notification{background:#d410aa;color:#fff}.background-colors[color=blue-10],:host [color=blue-10].badge-container-primary,:host [color=blue-10].badge-container-primary-ai,:host .badge-container-secondary [color=blue-10].point,:host .badge-container-secondary-ai [color=blue-10].point,:host [color=blue-10].badge-container-notification{background:#d9e8ff;color:#242424}.background-colors[color=grey-30],:host [color=grey-30].badge-container-primary,:host [color=grey-30].badge-container-primary-ai,:host .badge-container-secondary [color=grey-30].point,:host .badge-container-secondary-ai [color=grey-30].point,:host [color=grey-30].badge-container-notification{background:#d3d3d3;color:#242424}.background-colors[color=grey-20],:host [color=grey-20].badge-container-primary,:host [color=grey-20].badge-container-primary-ai,:host .badge-container-secondary [color=grey-20].point,:host .badge-container-secondary-ai [color=grey-20].point,:host [color=grey-20].badge-container-notification{background:#e9e9e9;color:#242424}.background-colors[color=grey-10],:host [color=grey-10].badge-container-primary,:host [color=grey-10].badge-container-primary-ai,:host .badge-container-secondary [color=grey-10].point,:host .badge-container-secondary-ai [color=grey-10].point,:host [color=grey-10].badge-container-notification{background:#f4f4f4;color:#242424}\n"], dependencies: [{ 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"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SlicePipe, name: "slice" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
160
161
|
}
|
|
161
162
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
162
163
|
type: Component,
|
|
163
|
-
args: [{ selector: 'ui-badge', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatTooltip, IconComponentModule, NgTemplateOutlet, SlicePipe], template: "<div\n [class]=\"'badge badge-container-' + variant\"\n [class.no-label]=\"!label && !staticLabel && !trailingIcon()\"\n [attr.aria-label]=\"label + (staticLabel ? ' ' + staticLabel : '')\"\n [attr.theme]=\"applicationTheme\"\n [attr.color]=\"isClassicTheme ? color : rebrandColor\"\n [matTooltip]=\"\n label.length > 25 - (staticLabel.length < 4 ? staticLabel.length : 4)\n ? label + (staticLabel ? ' ' + staticLabel : '')\n : ''\n \"\n [matTooltipClass]=\"applicationTheme\"\n>\n @switch (variant) {\n @case (badgeVariant.PRIMARY) {\n @if (icon) {\n <ui-icon\n [class.badge-icon]=\"!!label || !!staticLabel || !!trailingIcon\"\n [name]=\"icon\"\n [color]=\"resolvedIconColor\"\n ></ui-icon>\n }\n }\n @case (badgeVariant.PRIMARY_AI) {\n <ng-container [ngTemplateOutlet]=\"aiIconTpl\"></ng-container>\n }\n @case (badgeVariant.SECONDARY_AI) {\n <ng-container [ngTemplateOutlet]=\"aiIconTpl\"></ng-container>\n }\n @case (badgeVariant.SECONDARY) {\n <div class=\"point\" [attr.color]=\"isClassicTheme ? color : rebrandColor\"></div>\n }\n @case (badgeVariant.NOTIFICATION) {\n <div class=\"number-notification\">{{ notificationsAmount }}</div>\n }\n }\n @if (variant !== badgeVariant.NOTIFICATION) {\n <div class=\"label\" [class.empty]=\"!label && !staticLabel\" [class.animated]=\"enableAnimation\">\n {{\n label.length > 25 - (staticLabel.length < 4 ? staticLabel.length : 4) && truncateLabel\n ? (label | slice: 0 : 25 - (staticLabel.length < 4 ? staticLabel.length : 4)) + '...'\n : label\n }}\n </div>\n }\n @if (staticLabel && variant !== badgeVariant.NOTIFICATION) {\n <span class=\"static-label\">{{ staticLabel | slice: 0 : 4 }}</span>\n }\n @if (trailingIcon() && variant === badgeVariant.PRIMARY) {\n <ui-icon class=\"badge-icon-trailing\" [name]=\"trailingIcon()\" [color]=\"resolvedTrailingIconColor\"></ui-icon>\n }\n</div>\n\n<ng-template #aiIconTpl>\n <ui-icon class=\"badge-icon\" [name]=\"'Sparkle-in-line'\" [color]=\"'ai'\"></ui-icon>\n</ng-template>\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:block}:host .badge-container-primary,:host .badge-container-primary-ai,:host .badge-container-secondary,:host .badge-container-secondary-ai,:host .badge-container-notification{width:fit-content}:host .badge-container-primary,:host .badge-container-primary-ai,:host .badge-container-secondary,:host .badge-container-secondary-ai{height:24px;padding:0 8px;border-radius:21px;color:#fff;line-height:10px;transition:all .2s ease-out}:host .badge-container-primary .label,:host .badge-container-primary-ai .label,:host .badge-container-secondary .label,:host .badge-container-secondary-ai .label{font-size:12px;line-height:14px}:host .badge-container-primary .label.animated,:host .badge-container-primary-ai .label.animated,:host .badge-container-secondary .label.animated,:host .badge-container-secondary-ai .label.animated{display:inline-block;max-width:500px;opacity:1;overflow:hidden;white-space:nowrap;transition:max-width .25s ease-in-out,opacity .2s ease-in-out;will-change:max-width,opacity;contain:layout style}:host .badge-container-primary .label.empty,:host .badge-container-primary-ai .label.empty,:host .badge-container-secondary .label.empty,:host .badge-container-secondary-ai .label.empty{max-width:0;opacity:0}:host .badge-container-primary .static-label,:host .badge-container-primary-ai .static-label,:host .badge-container-secondary .static-label,:host .badge-container-secondary-ai .static-label{font-size:12px;line-height:14px;white-space:nowrap;flex-shrink:0;margin-left:2px}:host .badge-container-primary .badge-icon:not(:last-child),:host .badge-container-primary-ai .badge-icon:not(:last-child),:host .badge-container-secondary .badge-icon:not(:last-child),:host .badge-container-secondary-ai .badge-icon:not(:last-child){margin-right:8px}:host .badge-container-primary .badge-icon-trailing,:host .badge-container-primary-ai .badge-icon-trailing,:host .badge-container-secondary .badge-icon-trailing,:host .badge-container-secondary-ai .badge-icon-trailing{margin-left:8px}:host .badge-container-primary.no-label .badge-icon,:host .badge-container-primary-ai.no-label .badge-icon,:host .badge-container-secondary.no-label .badge-icon,:host .badge-container-secondary-ai.no-label .badge-icon{margin-right:0}:host .badge-container-secondary{padding:0}:host .badge-container-primary-ai.no-label{padding:4px}:host .badge-container-secondary .point,:host .badge-container-secondary-ai .point{border-radius:50%;padding:4px;margin-right:8px}:host .badge-container-secondary .label,:host .badge-container-secondary-ai .label{color:#000!important;width:100%}:host .badge-container-secondary[theme=dark],:host .badge-container-secondary[theme=light],:host .badge-container-secondary-ai[theme=dark],:host .badge-container-secondary-ai[theme=light]{color:#242424}:host .badge-container-secondary .badge-icon:not(:last-child),:host .badge-container-secondary-ai .badge-icon:not(:last-child){margin-right:4px}:host .badge-container-notification{min-width:20px;height:20px;border-radius:50%;color:#fff;line-height:10px}:host .badge-container-notification .label{font-size:12px}:host .badge-container-notification[theme=dark],:host .badge-container-notification[theme=light]{background:#242424!important;color:#fff!important;border-color:1px solid #ffffff}:host .badge{width:100%!important;max-width:fit-content!important}:host .badge .label{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;box-sizing:border-box!important}.flex-center,:host .badge-container-primary,:host .badge-container-primary-ai,:host .badge-container-secondary,:host .badge-container-secondary-ai,:host .badge-container-notification{display:flex;align-items:center;justify-content:center}.background-colors[color=red],:host [color=red].badge-container-primary,:host [color=red].badge-container-primary-ai,:host .badge-container-secondary [color=red].point,:host .badge-container-secondary-ai [color=red].point,:host [color=red].badge-container-notification{background:#cb7b7a}.background-colors[color=grey-medium],:host [color=grey-medium].badge-container-primary,:host [color=grey-medium].badge-container-primary-ai,:host .badge-container-secondary [color=grey-medium].point,:host .badge-container-secondary-ai [color=grey-medium].point,:host [color=grey-medium].badge-container-notification{background:#e0e0e0;color:#000}.background-colors[color=teal],:host [color=teal].badge-container-primary,:host [color=teal].badge-container-primary-ai,:host .badge-container-secondary [color=teal].point,:host .badge-container-secondary-ai [color=teal].point,:host [color=teal].badge-container-notification{background:#46a997}.background-colors[color=yellow],:host [color=yellow].badge-container-primary,:host [color=yellow].badge-container-primary-ai,:host .badge-container-secondary [color=yellow].point,:host .badge-container-secondary-ai [color=yellow].point,:host [color=yellow].badge-container-notification{background:#cca45f}.background-colors[color=petrol],:host [color=petrol].badge-container-primary,:host [color=petrol].badge-container-primary-ai,:host .badge-container-secondary [color=petrol].point,:host .badge-container-secondary-ai [color=petrol].point,:host [color=petrol].badge-container-notification{background:#276678}.background-colors[color=teal-60w],:host [color=teal-60w].badge-container-primary,:host [color=teal-60w].badge-container-primary-ai,:host .badge-container-secondary [color=teal-60w].point,:host .badge-container-secondary-ai [color=teal-60w].point,:host [color=teal-60w].badge-container-notification{background:#b5ddd5;color:#000}.background-colors[color=petrol-90w],:host [color=petrol-90w].badge-container-primary,:host [color=petrol-90w].badge-container-primary-ai,:host .badge-container-secondary [color=petrol-90w].point,:host .badge-container-secondary-ai [color=petrol-90w].point,:host [color=petrol-90w].badge-container-notification{background:#e9f0f1;color:#000}.background-colors[color=petrol-60w],:host [color=petrol-60w].badge-container-primary,:host [color=petrol-60w].badge-container-primary-ai,:host .badge-container-secondary [color=petrol-60w].point,:host .badge-container-secondary-ai [color=petrol-60w].point,:host [color=petrol-60w].badge-container-notification{background:#a9c2c9;color:#000}.background-colors[color=grey-dark],:host [color=grey-dark].badge-container-primary,:host [color=grey-dark].badge-container-primary-ai,:host .badge-container-secondary [color=grey-dark].point,:host .badge-container-secondary-ai [color=grey-dark].point,:host [color=grey-dark].badge-container-notification{background:#888}.background-colors[color=success],:host [color=success].badge-container-primary,:host [color=success].badge-container-primary-ai,:host .badge-container-secondary [color=success].point,:host .badge-container-secondary-ai [color=success].point,:host [color=success].badge-container-notification{background:#d4f2c3;color:#242424}.background-colors[color=warning],:host [color=warning].badge-container-primary,:host [color=warning].badge-container-primary-ai,:host .badge-container-secondary [color=warning].point,:host .badge-container-secondary-ai [color=warning].point,:host [color=warning].badge-container-notification{background:#ffe1b3;color:#242424}.background-colors[color=negative],:host [color=negative].badge-container-primary,:host [color=negative].badge-container-primary-ai,:host .badge-container-secondary [color=negative].point,:host .badge-container-secondary-ai [color=negative].point,:host [color=negative].badge-container-notification{background:#ffac9a;color:#242424}.background-colors[color=info],:host [color=info].badge-container-primary,:host [color=info].badge-container-primary-ai,:host .badge-container-secondary [color=info].point,:host .badge-container-secondary-ai [color=info].point,:host [color=info].badge-container-notification{background:#d9e8ff;color:#242424}.background-colors[color=brand],:host [color=brand].badge-container-primary,:host [color=brand].badge-container-primary-ai,:host .badge-container-secondary [color=brand].point,:host .badge-container-secondary-ai [color=brand].point,:host [color=brand].badge-container-notification{background:#ffe6fa;color:#242424}.background-colors[color=neutral],:host [color=neutral].badge-container-primary,:host [color=neutral].badge-container-primary-ai,:host .badge-container-secondary [color=neutral].point,:host .badge-container-secondary-ai [color=neutral].point,:host [color=neutral].badge-container-notification{background:#e9e9e9;color:#242424}.background-colors[color=blue-20],:host [color=blue-20].badge-container-primary,:host [color=blue-20].badge-container-primary-ai,:host .badge-container-secondary [color=blue-20].point,:host .badge-container-secondary-ai [color=blue-20].point,:host [color=blue-20].badge-container-notification{background:#99c1fe;color:#242424}.background-colors[color=blue-30],:host [color=blue-30].badge-container-primary,:host [color=blue-30].badge-container-primary-ai,:host .badge-container-secondary [color=blue-30].point,:host .badge-container-secondary-ai [color=blue-30].point,:host [color=blue-30].badge-container-notification{background:#277cfd;color:#fff}.background-colors[color=blue-40],:host [color=blue-40].badge-container-primary,:host [color=blue-40].badge-container-primary-ai,:host .badge-container-secondary [color=blue-40].point,:host .badge-container-secondary-ai [color=blue-40].point,:host [color=blue-40].badge-container-notification{background:#0165fc;color:#fff}.background-colors[color=pink-30],:host [color=pink-30].badge-container-primary,:host [color=pink-30].badge-container-primary-ai,:host .badge-container-secondary [color=pink-30].point,:host .badge-container-secondary-ai [color=pink-30].point,:host [color=pink-30].badge-container-notification{background:#ffb3ee;color:#242424}.background-colors[color=blue-10],:host [color=blue-10].badge-container-primary,:host [color=blue-10].badge-container-primary-ai,:host .badge-container-secondary [color=blue-10].point,:host .badge-container-secondary-ai [color=blue-10].point,:host [color=blue-10].badge-container-notification{background:#d9e8ff;color:#242424}.background-colors[color=grey-30],:host [color=grey-30].badge-container-primary,:host [color=grey-30].badge-container-primary-ai,:host .badge-container-secondary [color=grey-30].point,:host .badge-container-secondary-ai [color=grey-30].point,:host [color=grey-30].badge-container-notification{background:#d3d3d3;color:#242424}.background-colors[color=grey-20],:host [color=grey-20].badge-container-primary,:host [color=grey-20].badge-container-primary-ai,:host .badge-container-secondary [color=grey-20].point,:host .badge-container-secondary-ai [color=grey-20].point,:host [color=grey-20].badge-container-notification{background:#e9e9e9;color:#242424}.background-colors[color=grey-10],:host [color=grey-10].badge-container-primary,:host [color=grey-10].badge-container-primary-ai,:host .badge-container-secondary [color=grey-10].point,:host .badge-container-secondary-ai [color=grey-10].point,:host [color=grey-10].badge-container-notification{background:#f4f4f4;color:#242424}\n"] }]
|
|
164
|
+
args: [{ selector: 'ui-badge', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatTooltip, IconComponentModule, NgTemplateOutlet, SlicePipe], template: "<div\n [class]=\"'badge badge-container-' + variant\"\n [class.no-label]=\"!label && !staticLabel && !trailingIcon()\"\n [attr.aria-label]=\"label + (staticLabel ? ' ' + staticLabel : '')\"\n [attr.theme]=\"applicationTheme\"\n [attr.color]=\"isClassicTheme ? color : rebrandColor\"\n [matTooltip]=\"\n label.length > 25 - (staticLabel.length < 4 ? staticLabel.length : 4)\n ? label + (staticLabel ? ' ' + staticLabel : '')\n : ''\n \"\n [matTooltipClass]=\"applicationTheme\"\n>\n @switch (variant) {\n @case (badgeVariant.PRIMARY) {\n @if (icon) {\n <ui-icon\n [class.badge-icon]=\"!!label || !!staticLabel || !!trailingIcon\"\n [name]=\"icon\"\n [color]=\"resolvedIconColor\"\n ></ui-icon>\n }\n }\n @case (badgeVariant.PRIMARY_AI) {\n <ng-container [ngTemplateOutlet]=\"aiIconTpl\"></ng-container>\n }\n @case (badgeVariant.SECONDARY_AI) {\n <ng-container [ngTemplateOutlet]=\"aiIconTpl\"></ng-container>\n }\n @case (badgeVariant.SECONDARY) {\n <div class=\"point\" [attr.color]=\"isClassicTheme ? color : rebrandColor\"></div>\n }\n @case (badgeVariant.NOTIFICATION) {\n <div class=\"number-notification\">{{ notificationsAmount }}</div>\n }\n }\n @if (variant !== badgeVariant.NOTIFICATION) {\n <div class=\"label\" [class.empty]=\"!label && !staticLabel\" [class.animated]=\"enableAnimation\">\n {{\n label.length > 25 - (staticLabel.length < 4 ? staticLabel.length : 4) && truncateLabel\n ? (label | slice: 0 : 25 - (staticLabel.length < 4 ? staticLabel.length : 4)) + '...'\n : label\n }}\n </div>\n }\n @if (staticLabel && variant !== badgeVariant.NOTIFICATION) {\n <span class=\"static-label\">{{ staticLabel | slice: 0 : 4 }}</span>\n }\n @if (trailingIcon() && variant === badgeVariant.PRIMARY) {\n <ui-icon class=\"badge-icon-trailing\" [name]=\"trailingIcon()\" [color]=\"resolvedTrailingIconColor\"></ui-icon>\n }\n</div>\n\n<ng-template #aiIconTpl>\n <ui-icon class=\"badge-icon\" [name]=\"'Sparkle-in-line'\" [color]=\"'ai'\"></ui-icon>\n</ng-template>\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:block}:host .badge-container-primary,:host .badge-container-primary-ai,:host .badge-container-secondary,:host .badge-container-secondary-ai,:host .badge-container-notification{width:fit-content}:host .badge-container-primary,:host .badge-container-primary-ai,:host .badge-container-secondary,:host .badge-container-secondary-ai{height:24px;padding:0 8px;border-radius:21px;color:#fff;line-height:10px;transition:all .2s ease-out}:host .badge-container-primary .label,:host .badge-container-primary-ai .label,:host .badge-container-secondary .label,:host .badge-container-secondary-ai .label{font-size:12px;line-height:14px}:host .badge-container-primary .label.animated,:host .badge-container-primary-ai .label.animated,:host .badge-container-secondary .label.animated,:host .badge-container-secondary-ai .label.animated{display:inline-block;max-width:500px;opacity:1;overflow:hidden;white-space:nowrap;transition:max-width .25s ease-in-out,opacity .2s ease-in-out;will-change:max-width,opacity;contain:layout style}:host .badge-container-primary .label.empty,:host .badge-container-primary-ai .label.empty,:host .badge-container-secondary .label.empty,:host .badge-container-secondary-ai .label.empty{max-width:0;opacity:0}:host .badge-container-primary .static-label,:host .badge-container-primary-ai .static-label,:host .badge-container-secondary .static-label,:host .badge-container-secondary-ai .static-label{font-size:12px;line-height:14px;white-space:nowrap;flex-shrink:0;margin-left:2px}:host .badge-container-primary .badge-icon:not(:last-child),:host .badge-container-primary-ai .badge-icon:not(:last-child),:host .badge-container-secondary .badge-icon:not(:last-child),:host .badge-container-secondary-ai .badge-icon:not(:last-child){margin-right:8px}:host .badge-container-primary .badge-icon-trailing,:host .badge-container-primary-ai .badge-icon-trailing,:host .badge-container-secondary .badge-icon-trailing,:host .badge-container-secondary-ai .badge-icon-trailing{margin-left:8px}:host .badge-container-primary.no-label .badge-icon,:host .badge-container-primary-ai.no-label .badge-icon,:host .badge-container-secondary.no-label .badge-icon,:host .badge-container-secondary-ai.no-label .badge-icon{margin-right:0}:host .badge-container-secondary{padding:0}:host .badge-container-primary-ai.no-label{padding:4px}:host .badge-container-secondary .point,:host .badge-container-secondary-ai .point{border-radius:50%;padding:4px;margin-right:8px}:host .badge-container-secondary .label,:host .badge-container-secondary-ai .label{color:#000!important;width:100%}:host .badge-container-secondary[theme=dark],:host .badge-container-secondary[theme=light],:host .badge-container-secondary-ai[theme=dark],:host .badge-container-secondary-ai[theme=light]{color:#242424}:host .badge-container-secondary .badge-icon:not(:last-child),:host .badge-container-secondary-ai .badge-icon:not(:last-child){margin-right:4px}:host .badge-container-notification{min-width:20px;height:20px;border-radius:50%;color:#fff;line-height:10px}:host .badge-container-notification .label{font-size:12px}:host .badge-container-notification[theme=dark],:host .badge-container-notification[theme=light]{background:#242424!important;color:#fff!important;border-color:1px solid #ffffff}:host .badge{width:100%!important;max-width:fit-content!important}:host .badge .label{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;box-sizing:border-box!important}.flex-center,:host .badge-container-primary,:host .badge-container-primary-ai,:host .badge-container-secondary,:host .badge-container-secondary-ai,:host .badge-container-notification{display:flex;align-items:center;justify-content:center}.background-colors[color=red],:host [color=red].badge-container-primary,:host [color=red].badge-container-primary-ai,:host .badge-container-secondary [color=red].point,:host .badge-container-secondary-ai [color=red].point,:host [color=red].badge-container-notification{background:#cb7b7a}.background-colors[color=grey-medium],:host [color=grey-medium].badge-container-primary,:host [color=grey-medium].badge-container-primary-ai,:host .badge-container-secondary [color=grey-medium].point,:host .badge-container-secondary-ai [color=grey-medium].point,:host [color=grey-medium].badge-container-notification{background:#e0e0e0;color:#000}.background-colors[color=teal],:host [color=teal].badge-container-primary,:host [color=teal].badge-container-primary-ai,:host .badge-container-secondary [color=teal].point,:host .badge-container-secondary-ai [color=teal].point,:host [color=teal].badge-container-notification{background:#46a997}.background-colors[color=yellow],:host [color=yellow].badge-container-primary,:host [color=yellow].badge-container-primary-ai,:host .badge-container-secondary [color=yellow].point,:host .badge-container-secondary-ai [color=yellow].point,:host [color=yellow].badge-container-notification{background:#cca45f}.background-colors[color=petrol],:host [color=petrol].badge-container-primary,:host [color=petrol].badge-container-primary-ai,:host .badge-container-secondary [color=petrol].point,:host .badge-container-secondary-ai [color=petrol].point,:host [color=petrol].badge-container-notification{background:#276678}.background-colors[color=teal-60w],:host [color=teal-60w].badge-container-primary,:host [color=teal-60w].badge-container-primary-ai,:host .badge-container-secondary [color=teal-60w].point,:host .badge-container-secondary-ai [color=teal-60w].point,:host [color=teal-60w].badge-container-notification{background:#b5ddd5;color:#000}.background-colors[color=petrol-90w],:host [color=petrol-90w].badge-container-primary,:host [color=petrol-90w].badge-container-primary-ai,:host .badge-container-secondary [color=petrol-90w].point,:host .badge-container-secondary-ai [color=petrol-90w].point,:host [color=petrol-90w].badge-container-notification{background:#e9f0f1;color:#000}.background-colors[color=petrol-60w],:host [color=petrol-60w].badge-container-primary,:host [color=petrol-60w].badge-container-primary-ai,:host .badge-container-secondary [color=petrol-60w].point,:host .badge-container-secondary-ai [color=petrol-60w].point,:host [color=petrol-60w].badge-container-notification{background:#a9c2c9;color:#000}.background-colors[color=grey-dark],:host [color=grey-dark].badge-container-primary,:host [color=grey-dark].badge-container-primary-ai,:host .badge-container-secondary [color=grey-dark].point,:host .badge-container-secondary-ai [color=grey-dark].point,:host [color=grey-dark].badge-container-notification{background:#888}.background-colors[color=success],:host [color=success].badge-container-primary,:host [color=success].badge-container-primary-ai,:host .badge-container-secondary [color=success].point,:host .badge-container-secondary-ai [color=success].point,:host [color=success].badge-container-notification{background:#d4f2c3;color:#242424}.background-colors[color=warning],:host [color=warning].badge-container-primary,:host [color=warning].badge-container-primary-ai,:host .badge-container-secondary [color=warning].point,:host .badge-container-secondary-ai [color=warning].point,:host [color=warning].badge-container-notification{background:#ffe1b3;color:#242424}.background-colors[color=negative],:host [color=negative].badge-container-primary,:host [color=negative].badge-container-primary-ai,:host .badge-container-secondary [color=negative].point,:host .badge-container-secondary-ai [color=negative].point,:host [color=negative].badge-container-notification{background:#ffac9a;color:#242424}.background-colors[color=info],:host [color=info].badge-container-primary,:host [color=info].badge-container-primary-ai,:host .badge-container-secondary [color=info].point,:host .badge-container-secondary-ai [color=info].point,:host [color=info].badge-container-notification{background:#d9e8ff;color:#242424}.background-colors[color=brand],:host [color=brand].badge-container-primary,:host [color=brand].badge-container-primary-ai,:host .badge-container-secondary [color=brand].point,:host .badge-container-secondary-ai [color=brand].point,:host [color=brand].badge-container-notification{background:#ffe6fa;color:#242424}.background-colors[color=neutral],:host [color=neutral].badge-container-primary,:host [color=neutral].badge-container-primary-ai,:host .badge-container-secondary [color=neutral].point,:host .badge-container-secondary-ai [color=neutral].point,:host [color=neutral].badge-container-notification{background:#e9e9e9;color:#242424}.background-colors[color=blue-20],:host [color=blue-20].badge-container-primary,:host [color=blue-20].badge-container-primary-ai,:host .badge-container-secondary [color=blue-20].point,:host .badge-container-secondary-ai [color=blue-20].point,:host [color=blue-20].badge-container-notification{background:#99c1fe;color:#242424}.background-colors[color=blue-30],:host [color=blue-30].badge-container-primary,:host [color=blue-30].badge-container-primary-ai,:host .badge-container-secondary [color=blue-30].point,:host .badge-container-secondary-ai [color=blue-30].point,:host [color=blue-30].badge-container-notification{background:#277cfd;color:#fff}.background-colors[color=blue-40],:host [color=blue-40].badge-container-primary,:host [color=blue-40].badge-container-primary-ai,:host .badge-container-secondary [color=blue-40].point,:host .badge-container-secondary-ai [color=blue-40].point,:host [color=blue-40].badge-container-notification{background:#0165fc;color:#fff}.background-colors[color=pink-30],:host [color=pink-30].badge-container-primary,:host [color=pink-30].badge-container-primary-ai,:host .badge-container-secondary [color=pink-30].point,:host .badge-container-secondary-ai [color=pink-30].point,:host [color=pink-30].badge-container-notification{background:#ffb3ee;color:#242424}.background-colors[color=pink-50],:host [color=pink-50].badge-container-primary,:host [color=pink-50].badge-container-primary-ai,:host .badge-container-secondary [color=pink-50].point,:host .badge-container-secondary-ai [color=pink-50].point,:host [color=pink-50].badge-container-notification{background:#d410aa;color:#fff}.background-colors[color=blue-10],:host [color=blue-10].badge-container-primary,:host [color=blue-10].badge-container-primary-ai,:host .badge-container-secondary [color=blue-10].point,:host .badge-container-secondary-ai [color=blue-10].point,:host [color=blue-10].badge-container-notification{background:#d9e8ff;color:#242424}.background-colors[color=grey-30],:host [color=grey-30].badge-container-primary,:host [color=grey-30].badge-container-primary-ai,:host .badge-container-secondary [color=grey-30].point,:host .badge-container-secondary-ai [color=grey-30].point,:host [color=grey-30].badge-container-notification{background:#d3d3d3;color:#242424}.background-colors[color=grey-20],:host [color=grey-20].badge-container-primary,:host [color=grey-20].badge-container-primary-ai,:host .badge-container-secondary [color=grey-20].point,:host .badge-container-secondary-ai [color=grey-20].point,:host [color=grey-20].badge-container-notification{background:#e9e9e9;color:#242424}.background-colors[color=grey-10],:host [color=grey-10].badge-container-primary,:host [color=grey-10].badge-container-primary-ai,:host .badge-container-secondary [color=grey-10].point,:host .badge-container-secondary-ai [color=grey-10].point,:host [color=grey-10].badge-container-notification{background:#f4f4f4;color:#242424}\n"] }]
|
|
164
165
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
165
166
|
type: Optional
|
|
166
167
|
}, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"testgorilla-tgo-ui-components-badge.mjs","sources":["../../../components/badge/badge.model.ts","../../../components/badge/badge.component.ts","../../../components/badge/badge.component.html","../../../components/badge/badge.component.module.ts","../../../components/badge/testgorilla-tgo-ui-components-badge.ts"],"sourcesContent":["export type BadgeVariant = 'primary' | 'secondary' | 'notification' | 'primary-ai' | 'secondary-ai';\nexport type BadgeColor =\n | 'red'\n | 'grey-medium'\n | 'teal'\n | 'yellow'\n | 'petrol'\n | 'teal-60w'\n | 'petrol-90w'\n | 'petrol-60w'\n | 'grey-dark'\n | 'blue-20'\n | 'blue-40'\n | 'pink-30'\n | 'blue-10';\n\nexport enum BadgeColorEnum {\n RED = 'red',\n GREY_MEDIUM = 'grey-medium',\n TEAL = 'teal',\n YELLOW = 'yellow',\n PETROL = 'petrol',\n TEAL_60W = 'teal-60w',\n PETROL_90W = 'petrol-90w',\n PETROL_60W = 'petrol-60w',\n GREY_DARK = 'grey-dark',\n BLUE_20 = 'blue-20',\n BLUE_40 = 'blue-40',\n}\n\nexport type RebrandBadgeColor =\n | 'success'\n | 'warning'\n | 'negative'\n | 'info'\n | 'brand'\n | 'neutral'\n | 'blue-20'\n | 'blue-40'\n | 'pink-30'\n | 'blue-10'\n | 'grey-10'\n | 'grey-20'\n | 'grey-30';\n\nexport enum RebrandBadgeColorEnum {\n SUCCESS = 'success',\n WARNING = 'warning',\n NEGATIVE = 'negative',\n INFO = 'info',\n BRAND = 'brand',\n NEUTRAL = 'neutral',\n BLUE_40 = 'blue-40',\n BLUE_20 = 'blue-20',\n PINK_30 = 'pink-30',\n BLUE_10 = 'blue-10',\n GREY_30 = 'grey-30',\n GREY_20 = 'grey-20',\n GREY_10 = 'grey-10',\n}\n\nexport enum BadgeVariantEnum {\n PRIMARY = 'primary',\n PRIMARY_AI = 'primary-ai',\n SECONDARY = 'secondary',\n SECONDARY_AI = 'secondary-ai',\n NOTIFICATION = 'notification',\n}\n","import { NgTemplateOutlet, SlicePipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Inject, Input, Optional, input } from '@angular/core';\nimport { MatTooltip } from '@angular/material/tooltip';\n\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { IconColor, IconName, IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\n\nimport {\n BadgeColor,\n BadgeColorEnum,\n BadgeVariant,\n BadgeVariantEnum,\n RebrandBadgeColor,\n RebrandBadgeColorEnum,\n} from './badge.model';\n\n@Component({\n selector: 'ui-badge',\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './badge.component.html',\n styleUrls: ['./badge.component.scss'],\n imports: [MatTooltip, IconComponentModule, NgTemplateOutlet, SlicePipe],\n})\nexport class BadgeComponent {\n /**\n * The label to be displayed on the badge.\n * @type {string}\n * @memberof BadgeComponent\n */\n @Input() label = '';\n\n /**\n * A static label always displayed after the main label, never truncated.\n * Intended for short suffixes (max 4 chars, e.g. \"100%\").\n * When the main label is truncated, the tooltip shows both labels in full.\n * @type {string}\n * @memberof BadgeComponent\n */\n @Input() staticLabel = '';\n\n /**\n * The icon name to be displayed on the badge.\n * @type {IconName}\n * @memberof BadgeComponent\n */\n @Input() icon: IconName = '';\n\n /**\n * Override color for the leading icon. Accepts any value the `ui-icon`\n * `color` input accepts (named token, hex, or CSS custom property).\n * When unset, falls back to the auto-derived color based on the badge background.\n */\n iconColor = input<string | undefined>(undefined);\n\n /**\n * Optional trailing icon, rendered after the label/static label on the primary variant.\n */\n trailingIcon = input<IconName>('');\n\n /**\n * Override color for the trailing icon. Accepts any value the `ui-icon`\n * `color` input accepts (named token, hex, or CSS custom property).\n * When unset, falls back to the auto-derived color based on the badge background.\n */\n trailingIconColor = input<string | undefined>(undefined);\n\n /**\n * The color of the badge. Defaults to 'petrol'.\n * @type {BadgeColor}\n * @memberof BadgeComponent\n */\n @Input() color: BadgeColor = 'petrol';\n\n /**\n * The variant of the badge. Defaults to 'primary'.\n * @type {BadgeVariant}\n * @memberof BadgeComponent\n */\n @Input() variant: BadgeVariant = 'primary';\n\n /**\n * The amount of notifications to be displayed on the badge.\n * @type {number}\n * @memberof BadgeComponent\n */\n @Input() notificationsAmount = 0;\n\n /**\n *\n * Defines the application theme\n *\n * @type {ApplicationTheme}\n * @memberof BadgeComponent\n */\n @Input() applicationTheme: ApplicationTheme = 'light';\n\n /**\n * The color of the badge on new theme. Defaults to 'brand'.\n * @type {RebrandBadgeColor}\n * @memberof BadgeComponent\n */\n @Input() rebrandColor: RebrandBadgeColor = 'brand';\n\n @Input() truncateLabel = true;\n\n /**\n * Whether to enable the animation when label changes from empty to having content.\n * @type {boolean}\n * @memberof BadgeComponent\n */\n @Input() enableAnimation = false;\n\n protected badgeVariant = BadgeVariantEnum;\n private readonly darkColors: string[] = [\n BadgeColorEnum.GREY_MEDIUM,\n BadgeColorEnum.PETROL_90W,\n BadgeColorEnum.TEAL_60W,\n BadgeColorEnum.PETROL_60W,\n RebrandBadgeColorEnum.SUCCESS,\n RebrandBadgeColorEnum.INFO,\n RebrandBadgeColorEnum.BRAND,\n RebrandBadgeColorEnum.NEUTRAL,\n RebrandBadgeColorEnum.NEGATIVE,\n RebrandBadgeColorEnum.WARNING,\n RebrandBadgeColorEnum.BLUE_20,\n RebrandBadgeColorEnum.PINK_30,\n RebrandBadgeColorEnum.BLUE_10,\n RebrandBadgeColorEnum.GREY_20,\n ];\n\n constructor(\n @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n ) {\n if (defaultAppTheme) {\n this.applicationTheme = defaultAppTheme;\n }\n }\n\n protected get autoIconColor(): IconColor {\n return this.darkColors.includes(this.isClassicTheme ? this.color : this.rebrandColor) ? 'black' : 'white';\n }\n\n protected get resolvedIconColor(): IconColor {\n return this.iconColor() ?? this.autoIconColor;\n }\n\n protected get resolvedTrailingIconColor(): IconColor {\n return this.trailingIconColor() ?? this.autoIconColor;\n }\n\n protected get isClassicTheme(): boolean {\n return this.applicationTheme === 'classic';\n }\n}\n","<div\n [class]=\"'badge badge-container-' + variant\"\n [class.no-label]=\"!label && !staticLabel && !trailingIcon()\"\n [attr.aria-label]=\"label + (staticLabel ? ' ' + staticLabel : '')\"\n [attr.theme]=\"applicationTheme\"\n [attr.color]=\"isClassicTheme ? color : rebrandColor\"\n [matTooltip]=\"\n label.length > 25 - (staticLabel.length < 4 ? staticLabel.length : 4)\n ? label + (staticLabel ? ' ' + staticLabel : '')\n : ''\n \"\n [matTooltipClass]=\"applicationTheme\"\n>\n @switch (variant) {\n @case (badgeVariant.PRIMARY) {\n @if (icon) {\n <ui-icon\n [class.badge-icon]=\"!!label || !!staticLabel || !!trailingIcon\"\n [name]=\"icon\"\n [color]=\"resolvedIconColor\"\n ></ui-icon>\n }\n }\n @case (badgeVariant.PRIMARY_AI) {\n <ng-container [ngTemplateOutlet]=\"aiIconTpl\"></ng-container>\n }\n @case (badgeVariant.SECONDARY_AI) {\n <ng-container [ngTemplateOutlet]=\"aiIconTpl\"></ng-container>\n }\n @case (badgeVariant.SECONDARY) {\n <div class=\"point\" [attr.color]=\"isClassicTheme ? color : rebrandColor\"></div>\n }\n @case (badgeVariant.NOTIFICATION) {\n <div class=\"number-notification\">{{ notificationsAmount }}</div>\n }\n }\n @if (variant !== badgeVariant.NOTIFICATION) {\n <div class=\"label\" [class.empty]=\"!label && !staticLabel\" [class.animated]=\"enableAnimation\">\n {{\n label.length > 25 - (staticLabel.length < 4 ? staticLabel.length : 4) && truncateLabel\n ? (label | slice: 0 : 25 - (staticLabel.length < 4 ? staticLabel.length : 4)) + '...'\n : label\n }}\n </div>\n }\n @if (staticLabel && variant !== badgeVariant.NOTIFICATION) {\n <span class=\"static-label\">{{ staticLabel | slice: 0 : 4 }}</span>\n }\n @if (trailingIcon() && variant === badgeVariant.PRIMARY) {\n <ui-icon class=\"badge-icon-trailing\" [name]=\"trailingIcon()\" [color]=\"resolvedTrailingIconColor\"></ui-icon>\n }\n</div>\n\n<ng-template #aiIconTpl>\n <ui-icon class=\"badge-icon\" [name]=\"'Sparkle-in-line'\" [color]=\"'ai'\"></ui-icon>\n</ng-template>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\n\nimport { BadgeComponent } from './badge.component';\n\n@NgModule({\n imports: [CommonModule, IconComponentModule, MatTooltipModule, BadgeComponent],\n exports: [BadgeComponent],\n})\nexport class BadgeComponentModule {}\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-badge.mjs","sources":["../../../components/badge/badge.model.ts","../../../components/badge/badge.component.ts","../../../components/badge/badge.component.html","../../../components/badge/badge.component.module.ts","../../../components/badge/testgorilla-tgo-ui-components-badge.ts"],"sourcesContent":["export type BadgeVariant = 'primary' | 'secondary' | 'notification' | 'primary-ai' | 'secondary-ai';\nexport type BadgeColor =\n | 'red'\n | 'grey-medium'\n | 'teal'\n | 'yellow'\n | 'petrol'\n | 'teal-60w'\n | 'petrol-90w'\n | 'petrol-60w'\n | 'grey-dark'\n | 'blue-20'\n | 'blue-40'\n | 'pink-30'\n | 'blue-10';\n\nexport enum BadgeColorEnum {\n RED = 'red',\n GREY_MEDIUM = 'grey-medium',\n TEAL = 'teal',\n YELLOW = 'yellow',\n PETROL = 'petrol',\n TEAL_60W = 'teal-60w',\n PETROL_90W = 'petrol-90w',\n PETROL_60W = 'petrol-60w',\n GREY_DARK = 'grey-dark',\n BLUE_20 = 'blue-20',\n BLUE_40 = 'blue-40',\n}\n\nexport type RebrandBadgeColor =\n | 'success'\n | 'warning'\n | 'negative'\n | 'info'\n | 'brand'\n | 'neutral'\n | 'blue-20'\n | 'blue-40'\n | 'pink-30'\n | 'pink-50'\n | 'blue-10'\n | 'grey-10'\n | 'grey-20'\n | 'grey-30';\n\nexport enum RebrandBadgeColorEnum {\n SUCCESS = 'success',\n WARNING = 'warning',\n NEGATIVE = 'negative',\n INFO = 'info',\n BRAND = 'brand',\n NEUTRAL = 'neutral',\n BLUE_40 = 'blue-40',\n BLUE_20 = 'blue-20',\n PINK_30 = 'pink-30',\n PINK_50 = 'pink-50',\n BLUE_10 = 'blue-10',\n GREY_30 = 'grey-30',\n GREY_20 = 'grey-20',\n GREY_10 = 'grey-10',\n}\n\nexport enum BadgeVariantEnum {\n PRIMARY = 'primary',\n PRIMARY_AI = 'primary-ai',\n SECONDARY = 'secondary',\n SECONDARY_AI = 'secondary-ai',\n NOTIFICATION = 'notification',\n}\n","import { NgTemplateOutlet, SlicePipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Inject, Input, Optional, input } from '@angular/core';\nimport { MatTooltip } from '@angular/material/tooltip';\n\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { IconColor, IconName, IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\n\nimport {\n BadgeColor,\n BadgeColorEnum,\n BadgeVariant,\n BadgeVariantEnum,\n RebrandBadgeColor,\n RebrandBadgeColorEnum,\n} from './badge.model';\n\n@Component({\n selector: 'ui-badge',\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './badge.component.html',\n styleUrls: ['./badge.component.scss'],\n imports: [MatTooltip, IconComponentModule, NgTemplateOutlet, SlicePipe],\n})\nexport class BadgeComponent {\n /**\n * The label to be displayed on the badge.\n * @type {string}\n * @memberof BadgeComponent\n */\n @Input() label = '';\n\n /**\n * A static label always displayed after the main label, never truncated.\n * Intended for short suffixes (max 4 chars, e.g. \"100%\").\n * When the main label is truncated, the tooltip shows both labels in full.\n * @type {string}\n * @memberof BadgeComponent\n */\n @Input() staticLabel = '';\n\n /**\n * The icon name to be displayed on the badge.\n * @type {IconName}\n * @memberof BadgeComponent\n */\n @Input() icon: IconName = '';\n\n /**\n * Override color for the leading icon. Accepts any value the `ui-icon`\n * `color` input accepts (named token, hex, or CSS custom property).\n * When unset, falls back to the auto-derived color based on the badge background.\n */\n iconColor = input<string | undefined>(undefined);\n\n /**\n * Optional trailing icon, rendered after the label/static label on the primary variant.\n */\n trailingIcon = input<IconName>('');\n\n /**\n * Override color for the trailing icon. Accepts any value the `ui-icon`\n * `color` input accepts (named token, hex, or CSS custom property).\n * When unset, falls back to the auto-derived color based on the badge background.\n */\n trailingIconColor = input<string | undefined>(undefined);\n\n /**\n * The color of the badge. Defaults to 'petrol'.\n * @type {BadgeColor}\n * @memberof BadgeComponent\n */\n @Input() color: BadgeColor = 'petrol';\n\n /**\n * The variant of the badge. Defaults to 'primary'.\n * @type {BadgeVariant}\n * @memberof BadgeComponent\n */\n @Input() variant: BadgeVariant = 'primary';\n\n /**\n * The amount of notifications to be displayed on the badge.\n * @type {number}\n * @memberof BadgeComponent\n */\n @Input() notificationsAmount = 0;\n\n /**\n *\n * Defines the application theme\n *\n * @type {ApplicationTheme}\n * @memberof BadgeComponent\n */\n @Input() applicationTheme: ApplicationTheme = 'light';\n\n /**\n * The color of the badge on new theme. Defaults to 'brand'.\n * @type {RebrandBadgeColor}\n * @memberof BadgeComponent\n */\n @Input() rebrandColor: RebrandBadgeColor = 'brand';\n\n @Input() truncateLabel = true;\n\n /**\n * Whether to enable the animation when label changes from empty to having content.\n * @type {boolean}\n * @memberof BadgeComponent\n */\n @Input() enableAnimation = false;\n\n protected badgeVariant = BadgeVariantEnum;\n private readonly darkColors: string[] = [\n BadgeColorEnum.GREY_MEDIUM,\n BadgeColorEnum.PETROL_90W,\n BadgeColorEnum.TEAL_60W,\n BadgeColorEnum.PETROL_60W,\n RebrandBadgeColorEnum.SUCCESS,\n RebrandBadgeColorEnum.INFO,\n RebrandBadgeColorEnum.BRAND,\n RebrandBadgeColorEnum.NEUTRAL,\n RebrandBadgeColorEnum.NEGATIVE,\n RebrandBadgeColorEnum.WARNING,\n RebrandBadgeColorEnum.BLUE_20,\n RebrandBadgeColorEnum.PINK_30,\n RebrandBadgeColorEnum.BLUE_10,\n RebrandBadgeColorEnum.GREY_20,\n ];\n\n constructor(\n @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n ) {\n if (defaultAppTheme) {\n this.applicationTheme = defaultAppTheme;\n }\n }\n\n protected get autoIconColor(): IconColor {\n return this.darkColors.includes(this.isClassicTheme ? this.color : this.rebrandColor) ? 'black' : 'white';\n }\n\n protected get resolvedIconColor(): IconColor {\n return this.iconColor() ?? this.autoIconColor;\n }\n\n protected get resolvedTrailingIconColor(): IconColor {\n return this.trailingIconColor() ?? this.autoIconColor;\n }\n\n protected get isClassicTheme(): boolean {\n return this.applicationTheme === 'classic';\n }\n}\n","<div\n [class]=\"'badge badge-container-' + variant\"\n [class.no-label]=\"!label && !staticLabel && !trailingIcon()\"\n [attr.aria-label]=\"label + (staticLabel ? ' ' + staticLabel : '')\"\n [attr.theme]=\"applicationTheme\"\n [attr.color]=\"isClassicTheme ? color : rebrandColor\"\n [matTooltip]=\"\n label.length > 25 - (staticLabel.length < 4 ? staticLabel.length : 4)\n ? label + (staticLabel ? ' ' + staticLabel : '')\n : ''\n \"\n [matTooltipClass]=\"applicationTheme\"\n>\n @switch (variant) {\n @case (badgeVariant.PRIMARY) {\n @if (icon) {\n <ui-icon\n [class.badge-icon]=\"!!label || !!staticLabel || !!trailingIcon\"\n [name]=\"icon\"\n [color]=\"resolvedIconColor\"\n ></ui-icon>\n }\n }\n @case (badgeVariant.PRIMARY_AI) {\n <ng-container [ngTemplateOutlet]=\"aiIconTpl\"></ng-container>\n }\n @case (badgeVariant.SECONDARY_AI) {\n <ng-container [ngTemplateOutlet]=\"aiIconTpl\"></ng-container>\n }\n @case (badgeVariant.SECONDARY) {\n <div class=\"point\" [attr.color]=\"isClassicTheme ? color : rebrandColor\"></div>\n }\n @case (badgeVariant.NOTIFICATION) {\n <div class=\"number-notification\">{{ notificationsAmount }}</div>\n }\n }\n @if (variant !== badgeVariant.NOTIFICATION) {\n <div class=\"label\" [class.empty]=\"!label && !staticLabel\" [class.animated]=\"enableAnimation\">\n {{\n label.length > 25 - (staticLabel.length < 4 ? staticLabel.length : 4) && truncateLabel\n ? (label | slice: 0 : 25 - (staticLabel.length < 4 ? staticLabel.length : 4)) + '...'\n : label\n }}\n </div>\n }\n @if (staticLabel && variant !== badgeVariant.NOTIFICATION) {\n <span class=\"static-label\">{{ staticLabel | slice: 0 : 4 }}</span>\n }\n @if (trailingIcon() && variant === badgeVariant.PRIMARY) {\n <ui-icon class=\"badge-icon-trailing\" [name]=\"trailingIcon()\" [color]=\"resolvedTrailingIconColor\"></ui-icon>\n }\n</div>\n\n<ng-template #aiIconTpl>\n <ui-icon class=\"badge-icon\" [name]=\"'Sparkle-in-line'\" [color]=\"'ai'\"></ui-icon>\n</ng-template>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\n\nimport { BadgeComponent } from './badge.component';\n\n@NgModule({\n imports: [CommonModule, IconComponentModule, MatTooltipModule, BadgeComponent],\n exports: [BadgeComponent],\n})\nexport class BadgeComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -11,14 +11,15 @@ class PopoverComponent {
|
|
|
11
11
|
this.templateRef = input(null, ...(ngDevMode ? [{ debugName: "templateRef" }] : /* istanbul ignore next */ []));
|
|
12
12
|
this.ctx = input({}, ...(ngDevMode ? [{ debugName: "ctx" }] : /* istanbul ignore next */ []));
|
|
13
13
|
this.popoverCard = input(true, ...(ngDevMode ? [{ debugName: "popoverCard" }] : /* istanbul ignore next */ []));
|
|
14
|
+
this.popoverCardSize = input('medium', ...(ngDevMode ? [{ debugName: "popoverCardSize" }] : /* istanbul ignore next */ []));
|
|
14
15
|
}
|
|
15
16
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PopoverComponent, isStandalone: true, selector: "ui-popover", inputs: { templateRef: { classPropertyName: "templateRef", publicName: "templateRef", isSignal: true, isRequired: false, transformFunction: null }, ctx: { classPropertyName: "ctx", publicName: "ctx", isSignal: true, isRequired: false, transformFunction: null }, popoverCard: { classPropertyName: "popoverCard", publicName: "popoverCard", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (templateRef()) {\n @if (popoverCard()) {\n <ui-card>\n <ng-container *ngTemplateOutlet=\"templateRef(); context: ctx()\"></ng-container>\n </ui-card>\n } @else {\n <ng-container *ngTemplateOutlet=\"templateRef(); context: ctx()\"></ng-container>\n }\n}\n", styles: [":host{display:block;pointer-events:auto;animation:popover-enter .15s ease-out}@keyframes popover-enter{0%{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CardComponentModule }, { kind: "component", type: i1.CardComponent, selector: "ui-card", inputs: ["size", "sizeVariant", "variant", "applicationTheme", "errors", "errorsSize", "selected", "allowSelect", "allowFocus"], outputs: ["cardSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
17
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PopoverComponent, isStandalone: true, selector: "ui-popover", inputs: { templateRef: { classPropertyName: "templateRef", publicName: "templateRef", isSignal: true, isRequired: false, transformFunction: null }, ctx: { classPropertyName: "ctx", publicName: "ctx", isSignal: true, isRequired: false, transformFunction: null }, popoverCard: { classPropertyName: "popoverCard", publicName: "popoverCard", isSignal: true, isRequired: false, transformFunction: null }, popoverCardSize: { classPropertyName: "popoverCardSize", publicName: "popoverCardSize", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (templateRef()) {\n @if (popoverCard()) {\n <ui-card [size]=\"popoverCardSize()\">\n <ng-container *ngTemplateOutlet=\"templateRef(); context: ctx()\"></ng-container>\n </ui-card>\n } @else {\n <ng-container *ngTemplateOutlet=\"templateRef(); context: ctx()\"></ng-container>\n }\n}\n", styles: [":host{display:block;pointer-events:auto;animation:popover-enter .15s ease-out}@keyframes popover-enter{0%{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CardComponentModule }, { kind: "component", type: i1.CardComponent, selector: "ui-card", inputs: ["size", "sizeVariant", "variant", "applicationTheme", "errors", "errorsSize", "selected", "allowSelect", "allowFocus"], outputs: ["cardSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
17
18
|
}
|
|
18
19
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PopoverComponent, decorators: [{
|
|
19
20
|
type: Component,
|
|
20
|
-
args: [{ selector: 'ui-popover', standalone: true, imports: [NgTemplateOutlet, CardComponentModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (templateRef()) {\n @if (popoverCard()) {\n <ui-card>\n <ng-container *ngTemplateOutlet=\"templateRef(); context: ctx()\"></ng-container>\n </ui-card>\n } @else {\n <ng-container *ngTemplateOutlet=\"templateRef(); context: ctx()\"></ng-container>\n }\n}\n", styles: [":host{display:block;pointer-events:auto;animation:popover-enter .15s ease-out}@keyframes popover-enter{0%{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}\n"] }]
|
|
21
|
-
}], propDecorators: { templateRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateRef", required: false }] }], ctx: [{ type: i0.Input, args: [{ isSignal: true, alias: "ctx", required: false }] }], popoverCard: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverCard", required: false }] }] } });
|
|
21
|
+
args: [{ selector: 'ui-popover', standalone: true, imports: [NgTemplateOutlet, CardComponentModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (templateRef()) {\n @if (popoverCard()) {\n <ui-card [size]=\"popoverCardSize()\">\n <ng-container *ngTemplateOutlet=\"templateRef(); context: ctx()\"></ng-container>\n </ui-card>\n } @else {\n <ng-container *ngTemplateOutlet=\"templateRef(); context: ctx()\"></ng-container>\n }\n}\n", styles: [":host{display:block;pointer-events:auto;animation:popover-enter .15s ease-out}@keyframes popover-enter{0%{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}\n"] }]
|
|
22
|
+
}], propDecorators: { templateRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateRef", required: false }] }], ctx: [{ type: i0.Input, args: [{ isSignal: true, alias: "ctx", required: false }] }], popoverCard: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverCard", required: false }] }], popoverCardSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverCardSize", required: false }] }] } });
|
|
22
23
|
|
|
23
24
|
class PopoverDirective {
|
|
24
25
|
constructor() {
|
|
@@ -27,6 +28,7 @@ class PopoverDirective {
|
|
|
27
28
|
this.popoverAlign = input('center', ...(ngDevMode ? [{ debugName: "popoverAlign" }] : /* istanbul ignore next */ []));
|
|
28
29
|
this.popoverOpen = input(false, ...(ngDevMode ? [{ debugName: "popoverOpen" }] : /* istanbul ignore next */ []));
|
|
29
30
|
this.popoverCard = input(true, ...(ngDevMode ? [{ debugName: "popoverCard" }] : /* istanbul ignore next */ []));
|
|
31
|
+
this.popoverCardSize = input('medium', ...(ngDevMode ? [{ debugName: "popoverCardSize" }] : /* istanbul ignore next */ []));
|
|
30
32
|
this.uiPopoverDisabled = input(false, ...(ngDevMode ? [{ debugName: "uiPopoverDisabled" }] : /* istanbul ignore next */ []));
|
|
31
33
|
this.overlay = inject(Overlay);
|
|
32
34
|
this.elementRef = inject(ElementRef);
|
|
@@ -61,6 +63,7 @@ class PopoverDirective {
|
|
|
61
63
|
ref.setInput('templateRef', this.uiPopover());
|
|
62
64
|
ref.setInput('ctx', { close: () => this.close() });
|
|
63
65
|
ref.setInput('popoverCard', this.popoverCard());
|
|
66
|
+
ref.setInput('popoverCardSize', this.popoverCardSize());
|
|
64
67
|
const el = overlayRef.overlayElement;
|
|
65
68
|
const enter = () => this.ngZone.run(() => this.cancelClose());
|
|
66
69
|
const leave = () => this.ngZone.run(() => this.scheduleClose());
|
|
@@ -125,7 +128,7 @@ class PopoverDirective {
|
|
|
125
128
|
this.overlayRef?.dispose();
|
|
126
129
|
}
|
|
127
130
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
128
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.19", type: PopoverDirective, isStandalone: true, selector: "[uiPopover]", inputs: { uiPopover: { classPropertyName: "uiPopover", publicName: "uiPopover", isSignal: true, isRequired: true, transformFunction: null }, popoverOffset: { classPropertyName: "popoverOffset", publicName: "popoverOffset", isSignal: true, isRequired: false, transformFunction: null }, popoverAlign: { classPropertyName: "popoverAlign", publicName: "popoverAlign", isSignal: true, isRequired: false, transformFunction: null }, popoverOpen: { classPropertyName: "popoverOpen", publicName: "popoverOpen", isSignal: true, isRequired: false, transformFunction: null }, popoverCard: { classPropertyName: "popoverCard", publicName: "popoverCard", isSignal: true, isRequired: false, transformFunction: null }, uiPopoverDisabled: { classPropertyName: "uiPopoverDisabled", publicName: "uiPopoverDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 }); }
|
|
131
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.19", type: PopoverDirective, isStandalone: true, selector: "[uiPopover]", inputs: { uiPopover: { classPropertyName: "uiPopover", publicName: "uiPopover", isSignal: true, isRequired: true, transformFunction: null }, popoverOffset: { classPropertyName: "popoverOffset", publicName: "popoverOffset", isSignal: true, isRequired: false, transformFunction: null }, popoverAlign: { classPropertyName: "popoverAlign", publicName: "popoverAlign", isSignal: true, isRequired: false, transformFunction: null }, popoverOpen: { classPropertyName: "popoverOpen", publicName: "popoverOpen", isSignal: true, isRequired: false, transformFunction: null }, popoverCard: { classPropertyName: "popoverCard", publicName: "popoverCard", isSignal: true, isRequired: false, transformFunction: null }, popoverCardSize: { classPropertyName: "popoverCardSize", publicName: "popoverCardSize", isSignal: true, isRequired: false, transformFunction: null }, uiPopoverDisabled: { classPropertyName: "uiPopoverDisabled", publicName: "uiPopoverDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 }); }
|
|
129
132
|
}
|
|
130
133
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PopoverDirective, decorators: [{
|
|
131
134
|
type: Directive,
|
|
@@ -133,7 +136,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
|
|
|
133
136
|
selector: '[uiPopover]',
|
|
134
137
|
standalone: true,
|
|
135
138
|
}]
|
|
136
|
-
}], propDecorators: { uiPopover: [{ type: i0.Input, args: [{ isSignal: true, alias: "uiPopover", required: true }] }], popoverOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverOffset", required: false }] }], popoverAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverAlign", required: false }] }], popoverOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverOpen", required: false }] }], popoverCard: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverCard", required: false }] }], uiPopoverDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "uiPopoverDisabled", required: false }] }], onMouseEnter: [{
|
|
139
|
+
}], propDecorators: { uiPopover: [{ type: i0.Input, args: [{ isSignal: true, alias: "uiPopover", required: true }] }], popoverOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverOffset", required: false }] }], popoverAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverAlign", required: false }] }], popoverOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverOpen", required: false }] }], popoverCard: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverCard", required: false }] }], popoverCardSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverCardSize", required: false }] }], uiPopoverDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "uiPopoverDisabled", required: false }] }], onMouseEnter: [{
|
|
137
140
|
type: HostListener,
|
|
138
141
|
args: ['mouseenter']
|
|
139
142
|
}], onMouseLeave: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"testgorilla-tgo-ui-components-popover.mjs","sources":["../../../components/popover/popover.component.ts","../../../components/popover/popover.component.html","../../../components/popover/popover.directive.ts","../../../components/popover/public-api.ts","../../../components/popover/testgorilla-tgo-ui-components-popover.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, input, TemplateRef } from '@angular/core';\n\nimport { CardComponentModule } from '@testgorilla/tgo-ui/components/card';\n\n@Component({\n selector: 'ui-popover',\n standalone: true,\n imports: [NgTemplateOutlet, CardComponentModule],\n templateUrl: './popover.component.html',\n styleUrls: ['./popover.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PopoverComponent {\n templateRef = input<TemplateRef<unknown> | null>(null);\n ctx = input<Record<string, unknown>>({});\n popoverCard = input(true);\n}\n","@if (templateRef()) {\n @if (popoverCard()) {\n <ui-card>\n <ng-container *ngTemplateOutlet=\"templateRef(); context: ctx()\"></ng-container>\n </ui-card>\n } @else {\n <ng-container *ngTemplateOutlet=\"templateRef(); context: ctx()\"></ng-container>\n }\n}\n","import { HorizontalConnectionPos, Overlay, OverlayRef } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport {\n Directive,\n ElementRef,\n HostListener,\n inject,\n Injector,\n input,\n NgZone,\n OnDestroy,\n OnInit,\n TemplateRef,\n} from '@angular/core';\n\nimport { PopoverComponent } from './popover.component';\n\n@Directive({\n selector: '[uiPopover]',\n standalone: true,\n})\nexport class PopoverDirective implements OnInit, OnDestroy {\n uiPopover = input.required<TemplateRef<unknown>>();\n popoverOffset = input(4);\n popoverAlign = input<HorizontalConnectionPos>('center');\n popoverOpen = input(false);\n popoverCard = input(true);\n uiPopoverDisabled = input(false);\n\n private readonly overlay = inject(Overlay);\n private readonly elementRef = inject(ElementRef);\n private readonly injector = inject(Injector);\n private readonly ngZone = inject(NgZone);\n\n private overlayRef: OverlayRef | null = null;\n private openTimeout: ReturnType<typeof setTimeout> | null = null;\n private closeTimeout: ReturnType<typeof setTimeout> | null = null;\n private overlayListeners: { enter: () => void; leave: () => void } | null = null;\n\n @HostListener('mouseenter')\n onMouseEnter(): void {\n if (this.uiPopoverDisabled()) {\n return;\n }\n this.cancelClose();\n this.scheduleOpen();\n }\n\n @HostListener('mouseleave')\n onMouseLeave(): void {\n this.cancelOpen();\n this.scheduleClose();\n }\n\n private open(): void {\n if (!this.overlayRef) {\n this.createOverlay();\n }\n\n const overlayRef = this.overlayRef;\n if (!overlayRef || overlayRef.hasAttached()) {\n return;\n }\n\n const portal = new ComponentPortal(PopoverComponent, null, this.injector);\n const ref = overlayRef.attach(portal);\n ref.setInput('templateRef', this.uiPopover());\n ref.setInput('ctx', { close: () => this.close() });\n ref.setInput('popoverCard', this.popoverCard());\n\n const el = overlayRef.overlayElement;\n const enter = (): void => this.ngZone.run(() => this.cancelClose());\n const leave = (): void => this.ngZone.run(() => this.scheduleClose());\n el.addEventListener('mouseenter', enter);\n el.addEventListener('mouseleave', leave);\n this.overlayListeners = { enter, leave };\n }\n\n private createOverlay(): void {\n const align = this.popoverAlign();\n const positionStrategy = this.overlay\n .position()\n .flexibleConnectedTo(this.elementRef)\n .withPositions([\n { originX: align, originY: 'bottom', overlayX: align, overlayY: 'top', offsetY: this.popoverOffset() },\n { originX: align, originY: 'top', overlayX: align, overlayY: 'bottom', offsetY: -this.popoverOffset() },\n ]);\n\n this.overlayRef = this.overlay.create({\n positionStrategy,\n scrollStrategy: this.overlay.scrollStrategies.reposition(),\n hasBackdrop: false,\n });\n }\n\n private scheduleOpen(): void {\n this.openTimeout = setTimeout(() => this.open(), 100);\n }\n\n private cancelOpen(): void {\n if (this.openTimeout) {\n clearTimeout(this.openTimeout);\n this.openTimeout = null;\n }\n }\n\n private scheduleClose(): void {\n this.closeTimeout = setTimeout(() => this.close(), 150);\n }\n\n private cancelClose(): void {\n if (this.closeTimeout) {\n clearTimeout(this.closeTimeout);\n this.closeTimeout = null;\n }\n }\n\n private close(): void {\n if (!this.overlayRef) {\n return;\n }\n\n if (this.overlayListeners) {\n const el = this.overlayRef.overlayElement;\n el.removeEventListener('mouseenter', this.overlayListeners.enter);\n el.removeEventListener('mouseleave', this.overlayListeners.leave);\n this.overlayListeners = null;\n }\n\n this.overlayRef.detach();\n }\n\n ngOnInit(): void {\n if (this.popoverOpen() && !this.uiPopoverDisabled()) {\n this.open();\n }\n }\n\n ngOnDestroy(): void {\n this.cancelOpen();\n this.cancelClose();\n this.close();\n this.overlayRef?.dispose();\n }\n}\n","export * from './popover.directive';\n// PopoverComponent is internal — not part of the public API\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-popover.mjs","sources":["../../../components/popover/popover.component.ts","../../../components/popover/popover.component.html","../../../components/popover/popover.directive.ts","../../../components/popover/public-api.ts","../../../components/popover/testgorilla-tgo-ui-components-popover.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, input, TemplateRef } from '@angular/core';\n\nimport { CardComponentModule, CardSize } from '@testgorilla/tgo-ui/components/card';\n\n@Component({\n selector: 'ui-popover',\n standalone: true,\n imports: [NgTemplateOutlet, CardComponentModule],\n templateUrl: './popover.component.html',\n styleUrls: ['./popover.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PopoverComponent {\n templateRef = input<TemplateRef<unknown> | null>(null);\n ctx = input<Record<string, unknown>>({});\n popoverCard = input(true);\n popoverCardSize = input<CardSize>('medium');\n}\n","@if (templateRef()) {\n @if (popoverCard()) {\n <ui-card [size]=\"popoverCardSize()\">\n <ng-container *ngTemplateOutlet=\"templateRef(); context: ctx()\"></ng-container>\n </ui-card>\n } @else {\n <ng-container *ngTemplateOutlet=\"templateRef(); context: ctx()\"></ng-container>\n }\n}\n","import { HorizontalConnectionPos, Overlay, OverlayRef } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport {\n Directive,\n ElementRef,\n HostListener,\n inject,\n Injector,\n input,\n NgZone,\n OnDestroy,\n OnInit,\n TemplateRef,\n} from '@angular/core';\n\nimport { CardSize } from '@testgorilla/tgo-ui/components/card';\n\nimport { PopoverComponent } from './popover.component';\n\n@Directive({\n selector: '[uiPopover]',\n standalone: true,\n})\nexport class PopoverDirective implements OnInit, OnDestroy {\n uiPopover = input.required<TemplateRef<unknown>>();\n popoverOffset = input(4);\n popoverAlign = input<HorizontalConnectionPos>('center');\n popoverOpen = input(false);\n popoverCard = input(true);\n popoverCardSize = input<CardSize>('medium');\n uiPopoverDisabled = input(false);\n\n private readonly overlay = inject(Overlay);\n private readonly elementRef = inject(ElementRef);\n private readonly injector = inject(Injector);\n private readonly ngZone = inject(NgZone);\n\n private overlayRef: OverlayRef | null = null;\n private openTimeout: ReturnType<typeof setTimeout> | null = null;\n private closeTimeout: ReturnType<typeof setTimeout> | null = null;\n private overlayListeners: { enter: () => void; leave: () => void } | null = null;\n\n @HostListener('mouseenter')\n onMouseEnter(): void {\n if (this.uiPopoverDisabled()) {\n return;\n }\n this.cancelClose();\n this.scheduleOpen();\n }\n\n @HostListener('mouseleave')\n onMouseLeave(): void {\n this.cancelOpen();\n this.scheduleClose();\n }\n\n private open(): void {\n if (!this.overlayRef) {\n this.createOverlay();\n }\n\n const overlayRef = this.overlayRef;\n if (!overlayRef || overlayRef.hasAttached()) {\n return;\n }\n\n const portal = new ComponentPortal(PopoverComponent, null, this.injector);\n const ref = overlayRef.attach(portal);\n ref.setInput('templateRef', this.uiPopover());\n ref.setInput('ctx', { close: () => this.close() });\n ref.setInput('popoverCard', this.popoverCard());\n ref.setInput('popoverCardSize', this.popoverCardSize());\n\n const el = overlayRef.overlayElement;\n const enter = (): void => this.ngZone.run(() => this.cancelClose());\n const leave = (): void => this.ngZone.run(() => this.scheduleClose());\n el.addEventListener('mouseenter', enter);\n el.addEventListener('mouseleave', leave);\n this.overlayListeners = { enter, leave };\n }\n\n private createOverlay(): void {\n const align = this.popoverAlign();\n const positionStrategy = this.overlay\n .position()\n .flexibleConnectedTo(this.elementRef)\n .withPositions([\n { originX: align, originY: 'bottom', overlayX: align, overlayY: 'top', offsetY: this.popoverOffset() },\n { originX: align, originY: 'top', overlayX: align, overlayY: 'bottom', offsetY: -this.popoverOffset() },\n ]);\n\n this.overlayRef = this.overlay.create({\n positionStrategy,\n scrollStrategy: this.overlay.scrollStrategies.reposition(),\n hasBackdrop: false,\n });\n }\n\n private scheduleOpen(): void {\n this.openTimeout = setTimeout(() => this.open(), 100);\n }\n\n private cancelOpen(): void {\n if (this.openTimeout) {\n clearTimeout(this.openTimeout);\n this.openTimeout = null;\n }\n }\n\n private scheduleClose(): void {\n this.closeTimeout = setTimeout(() => this.close(), 150);\n }\n\n private cancelClose(): void {\n if (this.closeTimeout) {\n clearTimeout(this.closeTimeout);\n this.closeTimeout = null;\n }\n }\n\n private close(): void {\n if (!this.overlayRef) {\n return;\n }\n\n if (this.overlayListeners) {\n const el = this.overlayRef.overlayElement;\n el.removeEventListener('mouseenter', this.overlayListeners.enter);\n el.removeEventListener('mouseleave', this.overlayListeners.leave);\n this.overlayListeners = null;\n }\n\n this.overlayRef.detach();\n }\n\n ngOnInit(): void {\n if (this.popoverOpen() && !this.uiPopoverDisabled()) {\n this.open();\n }\n }\n\n ngOnDestroy(): void {\n this.cancelOpen();\n this.cancelClose();\n this.close();\n this.overlayRef?.dispose();\n }\n}\n","export * from './popover.directive';\n// PopoverComponent is internal — not part of the public API\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;MAaa,gBAAgB,CAAA;AAR7B,IAAA,WAAA,GAAA;AASE,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAA8B,IAAI,kFAAC;AACtD,QAAA,IAAA,CAAA,GAAG,GAAG,KAAK,CAA0B,EAAE,0EAAC;AACxC,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAC,IAAI,kFAAC;AACzB,QAAA,IAAA,CAAA,eAAe,GAAG,KAAK,CAAW,QAAQ,sFAAC;AAC5C,IAAA;+GALY,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAhB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,GAAA,EAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECb7B,mTASA,EAAA,MAAA,EAAA,CAAA,6MAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDDY,gBAAgB,mJAAE,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,aAAA,EAAA,SAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,YAAA,EAAA,UAAA,EAAA,aAAA,EAAA,YAAA,CAAA,EAAA,OAAA,EAAA,CAAA,cAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAKpC,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAR5B,SAAS;+BACE,YAAY,EAAA,UAAA,EACV,IAAI,EAAA,OAAA,EACP,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,EAAA,eAAA,EAG/B,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,mTAAA,EAAA,MAAA,EAAA,CAAA,6MAAA,CAAA,EAAA;;;MEYpC,gBAAgB,CAAA;AAJ7B,IAAA,WAAA,GAAA;AAKE,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAC,QAAQ,+EAAwB;AAClD,QAAA,IAAA,CAAA,aAAa,GAAG,KAAK,CAAC,CAAC,oFAAC;AACxB,QAAA,IAAA,CAAA,YAAY,GAAG,KAAK,CAA0B,QAAQ,mFAAC;AACvD,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAC,KAAK,kFAAC;AAC1B,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAC,IAAI,kFAAC;AACzB,QAAA,IAAA,CAAA,eAAe,GAAG,KAAK,CAAW,QAAQ,sFAAC;AAC3C,QAAA,IAAA,CAAA,iBAAiB,GAAG,KAAK,CAAC,KAAK,wFAAC;AAEf,QAAA,IAAA,CAAA,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;AACzB,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;AAC/B,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;AAC3B,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;QAEhC,IAAA,CAAA,UAAU,GAAsB,IAAI;QACpC,IAAA,CAAA,WAAW,GAAyC,IAAI;QACxD,IAAA,CAAA,YAAY,GAAyC,IAAI;QACzD,IAAA,CAAA,gBAAgB,GAAoD,IAAI;AA4GjF,IAAA;IAzGC,YAAY,GAAA;AACV,QAAA,IAAI,IAAI,CAAC,iBAAiB,EAAE,EAAE;YAC5B;QACF;QACA,IAAI,CAAC,WAAW,EAAE;QAClB,IAAI,CAAC,YAAY,EAAE;IACrB;IAGA,YAAY,GAAA;QACV,IAAI,CAAC,UAAU,EAAE;QACjB,IAAI,CAAC,aAAa,EAAE;IACtB;IAEQ,IAAI,GAAA;AACV,QAAA,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB,IAAI,CAAC,aAAa,EAAE;QACtB;AAEA,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU;QAClC,IAAI,CAAC,UAAU,IAAI,UAAU,CAAC,WAAW,EAAE,EAAE;YAC3C;QACF;AAEA,QAAA,MAAM,MAAM,GAAG,IAAI,eAAe,CAAC,gBAAgB,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC;QACzE,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC;QACrC,GAAG,CAAC,QAAQ,CAAC,aAAa,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC;AAC7C,QAAA,GAAG,CAAC,QAAQ,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC;QAClD,GAAG,CAAC,QAAQ,CAAC,aAAa,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC;QAC/C,GAAG,CAAC,QAAQ,CAAC,iBAAiB,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC;AAEvD,QAAA,MAAM,EAAE,GAAG,UAAU,CAAC,cAAc;AACpC,QAAA,MAAM,KAAK,GAAG,MAAY,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC;AACnE,QAAA,MAAM,KAAK,GAAG,MAAY,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,aAAa,EAAE,CAAC;AACrE,QAAA,EAAE,CAAC,gBAAgB,CAAC,YAAY,EAAE,KAAK,CAAC;AACxC,QAAA,EAAE,CAAC,gBAAgB,CAAC,YAAY,EAAE,KAAK,CAAC;QACxC,IAAI,CAAC,gBAAgB,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE;IAC1C;IAEQ,aAAa,GAAA;AACnB,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,EAAE;AACjC,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC;AAC3B,aAAA,QAAQ;AACR,aAAA,mBAAmB,CAAC,IAAI,CAAC,UAAU;AACnC,aAAA,aAAa,CAAC;YACb,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,aAAa,EAAE,EAAE;YACtG,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE;AACxG,SAAA,CAAC;QAEJ,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;YACpC,gBAAgB;YAChB,cAAc,EAAE,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,UAAU,EAAE;AAC1D,YAAA,WAAW,EAAE,KAAK;AACnB,SAAA,CAAC;IACJ;IAEQ,YAAY,GAAA;AAClB,QAAA,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC;IACvD;IAEQ,UAAU,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AACpB,YAAA,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC;AAC9B,YAAA,IAAI,CAAC,WAAW,GAAG,IAAI;QACzB;IACF;IAEQ,aAAa,GAAA;AACnB,QAAA,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,EAAE,GAAG,CAAC;IACzD;IAEQ,WAAW,GAAA;AACjB,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACrB,YAAA,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC;AAC/B,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI;QAC1B;IACF;IAEQ,KAAK,GAAA;AACX,QAAA,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB;QACF;AAEA,QAAA,IAAI,IAAI,CAAC,gBAAgB,EAAE;AACzB,YAAA,MAAM,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,cAAc;YACzC,EAAE,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC;YACjE,EAAE,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC;AACjE,YAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI;QAC9B;AAEA,QAAA,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE;IAC1B;IAEA,QAAQ,GAAA;QACN,IAAI,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,EAAE;YACnD,IAAI,CAAC,IAAI,EAAE;QACb;IACF;IAEA,WAAW,GAAA;QACT,IAAI,CAAC,UAAU,EAAE;QACjB,IAAI,CAAC,WAAW,EAAE;QAClB,IAAI,CAAC,KAAK,EAAE;AACZ,QAAA,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE;IAC5B;+GA5HW,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAhB,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,UAAA,EAAA,mBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;4FAAhB,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAJ5B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,aAAa;AACvB,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;;sBAoBE,YAAY;uBAAC,YAAY;;sBASzB,YAAY;uBAAC,YAAY;;;AClD5B;;ACDA;;AAEG;;;;"}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { inject, ElementRef, DestroyRef, input, model, booleanAttribute, computed, viewChildren, signal, afterRenderEffect, afterNextRender, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { MatTooltip } from '@angular/material/tooltip';
|
|
3
4
|
import * as i1 from '@testgorilla/tgo-ui/components/icon';
|
|
4
5
|
import { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
|
|
6
|
+
import { TooltipPositionType } from '@testgorilla/tgo-ui/components/tooltip';
|
|
5
7
|
|
|
6
8
|
class SegmentedToggleComponent {
|
|
7
9
|
constructor() {
|
|
@@ -71,6 +73,19 @@ class SegmentedToggleComponent {
|
|
|
71
73
|
}
|
|
72
74
|
return String(option.value);
|
|
73
75
|
}
|
|
76
|
+
/** Maps the option's Canopy tooltip position (default TOP) to the MatTooltip position. */
|
|
77
|
+
tooltipPosition(option) {
|
|
78
|
+
switch (option.tooltipPosition ?? TooltipPositionType.TOP) {
|
|
79
|
+
case TooltipPositionType.BOTTOM:
|
|
80
|
+
return 'below';
|
|
81
|
+
case TooltipPositionType.LEFT:
|
|
82
|
+
return 'left';
|
|
83
|
+
case TooltipPositionType.RIGHT:
|
|
84
|
+
return 'right';
|
|
85
|
+
case TooltipPositionType.TOP:
|
|
86
|
+
return 'above';
|
|
87
|
+
}
|
|
88
|
+
}
|
|
74
89
|
/** Reads the active button's box and writes it to the indicator signals. */
|
|
75
90
|
measureIndicator() {
|
|
76
91
|
const button = this.optionButtons()[this.selectedIndex()]?.nativeElement;
|
|
@@ -83,15 +98,15 @@ class SegmentedToggleComponent {
|
|
|
83
98
|
this.indicatorHeight.set(button.offsetHeight);
|
|
84
99
|
}
|
|
85
100
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SegmentedToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
86
|
-
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 (click)=\"select(option.value)\"\n >\n @if (option.icon) {\n <ui-icon\n class=\"ui-segmented-toggle__icon\"\n [name]=\"option.icon\"\n size=\"16\"\n [attr.aria-hidden]=\"option.iconAriaLabel ? null : 'true'\"\n ></ui-icon>\n @if (option.iconAriaLabel) {\n <span class=\"ui-segmented-toggle__sr-only\">{{ option.iconAriaLabel }}</span>\n }\n }\n @if (option.label) {\n <span class=\"ui-segmented-toggle__label\">{{ option.label }}</span>\n }\n </button>\n }\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:inline-flex}.ui-segmented-toggle__group{position:relative;display:flex;align-items:center;gap:0;padding:4px;box-shadow:inset 0 0 0 1px #242424;border-radius:999px;background:#fff}.ui-segmented-toggle__indicator{position:absolute;top:0;left:0;z-index:0;border-radius:999px;background:#242424}.ui-segmented-toggle__indicator--hidden{opacity:0}.ui-segmented-toggle__indicator--animated{transition:transform .2s ease,width .2s ease}.ui-segmented-toggle__option{--cnp-icon-color: #242424;position:relative;z-index:1;display:inline-flex;flex:0 0 auto;gap:4px;align-items:center;justify-content:center;margin:0;padding:3px 16px;border:0;border-radius:999px;background:transparent;color:#242424;font:inherit;white-space:nowrap;cursor:pointer}.ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #ffffff;color:#fff}.ui-segmented-toggle__option[aria-pressed=true] .ui-segmented-toggle__label{font-weight:700}:host(.ui-segmented-toggle--brand-active) .ui-segmented-toggle__indicator{background:#d410aa}:host(.ui-segmented-toggle--brand-active) .ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #ffe6fa;color:#ffe6fa}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__group{box-shadow:inset 0 0 0 1px #919191}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__indicator{background:#e9e9e9}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__option,:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #919191;color:#919191;cursor:not-allowed}.ui-segmented-toggle__sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.ui-segmented-toggle__indicator--animated{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i1.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
101
|
+
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 }); }
|
|
87
102
|
}
|
|
88
103
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SegmentedToggleComponent, decorators: [{
|
|
89
104
|
type: Component,
|
|
90
|
-
args: [{ selector: 'ui-segmented-toggle', standalone: true, imports: [IconComponentModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
105
|
+
args: [{ selector: 'ui-segmented-toggle', standalone: true, imports: [IconComponentModule, MatTooltip], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
91
106
|
'[attr.theme]': 'theme()',
|
|
92
107
|
'[class.ui-segmented-toggle--brand-active]': 'selectedOptionIsBrand()',
|
|
93
108
|
'[class.ui-segmented-toggle--disabled]': 'disabled()',
|
|
94
|
-
}, template: "<div class=\"ui-segmented-toggle__group\" role=\"group\" [attr.aria-label]=\"ariaLabel()\">\n <span\n class=\"ui-segmented-toggle__indicator\"\n [class.ui-segmented-toggle__indicator--hidden]=\"selectedIndex() < 0\"\n [class.ui-segmented-toggle__indicator--animated]=\"animated()\"\n aria-hidden=\"true\"\n [style.transform]=\"'translateX(' + indicatorOffset() + 'px) translateY(' + indicatorTop() + 'px)'\"\n [style.width.px]=\"indicatorWidth()\"\n [style.height.px]=\"indicatorHeight()\"\n ></span>\n\n @for (option of options(); track option.value) {\n <button\n #optionButton\n type=\"button\"\n class=\"ui-segmented-toggle__option\"\n [attr.aria-pressed]=\"isSelected(option.value)\"\n [attr.aria-label]=\"fallbackAriaLabel(option)\"\n [disabled]=\"disabled()\"\n (click)=\"select(option.value)\"\n >\n @if (option.icon) {\n <ui-icon\n class=\"ui-segmented-toggle__icon\"\n [name]=\"option.icon\"\n size=\"16\"\n [attr.aria-hidden]=\"option.iconAriaLabel ? null : 'true'\"\n ></ui-icon>\n @if (option.iconAriaLabel) {\n <span class=\"ui-segmented-toggle__sr-only\">{{ option.iconAriaLabel }}</span>\n }\n }\n @if (option.label) {\n <span class=\"ui-segmented-toggle__label\">{{ option.label }}</span>\n }\n </button>\n }\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:inline-flex}.ui-segmented-toggle__group{position:relative;display:flex;align-items:center;gap:0;padding:4px;box-shadow:inset 0 0 0 1px #242424;border-radius:999px;background:#fff}.ui-segmented-toggle__indicator{position:absolute;top:0;left:0;z-index:0;border-radius:999px;background:#242424}.ui-segmented-toggle__indicator--hidden{opacity:0}.ui-segmented-toggle__indicator--animated{transition:transform .2s ease,width .2s ease}.ui-segmented-toggle__option{--cnp-icon-color: #242424;position:relative;z-index:1;display:inline-flex;flex:0 0 auto;gap:4px;align-items:center;justify-content:center;margin:0;padding:3px 16px;border:0;border-radius:999px;background:transparent;color:#242424;font:inherit;white-space:nowrap;cursor:pointer}.ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #ffffff;color:#fff}.ui-segmented-toggle__option[aria-pressed=true] .ui-segmented-toggle__label{font-weight:700}:host(.ui-segmented-toggle--brand-active) .ui-segmented-toggle__indicator{background:#d410aa}:host(.ui-segmented-toggle--brand-active) .ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #ffe6fa;color:#ffe6fa}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__group{box-shadow:inset 0 0 0 1px #919191}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__indicator{background:#e9e9e9}:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__option,:host(.ui-segmented-toggle--disabled) .ui-segmented-toggle__option[aria-pressed=true]{--cnp-icon-color: #919191;color:#919191;cursor:not-allowed}.ui-segmented-toggle__sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.ui-segmented-toggle__indicator--animated{transition:none}}\n"] }]
|
|
109
|
+
}, 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"] }]
|
|
95
110
|
}], 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 }] }] } });
|
|
96
111
|
|
|
97
112
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"testgorilla-tgo-ui-components-segmented-toggle.mjs","sources":["../../../components/segmented-toggle/segmented-toggle.component.ts","../../../components/segmented-toggle/segmented-toggle.component.html","../../../components/segmented-toggle/testgorilla-tgo-ui-components-segmented-toggle.ts"],"sourcesContent":["import {\n afterNextRender,\n afterRenderEffect,\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n DestroyRef,\n ElementRef,\n inject,\n input,\n model,\n signal,\n viewChildren,\n} from '@angular/core';\n\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\n\nimport { SegmentedToggleOption } from './segmented-toggle.model';\n\n@Component({\n selector: 'ui-segmented-toggle',\n standalone: true,\n imports: [IconComponentModule],\n templateUrl: './segmented-toggle.component.html',\n styleUrls: ['./segmented-toggle.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[attr.theme]': 'theme()',\n '[class.ui-segmented-toggle--brand-active]': 'selectedOptionIsBrand()',\n '[class.ui-segmented-toggle--disabled]': 'disabled()',\n },\n})\nexport class SegmentedToggleComponent<T> {\n private readonly hostRef = inject<ElementRef<HTMLElement>>(ElementRef);\n private readonly destroyRef = inject(DestroyRef);\n\n readonly options = input.required<SegmentedToggleOption<T>[]>();\n readonly value = model<T>();\n readonly disabled = input(false, { transform: booleanAttribute });\n readonly ariaLabel = input<string>();\n readonly applicationTheme = input<ApplicationTheme | undefined>(undefined);\n private readonly defaultAppTheme = inject<ApplicationTheme>('CANOPYUI_DEFAULT_APPLICATION_THEME' as never, {\n optional: true,\n });\n readonly theme = computed<ApplicationTheme>(() => this.applicationTheme() ?? this.defaultAppTheme ?? 'light');\n\n /** One ElementRef per segment button; used to measure the active pill geometry. */\n private readonly optionButtons = viewChildren<ElementRef<HTMLButtonElement>>('optionButton');\n\n /** Index of the selected option; -1 when value() matches no option. */\n protected readonly selectedIndex = computed(() => this.options().findIndex(option => option.value === this.value()));\n\n /** True when the currently-selected option is flagged `brand: true`. */\n protected readonly selectedOptionIsBrand = computed(() => this.options()[this.selectedIndex()]?.brand === true);\n\n /** Measured pixel geometry of the active button, driving the sliding indicator. */\n protected readonly indicatorOffset = signal(0);\n protected readonly indicatorTop = signal(0);\n protected readonly indicatorWidth = signal(0);\n protected readonly indicatorHeight = signal(0);\n\n /** Enables the slide transition only after the initial position is painted. */\n protected readonly animated = signal(false);\n\n constructor() {\n // Re-measure after every render that follows a selection or options change.\n afterRenderEffect(() => {\n // Read these so the effect re-runs (post-render) whenever selection changes.\n this.value();\n this.options();\n this.measureIndicator();\n });\n\n // Re-measure on container resize (width changes don't touch any signal).\n afterNextRender(() => {\n // Position the indicator for the initial selection without animating, then\n // enable the slide on the next frame so only user-driven changes animate.\n this.measureIndicator();\n requestAnimationFrame(() => this.animated.set(true));\n\n if (typeof ResizeObserver === 'undefined') {\n return;\n }\n const observer = new ResizeObserver(() => this.measureIndicator());\n observer.observe(this.hostRef.nativeElement);\n this.destroyRef.onDestroy(() => observer.disconnect());\n });\n }\n\n protected select(optionValue: T): void {\n if (this.disabled()) {\n return;\n }\n this.value.set(optionValue);\n }\n\n protected isSelected(optionValue: T): boolean {\n return optionValue === this.value();\n }\n\n /**\n * Last-resort accessible name for a segment. Used only for an icon-only option\n * that provides neither a visible `label` nor an `iconAriaLabel`, so the button\n * is never a nameless control. When a label or icon label is present those name\n * the button and this returns `null` (no `aria-label` attribute).\n */\n protected fallbackAriaLabel(option: SegmentedToggleOption<T>): string | null {\n if (option.label || option.iconAriaLabel) {\n return null;\n }\n return String(option.value);\n }\n\n /** Reads the active button's box and writes it to the indicator signals. */\n private measureIndicator(): void {\n const button = this.optionButtons()[this.selectedIndex()]?.nativeElement;\n if (!button) {\n return;\n }\n this.indicatorOffset.set(button.offsetLeft);\n this.indicatorTop.set(button.offsetTop);\n this.indicatorWidth.set(button.offsetWidth);\n this.indicatorHeight.set(button.offsetHeight);\n }\n}\n","<div class=\"ui-segmented-toggle__group\" role=\"group\" [attr.aria-label]=\"ariaLabel()\">\n <span\n class=\"ui-segmented-toggle__indicator\"\n [class.ui-segmented-toggle__indicator--hidden]=\"selectedIndex() < 0\"\n [class.ui-segmented-toggle__indicator--animated]=\"animated()\"\n aria-hidden=\"true\"\n [style.transform]=\"'translateX(' + indicatorOffset() + 'px) translateY(' + indicatorTop() + 'px)'\"\n [style.width.px]=\"indicatorWidth()\"\n [style.height.px]=\"indicatorHeight()\"\n ></span>\n\n @for (option of options(); track option.value) {\n <button\n #optionButton\n type=\"button\"\n class=\"ui-segmented-toggle__option\"\n [attr.aria-pressed]=\"isSelected(option.value)\"\n [attr.aria-label]=\"fallbackAriaLabel(option)\"\n [disabled]=\"disabled()\"\n (click)=\"select(option.value)\"\n >\n @if (option.icon) {\n <ui-icon\n class=\"ui-segmented-toggle__icon\"\n [name]=\"option.icon\"\n size=\"16\"\n [attr.aria-hidden]=\"option.iconAriaLabel ? null : 'true'\"\n ></ui-icon>\n @if (option.iconAriaLabel) {\n <span class=\"ui-segmented-toggle__sr-only\">{{ option.iconAriaLabel }}</span>\n }\n }\n @if (option.label) {\n <span class=\"ui-segmented-toggle__label\">{{ option.label }}</span>\n }\n </button>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"testgorilla-tgo-ui-components-segmented-toggle.mjs","sources":["../../../components/segmented-toggle/segmented-toggle.component.ts","../../../components/segmented-toggle/segmented-toggle.component.html","../../../components/segmented-toggle/testgorilla-tgo-ui-components-segmented-toggle.ts"],"sourcesContent":["import {\n afterNextRender,\n afterRenderEffect,\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n DestroyRef,\n ElementRef,\n inject,\n input,\n model,\n signal,\n viewChildren,\n} from '@angular/core';\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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"}
|