@nakashim/tp-custom 0.1.9 → 0.1.11

package/dist/lib/tp-plugin/dynamic-list-blade-plugin.js

@@ -1,6 +1,16 @@
 import { BladeApi, BladeController, createPlugin, parseRecord } from '@tweakpane/core';
 function sanitizeListStyle(style) {
-    return style === 'ul' ? 'ul' : 'ol';
+    if (style === 'ul' || style === 'radio' || style === 'checkbox') {
+        return style;
+    }
+    return 'ol';
+}
+function resolveMultiSelectByStyle(style, requested) {
+    if (style === 'radio')
+        return false;
+    if (style === 'checkbox')
+        return true;
+    return requested;
 }
 function normalizeMaxItems(value) {
     if (!Number.isFinite(value)) {
@@ -35,6 +45,73 @@ function normalizeRows(value) {
     }
     return Math.min(24, normalized);
 }
+function normalizeSelectionForItems(items, selectable, multiSelect, selectedIndices, selectedIndex) {
+    if (!selectable || items.length === 0)
+        return [];
+    const source = Array.isArray(selectedIndices) ? selectedIndices : [selectedIndex];
+    const next = Array.from(new Set(source
+        .map((v) => (Number.isFinite(v) ? Math.floor(v) : NaN))
+        .filter((v) => Number.isFinite(v) && v >= 0 && v < items.length))).sort((a, b) => a - b);
+    if (multiSelect)
+        return next;
+    return next.length > 0 ? [next[0]] : [];
+}
+function normalizeDynamicListBladeParams(params) {
+    return {
+        label: params.label,
+        emptyText: params.emptyText ?? 'Empty',
+        listStyle: sanitizeListStyle(params.listStyle),
+        items: params.items ?? [],
+        rows: normalizeRows(params.rows),
+        maxItems: normalizeMaxItems(params.maxItems),
+        overflowMode: sanitizeOverflowMode(params.overflowMode),
+        allowRemove: params.allowRemove ?? true,
+        allowReorder: params.allowReorder ?? true,
+        inlineLabel: params.inlineLabel ?? false,
+        showItemTooltip: params.showItemTooltip ?? false,
+        fullWidth: params.fullWidth ?? false,
+        clickable: params.clickable ?? false,
+        selectable: params.selectable ?? false,
+        allowDeselect: params.allowDeselect ?? false,
+        multiSelect: params.multiSelect ?? false,
+        selectedIndex: typeof params.selectedIndex === 'number' && Number.isFinite(params.selectedIndex)
+            ? params.selectedIndex
+            : -1,
+        selectedIndices: params.selectedIndices ?? [],
+    };
+}
+function normalizeSelectionState(items, selectable, multiSelect, value) {
+    const arr = Array.isArray(value) ? value : [value];
+    const selectedIndices = normalizeSelectionForItems(items, selectable, multiSelect, arr);
+    return {
+        selectedIndices,
+        selectedIndex: selectedIndices[0] ?? -1,
+    };
+}
+function isSameSelectionState(a, b) {
+    return (a.selectedIndex === b.selectedIndex &&
+        a.selectedIndices.length === b.selectedIndices.length &&
+        a.selectedIndices.every((value, idx) => value === b.selectedIndices[idx]));
+}
+function remapSelectionAfterRemove(selectedIndices, removedIndex, nextItemsLength) {
+    const hadRemoved = selectedIndices.includes(removedIndex);
+    const next = selectedIndices
+        .filter((i) => i !== removedIndex)
+        .map((i) => (i > removedIndex ? i - 1 : i));
+    if (hadRemoved && next.length === 0 && nextItemsLength > 0) {
+        next.push(Math.min(removedIndex, nextItemsLength - 1));
+    }
+    return next;
+}
+function remapSelectionAfterMove(selectedIndices, fromIndex, toIndex) {
+    return selectedIndices.map((i) => {
+        if (i === fromIndex)
+            return toIndex;
+        if (i === toIndex)
+            return fromIndex;
+        return i;
+    });
+}
 class DynamicListBladeView {
     element;
     labelElement_;
@@ -43,6 +120,7 @@ class DynamicListBladeView {
     onListClick_;
     itemRows_;
     emptyItemElement_;
+    emptyTextElement_;
     items_;
     listStyle_;
     rows_;
@@ -51,9 +129,17 @@ class DynamicListBladeView {
     onRemove_;
     allowRemove_;
     allowReorder_;
+    emptyText_;
     inlineLabel_;
     showItemTooltip_;
     fullWidth_;
+    clickable_;
+    selectable_;
+    allowDeselect_;
+    multiSelect_;
+    selectedIndex_;
+    selectedIndices_;
+    onSelectionChange_;
     constructor(doc, config) {
         this.items_ = [...config.items];
         this.listStyle_ = config.listStyle;
@@ -62,35 +148,36 @@ class DynamicListBladeView {
         this.onRemove_ = config.onRemove;
         this.allowRemove_ = config.allowRemove;
         this.allowReorder_ = config.allowReorder;
+        this.emptyText_ = config.emptyText;
         this.inlineLabel_ = config.inlineLabel;
         this.showItemTooltip_ = config.showItemTooltip;
         this.fullWidth_ = config.fullWidth;
+        this.clickable_ = config.clickable;
+        this.selectable_ = config.selectable;
+        this.allowDeselect_ = config.allowDeselect;
+        this.multiSelect_ = config.multiSelect;
+        this.selectedIndices_ = [];
+        this.selectedIndex_ = -1;
+        this.setSelection_(config.selectedIndices ?? [config.selectedIndex]);
+        this.onSelectionChange_ = config.onSelectionChange;
         this.rows_ = normalizeRows(config.rows);
         this.itemRows_ = [];
         this.emptyItemElement_ = null;
+        this.emptyTextElement_ = null;
         this.onListClick_ = (ev) => {
             const target = ev.target;
             if (!target)
                 return;
-            const button = target.closest('.tp-dynlistblade_btn');
-            if (!button || button.disabled)
-                return;
-            const item = button.closest('.tp-dynlistblade_i');
+            const item = target.closest('.tp-dynlistblade_i');
             if (!item)
                 return;
             const index = Number(item.dataset.index);
             if (!Number.isInteger(index))
                 return;
-            const action = button.dataset.action;
-            if (action === 'up') {
-                this.onMoveUp_(index);
-            }
-            else if (action === 'down') {
-                this.onMoveDown_(index);
-            }
-            else if (action === 'remove') {
-                this.onRemove_(index);
-            }
+            const button = target.closest('.tp-dynlistblade_btn');
+            if (button && this.handleActionButtonClick_(button, index))
+                return;
+            this.handleSelectionClick_(index);
         };
         const root = doc.createElement('div');
         root.className = 'tp-dynlistblade';
@@ -116,18 +203,11 @@ class DynamicListBladeView {
     }
     set items(next) {
         this.items_ = [...next];
+        this.setSelection_(this.selectedIndices_);
         this.render_();
     }
     setOptions(next) {
-        if (typeof next.allowRemove === 'boolean') {
-            this.allowRemove_ = next.allowRemove;
-        }
-        if (typeof next.allowReorder === 'boolean') {
-            this.allowReorder_ = next.allowReorder;
-        }
-        if (typeof next.showItemTooltip === 'boolean') {
-            this.showItemTooltip_ = next.showItemTooltip;
-        }
+        this.applyOptionPatch_(next);
         this.render_();
     }
     set inlineLabel(next) {
@@ -138,6 +218,44 @@ class DynamicListBladeView {
         this.fullWidth_ = Boolean(next);
         this.element.classList.toggle('tp-dynlistblade-full', this.fullWidth_);
     }
+    get selectedIndex() {
+        return this.selectedIndex_;
+    }
+    set selectedIndex(next) {
+        this.setSelection_([next]);
+        this.render_();
+    }
+    get selectedIndices() {
+        return [...this.selectedIndices_];
+    }
+    set selectedIndices(next) {
+        this.setSelection_(next);
+        this.render_();
+    }
+    get selectable() {
+        return this.selectable_;
+    }
+    set selectable(next) {
+        this.setOptions({ selectable: next });
+    }
+    get clickable() {
+        return this.clickable_;
+    }
+    set clickable(next) {
+        this.setOptions({ clickable: next });
+    }
+    get allowDeselect() {
+        return this.allowDeselect_;
+    }
+    set allowDeselect(next) {
+        this.setOptions({ allowDeselect: next });
+    }
+    get multiSelect() {
+        return this.multiSelect_;
+    }
+    set multiSelect(next) {
+        this.setOptions({ multiSelect: next });
+    }
     get rows() {
         return this.rows_;
     }
@@ -164,7 +282,8 @@ class DynamicListBladeView {
         this.render_();
     }
     createListElement_(doc, style) {
-        const list = doc.createElement(style);
+        const elementTag = style === 'ol' ? 'ol' : 'ul';
+        const list = doc.createElement(elementTag);
         list.className = `tp-dynlistblade_list tp-dynlistblade_list-${style}`;
         list.addEventListener('click', this.onListClick_);
         return list;
@@ -182,6 +301,7 @@ class DynamicListBladeView {
         this.element.style.setProperty('--tp-dynlistblade-rows-gap', String(Math.max(0, rows - 1)));
     }
     render_() {
+        this.updateListStateClasses_();
         if (this.items_.length === 0) {
             this.ensureEmptyState_();
             return;
@@ -190,25 +310,32 @@ class DynamicListBladeView {
         this.ensureRowCount_(this.items_.length);
         this.items_.forEach((text, index) => {
             const row = this.itemRows_[index];
-            row.item.dataset.index = String(index);
-            row.text.textContent = text;
-            if (this.showItemTooltip_) {
-                row.text.title = text;
-            }
-            else {
-                row.text.removeAttribute('title');
-            }
-            const showActions = this.allowRemove_ || this.allowReorder_;
-            row.actions.style.display = showActions ? '' : 'none';
-            row.upButton.style.display = this.allowReorder_ ? '' : 'none';
-            row.downButton.style.display = this.allowReorder_ ? '' : 'none';
-            row.removeButton.style.display = this.allowRemove_ ? '' : 'none';
-            row.upButton.disabled = !this.allowReorder_ || index === 0;
-            row.downButton.disabled = !this.allowReorder_ || index === this.items_.length - 1;
-            row.removeButton.disabled = !this.allowRemove_;
+            this.renderRowContent_(row, index, text);
+            this.renderRowActions_(row, index);
             this.listElement_.appendChild(row.item);
         });
     }
+    renderRowContent_(row, index, text) {
+        row.item.dataset.index = String(index);
+        row.item.classList.toggle('tp-dynlistblade_i-selected', this.selectable_ && this.selectedIndices_.includes(index));
+        row.text.textContent = text;
+        if (this.showItemTooltip_) {
+            row.text.title = text;
+        }
+        else {
+            row.text.removeAttribute('title');
+        }
+    }
+    renderRowActions_(row, index) {
+        const showActions = this.allowRemove_ || this.allowReorder_;
+        row.actions.style.display = showActions ? '' : 'none';
+        row.upButton.style.display = this.allowReorder_ ? '' : 'none';
+        row.downButton.style.display = this.allowReorder_ ? '' : 'none';
+        row.removeButton.style.display = this.allowRemove_ ? '' : 'none';
+        row.upButton.disabled = !this.allowReorder_ || index === 0;
+        row.downButton.disabled = !this.allowReorder_ || index === this.items_.length - 1;
+        row.removeButton.disabled = !this.allowRemove_;
+    }
     ensureEmptyState_() {
         if (!this.emptyItemElement_) {
             const emptyItem = this.element.ownerDocument.createElement('li');
@@ -218,9 +345,13 @@ class DynamicListBladeView {
             emptyItem.appendChild(emptyRow);
             const emptyText = this.element.ownerDocument.createElement('span');
             emptyText.className = 'tp-dynlistblade_t tp-dynlistblade_t-empty';
-            emptyText.textContent = 'Empty';
+            emptyText.textContent = this.emptyText_;
             emptyRow.appendChild(emptyText);
             this.emptyItemElement_ = emptyItem;
+            this.emptyTextElement_ = emptyText;
+        }
+        if (this.emptyTextElement_) {
+            this.emptyTextElement_.textContent = this.emptyText_;
         }
         this.itemRows_.forEach((row) => {
             if (row.item.parentElement === this.listElement_) {
@@ -278,6 +409,105 @@ class DynamicListBladeView {
         button.title = title;
         return button;
     }
+    updateListStateClasses_() {
+        this.listElement_.classList.toggle('tp-dynlistblade_list-clickable', this.clickable_);
+        this.listElement_.classList.toggle('tp-dynlistblade_list-selectable', this.selectable_);
+        this.listElement_.classList.toggle('tp-dynlistblade_list-has-selection', this.selectable_ && this.selectedIndices_.length > 0);
+        this.listElement_.classList.toggle('tp-dynlistblade_list-multiselect', this.multiSelect_);
+    }
+    normalizeSelectedIndices_(value) {
+        if (!this.selectable_ || this.items_.length === 0)
+            return [];
+        const arr = Array.isArray(value) ? value : [];
+        const next = Array.from(new Set(arr
+            .map((v) => (Number.isFinite(v) ? Math.floor(v) : NaN))
+            .filter((v) => Number.isFinite(v) && v >= 0 && v < this.items_.length)));
+        next.sort((a, b) => a - b);
+        if (this.multiSelect_)
+            return next;
+        return next.length > 0 ? [next[0]] : [];
+    }
+    setSelection_(nextSelection) {
+        this.selectedIndices_ = this.normalizeSelectedIndices_(nextSelection);
+        this.selectedIndex_ = this.selectedIndices_[0] ?? -1;
+    }
+    applyOptionPatch_(next) {
+        if (typeof next.allowRemove === 'boolean') {
+            this.allowRemove_ = next.allowRemove;
+        }
+        if (typeof next.allowReorder === 'boolean') {
+            this.allowReorder_ = next.allowReorder;
+        }
+        if (typeof next.showItemTooltip === 'boolean') {
+            this.showItemTooltip_ = next.showItemTooltip;
+        }
+        if (typeof next.emptyText === 'string') {
+            this.emptyText_ = next.emptyText;
+        }
+        if (typeof next.clickable === 'boolean') {
+            this.clickable_ = next.clickable;
+        }
+        if (typeof next.selectable === 'boolean') {
+            this.selectable_ = next.selectable;
+            this.setSelection_(this.selectable_ ? this.selectedIndices_ : []);
+        }
+        if (typeof next.allowDeselect === 'boolean') {
+            this.allowDeselect_ = next.allowDeselect;
+        }
+        if (typeof next.multiSelect === 'boolean') {
+            this.multiSelect_ = next.multiSelect;
+            const nextSelection = !this.multiSelect_ && this.selectedIndices_.length > 1
+                ? this.selectedIndices_.slice(0, 1)
+                : this.selectedIndices_;
+            this.setSelection_(nextSelection);
+        }
+    }
+    handleActionButtonClick_(button, index) {
+        if (button.disabled)
+            return true;
+        const action = button.dataset.action;
+        if (action === 'up') {
+            this.onMoveUp_(index);
+            return true;
+        }
+        if (action === 'down') {
+            this.onMoveDown_(index);
+            return true;
+        }
+        if (action === 'remove') {
+            this.onRemove_(index);
+            return true;
+        }
+        return false;
+    }
+    handleSelectionClick_(index) {
+        if (!this.selectable_)
+            return;
+        let nextSelection = [...this.selectedIndices_];
+        if (this.multiSelect_) {
+            const next = new Set(this.selectedIndices_);
+            if (next.has(index)) {
+                next.delete(index);
+            }
+            else {
+                next.add(index);
+            }
+            nextSelection = this.normalizeSelectedIndices_([...next]);
+        }
+        else if (this.selectedIndex_ === index && this.allowDeselect_) {
+            nextSelection = [];
+        }
+        else {
+            nextSelection = this.normalizeSelectedIndices_([index]);
+        }
+        const same = nextSelection.length === this.selectedIndices_.length &&
+            nextSelection.every((value, idx) => value === this.selectedIndices_[idx]);
+        if (!same) {
+            this.setSelection_(nextSelection);
+            this.render_();
+        }
+        this.onSelectionChange_([...this.selectedIndices_]);
+    }
 }
 class DynamicListBladeController extends BladeController {
     items_;
@@ -286,24 +516,48 @@ class DynamicListBladeController extends BladeController {
     overflowMode_;
     allowRemove_;
     allowReorder_;
+    emptyText_;
     inlineLabel_;
     showItemTooltip_;
     fullWidth_;
+    clickable_;
+    selectable_;
+    allowDeselect_;
+    listStyle_;
+    requestedMultiSelect_;
+    multiSelect_;
+    selectedIndex_;
+    selectedIndices_;
+    actionHandlers_;
     constructor(doc, config) {
         const initialItems = clampItemsToMax([...config.items], config.maxItems, true);
+        const initialListStyle = sanitizeListStyle(config.listStyle);
+        const initialSelectable = Boolean(config.selectable);
+        const initialRequestedMultiSelect = Boolean(config.multiSelect);
+        const initialMultiSelect = resolveMultiSelectByStyle(initialListStyle, initialRequestedMultiSelect);
+        const initialSelectedIndices = normalizeSelectionForItems(initialItems, initialSelectable, initialMultiSelect, config.selectedIndices, config.selectedIndex);
+        const initialSelectedIndex = initialSelectedIndices[0] ?? -1;
         const view = new DynamicListBladeView(doc, {
             label: config.label,
-            listStyle: config.listStyle,
+            emptyText: config.emptyText,
+            listStyle: initialListStyle,
             items: initialItems,
             rows: normalizeRows(config.rows),
             onMoveUp: (index) => this.moveUp(index),
             onMoveDown: (index) => this.moveDown(index),
             onRemove: (index) => this.remove(index),
+            onSelectionChange: (indices) => this.selectMany(indices),
             allowRemove: config.allowRemove,
             allowReorder: config.allowReorder,
             inlineLabel: config.inlineLabel,
             showItemTooltip: config.showItemTooltip,
             fullWidth: config.fullWidth,
+            clickable: config.clickable,
+            selectable: initialSelectable,
+            allowDeselect: config.allowDeselect,
+            multiSelect: initialMultiSelect,
+            selectedIndex: initialSelectedIndex,
+            selectedIndices: initialSelectedIndices,
         });
         super({
             blade: config.blade,
@@ -316,9 +570,19 @@ class DynamicListBladeController extends BladeController {
         this.overflowMode_ = sanitizeOverflowMode(config.overflowMode);
         this.allowRemove_ = config.allowRemove;
         this.allowReorder_ = config.allowReorder;
+        this.emptyText_ = config.emptyText;
         this.inlineLabel_ = config.inlineLabel;
         this.showItemTooltip_ = config.showItemTooltip;
         this.fullWidth_ = config.fullWidth;
+        this.clickable_ = Boolean(config.clickable);
+        this.selectable_ = initialSelectable;
+        this.allowDeselect_ = Boolean(config.allowDeselect);
+        this.listStyle_ = initialListStyle;
+        this.requestedMultiSelect_ = initialRequestedMultiSelect;
+        this.multiSelect_ = initialMultiSelect;
+        this.selectedIndex_ = initialSelectedIndex;
+        this.selectedIndices_ = initialSelectedIndices;
+        this.actionHandlers_ = new Set();
     }
     get items() {
         return [...this.items_];
@@ -332,7 +596,8 @@ class DynamicListBladeController extends BladeController {
     }
     set items(next) {
         this.items_ = clampItemsToMax([...next], this.maxItems_, true);
-        this.view.items = this.items_;
+        this.setNormalizedSelection_(this.selectedIndices_);
+        this.refreshAfterItemsChange_();
     }
     get maxItems() {
         return this.maxItems_;
@@ -340,7 +605,8 @@ class DynamicListBladeController extends BladeController {
     set maxItems(next) {
         this.maxItems_ = normalizeMaxItems(next);
         this.items_ = clampItemsToMax(this.items_, this.maxItems_, true);
-        this.view.items = this.items_;
+        this.setNormalizedSelection_(this.selectedIndices_);
+        this.refreshAfterItemsChange_();
     }
     get overflowMode() {
         return this.overflowMode_;
@@ -362,6 +628,49 @@ class DynamicListBladeController extends BladeController {
         this.allowReorder_ = Boolean(next);
         this.view.setOptions({ allowReorder: this.allowReorder_ });
     }
+    get selectable() {
+        return this.selectable_;
+    }
+    set selectable(next) {
+        this.selectable_ = Boolean(next);
+        this.view.selectable = this.selectable_;
+        this.view.multiSelect = this.multiSelect_;
+        this.setNormalizedSelection_(this.selectable_ ? this.selectedIndices_ : []);
+        this.refreshAfterSelectionChange_();
+    }
+    get clickable() {
+        return this.clickable_;
+    }
+    set clickable(next) {
+        this.clickable_ = Boolean(next);
+        this.view.setOptions({ clickable: this.clickable_ });
+    }
+    get allowDeselect() {
+        return this.allowDeselect_;
+    }
+    set allowDeselect(next) {
+        this.allowDeselect_ = Boolean(next);
+        this.view.setOptions({ allowDeselect: this.allowDeselect_ });
+    }
+    get multiSelect() {
+        return this.multiSelect_;
+    }
+    set multiSelect(next) {
+        this.requestedMultiSelect_ = Boolean(next);
+        this.applySelectionModeFromStyle_();
+    }
+    get selectedIndex() {
+        return this.selectedIndex_;
+    }
+    set selectedIndex(next) {
+        this.select(next);
+    }
+    get selectedIndices() {
+        return [...this.selectedIndices_];
+    }
+    set selectedIndices(next) {
+        this.selectMany(next);
+    }
     get showItemTooltip() {
         return this.showItemTooltip_;
     }
@@ -369,6 +678,13 @@ class DynamicListBladeController extends BladeController {
         this.showItemTooltip_ = Boolean(next);
         this.view.setOptions({ showItemTooltip: this.showItemTooltip_ });
     }
+    get emptyText() {
+        return this.emptyText_;
+    }
+    set emptyText(next) {
+        this.emptyText_ = String(next);
+        this.view.setOptions({ emptyText: this.emptyText_ });
+    }
     get inlineLabel() {
         return this.inlineLabel_;
     }
@@ -384,14 +700,22 @@ class DynamicListBladeController extends BladeController {
         this.view.fullWidth = this.fullWidth_;
     }
     get listStyle() {
-        return this.view.listStyle;
+        return this.listStyle_;
     }
     set listStyle(next) {
-        this.view.listStyle = next;
+        this.listStyle_ = sanitizeListStyle(next);
+        this.view.listStyle = this.listStyle_;
+        this.applySelectionModeFromStyle_();
     }
     setLabel(next) {
         this.view.label = next;
     }
+    onAction(handler) {
+        this.actionHandlers_.add(handler);
+        return () => {
+            this.actionHandlers_.delete(handler);
+        };
+    }
     add(item) {
         if (Number.isFinite(this.maxItems_)) {
             const max = this.maxItems_;
@@ -403,30 +727,131 @@ class DynamicListBladeController extends BladeController {
             }
         }
         this.items_.push(item);
-        this.view.items = this.items_;
+        this.setNormalizedSelection_(this.selectedIndices_);
+        this.refreshAfterItemsChange_();
         return true;
     }
     remove(index) {
         if (index < 0 || index >= this.items_.length)
             return;
+        const removedItem = this.items_[index];
+        const wasSelected = this.selectedIndices_.includes(index);
         this.items_.splice(index, 1);
-        this.view.items = this.items_;
+        const next = remapSelectionAfterRemove(this.selectedIndices_, index, this.items_.length);
+        this.setNormalizedSelection_(next);
+        this.refreshAfterItemsChange_();
+        if (wasSelected) {
+            this.emitSelectAction_();
+        }
+        if (typeof removedItem === 'string') {
+            this.emitRemoveAction_(index, removedItem);
+        }
     }
     moveUp(index) {
-        if (index <= 0 || index >= this.items_.length)
-            return;
-        const tmp = this.items_[index - 1];
-        this.items_[index - 1] = this.items_[index];
-        this.items_[index] = tmp;
-        this.view.items = this.items_;
+        this.moveBy_(index, -1);
     }
     moveDown(index) {
-        if (index < 0 || index >= this.items_.length - 1)
-            return;
-        const tmp = this.items_[index + 1];
-        this.items_[index + 1] = this.items_[index];
-        this.items_[index] = tmp;
+        this.moveBy_(index, 1);
+    }
+    select(index) {
+        this.applySelectionAndEmit_([index]);
+    }
+    selectMany(indices) {
+        this.applySelectionAndEmit_(indices);
+    }
+    applySelectionModeFromStyle_() {
+        this.multiSelect_ = resolveMultiSelectByStyle(this.listStyle_, this.requestedMultiSelect_);
+        if (!this.multiSelect_ && this.selectedIndices_.length > 1) {
+            this.selectedIndices_ = this.selectedIndices_.slice(0, 1);
+        }
+        this.setNormalizedSelection_(this.selectedIndices_);
+        this.view.multiSelect = this.multiSelect_;
+        this.refreshAfterSelectionChange_();
+    }
+    setNormalizedSelection_(nextSelection) {
+        const next = normalizeSelectionState(this.items_, this.selectable_, this.multiSelect_, nextSelection);
+        this.selectedIndices_ = next.selectedIndices;
+        this.selectedIndex_ = next.selectedIndex;
+    }
+    refreshAfterSelectionChange_() {
+        this.view.selectedIndex = this.selectedIndex_;
+        this.view.selectedIndices = this.selectedIndices_;
+    }
+    refreshAfterItemsChange_() {
         this.view.items = this.items_;
+        this.refreshAfterSelectionChange_();
+    }
+    applySelectionAndEmit_(nextSelection) {
+        const next = normalizeSelectionState(this.items_, this.selectable_, this.multiSelect_, nextSelection);
+        if (isSameSelectionState(next, {
+            selectedIndex: this.selectedIndex_,
+            selectedIndices: this.selectedIndices_,
+        })) {
+            this.emitSelectAction_();
+            return;
+        }
+        this.selectedIndices_ = next.selectedIndices;
+        this.selectedIndex_ = next.selectedIndex;
+        this.refreshAfterSelectionChange_();
+        this.emitSelectAction_();
+    }
+    moveBy_(fromIndex, delta) {
+        const toIndex = fromIndex + delta;
+        if (fromIndex < 0 || fromIndex >= this.items_.length)
+            return;
+        if (toIndex < 0 || toIndex >= this.items_.length)
+            return;
+        const movedItem = this.items_[fromIndex];
+        const tmp = this.items_[toIndex];
+        this.items_[toIndex] = this.items_[fromIndex];
+        this.items_[fromIndex] = tmp;
+        this.setNormalizedSelection_(remapSelectionAfterMove(this.selectedIndices_, fromIndex, toIndex));
+        this.refreshAfterItemsChange_();
+        if (typeof movedItem === 'string') {
+            this.emitMoveAction_(fromIndex, toIndex, movedItem);
+        }
+    }
+    emitSelectAction_() {
+        this.emitAction_(this.toSelectActionEvent_());
+    }
+    emitRemoveAction_(index, item) {
+        this.emitAction_(this.toRemoveActionEvent_(index, item));
+    }
+    emitMoveAction_(fromIndex, toIndex, item) {
+        this.emitAction_(this.toMoveActionEvent_(fromIndex, toIndex, item));
+    }
+    toSelectActionEvent_() {
+        const item = this.selectedIndex_ >= 0 && this.selectedIndex_ < this.items_.length
+            ? this.items_[this.selectedIndex_]
+            : null;
+        const selectedItems = this.selectedIndices_.map((i) => this.items_[i]).filter((v) => typeof v === 'string');
+        return {
+            type: 'select',
+            index: this.selectedIndex_,
+            item,
+            indices: [...this.selectedIndices_],
+            items: selectedItems,
+        };
+    }
+    toRemoveActionEvent_(index, item) {
+        return {
+            type: 'remove',
+            index,
+            item,
+        };
+    }
+    toMoveActionEvent_(fromIndex, toIndex, item) {
+        return {
+            type: 'move',
+            fromIndex,
+            toIndex,
+            item,
+        };
+    }
+    emitAction_(event) {
+        this.actionHandlers_.forEach((handler) => {
+            handler(event);
+        });
     }
 }
 export class DynamicListBladeApi extends BladeApi {
@@ -478,6 +903,48 @@ export class DynamicListBladeApi extends BladeApi {
     set showItemTooltip(next) {
         this.controller.showItemTooltip = Boolean(next);
     }
+    get emptyText() {
+        return this.controller.emptyText;
+    }
+    set emptyText(next) {
+        this.controller.emptyText = String(next);
+    }
+    get selectable() {
+        return this.controller.selectable;
+    }
+    set selectable(next) {
+        this.controller.selectable = Boolean(next);
+    }
+    get clickable() {
+        return this.controller.clickable;
+    }
+    set clickable(next) {
+        this.controller.clickable = Boolean(next);
+    }
+    get allowDeselect() {
+        return this.controller.allowDeselect;
+    }
+    set allowDeselect(next) {
+        this.controller.allowDeselect = Boolean(next);
+    }
+    get multiSelect() {
+        return this.controller.multiSelect;
+    }
+    set multiSelect(next) {
+        this.controller.multiSelect = Boolean(next);
+    }
+    get selectedIndex() {
+        return this.controller.selectedIndex;
+    }
+    set selectedIndex(next) {
+        this.controller.selectedIndex = Number(next);
+    }
+    get selectedIndices() {
+        return this.controller.selectedIndices;
+    }
+    set selectedIndices(next) {
+        this.controller.selectedIndices = Array.isArray(next) ? next : [];
+    }
     get fullWidth() {
         return this.controller.fullWidth;
     }
@@ -505,6 +972,9 @@ export class DynamicListBladeApi extends BladeApi {
     moveDown(index) {
         this.controller.moveDown(index);
     }
+    onAction(handler) {
+        return this.controller.onAction(handler);
+    }
 }
 const DynamicListBladePlugin = createPlugin({
     id: 'dynamiclistblade',
@@ -513,7 +983,10 @@ const DynamicListBladePlugin = createPlugin({
         const result = parseRecord(params, (p) => ({
             view: p.required.constant('dynamiclistblade'),
             label: p.optional.string,
-            listStyle: p.optional.custom((value) => value === 'ul' || value === 'ol' ? value : undefined),
+            emptyText: p.optional.string,
+            listStyle: p.optional.custom((value) => value === 'ul' || value === 'ol' || value === 'radio' || value === 'checkbox'
+                ? value
+                : undefined),
             items: p.optional.array(p.required.string),
             rows: p.optional.number,
             maxItems: p.optional.number,
@@ -523,41 +996,27 @@ const DynamicListBladePlugin = createPlugin({
             inlineLabel: p.optional.boolean,
             showItemTooltip: p.optional.boolean,
             fullWidth: p.optional.boolean,
+            clickable: p.optional.boolean,
+            selectable: p.optional.boolean,
+            allowDeselect: p.optional.boolean,
+            multiSelect: p.optional.boolean,
+            selectedIndex: p.optional.number,
+            selectedIndices: p.optional.array(p.required.number),
         }));
         if (!result) {
             return null;
         }
+        const normalized = normalizeDynamicListBladeParams(result);
         return {
-            params: {
-                ...result,
-                listStyle: sanitizeListStyle(result.listStyle),
-                items: result.items ?? [],
-                rows: normalizeRows(result.rows),
-                maxItems: normalizeMaxItems(result.maxItems),
-                overflowMode: sanitizeOverflowMode(result.overflowMode),
-                allowRemove: result.allowRemove ?? true,
-                allowReorder: result.allowReorder ?? true,
-                inlineLabel: result.inlineLabel ?? false,
-                showItemTooltip: result.showItemTooltip ?? false,
-                fullWidth: result.fullWidth ?? false,
-            },
+            params: normalized,
         };
     },
     controller(args) {
+        const normalized = normalizeDynamicListBladeParams(args.params);
         return new DynamicListBladeController(args.document, {
             blade: args.blade,
             viewProps: args.viewProps,
-            label: args.params.label,
-            listStyle: sanitizeListStyle(args.params.listStyle),
-            items: args.params.items ?? [],
-            rows: normalizeRows(args.params.rows),
-            maxItems: normalizeMaxItems(args.params.maxItems),
-            overflowMode: sanitizeOverflowMode(args.params.overflowMode),
-            allowRemove: args.params.allowRemove ?? true,
-            allowReorder: args.params.allowReorder ?? true,
-            inlineLabel: args.params.inlineLabel ?? false,
-            showItemTooltip: args.params.showItemTooltip ?? false,
-            fullWidth: args.params.fullWidth ?? false,
+            ...normalized,
         });
     },
     api(args) {
@@ -642,14 +1101,31 @@ export const DynamicListBladePluginBundle = {
     .tp-dynlistblade_i {
       min-width: 0;
     }
-    .tp-dynlistblade_i::after {
+    .tp-dynlistblade_list-clickable .tp-dynlistblade_i,
+    .tp-dynlistblade_list-selectable .tp-dynlistblade_i {
+      cursor: pointer;
+    }
+    .tp-dynlistblade_list-clickable .tp-dynlistblade_row::after,
+    .tp-dynlistblade_list-selectable .tp-dynlistblade_row::after {
       content: '';
       display: block;
-      width: 100%;
-      height: 1px;
-      border-radius: 0.5px;
-      background: rgba(255, 255, 255, 0.03);
-      margin-block: 1px;
+      width: calc(100% + (var(--tp-c-container-padding-inline) + 2px));
+      height: 100%;
+      border-radius: var(--tp-c-base-border-radius);
+      background: var(--tp-button-background-color);
+      position: absolute;
+      pointer-events: none;
+      margin-inline: calc((var(--tp-c-container-padding-inline) + 2px) / 2 * -1);
+      opacity: 0;
+    }
+    .tp-dynlistblade_list-clickable .tp-dynlistblade_row:hover::after,
+    .tp-dynlistblade_list-selectable .tp-dynlistblade_row:hover::after,
+    .tp-dynlistblade_i.tp-dynlistblade_i-selected .tp-dynlistblade_row::after {
+      opacity: 0.2;
+    }
+    .tp-dynlistblade_i.tp-dynlistblade_i-selected .tp-dynlistblade_row > * {
+      position: relative;
+      z-index: 1;
     }
     .tp-dynlistblade_i:last-child::after {
       display: none;
@@ -659,6 +1135,7 @@ export const DynamicListBladePluginBundle = {
       align-items: center;
       vertical-align: top;
       width: 100%;
+      position: relative;
     }
     .tp-dynlistblade_row::before {
       content: '';
@@ -667,6 +1144,8 @@ export const DynamicListBladePluginBundle = {
       display: inline-block;
       min-width: 10px;
       margin-right: 4px;
+      position: relative;
+      z-index: 1;
     }
     .tp-dynlistblade_list-ol .tp-dynlistblade_row::before {
       content: counter(list-item) '';
@@ -674,6 +1153,18 @@ export const DynamicListBladePluginBundle = {
     .tp-dynlistblade_list-ul .tp-dynlistblade_row::before {
       content: '-';
     }
+    .tp-dynlistblade_list-radio .tp-dynlistblade_row::before {
+      content: '○';
+    }
+    .tp-dynlistblade_list-checkbox .tp-dynlistblade_row::before {
+      content: '☐';
+    }
+    .tp-dynlistblade_list-radio .tp-dynlistblade_i-selected .tp-dynlistblade_row::before {
+      content: '●';
+    }
+    .tp-dynlistblade_list-checkbox .tp-dynlistblade_i-selected .tp-dynlistblade_row::before {
+      content: '◼︎';
+    }
     .tp-dynlistblade_t {
       width: 100%;
       flex: 1;