@fluid-topics/ft-collapsible 0.3.32 → 0.3.34

package/build/ft-collapsible.css.js

@@ -1,16 +1,28 @@
 // language=CSS
 import { css } from "lit";
 export const styles = css `
-    :host, :root {
-        display: block;
+    :host {
+        display: contents;
     }
 
-    .content {
-        margin: 12px 0;
+    .ft-collapsible--hidden:not(.ft-collapsible--animation-in-progress) {
+        display: none;
     }
 
-    .hidden {
-        display: none;
+    .ft-collapsible--hidden.ft-collapsible--animated, .ft-collapsible--hidden.ft-collapsible--animated::slotted(*) {
+        opacity: 0;
+    }
+
+    .ft-collapsible--animated, .ft-collapsible--animated::slotted(*) {
+        opacity: 1;
+    }
+
+    .ft-collapsible--animated, .ft-collapsible--animated::slotted(*) {
+        transition: opacity 300ms 150ms;
+    }
+
+    .ft-collapsible--animated.ft-collapsible--hidden, .ft-collapsible--animated.ft-collapsible--hidden::slotted(*) {
+        transition: opacity 300ms;
     }
 `;
 //# sourceMappingURL=ft-collapsible.css.js.map

package/build/ft-collapsible.d.ts

@@ -1,25 +1,39 @@
 import { PropertyValues } from "lit";
 import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { FtCollapsibleProperties } from "./ft-collapsible.properties";
+import { FtIconVariants } from "@fluid-topics/ft-icon/build/ft-icon.properties";
+import { Position } from "@fluid-topics/ft-tooltip/build/ft-tooltip.properties";
 export declare class FtCollapsible extends FtLitElement implements FtCollapsibleProperties {
     static elementDefinitions: ElementDefinitionsMap;
-    content: HTMLElement;
     open: boolean;
-    label: string;
+    animated: boolean;
+    closeCollapsibleMatchers: string[];
+    label?: string;
+    openLabel?: string;
+    closedLabel?: string;
+    text?: string;
+    openText?: string;
+    closedText?: string;
     primary: boolean;
     secondary: boolean;
     disabled: boolean;
     dense: boolean;
     round: boolean;
+    tooltipPosition: Position;
+    iconVariant: FtIconVariants;
     openIcon: string;
     closedIcon: string;
     trailingIcon: boolean;
     private toggleSlot?;
+    private content;
+    private animationInProgress;
     static styles: import("lit").CSSResult;
     protected render(): import("lit-html").TemplateResult<1>;
     private onCustomToggleSlotChange;
     private hasCustomToggle;
+    private animationEndSafeguard;
     private toggleOpen;
     protected update(changedProperties: PropertyValues): void;
+    private onContentClick;
 }
 //# sourceMappingURL=ft-collapsible.d.ts.map

package/build/ft-collapsible.js

@@ -5,30 +5,45 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, } from "lit";
-import { property, query } from "lit/decorators.js";
-import { FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { Debouncer, FtLitElement, jsonProperty } from "@fluid-topics/ft-wc-utils";
 import { FtButton } from "@fluid-topics/ft-button";
 import { styles } from "./ft-collapsible.css";
+import { FtIconVariants } from "@fluid-topics/ft-icon/build/ft-icon.properties";
 export class FtCollapsible extends FtLitElement {
     constructor() {
         super(...arguments);
         this.open = false;
-        //For buttons properties
-        this.label = "Open here";
+        this.animated = false;
+        this.closeCollapsibleMatchers = [];
         this.primary = false;
         this.secondary = false;
         this.disabled = false;
         this.dense = false;
         this.round = false;
-        this.openIcon = "expand_less";
-        this.closedIcon = "expand_more";
+        this.tooltipPosition = "right";
+        this.iconVariant = FtIconVariants.fluid_topics;
+        this.openIcon = "THIN_ARROW";
+        this.closedIcon = "THIN_ARROW_RIGHT";
         this.trailingIcon = false;
+        this.animationInProgress = false;
+        this.animationEndSafeguard = new Debouncer(800);
     }
     render() {
+        const contentClasses = {
+            "ft-collapsible--content": true,
+            "ft-collapsible--hidden": !this.open,
+            "ft-collapsible--animated": this.animated,
+            "ft-collapsible--animation-in-progress": this.animated && this.animationInProgress,
+        };
         return html `
             <ft-button
                     part="toggle"
-                    icon=${this.open ? this.openIcon : this.closedIcon}
+                    .tooltipPosition=${this.tooltipPosition}
+                    .iconVariant=${this.iconVariant}
+                    .icon=${this.open ? this.openIcon : this.closedIcon}
+                    .label=${(this.open ? this.openLabel : this.closedLabel) || this.label}
                     ?primary=${this.primary}
                     ?secondary=${this.secondary}
                     ?disabled=${this.disabled}
@@ -36,17 +51,18 @@ export class FtCollapsible extends FtLitElement {
                     ?round=${this.round}
                     ?trailingIcon=${this.trailingIcon}
                     @click=${this.toggleOpen}
-                    class="${this.hasCustomToggle() ? "hidden" : ""}"
+                    class="${this.hasCustomToggle() ? "ft-collapsible--hidden" : ""}"
             >
-                ${this.label}
+                ${(this.open ? this.openText : this.closedText) || this.text}
             </ft-button>
             <slot name="toggle"
                   part="toggle"
+                  class="${this.hasCustomToggle() ? "" : "ft-collapsible--hidden"}"
                   @click=${this.toggleOpen}
-                  @slotchange=${this.onCustomToggleSlotChange}
-                  class="${this.hasCustomToggle() ? "" : "hidden"}"
-            ></slot>
-            <slot class="content ${this.open ? "" : "hidden"}"></slot>
+                  @slotchange=${this.onCustomToggleSlotChange}></slot>
+            <slot class="${classMap(contentClasses)}"
+                  @click=${this.onContentClick}
+                  @transitionend=${() => this.animationInProgress = false}></slot>
         `;
     }
     onCustomToggleSlotChange() {
@@ -57,7 +73,9 @@ export class FtCollapsible extends FtLitElement {
         return ((_b = (_a = this.toggleSlot) === null || _a === void 0 ? void 0 : _a.assignedNodes().length) !== null && _b !== void 0 ? _b : 0) !== 0;
     }
     toggleOpen() {
-        this.open = !this.open;
+        this.animationInProgress = true;
+        setTimeout(() => this.open = !this.open, 5);
+        this.animationEndSafeguard.run(() => this.animationInProgress = false);
     }
     update(changedProperties) {
         super.update(changedProperties);
@@ -65,20 +83,52 @@ export class FtCollapsible extends FtLitElement {
             this.dispatchEvent(new CustomEvent("change", { detail: { open: this.open } }));
         }
     }
+    onContentClick(e) {
+        if (this.closeCollapsibleMatchers.length > 0) {
+            const path = e.composedPath();
+            for (let e of path) {
+                if (e === this) {
+                    return;
+                }
+                if (e.matches && this.closeCollapsibleMatchers.some(matcher => e.matches(matcher))) {
+                    this.toggleOpen();
+                    return;
+                }
+            }
+        }
+    }
 }
 FtCollapsible.elementDefinitions = {
     "ft-button": FtButton,
 };
 FtCollapsible.styles = styles;
-__decorate([
-    query(".content")
-], FtCollapsible.prototype, "content", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], FtCollapsible.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtCollapsible.prototype, "animated", void 0);
+__decorate([
+    jsonProperty([])
+], FtCollapsible.prototype, "closeCollapsibleMatchers", void 0);
 __decorate([
     property()
 ], FtCollapsible.prototype, "label", void 0);
+__decorate([
+    property()
+], FtCollapsible.prototype, "openLabel", void 0);
+__decorate([
+    property()
+], FtCollapsible.prototype, "closedLabel", void 0);
+__decorate([
+    property()
+], FtCollapsible.prototype, "text", void 0);
+__decorate([
+    property()
+], FtCollapsible.prototype, "openText", void 0);
+__decorate([
+    property()
+], FtCollapsible.prototype, "closedText", void 0);
 __decorate([
     property({ type: Boolean })
 ], FtCollapsible.prototype, "primary", void 0);
@@ -95,10 +145,16 @@ __decorate([
     property({ type: Boolean })
 ], FtCollapsible.prototype, "round", void 0);
 __decorate([
-    property({ type: String })
+    property()
+], FtCollapsible.prototype, "tooltipPosition", void 0);
+__decorate([
+    property()
+], FtCollapsible.prototype, "iconVariant", void 0);
+__decorate([
+    property()
 ], FtCollapsible.prototype, "openIcon", void 0);
 __decorate([
-    property({ type: String })
+    property()
 ], FtCollapsible.prototype, "closedIcon", void 0);
 __decorate([
     property({ type: Boolean })
@@ -106,4 +162,10 @@ __decorate([
 __decorate([
     query("slot[name=\"toggle\"]")
 ], FtCollapsible.prototype, "toggleSlot", void 0);
+__decorate([
+    query(".content")
+], FtCollapsible.prototype, "content", void 0);
+__decorate([
+    state()
+], FtCollapsible.prototype, "animationInProgress", void 0);
 //# sourceMappingURL=ft-collapsible.js.map