@norwegian/core-components 7.12.1 → 7.12.3

package/fesm2022/norwegian-core-components.mjs

@@ -2,17 +2,17 @@ import * as i0 from '@angular/core';
 import { isDevMode, Injectable, Directive, Input, HostBinding, NgModule, Component, ViewEncapsulation, EventEmitter, Output, ChangeDetectionStrategy, ViewChild, Inject, HostListener, ViewChildren, ContentChildren } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, registerLocaleData, DOCUMENT, DatePipe } from '@angular/common';
-import localeEnCa from '@angular/common/locales/en-CA';
 import localeDa from '@angular/common/locales/da';
 import localeDe from '@angular/common/locales/de';
+import localeEnGb from '@angular/common/locales/en-GB';
+import localeEn from '@angular/common/locales/en';
 import localeEs from '@angular/common/locales/es';
 import localeFi from '@angular/common/locales/fi';
-import localeEnIe from '@angular/common/locales/en-IE';
-import localeEn from '@angular/common/locales/en';
+import localeFr from '@angular/common/locales/fr';
+import localeIt from '@angular/common/locales/it';
 import localeNo from '@angular/common/locales/nb';
 import localePl from '@angular/common/locales/pl';
 import localeSv from '@angular/common/locales/sv';
-import localeEnGb from '@angular/common/locales/en-GB';
 import { Observable, Subject, BehaviorSubject } from 'rxjs';
 import * as i3$1 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule, FormControl } from '@angular/forms';
@@ -593,6 +593,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 class LanguageHelper {
+    constructor() {
+        this.fallbackLanguageCodeValue = 'en';
+        this.languageCodeValue = this.fallbackLanguageCodeValue;
+        this.defaultCountryValue = "uk";
+    }
     languageCode() {
         return this.languageCodeValue;
     }
@@ -603,94 +608,75 @@ class LanguageHelper {
         return this.defaultCountryValue;
     }
     setLanguageBasedOnMarketCode(marketCode) {
-        const englishLanguageCode = 'en';
-        const noDefaultCountry = '';
-        this.languageCodeValue = englishLanguageCode;
-        this.fallbackLanguageCodeValue = englishLanguageCode;
-        this.defaultCountryValue = noDefaultCountry;
+        const englishLanguageCode = "en";
         if (marketCode) {
             switch (marketCode.toLowerCase()) {
-                case 'en-ca':
-                    this.languageCodeValue = englishLanguageCode;
-                    this.fallbackLanguageCodeValue = englishLanguageCode;
-                    this.defaultCountryValue = 'CA';
-                    registerLocaleData(localeEnCa, this.languageCodeValue);
-                    break;
                 case 'dk':
                     this.languageCodeValue = 'da';
-                    this.fallbackLanguageCodeValue = englishLanguageCode;
                     this.defaultCountryValue = 'DK';
                     registerLocaleData(localeDa, this.languageCodeValue);
                     break;
                 case 'de':
                     this.languageCodeValue = 'de';
-                    this.fallbackLanguageCodeValue = englishLanguageCode;
                     this.defaultCountryValue = 'DE';
                     registerLocaleData(localeDe, this.languageCodeValue);
                     break;
+                case 'en':
+                    this.languageCodeValue = englishLanguageCode;
+                    registerLocaleData(localeEn, this.languageCodeValue);
+                    break;
                 case 'es':
                     this.languageCodeValue = 'es';
-                    this.fallbackLanguageCodeValue = englishLanguageCode;
                     this.defaultCountryValue = 'ES';
                     registerLocaleData(localeEs, this.languageCodeValue);
                     break;
                 case 'fi':
                     this.languageCodeValue = 'fi';
-                    this.fallbackLanguageCodeValue = englishLanguageCode;
                     this.defaultCountryValue = 'FI';
                     registerLocaleData(localeFi, this.languageCodeValue);
                     break;
+                case 'fr':
+                    this.languageCodeValue = 'fr';
+                    this.defaultCountryValue = 'FR';
+                    registerLocaleData(localeFr, this.languageCodeValue);
+                    break;
                 case 'ie':
-                    this.languageCodeValue = 'en-IE';
-                    this.fallbackLanguageCodeValue = englishLanguageCode;
+                    this.languageCodeValue = englishLanguageCode;
                     this.defaultCountryValue = 'IE';
-                    registerLocaleData(localeEnIe, this.languageCodeValue);
+                    registerLocaleData(localeEn, this.languageCodeValue);
+                    break;
+                case 'it':
+                    this.languageCodeValue = 'it';
+                    this.defaultCountryValue = 'IT';
+                    registerLocaleData(localeIt, this.languageCodeValue);
                     break;
                 case 'nl':
                     this.languageCodeValue = englishLanguageCode;
-                    this.fallbackLanguageCodeValue = englishLanguageCode;
                     this.defaultCountryValue = 'NL';
                     registerLocaleData(localeEn, this.languageCodeValue);
                     break;
                 case 'no':
-                    this.languageCodeValue = 'no';
-                    this.fallbackLanguageCodeValue = englishLanguageCode;
+                    this.languageCodeValue = 'nb';
                     this.defaultCountryValue = 'NO';
                     registerLocaleData(localeNo, this.languageCodeValue);
                     break;
-                case 'en':
-                    this.languageCodeValue = englishLanguageCode;
-                    this.fallbackLanguageCodeValue = englishLanguageCode;
-                    this.defaultCountryValue = noDefaultCountry;
-                    registerLocaleData(localeEn, this.languageCodeValue);
-                    break;
                 case 'pl':
                     this.languageCodeValue = 'pl';
-                    this.fallbackLanguageCodeValue = englishLanguageCode;
                     this.defaultCountryValue = 'PL';
                     registerLocaleData(localePl, this.languageCodeValue);
                     break;
-                case 'sg':
-                    this.languageCodeValue = englishLanguageCode;
-                    this.fallbackLanguageCodeValue = englishLanguageCode;
-                    this.defaultCountryValue = 'SG';
-                    registerLocaleData(localeEn, this.languageCodeValue);
-                    break;
                 case 'se':
                     this.languageCodeValue = 'sv';
-                    this.fallbackLanguageCodeValue = englishLanguageCode;
                     this.defaultCountryValue = 'SE';
                     registerLocaleData(localeSv, this.languageCodeValue);
                     break;
                 case 'uk':
                     this.languageCodeValue = englishLanguageCode;
-                    this.fallbackLanguageCodeValue = englishLanguageCode;
                     this.defaultCountryValue = 'GB';
                     registerLocaleData(localeEnGb, this.languageCodeValue);
                     break;
                 case 'us':
                     this.languageCodeValue = englishLanguageCode;
-                    this.fallbackLanguageCodeValue = englishLanguageCode;
                     this.defaultCountryValue = 'US';
                     registerLocaleData(localeEn, this.languageCodeValue);
                     break;
@@ -13133,12 +13119,21 @@ class TooltipComponent extends NasComponentBase {
         setTimeout(() => {
             this.adjustTooltipPosition();
         });
+        this.setToolTipOpacity(1, 300);
     }
     onMouseLeave() {
-        if (this.hostListenerIgnored) {
-            return;
+        this.hideToolTip();
+    }
+    onScroll() {
+        this.hideToolTip();
+    }
+    onClickOutside(event) {
+        if (this.container) {
+            const clickedInside = this.container.nativeElement.contains(event.target);
+            if (!clickedInside) {
+                this.hideToolTip();
+            }
         }
-        this.enabled = false;
     }
     onResize() {
         this.innerWidth = window.innerWidth;
@@ -13164,12 +13159,14 @@ class TooltipComponent extends NasComponentBase {
     }
     onClickClose() {
         this.enabled = false;
+        this.setToolTipOpacity(0);
     }
     onClickOpenMobileView() {
         if (!this.deviceHelper.isMobileWidth()) {
             return;
         }
         this.enabled = true;
+        this.setToolTipOpacity(1, 300);
     }
     adjustTooltipPosition() {
         if (!this.tooltip || !this.content) {
@@ -13190,26 +13187,48 @@ class TooltipComponent extends NasComponentBase {
         }
     }
     renderViewHostListenerIgnoredOnInit() {
+        const tooltipElement = this.tooltip?.nativeElement;
+        const contentElement = this.content?.nativeElement;
+        if (!tooltipElement || !contentElement) {
+            return;
+        }
+        tooltipElement.style.opacity = 1;
         if (this.exists(this.left)) {
             this.left = true;
         }
         if (this.exists(this.right)) {
             this.right = true;
-            const tooltipElement = this.tooltip?.nativeElement;
-            const contentElement = this.content?.nativeElement;
             if (tooltipElement && contentElement) {
                 const contentWidth = contentElement.getBoundingClientRect()?.width;
                 tooltipElement.style.right = `${contentWidth / 2}px`;
             }
         }
     }
+    hideToolTip() {
+        if (this.hostListenerIgnored) {
+            return;
+        }
+        this.enabled = false;
+        this.setToolTipOpacity(0);
+    }
+    setToolTipOpacity(value, timout = 0) {
+        if (!this.tooltip) {
+            return;
+        }
+        setTimeout(() => {
+            this.tooltip.nativeElement.style.opacity = value;
+        }, timout);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipComponent, deps: [{ token: DeviceHelper }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TooltipComponent, selector: "nas-tooltip", inputs: { text: "text", enabled: "enabled", left: "left", right: "right" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [nasClass]=\"getClasses('')\">\n    <div [hidden]=\"!text || !enabled\" [nasClass]=\"getClasses('tooltip', [left && 'left', right && 'right'])\" #tooltip>\n        <button [nasClass]=\"getClasses('close')\" (click)=\"onClickClose()\">\n            <nas-icon [icon]=\"'close--light'\" [type]=\"'small'\"></nas-icon>\n        </button>\n        <p [nasClass]=\"getClasses('text')\">{{text}}</p>\n        <span [nasClass]=\"getClasses('tooltip--arrow', [left && 'left', right && 'right'])\"></span>\n    </div>\n    <div [nasClass]=\"getClasses('content')\" #content (click)=\"onClickOpenMobileView()\">\n        <ng-content></ng-content>\n    </div>\n</div>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}:host{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.nas-tooltip{position:relative}.nas-tooltip__tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(-16px);background-color:#15273f;padding:16px;width:-webkit-max-content;width:max-content;max-width:250px}.nas-tooltip__tooltip--left{transform:translate(0) translateY(-16px)}.nas-tooltip__tooltip--right{transform:translate(0) translateY(-16px);left:unset}.nas-tooltip__tooltip--arrow{position:absolute;display:block;bottom:-8px;left:50%;transform:translate(-50%) rotate(45deg);border-top:24px solid #15273F;border-right:24px solid #15273F}.nas-tooltip__tooltip--arrow--left{transform:translate(0) rotate(0);left:0;bottom:-12px;border-top:16px solid #15273F;border-right:24px solid transparent}.nas-tooltip__tooltip--arrow--right{transform:translate(0) rotate(0);left:unset;right:0;bottom:-12px;border-top:16px solid #15273F;border-left:24px solid transparent;border-right:0}.nas-tooltip__text{font-size:14px;line-height:20px;color:#fff;margin:0}.nas-tooltip__close{float:right;height:auto;display:block}@media (min-width: 640px){.nas-tooltip__close{display:none}}.nas-tooltip__close ::ng-deep nas-icon,.nas-tooltip__close ::ng-deep .nas-icon-small{display:block;height:16px;width:16px;margin:0}\n"], dependencies: [{ kind: "directive", type: NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TooltipComponent, selector: "nas-tooltip", inputs: { text: "text", enabled: "enabled", left: "left", right: "right" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "window:scroll": "onScroll()", "document:click": "onClickOutside($event)", "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div #container [nasClass]=\"getClasses('')\">\n    <div [hidden]=\"!text || !enabled\" [nasClass]=\"getClasses('tooltip', [left && 'left', right && 'right'])\" #tooltip>\n        <button [nasClass]=\"getClasses('close')\" (click)=\"onClickClose()\">\n            <nas-icon [icon]=\"'close--light'\" [type]=\"'small'\"></nas-icon>\n        </button>\n        <p [nasClass]=\"getClasses('text')\">{{text}}</p>\n        <span [nasClass]=\"getClasses('tooltip--arrow', [left && 'left', right && 'right'])\"></span>\n    </div>\n    <div [nasClass]=\"getClasses('content')\" #content (click)=\"onClickOpenMobileView()\">\n        <ng-content></ng-content>\n    </div>\n</div>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}:host{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.nas-tooltip{position:relative}.nas-tooltip__tooltip{opacity:0;position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(-16px);background-color:#15273f;padding:16px;width:-webkit-max-content;width:max-content;max-width:250px}.nas-tooltip__tooltip--left{transform:translate(0) translateY(-16px)}.nas-tooltip__tooltip--right{transform:translate(0) translateY(-16px);left:unset}.nas-tooltip__tooltip--arrow{position:absolute;display:block;bottom:-8px;left:50%;transform:translate(-50%) rotate(45deg);border-top:24px solid #15273F;border-right:24px solid #15273F}.nas-tooltip__tooltip--arrow--left{transform:translate(0) rotate(0);left:0;bottom:-12px;border-top:16px solid #15273F;border-right:24px solid transparent}.nas-tooltip__tooltip--arrow--right{transform:translate(0) rotate(0);left:unset;right:0;bottom:-12px;border-top:16px solid #15273F;border-left:24px solid transparent;border-right:0}.nas-tooltip__text{font-size:14px;line-height:20px;color:#fff;margin:0}.nas-tooltip__close{float:right;height:auto;display:block}@media (min-width: 640px){.nas-tooltip__close{display:none}}.nas-tooltip__close ::ng-deep nas-icon,.nas-tooltip__close ::ng-deep .nas-icon-small{display:block;height:16px;width:16px;margin:0}\n"], dependencies: [{ kind: "directive", type: NasClassDirective, selector: "[nasClass]", inputs: ["nasClass", "attr.class"] }, { kind: "component", type: IconComponent, selector: "nas-icon", inputs: ["icon", "type", "isIndicator", "lightCircularBackground", "cssClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nas-tooltip', template: "<div [nasClass]=\"getClasses('')\">\n    <div [hidden]=\"!text || !enabled\" [nasClass]=\"getClasses('tooltip', [left && 'left', right && 'right'])\" #tooltip>\n        <button [nasClass]=\"getClasses('close')\" (click)=\"onClickClose()\">\n            <nas-icon [icon]=\"'close--light'\" [type]=\"'small'\"></nas-icon>\n        </button>\n        <p [nasClass]=\"getClasses('text')\">{{text}}</p>\n        <span [nasClass]=\"getClasses('tooltip--arrow', [left && 'left', right && 'right'])\"></span>\n    </div>\n    <div [nasClass]=\"getClasses('content')\" #content (click)=\"onClickOpenMobileView()\">\n        <ng-content></ng-content>\n    </div>\n</div>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}:host{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.nas-tooltip{position:relative}.nas-tooltip__tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(-16px);background-color:#15273f;padding:16px;width:-webkit-max-content;width:max-content;max-width:250px}.nas-tooltip__tooltip--left{transform:translate(0) translateY(-16px)}.nas-tooltip__tooltip--right{transform:translate(0) translateY(-16px);left:unset}.nas-tooltip__tooltip--arrow{position:absolute;display:block;bottom:-8px;left:50%;transform:translate(-50%) rotate(45deg);border-top:24px solid #15273F;border-right:24px solid #15273F}.nas-tooltip__tooltip--arrow--left{transform:translate(0) rotate(0);left:0;bottom:-12px;border-top:16px solid #15273F;border-right:24px solid transparent}.nas-tooltip__tooltip--arrow--right{transform:translate(0) rotate(0);left:unset;right:0;bottom:-12px;border-top:16px solid #15273F;border-left:24px solid transparent;border-right:0}.nas-tooltip__text{font-size:14px;line-height:20px;color:#fff;margin:0}.nas-tooltip__close{float:right;height:auto;display:block}@media (min-width: 640px){.nas-tooltip__close{display:none}}.nas-tooltip__close ::ng-deep nas-icon,.nas-tooltip__close ::ng-deep .nas-icon-small{display:block;height:16px;width:16px;margin:0}\n"] }]
-        }], ctorParameters: function () { return [{ type: DeviceHelper }]; }, propDecorators: { tooltip: [{
+            args: [{ selector: 'nas-tooltip', template: "<div #container [nasClass]=\"getClasses('')\">\n    <div [hidden]=\"!text || !enabled\" [nasClass]=\"getClasses('tooltip', [left && 'left', right && 'right'])\" #tooltip>\n        <button [nasClass]=\"getClasses('close')\" (click)=\"onClickClose()\">\n            <nas-icon [icon]=\"'close--light'\" [type]=\"'small'\"></nas-icon>\n        </button>\n        <p [nasClass]=\"getClasses('text')\">{{text}}</p>\n        <span [nasClass]=\"getClasses('tooltip--arrow', [left && 'left', right && 'right'])\"></span>\n    </div>\n    <div [nasClass]=\"getClasses('content')\" #content (click)=\"onClickOpenMobileView()\">\n        <ng-content></ng-content>\n    </div>\n</div>", styles: ["@keyframes fade-in{0%{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(-30px)}}@keyframes fade-in-left{0%{opacity:0;transform:translate(-30px)}}@keyframes fade-in-right{0%{opacity:0;transform:translate(30px)}}@keyframes fade-out{to{opacity:0}}@keyframes flip-in{0%{opacity:0;transform:rotateX(-90deg)}40%{opacity:1;transform:rotateX(10deg)}}@keyframes flip-out{to{opacity:0;transform:rotateX(-90deg)}}@keyframes pop-in-from-top{0%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-100,1,1);opacity:0}6.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-30.227,1,1)}13.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,1.76,1,1)}20%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,7.08,1,1)}26.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,3.838,1,1)}33.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.902,1,1);opacity:1}40%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.237,1,1)}46.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.312,1,1)}53.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.141,1,1)}60%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.021,1,1)}66.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.015,1,1)}73.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.013,1,1)}80%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,.005,1,1)}86.67%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,1,1)}93.33%{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}to{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,-.001,1,1);-webkit-transform:translate3d(0,0,0)}}:host{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.nas-tooltip{position:relative}.nas-tooltip__tooltip{opacity:0;position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(-16px);background-color:#15273f;padding:16px;width:-webkit-max-content;width:max-content;max-width:250px}.nas-tooltip__tooltip--left{transform:translate(0) translateY(-16px)}.nas-tooltip__tooltip--right{transform:translate(0) translateY(-16px);left:unset}.nas-tooltip__tooltip--arrow{position:absolute;display:block;bottom:-8px;left:50%;transform:translate(-50%) rotate(45deg);border-top:24px solid #15273F;border-right:24px solid #15273F}.nas-tooltip__tooltip--arrow--left{transform:translate(0) rotate(0);left:0;bottom:-12px;border-top:16px solid #15273F;border-right:24px solid transparent}.nas-tooltip__tooltip--arrow--right{transform:translate(0) rotate(0);left:unset;right:0;bottom:-12px;border-top:16px solid #15273F;border-left:24px solid transparent;border-right:0}.nas-tooltip__text{font-size:14px;line-height:20px;color:#fff;margin:0}.nas-tooltip__close{float:right;height:auto;display:block}@media (min-width: 640px){.nas-tooltip__close{display:none}}.nas-tooltip__close ::ng-deep nas-icon,.nas-tooltip__close ::ng-deep .nas-icon-small{display:block;height:16px;width:16px;margin:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: DeviceHelper }]; }, propDecorators: { container: [{
+                type: ViewChild,
+                args: ['container', { static: false }]
+            }], tooltip: [{
                 type: ViewChild,
                 args: ['tooltip', { static: false }]
             }], content: [{
@@ -13229,6 +13248,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], onMouseLeave: [{
                 type: HostListener,
                 args: ['mouseleave']
+            }], onScroll: [{
+                type: HostListener,
+                args: ['window:scroll', []]
+            }], onClickOutside: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
             }], onResize: [{
                 type: HostListener,
                 args: ['window:resize', ['$event']]