@fluid-topics/ftds-collapsible-block 2.1.8

package/README.md

@@ -0,0 +1,23 @@
+A collapsible block
+
+## Install
+
+```shell
+npm install @fluid-topics/ftds-collapsible-block
+yarn add @fluid-topics/ftds-collapsible-block
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ftds-collapsible-block"
+
+function render() {
+    return html`
+        <ftds-collapsible-block headerText="This is will appear in the header.">
+            This will appear in the body.
+        </ftds-collapsible-block>
+    `
+}
+```

package/build/define.d.ts

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

package/build/define.js

@@ -0,0 +1,3 @@
+import { customElements } from "@fluid-topics/ft-wc-utils";
+import definitions from "./definitions";
+customElements(definitions);

package/build/definitions.d.ts

@@ -0,0 +1,5 @@
+import { FtdsCollapsibleBlock } from "./ftds-collapsible-block";
+declare const _default: {
+    "ftds-collapsible-block": typeof FtdsCollapsibleBlock;
+};
+export default _default;

package/build/definitions.js

@@ -0,0 +1,4 @@
+import { FtdsCollapsibleBlock } from "./ftds-collapsible-block";
+export default {
+    "ftds-collapsible-block": FtdsCollapsibleBlock,
+};

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

@@ -0,0 +1,10 @@
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+export declare class FtdsCollapsibleBlock extends FtLitElement {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult[];
+    collapsed: boolean;
+    headerBorder: boolean;
+    headerText?: string;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private onKeydown;
+}

package/build/ftds-collapsible-block.js

@@ -0,0 +1,85 @@
+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 } from "lit/decorators.js";
+import { FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { designSystemStyles, FtdsCard } from "@fluid-topics/ftds-card";
+import { FtdsIcon, FtdsIcons } from "@fluid-topics/ftds-icon";
+import { FtdsTypography } from "@fluid-topics/ftds-typography";
+import { FtRipple } from "@fluid-topics/ft-ripple";
+import { when } from "lit/directives/when.js";
+import { ftdsCollapsibleBlockStyles } from "./ftds-collapsible-block.styles";
+import { renderCardHeaderContent } from "@fluid-topics/ftds-card/build/helpers";
+import { classMap } from "lit/directives/class-map.js";
+export class FtdsCollapsibleBlock extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.collapsed = false;
+        this.headerBorder = true;
+    }
+    render() {
+        return html `
+            <ftds-card>
+                <div slot="header-wrapper"
+                     class="${classMap({
+            "ftds-card--header-border": this.headerBorder && !this.collapsed,
+        })}">
+                    <div id="header"
+                         role="button"
+                         tabindex="0"
+                         aria-controls="collapsible-body, collapsible-footer"
+                         aria-expanded="${(!this.collapsed).toString()}"
+                         @click=${() => this.collapsed = !this.collapsed}
+                         @keydown=${this.onKeydown}>
+
+                        <ft-ripple></ft-ripple>
+                        ${renderCardHeaderContent({
+            headerText: this.headerText,
+            headerActions: html `
+                                <ftds-icon
+                                        icon="${this.collapsed ? FtdsIcons.ANGLE_DOWN : FtdsIcons.ANGLE_UP}">
+                                </ftds-icon>`,
+        })}
+                    </div>
+                </div>
+
+                ${when(!this.collapsed, () => html `
+                            <div id="collapsible-body"
+                                 aria-hidden="${(this.collapsed).toString()}">
+                                <slot></slot>
+                            </div>
+                            <slot id="collapsible-footer"
+                                  aria-hidden="${(this.collapsed).toString()}"
+                                  name="footer"
+                                  slot="footer"></slot>
+                        `)}
+            </ftds-card>
+        `;
+    }
+    onKeydown(event) {
+        if (event.code === "Enter" || event.code === "Space") {
+            event.preventDefault();
+            this.collapsed = !this.collapsed;
+        }
+    }
+}
+FtdsCollapsibleBlock.elementDefinitions = {
+    "ftds-card": FtdsCard,
+    "ftds-icon": FtdsIcon,
+    "ftds-typography": FtdsTypography,
+    "ft-ripple": FtRipple,
+};
+FtdsCollapsibleBlock.styles = [designSystemStyles, ftdsCollapsibleBlockStyles];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FtdsCollapsibleBlock.prototype, "collapsed", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FtdsCollapsibleBlock.prototype, "headerBorder", void 0);
+__decorate([
+    property()
+], FtdsCollapsibleBlock.prototype, "headerText", void 0);