@fluid-topics/ft-reorderable-list 1.3.45 → 1.3.46

package/build/ftds-reorderable-list.js

@@ -11,7 +11,7 @@ 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 { FtdsTypography, FtdsTypographyVariants } 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";
@@ -30,9 +30,9 @@ class FtdsReorderableList extends FtLitElement {
             <div class="ftds-reorderable-list--container">
                 <ol role="listbox"
                     aria-activedescendant=""
-                    @dragstart="${this.onDragStart}"
-                    @dragover="${this.onDragOver}"
-                    @dragend="${this.onDragEnd}">
+                    @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"
@@ -49,23 +49,23 @@ class FtdsReorderableList extends FtLitElement {
                                     </div>
                                     <div class="ftds-reorderable-list-item--right">
                                         ${this.editable ? html `
-                                            <ftds-button icon=${FtIcons.ADMIN}
+                                            <ftds-button icon="${FtIcons.ADMIN}"
                                                          family="${DesignSystemFamily.brand}"
                                                          size="${DesignSystemSize.large}"
-                                                         @click="${() => this.dispatchEvent(new EditItemEvent(item.id))}"
+                                                         @click=${() => this.dispatchEvent(new EditItemEvent(item.id))}
                                             ></ftds-button>
                                         ` : nothing}
                                         ${this.removable ? html `
-                                            <ftds-button icon=${FtIcons.TRASH}
+                                            <ftds-button icon="${FtIcons.TRASH}"
                                                          family="${DesignSystemFamily.brand}"
                                                          size="${DesignSystemSize.large}"
-                                                         @click="${() => this.dispatchEvent(new RemoveItemEvent(item.id))}"
+                                                         @click=${() => this.dispatchEvent(new RemoveItemEvent(item.id))}
                                             ></ftds-button>
                                         ` : nothing}
                                     </div>
                                 </li>`;
         }) : html `
-                        <ft-typography variant="${FtTypographyVariants.body2semibold}">${this.emptyListMessage}</ft-typography>`}
+                        <ftds-typography variant="${FtdsTypographyVariants.body2semibold}">${this.emptyListMessage}</ftds-typography>`}
                 </ol>
                 <slot part="actions"></slot>
             </div>
@@ -79,27 +79,27 @@ class FtdsReorderableList extends FtLitElement {
                      size="${DesignSystemSize.medium}"
                      data-item-id="${item.id}"
                      tabindex="1"
-                     @keydown="${this.onDragButtonKeyDown}"
-                     @focus="${(event) => {
+                     @keydown=${this.onDragButtonKeyDown}
+                     @focus=${(event) => {
             var _a;
-            let selected = this.getSelectedOption(event);
+            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) => {
+        }}
+                     @focusout=${(event) => {
             var _a;
-            let selected = this.getSelectedOption(event);
+            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) => {
+        }}
+                     @click=${(e) => {
             e.target.focus();
-        }}"
+        }}
 
             ></ft-icon>
-            <ft-typography variant="${FtTypographyVariants.body2semibold}">
+            <ftds-typography variant="${FtdsTypographyVariants.body2semibold}">
                 ${item.label}
-            </ft-typography>
+            </ftds-typography>
         `;
     }
     renderItemLeftActions(item) {
@@ -112,7 +112,7 @@ class FtdsReorderableList extends FtLitElement {
                                      family="${DesignSystemFamily.neutral}"
                                      size="${DesignSystemSize.large}"
                                      label="${ifDefined(action.label)}"
-                                     @click="${action.run}">
+                                     @click=${action.run}>
                             ${ifDefined(action.text)}
                         </ftds-button>
                     `)}
@@ -152,7 +152,7 @@ class FtdsReorderableList extends FtLitElement {
     }
     async keepFocusOnItem(itemId) {
         await this.updateComplete;
-        let gripButton = this.shadowRoot.querySelector(`ft-icon[data-item-id="${itemId}"]`);
+        const gripButton = this.shadowRoot.querySelector(`ft-icon[data-item-id="${itemId}"]`);
         gripButton.classList.add("dragging");
         gripButton.focus();
     }
@@ -183,7 +183,7 @@ class FtdsReorderableList extends FtLitElement {
         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"));
+        (_a = this.draggableItems) === null || _a === void 0 ? void 0 : _a.forEach((item) => item.classList.remove("over"));
         if (draggingOverItem) {
             this.list.insertBefore(this.draggingItem, draggingOverItem);
         }
@@ -195,14 +195,14 @@ class FtdsReorderableList extends FtLitElement {
         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"));
+        (_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);
-        this.items = newOrder.map(id => this.items.find(item => item.id === id));
+        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];
@@ -219,24 +219,24 @@ class FtdsReorderableList extends FtLitElement {
     }
     moveFocusToPreviousItem(itemIndex) {
         if (itemIndex > 0) {
-            let buttonToFocus = this.dragGrips[itemIndex - 1];
+            const 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];
+            const buttonToFocus = this.dragGrips[itemIndex + 1];
             buttonToFocus === null || buttonToFocus === void 0 ? void 0 : buttonToFocus.focus();
         }
     }
     getSelectedOption(event) {
-        let target = event.target;
+        const target = event.target;
         const itemId = target.dataset.itemId;
         return [...this.draggableItems].find((e) => e.id === itemId);
     }
 }
 FtdsReorderableList.elementDefinitions = {
-    "ft-typography": FtTypography,
+    "ftds-typography": FtdsTypography,
     "ftds-button": FtdsButton,
     "ft-icon": FtIcon,
     "ftds-notice": FtdsNotice,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-reorderable-list",
-    "version": "1.3.45",
+    "version": "1.3.46",
     "description": "An reorderable list component",
     "keywords": [
         "Lit"
@@ -20,11 +20,11 @@
     },
     "dependencies": {
         "@fluid-topics/design-system-variables": "2.53.1",
-        "@fluid-topics/ft-wc-utils": "1.3.45",
+        "@fluid-topics/ft-wc-utils": "1.3.46",
         "lit": "3.1.0"
     },
     "devDependencies": {
-        "@fluid-topics/ft-wc-test-utils": "1.3.45"
+        "@fluid-topics/ft-wc-test-utils": "1.3.46"
     },
-    "gitHead": "3fd3d1375535575f012653afcbcb81dc3c25b7c7"
+    "gitHead": "d6cf25d6ed0dead8c7aff4f94a493c35d12f1392"
 }