poe-svelte-ui-lib 1.0.0 → 1.0.2

package/dist/ColorPicker/ColorPicker.svelte

@@ -1,207 +1,207 @@
-<!-- $lib/ElementsUI/ColorPicker.svelte -->
-<script lang="ts">
-  import { t } from '../locales/i18n'
-  import type { IColorPickerProps } from '../types'
-
-  let {
-    id = { name: '', value: crypto.randomUUID() },
-    wrapperClass = '',
-    label = { name: '', class: '' },
-    value = [0, 0, 0],
-    onChange = () => {},
-  }: IColorPickerProps = $props()
-
-  const hsv = $state({ h: 0, s: 100, v: 100 })
-  let huePointer = $state(0)
-  let brightnessPointer = $state(100)
-  let mode = $state<'hsv' | 'white'>('hsv')
-  let whiteValue = $state(100)
-
-  $effect(() => {
-    if (value.length !== 3) return
-
-    const [r, g, b] = value
-    const isWhite = r === g && g === b
-    mode = isWhite ? 'white' : 'hsv'
-    if (isWhite) {
-      whiteValue = Math.round((r / 255) * 100)
-      return
-    }
-
-    const normalized = value.map((v) => v / 255)
-    const max = Math.max(...normalized)
-    const min = Math.min(...normalized)
-    const delta = max - min
-    let h = 0
-    if (delta !== 0) {
-      const [rN, gN, bN] = normalized
-      if (max === rN) h = ((gN - bN) / delta) % 6
-      else if (max === gN) h = (bN - rN) / delta + 2
-      else h = (rN - gN) / delta + 4
-      h *= 60
-      if (h < 0) h += 360
-    }
-    const s = max ? (delta / max) * 100 : 0
-    const v = max * 100
-    hsv.h = Math.round(h)
-    hsv.s = Math.round(s)
-    hsv.v = Math.round(v)
-    huePointer = (h / 360) * 100
-    brightnessPointer = v
-  })
-
-  const hsvToRgb = (h: number, s: number, v: number): [number, number, number] => {
-    s /= 100
-    v /= 100
-    const c = v * s
-    const x = c * (1 - Math.abs(((h / 60) % 2) - 1))
-    const m = v - c
-    let r = 0,
-      g = 0,
-      b = 0
-    if (h < 60) [r, g, b] = [c, x, 0]
-    else if (h < 120) [r, g, b] = [x, c, 0]
-    else if (h < 180) [r, g, b] = [0, c, x]
-    else if (h < 240) [r, g, b] = [0, x, c]
-    else if (h < 300) [r, g, b] = [x, 0, c]
-    else [r, g, b] = [c, 0, x]
-    return [Math.round((r + m) * 255), Math.round((g + m) * 255), Math.round((b + m) * 255)]
-  }
-
-  const handleDrag = (e: MouseEvent, target: 'hue' | 'brightness' | 'white') => {
-    const slider = document.querySelector(`.${target}-slider`) as HTMLElement
-    const rect = slider.getBoundingClientRect()
-    let currentHSV = { ...hsv }
-    let currentWhite = whiteValue
-    if (target === 'hue' || target === 'brightness') {
-      if (mode === 'white') hsv.s = 100
-      mode = 'hsv'
-    } else mode = 'white'
-    const onMove = (event: MouseEvent) => {
-      const x = Math.max(0, Math.min(event.clientX - rect.left, rect.width))
-      const percent = (x / rect.width) * 100
-      if (target === 'hue') {
-        huePointer = percent
-        currentHSV.h = (x / rect.width) * 360
-        hsv.h = currentHSV.h
-      } else if (target === 'brightness') {
-        brightnessPointer = percent
-        currentHSV.v = percent
-        hsv.v = currentHSV.v
-      } else if (target === 'white') {
-        currentWhite = percent
-        whiteValue = currentWhite
-      }
-    }
-    const onUp = () => {
-      window.removeEventListener('mousemove', onMove)
-      window.removeEventListener('mouseup', onUp)
-
-      if (mode === 'hsv') {
-        onChange(hsvToRgb(currentHSV.h, hsv.s, currentHSV.v))
-      } else {
-        const val = Math.round((currentWhite / 100) * 255)
-        onChange([val, val, val])
-      }
-    }
-    onMove(e)
-    window.addEventListener('mousemove', onMove)
-    window.addEventListener('mouseup', onUp)
-  }
-
-  const rgb = $derived(() => (mode === 'white' ? [whiteValue, whiteValue, whiteValue].map((v) => Math.round((v / 100) * 255)) : hsvToRgb(hsv.h, hsv.s, hsv.v)))
-  const hex = $derived(() =>
-    rgb()
-      .map((v) => v.toString(16).padStart(2, '0'))
-      .join(' ')
-      .toUpperCase(),
-  )
-  const previewBaseColor = $derived(() => (mode === 'white' ? [255, 255, 255].map((c) => Math.round((whiteValue / 100) * c)) : hsvToRgb(hsv.h, hsv.s, 100)))
-
-  const textColor = $derived(() => {
-    const [r, g, b] = rgb()
-    const luminance = (r * 299 + g * 587 + b * 114) / 1000
-    return luminance > 128 ? 'text-black' : 'text-white'
-  })
-</script>
-
-<div id={id.value} class="relative flex w-full flex-col items-center {wrapperClass}">
-  {#if label.name}
-    <h5 class={`mb-2 w-full px-4 text-center ${label.class}`}>{label.name}</h5>
-  {/if}
-
-  <div class="flex w-full flex-row items-center gap-2">
-    <!-- Слайдеры цвета -->
-    <div class="flex w-full flex-col gap-2">
-      <!-- Выбор цвета -->
-      <div
-        class="hue-slider relative h-7 w-full cursor-pointer overflow-hidden rounded-full border border-gray-400"
-        role="slider"
-        aria-valuenow={null}
-        tabindex={null}
-        onmousedown={(e) => handleDrag(e, 'hue')}
-      >
-        <div
-          class="absolute inset-0"
-          style={`background: linear-gradient(to right, ${Array.from({ length: 7 }, (_, i) => {
-            const [r, g, b] = hsvToRgb(i * 60, 100, 100)
-            return `rgb(${r},${g},${b})`
-          }).join(', ')})`}
-        ></div>
-        {#if mode === 'hsv'}
-          <div
-            class="pointer-events-none absolute top-1/2 h-7 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white"
-            style={`left: ${huePointer}%; background: rgb(${hsvToRgb(hsv.h, 100, 100).join(',')})`}
-          ></div>
-        {/if}
-      </div>
-
-      <!-- Яркость цвета -->
-      <div
-        class="brightness-slider relative h-4 w-full cursor-pointer overflow-hidden rounded-full border border-gray-400"
-        role="slider"
-        aria-valuenow={null}
-        tabindex={null}
-        onmousedown={(e) => handleDrag(e, 'brightness')}
-      >
-        {#if mode === 'hsv'}
-          <div class="absolute inset-0" style={`background: linear-gradient(to right, rgb(0,0,0), rgb(${hsvToRgb(hsv.h, hsv.s, 100).join(',')}))`}></div>
-
-          <div
-            class="pointer-events-none absolute top-1/2 h-7 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white"
-            style={`left: ${brightnessPointer}%; background: rgb(${hsvToRgb(hsv.h, hsv.s, hsv.v).join(',')})`}
-          ></div>
-        {/if}
-      </div>
-
-      <!-- Яркость белого цвета -->
-      <p class="h-4 px-4 text-start font-bold">{$t('component.colorpicker.whitehue')}</p>
-      <div
-        class="white-slider relative h-4 w-full cursor-pointer overflow-hidden rounded-full border border-gray-400"
-        role="slider"
-        aria-valuenow={null}
-        tabindex={null}
-        onmousedown={(e) => handleDrag(e, 'white')}
-      >
-        <div class="absolute inset-0 bg-gradient-to-r from-black to-white"></div>
-        {#if mode === 'white'}
-          <div
-            class="pointer-events-none absolute top-1/2 h-7 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white"
-            style={`left: ${whiteValue}%; background: rgb(${[255, 255, 255].map((c) => Math.round((whiteValue / 100) * c)).join(',')})`}
-          ></div>
-        {/if}
-      </div>
-    </div>
-
-    <!-- Превью цвета -->
-    <div
-      class={`flex h-26 w-28 flex-col justify-center gap-1 rounded-2xl border border-gray-400 px-2 font-mono text-sm select-none ${textColor()}`}
-      style={`background: rgb(${previewBaseColor().join(',')})`}
-    >
-      <div class="flex flex-col items-center">
-        <span class="w-full flex-shrink-0">{mode === 'white' ? 'White' : 'RGB'}</span>
-        <div class="пфз-1 w-full text-center tracking-wide">{hex()}</div>
-      </div>
-    </div>
-  </div>
-</div>
+<!-- $lib/ElementsUI/ColorPicker.svelte -->
+<script lang="ts">
+  import { t } from '../locales/i18n'
+  import type { IColorPickerProps } from '../types'
+
+  let {
+    id = { name: '', value: crypto.randomUUID() },
+    wrapperClass = '',
+    label = { name: '', class: '' },
+    value = [0, 0, 0],
+    onChange = () => {},
+  }: IColorPickerProps = $props()
+
+  const hsv = $state({ h: 0, s: 100, v: 100 })
+  let huePointer = $state(0)
+  let brightnessPointer = $state(100)
+  let mode = $state<'hsv' | 'white'>('hsv')
+  let whiteValue = $state(100)
+
+  $effect(() => {
+    if (value.length !== 3) return
+
+    const [r, g, b] = value
+    const isWhite = r === g && g === b
+    mode = isWhite ? 'white' : 'hsv'
+    if (isWhite) {
+      whiteValue = Math.round((r / 255) * 100)
+      return
+    }
+
+    const normalized = value.map((v) => v / 255)
+    const max = Math.max(...normalized)
+    const min = Math.min(...normalized)
+    const delta = max - min
+    let h = 0
+    if (delta !== 0) {
+      const [rN, gN, bN] = normalized
+      if (max === rN) h = ((gN - bN) / delta) % 6
+      else if (max === gN) h = (bN - rN) / delta + 2
+      else h = (rN - gN) / delta + 4
+      h *= 60
+      if (h < 0) h += 360
+    }
+    const s = max ? (delta / max) * 100 : 0
+    const v = max * 100
+    hsv.h = Math.round(h)
+    hsv.s = Math.round(s)
+    hsv.v = Math.round(v)
+    huePointer = (h / 360) * 100
+    brightnessPointer = v
+  })
+
+  const hsvToRgb = (h: number, s: number, v: number): [number, number, number] => {
+    s /= 100
+    v /= 100
+    const c = v * s
+    const x = c * (1 - Math.abs(((h / 60) % 2) - 1))
+    const m = v - c
+    let r = 0,
+      g = 0,
+      b = 0
+    if (h < 60) [r, g, b] = [c, x, 0]
+    else if (h < 120) [r, g, b] = [x, c, 0]
+    else if (h < 180) [r, g, b] = [0, c, x]
+    else if (h < 240) [r, g, b] = [0, x, c]
+    else if (h < 300) [r, g, b] = [x, 0, c]
+    else [r, g, b] = [c, 0, x]
+    return [Math.round((r + m) * 255), Math.round((g + m) * 255), Math.round((b + m) * 255)]
+  }
+
+  const handleDrag = (e: MouseEvent, target: 'hue' | 'brightness' | 'white') => {
+    const slider = document.querySelector(`.${target}-slider`) as HTMLElement
+    const rect = slider.getBoundingClientRect()
+    let currentHSV = { ...hsv }
+    let currentWhite = whiteValue
+    if (target === 'hue' || target === 'brightness') {
+      if (mode === 'white') hsv.s = 100
+      mode = 'hsv'
+    } else mode = 'white'
+    const onMove = (event: MouseEvent) => {
+      const x = Math.max(0, Math.min(event.clientX - rect.left, rect.width))
+      const percent = (x / rect.width) * 100
+      if (target === 'hue') {
+        huePointer = percent
+        currentHSV.h = (x / rect.width) * 360
+        hsv.h = currentHSV.h
+      } else if (target === 'brightness') {
+        brightnessPointer = percent
+        currentHSV.v = percent
+        hsv.v = currentHSV.v
+      } else if (target === 'white') {
+        currentWhite = percent
+        whiteValue = currentWhite
+      }
+    }
+    const onUp = () => {
+      window.removeEventListener('mousemove', onMove)
+      window.removeEventListener('mouseup', onUp)
+
+      if (mode === 'hsv') {
+        onChange(hsvToRgb(currentHSV.h, hsv.s, currentHSV.v))
+      } else {
+        const val = Math.round((currentWhite / 100) * 255)
+        onChange([val, val, val])
+      }
+    }
+    onMove(e)
+    window.addEventListener('mousemove', onMove)
+    window.addEventListener('mouseup', onUp)
+  }
+
+  const rgb = $derived(() => (mode === 'white' ? [whiteValue, whiteValue, whiteValue].map((v) => Math.round((v / 100) * 255)) : hsvToRgb(hsv.h, hsv.s, hsv.v)))
+  const hex = $derived(() =>
+    rgb()
+      .map((v) => v.toString(16).padStart(2, '0'))
+      .join(' ')
+      .toUpperCase(),
+  )
+  const previewBaseColor = $derived(() => (mode === 'white' ? [255, 255, 255].map((c) => Math.round((whiteValue / 100) * c)) : hsvToRgb(hsv.h, hsv.s, 100)))
+
+  const textColor = $derived(() => {
+    const [r, g, b] = rgb()
+    const luminance = (r * 299 + g * 587 + b * 114) / 1000
+    return luminance > 128 ? 'text-black' : 'text-white'
+  })
+</script>
+
+<div id={id.value} class="relative flex w-full flex-col items-center {wrapperClass}">
+  {#if label.name}
+    <h5 class={`mb-2 w-full px-4 text-center ${label.class}`}>{label.name}</h5>
+  {/if}
+
+  <div class="flex w-full flex-row items-center gap-2">
+    <!-- Слайдеры цвета -->
+    <div class="flex w-full flex-col gap-2">
+      <!-- Выбор цвета -->
+      <div
+        class="hue-slider relative h-7 w-full cursor-pointer overflow-hidden rounded-full border border-gray-400"
+        role="slider"
+        aria-valuenow={null}
+        tabindex={null}
+        onmousedown={(e) => handleDrag(e, 'hue')}
+      >
+        <div
+          class="absolute inset-0"
+          style={`background: linear-gradient(to right, ${Array.from({ length: 7 }, (_, i) => {
+            const [r, g, b] = hsvToRgb(i * 60, 100, 100)
+            return `rgb(${r},${g},${b})`
+          }).join(', ')})`}
+        ></div>
+        {#if mode === 'hsv'}
+          <div
+            class="pointer-events-none absolute top-1/2 h-7 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white"
+            style={`left: ${huePointer}%; background: rgb(${hsvToRgb(hsv.h, 100, 100).join(',')})`}
+          ></div>
+        {/if}
+      </div>
+
+      <!-- Яркость цвета -->
+      <div
+        class="brightness-slider relative h-4 w-full cursor-pointer overflow-hidden rounded-full border border-gray-400"
+        role="slider"
+        aria-valuenow={null}
+        tabindex={null}
+        onmousedown={(e) => handleDrag(e, 'brightness')}
+      >
+        {#if mode === 'hsv'}
+          <div class="absolute inset-0" style={`background: linear-gradient(to right, rgb(0,0,0), rgb(${hsvToRgb(hsv.h, hsv.s, 100).join(',')}))`}></div>
+
+          <div
+            class="pointer-events-none absolute top-1/2 h-7 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white"
+            style={`left: ${brightnessPointer}%; background: rgb(${hsvToRgb(hsv.h, hsv.s, hsv.v).join(',')})`}
+          ></div>
+        {/if}
+      </div>
+
+      <!-- Яркость белого цвета -->
+      <p class="h-4 px-4 text-start font-bold">{$t('component.colorpicker.whitehue')}</p>
+      <div
+        class="white-slider relative h-4 w-full cursor-pointer overflow-hidden rounded-full border border-gray-400"
+        role="slider"
+        aria-valuenow={null}
+        tabindex={null}
+        onmousedown={(e) => handleDrag(e, 'white')}
+      >
+        <div class="absolute inset-0 bg-gradient-to-r from-black to-white"></div>
+        {#if mode === 'white'}
+          <div
+            class="pointer-events-none absolute top-1/2 h-7 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white"
+            style={`left: ${whiteValue}%; background: rgb(${[255, 255, 255].map((c) => Math.round((whiteValue / 100) * c)).join(',')})`}
+          ></div>
+        {/if}
+      </div>
+    </div>
+
+    <!-- Превью цвета -->
+    <div
+      class={`flex h-26 w-28 flex-col justify-center gap-1 rounded-2xl border border-gray-400 px-2 font-mono text-sm select-none ${textColor()}`}
+      style={`background: rgb(${previewBaseColor().join(',')})`}
+    >
+      <div class="flex flex-col items-center">
+        <span class="w-full flex-shrink-0">{mode === 'white' ? 'White' : 'RGB'}</span>
+        <div class="пфз-1 w-full text-center tracking-wide">{hex()}</div>
+      </div>
+    </div>
+  </div>
+</div>

package/dist/ColorPicker/ColorPickerProps.svelte

@@ -1,100 +1,100 @@
-<!-- $lib/ElementsUI/ButtonProps.svelte -->
-<script lang="ts">
-  import { t } from '../locales/i18n'
-  import type { UIComponent, IColorPickerProps } from '../types'
-  import * as UI from '../index'
-  import { getContext } from 'svelte'
-  import { optionsStore } from '../options'
-
-  const { component, onPropertyChange } = $props<{
-    component: UIComponent & { properties: Partial<IColorPickerProps> }
-    onPropertyChange: (value: string | object) => void
-  }>()
-
-  const DeviceVariables = getContext<{ value: string; name: string }[]>('DeviceVariables')
-  let VARIABLE_OPTIONS = $derived(
-    DeviceVariables.map((variable: { value: string; name: string }) => ({
-      id: variable.name,
-      value: variable.value,
-      name: `${variable.value} | ${variable.name}`,
-    })),
-  )
-
-  const initialAlign = $derived(
-    $optionsStore.ALIGN_OPTIONS.find((a) =>
-      (a.value as string).includes(component.properties.label?.class?.split(' ').find((cls: string) => cls.startsWith('text-'))),
-    ),
-  )
-
-  const handleLabelAlign = (align: string) => {
-    let labelClass = component.properties.label.class || ''
-    labelClass = labelClass
-      .split(' ')
-      .filter((cls: string) => !cls.startsWith('text-'))
-      .join(' ')
-    if (align) {
-      labelClass += ` ${align}`
-    }
-    updateProperty('label.class', labelClass)
-  }
-
-  /* Обновление свойства */
-  const updateProperty = (path: string, value: string | object | string[]) => {
-    const newProperties = JSON.parse(JSON.stringify(component.properties))
-    const parts = path.split('.')
-    let obj = newProperties
-    for (let i = 0; i < parts.length - 1; i++) {
-      const part = parts[i]
-      if (!obj[part]) obj[part] = {}
-      obj = obj[part]
-    }
-    obj[parts[parts.length - 1]] = value
-    onPropertyChange(newProperties)
-  }
-</script>
-
-{#if component && component.properties}
-  <div class="relative flex flex-row items-start justify-center">
-    <!-- Сообщение для отправки в ws по нажатию кнопки -->
-    <div class="flex w-1/3 flex-col items-center px-2">
-      <UI.Select
-        label={{ name: $t('service.constructor.props.variable') }}
-        options={VARIABLE_OPTIONS}
-        value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id.value)}
-        onUpdate={(value) => {
-          updateProperty('id.name', (value.name as string).split('|')[1].trim())
-          updateProperty('id.value', value.value as string)
-          updateProperty('eventHandler.Variables', value.value as string)
-        }}
-      />
-      <UI.Select
-        wrapperClass="w-full"
-        label={{ name: $t('service.constructor.props.action') }}
-        type="buttons"
-        value={$optionsStore.SHORT_ARGUMENT_OPTION.find((h) => h.value === component.properties.eventHandler.Argument)}
-        options={$optionsStore.SHORT_ARGUMENT_OPTION}
-        onUpdate={(option) => {
-          updateProperty('eventHandler.Argument', option.value as string)
-        }}
-      />
-    </div>
-    <div class="flex w-1/3 flex-col px-2">
-      <UI.Input
-        wrapperClass="w-full"
-        label={{ name: $t('service.constructor.props.label') }}
-        value={component.properties.label.name}
-        type="text"
-        componentClass="w-full"
-        onUpdate={(value) => updateProperty('label.name', value as string)}
-      />
-      <UI.Select
-        wrapperClass="w-full"
-        label={{ name: $t('service.constructor.props.align') }}
-        type="buttons"
-        value={initialAlign}
-        options={$optionsStore.ALIGN_OPTIONS}
-        onUpdate={(option) => handleLabelAlign(option.value as string)}
-      />
-    </div>
-  </div>
-{/if}
+<!-- $lib/ElementsUI/ButtonProps.svelte -->
+<script lang="ts">
+  import { t } from '../locales/i18n'
+  import type { UIComponent, IColorPickerProps } from '../types'
+  import * as UI from '../index'
+  import { getContext } from 'svelte'
+  import { optionsStore } from '../options'
+
+  const { component, onPropertyChange } = $props<{
+    component: UIComponent & { properties: Partial<IColorPickerProps> }
+    onPropertyChange: (value: string | object) => void
+  }>()
+
+  const DeviceVariables = getContext<{ value: string; name: string }[]>('DeviceVariables')
+  let VARIABLE_OPTIONS = $derived(
+    DeviceVariables.map((variable: { value: string; name: string }) => ({
+      id: variable.name,
+      value: variable.value,
+      name: `${variable.value} | ${variable.name}`,
+    })),
+  )
+
+  const initialAlign = $derived(
+    $optionsStore.ALIGN_OPTIONS.find((a) =>
+      (a.value as string).includes(component.properties.label?.class?.split(' ').find((cls: string) => cls.startsWith('text-'))),
+    ),
+  )
+
+  const handleLabelAlign = (align: string) => {
+    let labelClass = component.properties.label.class || ''
+    labelClass = labelClass
+      .split(' ')
+      .filter((cls: string) => !cls.startsWith('text-'))
+      .join(' ')
+    if (align) {
+      labelClass += ` ${align}`
+    }
+    updateProperty('label.class', labelClass)
+  }
+
+  /* Обновление свойства */
+  const updateProperty = (path: string, value: string | object | string[]) => {
+    const newProperties = JSON.parse(JSON.stringify(component.properties))
+    const parts = path.split('.')
+    let obj = newProperties
+    for (let i = 0; i < parts.length - 1; i++) {
+      const part = parts[i]
+      if (!obj[part]) obj[part] = {}
+      obj = obj[part]
+    }
+    obj[parts[parts.length - 1]] = value
+    onPropertyChange(newProperties)
+  }
+</script>
+
+{#if component && component.properties}
+  <div class="relative flex flex-row items-start justify-center">
+    <!-- Сообщение для отправки в ws по нажатию кнопки -->
+    <div class="flex w-1/3 flex-col items-center px-2">
+      <UI.Select
+        label={{ name: $t('service.constructor.props.variable') }}
+        options={VARIABLE_OPTIONS}
+        value={VARIABLE_OPTIONS.find((opt) => opt.value === component.properties.id.value)}
+        onUpdate={(value) => {
+          updateProperty('id.name', (value.name as string).split('|')[1].trim())
+          updateProperty('id.value', value.value as string)
+          updateProperty('eventHandler.Variables', value.value as string)
+        }}
+      />
+      <UI.Select
+        wrapperClass="w-full"
+        label={{ name: $t('service.constructor.props.action') }}
+        type="buttons"
+        value={$optionsStore.SHORT_ARGUMENT_OPTION.find((h) => h.value === component.properties.eventHandler.Argument)}
+        options={$optionsStore.SHORT_ARGUMENT_OPTION}
+        onUpdate={(option) => {
+          updateProperty('eventHandler.Argument', option.value as string)
+        }}
+      />
+    </div>
+    <div class="flex w-1/3 flex-col px-2">
+      <UI.Input
+        wrapperClass="w-full"
+        label={{ name: $t('service.constructor.props.label') }}
+        value={component.properties.label.name}
+        type="text"
+        componentClass="w-full"
+        onUpdate={(value) => updateProperty('label.name', value as string)}
+      />
+      <UI.Select
+        wrapperClass="w-full"
+        label={{ name: $t('service.constructor.props.align') }}
+        type="buttons"
+        value={initialAlign}
+        options={$optionsStore.ALIGN_OPTIONS}
+        onUpdate={(option) => handleLabelAlign(option.value as string)}
+      />
+    </div>
+  </div>
+{/if}