@fluid-topics/ft-popover 1.2.65 → 1.2.66

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

@@ -0,0 +1,13 @@
+import { nothing, PropertyValues } from "lit";
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtdsPopoverSectionProperties } from "./ftds-popover-section.properties";
+export declare class FtdsPopoverSection extends FtLitElement implements FtdsPopoverSectionProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    heading: string;
+    private popoverSectionLinkTypography;
+    private popoverSectionLinkSlot;
+    protected render(): import("lit-html").TemplateResult<1>;
+    renderHeading(): import("lit-html").TemplateResult<1> | typeof nothing;
+    protected updated(props: PropertyValues): void;
+}

package/build/ftds-popover-section.js

@@ -0,0 +1,62 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { property, query } from "lit/decorators.js";
+import { FtLitElement, unslotText } from "@fluid-topics/ft-wc-utils";
+import { FtTypography } from "@fluid-topics/ft-typography";
+import { sectionStyles } from "./ftds-popover-section.styles";
+class FtdsPopoverSection extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.heading = "";
+    }
+    render() {
+        return html `
+            <div class="ftds-popover-section--container">
+                <slot name="heading">
+                    ${this.renderHeading()}
+                </slot>
+                <div class="ftds-popover-section--content" part="content" id="ftds-popover-section-content">
+                    <ft-typography variant="body-2-medium">
+                        <slot></slot>
+                    </ft-typography>
+                </div>
+                <ft-typography variant="body-2-medium" part="popover-section-link-typography" class="ftds-popover-section--link">
+                    <slot name="link"
+                          part="popover-section-link"
+                          @slotchange=${() => this.requestUpdate()}
+                    ></slot>
+                </ft-typography>
+            </div>
+        `;
+    }
+    renderHeading() {
+        return this.heading ? html `
+            <div class="ftds-popover-section--heading" part="heading" id="ftds-popover-section-heading">
+                <ft-typography element="span" variant="body-2-semibold">${this.heading}</ft-typography>
+            </div>
+        ` : nothing;
+    }
+    updated(props) {
+        super.updated(props);
+        this.popoverSectionLinkTypography.hidden = unslotText(this.popoverSectionLinkSlot).trim().length === 0;
+    }
+}
+FtdsPopoverSection.elementDefinitions = {
+    "ft-typography": FtTypography,
+};
+FtdsPopoverSection.styles = sectionStyles;
+__decorate([
+    property()
+], FtdsPopoverSection.prototype, "heading", void 0);
+__decorate([
+    query("[part=popover-section-link-typography]")
+], FtdsPopoverSection.prototype, "popoverSectionLinkTypography", void 0);
+__decorate([
+    query("[part=popover-section-link]")
+], FtdsPopoverSection.prototype, "popoverSectionLinkSlot", void 0);
+export { FtdsPopoverSection };

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

@@ -0,0 +1,3 @@
+export interface FtdsPopoverSectionProperties {
+    heading?: string;
+}

package/build/ftds-popover-section.properties.js

@@ -0,0 +1 @@
+export {};

package/build/ftds-popover-section.styles.d.ts

@@ -0,0 +1 @@
+export declare const sectionStyles: import("lit").CSSResult;

package/build/ftds-popover-section.styles.js

@@ -0,0 +1,22 @@
+import { css } from "lit";
+import { popover } from "@fluid-topics/design-system-variables";
+//language=css
+export const sectionStyles = css `
+    .ftds-popover-section--heading ft-typography {
+        flex-grow: 1;
+        flex-shrink: 1;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+
+    .ftds-popover-section--content {
+        color: ${popover.bodyColor};
+    }
+
+    .ftds-popover-section--container {
+        display: flex;
+        flex-direction: column;
+        gap: ${popover.contentSectionVerticalGap};
+    }
+`;

package/build/ftds-popover.d.ts

@@ -20,18 +20,23 @@ export declare class FtdsPopover extends FtLitElement implements FtdsPopoverProp
     private openingButton;
     private closingButton;
     private popoverWrapper;
+    private popoverContentDiv;
+    private popoverContentSlot;
     private slottedLinkContent;
     private popoverLinkTypography;
-    protected render(): typeof nothing | import("lit-html").TemplateResult<1>;
-    renderPopover(): typeof nothing | import("lit-html").TemplateResult<1>;
+    private popoverSectionsDiv;
+    private popoverSectionsSlot;
+    protected render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    renderPopover(): import("lit-html").TemplateResult<1> | typeof nothing;
     renderClosingButton(): import("lit-html").TemplateResult<1>;
-    renderHeading(): typeof nothing | import("lit-html").TemplateResult<1>;
+    renderHeading(): import("lit-html").TemplateResult<1> | typeof nothing;
     updated(properties: PropertyValues<FtdsPopover>): void;
     close(): void;
     open(event: PointerEvent): void;
-    hasTextLinkContent(): boolean;
+    hasEmptySlot(slot: HTMLSlotElement): boolean;
     private watchFocusIn;
     private watchEscapeKey;
     private closeAndFocusOpeningButton;
     private positionWrapper;
+    private hideUnusedSlots;
 }

package/build/ftds-popover.js

@@ -72,7 +72,7 @@ class FtdsPopover extends FtLitElement {
                     </slot>
                     <div class="ftds-popover--content" part="content" id="ftds-popover-content">
                         <ft-typography variant="body-2-medium">
-                            <slot></slot>
+                            <slot part="popover-content-slot"></slot>
                         </ft-typography>
                     </div>
                     <ft-typography variant="body-2-medium" part="popover-link-typography">
@@ -82,6 +82,9 @@ class FtdsPopover extends FtLitElement {
                               @slotchange=${() => this.requestUpdate()}
                         ></slot>
                     </ft-typography>
+                    <div part="popover-sections" class="ftds-popover-sections">
+                        <slot name="sections" part="popover-sections-slot" class="ftds-popover--sections"></slot>
+                    </div>
                 </div>
             </div>
         ` : nothing;
@@ -126,8 +129,8 @@ class FtdsPopover extends FtLitElement {
         this.opened = true;
         this.dispatchEvent(new CustomEvent("opened-changed", { detail: { opened: true } }));
     }
-    hasTextLinkContent() {
-        return unslotText(this.slottedLinkContent).trim().length > 0;
+    hasEmptySlot(slot) {
+        return unslotText(slot).trim().length === 0;
     }
     async positionWrapper() {
         this.popoverWrapper.classList.remove("ftds-popover--wrapper-positioned");
@@ -139,9 +142,14 @@ class FtdsPopover extends FtLitElement {
         this.popoverWrapper.style.left = `${x}px`;
         this.popoverWrapper.style.top = `${y}px`;
         this.popoverWrapper.classList.add("ftds-popover--wrapper-positioned");
-        this.popoverLinkTypography.hidden = !this.hasTextLinkContent();
+        this.hideUnusedSlots();
         this.popoverOpenTriggeredWithKeyboard ? this.closingButton.focus() : this.closingButton.focusWithoutTooltip();
     }
+    hideUnusedSlots() {
+        this.hasEmptySlot(this.slottedLinkContent) ? this.popoverLinkTypography.classList.add("hidden") : this.popoverLinkTypography.classList.remove("hidden");
+        this.hasEmptySlot(this.popoverContentSlot) ? this.popoverContentDiv.classList.add("hidden") : this.popoverContentDiv.classList.remove("hidden");
+        this.hasEmptySlot(this.popoverSectionsSlot) ? this.popoverSectionsDiv.classList.add("hidden") : this.popoverSectionsDiv.classList.remove("hidden");
+    }
 }
 FtdsPopover.elementDefinitions = {
     "ft-typography": FtTypography,
@@ -184,10 +192,22 @@ __decorate([
 __decorate([
     query("[part=wrapper]")
 ], FtdsPopover.prototype, "popoverWrapper", void 0);
+__decorate([
+    query("[part=content]")
+], FtdsPopover.prototype, "popoverContentDiv", void 0);
+__decorate([
+    query("[part=popover-content-slot]")
+], FtdsPopover.prototype, "popoverContentSlot", void 0);
 __decorate([
     query("[part=popover-link]")
 ], FtdsPopover.prototype, "slottedLinkContent", void 0);
 __decorate([
     query("[part=popover-link-typography]")
 ], FtdsPopover.prototype, "popoverLinkTypography", void 0);
+__decorate([
+    query("[part=popover-sections]")
+], FtdsPopover.prototype, "popoverSectionsDiv", void 0);
+__decorate([
+    query("[part=popover-sections-slot]")
+], FtdsPopover.prototype, "popoverSectionsSlot", void 0);
 export { FtdsPopover };

package/build/ftds-popover.styles.js

@@ -80,4 +80,14 @@ export const styles = css `
     .ftds-popover--wrapper-positioned {
         visibility: visible;
     }
+
+    .ftds-popover-sections {
+        display: flex;
+        flex-direction: column;
+        gap: ${popover.multiSectionVerticalGap};
+    }
+
+    .hidden {
+        display: none;
+    }
 `;

package/build/index.d.ts

@@ -1,3 +1,6 @@
 export * from "./ftds-popover";
 export * from "./ftds-popover.styles";
 export * from "./ftds-popover.properties";
+export * from "./ftds-popover-section";
+export * from "./ftds-popover-section.styles";
+export * from "./ftds-popover-section.properties";

package/build/index.js

@@ -1,6 +1,11 @@
 import { customElement } from "@fluid-topics/ft-wc-utils";
 import { FtdsPopover } from "./ftds-popover";
+import { FtdsPopoverSection } from "./ftds-popover-section";
 export * from "./ftds-popover";
 export * from "./ftds-popover.styles";
 export * from "./ftds-popover.properties";
+export * from "./ftds-popover-section";
+export * from "./ftds-popover-section.styles";
+export * from "./ftds-popover-section.properties";
 customElement("ftds-popover")(FtdsPopover);
+customElement("ftds-popover-section")(FtdsPopoverSection);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-popover",
-  "version": "1.2.65",
+  "version": "1.2.66",
   "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": "0.1.92",
-    "@fluid-topics/ft-button": "1.2.65",
-    "@fluid-topics/ft-icon": "1.2.65",
-    "@fluid-topics/ft-link": "1.2.65",
-    "@fluid-topics/ft-typography": "1.2.65",
-    "@fluid-topics/ft-wc-utils": "1.2.65",
+    "@fluid-topics/design-system-variables": "0.1.98",
+    "@fluid-topics/ft-button": "1.2.66",
+    "@fluid-topics/ft-icon": "1.2.66",
+    "@fluid-topics/ft-link": "1.2.66",
+    "@fluid-topics/ft-typography": "1.2.66",
+    "@fluid-topics/ft-wc-utils": "1.2.66",
     "lit": "3.1.0"
   },
-  "gitHead": "b8d0b476bbd82accf3db4615d1dad9f47091a3d6"
+  "gitHead": "9a20b33e06cb203d5decfef5737a1f245777dddc"
 }