@fluid-topics/ft-reorderable-list 1.2.12

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

@@ -0,0 +1,30 @@
+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;
+    items: FtdsReorderableListItem[];
+    list?: HTMLElement;
+    draggableItems?: HTMLElement[];
+    notDraggedItems?: HTMLElement[];
+    dragGrips?: HTMLElement[];
+    private draggingItem?;
+    protected render(): import("lit").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,257 @@
+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 { FtTypography, FtTypographyVariants } from "@fluid-topics/ft-typography";
+import { FtdsButton } from "@fluid-topics/ft-button";
+import { FtIcon, FtIcons } from "@fluid-topics/ft-icon";
+import { FtdsNotice } from "@fluid-topics/ft-notice";
+class FtdsReorderableList extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.editable = false;
+        this.removable = false;
+        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}">
+                    ${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=${FtIcons.ADMIN}
+                                                         family="${DesignSystemFamily.brand}"
+                                                         size="${DesignSystemSize.large}"></ftds-button>
+                                        ` : nothing}
+                                        ${this.removable ? html `
+                                            <ftds-button icon=${FtIcons.TRASH}
+                                                         family="${DesignSystemFamily.brand}"
+                                                         size="${DesignSystemSize.large}"></ftds-button>
+                                        ` : nothing}
+                                    </div>
+                                </li>`;
+        })}
+                </ol>
+                <slot part="actions"></slot>
+            </div>
+        `;
+    }
+    renderItemLeftItems(item) {
+        return html `
+            <ft-icon class="ftds-reorderable-list-item--drag-grip"
+                     value="${FtIcons.GRIP_LINES_SOLID}"
+                     family="${DesignSystemFamily.neutral}"
+                     size="${DesignSystemSize.medium}"
+                     data-item-id="${item.id}"
+                     tabindex="1"
+                     @keydown="${this.onDragButtonKeyDown}"
+                     @focus="${(event) => {
+            var _a;
+            let 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;
+            let 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();
+        }}"
+
+            ></ft-icon>
+            <ft-typography variant="${FtTypographyVariants.body2semibold}">
+                ${item.label}
+            </ft-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}"
+                                     ?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);
+            }
+            else {
+                if (up) {
+                    this.moveFocusToPreviousItem(itemIndex);
+                }
+                else {
+                    this.moveFocusToNextItem(itemIndex);
+                }
+            }
+        }
+    }
+    async keepFocusOnItem(itemId) {
+        await this.updateComplete;
+        let gripButton = this.shadowRoot.querySelector(`ft-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;
+    }
+    syncReferenceList() {
+        let 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) {
+            let buttonToFocus = this.dragGrips[itemIndex - 1];
+            buttonToFocus === null || buttonToFocus === void 0 ? void 0 : buttonToFocus.focus();
+        }
+    }
+    moveFocusToNextItem(itemIndex) {
+        if (itemIndex < this.items.length - 1) {
+            let buttonToFocus = this.dragGrips[itemIndex + 1];
+            buttonToFocus === null || buttonToFocus === void 0 ? void 0 : buttonToFocus.focus();
+        }
+    }
+    getSelectedOption(event) {
+        let target = event.target;
+        const itemId = target.dataset.itemId;
+        return [...this.draggableItems].find((e) => e.id === itemId);
+    }
+}
+FtdsReorderableList.elementDefinitions = {
+    "ft-typography": FtTypography,
+    "ftds-button": FtdsButton,
+    "ft-icon": FtIcon,
+    "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, "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("ft-icon[data-item-id]")
+], FtdsReorderableList.prototype, "dragGrips", void 0);
+export { FtdsReorderableList };

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

@@ -0,0 +1,19 @@
+import { FtIcons } from "@fluid-topics/ft-icon";
+export interface FtdsReorderableListProperties {
+    items: FtdsReorderableListItem[];
+    editable: boolean;
+    removable: boolean;
+}
+export interface FtdsReorderableListItem {
+    id: string;
+    label: string;
+    warningMessage: string;
+    actions: FtdsReorderableListItemAction[];
+}
+export interface FtdsReorderableListItemAction {
+    label: string;
+    text?: string;
+    icon: FtIcons;
+    disabled?: boolean;
+    run?: (event: MouseEvent | KeyboardEvent) => void;
+}

package/build/ftds-reorderable-list.properties.js

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

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

@@ -0,0 +1,4 @@
+export declare const FtdsReorderableListItemCssVariables: {
+    padding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+};
+export declare const styles: import("lit").CSSResult;

package/build/ftds-reorderable-list.styles.js

@@ -0,0 +1,70 @@
+import { css } from "lit";
+import { FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
+import { reorderableList } from "@fluid-topics/design-system-variables";
+export const FtdsReorderableListItemCssVariables = {
+    padding: FtCssVariableFactory.create("--ftds-reorderable-list-item--padding", "", "SIZE", "8px"),
+};
+// language=CSS
+export const styles = css `
+    .ftds-reorderable-list--container {
+        display: flex;
+        flex-direction: column;
+        background-color: ${reorderableList.backgroundColor};
+        border: ${reorderableList.borderWidth} solid ${reorderableList.borderColor};
+        border-radius: ${reorderableList.borderRadius};
+        padding: ${reorderableList.verticalPadding};
+        list-style-type: none;
+        gap: ${reorderableList.reorderableItemsGap};
+    }
+
+    ol[role=listbox] {
+        display: flex;
+        flex-direction: column;
+        gap: ${reorderableList.reorderableItemsGap};
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    ol li {
+        display: flex;
+        background-color: ${reorderableList.reorderableItemBackgroundColor};
+        border-radius: ${reorderableList.borderRadius};
+        box-shadow: ${reorderableList.boxShadow};
+        padding: ${FtdsReorderableListItemCssVariables.padding};
+        gap: ${reorderableList.reorderableItemsGap};
+        min-height: 40px;
+    }
+
+    ol li:hover {
+        cursor: grab
+    }
+
+    .ftds-reorderable-list-item--left {
+        display: flex;
+        flex-grow: 1;
+        align-items: center;
+        gap: ${reorderableList.gap};
+    }
+
+    .ftds-reorderable-list-item--left-actions {
+        display: flex;
+        gap: ${reorderableList.gap};
+    }
+
+    .ftds-reorderable-list-item--right {
+        display: flex;
+        justify-content: end;
+    }
+
+    .ftds-reorderable-list-item--drag-grip {
+        opacity: ${reorderableList.reorderableItemGripOpacity};
+    }
+
+    .ftds-reorderable-list-item--drag-grip:focus {
+        outline: 2px solid #0e98b4;
+        outline-offset: 2px;
+        border-radius: 999px;
+    }
+
+`;

package/build/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./ftds-reorderable-list.styles";
+export * from "./ftds-reorderable-list.properties";
+export * from "./ftds-reorderable-list";

package/build/index.js

@@ -0,0 +1,6 @@
+import { customElement } from "@fluid-topics/ft-wc-utils";
+import { FtdsReorderableList } from "./ftds-reorderable-list";
+export * from "./ftds-reorderable-list.styles";
+export * from "./ftds-reorderable-list.properties";
+export * from "./ftds-reorderable-list";
+customElement("ftds-reorderable-list")(FtdsReorderableList);

package/package.json

@@ -0,0 +1,30 @@
+{
+    "name": "@fluid-topics/ft-reorderable-list",
+    "version": "1.2.12",
+    "description": "An reorderable list component",
+    "keywords": [
+        "Lit"
+    ],
+    "author": "Fluid Topics <devtopics@antidot.net>",
+    "license": "ISC",
+    "main": "build/index.js",
+    "web": "build/ft-orderable-list.min.js",
+    "typings": "build/index",
+    "files": [
+        "build/**/*.js",
+        "build/**/*.ts"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
+    },
+    "dependencies": {
+        "@fluid-topics/design-system-variables": "0.1.8",
+        "@fluid-topics/ft-wc-utils": "1.2.12",
+        "lit": "3.1.0"
+    },
+    "devDependencies": {
+        "@fluid-topics/ft-wc-test-utils": "1.2.12"
+    },
+    "gitHead": "a32b515ab03f4e6ffd796a7149856513d5b71400"
+}