@fluid-topics/ft-reorderable-list 1.2.48 → 1.2.50

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

@@ -5,6 +5,7 @@ export declare class FtdsReorderableList extends FtLitElement implements FtdsReo
     static styles: import("lit").CSSResult;
     editable: boolean;
     removable: boolean;
+    emptyListMessage: string;
     items: FtdsReorderableListItem[];
     list?: HTMLElement;
     draggableItems?: HTMLElement[];

package/build/ftds-reorderable-list.js

@@ -15,11 +15,13 @@ 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";
+import { RemoveItemEvent, EditItemEvent, OrderChangeEvent } from "./event";
 class FtdsReorderableList extends FtLitElement {
     constructor() {
         super(...arguments);
         this.editable = false;
         this.removable = false;
+        this.emptyListMessage = "";
         this.items = [];
         this.draggingItem = undefined;
     }
@@ -31,7 +33,7 @@ class FtdsReorderableList extends FtLitElement {
                     @dragstart="${this.onDragStart}"
                     @dragover="${this.onDragOver}"
                     @dragend="${this.onDragEnd}">
-                    ${repeat(this.items, (item) => live(item.id), (item) => {
+                    ${this.items.length > 0 ? repeat(this.items, (item) => live(item.id), (item) => {
             return html `
                                 <li role="option"
                                     draggable="true"
@@ -49,16 +51,21 @@ class FtdsReorderableList extends FtLitElement {
                                         ${this.editable ? html `
                                             <ftds-button icon=${FtIcons.ADMIN}
                                                          family="${DesignSystemFamily.brand}"
-                                                         size="${DesignSystemSize.large}"></ftds-button>
+                                                         size="${DesignSystemSize.large}"
+                                                         @click="${() => this.dispatchEvent(new EditItemEvent(item.id))}"
+                                            ></ftds-button>
                                         ` : nothing}
                                         ${this.removable ? html `
                                             <ftds-button icon=${FtIcons.TRASH}
                                                          family="${DesignSystemFamily.brand}"
-                                                         size="${DesignSystemSize.large}"></ftds-button>
+                                                         size="${DesignSystemSize.large}"
+                                                         @click="${() => this.dispatchEvent(new RemoveItemEvent(item.id))}"
+                                            ></ftds-button>
                                         ` : nothing}
                                     </div>
                                 </li>`;
-        })}
+        }) : html `
+                        <ft-typography variant="${FtTypographyVariants.body2semibold}">${this.emptyListMessage}</ft-typography>`}
                 </ol>
                 <slot part="actions"></slot>
             </div>
@@ -131,6 +138,7 @@ class FtdsReorderableList extends FtLitElement {
                     this.moveItemDown(itemIndex);
                 }
                 await this.keepFocusOnItem(itemId);
+                this.dispatchEvent(new OrderChangeEvent());
             }
             else {
                 if (up) {
@@ -166,7 +174,7 @@ class FtdsReorderableList extends FtLitElement {
         return reorderedItems;
     }
     onDragStart(event) {
-        event.dataTransfer.effectAllowed = 'move';
+        event.dataTransfer.effectAllowed = "move";
         this.draggingItem = event.target;
         this.draggingItem.classList.add("dragging");
     }
@@ -190,6 +198,7 @@ class FtdsReorderableList extends FtLitElement {
         (_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() {
         let newOrder = [...this.dragGrips].map((e) => e.dataset.itemId);
@@ -239,6 +248,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], FtdsReorderableList.prototype, "removable", void 0);
+__decorate([
+    property()
+], FtdsReorderableList.prototype, "emptyListMessage", void 0);
 __decorate([
     property()
 ], FtdsReorderableList.prototype, "items", void 0);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-reorderable-list",
-    "version": "1.2.48",
+    "version": "1.2.50",
     "description": "An reorderable list component",
     "keywords": [
         "Lit"
@@ -20,11 +20,11 @@
     },
     "dependencies": {
         "@fluid-topics/design-system-variables": "0.1.92",
-        "@fluid-topics/ft-wc-utils": "1.2.48",
+        "@fluid-topics/ft-wc-utils": "1.2.50",
         "lit": "3.1.0"
     },
     "devDependencies": {
-        "@fluid-topics/ft-wc-test-utils": "1.2.48"
+        "@fluid-topics/ft-wc-test-utils": "1.2.50"
     },
-    "gitHead": "c2298efffb5e12489201c4c46c6b9cd2911adf58"
+    "gitHead": "2cc419b6e01ae50f6ecba171e7b700507a6a85a0"
 }