@testgorilla/tgo-ui 9.3.3 → 10.0.0

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

@@ -16,14 +16,14 @@ class TagComponent {
          *
          * @memberof TagComponent
          */
-        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         /**
          * Icon
          *
          * @type {string}
          * @memberof TagComponent
          */
-        this.icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
         /**
          * Whether to allow the tag to be closed.
          *
@@ -31,7 +31,7 @@ class TagComponent {
          * @default false
          * @memberof TagComponent
          */
-        this.allowClose = input(false, ...(ngDevMode ? [{ debugName: "allowClose", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.allowClose = input(false, { ...(ngDevMode ? { debugName: "allowClose" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Whether the tag is in read-only mode.
          *
@@ -39,7 +39,7 @@ class TagComponent {
          * @default false
          * @memberof TagComponent
          */
-        this.readOnly = input(false, ...(ngDevMode ? [{ debugName: "readOnly", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.readOnly = input(false, { ...(ngDevMode ? { debugName: "readOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Whether the tag is selected.
          *
@@ -47,7 +47,7 @@ class TagComponent {
          * @default false
          * @memberof TagComponent
          */
-        this.isSelected = model(false, ...(ngDevMode ? [{ debugName: "isSelected" }] : []));
+        this.isSelected = model(false, ...(ngDevMode ? [{ debugName: "isSelected" }] : /* istanbul ignore next */ []));
         /**
          * Display icon when is selected
          *
@@ -55,7 +55,7 @@ class TagComponent {
          * @default false
          * @memberof TagComponent
          */
-        this.showIconWhenSelected = input(false, ...(ngDevMode ? [{ debugName: "showIconWhenSelected", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.showIconWhenSelected = input(false, { ...(ngDevMode ? { debugName: "showIconWhenSelected" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Specifies whether the element is disabled.
          *
@@ -63,7 +63,7 @@ class TagComponent {
          * @default false
          * @memberof TagComponent
          */
-        this.isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.isDisabled = input(false, { ...(ngDevMode ? { debugName: "isDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          *
          * Defines the application theme
@@ -74,37 +74,37 @@ class 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" }] : []));
+        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" }] : []));
+        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" }] : []));
+        this.ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* 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", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        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" }] : []));
+        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" }] : []));
+        this.notificationsAmount = input(0, ...(ngDevMode ? [{ debugName: "notificationsAmount" }] : /* istanbul ignore next */ []));
         /**
          * Event triggered when the tag should be closed.
          *
@@ -138,14 +138,14 @@ class TagComponent {
             const el = this.labelElement()?.nativeElement;
             return el ? el.offsetWidth < el.scrollWidth : false;
         }));
-        this.isHovered = signal(false, ...(ngDevMode ? [{ debugName: "isHovered" }] : []));
+        this.isHovered = signal(false, ...(ngDevMode ? [{ debugName: "isHovered" }] : /* istanbul ignore next */ []));
         this.shrink = false;
-        this.iconToPass = computed(() => this.theme() !== 'classic' && this.isHovered() ? `${this.icon()}-filled` : this.icon(), ...(ngDevMode ? [{ debugName: "iconToPass" }] : []));
+        this.iconToPass = computed(() => this.theme() !== 'classic' && this.isHovered() ? `${this.icon()}-filled` : this.icon(), ...(ngDevMode ? [{ debugName: "iconToPass" }] : /* istanbul ignore next */ []));
         this.iconColor = 'black';
-        this.closeBtnFocused = signal(false, ...(ngDevMode ? [{ debugName: "closeBtnFocused" }] : []));
-        this.labelElement = viewChild('labelElement', ...(ngDevMode ? [{ debugName: "labelElement" }] : []));
-        this.tabIndex = computed(() => (this.isDisabled() || this.readOnly() ? -1 : 0), ...(ngDevMode ? [{ debugName: "tabIndex" }] : []));
-        this.filled = computed(() => this.readOnly() || this.allowClose() || this.isSelected(), ...(ngDevMode ? [{ debugName: "filled" }] : []));
+        this.closeBtnFocused = signal(false, ...(ngDevMode ? [{ debugName: "closeBtnFocused" }] : /* istanbul ignore next */ []));
+        this.labelElement = viewChild('labelElement', ...(ngDevMode ? [{ debugName: "labelElement" }] : /* istanbul ignore next */ []));
+        this.tabIndex = computed(() => (this.isDisabled() || this.readOnly() ? -1 : 0), ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+        this.filled = computed(() => this.readOnly() || this.allowClose() || this.isSelected(), ...(ngDevMode ? [{ debugName: "filled" }] : /* istanbul ignore next */ []));
         effect(() => {
             this.label(); // dep — re-run on label change
             this.labelElement(); // dep — re-run once @ViewChild resolves
@@ -184,31 +184,31 @@ class TagComponent {
             this.onClose();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.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 }, 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 }, 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" }, viewQueries: [{ propertyName: "labelElement", first: true, predicate: ["labelElement"], 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    [attr.data-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      <ui-icon class=\"icon\" [color]=\"iconColor\" [name]=\"iconToPass()\" [applicationTheme]=\"theme()\"></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    @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.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}:host .tag-wrapper{max-width:264px}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}:host .tag-container{height:32px;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 .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] .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}::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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", 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 }, 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 }, 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" }, viewQueries: [{ propertyName: "labelElement", first: true, predicate: ["labelElement"], 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    [attr.data-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      <ui-icon class=\"icon\" [color]=\"iconColor\" [name]=\"iconToPass()\" [applicationTheme]=\"theme()\"></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    @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.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}:host .tag-wrapper{max-width:264px}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}:host .tag-container{height:32px;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 .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] .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}::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: "20.3.25", ngImport: i0, type: TagComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TagComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-tag', changeDetection: ChangeDetectionStrategy.OnPush, 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    [attr.data-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      <ui-icon class=\"icon\" [color]=\"iconColor\" [name]=\"iconToPass()\" [applicationTheme]=\"theme()\"></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    @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.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}:host .tag-wrapper{max-width:264px}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}:host .tag-container{height:32px;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 .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] .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}::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 }] }], 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 }] }], 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 }] }] } });
 
 class TagComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TagComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: TagComponentModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TagComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: TagComponentModule, imports: [CommonModule,
             IconComponentModule,
             TooltipComponentModule,
             MatTooltipModule,
             MatInputModule,
             UiTranslatePipe,
             TagComponent], exports: [TagComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TagComponentModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TagComponentModule, imports: [CommonModule,
             IconComponentModule,
             TooltipComponentModule,
             MatTooltipModule,
             MatInputModule,
             TagComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TagComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TagComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

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

@@ -1 +1 @@
-{"version":3,"file":"testgorilla-tgo-ui-components-tag.mjs","sources":["../../../components/tag/tag.component.ts","../../../components/tag/tag.component.html","../../../components/tag/tag.component.module.ts","../../../components/tag/testgorilla-tgo-ui-components-tag.ts"],"sourcesContent":["import { AsyncPipe } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  booleanAttribute,\n  Component,\n  computed,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  model,\n  output,\n  ProviderToken,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { debounceTime, map, ReplaySubject } from 'rxjs';\n\nimport { ApplicationTheme, IKeyboardEvent, UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconColor, IconName, IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\n\n@Component({\n  selector: 'ui-tag',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './tag.component.html',\n  styleUrls: ['./tag.component.scss'],\n  imports: [MatTooltip, IconComponentModule, AsyncPipe, UiTranslatePipe],\n})\nexport class TagComponent {\n  /**\n   * Tag's label\n   *\n   * @memberof TagComponent\n   */\n  label = input<string>('');\n\n  /**\n   * Icon\n   *\n   * @type {string}\n   * @memberof TagComponent\n   */\n  icon = input<IconName>('');\n\n  /**\n   * Whether to allow the tag to be closed.\n   *\n   * @type {boolean}\n   * @default false\n   * @memberof TagComponent\n   */\n  allowClose = input(false, { transform: booleanAttribute });\n\n  /**\n   * Whether the tag is in read-only mode.\n   *\n   * @type {boolean}\n   * @default false\n   * @memberof TagComponent\n   */\n  readOnly = input(false, { transform: booleanAttribute });\n\n  /**\n   * Whether the tag is selected.\n   *\n   * @type {boolean}\n   * @default false\n   * @memberof TagComponent\n   */\n  isSelected = model(false);\n\n  /**\n   * Display icon when is selected\n   *\n   * @type {boolean}\n   * @default false\n   * @memberof TagComponent\n   */\n  showIconWhenSelected = input(false, { transform: booleanAttribute });\n\n  /**\n   * Specifies whether the element is disabled.\n   *\n   * @type {boolean}\n   * @default false\n   * @memberof TagComponent\n   */\n  isDisabled = input(false, { transform: booleanAttribute });\n\n  /**\n   *\n   * Defines the application theme\n   *\n   * @type {ApplicationTheme | undefined}\n   * @memberof TagComponent\n   *\n   * When not provided, the component falls back to the injected\n   * `CANOPYUI_DEFAULT_APPLICATION_THEME` token (if any), then to `'light'`.\n   */\n  applicationTheme = input<ApplicationTheme | undefined>(undefined);\n  private readonly defaultAppTheme = inject<ApplicationTheme>(\n    'CANOPYUI_DEFAULT_APPLICATION_THEME' as unknown as ProviderToken<ApplicationTheme>,\n    { optional: true }\n  );\n  readonly theme = computed<ApplicationTheme>(() => this.applicationTheme() ?? this.defaultAppTheme ?? 'light');\n\n  /**\n   * A string representing the ARIA label for accessibility.\n   * This label is used to provide an accessible name for the input element.\n   * @type {string}\n   * @memberof TagComponent\n   */\n  ariaLabel = input<string | undefined>(undefined);\n\n  /**\n   * A string representing the ARIA requirement for accessibility.\n   * This attribute is used to indicate whether an input field is required for form submission.\n   * @type {boolean}\n   * @memberof TagComponent\n   */\n  ariaRequired = input(false, { transform: booleanAttribute });\n\n  /**\n   * Whether to show the badge on the tag.\n   * @type {boolean}\n   * @default false\n   * @memberof TagComponent\n   */\n  showBadge = input<boolean>(false);\n\n  /**\n   * The notifications amount to be displayed on the badge.\n   * @type {number}\n   * @default 0\n   * @memberof TagComponent\n   */\n  notificationsAmount = input<number>(0);\n\n  /**\n   * Event triggered when the tag should be closed.\n   *\n   * @event\n   * @memberof TagComponent\n   */\n  // 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)\n  close = output<void>();\n\n  /**\n   * Event triggered when a press action occurs.\n   *\n   * @event\n   * @memberof TagComponent\n   */\n  press = output<boolean>();\n\n  /**\n   * Subject that needs to be triggered when Label input changes, to check if it's truncated\n   * @private\n   * @type {void}\n   * @memberof TagComponent\n   */\n  private readonly checkLabelEllipsis$ = new ReplaySubject<void>(1);\n\n  /**\n   * Observable that indicates if the Label is truncated\n   * debounceTime is used to wait for view to be initialized after receiving a new Label input\n   * @protected\n   * @type {boolean}\n   * @memberof TagComponent\n   */\n  protected isEllipseActiveObs$ = this.checkLabelEllipsis$.pipe(\n    debounceTime(100),\n    map(() => {\n      const el = this.labelElement()?.nativeElement;\n      return el ? el.offsetWidth < el.scrollWidth : false;\n    })\n  );\n  protected readonly isHovered = signal(false);\n  protected shrink = false;\n  protected readonly iconToPass = computed<IconName>(() =>\n    this.theme() !== 'classic' && this.isHovered() ? (`${this.icon()}-filled` as IconName) : this.icon()\n  );\n  protected iconColor: IconColor = 'black';\n  protected closeBtnFocused = signal(false);\n\n  protected readonly labelElement = viewChild<ElementRef<HTMLElement>>('labelElement');\n\n  constructor() {\n    effect(() => {\n      this.label(); // dep — re-run on label change\n      this.labelElement(); // dep — re-run once @ViewChild resolves\n      this.isLabelEllipseActive();\n    });\n  }\n\n  onPress(): void {\n    if (!this.readOnly() && !this.allowClose()) {\n      const newSelected = this.showIconWhenSelected() ? !this.isSelected() : false;\n      this.isSelected.set(newSelected);\n      this.press.emit(newSelected);\n    }\n  }\n\n  setHoverState(state: boolean) {\n    if (this.theme() === 'classic') {\n      return;\n    }\n    this.isHovered.set(state);\n  }\n\n  setShrinkState(state: boolean) {\n    this.shrink = state;\n  }\n\n  onClose(): void {\n    this.close.emit();\n  }\n\n  private isLabelEllipseActive(): void {\n    this.checkLabelEllipsis$.next();\n  }\n\n  readonly tabIndex = computed(() => (this.isDisabled() || this.readOnly() ? -1 : 0));\n\n  readonly filled = computed(() => this.readOnly() || this.allowClose() || this.isSelected());\n\n  onKeydown($event: KeyboardEvent): void {\n    if (\n      ($event.key === (IKeyboardEvent.ENTER as string) || $event.key === (IKeyboardEvent.SPACE as string)) &&\n      !this.closeBtnFocused()\n    ) {\n      this.onPress();\n    } else if (\n      this.closeBtnFocused() &&\n      ($event.key === (IKeyboardEvent.ENTER as string) || $event.key === (IKeyboardEvent.SPACE as string))\n    ) {\n      this.onClose();\n    }\n  }\n}\n","<div class=\"tag-wrapper\">\n  <div\n    [matTooltip]=\"(isEllipseActiveObs$ | async) ? label() : ''\"\n    [matTooltipClass]=\"theme()\"\n    [tabindex]=\"tabIndex()\"\n    class=\"tag-container\"\n    [attr.data-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      <ui-icon class=\"icon\" [color]=\"iconColor\" [name]=\"iconToPass()\" [applicationTheme]=\"theme()\"></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    @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.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","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { TooltipComponentModule } from '@testgorilla/tgo-ui/components/tooltip';\n\nimport { TagComponent } from './tag.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    IconComponentModule,\n    TooltipComponentModule,\n    MatTooltipModule,\n    MatInputModule,\n    UiTranslatePipe,\n    TagComponent,\n  ],\n  exports: [TagComponent],\n  providers: [],\n})\nexport class TagComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"testgorilla-tgo-ui-components-tag.mjs","sources":["../../../components/tag/tag.component.ts","../../../components/tag/tag.component.html","../../../components/tag/tag.component.module.ts","../../../components/tag/testgorilla-tgo-ui-components-tag.ts"],"sourcesContent":["import { AsyncPipe } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  booleanAttribute,\n  Component,\n  computed,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  model,\n  output,\n  ProviderToken,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { debounceTime, map, ReplaySubject } from 'rxjs';\n\nimport { ApplicationTheme, IKeyboardEvent, UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconColor, IconName, IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\n\n@Component({\n  selector: 'ui-tag',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './tag.component.html',\n  styleUrls: ['./tag.component.scss'],\n  imports: [MatTooltip, IconComponentModule, AsyncPipe, UiTranslatePipe],\n})\nexport class TagComponent {\n  /**\n   * Tag's label\n   *\n   * @memberof TagComponent\n   */\n  label = input<string>('');\n\n  /**\n   * Icon\n   *\n   * @type {string}\n   * @memberof TagComponent\n   */\n  icon = input<IconName>('');\n\n  /**\n   * Whether to allow the tag to be closed.\n   *\n   * @type {boolean}\n   * @default false\n   * @memberof TagComponent\n   */\n  allowClose = input(false, { transform: booleanAttribute });\n\n  /**\n   * Whether the tag is in read-only mode.\n   *\n   * @type {boolean}\n   * @default false\n   * @memberof TagComponent\n   */\n  readOnly = input(false, { transform: booleanAttribute });\n\n  /**\n   * Whether the tag is selected.\n   *\n   * @type {boolean}\n   * @default false\n   * @memberof TagComponent\n   */\n  isSelected = model(false);\n\n  /**\n   * Display icon when is selected\n   *\n   * @type {boolean}\n   * @default false\n   * @memberof TagComponent\n   */\n  showIconWhenSelected = input(false, { transform: booleanAttribute });\n\n  /**\n   * Specifies whether the element is disabled.\n   *\n   * @type {boolean}\n   * @default false\n   * @memberof TagComponent\n   */\n  isDisabled = input(false, { transform: booleanAttribute });\n\n  /**\n   *\n   * Defines the application theme\n   *\n   * @type {ApplicationTheme | undefined}\n   * @memberof TagComponent\n   *\n   * When not provided, the component falls back to the injected\n   * `CANOPYUI_DEFAULT_APPLICATION_THEME` token (if any), then to `'light'`.\n   */\n  applicationTheme = input<ApplicationTheme | undefined>(undefined);\n  private readonly defaultAppTheme = inject<ApplicationTheme>(\n    'CANOPYUI_DEFAULT_APPLICATION_THEME' as unknown as ProviderToken<ApplicationTheme>,\n    { optional: true }\n  );\n  readonly theme = computed<ApplicationTheme>(() => this.applicationTheme() ?? this.defaultAppTheme ?? 'light');\n\n  /**\n   * A string representing the ARIA label for accessibility.\n   * This label is used to provide an accessible name for the input element.\n   * @type {string}\n   * @memberof TagComponent\n   */\n  ariaLabel = input<string | undefined>(undefined);\n\n  /**\n   * A string representing the ARIA requirement for accessibility.\n   * This attribute is used to indicate whether an input field is required for form submission.\n   * @type {boolean}\n   * @memberof TagComponent\n   */\n  ariaRequired = input(false, { transform: booleanAttribute });\n\n  /**\n   * Whether to show the badge on the tag.\n   * @type {boolean}\n   * @default false\n   * @memberof TagComponent\n   */\n  showBadge = input<boolean>(false);\n\n  /**\n   * The notifications amount to be displayed on the badge.\n   * @type {number}\n   * @default 0\n   * @memberof TagComponent\n   */\n  notificationsAmount = input<number>(0);\n\n  /**\n   * Event triggered when the tag should be closed.\n   *\n   * @event\n   * @memberof TagComponent\n   */\n  // 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)\n  close = output<void>();\n\n  /**\n   * Event triggered when a press action occurs.\n   *\n   * @event\n   * @memberof TagComponent\n   */\n  press = output<boolean>();\n\n  /**\n   * Subject that needs to be triggered when Label input changes, to check if it's truncated\n   * @private\n   * @type {void}\n   * @memberof TagComponent\n   */\n  private readonly checkLabelEllipsis$ = new ReplaySubject<void>(1);\n\n  /**\n   * Observable that indicates if the Label is truncated\n   * debounceTime is used to wait for view to be initialized after receiving a new Label input\n   * @protected\n   * @type {boolean}\n   * @memberof TagComponent\n   */\n  protected isEllipseActiveObs$ = this.checkLabelEllipsis$.pipe(\n    debounceTime(100),\n    map(() => {\n      const el = this.labelElement()?.nativeElement;\n      return el ? el.offsetWidth < el.scrollWidth : false;\n    })\n  );\n  protected readonly isHovered = signal(false);\n  protected shrink = false;\n  protected readonly iconToPass = computed<IconName>(() =>\n    this.theme() !== 'classic' && this.isHovered() ? (`${this.icon()}-filled` as IconName) : this.icon()\n  );\n  protected iconColor: IconColor = 'black';\n  protected closeBtnFocused = signal(false);\n\n  protected readonly labelElement = viewChild<ElementRef<HTMLElement>>('labelElement');\n\n  constructor() {\n    effect(() => {\n      this.label(); // dep — re-run on label change\n      this.labelElement(); // dep — re-run once @ViewChild resolves\n      this.isLabelEllipseActive();\n    });\n  }\n\n  onPress(): void {\n    if (!this.readOnly() && !this.allowClose()) {\n      const newSelected = this.showIconWhenSelected() ? !this.isSelected() : false;\n      this.isSelected.set(newSelected);\n      this.press.emit(newSelected);\n    }\n  }\n\n  setHoverState(state: boolean) {\n    if (this.theme() === 'classic') {\n      return;\n    }\n    this.isHovered.set(state);\n  }\n\n  setShrinkState(state: boolean) {\n    this.shrink = state;\n  }\n\n  onClose(): void {\n    this.close.emit();\n  }\n\n  private isLabelEllipseActive(): void {\n    this.checkLabelEllipsis$.next();\n  }\n\n  readonly tabIndex = computed(() => (this.isDisabled() || this.readOnly() ? -1 : 0));\n\n  readonly filled = computed(() => this.readOnly() || this.allowClose() || this.isSelected());\n\n  onKeydown($event: KeyboardEvent): void {\n    if (\n      ($event.key === (IKeyboardEvent.ENTER as string) || $event.key === (IKeyboardEvent.SPACE as string)) &&\n      !this.closeBtnFocused()\n    ) {\n      this.onPress();\n    } else if (\n      this.closeBtnFocused() &&\n      ($event.key === (IKeyboardEvent.ENTER as string) || $event.key === (IKeyboardEvent.SPACE as string))\n    ) {\n      this.onClose();\n    }\n  }\n}\n","<div class=\"tag-wrapper\">\n  <div\n    [matTooltip]=\"(isEllipseActiveObs$ | async) ? label() : ''\"\n    [matTooltipClass]=\"theme()\"\n    [tabindex]=\"tabIndex()\"\n    class=\"tag-container\"\n    [attr.data-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      <ui-icon class=\"icon\" [color]=\"iconColor\" [name]=\"iconToPass()\" [applicationTheme]=\"theme()\"></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    @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.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","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { TooltipComponentModule } from '@testgorilla/tgo-ui/components/tooltip';\n\nimport { TagComponent } from './tag.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    IconComponentModule,\n    TooltipComponentModule,\n    MatTooltipModule,\n    MatInputModule,\n    UiTranslatePipe,\n    TagComponent,\n  ],\n  exports: [TagComponent],\n  providers: [],\n})\nexport class TagComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;MA6Ba,YAAY,CAAA;AA+JvB,IAAA,WAAA,GAAA;AA9JA;;;;AAIG;AACH,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAS,EAAE,4EAAC;AAEzB;;;;;AAKG;AACH,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAW,EAAE,2EAAC;AAE1B;;;;;;AAMG;QACH,IAAA,CAAA,UAAU,GAAG,KAAK,CAAC,KAAK,kFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAE1D;;;;;;AAMG;QACH,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAExD;;;;;;AAMG;AACH,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAC,KAAK,iFAAC;AAEzB;;;;;;AAMG;QACH,IAAA,CAAA,oBAAoB,GAAG,KAAK,CAAC,KAAK,4FAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAEpE;;;;;;AAMG;QACH,IAAA,CAAA,UAAU,GAAG,KAAK,CAAC,KAAK,kFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAE1D;;;;;;;;;AASG;AACH,QAAA,IAAA,CAAA,gBAAgB,GAAG,KAAK,CAA+B,SAAS,uFAAC;QAChD,IAAA,CAAA,eAAe,GAAG,MAAM,CACvC,oCAAkF,EAClF,EAAE,QAAQ,EAAE,IAAI,EAAE,CACnB;AACQ,QAAA,IAAA,CAAA,KAAK,GAAG,QAAQ,CAAmB,MAAM,IAAI,CAAC,gBAAgB,EAAE,IAAI,IAAI,CAAC,eAAe,IAAI,OAAO,4EAAC;AAE7G;;;;;AAKG;AACH,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAqB,SAAS,gFAAC;AAEhD;;;;;AAKG;QACH,IAAA,CAAA,YAAY,GAAG,KAAK,CAAC,KAAK,oFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAE5D;;;;;AAKG;AACH,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAU,KAAK,gFAAC;AAEjC;;;;;AAKG;AACH,QAAA,IAAA,CAAA,mBAAmB,GAAG,KAAK,CAAS,CAAC,0FAAC;AAEtC;;;;;AAKG;;QAEH,IAAA,CAAA,KAAK,GAAG,MAAM,EAAQ;AAEtB;;;;;AAKG;QACH,IAAA,CAAA,KAAK,GAAG,MAAM,EAAW;AAEzB;;;;;AAKG;AACc,QAAA,IAAA,CAAA,mBAAmB,GAAG,IAAI,aAAa,CAAO,CAAC,CAAC;AAEjE;;;;;;AAMG;AACO,QAAA,IAAA,CAAA,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAC3D,YAAY,CAAC,GAAG,CAAC,EACjB,GAAG,CAAC,MAAK;YACP,MAAM,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE,EAAE,aAAa;AAC7C,YAAA,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,GAAG,EAAE,CAAC,WAAW,GAAG,KAAK;QACrD,CAAC,CAAC,CACH;AACkB,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAC,KAAK,gFAAC;QAClC,IAAA,CAAA,MAAM,GAAG,KAAK;AACL,QAAA,IAAA,CAAA,UAAU,GAAG,QAAQ,CAAW,MACjD,IAAI,CAAC,KAAK,EAAE,KAAK,SAAS,IAAI,IAAI,CAAC,SAAS,EAAE,GAAI,CAAA,EAAG,IAAI,CAAC,IAAI,EAAE,CAAA,OAAA,CAAsB,GAAG,IAAI,CAAC,IAAI,EAAE,iFACrG;QACS,IAAA,CAAA,SAAS,GAAc,OAAO;AAC9B,QAAA,IAAA,CAAA,eAAe,GAAG,MAAM,CAAC,KAAK,sFAAC;AAEtB,QAAA,IAAA,CAAA,YAAY,GAAG,SAAS,CAA0B,cAAc,mFAAC;QAqC3E,IAAA,CAAA,QAAQ,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,UAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAC;QAE1E,IAAA,CAAA,MAAM,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,CAAC,UAAU,EAAE,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,QAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAC;QApCzF,MAAM,CAAC,MAAK;AACV,YAAA,IAAI,CAAC,KAAK,EAAE,CAAC;AACb,YAAA,IAAI,CAAC,YAAY,EAAE,CAAC;YACpB,IAAI,CAAC,oBAAoB,EAAE;AAC7B,QAAA,CAAC,CAAC;IACJ;IAEA,OAAO,GAAA;AACL,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE;AAC1C,YAAA,MAAM,WAAW,GAAG,IAAI,CAAC,oBAAoB,EAAE,GAAG,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,KAAK;AAC5E,YAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,WAAW,CAAC;AAChC,YAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC;QAC9B;IACF;AAEA,IAAA,aAAa,CAAC,KAAc,EAAA;AAC1B,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE,KAAK,SAAS,EAAE;YAC9B;QACF;AACA,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC;IAC3B;AAEA,IAAA,cAAc,CAAC,KAAc,EAAA;AAC3B,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK;IACrB;IAEA,OAAO,GAAA;AACL,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;IACnB;IAEQ,oBAAoB,GAAA;AAC1B,QAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE;IACjC;AAMA,IAAA,SAAS,CAAC,MAAqB,EAAA;AAC7B,QAAA,IACE,CAAC,MAAM,CAAC,GAAG,KAAM,cAAc,CAAC,KAAgB,IAAI,MAAM,CAAC,GAAG,KAAM,cAAc,CAAC,KAAgB;AACnG,YAAA,CAAC,IAAI,CAAC,eAAe,EAAE,EACvB;YACA,IAAI,CAAC,OAAO,EAAE;QAChB;aAAO,IACL,IAAI,CAAC,eAAe,EAAE;AACtB,aAAC,MAAM,CAAC,GAAG,KAAM,cAAc,CAAC,KAAgB,IAAI,MAAM,CAAC,GAAG,KAAM,cAAc,CAAC,KAAgB,CAAC,EACpG;YACA,IAAI,CAAC,OAAO,EAAE;QAChB;IACF;+GAlNW,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mGAAZ,YAAY,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,oBAAA,EAAA,EAAA,iBAAA,EAAA,sBAAA,EAAA,UAAA,EAAA,sBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,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,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,mBAAA,EAAA,EAAA,iBAAA,EAAA,qBAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,KAAA,EAAA,OAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,cAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,cAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC7BzB,m4DAsDA,EAAA,MAAA,EAAA,CAAA,s9MAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED3BY,UAAU,gRAAE,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,OAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,iBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAE,SAAS,EAAA,IAAA,EAAA,OAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAE,eAAe,EAAA,IAAA,EAAA,aAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAE1D,YAAY,EAAA,UAAA,EAAA,CAAA;kBAPxB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,QAAQ,EAAA,eAAA,EACD,uBAAuB,CAAC,MAAM,EAAA,OAAA,EAGtC,CAAC,UAAU,EAAE,mBAAmB,EAAE,SAAS,EAAE,eAAe,CAAC,EAAA,QAAA,EAAA,m4DAAA,EAAA,MAAA,EAAA,CAAA,s9MAAA,CAAA,EAAA;27CA+JD,cAAc,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;MElKxE,kBAAkB,CAAA;+GAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,YAX3B,YAAY;YACZ,mBAAmB;YACnB,sBAAsB;YACtB,gBAAgB;YAChB,cAAc;YACd,eAAe;AACf,YAAA,YAAY,aAEJ,YAAY,CAAA,EAAA,CAAA,CAAA;AAGX,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,YAX3B,YAAY;YACZ,mBAAmB;YACnB,sBAAsB;YACtB,gBAAgB;YAChB,cAAc;YAEd,YAAY,CAAA,EAAA,CAAA,CAAA;;4FAKH,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAb9B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE;wBACP,YAAY;wBACZ,mBAAmB;wBACnB,sBAAsB;wBACtB,gBAAgB;wBAChB,cAAc;wBACd,eAAe;wBACf,YAAY;AACb,qBAAA;oBACD,OAAO,EAAE,CAAC,YAAY,CAAC;AACvB,oBAAA,SAAS,EAAE,EAAE;AACd,iBAAA;;;ACvBD;;AAEG;;;;"}

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

@@ -146,8 +146,8 @@ class ToggleComponent {
     setClasses() {
         this.classes = `${this.disabled ? 'disabled' : ''} ${this.applicationTheme} ${this.loading ? 'loading' : ''} ${!this.label ? 'small-toggle' : ''}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ToggleComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ToggleComponent, isStandalone: true, selector: "ui-toggle", inputs: { selected: "selected", disabled: "disabled", label: "label", message: "message", maxWidth: "maxWidth", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", preventClick: "preventClick", loading: "loading", ariaDescribedby: "ariaDescribedby" }, outputs: { toggle: "toggle" }, host: { properties: { "style.--max-width": "this.maxWidth" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ToggleComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ToggleComponent, isStandalone: true, selector: "ui-toggle", inputs: { selected: "selected", disabled: "disabled", label: "label", message: "message", maxWidth: "maxWidth", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", preventClick: "preventClick", loading: "loading", ariaDescribedby: "ariaDescribedby" }, outputs: { toggle: "toggle" }, host: { properties: { "style.--max-width": "this.maxWidth" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ToggleComponent),
@@ -155,7 +155,7 @@ class ToggleComponent {
             },
         ], usesOnChanges: true, ngImport: i0, template: "<div class=\"toggle\" [ngClass]=\"classes\">\n  <div\n    [style.--max-width]=\"maxWidth + 'px'\"\n    tabindex=\"0\"\n    class=\"toggle-container\"\n    [ngClass]=\"{ active: selected }\"\n    (click)=\"onToggle()\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-required]=\"ariaRequired\"\n    (keydown)=\"onKeydown($event)\"\n    role=\"switch\"\n    [attr.aria-labelledby]=\"'label'\"\n    [attr.aria-describedby]=\"'ariaDescribedby'\"\n    [attr.aria-checked]=\"selected\"\n  >\n    <span [style.display]=\"'none'\" id=\"ariaDescribedby\">{{ ariaDescribedby }}</span>\n    <div\n      class=\"label\"\n      uiEllipseText\n      [matTooltipShowDelay]=\"800\"\n      [matTooltip]=\"showLabelTooltip ? label : ''\"\n      (onChangeTextState)=\"changeTextState($event)\"\n      id=\"label\"\n    >\n      {{ label }}\n    </div>\n    @if (!loading) {\n      <div class=\"knob\" [ngClass]=\"{ selected }\">\n        @if (selected && !label) {\n          <ui-icon [color]=\"disabled ? 'grey' : 'white'\" [size]=\"'16'\" [name]=\"'Check-round-filled'\"></ui-icon>\n        }\n      </div>\n    } @else {\n      <ui-spinner [isLoader]=\"false\" [size]=\"'small'\" [applicationTheme]=\"'dark'\"></ui-spinner>\n    }\n  </div>\n  @if (message && selected) {\n    <div class=\"message\">{{ message }}</div>\n  }\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}:host{width:fit-content;display:block}:host .toggle{height:auto;width:fit-content;display:flex;flex-direction:column;align-items:center}:host .toggle .toggle-container{border:1px solid transparent}:host .toggle.disabled{opacity:.5}:host .toggle.disabled .label{color:#242424!important}:host .toggle.disabled .toggle-container{background:#e0e0e0;pointer-events:none}:host .toggle.disabled .toggle-container:focus{outline:none}:host .toggle.dark.disabled .toggle-container.active,:host .toggle.light.disabled .toggle-container.active{background:#e9e9e9;border:1px solid #242424}:host .toggle.dark.disabled .toggle-container.active .knob:after,:host .toggle.light.disabled .toggle-container.active .knob:after{background:#242424}:host .toggle.dark .toggle-container,:host .toggle.light .toggle-container{background:transparent;border:1px solid #242424}:host .toggle.dark .toggle-container .label,:host .toggle.light .toggle-container .label{color:#242424}:host .toggle.dark .toggle-container .knob:after,:host .toggle.light .toggle-container .knob:after{background:#242424}:host .toggle.dark .toggle-container.active,:host .toggle.light .toggle-container.active{background:#d410aa;border:1px solid #d410aa}:host .toggle.dark .toggle-container.active .label,:host .toggle.light .toggle-container.active .label{color:#fff}:host .toggle.dark .toggle-container.active .knob:after,:host .toggle.light .toggle-container.active .knob:after{background:#fff}:host .toggle.dark .message,:host .toggle.light .message{color:#242424}:host .toggle.dark.disabled .toggle-container.active{border-color:#fff}:host .toggle.dark.disabled .toggle-container.active .knob:after{background:#fff}:host .toggle.dark .toggle-container{border-color:#fff}:host .toggle.dark .toggle-container .label{color:#fff}:host .toggle.dark .toggle-container .knob:after{background:#fff}:host .toggle.dark .message{color:#fff}:host .toggle .toggle-container{min-height:20px;max-height:24px;max-width:var(--max-width);padding:0 3px 0 20px;width:fit-content;min-width:36px;border-radius:16px;background:#888;display:flex;align-items:center;cursor:pointer;position:relative;transition:transform .3s,padding .3s,background .3s}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}:host .toggle .toggle-container:focus-visible{position:relative;outline:2px solid #242424;outline-offset:2px;animation:focus-ring-animation .4s forwards}:host .toggle .toggle-container:focus-visible:after{content:\"\";position:absolute;width:calc(100% + 2px);height:calc(100% + 2px);top:-1px;left:-1px;outline:2px solid #ffffff;border-radius:16px}:host .toggle .toggle-container .knob{height:100%;width:100%;position:absolute;left:-1px;top:0;display:flex;align-items:center;padding:3px;max-height:20px;transition:transform .3s}:host .toggle .toggle-container .knob:after{content:\"\";display:block;border-radius:16px;width:12px;height:12px;background:#fff;transition:background .3s}:host .toggle .toggle-container .label{z-index:1;font-size:8px;font-weight:700;color:#fff;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;pointer-events:visible;line-height:16px}:host .toggle .toggle-container.active{background:#276678;padding:0 20px 0 3px}:host .toggle .toggle-container.active .knob{transform:translate(calc(100% - 15px))}:host .toggle .message{margin-top:4px;font-weight:700;font-size:12px;line-height:16px;color:#276678;text-align:justify}:host .toggle.small-toggle .toggle-container .knob{left:0}:host .toggle.small-toggle .toggle-container .knob:after{width:10px;height:10px}:host .toggle.small-toggle .toggle-container .knob.selected{left:-8px}:host .toggle.small-toggle .toggle-container .knob.selected:after{display:none}:host .toggle.small-toggle .toggle-container .knob.selected ui-icon ::ng-deep svg{width:20px;height:20px}:host .toggle.loading .toggle-container{border-color:#d410aa;background-color:#d410aa;padding:0;display:flex;justify-content:center;cursor:default}::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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { 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: "component", type: SpinnerComponent, selector: "ui-spinner", inputs: ["size", "isLoader", "text", "applicationTheme", "iconName", "iconSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-toggle', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -199,8 +199,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }] } });
 
 class ToggleComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ToggleComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: ToggleComponentModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ToggleComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: ToggleComponentModule, imports: [CommonModule,
             MatTooltipModule,
             EllipseTextDirective,
             MatInputModule,
@@ -208,14 +208,14 @@ class ToggleComponentModule {
             IconComponentModule,
             SpinnerComponentModule,
             ToggleComponent], exports: [ToggleComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ToggleComponentModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ToggleComponentModule, imports: [CommonModule,
             MatTooltipModule,
             MatInputModule,
             IconComponentModule,
             SpinnerComponentModule,
             ToggleComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ToggleComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ToggleComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

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

@@ -118,10 +118,10 @@ class TooltipTemplateDirective {
             .withPush(true);
         this._overlayRef = this._overlay.create({ positionStrategy });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TooltipTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: TooltipTemplateDirective, isStandalone: true, selector: "[uiTooltipTemplate]", inputs: { tooltipPosition: "tooltipPosition", showTooltip: "showTooltip", templateRef: ["uiTooltipTemplate", "templateRef"] }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()" } }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TooltipTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: TooltipTemplateDirective, isStandalone: true, selector: "[uiTooltipTemplate]", inputs: { tooltipPosition: "tooltipPosition", showTooltip: "showTooltip", templateRef: ["uiTooltipTemplate", "templateRef"] }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()" } }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TooltipTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TooltipTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[uiTooltipTemplate]',
@@ -216,10 +216,10 @@ class TooltipComponent {
                 break;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TooltipComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: TooltipComponent, isStandalone: true, selector: "ui-tooltip", inputs: { position: "position", disabled: ["disabled", "disabled", booleanAttribute], message: "message", applicationTheme: "applicationTheme", labelForDefinition: "labelForDefinition", definitionTooltipSize: "definitionTooltipSize", variant: "variant" }, ngImport: i0, template: "@if (variant === 'definition') {\n  <div\n    [tabindex]=\"0\"\n    class=\"definition-tooltip\"\n    [attr.aria-label]=\"labelForDefinition + ', ' + ('TOOLTIP.DETAILS' | uiTranslate | async) + ':' + message\"\n    style=\"position: relative\"\n    [tooltipPosition]=\"position\"\n    [uiTooltipTemplate]=\"dif\"\n  >\n    <span\n      class=\"label-definition-outside\"\n      [ngClass]=\"'tooltip-size-' + definitionTooltipSize\"\n      uiEllipseText\n      (onChangeTextState)=\"isLabelEllipse = $event\"\n    >\n      {{ labelForDefinition }}\n    </span>\n  </div>\n\n  <ng-template #dif>\n    <div [attr.aria-label]=\"labelForDefinition + ' ' + message\"></div>\n    @if (isLabelEllipse) {\n      <div class=\"label-definition-inner\">\n        {{ labelForDefinition }}\n      </div>\n    }\n    <div class=\"text-definition\">\n      {{ message }}\n    </div>\n  </ng-template>\n} @else {\n  <div\n    [matTooltip]=\"message\"\n    [matTooltipDisabled]=\"disabled\"\n    [matTooltipPosition]=\"matPosition\"\n    [matTooltipClass]=\"applicationTheme\"\n    [attr.aria-label]=\"message\"\n    tabindex=\"0\"\n    style=\"position: relative\"\n  >\n    <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">{{ message }}</div>\n    <ng-content></ng-content>\n    @if (templateRef) {\n      <div [class]=\"'template-tooltip'\">\n        <ng-container *ngTemplateOutlet=\"templateRef\"></ng-container>\n      </div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "directive", type: TooltipTemplateDirective, selector: "[uiTooltipTemplate]", inputs: ["tooltipPosition", "showTooltip", "uiTooltipTemplate"] }, { kind: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TooltipComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: TooltipComponent, isStandalone: true, selector: "ui-tooltip", inputs: { position: "position", disabled: ["disabled", "disabled", booleanAttribute], message: "message", applicationTheme: "applicationTheme", labelForDefinition: "labelForDefinition", definitionTooltipSize: "definitionTooltipSize", variant: "variant" }, ngImport: i0, template: "@if (variant === 'definition') {\n  <div\n    [tabindex]=\"0\"\n    class=\"definition-tooltip\"\n    [attr.aria-label]=\"labelForDefinition + ', ' + ('TOOLTIP.DETAILS' | uiTranslate | async) + ':' + message\"\n    style=\"position: relative\"\n    [tooltipPosition]=\"position\"\n    [uiTooltipTemplate]=\"dif\"\n  >\n    <span\n      class=\"label-definition-outside\"\n      [ngClass]=\"'tooltip-size-' + definitionTooltipSize\"\n      uiEllipseText\n      (onChangeTextState)=\"isLabelEllipse = $event\"\n    >\n      {{ labelForDefinition }}\n    </span>\n  </div>\n\n  <ng-template #dif>\n    <div [attr.aria-label]=\"labelForDefinition + ' ' + message\"></div>\n    @if (isLabelEllipse) {\n      <div class=\"label-definition-inner\">\n        {{ labelForDefinition }}\n      </div>\n    }\n    <div class=\"text-definition\">\n      {{ message }}\n    </div>\n  </ng-template>\n} @else {\n  <div\n    [matTooltip]=\"message\"\n    [matTooltipDisabled]=\"disabled\"\n    [matTooltipPosition]=\"matPosition\"\n    [matTooltipClass]=\"applicationTheme\"\n    [attr.aria-label]=\"message\"\n    tabindex=\"0\"\n    style=\"position: relative\"\n  >\n    <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">{{ message }}</div>\n    <ng-content></ng-content>\n    @if (templateRef) {\n      <div [class]=\"'template-tooltip'\">\n        <ng-container *ngTemplateOutlet=\"templateRef\"></ng-container>\n      </div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "directive", type: TooltipTemplateDirective, selector: "[uiTooltipTemplate]", inputs: ["tooltipPosition", "showTooltip", "uiTooltipTemplate"] }, { kind: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         TooltipTemplateDirective,
@@ -253,17 +253,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }] } });
 
 class TooltipComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TooltipComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: TooltipComponentModule, imports: [MatTooltipModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TooltipComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: TooltipComponentModule, imports: [MatTooltipModule,
             CommonModule,
             TooltipTemplateDirective,
             EllipseTextDirective,
             UiTranslatePipe,
             TooltipComponent], exports: [TooltipComponent, TooltipTemplateDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TooltipComponentModule, providers: [{ provide: 'TooltipComponentToken', useValue: TooltipComponent }], imports: [MatTooltipModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TooltipComponentModule, providers: [{ provide: 'TooltipComponentToken', useValue: TooltipComponent }], imports: [MatTooltipModule,
             CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TooltipComponentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TooltipComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [