@fluid-topics/ft-collapsible 2.0.38 → 2.1.0

package/build/ft-collapsible.properties.d.ts

@@ -1,7 +1,22 @@
-import { FtBaseCollapsibleProperties } from "./ft-base-collapsible";
-export interface FtCollapsibleProperties extends FtBaseCollapsibleProperties {
+import { Position } from "@fluid-topics/ft-tooltip/build/ft-tooltip.properties";
+import { FtIconVariants } from "@fluid-topics/ft-icon/build/ft-icon.properties";
+export interface FtCollapsibleProperties {
+    open?: boolean;
+    animated?: boolean;
+    closeCollapsibleMatchers: string[];
     primary?: boolean;
-    secondary?: 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;
 }

package/build/ft-collapsible.styles.d.ts

@@ -1 +1 @@
-export declare const styles: import("lit").CSSResult;
+export declare const collapsibleStyles: import("lit").CSSResult;

package/build/ft-collapsible.styles.js

@@ -1,6 +1,6 @@
 // language=CSS
 import { css } from "lit";
-export const styles = css `
+export const collapsibleStyles = css `
     :host {
         display: contents;
     }

package/build/index.d.ts

@@ -1,6 +1,4 @@
 export * from "./ft-collapsible";
 export * from "./ft-collapsible.styles";
 export * from "./ft-collapsible.properties";
-export * from "./ftds-collapsible";
-export * from "./ftds-collapsible.properties";
 import "./define";

package/build/index.js

@@ -1,6 +1,4 @@
 export * from "./ft-collapsible";
 export * from "./ft-collapsible.styles";
 export * from "./ft-collapsible.properties";
-export * from "./ftds-collapsible";
-export * from "./ftds-collapsible.properties";
 import "./define";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-collapsible",
-    "version": "2.0.38",
+    "version": "2.1.0",
     "description": "Collapsible web component",
     "keywords": [
         "Lit"
@@ -19,9 +19,9 @@
         "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
     },
     "dependencies": {
-        "@fluid-topics/ft-button": "2.0.38",
-        "@fluid-topics/ft-wc-utils": "2.0.38",
+        "@fluid-topics/ft-button": "2.1.0",
+        "@fluid-topics/ft-wc-utils": "2.1.0",
         "lit": "3.1.0"
     },
-    "gitHead": "8a5f1d6fb69ac18ec2e6d05dcf82e036d7423c35"
+    "gitHead": "4727cf19d04236ad1d2b2cb43ce1c46298834c7e"
 }

package/build/ft-base-collapsible.d.ts

@@ -1,51 +0,0 @@
-import { 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";
-export interface FtBaseCollapsibleProperties {
-    open?: boolean;
-    animated?: boolean;
-    disabled?: boolean;
-    label?: string;
-    openLabel?: string;
-    closedLabel?: string;
-    tooltipPosition?: Position;
-    text?: string;
-    openText?: string;
-    closedText?: string;
-    iconVariant?: FtIconVariants;
-    openIcon?: string;
-    closedIcon?: string;
-    trailingIcon?: boolean;
-    closeCollapsibleMatchers: string[];
-}
-export declare class FtBaseCollapsible extends FtLitElement implements FtBaseCollapsibleProperties {
-    open: boolean;
-    animated: boolean;
-    closeCollapsibleMatchers: string[];
-    primary: boolean;
-    secondary: boolean;
-    tertiary: boolean;
-    neutral: boolean;
-    dense: boolean;
-    round: boolean;
-    small: 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-base-collapsible.js

@@ -1,165 +0,0 @@
-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";
-export class FtBaseCollapsible extends FtLitElement {
-    constructor() {
-        super(...arguments);
-        this.open = false;
-        this.animated = false;
-        this.closeCollapsibleMatchers = [];
-        // Button properties
-        this.primary = false;
-        this.secondary = false;
-        this.tertiary = false;
-        this.neutral = false;
-        this.dense = false;
-        this.round = false;
-        this.small = 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-or-ftds-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}
-                    ?secondary=${this.secondary}
-                    ?tertiary=${this.tertiary}
-                    ?neutral=${this.neutral}
-                    ?disabled=${this.disabled}
-                    ?dense=${this.dense}
-                    ?round=${this.round}
-                    ?small=${this.small}
-                    ?trailingIcon=${this.trailingIcon}
-                    aria-controls="ft-collapsible-content"
-                    aria-expanded="${this.open}"
-                >
-                    ${(this.open ? this.openText : this.closedText) || this.text}
-                </ft-or-ftds-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-or-ftds-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();
-        }
-    }
-}
-__decorate([
-    property({ type: Boolean, reflect: true })
-], FtBaseCollapsible.prototype, "open", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtBaseCollapsible.prototype, "animated", void 0);
-__decorate([
-    jsonProperty([])
-], FtBaseCollapsible.prototype, "closeCollapsibleMatchers", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtBaseCollapsible.prototype, "primary", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtBaseCollapsible.prototype, "secondary", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtBaseCollapsible.prototype, "tertiary", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtBaseCollapsible.prototype, "neutral", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtBaseCollapsible.prototype, "dense", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtBaseCollapsible.prototype, "round", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtBaseCollapsible.prototype, "small", void 0);
-__decorate([
-    property()
-], FtBaseCollapsible.prototype, "label", void 0);
-__decorate([
-    property()
-], FtBaseCollapsible.prototype, "openLabel", void 0);
-__decorate([
-    property()
-], FtBaseCollapsible.prototype, "closedLabel", void 0);
-__decorate([
-    property()
-], FtBaseCollapsible.prototype, "text", void 0);
-__decorate([
-    property()
-], FtBaseCollapsible.prototype, "openText", void 0);
-__decorate([
-    property()
-], FtBaseCollapsible.prototype, "closedText", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtBaseCollapsible.prototype, "disabled", void 0);
-__decorate([
-    property()
-], FtBaseCollapsible.prototype, "tooltipPosition", void 0);
-__decorate([
-    property()
-], FtBaseCollapsible.prototype, "iconVariant", void 0);
-__decorate([
-    property()
-], FtBaseCollapsible.prototype, "openIcon", void 0);
-__decorate([
-    property()
-], FtBaseCollapsible.prototype, "closedIcon", void 0);
-__decorate([
-    property({ type: Boolean })
-], FtBaseCollapsible.prototype, "trailingIcon", void 0);
-__decorate([
-    state()
-], FtBaseCollapsible.prototype, "animationInProgress", void 0);

package/build/ftds-collapsible.d.ts

@@ -1,7 +0,0 @@
-import { FtBaseCollapsible } from "./ft-base-collapsible";
-import { ElementDefinitionsMap } from "@fluid-topics/ft-wc-utils";
-import { FtdsCollapsibleProperties } from "./ftds-collapsible.properties";
-export declare class FtdsCollapsible extends FtBaseCollapsible implements FtdsCollapsibleProperties {
-    static elementDefinitions: ElementDefinitionsMap;
-    static styles: import("lit").CSSResult;
-}

package/build/ftds-collapsible.js

@@ -1,10 +0,0 @@
-import { FtBaseCollapsible } from "./ft-base-collapsible";
-import { FtdsButton } from "@fluid-topics/ft-button";
-import { styles } from "./ft-collapsible.styles";
-export class FtdsCollapsible extends FtBaseCollapsible {
-}
-FtdsCollapsible.elementDefinitions = {
-    "ft-or-ftds-button": FtdsButton,
-};
-// same as normal one until a change is necessary
-FtdsCollapsible.styles = styles;

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

@@ -1,8 +0,0 @@
-import { FtBaseCollapsibleProperties } from "./ft-base-collapsible";
-export interface FtdsCollapsibleProperties extends FtBaseCollapsibleProperties {
-    primary?: boolean;
-    secondary?: boolean;
-    tertiary?: boolean;
-    neutral?: boolean;
-    small?: boolean;
-}

package/build/ftds-collapsible.properties.js

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