poe-svelte-ui-lib 1.9.3 → 1.9.5

package/dist/Button/ButtonProps.svelte

@@ -64,6 +64,9 @@
     help={{ info: $t("constructor.props.argument.info"), autocomplete: "on", regExp: /^[a-zA-Z0-9\-_]{0,32}$/ }}
     onUpdate={(value) => onPropertyChange({ eventHandler: { Argument: value as string } })}
   />
+{/snippet}
+
+{#snippet ButtonVariables()}
   {#if (component.eventHandler.Argument !== "Save" && component.eventHandler.Argument !== "NoSave") || Header.value === "SET"}
     <UI.Input
       label={{ name: $t("constructor.props.value") }}
@@ -73,9 +76,6 @@
       onUpdate={(value) => onPropertyChange({ eventHandler: { Value: value as string } })}
     />
   {/if}
-{/snippet}
-
-{#snippet ButtonVariables()}
   <UI.Input
     label={{ name: $t("constructor.props.variables") }}
     disabled={hasValue}
@@ -147,11 +147,11 @@
   <div class="relative flex flex-row items-start justify-center">
     <!-- Сообщение для отправки в ws по нажатию кнопки -->
     <div class="flex w-1/3 flex-col px-2">
+      <CommonSnippets snippet="Access" {component} {onPropertyChange} />
       {@render ButtonHeaderArgument()}
     </div>
     <div class="flex w-1/3 flex-col px-2">
       {@render ButtonVariables()}
-      <CommonSnippets snippet="Access" {component} {onPropertyChange} />
       <CommonSnippets
         snippet="IconsLib"
         initialValue={{

package/dist/ColorPicker/ColorPickerProps.svelte

@@ -60,11 +60,11 @@
 {#if forConstructor}
   <div class="relative flex flex-row items-start justify-center">
     <div class="flex w-1/3 flex-col px-2">
-      <CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
-      <CommonSnippets snippet="EventHandlerArgument" {component} {onPropertyChange} />
+      <CommonSnippets snippet="Access" {component} {onPropertyChange} />
     </div>
     <div class="flex w-1/3 flex-col px-2">
-      <CommonSnippets snippet="Access" {component} {onPropertyChange} />
+      <CommonSnippets snippet="Variable" {VARIABLE_OPTIONS} {component} {onPropertyChange} />
+      <CommonSnippets snippet="EventHandlerArgument" {component} {onPropertyChange} />
     </div>
     <div class="flex w-1/3 flex-col px-2">
       <CommonSnippets snippet="Label" {component} {onPropertyChange} />

package/dist/CommonSnippets.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import * as UI from "./"
   import { t } from "./locales/i18n"
-  import { ICONS } from "./icons"
   import CrossIcon from "./libIcons/CrossIcon.svelte"
   import { optionsStore } from "./options"
   import { updateProperty } from "./types"
@@ -34,6 +33,7 @@
     | "EventHandlerArgument"
     | "IconsLib"
     | "Readonly"
+    | "MinMaxStep"
     | ""
 
   let showIconLib: boolean = $state(false)
@@ -204,6 +204,38 @@
   />
 {/snippet}
 
+{#snippet MinMaxStep(initialValue: {
+  number: { minNum: number; maxNum: number; step: number }
+  bitMode: boolean
+  updateProperty: (value: number, property: string) => {}
+})}
+  <div class="flex">
+    <UI.Input
+      label={{ name: $t("constructor.props.min") }}
+      value={initialValue.number.minNum}
+      type="number"
+      readonly={initialValue.bitMode}
+      onUpdate={(value) => initialValue.updateProperty(value as number, "number.minNum")}
+    />
+    <UI.Input
+      label={{ name: $t("constructor.props.max") }}
+      value={initialValue.number.maxNum}
+      type="number"
+      readonly={initialValue.bitMode}
+      onUpdate={(value) => initialValue.updateProperty(value as number, "number.maxNum")}
+    />
+    {#if component.type !== "ProgressBar"}
+      <UI.Input
+        label={{ name: $t("constructor.props.step") }}
+        value={initialValue.number.step}
+        type="number"
+        readonly={initialValue.bitMode}
+        onUpdate={(value) => initialValue.updateProperty(value as number, "number.step")}
+      />
+    {/if}
+  </div>
+{/snippet}
+
 {#snippet IconsLib(initialValue: {
   name: string
   icons: { array: [string, string[]][]; selectArray?: false }
@@ -271,4 +303,6 @@
   {@render Readonly()}
 {:else if snippet === "IconsLib"}
   {@render IconsLib(initialValue)}
+{:else if snippet === "MinMaxStep"}
+  {@render MinMaxStep(initialValue)}
 {/if}

package/dist/CommonSnippets.svelte.d.ts

@@ -1,5 +1,5 @@
 import * as UI from "./";
-type snippetNames = "Variable" | "Access" | "Colors" | "Label" | "LabelAlign" | "LabelClass" | "Identificator" | "WrapperClass" | "Disabled" | "EventHandlerArgument" | "IconsLib" | "Readonly" | "";
+type snippetNames = "Variable" | "Access" | "Colors" | "Label" | "LabelAlign" | "LabelClass" | "Identificator" | "WrapperClass" | "Disabled" | "EventHandlerArgument" | "IconsLib" | "Readonly" | "MinMaxStep" | "";
 type $$ComponentProps = {
     snippet: snippetNames;
     component: UI.UIComponent;

package/dist/IconsCatalog/battery/battery1.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="M4 18q-1.25 0-2.125-.875T1 15V9q0-1.25.875-2.125T4 6h13.5q1.25 0 2.125.875T20.5 9v6q0 1.25-.875 2.125T17.5 18zm0-2h13.5q.425 0 .713-.288T18.5 15V9q0-.425-.288-.712T17.5 8H4q-.425 0-.712.288T3 9v6q0 .425.288.713T4 16m17.5-1.5v-5h.5q.425 0 .713.288T23 10.5v3q0 .425-.288.713T22 14.5zM3 16V8z"/></svg>

package/dist/IconsCatalog/battery/battery2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="M4 18q-1.25 0-2.125-.875T1 15V9q0-1.25.875-2.125T4 6h13.5q1.25 0 2.125.875T20.5 9v6q0 1.25-.875 2.125T17.5 18zm0-2h13.5q.425 0 .713-.288T18.5 15V9q0-.425-.288-.712T17.5 8H4q-.425 0-.712.288T3 9v6q0 .425.288.713T4 16m17.5-1.5v-5h.5q.425 0 .713.288T23 10.5v3q0 .425-.288.713T22 14.5zM5 15q-.425 0-.712-.288T4 14v-4q0-.425.288-.712T5 9t.713.288T6 10v4q0 .425-.288.713T5 15"/></svg>

package/dist/IconsCatalog/battery/battery3.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="M4 18q-1.25 0-2.125-.875T1 15V9q0-1.25.875-2.125T4 6h13.5q1.25 0 2.125.875T20.5 9v6q0 1.25-.875 2.125T17.5 18zm0-2h13.5q.425 0 .713-.288T18.5 15V9q0-.425-.288-.712T17.5 8H4q-.425 0-.712.288T3 9v6q0 .425.288.713T4 16m17.5-1.5v-5h.5q.425 0 .713.288T23 10.5v3q0 .425-.288.713T22 14.5zM4 14v-4q0-.425.288-.712T5 9h4q.425 0 .713.288T10 10v4q0 .425-.288.713T9 15H5q-.425 0-.712-.288T4 14"/></svg>

package/dist/IconsCatalog/battery/battery4.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="M4 18q-1.25 0-2.125-.875T1 15V9q0-1.25.875-2.125T4 6h13.5q1.25 0 2.125.875T20.5 9v6q0 1.25-.875 2.125T17.5 18zm0-2h13.5q.425 0 .713-.288T18.5 15V9q0-.425-.288-.712T17.5 8H4q-.425 0-.712.288T3 9v6q0 .425.288.713T4 16m17.5-1.5v-5h.5q.425 0 .713.288T23 10.5v3q0 .425-.288.713T22 14.5zM4 14v-4q0-.425.288-.712T5 9h8q.425 0 .713.288T14 10v4q0 .425-.288.713T13 15H5q-.425 0-.712-.288T4 14"/></svg>

package/dist/IconsCatalog/battery/battery5.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="M4 18q-1.25 0-2.125-.875T1 15V9q0-1.25.875-2.125T4 6h13.5q1.25 0 2.125.875T20.5 9v6q0 1.25-.875 2.125T17.5 18zm0-2h13.5q.425 0 .713-.288T18.5 15V9q0-.425-.288-.712T17.5 8H4q-.425 0-.712.288T3 9v6q0 .425.288.713T4 16m17.5-1.5v-5h.5q.425 0 .713.288T23 10.5v3q0 .425-.288.713T22 14.5zM4 14v-4q0-.425.288-.712T5 9h11.5q.425 0 .713.288T17.5 10v4q0 .425-.288.713T16.5 15H5q-.425 0-.712-.288T4 14"/></svg>

package/dist/IconsCatalog/bulb/bulb1.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M1 11h3v2H1zm18.1-7.5L17 5.6L18.4 7l2.1-2.1zM11 1h2v3h-2zM4.9 3.5L3.5 4.9L5.6 7L7 5.6zM10 22c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-1h-4zm2-16c-3.3 0-6 2.7-6 6c0 2.2 1.2 4.2 3 5.2V19c0 .6.4 1 1 1h4c.6 0 1-.4 1-1v-1.8c1.8-1 3-3 3-5.2c0-3.3-2.7-6-6-6m1 9.9V17h-2v-1.1c-1.7-.4-3-2-3-3.9c0-2.2 1.8-4 4-4s4 1.8 4 4c0 1.9-1.3 3.4-3 3.9m7-4.9h3v2h-3z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M20 11h3v2h-3zM1 11h3v2H1zM13 1v3h-2V1zM4.92 3.5l2.13 2.14l-1.42 1.41L3.5 4.93zm12.03 2.13l2.12-2.13l1.43 1.43l-2.13 2.12zM12 6a6 6 0 0 1 6 6c0 2.22-1.21 4.16-3 5.2V19a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-1.8c-1.79-1.04-3-2.98-3-5.2a6 6 0 0 1 6-6m2 15v1a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-1zm-3-3h2v-2.13c1.73-.44 3-2.01 3-3.87a4 4 0 0 0-4-4a4 4 0 0 0-4 4c0 1.86 1.27 3.43 3 3.87z"/></svg>

package/dist/IconsCatalog/common.binocular.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M.75 18a4.5 4.5 0 1 0 9 0a4.5 4.5 0 0 0-9 0"/><path d="M9.75 18V4.125a2.625 2.625 0 0 0-5.156-.7L.911 16.805M14.25 18a4.501 4.501 0 0 0 8.658 1.722a4.501 4.501 0 0 0-8.316-3.444A4.5 4.5 0 0 0 14.25 18"/><path d="M14.25 18V4.125a2.625 2.625 0 0 1 5.156-.7l3.683 13.377"/><path d="M9.75 9h4.5v3h-4.5z"/></g></svg>

package/dist/IconsCatalog/info.sinewave.svg

@@ -0,0 +1 @@
+<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="M3 12c0-3.857 1.286-9 3.857-9c3.857 0 6.429 18 10.286 18C19.714 21 21 15.857 21 12M3 12h2m14 0h2m-5.5 0h1m-9 0h1"/></svg>

package/dist/IconsCatalog/media.display.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" d="M0 4s0-2 2-2h12s2 0 2 2v6s0 2-2 2h-4q0 1 .25 1.5H11a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1h.75Q6 13 6 12H2s-2 0-2-2zm1.398-.855a.76.76 0 0 0-.254.302A1.5 1.5 0 0 0 1 4.01V10c0 .325.078.502.145.602q.105.156.302.254a1.5 1.5 0 0 0 .538.143L2.01 11H14c.325 0 .502-.078.602-.145a.76.76 0 0 0 .254-.302a1.5 1.5 0 0 0 .143-.538L15 9.99V4c0-.325-.078-.502-.145-.602a.76.76 0 0 0-.302-.254A1.5 1.5 0 0 0 13.99 3H2c-.325 0-.502.078-.602.145"/></svg>

package/dist/IconsCatalog/media.soundwaves.svg

@@ -0,0 +1 @@
+<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="M2.75 9.938v4.124m3.7-7.217v10.31m3.7-13.918v17.526m3.7-13.631v9.736m3.7-7.302v4.868m3.7-3.465v2.062"/></svg>

package/dist/IconsCatalog/periphery.magneticfield.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M12 3v18m6-14c-.633-1.255-1.538-2-2.5-2c-1.933 0-3.5 3.134-3.5 7s1.567 7 3.5 7s3.5-3.134 3.5-7v-1M6 7c.633-1.255 1.538-2 2.5-2c1.933 0 3.5 3.134 3.5 7s-1.567 7-3.5 7S5 15.866 5 12v-1"/><path d="m3 13l2-2l2 2m10 0l2-2l2 2"/></g></svg>

package/dist/IconsCatalog/power.flash.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 14 14"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8 .5v5h3.5l-5.5 8v-5H2.5L8 .5z"/></svg>

package/dist/IconsCatalog/power.onoff.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M12 3c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1s1-.45 1-1V4c0-.55-.45-1-1-1m5.14 2.86a.99.99 0 0 0-.01 1.39c1.13 1.2 1.83 2.8 1.87 4.57c.09 3.83-3.08 7.13-6.91 7.17A6.98 6.98 0 0 1 5 12c0-1.84.71-3.51 1.87-4.76c.37-.39.37-1-.01-1.38a.993.993 0 0 0-1.43.02A8.92 8.92 0 0 0 3 11.74c-.14 4.88 3.83 9.1 8.71 9.25c5.1.16 9.29-3.93 9.29-9c0-2.37-.92-4.51-2.42-6.11c-.38-.41-1.04-.42-1.44-.02"/></svg>

package/dist/IconsCatalog/scenarios.airplane.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><path fill="currentColor" d="M8 0c-.787 0-1.292.592-1.572 1.151A4.35 4.35 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272l.313.937a.5.5 0 0 0 .948 0l.405-1.214l2.21-.369l.375 2.253l-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318l.375-2.253l2.21.369l.405 1.214a.5.5 0 0 0 .948 0l.313-.937l1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0M7 3c0-.432.11-.979.322-1.401C7.542 1.159 7.787 1 8 1s.458.158.678.599C8.889 2.02 9 2.569 9 3v4a.5.5 0 0 0 .276.447l5.448 2.724a.5.5 0 0 1 .276.447v.792l-5.418-.903a.5.5 0 0 0-.575.41l-.5 3a.5.5 0 0 0 .14.437l.646.646H6.707l.647-.646a.5.5 0 0 0 .14-.436l-.5-3a.5.5 0 0 0-.576-.411L1 11.41v-.792a.5.5 0 0 1 .276-.447l5.448-2.724A.5.5 0 0 0 7 7z"/></svg>

package/dist/IconsCatalog/scenarios.circlecompass.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M10 10L5 22m9-12l5 12M12 4V2"/><circle cx="12" cy="7" r="3"/><path stroke-linecap="round" d="M3 13c1.99 3.024 5.28 5 9 5s7.01-1.976 9-5"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 17v2"/></g></svg>

package/dist/IconsCatalog/scenarios.compass.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32" d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192s192-86 192-192Z"/><path fill="currentColor" d="m350.67 150.93l-117.2 46.88a64 64 0 0 0-35.66 35.66l-46.88 117.2a8 8 0 0 0 10.4 10.4l117.2-46.88a64 64 0 0 0 35.66-35.66l46.88-117.2a8 8 0 0 0-10.4-10.4M256 280a24 24 0 1 1 24-24a24 24 0 0 1-24 24"/></svg>

package/dist/IconsCatalog/scenarios.engine.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path fill="currentColor" d="M240 104h-12.69L192 68.69A15.86 15.86 0 0 0 180.69 64H140V40h24a8 8 0 0 0 0-16h-64a8 8 0 0 0 0 16h24v24H64a16 16 0 0 0-16 16v52H24v-24a8 8 0 0 0-16 0v64a8 8 0 0 0 16 0v-24h24v20.69A15.86 15.86 0 0 0 52.69 180L92 219.31a15.86 15.86 0 0 0 11.31 4.69h77.38a15.86 15.86 0 0 0 11.31-4.69L227.31 184H240a16 16 0 0 0 16-16v-48a16 16 0 0 0-16-16m0 64h-16a8 8 0 0 0-5.66 2.34L180.69 208h-77.38L64 168.69V80h116.69l37.65 37.66A8 8 0 0 0 224 120h16Z"/></svg>

package/dist/Joystick/Joystick.svelte

@@ -9,8 +9,8 @@
     value = $bindable([0, 0, 0, 0]),
     readonly = false,
     axes = [
-      { name: "Roll", minNum: -360, maxNum: 360 },
       { name: "Pitch", minNum: -360, maxNum: 360 },
+      { name: "Roll", minNum: -360, maxNum: 360 },
       { name: "Yaw", minNum: -360, maxNum: 360 },
     ],
     buttonIcon,
@@ -33,7 +33,7 @@
       mainButton: false,
       onClick: () => {
         updateValue(2, +sensitivity)
-        updateValue(1, -sensitivity)
+        updateValue(0, -sensitivity)
         onUpdate(value)
       },
     },
@@ -42,7 +42,7 @@
       angle: 122,
       mainButton: true,
       onClick: () => {
-        updateValue(1, -sensitivity)
+        updateValue(0, -sensitivity)
         onUpdate(value)
       },
     },
@@ -52,7 +52,7 @@
       mainButton: false,
       onClick: () => {
         updateValue(2, -sensitivity)
-        updateValue(1, -sensitivity)
+        updateValue(0, -sensitivity)
         onUpdate(value)
       },
     },
@@ -70,7 +70,7 @@
       angle: 239,
       mainButton: false,
       onClick: () => {
-        updateValue(1, +sensitivity)
+        updateValue(0, +sensitivity)
         updateValue(2, -sensitivity)
         onUpdate(value)
       },
@@ -80,7 +80,7 @@
       angle: 301,
       mainButton: true,
       onClick: () => {
-        updateValue(1, +sensitivity)
+        updateValue(0, +sensitivity)
         onUpdate(value)
       },
     },
@@ -89,7 +89,7 @@
       angle: 328,
       mainButton: false,
       onClick: () => {
-        updateValue(1, +sensitivity)
+        updateValue(0, +sensitivity)
         updateValue(2, +sensitivity)
         onUpdate(value)
       },
@@ -97,7 +97,7 @@
   ]
 
   const updateValue = (index: number, delta: number) => {
-    const axis = axes[axes.length == 2 ? index - 1 : index]
+    const axis = axes[axes.length == 2 && index == 2 ? index - 1 : index]
     const min = axis.minNum ?? -360
     const max = axis.maxNum ?? 360
 
@@ -140,13 +140,10 @@
               title=""
             >
               <span
-                class="relative flex w-full origin-left items-center justify-center pl-[60%] pointer-events-auto {direction.mainButton ? 'bg-(--bg-color)' : ''}
-            "
-                style=" height: {direction.mainButton
-                  ? 2 * 5 * Math.sin((Math.PI * 65) / 360)
-                  : 2 * 5 * Math.sin((Math.PI * 25) / 360)}rem; transform: rotate({angle *
-                  index}deg); clip-path: polygon(100% 0, {clipPos}% 0, 0 50%, {clipPos}% 100%, 100% 100%)
-              "
+                class="relative flex w-full origin-left items-center justify-center pl-[60%] pointer-events-auto
+                {direction.mainButton ? 'bg-(--bg-color)' : ''}"
+                style=" height: {direction.mainButton ? 2 * 5 * Math.sin((Math.PI * 65) / 360) : 2 * 5 * Math.sin((Math.PI * 25) / 360)}rem; 
+                  transform: rotate({angle * index}deg); clip-path: polygon(100% 0, {clipPos}% 0, 0 50%, {clipPos}% 100%, 100% 100%)"
                 role="application"
                 onmouseenter={(e) => (e.currentTarget.style.backgroundColor = "color-mix(in srgb, var(--bg-color), var(--shadow-color) 20%)")}
                 onmouseleave={(e) => (e.currentTarget.style.backgroundColor = "var(--bg-color)")}
@@ -213,12 +210,12 @@
             class="btn-segment h-full cursor-pointer rounded-l-full px-3.5"
             title=""
             onclick={() => {
-              if (value[0] - sensitivity <= (axes[0].minNum ?? -360)) {
-                value[0] = axes[0].minNum ?? -360
+              if (value[1] - sensitivity <= (axes[1].minNum ?? -360)) {
+                value[1] = axes[1].minNum ?? -360
                 onUpdate(value)
                 return
               }
-              value[0] = roundToClean(value[0] - sensitivity)
+              value[1] = roundToClean(value[1] - sensitivity)
               onUpdate(value)
             }}
             onmouseenter={(e) => (e.currentTarget.style.backgroundColor = "color-mix(in srgb, var(--bg-color), var(--shadow-color) 30%)")}
@@ -237,12 +234,12 @@
             class="btn-segment h-full cursor-pointer rounded-r-full px-3.5"
             title=""
             onclick={() => {
-              if (value[0] + sensitivity >= (axes[0].maxNum ?? 360)) {
-                value[0] = axes[0].maxNum ?? 360
+              if (value[1] + sensitivity >= (axes[1].maxNum ?? 360)) {
+                value[1] = axes[1].maxNum ?? 360
                 onUpdate(value)
                 return
               }
-              value[0] = roundToClean(value[0] + sensitivity)
+              value[1] = roundToClean(value[1] + sensitivity)
               onUpdate(value)
             }}
             onmouseenter={(e) => (e.currentTarget.style.backgroundColor = "color-mix(in srgb, var(--bg-color), var(--shadow-color) 30%)")}
@@ -305,7 +302,7 @@
               [&::-webkit-inner-spin-button]:hidden
               [&::-webkit-outer-spin-button]:hidden`}
             style="background: color-mix(in srgb, var(--bg-color), var(--back-color) 70%);"
-            value={value[axes.length == 3 ? index : index + 1]}
+            value={value[axes.length == 2 && index == 1 ? index + 1 : index]}
             id={`${id}-${crypto.randomUUID().slice(0, 6)}`}
             readonly
           />

package/dist/ProgressBar/ProgressBarProps.svelte

@@ -20,6 +20,7 @@
 
   const DeviceVariables = getContext<{ id: string; value: string; name: string }[]>("DeviceVariables")
   let VARIABLE_OPTIONS = $derived(DeviceVariables && Array.isArray(DeviceVariables) ? DeviceVariables : [])
+  let itemsContainer: HTMLDivElement | null = $state(null)
 </script>
 
 {#snippet ProgressBarType()}
@@ -34,37 +35,6 @@
   />
 {/snippet}
 
-{#snippet ProgressBarMinMax()}
-  <div class="flex">
-    <UI.Input
-      label={{ name: $t("constructor.props.min") }}
-      value={component.properties.number.minNum as number}
-      type="number"
-      readonly={component.properties.bitMode}
-      onUpdate={(value) => {
-        updateProperty("number.minNum", Number(value), component, onPropertyChange)
-        let newValue = component.properties.value?.map((pr: UI.IReceivingDataObject) => {
-          return { ...pr, Value: component.properties.number.minNum + (component.properties.number.maxNum - component.properties.number.minNum) / 2 }
-        })
-        updateProperty("value", newValue, component, onPropertyChange)
-      }}
-    />
-    <UI.Input
-      label={{ name: $t("constructor.props.max") }}
-      value={component.properties.number.maxNum as number}
-      type="number"
-      readonly={component.properties.bitMode}
-      onUpdate={(value) => {
-        updateProperty("number.maxNum", Number(value), component, onPropertyChange)
-        let newValue = component.properties.value?.map((pr: UI.IReceivingDataObject) => {
-          return { ...pr, Value: component.properties.number.minNum + (component.properties.number.maxNum - component.properties.number.minNum) / 2 }
-        })
-        updateProperty("value", newValue, component, onPropertyChange)
-      }}
-    />
-  </div>
-{/snippet}
-
 {#snippet ProgressBarUnits()}
   <UI.Input
     label={{ name: $t("constructor.props.units") }}
@@ -74,7 +44,7 @@
 {/snippet}
 
 {#snippet ProgressBarOptions()}
-  <div class="space-y-4">
+  <div class="space-y-4" bind:this={itemsContainer}>
     <div class="m-0 flex items-center justify-center gap-2">
       <h4>{$t("constructor.props.progressbar.title")}</h4>
       <UI.Button
@@ -100,10 +70,19 @@
     </div>
 
     {#each component.properties.items || [] as progress, index}
-      <div class="m-0 flex items-end w-full gap-1">
+      <div id="item-{index}" class="m-0 flex items-end w-full gap-1">
+        <UI.Dragging
+          wrapperClass="w-9"
+          container={itemsContainer}
+          array={component.properties.items}
+          elementIndex={index}
+          onUpdate={(updatedArray) => {
+            updateProperty("items", updatedArray, component, onPropertyChange)
+          }}
+        />
         <UI.Input
           label={{ name: $t("constructor.props.optionname") }}
-          wrapperClass="w-2/5"
+          wrapperClass="w-1/4"
           value={progress.name}
           onUpdate={(value) => {
             const progresses = [...(component.properties?.items || [])]
@@ -148,7 +127,7 @@
           />
           <UI.Input
             label={{ name: $t("constructor.props.optionclass") }}
-            wrapperClass="w-1/2"
+            wrapperClass="w-1/3"
             value={progress.class}
             onUpdate={(value) => {
               const progresses = [...(component.properties?.items || [])]
@@ -169,6 +148,7 @@
         />
       </div>
     {/each}
+    <div id="item-{component.properties.items.length}" class="min-h-4"></div>
   </div>
 {/snippet}
 
@@ -179,7 +159,22 @@
       {@render ProgressBarType()}
     </div>
     <div class="flex w-1/3 flex-col px-2">
-      {@render ProgressBarMinMax()}
+      <CommonSnippets
+        snippet="MinMaxStep"
+        initialValue={{
+          number: component.properties.number,
+          bitMode: component.properties.bitMode,
+          updateProperty: (value: number, property: string) => {
+            updateProperty(property, Number(value), component, onPropertyChange)
+            let newValue = component.properties.value?.map((pr: UI.IReceivingDataObject) => {
+              return { ...pr, Value: component.properties.number.minNum + (component.properties.number.maxNum - component.properties.number.minNum) / 2 }
+            })
+            updateProperty("value", newValue, component, onPropertyChange)
+          },
+        }}
+        {component}
+        {onPropertyChange}
+      />
       {@render ProgressBarUnits()}
     </div>
     <div class="flex w-1/3 flex-col px-2">
@@ -194,7 +189,22 @@
     </div>
     <div class="flex w-1/3 flex-col px-2">
       <CommonSnippets snippet="WrapperClass" {component} {onPropertyChange} />
-      {@render ProgressBarMinMax()}
+      <CommonSnippets
+        snippet="MinMaxStep"
+        initialValue={{
+          number: component.properties.number,
+          bitMode: component.properties.bitMode,
+          updateProperty: (value: number, property: string) => {
+            updateProperty(property, Number(value), component, onPropertyChange)
+            let newValue = component.properties.value?.map((pr: UI.IReceivingDataObject) => {
+              return { ...pr, Value: component.properties.number.minNum + (component.properties.number.maxNum - component.properties.number.minNum) / 2 }
+            })
+            updateProperty("value", newValue, component, onPropertyChange)
+          },
+        }}
+        {component}
+        {onPropertyChange}
+      />
       {@render ProgressBarUnits()}
     </div>
     <div class="flex w-1/3 flex-col px-2">