poe-svelte-ui-lib 1.1.21 → 1.1.22

package/dist/Accordion/AccordionProps.svelte

@@ -4,7 +4,7 @@
   import { updateProperty, type IAccordionProps, type UIComponent } from '../types'
   import * as UI from '..'
   import { optionsStore } from '../options'
-  import { ICONS } from './icons'
+  import { ICONS } from '../icons'
   import Modal from '../Modal.svelte'
   import Button from '../Button/Button.svelte'
   import CrossIcon from '../libIcons/CrossIcon.svelte'
@@ -63,7 +63,7 @@
     </div>
     <div class="flex w-1/3 flex-col items-center px-2">
       <div class="relative mt-6 flex w-full gap-2">
-        <UI.Button content={{ name: 'Иконка заголовка' }} onClick={() => (showIconLib = true)} />
+        <UI.Button content={{ name: $t('constructor.props.labelicon') }} onClick={() => (showIconLib = true)} />
         {#if showIconLib}
           <Modal bind:isOpen={showIconLib} wrapperClass="w-130">
             {#snippet main()}
@@ -174,7 +174,7 @@
         onUpdate={(value) => updateProperty('wrapperClass', value as string, component, onPropertyChange)}
       />
       <div class="relative mt-5 flex w-full gap-2">
-        <UI.Button content={{ name: 'Иконка заголовка' }} onClick={() => (showIconLib = true)} />
+        <UI.Button content={{ name: $t('constructor.props.labelicon') }} onClick={() => (showIconLib = true)} />
         {#if showIconLib}
           <Modal bind:isOpen={showIconLib} wrapperClass="w-130">
             {#snippet main()}

package/dist/FileAttach/FileAttach.svelte

@@ -41,7 +41,6 @@
     if (file.type.startsWith('image/')) previewUrl = URL.createObjectURL(file)
 
     onChange(event, file)
-    // console.log('!!! curr:', currentImage, 'prev:', previewUrl)
   }
 
   const triggerFileInput = () => {

package/dist/Graph/GraphProps.svelte

@@ -14,8 +14,6 @@
     forConstructor?: boolean
   }>()
 
-  console.log(component.properties.streamingData)
-
   const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>('DeviceVariables')
   let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
 </script>

package/dist/{Accordion/IconsLib → IconsLib}/common.edit.svg

@@ -1,10 +1,11 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
-  ><path
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
+>
+  <path
     fill="none"
     stroke="currentColor"
     stroke-linecap="round"
     stroke-linejoin="round"
     stroke-width="1.5"
     d="M14.44 5.78L4.198 16.02a2 2 0 0 0-.565 1.125l-.553 3.774l3.775-.553A2 2 0 0 0 7.98 19.8L18.22 9.56m-3.78-3.78l2.229-2.23a1.6 1.6 0 0 1 2.263 0l1.518 1.518a1.6 1.6 0 0 1 0 2.263l-2.23 2.23M14.44 5.78l3.78 3.78"
-  /></svg
->
+  />
+</svg>

package/dist/{Accordion/IconsLib → IconsLib}/iconsLib.js

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import { join } from 'path';
 const scanAllIcons = async () => {
-    const dirPath = 'src/lib/Accordion/IconsLib';
+    const dirPath = 'src/lib/IconsLib';
     const files = fs.readdirSync(dirPath);
     const categories = {};
     files
@@ -31,7 +31,7 @@ ${Object.entries(categories)
 ]
 
 `;
-    fs.writeFileSync('src/lib/Accordion/icons.ts', content);
+    fs.writeFileSync('src/lib/icons.ts', content);
     console.log('icons.ts создан:', Object.keys(categories));
 };
 scanAllIcons();

package/dist/{Accordion/IconsLib → IconsLib}/settings.debug.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"
 >
   <path
     fill="currentColor"

package/dist/{Accordion/IconsLib → IconsLib}/settings.save.svg

@@ -1,6 +1,7 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"
-  ><path
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
+>
+  <path
     fill="currentColor"
     d="M3 5.75A2.75 2.75 0 0 1 5.75 3h9.965a3.25 3.25 0 0 1 2.298.952l2.035 2.035c.61.61.952 1.437.952 2.299v9.964A2.75 2.75 0 0 1 18.25 21H5.75A2.75 2.75 0 0 1 3 18.25zM5.75 4.5c-.69 0-1.25.56-1.25 1.25v12.5c0 .69.56 1.25 1.25 1.25H6v-5.25A2.25 2.25 0 0 1 8.25 12h7.5A2.25 2.25 0 0 1 18 14.25v5.25h.25c.69 0 1.25-.56 1.25-1.25V8.286c0-.465-.184-.91-.513-1.238l-2.035-2.035a1.75 1.75 0 0 0-.952-.49V7.25a2.25 2.25 0 0 1-2.25 2.25h-4.5A2.25 2.25 0 0 1 7 7.25V4.5zm10.75 15v-5.25a.75.75 0 0 0-.75-.75h-7.5a.75.75 0 0 0-.75.75v5.25zm-8-15v2.75c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75V4.5z"
-  /></svg
->
+  />
+</svg>

package/dist/Input/Input.svelte

@@ -223,7 +223,7 @@
       {#if showInfo}
         <div
           transition:fly={{ x: -15, duration: 250 }}
-          class="absolute top-1/2 left-10 z-50 w-auto -translate-y-1/2 rounded bg-(--container-color) px-2 py-1 shadow-lg"
+          class="absolute top-5 left-10 z-50 w-auto -translate-y-1/2 rounded bg-(--container-color) px-2 py-1 shadow-lg"
         >
           {help?.info}
         </div>

package/dist/ProgressBar/ProgressBar.svelte

@@ -24,7 +24,6 @@
         return Math.max(min, Math.min(max, value))
       } else if (typeof value === 'string') {
         const parsedValue = parseFloat(value)
-        console.log(value)
         if (!isNaN(parsedValue)) {
           return Math.max(min, Math.min(max, parsedValue))
         }
@@ -46,11 +45,10 @@
     <h5 class={twMerge(` w-full px-4 text-center`, label.class)}>{label.name}</h5>
   {/if}
 
-  <div class="flex w-full flex-col items-center">
-    <div class="relative h-7 w-full rounded-full bg-gray-400">
-      <div class="absolute top-0 left-0 flex h-full rounded-full bg-(--bg-color)" style="width: {progressPercent()}%;">
-        <span class="m-auto font-semibold">{numericValue?.toFixed(2)}{number.units}</span>
-      </div>
+  <div class="flex h-7 w-full items-center gap-2 rounded-full bg-(--bg-color) px-2">
+    <span class="m-auto font-semibold">{numericValue?.toFixed(2)}{number.units}</span>
+    <div class="relative my-auto h-3.5 w-[85%] rounded-full bg-(--back-color)/40">
+      <div class="absolute top-0 left-0 flex h-full rounded-full bg-(--field-color)" style="width: {progressPercent()}%;"></div>
     </div>
   </div>
 </div>

package/dist/Table/Table.svelte

@@ -98,7 +98,6 @@
       rawData: text,
       formattedData: formatting ? formatting(text) : (text ?? ''),
     }
-    // console.log(modalData)
   }
 
   const showTooltip = (event: MouseEvent, text: string, formatting?: (text: string) => string) => {
@@ -186,7 +185,7 @@
                     </button>
                   {/each}
                 </div>
-              {:else if column.image}
+              {:else if column.image?.src || column.image?.defaultIcon}
                 <div
                   class="flex items-center justify-center"
                   style={`width: ${column.image.width || '5rem'}; height: ${column.image.height || '5rem'};`}
@@ -199,14 +198,16 @@
                       loading="lazy"
                     />
                   {:else if column.image.defaultIcon}
-                    <column.image.defaultIcon />
+                    {#if typeof column.image.defaultIcon === 'string'}
+                      {@html column.image.defaultIcon}
+                    {:else}
+                      <column.image.defaultIcon />
+                    {/if}
                   {/if}
                 </div>
               {:else}
                 <div
-                  class="w-full max-w-full wrap-break-word {column.overflow?.truncated
-                    ? 'overflow-hidden text-ellipsis whitespace-nowrap'
-                    : 'whitespace-normal '}"
+                  class=" w-full max-w-full wrap-break-word {column.overflow?.truncated ? 'truncate' : ' whitespace-normal'}"
                   onmouseenter={column.overflow?.truncated ? (e) => showTooltip(e, row[column.key], column.overflow?.formatting) : undefined}
                   onmouseleave={column.overflow?.truncated ? hideTooltip : undefined}
                   onmousemove={column.overflow?.truncated
@@ -232,6 +233,9 @@
                     {@html row[column.key]}
                   {/if}
                 </div>
+                <!-- {#if column.overflow?.truncated}
+                  <div class="whitespace-nowrap">{row[column.key].slice(-5)}</div>
+                {/if} -->
 
                 {#if column.overflow?.copy}
                   <button

package/dist/Table/TableProps.svelte

@@ -7,6 +7,9 @@
   import ButtonAdd from '../libIcons/ButtonAdd.svelte'
   import { optionsStore } from '../options'
   import { twMerge } from 'tailwind-merge'
+  import Modal from '../Modal.svelte'
+  import { ICONS } from '../icons'
+  import CrossIcon from '../libIcons/CrossIcon.svelte'
 
   const {
     component,
@@ -21,6 +24,8 @@
   const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>('DeviceVariables')
   let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
 
+  let defaultIcon = $state({ isModalOpen: false, columnIndex: 0, column: component.properties.header[0] })
+
   const initialColor = $derived(
     $optionsStore.COLOR_OPTIONS.find((c) =>
       (c.value as string).includes(component.properties.wrapperClass?.split(' ').find((cls: string) => cls.startsWith('bg-'))),
@@ -331,6 +336,7 @@
             label: { name: `Column ${(component.properties.header?.length || 0) + 1}`, class: '' },
             width: '10%',
             sortable: false,
+            image: { width: '0rem', height: '0rem' },
           }
           const headers = [...(component.properties.header || []), newColumn]
           updateProperty('header', headers, component, onPropertyChange)
@@ -338,167 +344,239 @@
         }}
       />
     </div>
-
-    {#each component.properties.header as column, columnIndex (columnIndex)}
-      <div class="mb-5">
-        <div class="mr-2 flex items-end justify-around gap-6">
-          <UI.Input
-            label={{ name: $t('constructor.props.table.columns.key') }}
-            wrapperClass="w-150"
-            value={column.key}
-            help={{ regExp: /^[0-9a-zA-Z_-]{0,16}$/ }}
-            onUpdate={(value) => {
-              updateTableHeader(columnIndex, 'key', value)
-              updateTableBody()
-            }}
-          />
-          <UI.Input
-            label={{ name: $t('constructor.props.table.columns.label') }}
-            value={column.label.name}
-            onUpdate={(value) => {
-              updateTableHeader(columnIndex, 'label', { ['name']: value })
-            }}
-          />
-          <UI.Input
-            label={{ name: $t('constructor.props.table.columns.width'), class: 'px-0' }}
-            wrapperClass="w-150"
-            type="number"
-            value={Number(column.width.replace('%', ''))}
-            onUpdate={(value) => updateTableHeader(columnIndex, 'width', `${value}%`)}
-          />
-          <UI.Select
-            label={{ name: $t('constructor.props.align.header') }}
-            type="buttons"
-            value={$optionsStore.ALIGN_OPTIONS.find((a) => (a.value as string).includes(column.align?.header) || 'left')}
-            options={$optionsStore.ALIGN_OPTIONS}
-            onUpdate={(option) => updateTableHeader(columnIndex, 'align', { header: option.value, content: column.align?.content })}
-          />
-          <UI.Switch
-            label={{ name: $t('constructor.props.table.columns.sortable'), class: 'px-0' }}
-            wrapperClass="w-30"
-            value={column.sortable ? 2 : 1}
-            onChange={(value) => updateTableHeader(columnIndex, 'sortable', value === 2)}
-          />
-          <UI.Switch
-            label={{ name: $t('constructor.props.copy'), class: 'px-0' }}
-            wrapperClass="w-30"
-            value={column.overflow?.copy ? 2 : 1}
-            onChange={(value) => updateTableHeader(columnIndex, 'overflow', { copy: value === 2, truncated: column.overflow?.truncated })}
-          />
-          <UI.Button
-            wrapperClass="w-8"
-            content={{ icon: ButtonAdd, info: { text: $t('constructor.props.table.addaction'), side: 'top' } }}
-            onClick={() => {
-              const newButton = {
-                name: `button${(component.properties.header[columnIndex].buttons ? component.properties.header[columnIndex].buttons.length : 0) + 1}`,
-                class: 'bg-blue',
-                eventHandler: { Header: 'SET', Argument: 'Save', Variables: [] },
-                onClick: () => {},
-              }
-              const buttons = [...(component.properties.header[columnIndex].buttons || []), newButton]
-              updateTableHeader(columnIndex, 'buttons', buttons)
-            }}
-          />
-          <UI.Button
-            wrapperClass="w-8"
-            content={{ icon: ButtonDelete }}
-            onClick={() => {
-              const headers = [...(component.properties.header || [])]
-              headers.splice(columnIndex, 1)
-              updateProperty('header', headers, component, onPropertyChange)
-            }}
-          />
-        </div>
-        <div class="mr-2 flex items-end justify-around gap-6">
-          <UI.Select
-            label={{ name: $t('constructor.props.align.content') }}
-            type="buttons"
-            value={$optionsStore.ALIGN_OPTIONS.find((a) => (a.value as string).includes(column.align?.content) || 'left')}
-            options={$optionsStore.ALIGN_OPTIONS}
-            onUpdate={(option) => updateTableHeader(columnIndex, 'align', { header: column.align?.header, content: option.value })}
-          />
-          <UI.Switch
-            wrapperClass="w-2/10"
-            label={{ name: $t('constructor.props.table.columns.truncated') }}
-            value={column.overflow?.truncated ? 2 : 1}
-            onChange={(value) => updateTableHeader(columnIndex, 'overflow', { truncated: value === 2, copy: column.overflow?.copy })}
-          />
-
-          <UI.Input
-            label={{ name: $t('constructor.props.table.columns.class') }}
-            value={column.image?.class}
-            onUpdate={(value) => {
-              updateTableHeader(columnIndex, 'image', { class: value, width: column.image?.width, height: column.image?.height })
-            }}
-          />
-          <UI.Input
-            label={{ name: $t('constructor.props.table.columns.image.width'), class: 'px-0' }}
-            wrapperClass="w-150"
-            value={column.image?.width}
-            onUpdate={(value) => {
-              updateTableHeader(columnIndex, 'image', { class: column.image?.class, width: value, height: column.image?.height })
-            }}
-          />
-          <UI.Input
-            label={{ name: $t('constructor.props.table.columns.image.height'), class: 'px-0' }}
-            wrapperClass="w-150"
-            value={column.image?.height}
-            onUpdate={(value) => {
-              updateTableHeader(columnIndex, 'image', { class: column.image?.class, width: column.image?.width, height: value })
-            }}
-          />
-        </div>
-      </div>
-
-      {#if column.buttons && column.buttons.length > 0}
-        <div class="mb-5 rounded-lg p-1">
-          {#each column.buttons as button, buttonIndex (buttonIndex)}
-            <div class="mx-14 flex items-end justify-around gap-2">
+    <div class="flex flex-col gap-2">
+      {#each component.properties.header as column, columnIndex (columnIndex)}
+        <div class="rounded-2xl border border-(--border-color) p-2">
+          <div class="mb-5">
+            <div class="mr-2 flex items-end justify-around gap-6">
               <UI.Input
-                label={{ name: $t('constructor.props.name') }}
-                wrapperClass="!w-3/10"
-                value={button.name}
-                onUpdate={(value) => updateButtonProperty(columnIndex, buttonIndex, 'name', value)}
+                label={{ name: $t('constructor.props.table.columns.key') }}
+                wrapperClass="w-150"
+                value={column.key}
+                help={{ regExp: /^[0-9a-zA-Z_-]{0,16}$/ }}
+                onUpdate={(value) => {
+                  updateTableHeader(columnIndex, 'key', value)
+                  updateTableBody()
+                }}
+              />
+              <UI.Input
+                label={{ name: $t('constructor.props.table.columns.label') }}
+                value={column.label.name}
+                onUpdate={(value) => {
+                  updateTableHeader(columnIndex, 'label', { ['name']: value })
+                }}
+              />
+              <UI.Input
+                label={{ name: $t('constructor.props.table.columns.width'), class: 'px-0' }}
+                wrapperClass="w-150"
+                type="number"
+                value={Number(column.width.replace('%', ''))}
+                onUpdate={(value) => updateTableHeader(columnIndex, 'width', `${value}%`)}
               />
               <UI.Select
-                wrapperClass="!w-2/10"
-                label={{ name: $t('constructor.props.header') }}
+                label={{ name: $t('constructor.props.align.header') }}
                 type="buttons"
-                value={$optionsStore.HEADER_OPTIONS.find((h) => h.value === button.eventHandler?.Header)}
-                options={$optionsStore.HEADER_OPTIONS}
-                onUpdate={(option) => {
-                  const handler = button.eventHandler
-                  handler.Header = option.value as string
-                  updateButtonProperty(columnIndex, buttonIndex, 'eventHandler', handler)
+                value={$optionsStore.ALIGN_OPTIONS.find((a) => (a.value as string).includes(column.align?.header) || 'left')}
+                options={$optionsStore.ALIGN_OPTIONS}
+                onUpdate={(option) => updateTableHeader(columnIndex, 'align', { header: option.value, content: column.align?.content })}
+              />
+              <UI.Switch
+                label={{ name: $t('constructor.props.table.columns.sortable'), class: 'px-0' }}
+                wrapperClass="w-30"
+                value={column.sortable ? 2 : 1}
+                onChange={(value) => updateTableHeader(columnIndex, 'sortable', value === 2)}
+              />
+              <UI.Switch
+                label={{ name: $t('constructor.props.copy'), class: 'px-0' }}
+                wrapperClass="w-30"
+                value={column.overflow?.copy ? 2 : 1}
+                onChange={(value) => updateTableHeader(columnIndex, 'overflow', { copy: value === 2, truncated: column.overflow?.truncated })}
+              />
+              <UI.Button
+                wrapperClass="w-8"
+                content={{ icon: ButtonAdd, info: { text: $t('constructor.props.table.addaction'), side: 'top' } }}
+                onClick={() => {
+                  const newButton = {
+                    name: `button${(component.properties.header[columnIndex].buttons ? component.properties.header[columnIndex].buttons.length : 0) + 1}`,
+                    class: 'bg-blue',
+                    eventHandler: { Header: 'SET', Argument: 'Save', Variables: [] },
+                    onClick: () => {},
+                  }
+                  const buttons = [...(component.properties.header[columnIndex].buttons || []), newButton]
+                  updateTableHeader(columnIndex, 'buttons', buttons)
                 }}
               />
+              <UI.Button
+                wrapperClass="w-8"
+                content={{ icon: ButtonDelete }}
+                onClick={() => {
+                  const headers = [...(component.properties.header || [])]
+                  headers.splice(columnIndex, 1)
+                  updateProperty('header', headers, component, onPropertyChange)
+                }}
+              />
+            </div>
+            <div class="mr-2 flex items-end justify-around gap-6">
+              <UI.Select
+                label={{ name: $t('constructor.props.align.content') }}
+                type="buttons"
+                value={$optionsStore.ALIGN_OPTIONS.find((a) => (a.value as string).includes(column.align?.content) || 'left')}
+                options={$optionsStore.ALIGN_OPTIONS}
+                onUpdate={(option) => updateTableHeader(columnIndex, 'align', { header: column.align?.header, content: option.value })}
+              />
+              <UI.Switch
+                wrapperClass="w-2/10"
+                label={{ name: $t('constructor.props.table.columns.truncated') }}
+                value={column.overflow?.truncated ? 2 : 1}
+                onChange={(value) => updateTableHeader(columnIndex, 'overflow', { truncated: value === 2, copy: column.overflow?.copy })}
+              />
+              <div class="relative mt-6 flex w-full gap-2">
+                <UI.Button
+                  content={{ name: $t('constructor.props.table.columns.defaultIcon') }}
+                  onClick={() => (defaultIcon = { isModalOpen: true, columnIndex: columnIndex, column: column })}
+                />
+                {#if column.image?.defaultIcon}
+                  <UI.Button
+                    wrapperClass="w-8.5 "
+                    componentClass="p-0.5 bg-red"
+                    content={{ icon: CrossIcon }}
+                    onClick={() => {
+                      updateTableHeader(columnIndex, 'image', {
+                        class: column.image?.class,
+                        width: column.image?.width,
+                        height: column.image?.height,
+                        defaultIcon: '',
+                      })
+                    }}
+                  />
+                {/if}
+              </div>
               <UI.Input
-                wrapperClass="!w-2/10"
-                label={{ name: $t('constructor.props.argument') }}
-                value={button.eventHandler?.Argument}
+                label={{ name: $t('constructor.props.table.columns.class') }}
+                value={column.image?.class}
                 onUpdate={(value) => {
-                  const handler = button.eventHandler
-                  handler.Argument = value as string
-                  updateButtonProperty(columnIndex, buttonIndex, 'eventHandler', handler)
+                  updateTableHeader(columnIndex, 'image', {
+                    class: value,
+                    width: column.image?.width,
+                    height: column.image?.height,
+                    defaultIcon: column.image.defaultIcon,
+                  })
                 }}
               />
               <UI.Input
-                wrapperClass="!w-2/10"
-                label={{ name: $t('constructor.props.table.keys') }}
-                value={button.eventHandler?.Variables.join(' ')}
-                maxlength={500}
-                help={{ info: $t('constructor.props.table.keys.info'), regExp: /^[a-zA-Z0-9\-_ ]{0,500}$/ }}
+                label={{ name: $t('constructor.props.table.columns.image.width'), class: 'px-0' }}
+                type="number"
+                number={{ minNum: 0, maxNum: 1000, step: 1 }}
+                wrapperClass="w-150"
+                value={Number(column.image?.width.replace('rem', '')) ?? 0}
                 onUpdate={(value) => {
-                  const handler = { ...button.eventHandler }
-                  handler.Variables = (value as string).trim().split(/\s+/)
-                  updateButtonProperty(columnIndex, buttonIndex, 'eventHandler', handler)
+                  updateTableHeader(columnIndex, 'image', {
+                    class: column.image?.class,
+                    width: `${value ?? 0}rem`,
+                    height: column.image?.height,
+                    defaultIcon: column.image.defaultIcon,
+                  })
+                }}
+              />
+              <UI.Input
+                label={{ name: $t('constructor.props.table.columns.image.height'), class: 'px-0' }}
+                type="number"
+                number={{ minNum: 0, maxNum: 1000, step: 1 }}
+                wrapperClass="w-150"
+                value={Number(column.image?.height.replace('rem', ''))}
+                onUpdate={(value) => {
+                  updateTableHeader(columnIndex, 'image', {
+                    class: column.image?.class,
+                    width: column.image?.width,
+                    height: `${value}rem`,
+                    defaultIcon: column.image.defaultIcon,
+                  })
                 }}
               />
-              <UI.Button wrapperClass="w-8" content={{ icon: ButtonDelete }} onClick={() => removeButtonFromColumn(columnIndex, buttonIndex)} />
             </div>
-          {/each}
+          </div>
+
+          {#if column.buttons && column.buttons.length > 0}
+            <hr class="border-(--border-color)" />
+            <div class="mb-5 rounded-lg p-1">
+              {#each column.buttons as button, buttonIndex (buttonIndex)}
+                <div class="ml-14 flex items-end justify-between gap-2">
+                  <UI.Input
+                    label={{ name: $t('constructor.props.name') }}
+                    wrapperClass="!w-3/10"
+                    value={button.name}
+                    onUpdate={(value) => updateButtonProperty(columnIndex, buttonIndex, 'name', value)}
+                  />
+                  <UI.Select
+                    wrapperClass="!w-2/10"
+                    label={{ name: $t('constructor.props.header') }}
+                    type="buttons"
+                    value={$optionsStore.HEADER_OPTIONS.find((h) => h.value === button.eventHandler?.Header)}
+                    options={$optionsStore.HEADER_OPTIONS}
+                    onUpdate={(option) => {
+                      const handler = button.eventHandler
+                      handler.Header = option.value as string
+                      updateButtonProperty(columnIndex, buttonIndex, 'eventHandler', handler)
+                    }}
+                  />
+                  <UI.Input
+                    wrapperClass="!w-2/10"
+                    label={{ name: $t('constructor.props.argument') }}
+                    value={button.eventHandler?.Argument}
+                    onUpdate={(value) => {
+                      const handler = button.eventHandler
+                      handler.Argument = value as string
+                      updateButtonProperty(columnIndex, buttonIndex, 'eventHandler', handler)
+                    }}
+                  />
+                  <UI.Input
+                    wrapperClass="!w-2/10"
+                    label={{ name: $t('constructor.props.table.keys') }}
+                    value={button.eventHandler?.Variables.join(' ')}
+                    maxlength={500}
+                    help={{ info: $t('constructor.props.table.keys.info'), regExp: /^[a-zA-Z0-9\-_ ]{0,500}$/ }}
+                    onUpdate={(value) => {
+                      const handler = { ...button.eventHandler }
+                      handler.Variables = (value as string).trim().split(/\s+/)
+                      updateButtonProperty(columnIndex, buttonIndex, 'eventHandler', handler)
+                    }}
+                  />
+                  <UI.Button wrapperClass="w-8" content={{ icon: ButtonDelete }} onClick={() => removeButtonFromColumn(columnIndex, buttonIndex)} />
+                </div>
+              {/each}
+            </div>
+          {/if}
         </div>
+      {/each}
+      {#if defaultIcon.isModalOpen}
+        <Modal bind:isOpen={defaultIcon.isModalOpen} wrapperClass="w-130">
+          {#snippet main()}
+            <div class="grid grid-cols-3">
+              {#each ICONS as category}
+                <div class="relative m-1.5 rounded-xl border-2 border-(--border-color) p-3">
+                  <div class="absolute -top-3.5 bg-(--back-color) px-1">{$t(`constructor.props.icon.${category[0]}`)}</div>
+                  <div class="grid grid-cols-3 place-items-center gap-2">
+                    {#each category[1] as icon}
+                      <button
+                        class="h-8 w-8 cursor-pointer [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full"
+                        onclick={() => {
+                          updateTableHeader(defaultIcon.columnIndex, 'image', {
+                            class: defaultIcon.column.image?.class,
+                            width: defaultIcon.column.image?.width,
+                            height: defaultIcon.column.image?.height,
+                            defaultIcon: icon as string,
+                          })
+                        }}
+                      >
+                        {@html icon}
+                      </button>{/each}
+                  </div>
+                </div>
+              {/each}
+            </div>
+          {/snippet}
+        </Modal>
       {/if}
-    {/each}
+    </div>
   </div>
 {/if}

package/dist/TextField/TextFieldProps.svelte

@@ -115,11 +115,10 @@
         onUpdate={(value) => updateProperty('id', value as string, component, onPropertyChange)}
       />
       <UI.Input
-        label={{ name: $t('constructor.props.wrapperclass') }}
-        value={component.properties.wrapperClass}
-        onUpdate={(value) => updateProperty('wrapperClass', value as string, component, onPropertyChange)}
+        label={{ name: $t('constructor.props.label') }}
+        value={component.properties.content.name}
+        onUpdate={(value) => updateProperty('content.name', value as string, component, onPropertyChange)}
       />
-
       <UI.Select
         wrapperClass="!h-14"
         label={{ name: $t('constructor.props.textcolors') }}
@@ -130,11 +129,6 @@
       />
     </div>
     <div class="flex w-1/3 flex-col px-2">
-      <UI.Input
-        label={{ name: $t('constructor.props.label') }}
-        value={component.properties.content.name}
-        onUpdate={(value) => updateProperty('content.name', value as string, component, onPropertyChange)}
-      />
       <UI.Select
         label={{ name: $t('constructor.props.size') }}
         type="buttons"

package/dist/{Accordion/icons.js → icons.js}

@@ -7,36 +7,24 @@ export const ICONS = [
     ["common", [
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"M6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1z\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M6 1a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1c1.66 0 3 1.34 3 3v9c0 1.66-1.34 3-3 3H6c-1.66 0-3-1.34-3-3V4c0-1.66 1.34-3 3-3M4 4c0-1.1.895-2 2-2h4c1.1 0 2 .895 2 2v9c0 1.1-.895 2-2 2H6c-1.1 0-2-.895-2-2z\" clip-rule=\"evenodd\"/></svg>",
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M9 3.2c0-1.12 0-1.68.218-2.11c.192-.376.498-.682.874-.874c.428-.218.988-.218 2.11-.218h.6c1.12 0 1.68 0 2.11.218c.376.192.682.498.874.874c.218.428.218.988.218 2.11v.6c0 1.12 0 1.68-.218 2.11a2 2 0 0 1-.874.874c-.428.218-.988.218-2.11.218h-.6c-1.12 0-1.68 0-2.11-.218a2 2 0 0 1-.874-.874C9 5.482 9 4.922 9 3.8zM12.2 1h.6c.577 0 .949 0 1.23.024c.272.022.372.06.422.085c.188.096.341.249.437.437c.025.05.063.15.085.422c.023.283.024.656.024 1.23v.6c0 .577 0 .949-.024 1.23c-.022.272-.06.372-.085.422a1 1 0 0 1-.437.437c-.05.025-.15.063-.422.085c-.283.023-.656.024-1.23.024h-.6c-.577 0-.949 0-1.23-.024c-.272-.022-.372-.06-.422-.085a1 1 0 0 1-.437-.437c-.025-.05-.063-.15-.085-.422a17 17 0 0 1-.024-1.23v-.6c0-.577 0-.949.024-1.23c.022-.272.06-.372.085-.422c.096-.188.249-.341.437-.437c.05-.025.15-.063.422-.085C11.253 1 11.626 1 12.2 1M.218 4.09C0 4.518 0 5.078 0 6.2v6.6c0 1.12 0 1.68.218 2.11c.192.376.498.682.874.874c.428.218.988.218 2.11.218h6.6c1.12 0 1.68 0 2.11-.218c.376-.192.682-.498.874-.874c.218-.428.218-.988.218-2.11v-.6c0-1.12 0-1.68-.218-2.11a2 2 0 0 0-.874-.874c-.428-.218-.988-.218-2.11-.218h-2.8v-2.8c0-1.12 0-1.68-.218-2.11a2 2 0 0 0-.874-.874c-.428-.218-.988-.218-2.11-.218h-.6c-1.12 0-1.68 0-2.11.218a2 2 0 0 0-.874.874zm5.78 2.11V9h-5V6.2c0-.577 0-.949.024-1.23c.022-.272.06-.372.085-.422c.096-.188.249-.341.437-.437c.05-.025.15-.063.422-.085c.283-.023.656-.024 1.23-.024h.6c.577 0 .949 0 1.23.024c.272.022.372.06.422.085c.188.096.341.249.437.437c.025.05.063.15.085.422c.023.283.024.656.024 1.23zm-5 3.8h5v5h-2.8c-.577 0-.949 0-1.23-.024c-.272-.022-.372-.06-.422-.085a1 1 0 0 1-.437-.437c-.025-.05-.063-.15-.085-.422C1 13.749 1 13.376 1 12.802v-2.8zm6 0h2.8c.577 0 .949 0 1.23.024c.272.022.372.06.422.085c.188.096.341.249.437.437c.025.05.063.15.085.422c.023.283.024.656.024 1.23v.6c0 .577 0 .949-.024 1.23c-.022.272-.06.372-.085.422a1 1 0 0 1-.437.437c-.05.025-.15.063-.422.085c-.283.023-.656.024-1.23.024h-2.8v-5z\" clip-rule=\"evenodd\"/></svg>",
-            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"\r\n  ><path\r\n    fill=\"none\"\r\n    stroke=\"currentColor\"\r\n    stroke-linecap=\"round\"\r\n    stroke-linejoin=\"round\"\r\n    stroke-width=\"1.5\"\r\n    d=\"M14.44 5.78L4.198 16.02a2 2 0 0 0-.565 1.125l-.553 3.774l3.775-.553A2 2 0 0 0 7.98 19.8L18.22 9.56m-3.78-3.78l2.229-2.23a1.6 1.6 0 0 1 2.263 0l1.518 1.518a1.6 1.6 0 0 1 0 2.263l-2.23 2.23M14.44 5.78l3.78 3.78\"\r\n  /></svg\r\n>\r\n",
+            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"\r\n>\r\n  <path\r\n    fill=\"none\"\r\n    stroke=\"currentColor\"\r\n    stroke-linecap=\"round\"\r\n    stroke-linejoin=\"round\"\r\n    stroke-width=\"1.5\"\r\n    d=\"M14.44 5.78L4.198 16.02a2 2 0 0 0-.565 1.125l-.553 3.774l3.775-.553A2 2 0 0 0 7.98 19.8L18.22 9.56m-3.78-3.78l2.229-2.23a1.6 1.6 0 0 1 2.263 0l1.518 1.518a1.6 1.6 0 0 1 0 2.263l-2.23 2.23M14.44 5.78l3.78 3.78\"\r\n  />\r\n</svg>",
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M0 2c0-.465 0-.697.051-.888a1.5 1.5 0 0 1 1.06-1.06C1.302.001 1.534.001 2 .001s.697 0 .888.051c.518.139.922.543 1.06 1.06c.051.191.051.423.051.888s0 .697-.05.888a1.5 1.5 0 0 1-1.06 1.06c-.192.051-.424.051-.889.051s-.697 0-.888-.051a1.5 1.5 0 0 1-1.06-1.06C0 2.697 0 2.465 0 2m2 1c-.242 0-.389 0-.501-.005a1 1 0 0 1-.128-.012a.5.5 0 0 1-.354-.354c.001.004-.007-.021-.012-.128C1 2.389 1 2.24 1 2s0-.389.005-.501c.005-.107.013-.132.012-.128a.5.5 0 0 1 .354-.354c-.004.001.021-.007.128-.012C1.611 1 1.759 1 2 1s.389 0 .501.005c.107.005.132.013.128.012a.5.5 0 0 1 .354.354c-.001-.004.007.021.012.128C3 1.611 3 1.759 3 2s0 .389-.005.501a1 1 0 0 1-.012.128a.5.5 0 0 1-.354.354c.004-.001-.021.007-.128.012C2.389 3 2.241 3 2 3M0 8c0-.465 0-.697.051-.888a1.5 1.5 0 0 1 1.06-1.06c.191-.051.423-.051.888-.051s.697 0 .888.051c.518.139.922.543 1.06 1.06c.051.191.051.423.051.888s0 .697-.05.888a1.5 1.5 0 0 1-1.06 1.06c-.192.051-.424.051-.889.051s-.697 0-.888-.051a1.5 1.5 0 0 1-1.06-1.06C0 8.697 0 8.465 0 8m2 1c-.242 0-.389 0-.501-.005a1 1 0 0 1-.128-.012a.5.5 0 0 1-.354-.354c.001.004-.007-.021-.012-.128C1 8.389 1 8.241 1 8s0-.389.005-.501c.005-.107.013-.132.012-.128a.5.5 0 0 1 .354-.354s.028-.007.128-.012C1.611 7 1.759 7 2 7s.389 0 .501.005c.107.005.132.013.128.012a.5.5 0 0 1 .354.354s.007.028.012.128C3 7.611 3 7.759 3 8s0 .389-.005.501a1 1 0 0 1-.012.128a.5.5 0 0 1-.354.354s-.028.007-.128.012C2.389 9 2.241 9 2 9M.051 13.1C0 13.291 0 13.523 0 13.988s0 .698.051.888a1.5 1.5 0 0 0 1.06 1.06c.191.051.423.051.888.051s.697 0 .888-.051a1.5 1.5 0 0 0 1.06-1.06c.051-.191.051-.423.051-.888s0-.698-.05-.888a1.5 1.5 0 0 0-1.06-1.06c-.192-.051-.424-.051-.889-.051s-.697 0-.888.051a1.5 1.5 0 0 0-1.06 1.06m1.45 1.88c.112.005.26.005.501.005s.39 0 .501-.005a.6.6 0 0 0 .128-.012a.5.5 0 0 0 .353-.354c0-.003.007-.034.012-.128c.005-.112.005-.26.005-.5s0-.39-.005-.502c-.005-.1-.012-.128-.012-.128a.5.5 0 0 0-.353-.353s-.028-.007-.128-.011c-.112-.005-.26-.006-.501-.006s-.389 0-.501.006a1 1 0 0 0-.128.011a.5.5 0 0 0-.353.354s-.007.028-.012.128c-.005.112-.005.26-.005.501s0 .39.005.501c.005.107.013.132.012.128a.5.5 0 0 0 .354.354a1 1 0 0 0 .128.012z\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" d=\"M6.5 2a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1zM6 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m.5 5.5a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1z\"/></svg>",
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M10.5 11.9a6.005 6.005 0 0 1-9.48-4.89c0-3.31 2.69-6 6-6a6.005 6.005 0 0 1 4.89 9.48l2.82 2.82a.996.996 0 0 1 0 1.41a.994.994 0 0 1-1.41 0zm1.52-4.89c0 2.76-2.24 5-5 5s-5-2.24-5-5s2.24-5 5-5s5 2.24 5 5\" clip-rule=\"evenodd\"/></svg>",
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"M6.5 7a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 1 .5-.5m3.5.5a.5.5 0 0 0-1 0v4a.5.5 0 0 0 1 0z\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8.12 0h-.241c-.402 0-.735 0-1.01.022c-.281.023-.539.072-.782.196a2 2 0 0 0-.874.874c-.124.243-.173.501-.196.782c-.022.271-.022.603-.022 1.01v.121h-3.5a.5.5 0 0 0 0 1h.54l.597 7.16c.063.758.113 1.36.192 1.84c.08.492.196.9.41 1.27c.354.604.88 1.09 1.51 1.39c.386.184.803.265 1.3.304c.487.038 1.09.038 1.85.038h.21c.76 0 1.36 0 1.85-.038c.497-.039.913-.12 1.3-.304a3.5 3.5 0 0 0 1.51-1.39c.216-.368.33-.777.41-1.27c.08-.48.129-1.08.193-1.84l.597-7.16h.54a.5.5 0 0 0 0-1h-3.5v-.12c0-.403 0-.736-.022-1.01c-.023-.282-.072-.54-.196-.783a2 2 0 0 0-.874-.874C9.669.094 9.41.045 9.13.022C8.859 0 8.527 0 8.12 0M3.04 4l.588 7.06c.065.784.112 1.34.184 1.78c.07.432.159.705.287.924a2.5 2.5 0 0 0 1.08.992c.229.11.509.175.945.21c.442.035 1 .035 1.79.035h.167c.787 0 1.35 0 1.79-.035c.436-.034.716-.1.945-.21a2.5 2.5 0 0 0 1.08-.992c.128-.219.217-.493.288-.924c.071-.438.118-.997.184-1.78L12.956 4h-9.91zM6 3h4v-.1c0-.428 0-.719-.019-.944c-.018-.219-.05-.331-.09-.41a1 1 0 0 0-.437-.437c-.078-.04-.19-.072-.41-.09A13 13 0 0 0 8.1 1h-.2c-.428 0-.719 0-.944.019c-.219.018-.331.05-.41.09a1 1 0 0 0-.437.437c-.04.078-.072.19-.09.41C6 2.181 6 2.472 6 2.9z\" clip-rule=\"evenodd\"/></svg>",
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"M8 9a.75.75 0 0 1-.75-.75v-3.5a.75.75 0 0 1 1.5 0v3.5A.75.75 0 0 1 8 9m-1 3a1 1 0 1 1 2 0a1 1 0 0 1-2 0\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"m.325 11.6l5.02-9.99c1.1-2.19 4.21-2.19 5.31 0l5.02 9.99c1 2-.436 4.36-2.66 4.36h-10c-2.22 0-3.66-2.36-2.66-4.36zm.894.449l5.02-9.99c.733-1.46 2.79-1.46 3.52 0l5.02 9.99c.676 1.35-.301 2.91-1.76 2.91h-10c-1.46 0-2.44-1.57-1.76-2.91z\" clip-rule=\"evenodd\"/></svg>"
         ]],
-    ["control", [
-            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M10.5 7a2.5 2.5 0 0 1-5 0a2.5 2.5 0 0 1 5 0m-1 0a1.5 1.5 0 1 1-3.001-.001A1.5 1.5 0 0 1 9.5 7\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M14 7c0 4.5-5 9-6 9s-6-4.5-6-9c0-3.31 2.69-6 6-6s6 2.69 6 6m-1 0c0 1.91-1.08 3.94-2.4 5.56c-.647.794-1.32 1.45-1.87 1.89a5.3 5.3 0 0 1-.731.507l-.052-.028a5.5 5.5 0 0 1-.68-.479c-.552-.446-1.22-1.1-1.87-1.89c-1.32-1.62-2.4-3.65-2.4-5.56c0-2.76 2.24-5 5-5s5 2.24 5 5z\" clip-rule=\"evenodd\"/></svg>",
-            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"M14.2 5.13a.5.5 0 0 1 .686.02a.5.5 0 0 1 .022.685l-4.93 5.59a2.002 2.002 0 1 1-1.353-1.355l5.57-4.95zM8 2c1.82 0 3.5.608 4.84 1.63l-.765.68A6.96 6.96 0 0 0 7.995 3c-3.87 0-7 3.13-7 7c0 1.1.895 2 2 2h1.03c0 .336.043.672.128 1h-1.16l-.154-.004a3 3 0 0 1-2.85-3c0-4.42 3.58-8 8-8zm7.7 5.9c.182.67.281 1.37.281 2.1c0 1.66-1.34 3-3 3h-1.1q.116-.45.127-.91l.08-.09h.893c1.1 0 2-.895 2-2q-.002-.6-.1-1.17z\"/><path fill=\"currentColor\" d=\"M8 5c.925 0 1.8.251 2.54.671l-.799.71A4.2 4.2 0 0 0 7.991 6c-2.26 0-4 1.81-4 3.5a.5.5 0 0 1-1 0c0-2.31 2.26-4.5 5-4.5z\"/></svg>"
-        ]],
-    ["electronic", [
-            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M4 1a2.01 2.01 0 0 0-1.74 1.01A2.5 2.5 0 0 0 0 4.5V11c0 1.66 1.34 3 3 3h10c1.66 0 3-1.34 3-3V4.5c0-1.3-.992-2.37-2.26-2.49A2 2 0 0 0 12 1h-1c-.74 0-1.39.402-1.73 1H6.73C6.384 1.402 5.738 1 5 1zm0 1a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2zm5 1H7v2.5a.5.5 0 0 1-1 0v-.768C5.706 4.902 5.364 5 5 5H4c-.364 0-.706-.097-1-.268V5.5a.5.5 0 0 1-1 0V3.09A1.5 1.5 0 0 0 1 4.5v2A1.5 1.5 0 0 0 2.5 8h11A1.5 1.5 0 0 0 15 6.5v-2c0-.653-.417-1.21-1-1.41V5.5a.5.5 0 0 1-1 0v-.768c-.294.17-.636.268-1 .268h-1c-.364 0-.706-.097-1-.268V5.5a.5.5 0 0 1-1 0zm1 0a1 1 0 0 0 1 1h1a1 1 0 0 0 0-2h-1a1 1 0 0 0-1 1m5 5.5c-.418.314-.937.5-1.5.5h-11c-.563 0-1.08-.186-1.5-.5V11c0 1.1.895 2 2 2h10c1.1 0 2-.895 2-2z\" clip-rule=\"evenodd\"/></svg>",
-            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"M12.5 0a.5.5 0 0 1 .5.5v2.26q.125.11.236.235h2.26a.5.5 0 0 1 .492.41l.008.09a.5.5 0 0 1-.5.5h-1.67c.11.313.17.65.17 1v1h1.5a.5.5 0 0 1 .5.5a.5.5 0 0 1-.5.5h-1.5v2h1.5a.5.5 0 0 1 .5.5a.5.5 0 0 1-.5.5h-1.5v1c0 .351-.06.688-.171 1h1.67a.5.5 0 0 1 .5.5a.5.5 0 0 1-.5.5h-2.26a3 3 0 0 1-.234.235L13 15.49a.5.5 0 0 1-.5.5a.5.5 0 0 1-.5-.5v-1.67c-.312.11-.649.171-1 .171h-1v1.5a.5.5 0 0 1-.5.5a.5.5 0 0 1-.5-.5v-1.5H7v1.5a.5.5 0 0 1-.5.5a.5.5 0 0 1-.5-.5v-1.5H5c-.35 0-.687-.06-1-.17v1.67a.5.5 0 0 1-.5.5a.5.5 0 0 1-.5-.5v-2.26a3 3 0 0 1-.235-.235l-2.26-.001a.5.5 0 0 1-.5-.5a.5.5 0 0 1 .5-.5h1.67a3 3 0 0 1-.171-1v-1h-1.5a.5.5 0 0 1-.5-.5a.5.5 0 0 1 .5-.5h1.5v-2h-1.5a.5.5 0 0 1-.5-.5a.5.5 0 0 1 .5-.5h1.5v-1c0-.35.06-.687.17-1H.504a.5.5 0 0 1-.5-.5a.5.5 0 0 1 .5-.5h2.26A3 3 0 0 1 3 2.759V.499a.5.5 0 0 1 .5-.5a.5.5 0 0 1 .5.5v1.67c.313-.11.65-.17 1-.17h1v-1.5a.5.5 0 0 1 .5-.5a.5.5 0 0 1 .5.5v1.5h2v-1.5a.5.5 0 0 1 .5-.5a.5.5 0 0 1 .5.5v1.5h1c.351 0 .688.06 1 .171V.5a.5.5 0 0 1 .5-.5M11 3H5a2 2 0 0 0-1.996 1.996v6A2 2 0 0 0 5 12.992h6c.53 0 1.04-.211 1.41-.586s.586-.884.586-1.41v-6A2 2 0 0 0 11 3m0 1a.997.997 0 0 1 1 1v6a.997.997 0 0 1-1 1H5a.997.997 0 0 1-1-1V5a.997.997 0 0 1 1-1zm0 1H5v6h6z\"/></svg>",
-            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M2.28 0h2.49c.098 0 .193 0 .275.005c.089.006.194.02.305.061a1 1 0 0 1 .575.575c.042.11.056.216.061.305c.005.082.005.177.005.275v7.78a2 2 0 1 0 4 0v-7.78c0-.098 0-.193.006-.275c.005-.088.019-.194.06-.305a1 1 0 0 1 .576-.575a1 1 0 0 1 .305-.06C11.019 0 11.115 0 11.213 0h2.5c.126 0 .249 0 .353.008c.114.01.249.032.385.101c.188.096.34.25.437.437c.07.136.091.271.1.385c.008.104.008.227.008.353v7.72c0 3.87-3.13 7-7 7s-7-3.13-7-7v-7.72c0-.126 0-.249.009-.353c.01-.114.031-.249.1-.385c.097-.188.25-.34.438-.437c.136-.069.27-.09.385-.1C2.032 0 2.155 0 2.28 0m-.278 1.01v.007a4 4 0 0 0-.006.288v2.7h3v-2.77c0-.115 0-.178-.003-.224v-.007h-.007A4 4 0 0 0 4.762 1h-2.47c-.148 0-.229 0-.288.005h-.006zM1.996 9V5h3v4c0 1.66 1.34 3 3 3s3-1.34 3-3V5h3v4c0 3.31-2.69 6-6 6s-6-2.69-6-6m12-5V1.3c0-.148 0-.229-.005-.288v-.007h-.007A4 4 0 0 0 13.696 1h-2.47c-.115 0-.178 0-.224.003h-.006v.006a4 4 0 0 0-.004.224v2.77h3z\" clip-rule=\"evenodd\"/></svg>",
-            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M2 7.5A1.5 1.5 0 0 1 3.5 6h9A1.5 1.5 0 0 1 14 7.5v1a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 8.5zM3.5 7a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M4 2.5a.5.5 0 0 0-1 0V4C1.34 4 0 5.34 0 7v2c0 1.66 1.34 3 3 3v1.5a.5.5 0 0 0 1 0V12h2v1.5a.5.5 0 0 0 1 0V12h2v1.5a.5.5 0 0 0 1 0V12h2v1.5a.5.5 0 0 0 1 0V12c1.66 0 3-1.34 3-3V7c0-1.66-1.34-3-3-3V2.5a.5.5 0 0 0-1 0V4h-2V2.5a.5.5 0 0 0-1 0V4H7V2.5a.5.5 0 0 0-1 0V4H4zM3 5c-1.1 0-2 .895-2 2v2c0 1.1.895 2 2 2h10c1.1 0 2-.895 2-2V7c0-1.1-.895-2-2-2z\" clip-rule=\"evenodd\"/></svg>",
-            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M9 3a.999.999 0 0 0-1.582-.814l-2.54 1.81h-2.38a2.5 2.5 0 0 0-2.5 2.5v3a2.5 2.5 0 0 0 2.5 2.5h2.38l2.54 1.81A1.001 1.001 0 0 0 9 12.993v-10zM2.5 5h2.38a1 1 0 0 0 .581-.186l2.54-1.81v10l-2.54-1.81a1 1 0 0 0-.581-.186H2.5a1.5 1.5 0 0 1-1.5-1.5v-3a1.5 1.5 0 0 1 1.5-1.5z\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" d=\"M11.5 2.34a.5.5 0 0 1 .663-.246a6.51 6.51 0 0 1 3.79 5.91c0 1.24-.356 2.46-1.03 3.51a6.5 6.5 0 0 1-2.76 2.4a.5.5 0 1 1-.417-.909a5.4 5.4 0 0 0 2.33-2.03a5.51 5.51 0 0 0-.002-5.94a5.5 5.5 0 0 0-2.34-2.03a.5.5 0 0 1-.246-.663z\"/><path fill=\"currentColor\" d=\"M10.6 5.15a.5.5 0 0 1 .683-.183a3.498 3.498 0 0 1 .003 6.06a.5.5 0 0 1-.501-.865a2.5 2.5 0 0 0 1.247-2.165a2.5 2.5 0 0 0-1.251-2.164a.5.5 0 0 1-.183-.683z\"/></svg>",
-            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"m2.56 3.42l-1.55 9c-.045.263.165.577.546.577h11.3a.54.54 0 0 0 .546-.423l1.55-9c.045-.263-.165-.577-.546-.577h-11.3a.54.54 0 0 0-.546.423M.02 12.25C-.138 13.164.592 14 1.55 14h11.3c.759 0 1.41-.53 1.53-1.25l1.55-9C16.088 2.836 15.358 2 14.4 2H3.1c-.759 0-1.41.53-1.53 1.25z\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"m7 11l.167-1h5L12 11zM5.09 4.53a.746.746 0 0 0-1.05-.117a.746.746 0 0 0-.117 1.05l1.54 1.93l-2.44 2.03a.754.754 0 0 0-.096 1.06a.754.754 0 0 0 1.06.096l3-2.5a.745.745 0 0 0 .106-1.04l-2-2.5z\" clip-rule=\"evenodd\"/></svg>",
-            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M11.5 1a2.5 2.5 0 0 1 2.385 1.756l1.76 6.14q.134.428.212.866q.107.352.109.738v1c0 .663-.263 1.3-.732 1.77c-.469.469-1.1.732-1.77.732h-11c-.663 0-1.3-.263-1.77-.732a2.5 2.5 0 0 1-.732-1.77v-1c0-.25.037-.499.11-.738a7 7 0 0 1 .211-.866l1.76-6.14A2.5 2.5 0 0 1 4.428 1h7.06zm1.97 8h-11a1.495 1.495 0 0 0-1.418 1.01A6 6 0 0 0 .97 11v.5a1.5 1.5 0 0 0 1.499 1.499h11a1.5 1.5 0 0 0 1.499-1.499V11q0-.499-.081-.99A1.5 1.5 0 0 0 13.468 9zm-.5 1a.997.997 0 0 1 1 1a.997.997 0 0 1-1 1a.997.997 0 0 1-1-1a.997.997 0 0 1 1-1M11.5 2H4.44a1.5 1.5 0 0 0-1.43 1.053l-1.44 5.12c.28-.11.584-.169.904-.169h11c.319 0 .624.06.904.169l-1.44-5.12A1.495 1.495 0 0 0 11.507 2z\" clip-rule=\"evenodd\"/></svg>"
-        ]],
-    ["image", [
-            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8 5C6.34 5 5 6.34 5 8s1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3M6 8a2 2 0 1 1 4.001-.001A2 2 0 0 1 6 8\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M5.6 1.2A.5.5 0 0 1 6 1h4.5a.5.5 0 0 1 .4.2L12.25 3h1.25A2.5 2.5 0 0 1 16 5.5v6a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 11.5v-6A2.5 2.5 0 0 1 2.5 3h1.75zm.65.8L4.9 3.8a.5.5 0 0 1-.4.2h-2A1.5 1.5 0 0 0 1 5.5v6A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5v-6A1.5 1.5 0 0 0 13.5 4H12a.5.5 0 0 1-.4-.2L10.25 2z\" clip-rule=\"evenodd\"/></svg>",
-            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M4 1C2.34 1 1 2.34 1 4v7c0 1.66 1.34 3 3 3h8c1.66 0 3-1.34 3-3V4c0-1.66-1.34-3-3-3zM2 7V5h2v2zm0-3h2V2c-1.1 0-2 .895-2 2m3-2h6v5H5zm7 2V2c1.1 0 2 .895 2 2zm0 1h2v2h-2zm0 3h2v2h-2zm0 3h2c0 1.1-.895 2-2 2zm-1 2H5V8h6zm-7-2v2c-1.1 0-2-.895-2-2zm0-1H2V8h2z\" clip-rule=\"evenodd\"/></svg>",
-            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8 9c1.66 0 3-1.34 3-3S9.66 3 8 3S5 4.34 5 6s1.34 3 3 3m0-1a2 2 0 1 0 .001-4.001A2 2 0 0 0 8 8\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M10 11h1.2c1.68 0 2.52 0 3.16-.327a3.02 3.02 0 0 0 1.31-1.31c.327-.642.327-1.48.327-3.16v-.4c0-1.68 0-2.52-.327-3.16a3 3 0 0 0-1.31-1.31c-.642-.327-1.48-.327-3.16-.327H4.8c-1.68 0-2.52 0-3.16.327a3.02 3.02 0 0 0-1.31 1.31c-.327.642-.327 1.48-.327 3.16v.4c0 1.68 0 2.52.327 3.16a3.02 3.02 0 0 0 1.31 1.31C2.282 11 3.12 11 4.8 11H6v3H2.5a.5.5 0 0 0 0 1h11a.5.5 0 0 0 0-1H10zm1.2-9H4.8c-.857 0-1.44 0-1.89.038c-.438.035-.663.1-.819.18a2 2 0 0 0-.874.874c-.08.156-.145.38-.18.819C1 4.36.999 4.94.999 5.8v.4c0 .857.001 1.44.038 1.89c.036.438.101.663.18.819c.192.376.498.682.874.874c.156.08.381.145.819.18C3.36 10 3.94 10 4.8 10h6.4c.857 0 1.44 0 1.89-.037c.438-.036.663-.101.819-.18c.376-.192.682-.498.874-.874c.08-.156.145-.381.18-.82c.037-.45.038-1.03.038-1.89v-.4c0-.856-.001-1.44-.038-1.89c-.036-.437-.101-.662-.18-.818a2 2 0 0 0-.874-.874c-.156-.08-.381-.145-.819-.18C12.64 2 12.06 2 11.2 2M9 11H7v3h2z\" clip-rule=\"evenodd\"/></svg>"
-        ]],
     ["info", [
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"m14.9 11.1l-.062-.07a4 4 0 0 1-.201-.255l-.16-.233a7 7 0 0 1-.48-.865c-.47-1-.952-2.55-.952-4.72a4.97 4.97 0 0 0-1.43-3.49a5 5 0 0 0-3.46-1.5a4.97 4.97 0 0 0-3.52 1.35a5 5 0 0 0-1.58 3.43l-.005.217c0 2.17-.482 3.73-.952 4.72c-.236.5-.47.864-.64 1.1l-.06.082l-.171.208l-.032.035a.5.5 0 0 0 .354.852h13a.498.498 0 0 0 .354-.852zM4 5.36l.005-.404c0-1.06.421-2.08 1.17-2.83a4.004 4.004 0 0 1 5.66 0c.75.75 1.17 1.77 1.17 2.83c0 2.33.518 4.02 1.05 5.15c.157.334.314.617.46.85h-11a9 9 0 0 0 .46-.85c.498-1.06.987-2.62 1.04-4.75zm6.4 9.4a.497.497 0 0 0-.1-.7a.5.5 0 0 0-.7.1a1.995 1.995 0 0 1-2.495.589a2 2 0 0 1-.705-.59a.501.501 0 0 0-.895.23a.5.5 0 0 0 .095.37a3 3 0 0 0 2.4 1.2a3 3 0 0 0 2.4-1.2z\"/></svg>",
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"M8 3.5a.5.5 0 0 0-1 0V8a.5.5 0 0 0 .276.447l3 1.5a.5.5 0 0 0 .447-.895l-2.72-1.36v-4.19z\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8s8-3.58 8-8s-3.58-8-8-8M1 8c0-3.87 3.13-7 7-7s7 3.13 7 7s-3.13 7-7 7s-7-3.13-7-7\" clip-rule=\"evenodd\"/></svg>",
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"><!-- Icon from Ultimate free icons by Streamline - https://creativecommons.org/licenses/by/4.0/ --><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M.75.75v22.5h22.5\"/><path d=\"M14.15 17.358a5.5 5.5 0 0 0 1.487 1.623l.713.519m-12.6 0l.713-.519A5.39 5.39 0 0 0 6.7 14.939l.4-6.979a2.92 2.92 0 0 1 2.95-2.71h.137\"/><path d=\"m9.15 19.5l.713-.519a5.39 5.39 0 0 0 2.237-4.042l.4-6.979a2.92 2.92 0 0 1 2.95-2.71a2.92 2.92 0 0 1 2.955 2.71l.4 6.979a5.39 5.39 0 0 0 2.232 4.042l.713.519\"/></g></svg>",
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"M8 7a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 7m0-1a1 1 0 1 0 0-2a1 1 0 0 0 0 2\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8 16c4.42 0 8-3.58 8-8s-3.58-8-8-8s-8 3.58-8 8s3.58 8 8 8m0-1c3.87 0 7-3.13 7-7s-3.13-7-7-7s-7 3.13-7 7s3.13 7 7 7\" clip-rule=\"evenodd\"/></svg>"
         ]],
+    ["media", [
+            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8 5C6.34 5 5 6.34 5 8s1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3M6 8a2 2 0 1 1 4.001-.001A2 2 0 0 1 6 8\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M5.6 1.2A.5.5 0 0 1 6 1h4.5a.5.5 0 0 1 .4.2L12.25 3h1.25A2.5 2.5 0 0 1 16 5.5v6a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 11.5v-6A2.5 2.5 0 0 1 2.5 3h1.75zm.65.8L4.9 3.8a.5.5 0 0 1-.4.2h-2A1.5 1.5 0 0 0 1 5.5v6A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5v-6A1.5 1.5 0 0 0 13.5 4H12a.5.5 0 0 1-.4-.2L10.25 2z\" clip-rule=\"evenodd\"/></svg>",
+            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M4 1C2.34 1 1 2.34 1 4v7c0 1.66 1.34 3 3 3h8c1.66 0 3-1.34 3-3V4c0-1.66-1.34-3-3-3zM2 7V5h2v2zm0-3h2V2c-1.1 0-2 .895-2 2m3-2h6v5H5zm7 2V2c1.1 0 2 .895 2 2zm0 1h2v2h-2zm0 3h2v2h-2zm0 3h2c0 1.1-.895 2-2 2zm-1 2H5V8h6zm-7-2v2c-1.1 0-2-.895-2-2zm0-1H2V8h2z\" clip-rule=\"evenodd\"/></svg>",
+            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M9 3a.999.999 0 0 0-1.582-.814l-2.54 1.81h-2.38a2.5 2.5 0 0 0-2.5 2.5v3a2.5 2.5 0 0 0 2.5 2.5h2.38l2.54 1.81A1.001 1.001 0 0 0 9 12.993v-10zM2.5 5h2.38a1 1 0 0 0 .581-.186l2.54-1.81v10l-2.54-1.81a1 1 0 0 0-.581-.186H2.5a1.5 1.5 0 0 1-1.5-1.5v-3a1.5 1.5 0 0 1 1.5-1.5z\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" d=\"M11.5 2.34a.5.5 0 0 1 .663-.246a6.51 6.51 0 0 1 3.79 5.91c0 1.24-.356 2.46-1.03 3.51a6.5 6.5 0 0 1-2.76 2.4a.5.5 0 1 1-.417-.909a5.4 5.4 0 0 0 2.33-2.03a5.51 5.51 0 0 0-.002-5.94a5.5 5.5 0 0 0-2.34-2.03a.5.5 0 0 1-.246-.663z\"/><path fill=\"currentColor\" d=\"M10.6 5.15a.5.5 0 0 1 .683-.183a3.498 3.498 0 0 1 .003 6.06a.5.5 0 0 1-.501-.865a2.5 2.5 0 0 0 1.247-2.165a2.5 2.5 0 0 0-1.251-2.164a.5.5 0 0 1-.183-.683z\"/></svg>",
+            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8 9c1.66 0 3-1.34 3-3S9.66 3 8 3S5 4.34 5 6s1.34 3 3 3m0-1a2 2 0 1 0 .001-4.001A2 2 0 0 0 8 8\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M10 11h1.2c1.68 0 2.52 0 3.16-.327a3.02 3.02 0 0 0 1.31-1.31c.327-.642.327-1.48.327-3.16v-.4c0-1.68 0-2.52-.327-3.16a3 3 0 0 0-1.31-1.31c-.642-.327-1.48-.327-3.16-.327H4.8c-1.68 0-2.52 0-3.16.327a3.02 3.02 0 0 0-1.31 1.31c-.327.642-.327 1.48-.327 3.16v.4c0 1.68 0 2.52.327 3.16a3.02 3.02 0 0 0 1.31 1.31C2.282 11 3.12 11 4.8 11H6v3H2.5a.5.5 0 0 0 0 1h11a.5.5 0 0 0 0-1H10zm1.2-9H4.8c-.857 0-1.44 0-1.89.038c-.438.035-.663.1-.819.18a2 2 0 0 0-.874.874c-.08.156-.145.38-.18.819C1 4.36.999 4.94.999 5.8v.4c0 .857.001 1.44.038 1.89c.036.438.101.663.18.819c.192.376.498.682.874.874c.156.08.381.145.819.18C3.36 10 3.94 10 4.8 10h6.4c.857 0 1.44 0 1.89-.037c.438-.036.663-.101.819-.18c.376-.192.682-.498.874-.874c.08-.156.145-.381.18-.82c.037-.45.038-1.03.038-1.89v-.4c0-.856-.001-1.44-.038-1.89c-.036-.437-.101-.662-.18-.818a2 2 0 0 0-.874-.874c-.156-.08-.381-.145-.819-.18C12.64 2 12.06 2 11.2 2M9 11H7v3h2z\" clip-rule=\"evenodd\"/></svg>"
+        ]],
     ["network", [
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"><!-- Icon from\r\n    Huge Icons by Hugeicons - undefined -->\r\n    <g fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\r\n        <path stroke-linecap=\"round\" d=\"M12 11v9\" />\r\n        <path d=\"M14 9a2 2 0 1 1-4 0a2 2 0 0 1 4 0Z\" />\r\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n            d=\"M16.959 6C17.619 6.87 18 7.898 18 9s-.381 2.13-1.041 3M7.04 6C6.381 6.87 6 7.898 6 9s.381 2.13 1.041 3m13.275-8C21.38 5.43 22 7.15 22 9s-.62 3.57-1.684 5M3.684 4C2.62 5.43 2 7.15 2 9s.62 3.57 1.684 5\" />\r\n    </g>\r\n</svg>",
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"M0 6c0-3.31 2.69-6 6-6c2.62 0 4.84 1.68 5.66 4.01q.166-.014.337-.014c2.21 0 4 1.79 4 4c0 1.63-.97 3.03-2.36 3.65c-.312.14-.636-.11-.636-.452c0-.222.142-.415.34-.514a2.999 2.999 0 0 0-1.931-5.622a.5.5 0 0 1-.581-.36a5.002 5.002 0 1 0-8.942 4.15a.6.6 0 0 1 .112.346c0 .495-.566.732-.857.332a5.97 5.97 0 0 1-1.14-3.52z\"/><path fill=\"currentColor\" d=\"M5 15.5V8.71L3.85 9.86a.5.5 0 0 1-.707-.707l2-2a.5.5 0 0 1 .35-.147h.006a.5.5 0 0 1 .351.146l2 2a.5.5 0 0 1-.707.707l-1.15-1.15v6.79a.5.5 0 0 1-1 0zM10.5 7a.5.5 0 0 1 .5.5v6.79l1.15-1.15a.5.5 0 0 1 .707.707l-2 2a.5.5 0 0 1-.351.146H10.5a.5.5 0 0 1-.35-.147l-2-2a.5.5 0 0 1 .707-.707l1.15 1.15V7.5a.5.5 0 0 1 .5-.5z\"/></svg>",
@@ -46,16 +34,28 @@ export const ICONS = [
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M15 3a2.996 2.996 0 0 1-5.34 1.87L5.83 7c.111.313.171.649.171 1s-.06.687-.171 1l3.83 2.13A2.996 2.996 0 0 1 15 13c0 1.66-1.34 3-3 3a2.996 2.996 0 0 1-2.829-4l-3.83-2.13A2.996 2.996 0 0 1 .001 8a2.996 2.996 0 0 1 5.34-1.87L9.171 4A2.996 2.996 0 0 1 12 0c1.66 0 3 1.34 3 3m-1 0a2 2 0 1 1-4.001.001A2 2 0 0 1 14 3M5 8a2 2 0 1 1-4.001.001A2 2 0 0 1 5 8m7 7a2 2 0 1 0 .001-4.001A2 2 0 0 0 12 15\" clip-rule=\"evenodd\"/></svg>",
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"M.9 6.55C2.52 4.39 5.1 3 8 3s5.48 1.39 7.1 3.55a.5.5 0 0 0 .8-.6A9.85 9.85 0 0 0 8 2C4.77 2 1.9 3.55.1 5.95a.5.5 0 0 0 .799.6z\"/><path fill=\"currentColor\" d=\"M2.9 8.55A6.36 6.36 0 0 1 8 6c2.09 0 3.94 1 5.1 2.55a.5.5 0 0 0 .8-.6A7.36 7.36 0 0 0 8 5C5.59 5 3.44 6.16 2.1 7.95a.5.5 0 0 0 .799.6z\"/><path fill=\"currentColor\" d=\"M8 9c-1.27 0-2.39.608-3.1 1.55a.5.5 0 0 1-.8-.6A4.87 4.87 0 0 1 8 8c1.6 0 3.01.767 3.9 1.95a.5.5 0 0 1-.799.6A3.87 3.87 0 0 0 8.001 9zm0 5a1 1 0 1 0 0-2a1 1 0 0 0 0 2\"/></svg>"
         ]],
+    ["periphery", [
+            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M4 1a2.01 2.01 0 0 0-1.74 1.01A2.5 2.5 0 0 0 0 4.5V11c0 1.66 1.34 3 3 3h10c1.66 0 3-1.34 3-3V4.5c0-1.3-.992-2.37-2.26-2.49A2 2 0 0 0 12 1h-1c-.74 0-1.39.402-1.73 1H6.73C6.384 1.402 5.738 1 5 1zm0 1a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2zm5 1H7v2.5a.5.5 0 0 1-1 0v-.768C5.706 4.902 5.364 5 5 5H4c-.364 0-.706-.097-1-.268V5.5a.5.5 0 0 1-1 0V3.09A1.5 1.5 0 0 0 1 4.5v2A1.5 1.5 0 0 0 2.5 8h11A1.5 1.5 0 0 0 15 6.5v-2c0-.653-.417-1.21-1-1.41V5.5a.5.5 0 0 1-1 0v-.768c-.294.17-.636.268-1 .268h-1c-.364 0-.706-.097-1-.268V5.5a.5.5 0 0 1-1 0zm1 0a1 1 0 0 0 1 1h1a1 1 0 0 0 0-2h-1a1 1 0 0 0-1 1m5 5.5c-.418.314-.937.5-1.5.5h-11c-.563 0-1.08-.186-1.5-.5V11c0 1.1.895 2 2 2h10c1.1 0 2-.895 2-2z\" clip-rule=\"evenodd\"/></svg>",
+            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"M12.5 0a.5.5 0 0 1 .5.5v2.26q.125.11.236.235h2.26a.5.5 0 0 1 .492.41l.008.09a.5.5 0 0 1-.5.5h-1.67c.11.313.17.65.17 1v1h1.5a.5.5 0 0 1 .5.5a.5.5 0 0 1-.5.5h-1.5v2h1.5a.5.5 0 0 1 .5.5a.5.5 0 0 1-.5.5h-1.5v1c0 .351-.06.688-.171 1h1.67a.5.5 0 0 1 .5.5a.5.5 0 0 1-.5.5h-2.26a3 3 0 0 1-.234.235L13 15.49a.5.5 0 0 1-.5.5a.5.5 0 0 1-.5-.5v-1.67c-.312.11-.649.171-1 .171h-1v1.5a.5.5 0 0 1-.5.5a.5.5 0 0 1-.5-.5v-1.5H7v1.5a.5.5 0 0 1-.5.5a.5.5 0 0 1-.5-.5v-1.5H5c-.35 0-.687-.06-1-.17v1.67a.5.5 0 0 1-.5.5a.5.5 0 0 1-.5-.5v-2.26a3 3 0 0 1-.235-.235l-2.26-.001a.5.5 0 0 1-.5-.5a.5.5 0 0 1 .5-.5h1.67a3 3 0 0 1-.171-1v-1h-1.5a.5.5 0 0 1-.5-.5a.5.5 0 0 1 .5-.5h1.5v-2h-1.5a.5.5 0 0 1-.5-.5a.5.5 0 0 1 .5-.5h1.5v-1c0-.35.06-.687.17-1H.504a.5.5 0 0 1-.5-.5a.5.5 0 0 1 .5-.5h2.26A3 3 0 0 1 3 2.759V.499a.5.5 0 0 1 .5-.5a.5.5 0 0 1 .5.5v1.67c.313-.11.65-.17 1-.17h1v-1.5a.5.5 0 0 1 .5-.5a.5.5 0 0 1 .5.5v1.5h2v-1.5a.5.5 0 0 1 .5-.5a.5.5 0 0 1 .5.5v1.5h1c.351 0 .688.06 1 .171V.5a.5.5 0 0 1 .5-.5M11 3H5a2 2 0 0 0-1.996 1.996v6A2 2 0 0 0 5 12.992h6c.53 0 1.04-.211 1.41-.586s.586-.884.586-1.41v-6A2 2 0 0 0 11 3m0 1a.997.997 0 0 1 1 1v6a.997.997 0 0 1-1 1H5a.997.997 0 0 1-1-1V5a.997.997 0 0 1 1-1zm0 1H5v6h6z\"/></svg>",
+            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M2.28 0h2.49c.098 0 .193 0 .275.005c.089.006.194.02.305.061a1 1 0 0 1 .575.575c.042.11.056.216.061.305c.005.082.005.177.005.275v7.78a2 2 0 1 0 4 0v-7.78c0-.098 0-.193.006-.275c.005-.088.019-.194.06-.305a1 1 0 0 1 .576-.575a1 1 0 0 1 .305-.06C11.019 0 11.115 0 11.213 0h2.5c.126 0 .249 0 .353.008c.114.01.249.032.385.101c.188.096.34.25.437.437c.07.136.091.271.1.385c.008.104.008.227.008.353v7.72c0 3.87-3.13 7-7 7s-7-3.13-7-7v-7.72c0-.126 0-.249.009-.353c.01-.114.031-.249.1-.385c.097-.188.25-.34.438-.437c.136-.069.27-.09.385-.1C2.032 0 2.155 0 2.28 0m-.278 1.01v.007a4 4 0 0 0-.006.288v2.7h3v-2.77c0-.115 0-.178-.003-.224v-.007h-.007A4 4 0 0 0 4.762 1h-2.47c-.148 0-.229 0-.288.005h-.006zM1.996 9V5h3v4c0 1.66 1.34 3 3 3s3-1.34 3-3V5h3v4c0 3.31-2.69 6-6 6s-6-2.69-6-6m12-5V1.3c0-.148 0-.229-.005-.288v-.007h-.007A4 4 0 0 0 13.696 1h-2.47c-.115 0-.178 0-.224.003h-.006v.006a4 4 0 0 0-.004.224v2.77h3z\" clip-rule=\"evenodd\"/></svg>",
+            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M2 7.5A1.5 1.5 0 0 1 3.5 6h9A1.5 1.5 0 0 1 14 7.5v1a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 8.5zM3.5 7a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M4 2.5a.5.5 0 0 0-1 0V4C1.34 4 0 5.34 0 7v2c0 1.66 1.34 3 3 3v1.5a.5.5 0 0 0 1 0V12h2v1.5a.5.5 0 0 0 1 0V12h2v1.5a.5.5 0 0 0 1 0V12h2v1.5a.5.5 0 0 0 1 0V12c1.66 0 3-1.34 3-3V7c0-1.66-1.34-3-3-3V2.5a.5.5 0 0 0-1 0V4h-2V2.5a.5.5 0 0 0-1 0V4H7V2.5a.5.5 0 0 0-1 0V4H4zM3 5c-1.1 0-2 .895-2 2v2c0 1.1.895 2 2 2h10c1.1 0 2-.895 2-2V7c0-1.1-.895-2-2-2z\" clip-rule=\"evenodd\"/></svg>",
+            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M11.5 1a2.5 2.5 0 0 1 2.385 1.756l1.76 6.14q.134.428.212.866q.107.352.109.738v1c0 .663-.263 1.3-.732 1.77c-.469.469-1.1.732-1.77.732h-11c-.663 0-1.3-.263-1.77-.732a2.5 2.5 0 0 1-.732-1.77v-1c0-.25.037-.499.11-.738a7 7 0 0 1 .211-.866l1.76-6.14A2.5 2.5 0 0 1 4.428 1h7.06zm1.97 8h-11a1.495 1.495 0 0 0-1.418 1.01A6 6 0 0 0 .97 11v.5a1.5 1.5 0 0 0 1.499 1.499h11a1.5 1.5 0 0 0 1.499-1.499V11q0-.499-.081-.99A1.5 1.5 0 0 0 13.468 9zm-.5 1a.997.997 0 0 1 1 1a.997.997 0 0 1-1 1a.997.997 0 0 1-1-1a.997.997 0 0 1 1-1M11.5 2H4.44a1.5 1.5 0 0 0-1.43 1.053l-1.44 5.12c.28-.11.584-.169.904-.169h11c.319 0 .624.06.904.169l-1.44-5.12A1.495 1.495 0 0 0 11.507 2z\" clip-rule=\"evenodd\"/></svg>"
+        ]],
     ["power", [
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"M15.8.195a.664.664 0 0 0-.94 0l-.293.293a.25.25 0 0 0 0 .354l.587.587a.25.25 0 0 0 .354 0l.293-.293c.26-.26.26-.68 0-.94zM13.3 1.78a.25.25 0 0 1 .354 0l.587.587a.25.25 0 0 1 0 .354l-.587.587a.25.25 0 0 1-.354 0l-.586-.587a.25.25 0 0 1 0-.354zm-1.5 1.88a.25.25 0 0 0-.354 0l-1.53 1.53a.25.25 0 0 0 0 .354l.587.587a.25.25 0 0 0 .354 0l1.53-1.53a.25.25 0 0 0 0-.354zM8.52 6.07a.994.994 0 0 0-1.41 0L3.59 9.59a1.994 1.994 0 1 0 2.82 2.82l3.52-3.52a.994.994 0 0 0 0-1.41zM2.78 13.9a.5.5 0 1 0-.554-.832c-1.31.874-.692 2.92.883 2.92h8.39a.5.5 0 0 0 0-1h-8.39c-.585 0-.815-.759-.328-1.08z\"/></svg>",
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"><!-- Icon from Ultimate free icons by Streamline - https://creativecommons.org/licenses/by/4.0/ --><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"><path d=\"M12 17.25a6 6 0 0 1-6-6v-4.5a1.5 1.5 0 0 1 1.5-1.5h9a1.5 1.5 0 0 1 1.5 1.5v4.5a6 6 0 0 1-6 6\"/><path d=\"M9 16.447v2.3a1.5 1.5 0 0 0 1.5 1.5h3a1.5 1.5 0 0 0 1.5-1.5v-2.3M9 5.25V.75m6 4.5V.75m-3 19.5v3\"/></g></svg>"
         ]],
+    ["scenarios", [
+            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M10.5 7a2.5 2.5 0 0 1-5 0a2.5 2.5 0 0 1 5 0m-1 0a1.5 1.5 0 1 1-3.001-.001A1.5 1.5 0 0 1 9.5 7\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M14 7c0 4.5-5 9-6 9s-6-4.5-6-9c0-3.31 2.69-6 6-6s6 2.69 6 6m-1 0c0 1.91-1.08 3.94-2.4 5.56c-.647.794-1.32 1.45-1.87 1.89a5.3 5.3 0 0 1-.731.507l-.052-.028a5.5 5.5 0 0 1-.68-.479c-.552-.446-1.22-1.1-1.87-1.89c-1.32-1.62-2.4-3.65-2.4-5.56c0-2.76 2.24-5 5-5s5 2.24 5 5z\" clip-rule=\"evenodd\"/></svg>",
+            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"M14.2 5.13a.5.5 0 0 1 .686.02a.5.5 0 0 1 .022.685l-4.93 5.59a2.002 2.002 0 1 1-1.353-1.355l5.57-4.95zM8 2c1.82 0 3.5.608 4.84 1.63l-.765.68A6.96 6.96 0 0 0 7.995 3c-3.87 0-7 3.13-7 7c0 1.1.895 2 2 2h1.03c0 .336.043.672.128 1h-1.16l-.154-.004a3 3 0 0 1-2.85-3c0-4.42 3.58-8 8-8zm7.7 5.9c.182.67.281 1.37.281 2.1c0 1.66-1.34 3-3 3h-1.1q.116-.45.127-.91l.08-.09h.893c1.1 0 2-.895 2-2q-.002-.6-.1-1.17z\"/><path fill=\"currentColor\" d=\"M8 5c.925 0 1.8.251 2.54.671l-.799.71A4.2 4.2 0 0 0 7.991 6c-2.26 0-4 1.81-4 3.5a.5.5 0 0 1-1 0c0-2.31 2.26-4.5 5-4.5z\"/></svg>"
+        ]],
     ["settings", [
-            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 16 16\"\r\n>\r\n  <path\r\n    fill=\"currentColor\"\r\n    fill-rule=\"evenodd\"\r\n    d=\"M5.85.146a.5.5 0 0 0-.707.707l.628.628a5.38 5.38 0 0 0-2.64 2.62l-1.33-.999a.5.5 0 1 0-.6.8l1.58 1.19a5.4 5.4 0 0 0-.141.899l-.144 2.01h-2a.5.5 0 0 0 0 1h1.93l-.001.015c-.08 1.13.18 2.2.69 3.12l-1.84.921a.5.5 0 0 0 .448.895l1.96-.982c1.02 1.24 2.57 2.03 4.31 2.03s3.29-.796 4.31-2.03l1.96.982a.5.5 0 1 0 .447-.895l-1.84-.92c.51-.916.77-1.99.69-3.12V9h1.93a.5.5 0 0 0 0-1h-2l-.144-2.01a5.4 5.4 0 0 0-.141-.899l1.58-1.19a.5.5 0 1 0-.6-.8l-1.33.999a5.4 5.4 0 0 0-2.64-2.62l.628-.628a.5.5 0 0 0-.707-.707l-.981.981Q8.59 1.001 7.985 1c-.606-.001-.79.044-1.17.127L5.834.146zm6.51 5.91l.216 3.03a4.58 4.58 0 0 1-4.58 4.91c-2.66 0-4.76-2.26-4.58-4.91l.216-3.03q.01-.145.03-.288c.191.13.434.279.73.427c.811.406 2.01.803 3.6.803s2.79-.397 3.6-.803c.296-.148.54-.297.73-.427q.02.143.03.288zm-.307-1.33a4.37 4.37 0 0 0-8.1 0q.053.044.133.104c.166.125.422.296.767.468c.689.344 1.74.697 3.15.697s2.46-.353 3.15-.697a5 5 0 0 0 .9-.572\"\r\n    clip-rule=\"evenodd\"\r\n  />\r\n</svg>",
+            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"\r\n>\r\n  <path\r\n    fill=\"currentColor\"\r\n    fill-rule=\"evenodd\"\r\n    d=\"M5.85.146a.5.5 0 0 0-.707.707l.628.628a5.38 5.38 0 0 0-2.64 2.62l-1.33-.999a.5.5 0 1 0-.6.8l1.58 1.19a5.4 5.4 0 0 0-.141.899l-.144 2.01h-2a.5.5 0 0 0 0 1h1.93l-.001.015c-.08 1.13.18 2.2.69 3.12l-1.84.921a.5.5 0 0 0 .448.895l1.96-.982c1.02 1.24 2.57 2.03 4.31 2.03s3.29-.796 4.31-2.03l1.96.982a.5.5 0 1 0 .447-.895l-1.84-.92c.51-.916.77-1.99.69-3.12V9h1.93a.5.5 0 0 0 0-1h-2l-.144-2.01a5.4 5.4 0 0 0-.141-.899l1.58-1.19a.5.5 0 1 0-.6-.8l-1.33.999a5.4 5.4 0 0 0-2.64-2.62l.628-.628a.5.5 0 0 0-.707-.707l-.981.981Q8.59 1.001 7.985 1c-.606-.001-.79.044-1.17.127L5.834.146zm6.51 5.91l.216 3.03a4.58 4.58 0 0 1-4.58 4.91c-2.66 0-4.76-2.26-4.58-4.91l.216-3.03q.01-.145.03-.288c.191.13.434.279.73.427c.811.406 2.01.803 3.6.803s2.79-.397 3.6-.803c.296-.148.54-.297.73-.427q.02.143.03.288zm-.307-1.33a4.37 4.37 0 0 0-8.1 0q.053.044.133.104c.166.125.422.296.767.468c.689.344 1.74.697 3.15.697s2.46-.353 3.15-.697a5 5 0 0 0 .9-.572\"\r\n    clip-rule=\"evenodd\"\r\n  />\r\n</svg>",
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"M8.39 1c.699 0 1.4.2 2 .7l2.1 1.8c.1.1.1.3 0 .4s-.1.3 0 .4l.51.45c.098.094.259.08.388-.05c.158-.158.2-.173.399 0l1 .911c.185.181.196.289.096.389l-1.6 1.9c-.11.139-.27.198-.4.1l-.897-.8c-.1-.1-.088-.276 0-.4s.107-.304 0-.4l-.522-.431c-.156-.121-.226-.148-.45.031c-.15.121-.251.105-.351.031c-.1-.073-.086-.062-.195-.152c-.135-.11-.238-.132-.38.021l-2.6 3.2c.3.2.3.6.1.9l-3.79 4.5c-.398.3-.798.5-1.2.5s-.698-.1-.997-.4c-.7-.6-.7-1.5-.2-2.2l3.79-4.5c.1-.1.299-.2.499-.2c.1 0 .299 0 .399.1l2.2-2.6c.399-.4.25-.9-.15-1.3l-.23-.215C7.412 3.185 6.69 3 5.89 3h-.398c-.1 0-.154-.12-.1-.2l.599-.7c.599-.7 1.5-1.1 2.4-1.1zm0-1c-1.2 0-2.4.5-3.09 1.5l-.599.7c-.299.3-.399.8-.2 1.2c.2.4.599.6.998.6h.499c.499 0 .998.2 1.3.5l.2.2l-1.8 2h-.1q-.748 0-1.2.6l-3.79 4.5c-.898 1.1-.799 2.7.3 3.6c.498.4.997.6 1.7.6c.798 0 1.5-.3 1.9-.9l3.79-4.5c.298-.4.398-.9.298-1.4l1.9-2.2c.105-.119.3-.113.3 0c0 .3.2.7.5.9l.897.8q.45.3.898.3c.4 0 .8-.2.998-.5l1.6-1.9c.5-.5.33-1.32-.2-1.8l-.898-.8q-.3-.3-.898-.3h-.1c0-.3-.2-.7-.499-.9l-2.1-1.8c-.699-.7-1.6-1-2.6-1z\"/></svg>",
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" d=\"M8.2 1H4.8c-.857 0-1.44 0-1.89.038c-.438.035-.663.1-.819.18a2 2 0 0 0-.874.874c-.08.156-.145.38-.18.819C1 3.36.999 3.94.999 4.8v5.4c0 .857.001 1.44.038 1.89c.036.438.101.663.18.819c.192.376.498.682.874.874c.156.08.381.145.819.18c.25.02.54.03.895.034c.13.36.328.702.596 1c-1.42-.002-2.17-.027-2.76-.327a3 3 0 0 1-1.31-1.31c-.327-.642-.327-1.48-.327-3.16V4.8c0-1.68 0-2.52.327-3.16A3.02 3.02 0 0 1 1.641.33c.642-.327 1.48-.327 3.16-.327h3.4c1.68 0 2.52 0 3.16.327a3.02 3.02 0 0 1 1.31 1.31c.24.47.304 1.05.321 1.99a3 3 0 0 0-.359.015a3.1 3.1 0 0 0-.664-.607l-.009-.12c-.036-.438-.1-.663-.18-.82a2 2 0 0 0-.874-.873c-.156-.08-.38-.145-.819-.18c-.45-.037-1.03-.038-1.89-.038z\"/><path fill=\"currentColor\" d=\"M8.07 3H2.5a.5.5 0 0 0 0 1h3.07a3.1 3.1 0 0 1 1.8-.362c.202-.247.441-.463.71-.638zM2.5 6h1.31a3 3 0 0 0-.183 1h-1.12a.5.5 0 0 1 0-1zm.09 3h-.094a.5.5 0 0 0 0 1v-.238q0-.395.094-.762\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M10 12c1.1 0 2-.895 2-2c0-1.1-.895-2-2-2c-1.1 0-2 .895-2 2c0 1.1.895 2 2 2m0-1a1 1 0 1 0 0-2a1 1 0 0 0 0 2\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M10.2 4h-.474c-.79 0-1.45.575-1.57 1.33a5 5 0 0 0-.211.087a1.59 1.59 0 0 0-2.05.173l-.337.337a1.594 1.594 0 0 0-.173 2.05q-.046.105-.087.211a1.596 1.596 0 0 0-1.33 1.57v.474c0 .793.577 1.45 1.33 1.58q.04.104.085.206a1.6 1.6 0 0 0 .171 2.06l.33.33c.562.562 1.44.62 2.07.168q.098.045.198.083a1.6 1.6 0 0 0 1.58 1.34h.458c.8 0 1.46-.584 1.59-1.35q.098-.039.194-.081c.628.454 1.51.398 2.08-.167l.321-.321c.565-.565.621-1.45.167-2.08q.043-.097.081-.194a1.61 1.61 0 0 0 1.35-1.59v-.458c0-.797-.581-1.46-1.34-1.58a5 5 0 0 0-.082-.2c.45-.625.394-1.5-.17-2.07l-.328-.328a1.6 1.6 0 0 0-2.06-.171a5 5 0 0 0-.206-.086a1.596 1.596 0 0 0-1.58-1.33zM9.13 5.6c0-.329.266-.595.595-.595h.474c.33 0 .598.268.598.598c0 .282.199.521.466.613q.236.081.458.191c.254.125.566.097.766-.103a.6.6 0 0 1 .847 0l.329.329a.603.603 0 0 1 0 .852c-.201.201-.23.513-.106.768q.105.217.184.447c.093.27.334.472.619.472c.333 0 .603.27.603.603v.458a.606.606 0 0 1-.606.606c-.286 0-.528.202-.622.471q-.078.226-.182.439c-.125.257-.097.572.106.774a.605.605 0 0 1 0 .857l-.321.321a.605.605 0 0 1-.857 0c-.202-.202-.517-.231-.774-.106q-.213.104-.439.182c-.27.094-.472.336-.472.622a.606.606 0 0 1-.606.606h-.458a.603.603 0 0 1-.603-.603c0-.285-.202-.527-.472-.619a4 4 0 0 1-.447-.184c-.255-.124-.567-.095-.768.105a.603.603 0 0 1-.852 0l-.329-.329a.6.6 0 0 1 0-.847c.2-.2.228-.512.103-.766a4 4 0 0 1-.191-.458c-.092-.267-.331-.466-.613-.466a.6.6 0 0 1-.598-.598v-.474c0-.329.266-.595.595-.595c.282 0 .52-.199.611-.466a4 4 0 0 1 .193-.466c.124-.252.096-.561-.103-.76a.596.596 0 0 1 0-.842l.337-.337a.596.596 0 0 1 .842 0c.199.199.508.227.76.103q.225-.11.466-.193c.267-.09.466-.329.466-.611z\" clip-rule=\"evenodd\"/></svg>",
-            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\"\r\n  ><path\r\n    fill=\"currentColor\"\r\n    d=\"M3 5.75A2.75 2.75 0 0 1 5.75 3h9.965a3.25 3.25 0 0 1 2.298.952l2.035 2.035c.61.61.952 1.437.952 2.299v9.964A2.75 2.75 0 0 1 18.25 21H5.75A2.75 2.75 0 0 1 3 18.25zM5.75 4.5c-.69 0-1.25.56-1.25 1.25v12.5c0 .69.56 1.25 1.25 1.25H6v-5.25A2.25 2.25 0 0 1 8.25 12h7.5A2.25 2.25 0 0 1 18 14.25v5.25h.25c.69 0 1.25-.56 1.25-1.25V8.286c0-.465-.184-.91-.513-1.238l-2.035-2.035a1.75 1.75 0 0 0-.952-.49V7.25a2.25 2.25 0 0 1-2.25 2.25h-4.5A2.25 2.25 0 0 1 7 7.25V4.5zm10.75 15v-5.25a.75.75 0 0 0-.75-.75h-7.5a.75.75 0 0 0-.75.75v5.25zm-8-15v2.75c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75V4.5z\"\r\n  /></svg\r\n>\r\n",
+            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"\r\n>\r\n  <path\r\n    fill=\"currentColor\"\r\n    d=\"M3 5.75A2.75 2.75 0 0 1 5.75 3h9.965a3.25 3.25 0 0 1 2.298.952l2.035 2.035c.61.61.952 1.437.952 2.299v9.964A2.75 2.75 0 0 1 18.25 21H5.75A2.75 2.75 0 0 1 3 18.25zM5.75 4.5c-.69 0-1.25.56-1.25 1.25v12.5c0 .69.56 1.25 1.25 1.25H6v-5.25A2.25 2.25 0 0 1 8.25 12h7.5A2.25 2.25 0 0 1 18 14.25v5.25h.25c.69 0 1.25-.56 1.25-1.25V8.286c0-.465-.184-.91-.513-1.238l-2.035-2.035a1.75 1.75 0 0 0-.952-.49V7.25a2.25 2.25 0 0 1-2.25 2.25h-4.5A2.25 2.25 0 0 1 7 7.25V4.5zm10.75 15v-5.25a.75.75 0 0 0-.75-.75h-7.5a.75.75 0 0 0-.75.75v5.25zm-8-15v2.75c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75V4.5z\"\r\n  />\r\n</svg>",
             "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8 5C6.34 5 5 6.34 5 8s1.34 3 3 3s3-1.34 3-3s-1.34-3-3-3M6 8a2 2 0 1 1 4.001-.001A2 2 0 0 1 6 8\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8 0C6.9 0 6 .895 6 2v.068a.46.46 0 0 1-.285.423a.45.45 0 0 1-.492-.096a1.924 1.924 0 0 0-2.72 0l-.109.11a1.924 1.924 0 0 0 0 2.72a.45.45 0 0 1 .096.491a.46.46 0 0 1-.424.285h-.068a2 2 0 1 0 0 4h.068c.183 0 .352.112.424.285a.45.45 0 0 1-.096.492a1.924 1.924 0 0 0 0 2.72l.109.11c.751.75 1.97.75 2.72 0a.45.45 0 0 1 .492-.097c.172.072.285.24.285.424v.068a2 2 0 1 0 4 0v-.068c0-.183.112-.352.285-.424a.45.45 0 0 1 .492.096c.751.751 1.97.751 2.72 0l.109-.109a1.924 1.924 0 0 0 0-2.72a.45.45 0 0 1-.096-.492a.46.46 0 0 1 .424-.285H14a2 2 0 1 0 0-4h-.067a.46.46 0 0 1-.424-.285a.45.45 0 0 1 .096-.492a1.924 1.924 0 0 0 0-2.72l-.109-.109a1.924 1.924 0 0 0-2.72 0a.45.45 0 0 1-.492.096a.46.46 0 0 1-.285-.424V2c0-1.1-.895-2-2-2M7 2a1 1 0 0 1 2 0v.068c0 .59.359 1.12.902 1.35c.54.223 1.17.102 1.58-.314a.917.917 0 0 1 1.3 0l.109.11a.93.93 0 0 1 0 1.31a1.45 1.45 0 0 0-.313 1.58c.225.543.756.902 1.35.902h.067a1 1 0 0 1 0 2h-.067a1.47 1.47 0 0 0-1.35.902c-.224.54-.103 1.17.313 1.58c.36.36.36.945 0 1.3l-.109.109a.917.917 0 0 1-1.3 0a1.45 1.45 0 0 0-1.58-.313A1.46 1.46 0 0 0 9 13.934V14a1 1 0 0 1-2 0v-.067a1.47 1.47 0 0 0-.902-1.35a1.45 1.45 0 0 0-1.58.313a.917.917 0 0 1-1.3 0l-.109-.11a.93.93 0 0 1 0-1.31a1.45 1.45 0 0 0 .313-1.58a1.46 1.46 0 0 0-1.35-.901h-.068a1 1 0 0 1 0-2h.068a1.47 1.47 0 0 0 1.35-.902c.224-.54.103-1.17-.313-1.58a.917.917 0 0 1 0-1.3l.109-.11a.93.93 0 0 1 1.31 0a1.45 1.45 0 0 0 1.58.314c.543-.225.902-.756.902-1.35V2z\" clip-rule=\"evenodd\"/></svg>",
-            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M15.1 3.12a1 1 0 0 1 .706.71c.452 1.71.032 3.62-1.32 4.97a5.14 5.14 0 0 1-4.87 1.36a.34.34 0 0 0-.148-.006l-.025.008l-5.08 5.08a2.563 2.563 0 0 1-3.62 0a2.563 2.563 0 0 1 0-3.62l5.08-5.08l.008-.025a.34.34 0 0 0-.006-.148a5.16 5.16 0 0 1 1.366-4.88a5.11 5.11 0 0 1 4.97-1.32a1 1 0 0 1 .452 1.674l-2.1 2.1l.383 1.15l1.15.383l2.1-2.1a1 1 0 0 1 .968-.258zM5.81 6.55l.001-.002zm3.62 3.62l.002-.001zm4.34-2.07a4.16 4.16 0 0 1-3.93 1.1c-.396-.096-.827-.023-1.12.265l-5.08 5.08c-.607.608-1.6.608-2.21 0a1.57 1.57 0 0 1 0-2.21l5.08-5.08c.288-.288.361-.721.265-1.12a4.2 4.2 0 0 1-.043-1.78a4.2 4.2 0 0 1 1.14-2.15c.76-.76 1.74-1.16 2.73-1.2a4.3 4.3 0 0 1 1.28.137l-2.1 2.1a1 1 0 0 0-.242 1.02l.383 1.15c.1.299.334.533.632.632l1.15.383a.99.99 0 0 0 1.02-.242l2.1-2.1c.11.418.156.849.137 1.28a4.1 4.1 0 0 1-1.2 2.73z\" clip-rule=\"evenodd\"/></svg>"
+            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M15.1 3.12a1 1 0 0 1 .706.71c.452 1.71.032 3.62-1.32 4.97a5.14 5.14 0 0 1-4.87 1.36a.34.34 0 0 0-.148-.006l-.025.008l-5.08 5.08a2.563 2.563 0 0 1-3.62 0a2.563 2.563 0 0 1 0-3.62l5.08-5.08l.008-.025a.34.34 0 0 0-.006-.148a5.16 5.16 0 0 1 1.366-4.88a5.11 5.11 0 0 1 4.97-1.32a1 1 0 0 1 .452 1.674l-2.1 2.1l.383 1.15l1.15.383l2.1-2.1a1 1 0 0 1 .968-.258zM5.81 6.55l.001-.002zm3.62 3.62l.002-.001zm4.34-2.07a4.16 4.16 0 0 1-3.93 1.1c-.396-.096-.827-.023-1.12.265l-5.08 5.08c-.607.608-1.6.608-2.21 0a1.57 1.57 0 0 1 0-2.21l5.08-5.08c.288-.288.361-.721.265-1.12a4.2 4.2 0 0 1-.043-1.78a4.2 4.2 0 0 1 1.14-2.15c.76-.76 1.74-1.16 2.73-1.2a4.3 4.3 0 0 1 1.28.137l-2.1 2.1a1 1 0 0 0-.242 1.02l.383 1.15c.1.299.334.533.632.632l1.15.383a.99.99 0 0 0 1.02-.242l2.1-2.1c.11.418.156.849.137 1.28a4.1 4.1 0 0 1-1.2 2.73z\" clip-rule=\"evenodd\"/></svg>",
+            "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\"><!-- Icon from Qlementine Icons by Olivier Cléro - https://github.com/oclero/qlementine-icons/blob/master/LICENSE --><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"m2.56 3.42l-1.55 9c-.045.263.165.577.546.577h11.3a.54.54 0 0 0 .546-.423l1.55-9c.045-.263-.165-.577-.546-.577h-11.3a.54.54 0 0 0-.546.423M.02 12.25C-.138 13.164.592 14 1.55 14h11.3c.759 0 1.41-.53 1.53-1.25l1.55-9C16.088 2.836 15.358 2 14.4 2H3.1c-.759 0-1.41.53-1.53 1.25z\" clip-rule=\"evenodd\"/><path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"m7 11l.167-1h5L12 11zM5.09 4.53a.746.746 0 0 0-1.05-.117a.746.746 0 0 0-.117 1.05l1.54 1.93l-2.44 2.03a.754.754 0 0 0-.096 1.06a.754.754 0 0 0 1.06.096l3-2.5a.745.745 0 0 0 .106-1.04l-2-2.5z\" clip-rule=\"evenodd\"/></svg>"
         ]]
 ];

package/dist/locales/translations.js

@@ -119,8 +119,9 @@ const translations = {
         'constructor.props.table.columns.truncated': 'Скрыть',
         'constructor.props.table.columns.alt': 'Альтернативное название иконок',
         'constructor.props.table.columns.class': 'Стили иконки',
-        'constructor.props.table.columns.image.width': 'Ширина иконки',
-        'constructor.props.table.columns.image.height': 'Высота иконки',
+        'constructor.props.table.columns.defaultIcon': 'Иконка по умолчанию',
+        'constructor.props.table.columns.image.width': 'Ширина иконки, rem',
+        'constructor.props.table.columns.image.height': 'Высота иконки, rem',
         'constructor.props.table.deletecolumn': 'Удалить колонку',
         'constructor.props.table.deletebutton': 'Удалить кнопку',
         'constructor.props.table.addaction': 'Добавить кнопку',
@@ -128,9 +129,9 @@ const translations = {
         'constructor.props.table.keys.info': 'Ключи таблицы, значения которых будут возвращаться',
         'constructor.props.icon.access': 'Доступ',
         'constructor.props.icon.common': 'Общее',
-        'constructor.props.icon.control': 'Управление',
-        'constructor.props.icon.electronic': 'Электроника',
-        'constructor.props.icon.image': 'Изображение',
+        'constructor.props.icon.scenarios': 'Сценарии',
+        'constructor.props.icon.periphery': 'Периферия',
+        'constructor.props.icon.media': 'Медиа',
         'constructor.props.icon.info': 'Информация',
         'constructor.props.icon.network': 'Сеть',
         'constructor.props.icon.power': 'Питание',

package/dist/types.d.ts

@@ -227,12 +227,12 @@ export interface ITableHeader<T extends object> {
         onClick?: (row: T) => void;
     }[];
     image?: {
-        src: string | ((row: T) => string);
+        src?: string | ((row: T) => string);
         alt?: string;
         class?: string;
         width?: string;
         height?: string;
-        defaultIcon?: ConstructorOfATypedSvelteComponent;
+        defaultIcon?: ConstructorOfATypedSvelteComponent | string;
     };
 }
 export interface ITableProps<T extends object> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poe-svelte-ui-lib",
-  "version": "1.1.21",
+  "version": "1.1.22",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -9,7 +9,7 @@
     "preview": "vite preview",
     "prepack": "svelte-kit sync && svelte-package && publint",
     "CheckUpdate": "npx npm-check-updates -u && npm install",
-    "UpdateIconsLib": "tsx src/lib/Accordion/IconsLib/iconsLib.ts"
+    "UpdateIconsLib": "tsx src/lib/IconsLib/iconsLib.ts"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -43,12 +43,12 @@
     "typescript": "^5.9.3"
   },
   "devDependencies": {
-    "@sveltejs/kit": "^2.48.0",
+    "@sveltejs/kit": "^2.48.4",
     "@sveltejs/package": "^2.5.4",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
-    "@types/node": "^24.9.1",
+    "@types/node": "^24.10.0",
     "publint": "^0.3.15",
-    "svelte": "^5.42.2",
+    "svelte": "^5.43.3",
     "svelte-preprocess": "^6.0.3",
     "vite": "^7.1.12",
     "vite-plugin-compression": "^0.5.1"