@fluid-topics/ft-collapsible 2.0.37 → 2.1.0

package/build/definitions.d.ts

@@ -1,7 +1,5 @@
 import { FtCollapsible } from "./ft-collapsible";
-import { FtdsCollapsible } from "./ftds-collapsible";
 declare const _default: {
     "ft-collapsible": typeof FtCollapsible;
-    "ftds-collapsible": typeof FtdsCollapsible;
 };
 export default _default;

package/build/definitions.js

@@ -1,6 +1,4 @@
 import { FtCollapsible } from "./ft-collapsible";
-import { FtdsCollapsible } from "./ftds-collapsible";
 export default {
     "ft-collapsible": FtCollapsible,
-    "ftds-collapsible": FtdsCollapsible,
 };

package/build/ft-collapsible.d.ts

@@ -1,7 +1,33 @@
-import { FtBaseCollapsible } from "./ft-base-collapsible";
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtIconVariants } from "@fluid-topics/ft-icon/build/ft-icon.properties";
+import { Position } from "@fluid-topics/ft-tooltip/build/ft-tooltip.properties";
 import { FtCollapsibleProperties } from "./ft-collapsible.properties";
-import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
-export declare class FtCollapsible extends FtBaseCollapsible implements FtCollapsibleProperties {
+export declare class FtCollapsible extends FtLitElement implements FtCollapsibleProperties {
     static elementDefinitions: ElementDefinitionsMap;
     static styles: import("lit").CSSResult;
+    open: boolean;
+    animated: boolean;
+    closeCollapsibleMatchers: string[];
+    primary: boolean;
+    dense: boolean;
+    round: boolean;
+    label?: string;
+    openLabel?: string;
+    closedLabel?: string;
+    text?: string;
+    openText?: string;
+    closedText?: string;
+    disabled: boolean;
+    tooltipPosition: Position;
+    iconVariant?: FtIconVariants;
+    openIcon: string;
+    closedIcon: string;
+    trailingIcon: boolean;
+    private animationInProgress;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private animationEndSafeguard;
+    private handleKeydown;
+    private toggleOpenAnimation;
+    private toggleOpen;
+    private onContentClick;
 }

package/build/ft-collapsible.js

@@ -1,9 +1,151 @@
-import { FtBaseCollapsible } from "./ft-base-collapsible";
+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 } from "lit";
+import { property, state, } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { Debouncer, eventPathContainsMatchingElement, FtLitElement, jsonProperty, } from "@fluid-topics/ft-wc-utils";
 import { FtButton } from "@fluid-topics/ft-button";
-import { styles } from "./ft-collapsible.styles";
-export class FtCollapsible extends FtBaseCollapsible {
+import { collapsibleStyles } from "./ft-collapsible.styles";
+export class FtCollapsible extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.animated = false;
+        this.closeCollapsibleMatchers = [];
+        // Button properties
+        this.primary = false;
+        this.dense = false;
+        this.round = false;
+        this.disabled = false;
+        this.tooltipPosition = "right";
+        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 `
+            <slot name="toggle"
+                  part="toggle"
+                  @click=${this.toggleOpenAnimation}
+                  @keydown=${this.handleKeydown}>
+                <ft-button
+                    part="toggle"
+                    .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}
+                    ?disabled=${this.disabled}
+                    ?dense=${this.dense}
+                    ?round=${this.round}
+                    ?trailingIcon=${this.trailingIcon}
+                    aria-controls="ft-collapsible-content"
+                    aria-expanded="${this.open}"
+                >
+                    ${(this.open ? this.openText : this.closedText) || this.text}
+                </ft-button>
+            </slot>
+            <slot id="ft-collapsible-content"
+                  class="${classMap(contentClasses)}"
+                  @click=${this.onContentClick}
+                  @transitionend=${() => this.animationInProgress = false}></slot>
+        `;
+    }
+    handleKeydown(event) {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            this.toggleOpenAnimation();
+        }
+    }
+    toggleOpenAnimation() {
+        this.animationInProgress = true;
+        setTimeout(() => this.toggleOpen(), 5);
+        this.animationEndSafeguard.run(() => this.animationInProgress = false);
+    }
+    toggleOpen() {
+        var _a, _b;
+        this.open = !this.open;
+        const toggle = this.shadowRoot.querySelector("[part=toggle]");
+        const button = (_b = (_a = toggle === null || toggle === void 0 ? void 0 : toggle.querySelector("ft-button")) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("[part=button]");
+        button === null || button === void 0 ? void 0 : button.setAttribute("aria-expanded", `${this.open}`);
+        this.dispatchEvent(new CustomEvent("change", { detail: { open: this.open } }));
+    }
+    onContentClick(e) {
+        if (eventPathContainsMatchingElement(e, this.closeCollapsibleMatchers, this)) {
+            this.toggleOpenAnimation();
+        }
+    }
 }
 FtCollapsible.elementDefinitions = {
-    "ft-or-ftds-button": FtButton,
+    "ft-button": FtButton,
 };
-FtCollapsible.styles = styles;
+FtCollapsible.styles = collapsibleStyles;
+__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({ type: Boolean })
+], FtCollapsible.prototype, "primary", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtCollapsible.prototype, "dense", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtCollapsible.prototype, "round", 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, "disabled", void 0);
+__decorate([
+    property()
+], FtCollapsible.prototype, "tooltipPosition", void 0);
+__decorate([
+    property()
+], FtCollapsible.prototype, "iconVariant", void 0);
+__decorate([
+    property()
+], FtCollapsible.prototype, "openIcon", void 0);
+__decorate([
+    property()
+], FtCollapsible.prototype, "closedIcon", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtCollapsible.prototype, "trailingIcon", void 0);
+__decorate([
+    state()
+], FtCollapsible.prototype, "animationInProgress", void 0);