@fluid-topics/ftds-reorderable-list 2.1.0

package/README.md

@@ -0,0 +1,19 @@
+The design system reorderable list component
+
+## Install
+
+```shell
+npm install @fluid-topics/ftds-reorderable-list
+yarn add @fluid-topics/ftds-reorderable-list
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ftds-reorderable-list"
+
+function render() {
+    return html` <ftds-reorderable-list foo="bar"></ftds-reorderable-list> `
+}
+```

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 { FtdsReorderableList } from "./ftds-reorderable-list";
+declare const _default: {
+    "ftds-reorderable-list": typeof FtdsReorderableList;
+};
+export default _default;

package/build/definitions.js

@@ -0,0 +1,4 @@
+import { FtdsReorderableList } from "./ftds-reorderable-list";
+export default {
+    "ftds-reorderable-list": FtdsReorderableList,
+};

package/build/event.d.ts

@@ -0,0 +1,13 @@
+export declare class RemoveItemEvent extends CustomEvent<{
+    id: string;
+}> {
+    constructor(id: string);
+}
+export declare class EditItemEvent extends CustomEvent<{
+    id: string;
+}> {
+    constructor(id: string);
+}
+export declare class OrderChangeEvent extends CustomEvent<void> {
+    constructor();
+}

package/build/event.js

@@ -0,0 +1,15 @@
+export class RemoveItemEvent extends CustomEvent {
+    constructor(id) {
+        super("reorderable-list-item-remove", { detail: { id: id }, bubbles: true, composed: true });
+    }
+}
+export class EditItemEvent extends CustomEvent {
+    constructor(id) {
+        super("reorderable-list-item-edit", { detail: { id: id }, bubbles: true, composed: true });
+    }
+}
+export class OrderChangeEvent extends CustomEvent {
+    constructor() {
+        super("reorderable-list-order-change", { bubbles: true, composed: true });
+    }
+}

package/build/ftds-reorderable-list.d.ts

@@ -0,0 +1,31 @@
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtdsReorderableListItem, FtdsReorderableListProperties } from "./ftds-reorderable-list.properties";
+export declare class FtdsReorderableList extends FtLitElement implements FtdsReorderableListProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    static styles: import("lit").CSSResult;
+    editable: boolean;
+    removable: boolean;
+    emptyListMessage: string;
+    items: FtdsReorderableListItem[];
+    list?: HTMLElement;
+    draggableItems?: HTMLElement[];
+    notDraggedItems?: HTMLElement[];
+    dragGrips?: HTMLElement[];
+    private draggingItem?;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private renderItemLeftItems;
+    private renderItemLeftActions;
+    private onDragButtonKeyDown;
+    private keepFocusOnItem;
+    private moveItemUp;
+    private moveItemDown;
+    private swapItems;
+    private onDragStart;
+    private onDragOver;
+    private onDragEnd;
+    private syncReferenceList;
+    private getDragAfterElement;
+    private moveFocusToPreviousItem;
+    private moveFocusToNextItem;
+    private getSelectedOption;
+}

package/build/ftds-reorderable-list.js

@@ -0,0 +1,268 @@
+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 { ifDefined } from "lit/directives/if-defined.js";
+import { property, query, queryAll, } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+import { live } from "lit/directives/live.js";
+import { DesignSystemFamily, DesignSystemSize, FtLitElement, } from "@fluid-topics/ft-wc-utils";
+import { styles } from "./ftds-reorderable-list.styles";
+import { FtdsTypography, FtdsTypographyVariants, } from "@fluid-topics/ftds-typography";
+import { FtdsButton } from "@fluid-topics/ftds-button";
+import { FtdsIcon, FtdsIcons, FtdsIconVariants, } from "@fluid-topics/ftds-icon";
+import { FtdsNotice } from "@fluid-topics/ftds-notice";
+import { EditItemEvent, OrderChangeEvent, RemoveItemEvent, } from "./event";
+export class FtdsReorderableList extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.editable = false;
+        this.removable = false;
+        this.emptyListMessage = "";
+        this.items = [];
+        this.draggingItem = undefined;
+    }
+    render() {
+        return html `
+            <div class="ftds-reorderable-list--container">
+                <ol role="listbox"
+                    aria-activedescendant=""
+                    @dragstart=${this.onDragStart}
+                    @dragover=${this.onDragOver}
+                    @dragend=${this.onDragEnd}>
+                    ${this.items.length > 0 ? repeat(this.items, (item) => live(item.id), (item) => {
+            return html `
+                                <li role="option"
+                                    draggable="true"
+                                    id="${item.id}">
+                                    <div class="ftds-reorderable-list-item--left">
+                                        ${this.renderItemLeftItems(item)}
+                                        ${this.renderItemLeftActions(item)}
+                                        ${item.warningMessage ? html `
+                                            <ftds-notice dense variant="warning"
+                                                         size="${DesignSystemSize.large}">
+                                                ${item.warningMessage}
+                                            </ftds-notice>` : nothing}
+                                    </div>
+                                    <div class="ftds-reorderable-list-item--right">
+                                        ${this.editable ? html `
+                                            <ftds-button icon="${FtdsIcons.GEAR}"
+                                                         family="${DesignSystemFamily.brand}"
+                                                         size="${DesignSystemSize.large}"
+                                                         @click=${() => this.dispatchEvent(new EditItemEvent(item.id))}
+                                            ></ftds-button>
+                                        ` : nothing}
+                                        ${this.removable ? html `
+                                            <ftds-button icon="${FtdsIcons.TRASH}"
+                                                         family="${DesignSystemFamily.brand}"
+                                                         size="${DesignSystemSize.large}"
+                                                         @click=${() => this.dispatchEvent(new RemoveItemEvent(item.id))}
+                                            ></ftds-button>
+                                        ` : nothing}
+                                    </div>
+                                </li>`;
+        }) : html `
+                        <ftds-typography variant="${FtdsTypographyVariants.body2semibold}">${this.emptyListMessage}</ftds-typography>`}
+                </ol>
+                <slot part="actions"></slot>
+            </div>
+        `;
+    }
+    renderItemLeftItems(item) {
+        return html `
+            <ftds-icon class="ftds-reorderable-list-item--drag-grip"
+                       icon="${FtdsIcons.GRIP_LINES}"
+                       variant="${FtdsIconVariants.solid}"
+                       data-item-id="${item.id}"
+                       tabindex="1"
+                       @keydown=${this.onDragButtonKeyDown}
+                       @focus=${(event) => {
+            var _a;
+            const selected = this.getSelectedOption(event);
+            selected.setAttribute("aria-selected", "true");
+            (_a = this.list) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-activedescendant", `option-${item.id}`);
+        }}
+                       @focusout=${(event) => {
+            var _a;
+            const selected = this.getSelectedOption(event);
+            selected.setAttribute("aria-selected", "false");
+            (_a = this.list) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-activedescendant", "");
+        }}
+                       @click=${(e) => {
+            e.target.focus();
+        }}
+
+            ></ftds-icon>
+            <ftds-typography variant="${FtdsTypographyVariants.body2semibold}">
+                ${item.label}
+            </ftds-typography>
+        `;
+    }
+    renderItemLeftActions(item) {
+        if (item.actions) {
+            return html `
+                <div class="ftds-reorderable-list-item--left-actions">
+                    ${repeat(item.actions, (action) => html `
+                        <ftds-button icon="${action.icon}"
+                                     iconVariant="${action.iconVariant}"
+                                     ?disabled=${action.disabled}
+                                     family="${DesignSystemFamily.neutral}"
+                                     size="${DesignSystemSize.large}"
+                                     label="${ifDefined(action.label)}"
+                                     @click=${action.run}>
+                            ${ifDefined(action.text)}
+                        </ftds-button>
+                    `)}
+                </div>`;
+        }
+        else {
+            return nothing;
+        }
+    }
+    async onDragButtonKeyDown(event) {
+        const itemId = event.target.dataset.itemId;
+        const itemIndex = this.items.findIndex((e) => e.id === itemId);
+        this.dragGrips[itemIndex].classList.remove("dragging");
+        if (itemIndex > -1 && ["PageUp", "PageDown", "ArrowUp", "ArrowDown"].includes(event.key)) {
+            event.preventDefault();
+            const move = event.altKey || event.key.startsWith("Page");
+            const up = event.key.includes("Up");
+            if (move) {
+                if (up) {
+                    this.moveItemUp(itemIndex);
+                }
+                else {
+                    this.moveItemDown(itemIndex);
+                }
+                await this.keepFocusOnItem(itemId);
+                this.dispatchEvent(new OrderChangeEvent());
+            }
+            else {
+                if (up) {
+                    this.moveFocusToPreviousItem(itemIndex);
+                }
+                else {
+                    this.moveFocusToNextItem(itemIndex);
+                }
+            }
+        }
+    }
+    async keepFocusOnItem(itemId) {
+        await this.updateComplete;
+        const gripButton = this.shadowRoot.querySelector(`ftds-icon[data-item-id="${itemId}"]`);
+        gripButton.classList.add("dragging");
+        gripButton.focus();
+    }
+    moveItemUp(itemIndex) {
+        if (itemIndex > 0) {
+            this.items = this.swapItems(itemIndex, itemIndex - 1);
+        }
+    }
+    moveItemDown(itemIndex) {
+        if (itemIndex < this.items.length - 1) {
+            this.items = this.swapItems(itemIndex, itemIndex + 1);
+        }
+    }
+    swapItems(index1, index2) {
+        const reorderedItems = [...this.items];
+        const temp = reorderedItems[index1];
+        reorderedItems[index1] = reorderedItems[index2];
+        reorderedItems[index2] = temp;
+        return reorderedItems;
+    }
+    onDragStart(event) {
+        event.dataTransfer.effectAllowed = "move";
+        this.draggingItem = event.target;
+        this.draggingItem.classList.add("dragging");
+    }
+    onDragOver(event) {
+        var _a;
+        event.preventDefault();
+        const draggingOverItem = this.getDragAfterElement(this.list, event.clientY);
+        this.draggingItem.style.cursor = "grabbing";
+        (_a = this.draggableItems) === null || _a === void 0 ? void 0 : _a.forEach((item) => item.classList.remove("over"));
+        if (draggingOverItem) {
+            this.list.insertBefore(this.draggingItem, draggingOverItem);
+        }
+        else {
+            this.list.appendChild(this.draggingItem);
+        }
+    }
+    onDragEnd(event) {
+        var _a;
+        this.syncReferenceList();
+        event.target.classList.remove("dragging");
+        (_a = this.draggableItems) === null || _a === void 0 ? void 0 : _a.forEach((item) => item.classList.remove("over"));
+        this.draggingItem.remove();
+        this.draggingItem = undefined;
+        this.dispatchEvent(new OrderChangeEvent());
+    }
+    syncReferenceList() {
+        const newOrder = [...this.dragGrips].map((e) => e.dataset.itemId);
+        this.items = newOrder.map((id) => this.items.find((item) => item.id === id));
+    }
+    getDragAfterElement(container, y) {
+        const draggableElements = [...this.notDraggedItems];
+        let closest = { offset: Number.NEGATIVE_INFINITY, element: null };
+        for (const child of draggableElements) {
+            const box = child.getBoundingClientRect();
+            const offset = y - box.top - box.height / 2;
+            if (offset < 0 && offset > closest.offset) {
+                closest = { offset: offset, element: child };
+                return closest.element;
+            }
+        }
+        return null;
+    }
+    moveFocusToPreviousItem(itemIndex) {
+        if (itemIndex > 0) {
+            const buttonToFocus = this.dragGrips[itemIndex - 1];
+            buttonToFocus === null || buttonToFocus === void 0 ? void 0 : buttonToFocus.focus();
+        }
+    }
+    moveFocusToNextItem(itemIndex) {
+        if (itemIndex < this.items.length - 1) {
+            const buttonToFocus = this.dragGrips[itemIndex + 1];
+            buttonToFocus === null || buttonToFocus === void 0 ? void 0 : buttonToFocus.focus();
+        }
+    }
+    getSelectedOption(event) {
+        const target = event.target;
+        const itemId = target.dataset.itemId;
+        return [...this.draggableItems].find((e) => e.id === itemId);
+    }
+}
+FtdsReorderableList.elementDefinitions = {
+    "ftds-typography": FtdsTypography,
+    "ftds-button": FtdsButton,
+    "ftds-icon": FtdsIcon,
+    "ftds-notice": FtdsNotice,
+};
+FtdsReorderableList.styles = styles;
+__decorate([
+    property({ type: Boolean })
+], FtdsReorderableList.prototype, "editable", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtdsReorderableList.prototype, "removable", void 0);
+__decorate([
+    property()
+], FtdsReorderableList.prototype, "emptyListMessage", void 0);
+__decorate([
+    property()
+], FtdsReorderableList.prototype, "items", void 0);
+__decorate([
+    query("ol")
+], FtdsReorderableList.prototype, "list", void 0);
+__decorate([
+    queryAll("li")
+], FtdsReorderableList.prototype, "draggableItems", void 0);
+__decorate([
+    queryAll("li:not(.dragging)")
+], FtdsReorderableList.prototype, "notDraggedItems", void 0);
+__decorate([
+    queryAll("ftds-icon[data-item-id]")
+], FtdsReorderableList.prototype, "dragGrips", void 0);