@soleil-se/config-svelte 1.13.0 → 1.15.0

package/CHANGELOG.md

@@ -5,6 +5,16 @@ 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.15.0] - 2022-09-15
+
+- Required was not re-evaluated properly in [InputField](./components/InputField), [NodeSelector](./components/NodeSelector) and [TagSelector](./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).
+
 ## [1.13.0] - 2022-06-23
 
 - Add `icon` prop to CustomList for setting an icon to the list items.

package/actions/resizer.js

@@ -45,6 +45,12 @@ const resizer = (element) => {
   };
 
   element.addEventListener('mousedown', startResize, false);
+
+  document.documentElement.addEventListener('initialized', () => {
+    if (targetElement.offsetHeight > targetMinHeight) {
+      targetElement.style.height = `${targetElement.scrollHeight + 30}px`;
+    }
+  });
 };
 
 export default resizer;

package/components/Checkbox/Component.svelte

@@ -10,6 +10,7 @@
   export let name;
   export let disabled = false;
   export let checked = false;
+  export let show = true;
   export let value;
   value = name ? values[name] ?? value ?? checked : value;
 
@@ -24,12 +25,12 @@
 
 <!--
   @component
-  A checkbox component.  
+  A checkbox component.
 
-  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/Checkbox/)  
+  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/Checkbox/)
 -->
 
-<div class="form-group {className}">
+<div class="form-group {className}" class:hidden={!show}>
   <input
     bind:checked={value}
     {name}
@@ -55,13 +56,13 @@
       width: 16px;
       height: 16px;
       margin-right: 5px;
+      content: '';
       border: 1px solid #cacece;
       border-radius: 3px;
-      content: '';
     }
 
     :global(.focus-visible) + &::before {
-      box-shadow: 0 0 0 0.2rem rgba(66, 139, 202, 0.4);
+      box-shadow: 0 0 0 0.2rem rgb(66 139 202 / 40%);
     }
 
     input:checked + &::before {

package/components/Checkbox/README.md

@@ -10,6 +10,7 @@ export let label;
 export let name;
 export let disabled = false;
 export let checked = false;
+export let show = true;
 export let value;
 ```
 

package/components/CheckboxGroup/Component.svelte

@@ -10,9 +10,11 @@
   export let options;
   export let legend;
   export let disabled = false;
+  export let show = true;
   export let value = [];
   value = name ? values[name] || value : value;
 
+
   let className = '';
   export { className as class };
 
@@ -33,10 +35,10 @@
   @component
   A checkbox group component.
 
-  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/CheckboxGroup/)  
+  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/CheckboxGroup/)
 -->
 
-<fieldset class="form-group {className}">
+<fieldset class="form-group {className}" class:hidden={!show}>
   <legend>{legend}</legend>
   {#each options as option, index}
     <input
@@ -67,8 +69,8 @@
 
   legend {
     margin-bottom: 7px;
-    font-weight: bold;
     font-size: 14px;
+    font-weight: bold;
     border-bottom: 0;
   }
 
@@ -84,13 +86,13 @@
       width: 16px;
       height: 16px;
       margin-right: 5px;
+      content: '';
       border: 1px solid #cacece;
       border-radius: 3px;
-      content: '';
     }
 
     :global(.focus-visible) + &::before {
-      box-shadow: 0 0 0 0.2rem rgba(66, 139, 202, 0.4);
+      box-shadow: 0 0 0 0.2rem rgb(66 139 202 / 40%);
     }
 
     input:checked + &::before {

package/components/CheckboxGroup/README.md

@@ -15,6 +15,8 @@ export let options;
 export let legend;
 // Disable input, or provide an array of disabled options: ['value1'].
 export let disabled = false;
+// Show and hide compoment without re-rendering.
+export let show = true;
 // Used if bound to value.
 export let value;
 ```

package/components/CustomList/Component.svelte

@@ -1,9 +1,9 @@
 <script>
-  
+
   import { createEventDispatcher, onMount } from 'svelte';
   import { generateId, addGeneratedIds } from '../../utils';
   import { resizer } from '../../actions';
-  
+
   import Sortable from './internal/Sortable.svelte';
   import SortableItem from './internal/SortableItem.svelte';
   import DataHolder from './internal/DataHolder.svelte';
@@ -17,11 +17,12 @@
   export let required = false;
   export let name = undefined;
   export let disabled = false;
+  export let show = true;
   export let icon;
 
   export let value = [];
   value = name ? values[name] ?? value : value;
-  
+
   addGeneratedIds(value);
 
   const domId = generateId();
@@ -84,10 +85,10 @@
 
 <!--
   @component
-  Custom list component for adding multiple modal windows containting configuration components and 
+  Custom list component for adding multiple modal windows containting configuration components and
   sorting them.
 
-  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/CustomList/)  
+  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/CustomList/)
 -->
 
 {#each modals as id, index (id)}
@@ -96,7 +97,7 @@
   </EditModal>
 {/each}
 
-<div class="form-group">
+<div class="form-group" class:hidden={!show}>
   <label for={domId} class="control-label {required ? 'control-label--required' : ''}">
     {label}
   </label>

package/components/CustomList/README.md

@@ -14,6 +14,7 @@ export let label;
 export let required = false;
 export let name = undefined;
 export let disabled = false;
+export let show = true;
 export let icon;
 export let value = [];
 ```

package/components/CustomList/internal/SortableItem.svelte

@@ -36,6 +36,7 @@
 
 <style lang="scss">
   .list-component__item {
+    min-height: 26px;
     padding: 3px;
     cursor: grab;
     user-select: none;

package/components/CustomSelector/Component.svelte

@@ -14,6 +14,8 @@
   export let required = false;
   export let disabled = false;
   export let multiple = false;
+  export let show = true;
+
   export let value = multiple ? [] : '';
 
   value = name ? values[name] ?? value : value;
@@ -29,19 +31,19 @@
         dispatch('input', value);
         dispatch('change', value);
       });
-  
+
     jQuery(el).val(value).trigger('change');
   });
 </script>
 
 <!--
   @component
-  Wrapper component for Sitevision [Custom selector](https://developer.sitevision.se/docs/webapps/webapps-2/configuration/sitevision-components#h-Customselectorsince91).   
+  Wrapper component for Sitevision [Custom selector](https://developer.sitevision.se/docs/webapps/webapps-2/configuration/sitevision-components#h-Customselectorsince91).
 
-  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/CustomSelector/)  
+  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/CustomSelector/)
 -->
 
-<div class="form-group {className}">
+<div class="form-group {className}" class:hidden={!show}>
   <label for={id} class="control-label {required ? 'control-label--required' : ''}">{label}</label>
   <select
     {id}

package/components/CustomSelector/README.md

@@ -3,16 +3,7 @@
 Wrapper component for Sitevision [Custom selector](https://developer.sitevision.se/docs/webapps/webapps-2/configuration/sitevision-components#h-Customselectorsince91).  
 
 ![CustomSelector](../../images/CustomSelector.png)
-
-<!-- TOC -->
-
-- [Props](#props)
-- [Example](#example)
-  - [Standard](#standard)
-  - [Advanced](#advanced)
-- [Slots](#slots)
-
-<!-- /TOC -->
+![CustomSelectorMultiple](../../images/CustomSelector_multiple.png)
 
 ## Props
 
@@ -26,6 +17,7 @@ export let placeholder;
 export let required = false;
 export let disabled = false;
 export let multiple = false;
+export let show = true;
 export let value = '';
 ```
 

package/components/DropdownSelector/Component.svelte

@@ -12,6 +12,7 @@
   export let selectable = [];
   export let required = false;
   export let disabled = false;
+  export let show = true;
   export let value = '';
 
   selectable = Array.isArray(selectable) ? selectable.join(',') : selectable;
@@ -39,7 +40,7 @@
       .on('sv:loaded', ({ target }) => {
         setValue(target);
       });
-  
+
     /*
     * The sv:loaded event is only triggered on initial load, if the component rerenders check if any
     * children are present and set value of select element.
@@ -52,12 +53,12 @@
 
 <!--
   @component
-  Wrapper component for Sitevision [selects](https://developer.sitevision.se/docs/webapps/webapps-2/configuration/sitevision-components).   
+  Wrapper component for Sitevision [selects](https://developer.sitevision.se/docs/webapps/webapps-2/configuration/sitevision-components).
 
-  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/DropdownSelector/)  
+  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/DropdownSelector/)
 -->
 
-<div class="form-group {className}" {hidden}>
+<div class="form-group {className}" {hidden} class:hidden={!show}>
   <label for={id} class="control-label {required ? 'control-label--required' : ''}">{label}</label>
   <select
     {id}
@@ -89,11 +90,11 @@
   }
 
   .select2-container.select2-container-disabled .select2-choice {
+    cursor: not-allowed;
     background-color: white;
     background-image: none;
     border: 1px solid #ccc;
-    cursor: not-allowed;
-    opacity: 70%;
+    opacity: 0.7;
   }
 
   .select2-container.select2-container-disabed .select2-choice .select2-arrow {

package/components/DropdownSelector/README.md

@@ -26,6 +26,7 @@ export let type = 'metadata';
 export let selectable = [];
 export let required = false;
 export let disabled = false;
+export let show = true;
 export let value = '';
 ```
 

package/components/ImageSelector/Component.svelte

@@ -19,8 +19,9 @@
   alt = name ? values[`${name}Alt`] ?? alt : alt;
   export let hideDecorative = false;
   export let decorative = false;
+  export let show;
   $: decorative = hideDecorative ? false : decorative;
-  
+
   let imageArchiveAlt = '';
   let useCustomAlt = !!alt;
   let customAlt = alt;
@@ -36,7 +37,7 @@
     if (node) {
       const response = await fetch(`/rest-api/1/0/${node}/properties`).then((res) => res.json());
       imageArchiveAlt = response.alt || '';
-  
+
       setCustomValidity();
     } else {
       imageArchiveAlt = '';
@@ -64,10 +65,10 @@
   @component
   Custom panel component for selecting an image.
 
-  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/ImageSelector/)  
+  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/ImageSelector/)
 -->
 
-<Panel {heading}>
+<Panel {heading} {show}>
   <NodeSelector
     name="{name}Node"
     label={i18n('selectImage')}
@@ -76,7 +77,7 @@
     on:change={onChange}
     {required}
   />
-  <div>
+  <div class="form-group">
     {#if !hideDecorative}
       <Checkbox
         class="checkbox-group"
@@ -103,6 +104,7 @@
       />
     {/if}
   </div>
+  <slot />
 </Panel>
 
 <style>

package/components/ImageSelector/README.md

@@ -10,6 +10,7 @@ Custom panel component for selecting an image.
 - [Example](#example)
   - [Standard](#standard)
   - [Advanced](#advanced)
+- [Slots](#slots)
 
 <!-- /TOC -->
 
@@ -42,6 +43,8 @@ export let node;
 export let alt;
 // If image is decorative, since 1.11.0
 export let decorative = false;
+// Show and hide compoment without re-rendering.
+export let show = true;
 // If the checkbox for decorative image should be hidden, since 1.11.0
 export let hideDecorative = false;
 ```
@@ -75,3 +78,13 @@ export let hideDecorative = false;
 
 <ImageSelector bind:node={values.imageNode} bind:alt={values.imageAlt} />
 ```
+
+## Slots
+
+Default slot
+
+```svelte
+<ImageSelector name="image" heading="Bild" />
+  <p class="help-block">Some helpful text.</p>
+</ImageSelector>
+```

package/components/InputField/Component.svelte

@@ -27,15 +27,17 @@
   export let value = '';
   /** @type {function} */
   export let action = prefixHttps;
-  
+  /** @type {boolean} */
+  export let show = true;
+
   let className = '';
   /** @type {string} */
   export { className as class };
-  
+
   value = name ? values[name] ?? value : value;
 
   $: isTextarea = type === 'textarea';
-  $: required = required && !disabled && !readonly;
+  $: isRequired = required && !disabled && !readonly;
 
   const onInput = ({ target }) => {
     value = type.match(/^(number|range)$/) ? +target.value : target.value;
@@ -46,19 +48,21 @@
 
 <!--
   @component
-  Component for input fields and textareas.  
+  Component for input fields and textareas.
 
-  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/InputField/)  
+  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/InputField/)
 -->
 
-<div class="form-group {className}">
-  <label for={id} class="control-label {required ? 'control-label--required' : ''}">{label}</label>
+<div class="form-group {className}" class:hidden={!show}>
+  <label for={id} class="control-label {isRequired ? 'control-label--required' : ''}">
+    {label}
+  </label>
   {#if isTextarea}
     <textarea
       class="form-control"
+      required={isRequired}
       {id}
       {name}
-      {required}
       {disabled}
       {readonly}
       {value}
@@ -69,10 +73,10 @@
   {:else}
     <input
       class="form-control"
+      required={isRequired}
       {id}
       {name}
       {type}
-      {required}
       {disabled}
       {readonly}
       {value}

package/components/InputField/README.md

@@ -32,6 +32,8 @@ export let required = false;
 export let disabled = false;
 // If field is readonly.
 export let readonly = false;
+// Show and hide compoment without re-rendering.
+export let show = true;
 // Max length of input.
 export let maxlength = undefined;
 // Validation pattern.

package/components/LinkSelector/Component.svelte

@@ -1,6 +1,6 @@
 <script>
   import { createEventDispatcher } from 'svelte';
-  import { show, prefixMail, prefixTel } from '../../actions';
+  import { show as showAction, prefixMail, prefixTel } from '../../actions';
   import i18n from './i18n';
 
   import Panel from '../Panel';
@@ -17,7 +17,9 @@
   export let disabled = false;
   export let required = false;
   export let types = ['internal', 'external', 'file'];
+  export let show;
   export let value;
+
   value = getSavedValue({ value, name, types });
 
   let className = '';
@@ -56,10 +58,10 @@
   @component
   Custom panel component for selecting a link.
 
-  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/LinkSelector/)  
+  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/LinkSelector/)
 -->
 
-<Panel {heading} class={className} {required}>
+<Panel {heading} class={className} {required} {show}>
   <slot name="top" />
   {#if selectableTypes.length > 1}
     <div class="sr-legend form-group">
@@ -74,7 +76,7 @@
     </div>
   {/if}
 
-  <div class="sr-label form-group form-group--internal" use:show={isInternal}>
+  <div class="sr-label form-group form-group--internal" use:showAction={isInternal}>
     <NodeSelector
       name={name && isInternal ? `${name}Value` : undefined}
       bind:value={selected.internal}
@@ -85,7 +87,7 @@
       required={required && isInternal}
     />
   </div>
-  <div class="sr-label form-group form-group--external" use:show={isExternal}>
+  <div class="sr-label form-group form-group--external" use:showAction={isExternal}>
     <InputField
       name={name && isExternal ? `${name}Value` : undefined}
       bind:value={selected.external}
@@ -96,7 +98,7 @@
       required={required && isExternal}
     />
   </div>
-  <div class="sr-label form-group form-group--file" use:show={isFile}>
+  <div class="sr-label form-group form-group--file" use:showAction={isFile}>
     <NodeSelector
       name={name && isFile ? `${name}Value` : undefined}
       bind:value={selected.file}
@@ -108,7 +110,7 @@
     />
   </div>
 
-  <div class="sr-label form-group form-group--mail" use:show={isMail}>
+  <div class="sr-label form-group form-group--mail" use:showAction={isMail}>
     <InputField
       name={name && isMail ? `${name}Value` : undefined}
       bind:value={selected.mail}
@@ -119,7 +121,7 @@
       required={required && isMail}
     />
   </div>
-  <div class="sr-label form-group form-group--tel" use:show={isTel}>
+  <div class="sr-label form-group form-group--tel" use:showAction={isTel}>
     <InputField
       name={name && isTel ? `${name}Value` : undefined}
       bind:value={selected.tel}
@@ -148,11 +150,11 @@
     position: absolute;
     width: 1px;
     height: 1px;
-    margin: -1px;
     padding: 0;
+    margin: -1px;
     overflow: hidden;
-    border: 0;
     clip: rect(0, 0, 0, 0);
+    border: 0;
   }
 
   .form-group--external,

package/components/LinkSelector/README.md

@@ -52,6 +52,8 @@ export let name;
 export let disabled = false;
 // If control is required.
 export let required = false;
+// Show and hide compoment without re-rendering.
+export let show = true;
 // What types of links to be selectable, must provide at least one.
 export let types = ['internal', 'external', 'file', 'mail', 'tel'];
 // Used if bound to value.

package/components/ListSelector/Component.svelte

@@ -12,6 +12,7 @@
   export let required = false;
   export let disabled = false;
   export let sortable = false;
+  export let show = true;
   export let selectable = [];
   export let value = [];
 
@@ -45,10 +46,10 @@
   @component
   Wrapper for Sitevision [list components](https://developer.sitevision.se/docs/webapps/webapps-2/configuration/sitevision-components#h-Listcomponents).
 
-  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/ListSelector/)  
+  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/ListSelector/)
 -->
 
-<div class="form-group" class:disabled>
+<div class="form-group" class:disabled class:hidden={!show}>
   <label for={id} class="control-label {required ? 'control-label--required' : ''}">{label}</label>
   <input
     {id}
@@ -77,7 +78,7 @@
     bottom: 0;
     z-index: 90;
     width: 100%;
-    background-color: rgb(255 255 255 / 30%);
     cursor: not-allowed;
+    background-color: rgb(255 255 255 / 30%);
   }
 </style>

package/components/ListSelector/README.md

@@ -36,6 +36,8 @@ export let required = false;
 export let disabled = false;
 // If list is sortable, since Sitevision 9.1.
 export let sortable = false;
+// Show and hide compoment without re-rendering.
+export let show = true;
 // Selectable types
 export let selectable = [];
 

package/components/NodeSelector/Component.svelte

@@ -16,6 +16,7 @@
   export let removable = true;
   export let selectable = [];
   export let value = '';
+  export let show = true;
 
   selectable = Array.isArray(selectable) ? selectable.join(',') : selectable;
   value = name ? values[name] ?? value : value;
@@ -23,7 +24,7 @@
   let className = '';
   export { className as class };
 
-  $: required = required && !disabled && !readonly;
+  $: isRequired = required && !disabled && !readonly;
   $: component = type.endsWith('-selector') ? type : `${type}-selector`;
 
   let displayName = value ? value.displayName || value.path : '';
@@ -58,18 +59,20 @@
   @component
   Wrapper for Sitevision [input components](https://developer.sitevision.se/docs/webapps/webapps-2/configuration/sitevision-components) used for selecting nodes.
 
-  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/NodeSelector/)  
+  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/NodeSelector/)
 -->
 
-<div class="form-group {className}">
-  <label for={id} class="control-label {required ? 'control-label--required' : ''}">{label}</label>
+<div class="form-group {className}" class:hidden={!show}>
+  <label for={id} class="control-label {isRequired ? 'control-label--required' : ''}">
+    {label}
+  </label>
   <input
     class="form-control"
     {id}
     {name}
-    {required}
     {disabled}
     {readonly}
+    required={isRequired}
     data-removable={removable ? '' : undefined}
     data-component={component}
     data-types={selectable}

package/components/NodeSelector/README.md

@@ -27,6 +27,7 @@ export let required = false;
 export let disabled = false;
 export let readonly = false;
 export let removable = false;
+export let show = true;
 export let selectable = [];
 export let value = '';
 ```

package/components/NumberSpinner/Component.svelte

@@ -13,6 +13,7 @@
   export let step = 1;
   export let disabled = false;
   export let readonly = false;
+  export let show = true;
   export let suffix;
   export let value = min || 1;
   value = Number(name ? values[name] ?? value : value);
@@ -43,10 +44,10 @@
   @component
   Wrapper for Sitevision [number spinner](https://developer.sitevision.se/docs/webapps/webapps-2/configuration/sitevision-components).
 
-  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/NumberSpinner/)  
+  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/NumberSpinner/)
 -->
 
-<div class="form-group {className}">
+<div class="form-group {className}" class:hidden={!show}>
   <label for={id} class="control-label">{label}</label>
   <input
     {id}

package/components/NumberSpinner/README.md

@@ -16,6 +16,7 @@ export let step = 1;
 export let suffix;
 export let disabled = false;
 export let readonly = false;
+export let show = true;
 export let value = min || 1;
 export let class = '';
 ```

package/components/Panel/Component.svelte

@@ -3,16 +3,17 @@
 
   export let heading = i18n('settings');
   export let required = false;
+  export let show = true;
 </script>
 
 <!--
   @component
   A panel component.
 
-  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/Panel/)  
+  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/Panel/)
 -->
 
-<div class="panel panel-default">
+<div class="panel panel-default" class:hidden={!show}>
   <input class="sr-only" type="text" tabindex="-1" />
   <div class="panel-heading">
     <h1 class="panel-title {required && 'panel-title--required'}">{heading}</h1>
@@ -41,8 +42,8 @@
       position: relative;
       top: 1px;
       margin-left: 5px;
-      color: #a94442;
       font-size: 18px;
+      color: #a94442;
       content: '*';
     }
   }

package/components/Panel/README.md

@@ -9,6 +9,8 @@
 export let heading = 'Inställningar';
 // Marks heading with asterisk to indicate that all fields are required inside
 export let required = false;
+// Show and hide compoment without re-rendering.
+export let show = true;
 ```
 
 ## Slots

package/components/RadioGroup/Component.svelte

@@ -10,6 +10,7 @@
   export let options = [];
   export let legend;
   export let disabled = false;
+  export let show = true;
   export let value = options[0]?.value ?? options[0] ?? '';
   value = name ? values[name] ?? value : value;
 
@@ -28,10 +29,10 @@
   @component
   A radio group component.
 
-  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/RadioGroup/)  
+  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/RadioGroup/)
 -->
 
-<fieldset class="form-group">
+<fieldset class="form-group" class:hidden={!show}>
   <legend>{legend}</legend>
   {#each options as option, index}
     <input
@@ -48,8 +49,8 @@
       {option.label || option}
     </label>
   {/each}
+  <input type="hidden" {value} {name} />
 </fieldset>
-<input type="hidden" {value} {name} />
 
 <style lang="scss">
   legend {

package/components/RadioGroup/README.md

@@ -14,6 +14,8 @@ export let options;
 export let legend;
 // If field is disabled, can be boolean to disable all options, or an array of disabled option values; ['value1'].
 export let disabled = false;
+// Show and hide compoment without re-rendering.
+export let show = true;
 // Used if bound to value.
 export let value = '';
 ```

package/components/SelectField/Component.svelte

@@ -10,6 +10,7 @@
   export let name;
   export let required = false;
   export let disabled = false;
+  export let show = true;
   export let options = [];
   export let value = '';
   value = name ? values[name] ?? value : value;
@@ -23,9 +24,9 @@
   @component
   A select field component.
 
-  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/SelectField/)  
+  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/SelectField/)
 -->
-<div class="form-group">
+<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}>
@@ -41,6 +42,6 @@
 <style>
   .form-control[disabled] {
     background-color: white;
-    opacity: 70%;
+    opacity: 0.7;
   }
 </style>

package/components/SelectField/README.md

@@ -10,6 +10,7 @@ export let label;
 export let name;
 export let required = false;
 export let disabled = false;
+export let show = true;
 export let options = [];
 export let value = '';
 ```

package/components/TagSelector/Component.svelte

@@ -11,7 +11,7 @@
   export let name;
   export let required = false;
   export let disabled = false;
-
+  export let show = true;
   export let selectable = [];
   export let value = '';
 
@@ -21,7 +21,7 @@
   let className = '';
   export { className as class };
 
-  $: required = required && !disabled;
+  $: isRequired = required && !disabled;
 
   const onChange = () => {
     dispatch('input', value);
@@ -31,7 +31,7 @@
   onMount(async () => {
     setupComponent(id).on('change', ({ target }) => {
       value = target.value.split(',');
-  
+
       onChange();
     });
 
@@ -48,18 +48,20 @@
   @component
   Wrapper for Sitevision [tag selector](https://developer.sitevision.se/docs/webapps/webapps-2/configuration/sitevision-components).
 
-  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/TagSelector/)  
+  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/TagSelector/)
 -->
 
-<div class="form-group {className}">
-  <label for={id} class="control-label {required ? 'control-label--required' : ''}">{label}</label>
+<div class="form-group {className}" class:hidden={!show}>
+  <label for={id} class="control-label {isRequired ? 'control-label--required' : ''}">
+    {label}
+  </label>
   <input
     class="form-control"
+    required={isRequired}
+    data-component="tags-selector"
     {id}
     {name}
-    {required}
     {disabled}
-    data-component="tags-selector"
     {value}
   />
   {#if disabled}

package/components/TagSelector/README.md

@@ -21,6 +21,7 @@ export let label; // Required
 export let name;  // Required
 export let required = false;
 export let disabled = false;
+export let show = true;
 export let value = [];
 ```
 

package/components/TextList/Component.svelte

@@ -16,6 +16,7 @@
   export let required = false;
   export let name = undefined;
   export let disabled = false;
+  export let show = true;
   export let value = [];
   value = name ? values[name] ?? value : value;
 
@@ -72,10 +73,10 @@
   @component
   Custom list component for adding multiple text values and sorting them.
 
-  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/TextList/)  
+  [README](https://docs.soleilit.se/03.packages/@soleil&svelte-config/components/TextList/)
 -->
 
-<div class="form-group">
+<div class="form-group" class:hidden={!show}>
   <label for={id} class="control-label {required ? 'control-label--required' : ''}">{label}</label>
   <div class="list-component">
     <div class="list-component__list-wrapper ui-resizable">
@@ -116,7 +117,7 @@
     bottom: 0;
     z-index: 90;
     width: 100%;
-    background-color: rgba(255, 255, 255, 0.3);
     cursor: not-allowed;
+    background-color: rgb(255 255 255 / 30%);
   }
 </style>

package/components/TextList/README.md

@@ -12,6 +12,7 @@ export let label;
 export let required = false;
 export let name = undefined;
 export let disabled = false;
+export let show = true;
 export let value = [];
 ```
 

package/package.json

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