@soleil-se/config-svelte 1.22.0 → 1.24.0

package/CHANGELOG.md

@@ -1,28 +1,35 @@
-# Changelog
+---
+title: Changelog
+---
 
 All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.23.0] - 2024-03-07
+
+- List item templating in `CustomList` with [CustomListItemTemplate](/packages/soleil/svelte-config/components/customlist/#list-item-template).
+- Trigger manual update of `CustomList` with [triggerUpdate](/packages/soleil/svelte-config/components/customlist/#dynamic-content) function.
+
 ## [1.22.0] - 2024-02-13
 
 - More lenient `@sitevision/api` peer dependency range.
-- Try to use `window.sv.getValues()` if available since `window._getValues()` is deprecated.
+- Try to use `window.sv.getValues()` first since `window._getValues()` is deprecated.
 
 ## [1.21.0] - 2023-10-13
 
-- Add `legendVisuallyHidden` prop for [RadioGroup](./components/RadioGroup) and [CheckboxGroup](./components/CheckboxGroup).
-- Add `class` prop for [Panel](./components/Panel).
-- Add `removable` prop for [CustomSelector](./components/CustomSelector).
+- Add `legendVisuallyHidden` prop for [RadioGroup](/packages/soleil/svelte-config/components/radiogroup) and [CheckboxGroup](/packages/soleil/svelte-config/components/checkboxgroup).
+- Add `class` prop for [Panel](/packages/soleil/svelte-config/components/panel).
+- Add `removable` prop for [CustomSelector](/packages/soleil/svelte-config/components/customselector).
 
 ## [1.20.1] - 2023-09-25
 
-- Fix element containting title in [Modal](./components/Modal).
+- Fix element containting title in [Modal](/packages/soleil/svelte-config/components/modal).
 
 ## [1.20.0] - 2023-09-25
 
-- Add footer slot in [Modal](./components/Modal).
+- Add footer slot in [Modal](/packages/soleil/svelte-config/components/modal).
 
 ## [1.19.0] - 2023-05-17
 
@@ -38,19 +45,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [1.18.0] - 2023-01-20
 
-- Option templating in [CustomSelector](./components/CustomSelector).
+- Option templating in [CustomSelector](/packages/soleil/svelte-config/components/customselector).
 - Add global Select2 styling.
 - Modal now closes open Select2 dropdowns.
 
 ## [1.17.0] - 2022-12-01
 
-- New component: [RepositoryNodeSelector](./components/RepositoryNodeSelector).
-- New utility API: [getAppContext](./#getappcontext).
-- New server API: [createAppContext](./#context)
+- New component: [RepositoryNodeSelector](/packages/soleil/svelte-config/components/repositorynodeselector).
+- New utility API: [getAppContext](/packages/soleil/svelte-config#getappcontext).
+- New server API: [createAppContext](/packages/soleil/svelte-config#context)
 
 ## [1.16.2] - 2022-11-24
 
-- [ListSelector](./components/ListSelector) now works properly in [CustomList](./components/CustomList).
+- [ListSelector](/packages/soleil/svelte-config/components/listselector) now works properly in [CustomList](/packages/soleil/svelte-config/components/customlist).
 
 ## [1.16.1] - 2022-11-18
 
@@ -58,17 +65,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [1.16.0] - 2022-11-09
 
-- Add singular and plural suffix support for [NumberSpinner](./components/NumberSpinner)
+- Add singular and plural suffix support for [NumberSpinner](/packages/soleil/svelte-config/components/numberspinner)
 
 ## [1.15.0] - 2022-09-15
 
-- Required was not re-evaluated properly in [InputField](./components/InputField), [NodeSelector](./components/NodeSelector) and [TagSelector](./components/TagSelector).
+- Required was not re-evaluated properly in [InputField](/packages/soleil/svelte-config/components/inputfield), [NodeSelector](/packages/soleil/svelte-config/components/nodeselector) and [TagSelector](/packages/soleil/svelte-config/components/tagselector).
 - Add `show` prop for all components to toggle visibility without re-rendering.
 
 ## [1.14.0] - 2022-07-07
 
-- Add default slot for [ImageSelector](./components/ImageSelector).
-- Margin fix for [RadioGroup](./components/RadioGroup).
+- Add default slot for [ImageSelector](/packages/soleil/svelte-config/components/imageselector).
+- Margin fix for [RadioGroup](/packages/soleil/svelte-config/components/radiogroup).
 
 ## [1.13.0] - 2022-06-23
 
@@ -80,22 +87,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [1.12.0] - 2022-05-23
 
-- New component: [Modal](./components/Modal).
-- New component: [CustomList](./components/CustomList).
+- New component: [Modal](/packages/soleil/svelte-config/components/modal).
+- New component: [CustomList](/packages/soleil/svelte-config/components/customlist).
 
 ## [1.10.1] - 2022-03-08
 
-- Cast saved value to Number in [NumberSpinner](./components/NumberSpinner).
-- Fix reactivity for `suffix` prop in [NumberSpinner](./components/NumberSpinner).
+- Cast saved value to Number in [NumberSpinner](/packages/soleil/svelte-config/components/numberspinner).
+- Fix reactivity for `suffix` prop in [NumberSpinner](/packages/soleil/svelte-config/components/numberspinner).
 
 ## [1.10.0] - 2022-03-07
 
-- Added `multiple` prop for [CustomSelector](./components/CustomSelector).
-- First value is always selected in [RadioGroup](./components/RadioGroup) if nothing is selected.
+- Added `multiple` prop for [CustomSelector](/packages/soleil/svelte-config/components/customselector).
+- First value is always selected in [RadioGroup](/packages/soleil/svelte-config/components/radiogroup) if nothing is selected.
 
 ## [1.9.0] - 2021-12-06
 
-- Added [CustomSelector](./components/CustomSelector)
+- Added [CustomSelector](/packages/soleil/svelte-config/components/customselector)
 
 ## [1.8.4] - 2021-12-03
 

package/components/Checkbox/Component.svelte

@@ -32,18 +32,22 @@
 
 <div class="form-group {className}" class:hidden={!show}>
   <input
-    bind:checked={value}
-    {name}
     {id}
-    {disabled}
+    {name}
     class="sr-only"
-    type="checkbox"
     data-value-type="boolean"
+    {disabled}
+    type="checkbox"
+    bind:checked={value}
     on:change={onChange}
   />
-  <label for={id} class="checkbox-inline" class:disabled> {label} </label>
+  <label class="checkbox-inline" class:disabled for={id}>
+    <slot name="label">{label}</slot>
+  </label>
+  <slot />
 </div>
 
+<!-- eslint-disable max-len -->
 <style lang="scss">
   label {
     position: relative;

package/components/CheckboxGroup/Component.svelte

@@ -41,7 +41,9 @@
 -->
 
 <fieldset class="form-group {className}" class:hidden={!show}>
-  <legend class:sr-only={legendVisuallyHidden}>{legend}</legend>
+  <legend class:sr-only={legendVisuallyHidden}>
+    <slot name="legend">{legend}</slot>
+  </legend>
   {#each options as option, index}
     <input
       id={`${id}_${index}`}
@@ -62,6 +64,7 @@
       {option.label || option}
     </label>
   {/each}
+  <slot />
 </fieldset>
 
 <!-- eslint-disable -->

package/components/CustomList/Component.svelte

@@ -1,6 +1,5 @@
 <script>
   import { createEventDispatcher, onMount, tick } from 'svelte';
-
   import { generateId, addGeneratedIds } from '../../utils';
   import { resizer } from '../../actions';
   import i18n from './i18n';
@@ -11,7 +10,7 @@
   import EditModal from './internal/EditModal.svelte';
   import AddModal from './internal/AddModal.svelte';
 
-  const values = window.CONFIG_VALUES || {};
+  const configValues = window.CONFIG_VALUES || {};
   const dispatch = createEventDispatcher();
 
   export let label;
@@ -22,7 +21,7 @@
   export let icon;
 
   export let value = [];
-  value = name ? values[name] ?? value : value;
+  value = name ? configValues[name] ?? value : value;
 
   addGeneratedIds(value);
 
@@ -45,7 +44,10 @@
     await tick();
     items = value.map((id) => ({
       id,
-      name: document.querySelector(`#modal_${id} input`)?.value || id,
+      name:
+        document.querySelector(`#modal_${id} .custom-list-item-template`)?.innerHTML ||
+        document.querySelector(`#modal_${id} input:not([type=radio],[type=checkbox])`)?.value ||
+        id,
     }));
   }
 
@@ -93,6 +95,10 @@
     onChange();
   }
 
+  function triggerUpdate() {
+    updateItems();
+  }
+
   onMount(updateItems);
 </script>
 
@@ -106,28 +112,30 @@
 
 {#each modals as id, index (id)}
   <EditModal {id} open={editId === id} on:save={onEditSave} on:close={onEditClose}>
-    <slot {id} {index} />
+    <slot {id} {index} {triggerUpdate} />
   </EditModal>
 {/each}
 <AddModal {name} open={addModalOpen} on:save={onAddSave} on:close={onAddClose} let:id>
-  <slot {id} index={items.length} />
+  <slot {id} index={items.length} {triggerUpdate} />
 </AddModal>
 
 <div class="form-group" class:hidden={!show}>
   <label class="control-label {required ? 'control-label--required' : ''}" for={domId}>
-    {label}
+    <slot name="label">{label}</slot>
   </label>
   <div class="list-component">
     <div class="list-component__list-wrapper ui-resizable">
       <Sortable {dragDisabled} {items} on:finalize={onFinalize} let:item>
         <SortableItem
-          {...item}
+          id={item.id}
           {disabled}
           {icon}
           on:edit={onEdit}
           on:remove={onRemove}
           on:click={tempDisableDrag}
-        />
+        >
+          {@html item.name}
+        </SortableItem>
       </Sortable>
       <div class="ui-resizable-handle ui-resizable-s" use:resizer />
     </div>

package/components/CustomList/CustomListItemTemplate.svelte

@@ -0,0 +1,3 @@
+<div style:display="none" class="custom-list-item-template">
+  <slot />
+</div>

package/components/CustomList/README.md

@@ -1,11 +1,11 @@
-# CustomList
+---
+title: CustomList
+---
 
 A sortable list component for adding multiple grouped configuration components in modals.
 
-![CustomList](../../images/CustomList.png)
-![CustomListModal](../../images/CustomListModal.png)
-
-[[toc]]
+![CustomList](../images/CustomList.png)
+![CustomListModal](../images/CustomListModal.png)
 
 ## Props
 
@@ -36,17 +36,19 @@ This id needs to be prefixed to the `name` attribute.
   import { Panel, CustomList, InputField, NodeSelector } from '@soleil-se/svelte-config';
 </script>
 
-<Panel heading="Inställningar">     
+<Panel>     
   <CustomList name="customList" label="Custom list" let:id>
     <InputField name="{id}_name" label="Name" />
-    <NodeSelector name="{id}_page" label="Page" type="page-selector" />
+    <NodeSelector name="{id}_page" label="Page" />
   </CustomList>
 </Panel>
 ```
 
 ### Advanced
 
-Component is currently **not** supported in advanced configs.
+This component is currently **not** supported in advanced configs out of the box.  
+If you need to use it in an advanced config you can manually handle the state to normalize
+and flatten it for saving to the server.
 
 ## AppData
 
@@ -74,10 +76,100 @@ No list of icons is available, but you can inspect an icon in the edit interface
   import { Panel, CustomList, InputField, NodeSelector } from '@soleil-se/svelte-config';
 </script>
 
-<Panel heading="Inställningar">     
+<Panel>     
   <CustomList name="customList" label="Custom list" icon="sitevision-icons file" let:id>
     <InputField name="{id}_name" label="Name" />
-    <NodeSelector name="{id}_page" label="Page" type="page-selector" />
+    <NodeSelector name="{id}_page" label="Page" />
+  </CustomList>
+</Panel>
+```
+
+## List item template
+
+Sometimes you want full control over the list items, if some other value than the first input field 
+wants to be displayed or a completely custom template.  
+For this to work it's easiest to handle the modal content in a separate component.
+
+```svelte
+// App.svelte
+<script>
+  import { Panel, CustomList } from '@soleil-se/svelte-config';
+  import Settings from './Settings.svelte';
+</script>
+
+<Panel>     
+  <CustomList name="customList" label="Custom list" let:id>
+    <Settings {id} />
+  </CustomList>
+</Panel>
+```
+  
+```svelte
+// Settings.svelte
+<script>
+  import { InputField, NodeSelector, CustomListItemTemplate } from '@soleil-se/svelte-config';
+
+  export let id;
+  let name;  
+</script>
+
+<CustomListItemTemplate>
+  Page: {name}
+</CustomListItemTemplate>
+<InputField name="{id}_name" label="Name" bind:value={name} />
+<NodeSelector name="{id}_page" label="Page" type="page-selector" />
+```
+
+### Dynamic content
+
+A more advanced example with dynamically fetched content, a manual update of the list item is needed 
+on mount since the list doesn't know when all data is available.
+
+```svelte
+// App.svelte
+<script>
+  import { Panel, CustomList } from '@soleil-se/svelte-config';
+  import Settings from './Settings.svelte';
+</script>
+
+<Panel>     
+  <CustomList name="customList" label="Custom list" let:id let:triggerUpdate>
+    <Settings {id} {triggerUpdate} />
   </CustomList>
 </Panel>
 ```
+
+```svelte
+// Settings.svelte
+<script>
+  import { NodeSelector, CustomListItemTemplate } from '@soleil-se/svelte-config';
+  import { onMount } from 'svelte';
+
+  export let id;
+  export let triggerUpdate;
+
+  let pageId;
+  let name;  
+  let url;
+
+  async function fetchPageDetails() {
+    if (!pageId) return;
+    const res = await fetch(`/rest-api/1/0/${pageId}/properties`)
+      .then((res) => res.json());
+
+    name = res.displayName;
+    url = res.URL;
+  }
+
+  onMount(() => {
+    await fetchPageDetails();
+    triggerUpdate();
+  });
+  
+</script>
+
+<CustomListItemTemplate>
+  {name} ({url})
+</CustomListItemTemplate>
+<NodeSelector name="{id}_page" label="Page" on:change={fetchPageDetails} bind:value={pageId} />
+```

package/components/CustomList/index.js

@@ -1 +1,2 @@
 export { default } from './Component.svelte';
+export { default as CustomListItemTemplate } from './CustomListItemTemplate.svelte';

package/components/CustomList/internal/AddModal.svelte

@@ -13,7 +13,9 @@
 
   const dispatch = createEventDispatcher();
 
-  $: if (open) id = generateId(name || 'item');
+  $: if (open) {
+    id = generateId(name || 'item');
+  }
 
   const onClose = () => {
     dispatch('close');
@@ -29,7 +31,7 @@
   };
 </script>
 
-<Modal title={i18n('add')} on:save={onSave} on:close={onClose} {open} bind:element>
+<Modal {open} title={i18n('add')} on:save={onSave} on:close={onClose} bind:element>
   {#if id}
     <slot {id} />
   {/if}

package/components/CustomList/internal/EditModal.svelte

@@ -1,7 +1,7 @@
 <script>
   import i18n from '../i18n';
   import Modal from '../../Modal';
-  
+
   export let id;
   export let open = false;
 
@@ -13,7 +13,7 @@
   };
 </script>
 
-<div id="modal_{id}">
+<div id="modal_{id}" style:display="contents">
   <Modal title="{i18n('edit')} {name}" bind:open bind:element on:open={onOpen} on:save on:close>
     <slot />
   </Modal>

package/components/CustomList/internal/Sortable.svelte

@@ -25,6 +25,9 @@
 </script>
 
 <ul
+  class="list-component__list"
+  on:consider={onConsider}
+  on:finalize={onFinalize}
   use:dndzone={{
     items,
     flipDurationMs: 100,
@@ -34,12 +37,9 @@
     autoAriaDisabled: true,
     dragDisabled,
   }}
-  on:consider={onConsider}
-  on:finalize={onFinalize}
-  class="list-component__list"
 >
   {#each items as item (item.id)}
-    <li aria-label={item.name} animate:flip={{ duration: 100 }} tabindex="-1">
+    <li aria-label={item.name} tabindex="-1" animate:flip={{ duration: 100 }}>
       <slot {item} />
     </li>
   {/each}

package/components/CustomList/internal/SortableItem.svelte

@@ -2,7 +2,6 @@
   import { createEventDispatcher } from 'svelte';
 
   export let id;
-  export let name;
   export let disabled;
   export let icon;
 
@@ -23,7 +22,9 @@
   {#if icon}
     <i class="sv-list-icon {icon}" aria-hidden="true" />
   {/if}
-  <span class="item-name">{name}</span>
+  <span class="item-name">
+    <slot />
+  </span>
   <div class="list-component__item-actions">
     <button {disabled} on:click={editItem}>
       <i class="glyphicons edit" aria-hidden="true" />
@@ -56,9 +57,9 @@
   .list-component__item-actions {
     button {
       padding: 0;
+      appearance: none;
       background: none;
       border: none;
-      appearance: none;
     }
 
     :global(li:focus-within) & i {

package/components/CustomSelector/Component.svelte

@@ -79,7 +79,11 @@
       </span>
     {/each}
   {/if}
-  <label class="control-label {required ? 'control-label--required' : ''}" for={id}>{label}</label>
+  <label class="control-label {required ? 'control-label--required' : ''}" for={id}>
+    <slot name="label">
+      {label}
+    </slot>
+  </label>
   <select
     bind:this={element}
     {id}

package/components/DropdownSelector/Component.svelte

@@ -59,7 +59,9 @@
 -->
 
 <div class="form-group {className}" class:hidden={!show} {hidden}>
-  <label class="control-label {required ? 'control-label--required' : ''}" for={id}>{label}</label>
+  <label class="control-label {required ? 'control-label--required' : ''}" for={id}>
+    <slot name="label">{label}</slot>
+  </label>
   <select
     {id}
     {name}

package/components/ImageSelector/Component.svelte

@@ -72,18 +72,18 @@
   <NodeSelector
     name="{name}Node"
     label={i18n('selectImage')}
+    {required}
     type="image"
     bind:value={node}
     on:change={onChange}
-    {required}
   />
   <div class="form-group">
     {#if !hideDecorative}
       <Checkbox
-        class="checkbox-group"
-        bind:value={decorative}
         name="{name}Decorative"
+        class="checkbox-group"
         label={i18n('imageIsDecorative')}
+        bind:value={decorative}
         on:change={onChange}
       />
     {/if}
@@ -91,15 +91,15 @@
       {#if useCustomAlt}
         <InputField name="{name}Alt" label={i18n('altText')} required bind:value={alt} />
       {:else}
-        <InputField label={i18n('altFromCaption')} value={imageArchiveAlt} readonly disabled>
+        <InputField disabled label={i18n('altFromCaption')} readonly value={imageArchiveAlt}>
           <input bind:this={validationEl} class="sr-only" />
         </InputField>
       {/if}
 
       <Checkbox
         class="checkbox-group"
-        bind:value={useCustomAlt}
         label={i18n('customAltText')}
+        bind:value={useCustomAlt}
         on:change={onUseCustomToggle}
       />
     {/if}

package/components/InputField/Component.svelte

@@ -54,35 +54,35 @@
 -->
 
 <div class="form-group {className}" class:hidden={!show}>
-  <label for={id} class="control-label {isRequired ? 'control-label--required' : ''}">
-    {label}
+  <label class="control-label {isRequired ? 'control-label--required' : ''}" for={id}>
+    <slot name="label">{label}</slot>
   </label>
   {#if isTextarea}
     <textarea
-      class="form-control"
-      required={isRequired}
       {id}
       {name}
+      class="form-control"
       {disabled}
       {readonly}
-      {value}
+      required={isRequired}
       {rows}
+      {value}
       {...$$restProps}
       on:input={onInput}
     />
   {:else}
     <input
-      class="form-control"
-      required={isRequired}
       {id}
       {name}
-      {type}
+      class="form-control"
       {disabled}
       {readonly}
+      required={isRequired}
+      {type}
       {value}
       {...$$restProps}
-      use:action
       on:input={onInput}
+      use:action
     />
   {/if}
   <slot />

package/components/ListSelector/Component.svelte

@@ -50,15 +50,17 @@
 -->
 
 <div class="form-group" class:disabled class:hidden={!show}>
-  <label for={id} class="control-label {required ? 'control-label--required' : ''}">{label}</label>
+  <label class="control-label {required ? 'control-label--required' : ''}" for={id}>
+    <slot name="label">{label}</slot>
+  </label>
   <input
     {id}
     {name}
-    type="hidden"
     data-component={component}
-    {required}
     data-sortable={sortable || undefined}
     data-types={selectable}
+    {required}
+    type="hidden"
     value={value.join(',')}
   />
   {#if disabled}

package/components/NodeSelector/Component.svelte

@@ -35,7 +35,7 @@
   };
 
   if (type.startsWith('tags')) {
-    throw new Error('Type \'tags-selector\' is not supported, use TagsSelector component.');
+    throw new Error("Type 'tags-selector' is not supported, use TagsSelector component.");
   }
 
   onMount(() => {
@@ -63,21 +63,21 @@
 -->
 
 <div class="form-group {className}" class:hidden={!show}>
-  <label for={id} class="control-label {isRequired ? 'control-label--required' : ''}">
-    {label}
+  <label class="control-label {isRequired ? 'control-label--required' : ''}" for={id}>
+    <slot name="label">{label}</slot>
   </label>
   <input
-    class="form-control"
     {id}
     {name}
+    class="form-control"
+    data-component={component}
+    data-removable={removable ? '' : undefined}
+    data-types={selectable}
+    data-value={value}
     {disabled}
     {readonly}
     required={isRequired}
-    data-removable={removable ? '' : undefined}
-    data-component={component}
-    data-types={selectable}
     value={displayName}
-    data-value={value}
   />
   {#if disabled}
     <div class="disabled-overlay" />

package/components/NumberSpinner/Component.svelte

@@ -49,18 +49,20 @@
 -->
 
 <div class="form-group {className}" class:hidden={!show}>
-  <label for={id} class="control-label">{label}</label>
+  <label class="control-label" for={id}>
+    <slot name="label">{label}</slot>
+  </label>
   <input
     {id}
     {name}
-    {value}
     class="form-control"
-    data-min={min}
+    data-component="number-spinner"
     data-max={max}
+    data-min={min}
     data-step={step}
     {disabled}
     {readonly}
-    data-component="number-spinner"
+    {value}
   />
   {#if disabled}
     <div class="disabled-overlay" />

package/components/RadioGroup/Component.svelte

@@ -37,7 +37,9 @@
 -->
 
 <fieldset class="form-group" class:hidden={!show}>
-  <legend class:sr-only={legendVisuallyHidden}>{legend}</legend>
+  <legend class:sr-only={legendVisuallyHidden}>
+    <slot name="legend">{legend}</slot>
+  </legend>
   {#each options as option, index}
     <input
       id={`${id}_${index}`}
@@ -58,6 +60,7 @@
     </label>
   {/each}
   <input {name} type="hidden" {value} />
+  <slot />
 </fieldset>
 
 <style lang="scss">

package/components/RepositoryNodeSelector/Component.svelte

@@ -54,20 +54,22 @@
 
 <CustomSelector
   {id}
-  {label}
   {name}
-  {searchable}
-  {required}
   {disabled}
+  {label}
   {multiple}
-  {show}
   {options}
+  {required}
+  {searchable}
+  {show}
   {value}
   on:input
   on:change
 >
+  <slot name="label" />
   <slot />
   {#if error}
+    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
     <p class="alert alert-danger">{@html i18n('error')}</p>
   {/if}
 </CustomSelector>

package/components/SelectField/Component.svelte

@@ -27,9 +27,10 @@
   [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/SelectField/)
 -->
 <div class="form-group" class:hidden={!show}>
-  <label class="control-label {required ? 'control-label--required' : ''}" for={id}>{label}</label>
-  <!-- svelte-ignore a11y-no-onchange -->
-  <select class="form-control" bind:value {id} {disabled} {required} {name} on:change={onChange}>
+  <label class="control-label {required ? 'control-label--required' : ''}" for={id}>
+    <slot name="label">{label}</slot>
+  </label>
+  <select {id} {name} class="form-control" {disabled} {required} bind:value on:change={onChange}>
     {#each options as option}
       <option value={option.value ?? option}>
         {option.label ?? option}

package/components/TagSelector/Component.svelte

@@ -52,16 +52,16 @@
 -->
 
 <div class="form-group {className}" class:hidden={!show}>
-  <label for={id} class="control-label {isRequired ? 'control-label--required' : ''}">
-    {label}
+  <label class="control-label {isRequired ? 'control-label--required' : ''}" for={id}>
+    <slot name="label">{label}</slot>
   </label>
   <input
-    class="form-control"
-    required={isRequired}
-    data-component="tags-selector"
     {id}
     {name}
+    class="form-control"
+    data-component="tags-selector"
     {disabled}
+    required={isRequired}
     {value}
   />
   {#if disabled}

package/components/TextList/Component.svelte

@@ -77,7 +77,9 @@
 -->
 
 <div class="form-group" class:hidden={!show}>
-  <label for={id} class="control-label {required ? 'control-label--required' : ''}">{label}</label>
+  <label class="control-label {required ? 'control-label--required' : ''}" for={id}>
+    <slot name="label">{label}</slot>
+  </label>
   <div class="list-component">
     <div class="list-component__list-wrapper ui-resizable">
       <Sortable {items} on:finalize={onFinalize} let:item>
@@ -89,7 +91,7 @@
           on:enter={() => addButtonElement.focus()}
         />
       </Sortable>
-      <div use:resizer class="ui-resizable-handle ui-resizable-s" />
+      <div class="ui-resizable-handle ui-resizable-s" use:resizer />
     </div>
     <button
       bind:this={addButtonElement}
@@ -103,7 +105,7 @@
   {#if disabled}
     <div class="disabled-overlay" />
   {/if}
-  <DataHolder {id} {name} {value} {required} />
+  <DataHolder {id} {name} {required} {value} />
 </div>
 
 <style lang="scss">

package/createConfigApp/index.js

@@ -2,6 +2,7 @@ import 'focus-visible';
 
 export default function createConfigApp(App) {
   window.setValues = (values) => {
+    // window?.sv?.setValues(values);
     window.CONFIG_VALUES = values;
 
     const target = document.querySelector('#app_root') || document.querySelector('body');

package/index.js

@@ -14,7 +14,7 @@ export { default as ImageSelector } from './components/ImageSelector';
 export { default as TagSelector } from './components/TagSelector';
 export { default as CustomSelector } from './components/CustomSelector';
 export { default as Modal } from './components/Modal';
-export { default as CustomList } from './components/CustomList';
+export { default as CustomList, CustomListItemTemplate } from './components/CustomList';
 export { default as RepositoryNodeSelector } from './components/RepositoryNodeSelector';
 
 export { default as createConfigApp } from './createConfigApp';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soleil-se/config-svelte",
-  "version": "1.22.0",
+  "version": "1.24.0",
   "main": "./index.js",
   "module": "./index.js",
   "svelte": "./index.js",