@fluid-topics/ft-popover 2.0.36 → 2.0.37

package/build/ftds-popover.d.ts

@@ -1,12 +1,14 @@
 import { TemplateResult } from "lit";
 import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
 import { FtdsButton } from "@fluid-topics/ft-button";
-import { FtdsPopoverProperties } from "./ftds-popover.properties";
+import { FtdsPopoverMargins, FtdsPopoverProperties } from "./ftds-popover.properties";
 import { FtBasePopover } from "./ft-base-popover";
+import { ClassInfo } from "lit/directives/class-map";
 export declare class FtdsPopover extends FtBasePopover implements FtdsPopoverProperties {
     static styles: import("lit").CSSResult;
     static elementDefinitions: ElementDefinitionsMap;
     heading: string;
+    margins: FtdsPopoverMargins;
     protected openingButton?: FtdsButton;
     protected closingButton?: FtdsButton;
     private popoverContentDiv?;
@@ -24,4 +26,5 @@ export declare class FtdsPopover extends FtBasePopover implements FtdsPopoverPro
     protected renderFullContent(): TemplateResult;
     protected hideUnusedSlots(): void;
     private hasEmptySlot;
+    protected getPopoverWrapperClasses(): ClassInfo;
 }

package/build/ftds-popover.js

@@ -4,20 +4,21 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, nothing } from "lit";
-import { query } from "lit/decorators.js";
-import { unslotText } from "@fluid-topics/ft-wc-utils";
-import { FtdsTypography, FtdsTypographyVariants } from "@fluid-topics/ft-typography";
+import { html, nothing, } from "lit";
+import { property, query, } from "lit/decorators.js";
+import { unslotText, } from "@fluid-topics/ft-wc-utils";
+import { FtdsTypography, FtdsTypographyVariants, } from "@fluid-topics/ft-typography";
 import { FtdsButton } from "@fluid-topics/ft-button";
-import { DesignSystemFamily, DesignSystemSize, popover } from "@fluid-topics/design-system-variables";
+import { FtdsPopoverMargins, } from "./ftds-popover.properties";
+import { DesignSystemFamily, DesignSystemSize, popover, } from "@fluid-topics/design-system-variables";
 import { FtIcons } from "@fluid-topics/ft-icon";
 import { FtBasePopover } from "./ft-base-popover";
-import { property } from "lit/decorators.js";
 import { styles } from "./ftds-popover.styles";
 export class FtdsPopover extends FtBasePopover {
     constructor() {
         super(...arguments);
         this.heading = "";
+        this.margins = FtdsPopoverMargins.default;
         this.wrapperId = "ftds-popover-wrapper";
         this.headingId = "ftds-popover-heading";
         this.contentId = "ftds-popover-content";
@@ -82,6 +83,12 @@ export class FtdsPopover extends FtBasePopover {
     hasEmptySlot(slot) {
         return unslotText(slot).trim().length === 0;
     }
+    getPopoverWrapperClasses() {
+        return {
+            ...super.getPopoverWrapperClasses(),
+            "ftds-popover--dense": this.margins === FtdsPopoverMargins.dense,
+        };
+    }
 }
 FtdsPopover.styles = styles;
 FtdsPopover.elementDefinitions = {
@@ -91,6 +98,9 @@ FtdsPopover.elementDefinitions = {
 __decorate([
     property()
 ], FtdsPopover.prototype, "heading", void 0);
+__decorate([
+    property()
+], FtdsPopover.prototype, "margins", void 0);
 __decorate([
     query(`[part="opening-button"]`)
 ], FtdsPopover.prototype, "openingButton", void 0);

package/build/ftds-popover.properties.d.ts

@@ -1,4 +1,9 @@
 import { FtBasePopoverProperties } from "./ft-base-popover";
 export interface FtdsPopoverProperties extends FtBasePopoverProperties {
     heading?: string;
+    margins?: FtdsPopoverMargins;
+}
+export declare enum FtdsPopoverMargins {
+    default = "default",
+    dense = "dense"
 }

package/build/ftds-popover.properties.js

@@ -1 +1,5 @@
-export {};
+export var FtdsPopoverMargins;
+(function (FtdsPopoverMargins) {
+    FtdsPopoverMargins["default"] = "default";
+    FtdsPopoverMargins["dense"] = "dense";
+})(FtdsPopoverMargins || (FtdsPopoverMargins = {}));

package/build/ftds-popover.styles.js

@@ -42,11 +42,13 @@ export const styles = css `
         flex-direction: column;
 
         max-width: ${popover.maxWidth};
+        min-width: ${popover.minWidth};
+        max-height: ${popover.maxHeight}
 
-        padding-left: ${popover.horizontalPadding};
-        padding-right: ${popover.horizontalPadding};
-        padding-top: ${popover.verticalPadding};
-        padding-bottom: ${popover.verticalPadding};
+        padding-left: ${popover.defaultHorizontalPadding};
+        padding-right: ${popover.defaultHorizontalPadding};
+        padding-top: ${popover.defaultVerticalPadding};
+        padding-bottom: ${popover.defaultVerticalPadding};
         gap: ${popover.gap};
 
         background-color: ${popover.backgroundColor};
@@ -56,6 +58,13 @@ export const styles = css `
         &.positioned {
             visibility: visible;
         }
+
+        &.ftds-popover--dense {
+            padding-left: ${popover.denseHorizontalPadding};
+            padding-right: ${popover.denseHorizontalPadding};
+            padding-top: ${popover.denseVerticalPadding};
+            padding-bottom: ${popover.denseVerticalPadding};
+        }
     }
 
     [part="heading"] {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-popover",
-    "version": "2.0.36",
+    "version": "2.0.37",
     "description": "A simple popover component",
     "keywords": [
         "Lit"
@@ -19,13 +19,13 @@
         "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
     },
     "dependencies": {
-        "@fluid-topics/design-system-variables": "3.3.2",
-        "@fluid-topics/ft-button": "2.0.36",
-        "@fluid-topics/ft-icon": "2.0.36",
-        "@fluid-topics/ft-link": "2.0.36",
-        "@fluid-topics/ft-typography": "2.0.36",
-        "@fluid-topics/ft-wc-utils": "2.0.36",
+        "@fluid-topics/design-system-variables": "3.4.1",
+        "@fluid-topics/ft-button": "2.0.37",
+        "@fluid-topics/ft-icon": "2.0.37",
+        "@fluid-topics/ft-link": "2.0.37",
+        "@fluid-topics/ft-typography": "2.0.37",
+        "@fluid-topics/ft-wc-utils": "2.0.37",
         "lit": "3.1.0"
     },
-    "gitHead": "d06db60c90f63c49a49a7c8394cd02401fcccafb"
+    "gitHead": "ef1f68e09e0331293931458a6479b551dcc4cecc"
 }