@testgorilla/tgo-ui 11.22.2 → 12.0.0

package/fesm2022/testgorilla-tgo-ui-components-tag.mjs

@@ -1,276 +1,536 @@
-import { AsyncPipe, CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { input, booleanAttribute, model, inject, computed, output, signal, viewChild, NgZone, effect, afterRenderEffect, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
-import { ReplaySubject, debounceTime, map } from 'rxjs';
-import { IKeyboardEvent, UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';
-import * as i1 from '@testgorilla/tgo-ui/components/icon';
-import { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
-import { MatInputModule } from '@angular/material/input';
-import { TooltipComponentModule } from '@testgorilla/tgo-ui/components/tooltip';
-
-class TagComponent {
-    constructor() {
-        /**
-         * Tag's label
-         *
-         * @memberof TagComponent
-         */
-        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-        /**
-         * Icon
-         *
-         * @type {string}
-         * @memberof TagComponent
-         */
-        this.icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-        /**
-         * Whether to allow the tag to be closed.
-         *
-         * @type {boolean}
-         * @default false
-         * @memberof TagComponent
-         */
-        this.allowClose = input(false, { ...(ngDevMode ? { debugName: "allowClose" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /**
-         * Whether the tag is in read-only mode.
-         *
-         * @type {boolean}
-         * @default false
-         * @memberof TagComponent
-         */
-        this.readOnly = input(false, { ...(ngDevMode ? { debugName: "readOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /**
-         * Whether the tag is selected.
-         *
-         * @type {boolean}
-         * @default false
-         * @memberof TagComponent
-         */
-        this.isSelected = model(false, ...(ngDevMode ? [{ debugName: "isSelected" }] : /* istanbul ignore next */ []));
-        /**
-         * Display icon when is selected
-         *
-         * @type {boolean}
-         * @default false
-         * @memberof TagComponent
-         */
-        this.showIconWhenSelected = input(false, { ...(ngDevMode ? { debugName: "showIconWhenSelected" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /**
-         * Pins the tag to its filled background at rest, without tying that background
-         * to the selected state — pressing the tag never flips its fill. Interactive
-         * states (hover, focus ring, press scale) and the `press` output are unaffected,
-         * so the tag stays clickable; use `readOnly` when it should not be.
-         *
-         * The fill follows the theme: grayscale in `light` / `dark`, petrol in `classic`.
-         *
-         * @type {boolean}
-         * @default false
-         * @memberof TagComponent
-         */
-        this.pinnedBackground = input(false, { ...(ngDevMode ? { debugName: "pinnedBackground" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /**
-         * Clamps the tag to its parent's width, truncating the label, instead of overflowing it.
-         *
-         * Opt-in: enabling it gives the host a real layout box, so `width`, `height` and vertical
-         * margins set on `ui-tag` start applying, bare sibling tags flow inline instead of stacking,
-         * and a tag in an `overflow-x` strip shrinks rather than scrolls (`flex: 0 0 auto` opts out).
-         * Becomes the default in the next major.
-         *
-         * @type {boolean}
-         * @default false
-         * @memberof TagComponent
-         */
-        this.constrainWidth = input(false, { ...(ngDevMode ? { debugName: "constrainWidth" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /**
-         * Specifies whether the element is disabled.
-         *
-         * @type {boolean}
-         * @default false
-         * @memberof TagComponent
-         */
-        this.isDisabled = input(false, { ...(ngDevMode ? { debugName: "isDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /**
-         *
-         * Defines the application theme
-         *
-         * @type {ApplicationTheme | undefined}
-         * @memberof TagComponent
-         *
-         * When not provided, the component falls back to the injected
-         * `CANOPYUI_DEFAULT_APPLICATION_THEME` token (if any), then to `'light'`.
-         */
-        this.applicationTheme = input(undefined, ...(ngDevMode ? [{ debugName: "applicationTheme" }] : /* istanbul ignore next */ []));
-        this.defaultAppTheme = inject('CANOPYUI_DEFAULT_APPLICATION_THEME', { optional: true });
-        this.theme = computed(() => this.applicationTheme() ?? this.defaultAppTheme ?? 'light', ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
-        /**
-         * A string representing the ARIA label for accessibility.
-         * This label is used to provide an accessible name for the input element.
-         * @type {string}
-         * @memberof TagComponent
-         */
-        this.ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-        this.testId = input(null, ...(ngDevMode ? [{ debugName: "testId" }] : /* istanbul ignore next */ []));
-        this.closeTestId = computed(() => (this.testId() ? `${this.testId()}-remove` : null), ...(ngDevMode ? [{ debugName: "closeTestId" }] : /* istanbul ignore next */ []));
-        /**
-         * A string representing the ARIA requirement for accessibility.
-         * This attribute is used to indicate whether an input field is required for form submission.
-         * @type {boolean}
-         * @memberof TagComponent
-         */
-        this.ariaRequired = input(false, { ...(ngDevMode ? { debugName: "ariaRequired" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /**
-         * Whether to show the badge on the tag.
-         * @type {boolean}
-         * @default false
-         * @memberof TagComponent
-         */
-        this.showBadge = input(false, ...(ngDevMode ? [{ debugName: "showBadge" }] : /* istanbul ignore next */ []));
-        /**
-         * The notifications amount to be displayed on the badge.
-         * @type {number}
-         * @default 0
-         * @memberof TagComponent
-         */
-        this.notificationsAmount = input(0, ...(ngDevMode ? [{ debugName: "notificationsAmount" }] : /* istanbul ignore next */ []));
-        /**
-         * Event triggered when the tag should be closed.
-         *
-         * @event
-         * @memberof TagComponent
-         */
-        // eslint-disable-next-line @angular-eslint/no-output-native -- output shadows a native event; rename is breaking, deferred to the breaking-change MAJOR (see plan)
-        this.close = output();
-        /**
-         * Event triggered when a press action occurs.
-         *
-         * @event
-         * @memberof TagComponent
-         */
-        this.press = output();
-        /**
-         * Subject that needs to be triggered when Label input changes, to check if it's truncated
-         * @private
-         * @type {void}
-         * @memberof TagComponent
-         */
-        this.checkLabelEllipsis$ = new ReplaySubject(1);
-        /**
-         * Observable that indicates if the Label is truncated
-         * debounceTime is used to wait for view to be initialized after receiving a new Label input
-         * @protected
-         * @type {boolean}
-         * @memberof TagComponent
-         */
-        this.isEllipseActiveObs$ = this.checkLabelEllipsis$.pipe(debounceTime(100), map(() => {
-            const el = this.labelElement()?.nativeElement;
-            return el ? el.offsetWidth < el.scrollWidth : false;
-        }));
-        this.isHovered = signal(false, ...(ngDevMode ? [{ debugName: "isHovered" }] : /* istanbul ignore next */ []));
-        this.shrink = false;
-        this.iconColor = 'black';
-        this.closeBtnFocused = signal(false, ...(ngDevMode ? [{ debugName: "closeBtnFocused" }] : /* istanbul ignore next */ []));
-        this.labelElement = viewChild('labelElement', ...(ngDevMode ? [{ debugName: "labelElement" }] : /* istanbul ignore next */ []));
-        this.containerElement = viewChild('containerElement', ...(ngDevMode ? [{ debugName: "containerElement" }] : /* istanbul ignore next */ []));
-        this.ngZone = inject(NgZone);
-        this.tabIndex = computed(() => (this.isDisabled() || this.readOnly() ? -1 : 0), ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
-        this.filled = computed(() => this.readOnly() || this.allowClose() || this.isSelected() || this.pinnedBackground(), ...(ngDevMode ? [{ debugName: "filled" }] : /* istanbul ignore next */ []));
-        effect(() => {
-            this.label(); // dep — re-run on label change
-            this.labelElement(); // dep — re-run once @ViewChild resolves
-            this.isLabelEllipseActive();
-        });
-        // With `constrainWidth` the label truncates against the parent, and no input changes when
-        // the parent resizes — so the effect above never re-runs and the tooltip goes stale. Off,
-        // truncation is the label against a fixed cap, and the label is an input.
-        afterRenderEffect({
-            write: onCleanup => {
-                const el = this.containerElement()?.nativeElement;
-                if (!this.constrainWidth() || !el || typeof ResizeObserver === 'undefined') {
-                    return;
-                }
-                const observer = new ResizeObserver(() => this.ngZone.run(() => this.isLabelEllipseActive()));
-                observer.observe(el);
-                onCleanup(() => observer.disconnect());
-            },
-        });
-    }
-    onPress() {
-        if (!this.readOnly() && !this.allowClose()) {
-            const newSelected = this.showIconWhenSelected() ? !this.isSelected() : false;
-            this.isSelected.set(newSelected);
-            this.press.emit(newSelected);
-        }
-    }
-    setHoverState(state) {
-        if (this.theme() === 'classic') {
-            return;
-        }
-        this.isHovered.set(state);
-    }
-    setShrinkState(state) {
-        this.shrink = state;
-    }
-    onClose() {
-        this.close.emit();
-    }
-    isLabelEllipseActive() {
-        this.checkLabelEllipsis$.next();
-    }
-    onKeydown($event) {
-        if (($event.key === IKeyboardEvent.ENTER || $event.key === IKeyboardEvent.SPACE) &&
-            !this.closeBtnFocused()) {
-            this.onPress();
-        }
-        else if (this.closeBtnFocused() &&
-            ($event.key === IKeyboardEvent.ENTER || $event.key === IKeyboardEvent.SPACE)) {
-            this.onClose();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: TagComponent, isStandalone: true, selector: "ui-tag", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, allowClose: { classPropertyName: "allowClose", publicName: "allowClose", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: false, transformFunction: null }, showIconWhenSelected: { classPropertyName: "showIconWhenSelected", publicName: "showIconWhenSelected", isSignal: true, isRequired: false, transformFunction: null }, pinnedBackground: { classPropertyName: "pinnedBackground", publicName: "pinnedBackground", isSignal: true, isRequired: false, transformFunction: null }, constrainWidth: { classPropertyName: "constrainWidth", publicName: "constrainWidth", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, ariaRequired: { classPropertyName: "ariaRequired", publicName: "ariaRequired", isSignal: true, isRequired: false, transformFunction: null }, showBadge: { classPropertyName: "showBadge", publicName: "showBadge", isSignal: true, isRequired: false, transformFunction: null }, notificationsAmount: { classPropertyName: "notificationsAmount", publicName: "notificationsAmount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isSelected: "isSelectedChange", close: "close", press: "press" }, host: { properties: { "class.ui-tag--constrain-width": "constrainWidth()" } }, viewQueries: [{ propertyName: "labelElement", first: true, predicate: ["labelElement"], descendants: true, isSignal: true }, { propertyName: "containerElement", first: true, predicate: ["containerElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tag-wrapper\">\n  <div\n    [matTooltip]=\"(isEllipseActiveObs$ | async) ? label() : ''\"\n    [matTooltipClass]=\"theme()\"\n    [tabindex]=\"tabIndex()\"\n    class=\"tag-container\"\n    #containerElement\n    [attr.data-testid]=\"testId() ?? 'tag--container'\"\n    [attr.theme]=\"theme()\"\n    [class]=\"{\n      filled: filled(),\n      readonly: readOnly(),\n      disabled: isDisabled(),\n      outlined: !isSelected(),\n      shrink,\n    }\"\n    (click)=\"onPress()\"\n    (mouseenter)=\"setHoverState(true)\"\n    (mouseleave)=\"setHoverState(false)\"\n    (mousedown)=\"setShrinkState(true)\"\n    (mouseup)=\"setShrinkState(false)\"\n    (touchstart)=\"setShrinkState(true)\"\n    (touchend)=\"setShrinkState(false)\"\n    (keydown)=\"onKeydown($event)\"\n    [attr.aria-label]=\"ariaLabel() || label()\"\n    [attr.aria-required]=\"ariaRequired()\"\n  >\n    @if (icon()) {\n      <!-- Let ui-icon resolve the hover variant: composing the name here appended instead of\n           replacing, yielding names like `Sparkle-in-line-filled` that exist in no icon set. -->\n      <ui-icon\n        class=\"icon\"\n        [color]=\"iconColor\"\n        [name]=\"icon()\"\n        [filled]=\"isHovered()\"\n        [toggleIconStyle]=\"true\"\n        [applicationTheme]=\"theme()\"\n      ></ui-icon>\n    }\n    @if (isSelected() && showIconWhenSelected()) {\n      <ui-icon [color]=\"iconColor\" class=\"icon\" [name]=\"'Check'\" [applicationTheme]=\"theme()\"></ui-icon>\n    }\n    <span class=\"tag-label\" #labelElement>{{ label() }}</span>\n    <!-- Consumer content after the label. It never shrinks, so the label truncates first. Its own\n         presses are kept from reaching the tag, so a control in here doesn't also press the tag. -->\n    <span\n      class=\"tag-suffix\"\n      (click)=\"$event.stopPropagation()\"\n      (keydown)=\"$event.stopPropagation()\"\n      (mousedown)=\"$event.stopPropagation()\"\n      (touchstart)=\"$event.stopPropagation()\"\n    >\n      <ng-content select=\"[uiTagSuffix]\"></ng-content>\n    </span>\n    @if (showBadge()) {\n      <span class=\"count\" aria-hidden=\"true\">\n        <span class=\"count-dot\">&bull;</span>\n        <span class=\"count-value\">{{ notificationsAmount() }}</span>\n      </span>\n    }\n    @if (allowClose()) {\n      <ui-icon\n        (focus)=\"closeBtnFocused.set(true)\"\n        (blur)=\"closeBtnFocused.set(false)\"\n        [tabindex]=\"tabIndex()\"\n        class=\"delete-icon\"\n        [attr.data-testid]=\"closeTestId()\"\n        [attr.aria-label]=\"'TAG.REMOVE' | uiTranslate | async\"\n        [color]=\"iconColor\"\n        (click)=\"onClose(); $event.stopPropagation()\"\n        [name]=\"'Close'\"\n        [applicationTheme]=\"theme()\"\n      ></ui-icon>\n    }\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.tag-container ui-icon:not(.delete-icon){pointer-events:none}:host .tag-wrapper{max-width:var(--ui-tag-max-width, 264px)}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}:host .tag-container{height:32px;max-width:var(--ui-tag-max-width, 264px);border-radius:4px;display:flex;align-items:center;justify-content:center;padding:0 8px;width:fit-content;cursor:pointer;margin:4px}:host .tag-container:focus-visible{outline:2px solid #242424;animation:focus-ring-animation .4s forwards;outline-offset:2px;position:relative}:host .tag-container:focus-visible:after{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:-2px;left:-2px;outline:2px solid #ffffff;border-radius:4px}:host .tag-container.outlined{border:1px solid #6894a0}:host .tag-container.filled{background:#e9f0f1;border:1px solid #e9f0f1}:host .tag-container.filled:hover{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled:active{background:#a9c2c9;border:1px solid #1b4754}:host .tag-container:hover{background:#f6f6f6;border:1px solid #6894a0}:host .tag-container:active{background:#e9f0f1}:host .tag-container.readonly{pointer-events:none}:host .tag-container.disabled{opacity:.5;border:1px solid #276678;background:#e9f0f1;pointer-events:none}:host .tag-container .tag-label{-webkit-user-select:none;user-select:none;font-size:14px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tag-container .icon{height:16px;width:16px;min-width:16px;margin-right:8px}:host .tag-container .tag-suffix{display:inline-flex;align-items:center;flex-shrink:0;margin-left:8px}:host .tag-container .tag-suffix:empty{display:none}:host .tag-container .delete-icon{display:flex;align-items:center;justify-content:center;margin-left:8px;text-align:center;border-radius:50px}:host .tag-container[theme=dark],:host .tag-container[theme=light]{border-radius:8px;background:#f4f4f4;border:1px solid #e9e9e9;color:#242424}:host .tag-container[theme=dark].outlined:not(.filled),:host .tag-container[theme=light].outlined:not(.filled){background:#fff;border-color:#919191}:host .tag-container[theme=dark].filled.readonly,:host .tag-container[theme=light].filled.readonly{border:none}:host .tag-container[theme=dark]:not(.readonly):not(.disabled):hover,:host .tag-container[theme=light]:not(.readonly):not(.disabled):hover{background:#d3d3d3;border-color:#d3d3d3;color:#242424}:host .tag-container[theme=dark]:not(.readonly):not(.disabled):focus-visible,:host .tag-container[theme=light]:not(.readonly):not(.disabled):focus-visible{outline:2px solid #242424;outline-offset:2px;border-radius:10px;animation:none}:host .tag-container[theme=dark]:not(.readonly):not(.disabled):focus-visible:after,:host .tag-container[theme=light]:not(.readonly):not(.disabled):focus-visible:after{display:none}:host .tag-container[theme=dark].shrink,:host .tag-container[theme=light].shrink{transform:scale(.98)}:host .tag-container[theme=dark].disabled,:host .tag-container[theme=light].disabled{pointer-events:none;--cnp-icon-color: #919191}:host .tag-container[theme=dark].disabled .tag-label,:host .tag-container[theme=dark].disabled .count-dot,:host .tag-container[theme=dark].disabled .count-value,:host .tag-container[theme=light].disabled .tag-label,:host .tag-container[theme=light].disabled .count-dot,:host .tag-container[theme=light].disabled .count-value{color:#919191}:host .tag-container[theme=dark] .count,:host .tag-container[theme=light] .count{display:inline-flex;align-items:center;gap:4px;margin-left:4px;font-size:14px;line-height:20px}:host .tag-container[theme=dark] .count-dot,:host .tag-container[theme=light] .count-dot{color:#666}:host .tag-container[theme=dark] .count-value,:host .tag-container[theme=light] .count-value{color:#242424;font-variant-numeric:tabular-nums}:host .tag-container[theme=dark] .icon,:host .tag-container[theme=light] .icon{margin-right:4px}:host .tag-container[theme=dark] .tag-suffix,:host .tag-container[theme=light] .tag-suffix{margin-left:4px}:host .tag-container[theme=dark] .delete-icon,:host .tag-container[theme=light] .delete-icon{margin-left:4px;border-radius:4px;transition:outline-color .1s;outline:2px solid transparent}:host .tag-container[theme=dark] .delete-icon:focus-visible,:host .tag-container[theme=light] .delete-icon:focus-visible{outline-color:#242424}:host(.ui-tag--constrain-width){display:inline-flex;max-width:min(var(--ui-tag-max-width, 264px),100%);min-width:0}:host(.ui-tag--constrain-width) .tag-wrapper{display:flex;min-width:0;max-width:min(var(--ui-tag-max-width, 264px),100%)}:host(.ui-tag--constrain-width) .tag-container{box-sizing:border-box;min-width:0;max-width:100%}:host(.ui-tag--constrain-width) .tag-label{min-width:0}:host(.ui-tag--constrain-width) .icon,:host(.ui-tag--constrain-width) .tag-suffix,:host(.ui-tag--constrain-width) .delete-icon,:host(.ui-tag--constrain-width) .count{flex-shrink:0}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mat-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\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: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: TagComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-tag', changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class.ui-tag--constrain-width]': 'constrainWidth()' }, imports: [MatTooltip, IconComponentModule, AsyncPipe, UiTranslatePipe], template: "<div class=\"tag-wrapper\">\n  <div\n    [matTooltip]=\"(isEllipseActiveObs$ | async) ? label() : ''\"\n    [matTooltipClass]=\"theme()\"\n    [tabindex]=\"tabIndex()\"\n    class=\"tag-container\"\n    #containerElement\n    [attr.data-testid]=\"testId() ?? 'tag--container'\"\n    [attr.theme]=\"theme()\"\n    [class]=\"{\n      filled: filled(),\n      readonly: readOnly(),\n      disabled: isDisabled(),\n      outlined: !isSelected(),\n      shrink,\n    }\"\n    (click)=\"onPress()\"\n    (mouseenter)=\"setHoverState(true)\"\n    (mouseleave)=\"setHoverState(false)\"\n    (mousedown)=\"setShrinkState(true)\"\n    (mouseup)=\"setShrinkState(false)\"\n    (touchstart)=\"setShrinkState(true)\"\n    (touchend)=\"setShrinkState(false)\"\n    (keydown)=\"onKeydown($event)\"\n    [attr.aria-label]=\"ariaLabel() || label()\"\n    [attr.aria-required]=\"ariaRequired()\"\n  >\n    @if (icon()) {\n      <!-- Let ui-icon resolve the hover variant: composing the name here appended instead of\n           replacing, yielding names like `Sparkle-in-line-filled` that exist in no icon set. -->\n      <ui-icon\n        class=\"icon\"\n        [color]=\"iconColor\"\n        [name]=\"icon()\"\n        [filled]=\"isHovered()\"\n        [toggleIconStyle]=\"true\"\n        [applicationTheme]=\"theme()\"\n      ></ui-icon>\n    }\n    @if (isSelected() && showIconWhenSelected()) {\n      <ui-icon [color]=\"iconColor\" class=\"icon\" [name]=\"'Check'\" [applicationTheme]=\"theme()\"></ui-icon>\n    }\n    <span class=\"tag-label\" #labelElement>{{ label() }}</span>\n    <!-- Consumer content after the label. It never shrinks, so the label truncates first. Its own\n         presses are kept from reaching the tag, so a control in here doesn't also press the tag. -->\n    <span\n      class=\"tag-suffix\"\n      (click)=\"$event.stopPropagation()\"\n      (keydown)=\"$event.stopPropagation()\"\n      (mousedown)=\"$event.stopPropagation()\"\n      (touchstart)=\"$event.stopPropagation()\"\n    >\n      <ng-content select=\"[uiTagSuffix]\"></ng-content>\n    </span>\n    @if (showBadge()) {\n      <span class=\"count\" aria-hidden=\"true\">\n        <span class=\"count-dot\">&bull;</span>\n        <span class=\"count-value\">{{ notificationsAmount() }}</span>\n      </span>\n    }\n    @if (allowClose()) {\n      <ui-icon\n        (focus)=\"closeBtnFocused.set(true)\"\n        (blur)=\"closeBtnFocused.set(false)\"\n        [tabindex]=\"tabIndex()\"\n        class=\"delete-icon\"\n        [attr.data-testid]=\"closeTestId()\"\n        [attr.aria-label]=\"'TAG.REMOVE' | uiTranslate | async\"\n        [color]=\"iconColor\"\n        (click)=\"onClose(); $event.stopPropagation()\"\n        [name]=\"'Close'\"\n        [applicationTheme]=\"theme()\"\n      ></ui-icon>\n    }\n  </div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.tag-container ui-icon:not(.delete-icon){pointer-events:none}:host .tag-wrapper{max-width:var(--ui-tag-max-width, 264px)}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}:host .tag-container{height:32px;max-width:var(--ui-tag-max-width, 264px);border-radius:4px;display:flex;align-items:center;justify-content:center;padding:0 8px;width:fit-content;cursor:pointer;margin:4px}:host .tag-container:focus-visible{outline:2px solid #242424;animation:focus-ring-animation .4s forwards;outline-offset:2px;position:relative}:host .tag-container:focus-visible:after{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:-2px;left:-2px;outline:2px solid #ffffff;border-radius:4px}:host .tag-container.outlined{border:1px solid #6894a0}:host .tag-container.filled{background:#e9f0f1;border:1px solid #e9f0f1}:host .tag-container.filled:hover{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled:active{background:#a9c2c9;border:1px solid #1b4754}:host .tag-container:hover{background:#f6f6f6;border:1px solid #6894a0}:host .tag-container:active{background:#e9f0f1}:host .tag-container.readonly{pointer-events:none}:host .tag-container.disabled{opacity:.5;border:1px solid #276678;background:#e9f0f1;pointer-events:none}:host .tag-container .tag-label{-webkit-user-select:none;user-select:none;font-size:14px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tag-container .icon{height:16px;width:16px;min-width:16px;margin-right:8px}:host .tag-container .tag-suffix{display:inline-flex;align-items:center;flex-shrink:0;margin-left:8px}:host .tag-container .tag-suffix:empty{display:none}:host .tag-container .delete-icon{display:flex;align-items:center;justify-content:center;margin-left:8px;text-align:center;border-radius:50px}:host .tag-container[theme=dark],:host .tag-container[theme=light]{border-radius:8px;background:#f4f4f4;border:1px solid #e9e9e9;color:#242424}:host .tag-container[theme=dark].outlined:not(.filled),:host .tag-container[theme=light].outlined:not(.filled){background:#fff;border-color:#919191}:host .tag-container[theme=dark].filled.readonly,:host .tag-container[theme=light].filled.readonly{border:none}:host .tag-container[theme=dark]:not(.readonly):not(.disabled):hover,:host .tag-container[theme=light]:not(.readonly):not(.disabled):hover{background:#d3d3d3;border-color:#d3d3d3;color:#242424}:host .tag-container[theme=dark]:not(.readonly):not(.disabled):focus-visible,:host .tag-container[theme=light]:not(.readonly):not(.disabled):focus-visible{outline:2px solid #242424;outline-offset:2px;border-radius:10px;animation:none}:host .tag-container[theme=dark]:not(.readonly):not(.disabled):focus-visible:after,:host .tag-container[theme=light]:not(.readonly):not(.disabled):focus-visible:after{display:none}:host .tag-container[theme=dark].shrink,:host .tag-container[theme=light].shrink{transform:scale(.98)}:host .tag-container[theme=dark].disabled,:host .tag-container[theme=light].disabled{pointer-events:none;--cnp-icon-color: #919191}:host .tag-container[theme=dark].disabled .tag-label,:host .tag-container[theme=dark].disabled .count-dot,:host .tag-container[theme=dark].disabled .count-value,:host .tag-container[theme=light].disabled .tag-label,:host .tag-container[theme=light].disabled .count-dot,:host .tag-container[theme=light].disabled .count-value{color:#919191}:host .tag-container[theme=dark] .count,:host .tag-container[theme=light] .count{display:inline-flex;align-items:center;gap:4px;margin-left:4px;font-size:14px;line-height:20px}:host .tag-container[theme=dark] .count-dot,:host .tag-container[theme=light] .count-dot{color:#666}:host .tag-container[theme=dark] .count-value,:host .tag-container[theme=light] .count-value{color:#242424;font-variant-numeric:tabular-nums}:host .tag-container[theme=dark] .icon,:host .tag-container[theme=light] .icon{margin-right:4px}:host .tag-container[theme=dark] .tag-suffix,:host .tag-container[theme=light] .tag-suffix{margin-left:4px}:host .tag-container[theme=dark] .delete-icon,:host .tag-container[theme=light] .delete-icon{margin-left:4px;border-radius:4px;transition:outline-color .1s;outline:2px solid transparent}:host .tag-container[theme=dark] .delete-icon:focus-visible,:host .tag-container[theme=light] .delete-icon:focus-visible{outline-color:#242424}:host(.ui-tag--constrain-width){display:inline-flex;max-width:min(var(--ui-tag-max-width, 264px),100%);min-width:0}:host(.ui-tag--constrain-width) .tag-wrapper{display:flex;min-width:0;max-width:min(var(--ui-tag-max-width, 264px),100%)}:host(.ui-tag--constrain-width) .tag-container{box-sizing:border-box;min-width:0;max-width:100%}:host(.ui-tag--constrain-width) .tag-label{min-width:0}:host(.ui-tag--constrain-width) .icon,:host(.ui-tag--constrain-width) .tag-suffix,:host(.ui-tag--constrain-width) .delete-icon,:host(.ui-tag--constrain-width) .count{flex-shrink:0}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mat-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], allowClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowClose", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], isSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelected", required: false }] }, { type: i0.Output, args: ["isSelectedChange"] }], showIconWhenSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIconWhenSelected", required: false }] }], pinnedBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedBackground", required: false }] }], constrainWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "constrainWidth", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], applicationTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "applicationTheme", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], ariaRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaRequired", required: false }] }], showBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBadge", required: false }] }], notificationsAmount: [{ type: i0.Input, args: [{ isSignal: true, alias: "notificationsAmount", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], press: [{ type: i0.Output, args: ["press"] }], labelElement: [{ type: i0.ViewChild, args: ['labelElement', { isSignal: true }] }], containerElement: [{ type: i0.ViewChild, args: ['containerElement', { isSignal: true }] }] } });
-
-class TagComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: TagComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: TagComponentModule, imports: [CommonModule,
-            IconComponentModule,
-            TooltipComponentModule,
-            MatTooltipModule,
-            MatInputModule,
-            UiTranslatePipe,
-            TagComponent], exports: [TagComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: TagComponentModule, imports: [CommonModule,
-            IconComponentModule,
-            TooltipComponentModule,
-            MatTooltipModule,
-            MatInputModule,
-            TagComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: TagComponentModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        IconComponentModule,
-                        TooltipComponentModule,
-                        MatTooltipModule,
-                        MatInputModule,
-                        UiTranslatePipe,
-                        TagComponent,
-                    ],
-                    exports: [TagComponent],
-                    providers: [],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import { AsyncPipe, CommonModule } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, NgModule, NgZone, afterRenderEffect, booleanAttribute, computed, effect, inject, input, model, output, signal, viewChild } from "@angular/core";
+import { MatTooltip, MatTooltipModule } from "@angular/material/tooltip";
+import { ReplaySubject, debounceTime, map } from "rxjs";
+import { IKeyboardEvent, UiTranslatePipe } from "@testgorilla/tgo-ui/components/core";
+import * as i1 from "@testgorilla/tgo-ui/components/icon";
+import { IconComponentModule } from "@testgorilla/tgo-ui/components/icon";
+import { MatInputModule } from "@angular/material/input";
+import { TooltipComponentModule } from "@testgorilla/tgo-ui/components/tooltip";
+var TagComponent = class TagComponent {
+	constructor() {
+		this.label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+		this.icon = input("", ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+		this.allowClose = input(false, {
+			...ngDevMode ? { debugName: "allowClose" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.readOnly = input(false, {
+			...ngDevMode ? { debugName: "readOnly" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.isSelected = model(false, ...ngDevMode ? [{ debugName: "isSelected" }] : /* istanbul ignore next */ []);
+		this.showIconWhenSelected = input(false, {
+			...ngDevMode ? { debugName: "showIconWhenSelected" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.pinnedBackground = input(false, {
+			...ngDevMode ? { debugName: "pinnedBackground" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.constrainWidth = input(false, {
+			...ngDevMode ? { debugName: "constrainWidth" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.isDisabled = input(false, {
+			...ngDevMode ? { debugName: "isDisabled" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.applicationTheme = input(void 0, ...ngDevMode ? [{ debugName: "applicationTheme" }] : /* istanbul ignore next */ []);
+		this.defaultAppTheme = inject("CANOPYUI_DEFAULT_APPLICATION_THEME", { optional: true });
+		this.theme = computed(() => this.applicationTheme() ?? this.defaultAppTheme ?? "light", ...ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []);
+		this.ariaLabel = input(void 0, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+		this.testId = input(null, ...ngDevMode ? [{ debugName: "testId" }] : /* istanbul ignore next */ []);
+		this.closeTestId = computed(() => this.testId() ? `${this.testId()}-remove` : null, ...ngDevMode ? [{ debugName: "closeTestId" }] : /* istanbul ignore next */ []);
+		this.ariaRequired = input(false, {
+			...ngDevMode ? { debugName: "ariaRequired" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.showBadge = input(false, ...ngDevMode ? [{ debugName: "showBadge" }] : /* istanbul ignore next */ []);
+		this.notificationsAmount = input(0, ...ngDevMode ? [{ debugName: "notificationsAmount" }] : /* istanbul ignore next */ []);
+		this.close = output();
+		this.press = output();
+		this.checkLabelEllipsis$ = new ReplaySubject(1);
+		this.isEllipseActiveObs$ = this.checkLabelEllipsis$.pipe(debounceTime(100), map(() => {
+			const el = this.labelElement()?.nativeElement;
+			return el ? el.offsetWidth < el.scrollWidth : false;
+		}));
+		this.isHovered = signal(false, ...ngDevMode ? [{ debugName: "isHovered" }] : /* istanbul ignore next */ []);
+		this.shrink = false;
+		this.iconColor = "black";
+		this.closeBtnFocused = signal(false, ...ngDevMode ? [{ debugName: "closeBtnFocused" }] : /* istanbul ignore next */ []);
+		this.labelElement = viewChild("labelElement", ...ngDevMode ? [{ debugName: "labelElement" }] : /* istanbul ignore next */ []);
+		this.containerElement = viewChild("containerElement", ...ngDevMode ? [{ debugName: "containerElement" }] : /* istanbul ignore next */ []);
+		this.ngZone = inject(NgZone);
+		this.tabIndex = computed(() => this.isDisabled() || this.readOnly() ? -1 : 0, ...ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []);
+		this.filled = computed(() => this.readOnly() || this.allowClose() || this.isSelected() || this.pinnedBackground(), ...ngDevMode ? [{ debugName: "filled" }] : /* istanbul ignore next */ []);
+		effect(() => {
+			this.label();
+			this.labelElement();
+			this.isLabelEllipseActive();
+		});
+		afterRenderEffect({ write: (onCleanup) => {
+			const el = this.containerElement()?.nativeElement;
+			if (!this.constrainWidth() || !el || typeof ResizeObserver === "undefined") return;
+			const observer = new ResizeObserver(() => this.ngZone.run(() => this.isLabelEllipseActive()));
+			observer.observe(el);
+			onCleanup(() => observer.disconnect());
+		} });
+	}
+	onPress() {
+		if (!this.readOnly() && !this.allowClose()) {
+			const newSelected = this.showIconWhenSelected() ? !this.isSelected() : false;
+			this.isSelected.set(newSelected);
+			this.press.emit(newSelected);
+		}
+	}
+	setHoverState(state) {
+		if (this.theme() === "classic") return;
+		this.isHovered.set(state);
+	}
+	setShrinkState(state) {
+		this.shrink = state;
+	}
+	onClose() {
+		this.close.emit();
+	}
+	isLabelEllipseActive() {
+		this.checkLabelEllipsis$.next();
+	}
+	onKeydown($event) {
+		if (($event.key === IKeyboardEvent.ENTER || $event.key === IKeyboardEvent.SPACE) && !this.closeBtnFocused()) this.onPress();
+		else if (this.closeBtnFocused() && ($event.key === IKeyboardEvent.ENTER || $event.key === IKeyboardEvent.SPACE)) this.onClose();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: TagComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.4",
+			type: TagComponent,
+			isStandalone: true,
+			selector: "ui-tag",
+			inputs: {
+				label: {
+					classPropertyName: "label",
+					publicName: "label",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				icon: {
+					classPropertyName: "icon",
+					publicName: "icon",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				allowClose: {
+					classPropertyName: "allowClose",
+					publicName: "allowClose",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				readOnly: {
+					classPropertyName: "readOnly",
+					publicName: "readOnly",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				isSelected: {
+					classPropertyName: "isSelected",
+					publicName: "isSelected",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				showIconWhenSelected: {
+					classPropertyName: "showIconWhenSelected",
+					publicName: "showIconWhenSelected",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				pinnedBackground: {
+					classPropertyName: "pinnedBackground",
+					publicName: "pinnedBackground",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				constrainWidth: {
+					classPropertyName: "constrainWidth",
+					publicName: "constrainWidth",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				isDisabled: {
+					classPropertyName: "isDisabled",
+					publicName: "isDisabled",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				applicationTheme: {
+					classPropertyName: "applicationTheme",
+					publicName: "applicationTheme",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				ariaLabel: {
+					classPropertyName: "ariaLabel",
+					publicName: "ariaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				testId: {
+					classPropertyName: "testId",
+					publicName: "testId",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				ariaRequired: {
+					classPropertyName: "ariaRequired",
+					publicName: "ariaRequired",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				showBadge: {
+					classPropertyName: "showBadge",
+					publicName: "showBadge",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				notificationsAmount: {
+					classPropertyName: "notificationsAmount",
+					publicName: "notificationsAmount",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				isSelected: "isSelectedChange",
+				close: "close",
+				press: "press"
+			},
+			host: { properties: { "class.ui-tag--constrain-width": "constrainWidth()" } },
+			viewQueries: [{
+				propertyName: "labelElement",
+				first: true,
+				predicate: ["labelElement"],
+				descendants: true,
+				isSignal: true
+			}, {
+				propertyName: "containerElement",
+				first: true,
+				predicate: ["containerElement"],
+				descendants: true,
+				isSignal: true
+			}],
+			ngImport: i0,
+			template: "<div class=\"tag-wrapper\">\n  <div\n    [matTooltip]=\"(isEllipseActiveObs$ | async) ? label() : ''\"\n    [matTooltipClass]=\"theme()\"\n    [tabindex]=\"tabIndex()\"\n    class=\"tag-container\"\n    #containerElement\n    [attr.data-testid]=\"testId() ?? 'tag--container'\"\n    [attr.theme]=\"theme()\"\n    [class]=\"{\n      filled: filled(),\n      readonly: readOnly(),\n      disabled: isDisabled(),\n      outlined: !isSelected(),\n      shrink,\n    }\"\n    (click)=\"onPress()\"\n    (mouseenter)=\"setHoverState(true)\"\n    (mouseleave)=\"setHoverState(false)\"\n    (mousedown)=\"setShrinkState(true)\"\n    (mouseup)=\"setShrinkState(false)\"\n    (touchstart)=\"setShrinkState(true)\"\n    (touchend)=\"setShrinkState(false)\"\n    (keydown)=\"onKeydown($event)\"\n    [attr.aria-label]=\"ariaLabel() || label()\"\n    [attr.aria-required]=\"ariaRequired()\"\n  >\n    @if (icon()) {\n      <!-- Let ui-icon resolve the hover variant: composing the name here appended instead of\n           replacing, yielding names like `Sparkle-in-line-filled` that exist in no icon set. -->\n      <ui-icon\n        class=\"icon\"\n        [color]=\"iconColor\"\n        [name]=\"icon()\"\n        [filled]=\"isHovered()\"\n        [toggleIconStyle]=\"true\"\n        [applicationTheme]=\"theme()\"\n      ></ui-icon>\n    }\n    @if (isSelected() && showIconWhenSelected()) {\n      <ui-icon [color]=\"iconColor\" class=\"icon\" [name]=\"'Check'\" [applicationTheme]=\"theme()\"></ui-icon>\n    }\n    <span class=\"tag-label\" #labelElement>{{ label() }}</span>\n    <!-- Consumer content after the label. It never shrinks, so the label truncates first. Its own\n         presses are kept from reaching the tag, so a control in here doesn't also press the tag. -->\n    <span\n      class=\"tag-suffix\"\n      (click)=\"$event.stopPropagation()\"\n      (keydown)=\"$event.stopPropagation()\"\n      (mousedown)=\"$event.stopPropagation()\"\n      (touchstart)=\"$event.stopPropagation()\"\n    >\n      <ng-content select=\"[uiTagSuffix]\"></ng-content>\n    </span>\n    @if (showBadge()) {\n      <span class=\"count\" aria-hidden=\"true\">\n        <span class=\"count-dot\">&bull;</span>\n        <span class=\"count-value\">{{ notificationsAmount() }}</span>\n      </span>\n    }\n    @if (allowClose()) {\n      <ui-icon\n        (focus)=\"closeBtnFocused.set(true)\"\n        (blur)=\"closeBtnFocused.set(false)\"\n        [tabindex]=\"tabIndex()\"\n        class=\"delete-icon\"\n        [attr.data-testid]=\"closeTestId()\"\n        [attr.aria-label]=\"'TAG.REMOVE' | uiTranslate | async\"\n        [color]=\"iconColor\"\n        (click)=\"onClose(); $event.stopPropagation()\"\n        [name]=\"'Close'\"\n        [applicationTheme]=\"theme()\"\n      ></ui-icon>\n    }\n  </div>\n</div>\n",
+			styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.tag-container ui-icon:not(.delete-icon){pointer-events:none}:host .tag-wrapper{max-width:var(--ui-tag-max-width, 264px)}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}:host .tag-container{height:32px;max-width:var(--ui-tag-max-width, 264px);border-radius:4px;display:flex;align-items:center;justify-content:center;padding:0 8px;width:fit-content;cursor:pointer;margin:4px}:host .tag-container:focus-visible{outline:2px solid #242424;animation:focus-ring-animation .4s forwards;outline-offset:2px;position:relative}:host .tag-container:focus-visible:after{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:-2px;left:-2px;outline:2px solid #ffffff;border-radius:4px}:host .tag-container.outlined{border:1px solid #6894a0}:host .tag-container.filled{background:#e9f0f1;border:1px solid #e9f0f1}:host .tag-container.filled:hover{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled:active{background:#a9c2c9;border:1px solid #1b4754}:host .tag-container:hover{background:#f6f6f6;border:1px solid #6894a0}:host .tag-container:active{background:#e9f0f1}:host .tag-container.readonly{pointer-events:none}:host .tag-container.disabled{opacity:.5;border:1px solid #276678;background:#e9f0f1;pointer-events:none}:host .tag-container .tag-label{-webkit-user-select:none;user-select:none;font-size:14px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tag-container .icon{height:16px;width:16px;min-width:16px;margin-right:8px}:host .tag-container .tag-suffix{display:inline-flex;align-items:center;flex-shrink:0;margin-left:8px}:host .tag-container .tag-suffix:empty{display:none}:host .tag-container .delete-icon{display:flex;align-items:center;justify-content:center;margin-left:8px;text-align:center;border-radius:50px}:host .tag-container[theme=dark],:host .tag-container[theme=light]{border-radius:8px;background:#f4f4f4;border:1px solid #e9e9e9;color:#242424}:host .tag-container[theme=dark].outlined:not(.filled),:host .tag-container[theme=light].outlined:not(.filled){background:#fff;border-color:#919191}:host .tag-container[theme=dark].filled.readonly,:host .tag-container[theme=light].filled.readonly{border:none}:host .tag-container[theme=dark]:not(.readonly):not(.disabled):hover,:host .tag-container[theme=light]:not(.readonly):not(.disabled):hover{background:#d3d3d3;border-color:#d3d3d3;color:#242424}:host .tag-container[theme=dark]:not(.readonly):not(.disabled):focus-visible,:host .tag-container[theme=light]:not(.readonly):not(.disabled):focus-visible{outline:2px solid #242424;outline-offset:2px;border-radius:10px;animation:none}:host .tag-container[theme=dark]:not(.readonly):not(.disabled):focus-visible:after,:host .tag-container[theme=light]:not(.readonly):not(.disabled):focus-visible:after{display:none}:host .tag-container[theme=dark].shrink,:host .tag-container[theme=light].shrink{transform:scale(.98)}:host .tag-container[theme=dark].disabled,:host .tag-container[theme=light].disabled{pointer-events:none;--cnp-icon-color: #919191}:host .tag-container[theme=dark].disabled .tag-label,:host .tag-container[theme=dark].disabled .count-dot,:host .tag-container[theme=dark].disabled .count-value,:host .tag-container[theme=light].disabled .tag-label,:host .tag-container[theme=light].disabled .count-dot,:host .tag-container[theme=light].disabled .count-value{color:#919191}:host .tag-container[theme=dark] .count,:host .tag-container[theme=light] .count{display:inline-flex;align-items:center;gap:4px;margin-left:4px;font-size:14px;line-height:20px}:host .tag-container[theme=dark] .count-dot,:host .tag-container[theme=light] .count-dot{color:#666}:host .tag-container[theme=dark] .count-value,:host .tag-container[theme=light] .count-value{color:#242424;font-variant-numeric:tabular-nums}:host .tag-container[theme=dark] .icon,:host .tag-container[theme=light] .icon{margin-right:4px}:host .tag-container[theme=dark] .tag-suffix,:host .tag-container[theme=light] .tag-suffix{margin-left:4px}:host .tag-container[theme=dark] .delete-icon,:host .tag-container[theme=light] .delete-icon{margin-left:4px;border-radius:4px;transition:outline-color .1s;outline:2px solid transparent}:host .tag-container[theme=dark] .delete-icon:focus-visible,:host .tag-container[theme=light] .delete-icon:focus-visible{outline-color:#242424}:host(.ui-tag--constrain-width){display:inline-flex;max-width:min(var(--ui-tag-max-width, 264px),100%);min-width:0}:host(.ui-tag--constrain-width) .tag-wrapper{display:flex;min-width:0;max-width:min(var(--ui-tag-max-width, 264px),100%)}:host(.ui-tag--constrain-width) .tag-container{box-sizing:border-box;min-width:0;max-width:100%}:host(.ui-tag--constrain-width) .tag-label{min-width:0}:host(.ui-tag--constrain-width) .icon,:host(.ui-tag--constrain-width) .tag-suffix,:host(.ui-tag--constrain-width) .delete-icon,:host(.ui-tag--constrain-width) .count{flex-shrink:0}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mat-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\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: "pipe",
+					type: AsyncPipe,
+					name: "async"
+				},
+				{
+					kind: "pipe",
+					type: UiTranslatePipe,
+					name: "uiTranslate"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: TagComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-tag",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { "[class.ui-tag--constrain-width]": "constrainWidth()" },
+			imports: [
+				MatTooltip,
+				IconComponentModule,
+				AsyncPipe,
+				UiTranslatePipe
+			],
+			template: "<div class=\"tag-wrapper\">\n  <div\n    [matTooltip]=\"(isEllipseActiveObs$ | async) ? label() : ''\"\n    [matTooltipClass]=\"theme()\"\n    [tabindex]=\"tabIndex()\"\n    class=\"tag-container\"\n    #containerElement\n    [attr.data-testid]=\"testId() ?? 'tag--container'\"\n    [attr.theme]=\"theme()\"\n    [class]=\"{\n      filled: filled(),\n      readonly: readOnly(),\n      disabled: isDisabled(),\n      outlined: !isSelected(),\n      shrink,\n    }\"\n    (click)=\"onPress()\"\n    (mouseenter)=\"setHoverState(true)\"\n    (mouseleave)=\"setHoverState(false)\"\n    (mousedown)=\"setShrinkState(true)\"\n    (mouseup)=\"setShrinkState(false)\"\n    (touchstart)=\"setShrinkState(true)\"\n    (touchend)=\"setShrinkState(false)\"\n    (keydown)=\"onKeydown($event)\"\n    [attr.aria-label]=\"ariaLabel() || label()\"\n    [attr.aria-required]=\"ariaRequired()\"\n  >\n    @if (icon()) {\n      <!-- Let ui-icon resolve the hover variant: composing the name here appended instead of\n           replacing, yielding names like `Sparkle-in-line-filled` that exist in no icon set. -->\n      <ui-icon\n        class=\"icon\"\n        [color]=\"iconColor\"\n        [name]=\"icon()\"\n        [filled]=\"isHovered()\"\n        [toggleIconStyle]=\"true\"\n        [applicationTheme]=\"theme()\"\n      ></ui-icon>\n    }\n    @if (isSelected() && showIconWhenSelected()) {\n      <ui-icon [color]=\"iconColor\" class=\"icon\" [name]=\"'Check'\" [applicationTheme]=\"theme()\"></ui-icon>\n    }\n    <span class=\"tag-label\" #labelElement>{{ label() }}</span>\n    <!-- Consumer content after the label. It never shrinks, so the label truncates first. Its own\n         presses are kept from reaching the tag, so a control in here doesn't also press the tag. -->\n    <span\n      class=\"tag-suffix\"\n      (click)=\"$event.stopPropagation()\"\n      (keydown)=\"$event.stopPropagation()\"\n      (mousedown)=\"$event.stopPropagation()\"\n      (touchstart)=\"$event.stopPropagation()\"\n    >\n      <ng-content select=\"[uiTagSuffix]\"></ng-content>\n    </span>\n    @if (showBadge()) {\n      <span class=\"count\" aria-hidden=\"true\">\n        <span class=\"count-dot\">&bull;</span>\n        <span class=\"count-value\">{{ notificationsAmount() }}</span>\n      </span>\n    }\n    @if (allowClose()) {\n      <ui-icon\n        (focus)=\"closeBtnFocused.set(true)\"\n        (blur)=\"closeBtnFocused.set(false)\"\n        [tabindex]=\"tabIndex()\"\n        class=\"delete-icon\"\n        [attr.data-testid]=\"closeTestId()\"\n        [attr.aria-label]=\"'TAG.REMOVE' | uiTranslate | async\"\n        [color]=\"iconColor\"\n        (click)=\"onClose(); $event.stopPropagation()\"\n        [name]=\"'Close'\"\n        [applicationTheme]=\"theme()\"\n      ></ui-icon>\n    }\n  </div>\n</div>\n",
+			styles: ["@import\"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap\";.bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.tag-container ui-icon:not(.delete-icon){pointer-events:none}:host .tag-wrapper{max-width:var(--ui-tag-max-width, 264px)}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}:host .tag-container{height:32px;max-width:var(--ui-tag-max-width, 264px);border-radius:4px;display:flex;align-items:center;justify-content:center;padding:0 8px;width:fit-content;cursor:pointer;margin:4px}:host .tag-container:focus-visible{outline:2px solid #242424;animation:focus-ring-animation .4s forwards;outline-offset:2px;position:relative}:host .tag-container:focus-visible:after{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:-2px;left:-2px;outline:2px solid #ffffff;border-radius:4px}:host .tag-container.outlined{border:1px solid #6894a0}:host .tag-container.filled{background:#e9f0f1;border:1px solid #e9f0f1}:host .tag-container.filled:hover{background-color:#e9f0f1;border:1px solid #276678}:host .tag-container.filled:active{background:#a9c2c9;border:1px solid #1b4754}:host .tag-container:hover{background:#f6f6f6;border:1px solid #6894a0}:host .tag-container:active{background:#e9f0f1}:host .tag-container.readonly{pointer-events:none}:host .tag-container.disabled{opacity:.5;border:1px solid #276678;background:#e9f0f1;pointer-events:none}:host .tag-container .tag-label{-webkit-user-select:none;user-select:none;font-size:14px;line-height:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tag-container .icon{height:16px;width:16px;min-width:16px;margin-right:8px}:host .tag-container .tag-suffix{display:inline-flex;align-items:center;flex-shrink:0;margin-left:8px}:host .tag-container .tag-suffix:empty{display:none}:host .tag-container .delete-icon{display:flex;align-items:center;justify-content:center;margin-left:8px;text-align:center;border-radius:50px}:host .tag-container[theme=dark],:host .tag-container[theme=light]{border-radius:8px;background:#f4f4f4;border:1px solid #e9e9e9;color:#242424}:host .tag-container[theme=dark].outlined:not(.filled),:host .tag-container[theme=light].outlined:not(.filled){background:#fff;border-color:#919191}:host .tag-container[theme=dark].filled.readonly,:host .tag-container[theme=light].filled.readonly{border:none}:host .tag-container[theme=dark]:not(.readonly):not(.disabled):hover,:host .tag-container[theme=light]:not(.readonly):not(.disabled):hover{background:#d3d3d3;border-color:#d3d3d3;color:#242424}:host .tag-container[theme=dark]:not(.readonly):not(.disabled):focus-visible,:host .tag-container[theme=light]:not(.readonly):not(.disabled):focus-visible{outline:2px solid #242424;outline-offset:2px;border-radius:10px;animation:none}:host .tag-container[theme=dark]:not(.readonly):not(.disabled):focus-visible:after,:host .tag-container[theme=light]:not(.readonly):not(.disabled):focus-visible:after{display:none}:host .tag-container[theme=dark].shrink,:host .tag-container[theme=light].shrink{transform:scale(.98)}:host .tag-container[theme=dark].disabled,:host .tag-container[theme=light].disabled{pointer-events:none;--cnp-icon-color: #919191}:host .tag-container[theme=dark].disabled .tag-label,:host .tag-container[theme=dark].disabled .count-dot,:host .tag-container[theme=dark].disabled .count-value,:host .tag-container[theme=light].disabled .tag-label,:host .tag-container[theme=light].disabled .count-dot,:host .tag-container[theme=light].disabled .count-value{color:#919191}:host .tag-container[theme=dark] .count,:host .tag-container[theme=light] .count{display:inline-flex;align-items:center;gap:4px;margin-left:4px;font-size:14px;line-height:20px}:host .tag-container[theme=dark] .count-dot,:host .tag-container[theme=light] .count-dot{color:#666}:host .tag-container[theme=dark] .count-value,:host .tag-container[theme=light] .count-value{color:#242424;font-variant-numeric:tabular-nums}:host .tag-container[theme=dark] .icon,:host .tag-container[theme=light] .icon{margin-right:4px}:host .tag-container[theme=dark] .tag-suffix,:host .tag-container[theme=light] .tag-suffix{margin-left:4px}:host .tag-container[theme=dark] .delete-icon,:host .tag-container[theme=light] .delete-icon{margin-left:4px;border-radius:4px;transition:outline-color .1s;outline:2px solid transparent}:host .tag-container[theme=dark] .delete-icon:focus-visible,:host .tag-container[theme=light] .delete-icon:focus-visible{outline-color:#242424}:host(.ui-tag--constrain-width){display:inline-flex;max-width:min(var(--ui-tag-max-width, 264px),100%);min-width:0}:host(.ui-tag--constrain-width) .tag-wrapper{display:flex;min-width:0;max-width:min(var(--ui-tag-max-width, 264px),100%)}:host(.ui-tag--constrain-width) .tag-container{box-sizing:border-box;min-width:0;max-width:100%}:host(.ui-tag--constrain-width) .tag-label{min-width:0}:host(.ui-tag--constrain-width) .icon,:host(.ui-tag--constrain-width) .tag-suffix,:host(.ui-tag--constrain-width) .delete-icon,:host(.ui-tag--constrain-width) .count{flex-shrink:0}::ng-deep .mat-mdc-tooltip{background-color:#a9c2c9;font-family:Open Sans,serif;font-weight:400;font-size:12px;border-radius:4px;overflow:visible;max-width:248px;padding:6px 2px;--mdc-plain-tooltip-container-color: none;--mat-tooltip-container-color: none;--mdc-plain-tooltip-supporting-text-color: $tgo-black}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		allowClose: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "allowClose",
+				required: false
+			}]
+		}],
+		readOnly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readOnly",
+				required: false
+			}]
+		}],
+		isSelected: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "isSelected",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["isSelectedChange"]
+		}],
+		showIconWhenSelected: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showIconWhenSelected",
+				required: false
+			}]
+		}],
+		pinnedBackground: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pinnedBackground",
+				required: false
+			}]
+		}],
+		constrainWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "constrainWidth",
+				required: false
+			}]
+		}],
+		isDisabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "isDisabled",
+				required: false
+			}]
+		}],
+		applicationTheme: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "applicationTheme",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		testId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "testId",
+				required: false
+			}]
+		}],
+		ariaRequired: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaRequired",
+				required: false
+			}]
+		}],
+		showBadge: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showBadge",
+				required: false
+			}]
+		}],
+		notificationsAmount: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "notificationsAmount",
+				required: false
+			}]
+		}],
+		close: [{
+			type: i0.Output,
+			args: ["close"]
+		}],
+		press: [{
+			type: i0.Output,
+			args: ["press"]
+		}],
+		labelElement: [{
+			type: i0.ViewChild,
+			args: ["labelElement", { isSignal: true }]
+		}],
+		containerElement: [{
+			type: i0.ViewChild,
+			args: ["containerElement", { isSignal: true }]
+		}]
+	}
+});
+var TagComponentModule = class TagComponentModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: TagComponentModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: TagComponentModule,
+			imports: [
+				CommonModule,
+				IconComponentModule,
+				TooltipComponentModule,
+				MatTooltipModule,
+				MatInputModule,
+				UiTranslatePipe,
+				TagComponent
+			],
+			exports: [TagComponent]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: TagComponentModule,
+			imports: [
+				CommonModule,
+				IconComponentModule,
+				TooltipComponentModule,
+				MatTooltipModule,
+				MatInputModule,
+				TagComponent
+			]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: TagComponentModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [
+				CommonModule,
+				IconComponentModule,
+				TooltipComponentModule,
+				MatTooltipModule,
+				MatInputModule,
+				UiTranslatePipe,
+				TagComponent
+			],
+			exports: [TagComponent],
+			providers: []
+		}]
+	}]
+});
 export { TagComponent, TagComponentModule };
-//# sourceMappingURL=testgorilla-tgo-ui-components-tag.mjs.map
+
+//# sourceMappingURL=testgorilla-tgo-ui-components-tag.mjs.map