@scania/tegel 1.21.1 → 1.22.0-feat-dropdown-allow-numbers-testing-beta.0

package/dist/collection/components/popover-core/popover-core.js

@@ -1,6 +1,7 @@
 import { Host, h, } from "@stencil/core";
 import { createPopper } from "@popperjs/core";
 import generateUniqueId from "../../utils/generateUniqueId";
+import { generateClassList } from "../../utils/classList";
 export class TdsPopoverCore {
     constructor() {
         this.uuid = generateUniqueId();
@@ -12,6 +13,7 @@ export class TdsPopoverCore {
                 this.isShown = isShown;
             }
             if (this.isShown) {
+                this.hasShownAtLeastOnce = true;
                 this.internalTdsShow.emit();
             }
             else {
@@ -33,6 +35,7 @@ export class TdsPopoverCore {
         this.selector = undefined;
         this.referenceEl = undefined;
         this.defaultShow = false;
+        this.animation = 'none';
         this.show = null;
         this.placement = 'auto';
         this.offsetSkidding = 0;
@@ -45,6 +48,7 @@ export class TdsPopoverCore {
         this.target = undefined;
         this.isShown = false;
         this.disableLogic = false;
+        this.hasShownAtLeastOnce = false;
     }
     /** Property for closing popover programmatically */
     async close() {
@@ -147,11 +151,15 @@ export class TdsPopoverCore {
             trigger: this.trigger,
         });
     }
-    /* To enable initial loading of a component if user controls show prop*/
+    /* To enable initial loading of a component if user controls show prop */
     componentWillLoad() {
+        // Ensure initial visibility is handled properly
         if (this.show === true || this.defaultShow === true) {
             this.setIsShown(true);
         }
+        else {
+            this.setIsShown(false);
+        }
     }
     componentDidRender() {
         if (this.isShown && !this.renderedShowValue && !this.disableLogic) {
@@ -165,14 +173,28 @@ export class TdsPopoverCore {
         this.cleanUp();
     }
     render() {
-        let hostStyle = {};
-        if (this.autoHide) {
-            hostStyle = { display: this.isShown ? 'block' : 'none' };
-        }
-        return (h(Host, { key: 'f431ee317f779f6159491bfd4826b3160e01df5c', style: hostStyle, id: `tds-popover-core-${this.uuid}` }, h("slot", { key: 'b5325e06abd4fb880952ec7527b6de400b9938d4' })));
+        const classes = {
+            'is-shown': (this.isShown && this.animation === 'none') || this.animation === undefined,
+            'is-hidden': (!this.isShown && this.animation === 'none') || this.animation === undefined,
+            'initially-hidden': !this.hasShownAtLeastOnce,
+            'tds-animation-enter-fade': this.isShown && this.animation === 'fade',
+            'tds-animation-exit-fade': !this.isShown && this.animation === 'fade',
+        };
+        const classList = generateClassList(classes);
+        return (h(Host, { key: '8893e2cca1fedd09a8dfff8ceeb12b47cbf07e09', class: classList, id: `tds-popover-core-${this.uuid}` }, h("slot", { key: '7e075900d43b4f6d3009ef37f11059fd646e708e' })));
     }
     static get is() { return "tds-popover-core"; }
     static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tds-popover-core.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tds-popover-core.css"]
+        };
+    }
     static get properties() {
         return {
             "selector": {
@@ -230,6 +252,24 @@ export class TdsPopoverCore {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "animation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'fade' | string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the popover should animate when being opened/closed or not"
+                },
+                "attribute": "animation",
+                "reflect": false,
+                "defaultValue": "'none'"
+            },
             "show": {
                 "type": "boolean",
                 "mutable": false,
@@ -373,7 +413,8 @@ export class TdsPopoverCore {
             "popperInstance": {},
             "target": {},
             "isShown": {},
-            "disableLogic": {}
+            "disableLogic": {},
+            "hasShownAtLeastOnce": {}
         };
     }
     static get events() {