diff --git a/web/src/elements/ak-dual-select/ak-dual-select-dynamic-selected-provider.ts b/web/src/elements/ak-dual-select/ak-dual-select-dynamic-selected-provider.ts index 9843007c18..3aac4172be 100644 --- a/web/src/elements/ak-dual-select/ak-dual-select-dynamic-selected-provider.ts +++ b/web/src/elements/ak-dual-select/ak-dual-select-dynamic-selected-provider.ts @@ -51,6 +51,9 @@ export class AkDualSelectDynamic extends AkDualSelectProvider { .selected=${this.selected} available-label=${this.availableLabel} selected-label=${this.selectedLabel} + ?preserve-order=${this.preserveOrder} + ?no-search=${this.noSearch} + ?no-status=${this.noStatus} >`; } } diff --git a/web/src/elements/ak-dual-select/ak-dual-select-provider.ts b/web/src/elements/ak-dual-select/ak-dual-select-provider.ts index 6adba45a52..7137cffc06 100644 --- a/web/src/elements/ak-dual-select/ak-dual-select-provider.ts +++ b/web/src/elements/ak-dual-select/ak-dual-select-provider.ts @@ -60,6 +60,30 @@ export class AkDualSelectProvider extends CustomListenerElement(AkControlElement @property({ attribute: "selected-label" }) public selectedLabel = msg("Selected options"); + /** + * When true, the selected pane preserves insertion order instead of sorting alphabetically. + * + * @attr + */ + @property({ type: Boolean, attribute: "preserve-order" }) + public preserveOrder = false; + + /** + * When true, hides the search bars in both the available and selected panes. + * + * @attr + */ + @property({ type: Boolean, attribute: "no-search" }) + public noSearch = false; + + /** + * When true, hides the item count status displays in both panes. + * + * @attr + */ + @property({ type: Boolean, attribute: "no-status" }) + public noStatus = false; + /** * The debounce for the search as the user is typing in a request * @@ -187,6 +211,9 @@ export class AkDualSelectProvider extends CustomListenerElement(AkControlElement .selected=${this.#selected} available-label=${this.availableLabel} selected-label=${this.selectedLabel} + ?preserve-order=${this.preserveOrder} + ?no-search=${this.noSearch} + ?no-status=${this.noStatus} >`; } } diff --git a/web/src/elements/ak-dual-select/ak-dual-select.ts b/web/src/elements/ak-dual-select/ak-dual-select.ts index f04b4081de..83b094762f 100644 --- a/web/src/elements/ak-dual-select/ak-dual-select.ts +++ b/web/src/elements/ak-dual-select/ak-dual-select.ts @@ -90,6 +90,19 @@ export class AkDualSelect extends CustomEmitterElement(CustomListenerElement(AKE @property({ attribute: "selected-label" }) selectedLabel = msg("Selected options"); + @property({ type: Boolean, attribute: "no-search" }) + noSearch = false; + + @property({ type: Boolean, attribute: "no-status" }) + noStatus = false; + + /** + * When true, the selected pane preserves insertion order instead of sorting alphabetically. + * Use this when the order of selected items is meaningful (e.g. priority-based lists). + */ + @property({ type: Boolean, attribute: "preserve-order" }) + preserveOrder = false; + //#endregion //#region State @@ -322,17 +335,21 @@ export class AkDualSelect extends CustomEmitterElement(CustomListenerElement(AKE - -
- ${unsafeHTML(availableStatus)} -
+ ${this.noSearch + ? nothing + : html``} + ${this.noStatus + ? nothing + : html`
+ ${unsafeHTML(availableStatus)} +
`} - -
- ${selectedStatus} -
+ ${this.noSearch + ? nothing + : html``} + ${this.noStatus + ? nothing + : html`
+ ${selectedStatus} +
`}