From 3bbb74cb64984a6fa0a971be212e096a09f1a3c1 Mon Sep 17 00:00:00 2001
From: jkuehner <jochen.kuehner@kardex.com>
Date: Tue, 16 Apr 2024 15:05:07 +0200
Subject: [PATCH 1/3] wip unit editor

---
 .../propertyEditors/UnitEditor.ts             | 103 ++++++++++++++++++
 .../propertyEditors/UnitPropertyEditor.ts     |  17 +++
 2 files changed, 120 insertions(+)
 create mode 100644 packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/UnitEditor.ts
 create mode 100644 packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/UnitPropertyEditor.ts

diff --git a/packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/UnitEditor.ts b/packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/UnitEditor.ts
new file mode 100644
index 00000000..fd2348a6
--- /dev/null
+++ b/packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/UnitEditor.ts
@@ -0,0 +1,103 @@
+import { BaseCustomWebComponentConstructorAppend, css, html } from '@node-projects/base-custom-webcomponent';
+
+export class UnitEditor extends BaseCustomWebComponentConstructorAppend {
+
+    public static override style = css`
+    .container {
+        display: grid;
+        grid-template-columns: auto 40px 40px;
+        position: relative;
+        width: 100%;
+        height: 100%;
+        border: 1px solid #596c7a;
+    }
+    .container input{
+        grid-column: 1;
+        background-color: transparent;
+        color: lightslategray;
+        border: none;
+    }
+    .container select{
+        grid-column: 3;
+        background-color: transparent;
+        color: lightslategray;
+        width: 40px;
+        border: none;
+    }
+    .arrow-up {
+        grid-column: 2;
+        background: none;
+        border: none;
+        cursor: pointer;
+        color: #596c7a;
+        font-size: 7px;
+        position: absolute;
+        width: 50px;
+        height: 50%;
+        text-align: center;
+        place-self: center;
+        top: 0%;
+    }
+    .arrow-down {
+        grid-column: 2;
+        background: none;
+        border: none;
+        cursor: pointer;
+        color: #596c7a;
+        font-size: 7px;
+        position: absolute;
+        width: 50px;
+        height: 50%;
+        text-align: center;
+        place-self: center;
+        top: 50%;
+    }
+`;
+
+    public static override template = html`
+    <div class="container" id="container">
+        <input id="ip" type="text">
+            <button type="button" class="arrow-up" id="arrow-up">&#9650;</button>
+            <button type="button" class="arrow-down" id="arrow-down">&#9660;</button>
+        <select id="unitSelect" style="display: none;">
+            <option value="px">px</option>
+            <option value="percent">%</option>
+        </select> 
+    </div>
+    `;
+    
+    private _ip: HTMLInputElement;
+    private _unitSelect: HTMLSelectElement;
+    private _container: HTMLDivElement;
+    private _arrowUp: HTMLButtonElement;
+    private _arrowDown: HTMLButtonElement;
+
+    constructor() {
+        super();
+
+        this._ip = this._getDomElement<HTMLInputElement>('ip');
+        this._unitSelect = this._getDomElement<HTMLSelectElement>('unitSelect');
+        this._container = this._getDomElement<HTMLDivElement>('container');
+        this._arrowUp = this._getDomElement<HTMLButtonElement>('arrow-up');
+        this._arrowDown = this._getDomElement<HTMLButtonElement>('arrow-down');
+
+        this._container.addEventListener('mouseover', () => {
+            this._unitSelect.style.display = 'block'
+        }) 
+
+        this._container.addEventListener('mouseleave', () => { 
+            this._unitSelect.style.display = 'none'   
+        })
+
+        this._arrowUp.addEventListener('click', () => {
+            console.log("+1")
+        })
+
+        this._arrowDown.addEventListener('click', () => {
+            console.log("-1")
+        })
+    }
+
+}
+
+customElements.define("node-projects-web-component-designer-unit-editor", UnitEditor)
\ No newline at end of file
diff --git a/packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/UnitPropertyEditor.ts b/packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/UnitPropertyEditor.ts
new file mode 100644
index 00000000..e6749cbd
--- /dev/null
+++ b/packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/UnitPropertyEditor.ts
@@ -0,0 +1,17 @@
+import { IProperty } from '../IProperty.js';
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+import { ValueType } from '../ValueType.js';
+import { UnitEditor } from './UnitEditor.js';
+
+export class UnitPropertyEditor extends BasePropertyEditor<UnitEditor> {
+
+    constructor(property: IProperty) {
+        super(property);
+
+        let element = new UnitEditor();
+        this.element = element;
+    }
+
+    refreshValue(valueType: ValueType, value: any) {
+    }
+}
\ No newline at end of file

From 82ab02e774cedacd3668e6006a25a0c4b911f06c Mon Sep 17 00:00:00 2001
From: jkuehner <jochen.kuehner@kardex.com>
Date: Tue, 16 Apr 2024 15:05:18 +0200
Subject: [PATCH 2/3] chenge %

---
 .../services/propertiesService/propertyEditors/UnitEditor.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/UnitEditor.ts b/packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/UnitEditor.ts
index fd2348a6..bb61bd37 100644
--- a/packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/UnitEditor.ts
+++ b/packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/UnitEditor.ts
@@ -61,7 +61,7 @@ export class UnitEditor extends BaseCustomWebComponentConstructorAppend {
             <button type="button" class="arrow-down" id="arrow-down">&#9660;</button>
         <select id="unitSelect" style="display: none;">
             <option value="px">px</option>
-            <option value="percent">%</option>
+            <option value="%">%</option>
         </select> 
     </div>
     `;

From f34dc81a31f9936f8e37c3ce773cfc6569b02087 Mon Sep 17 00:00:00 2001
From: jkuehner <jochen.kuehner@kardex.com>
Date: Tue, 16 Apr 2024 16:12:08 +0200
Subject: [PATCH 3/3] fixes in unit editor

---
 .../propertyEditors/UnitEditor.ts             | 34 +++++++++++++++----
 1 file changed, 28 insertions(+), 6 deletions(-)

diff --git a/packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/UnitEditor.ts b/packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/UnitEditor.ts
index bb61bd37..fb0c9375 100644
--- a/packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/UnitEditor.ts
+++ b/packages/web-component-designer/src/elements/services/propertiesService/propertyEditors/UnitEditor.ts
@@ -60,8 +60,9 @@ export class UnitEditor extends BaseCustomWebComponentConstructorAppend {
             <button type="button" class="arrow-up" id="arrow-up">&#9650;</button>
             <button type="button" class="arrow-down" id="arrow-down">&#9660;</button>
         <select id="unitSelect" style="display: none;">
-            <option value="px">px</option>
             <option value="%">%</option>
+            <option value="px">px</option>
+            <option value="cm">cm</option>
         </select> 
     </div>
     `;
@@ -81,23 +82,44 @@ export class UnitEditor extends BaseCustomWebComponentConstructorAppend {
         this._arrowUp = this._getDomElement<HTMLButtonElement>('arrow-up');
         this._arrowDown = this._getDomElement<HTMLButtonElement>('arrow-down');
 
+        this._ip.value = '100'
+
         this._container.addEventListener('mouseover', () => {
             this._unitSelect.style.display = 'block'
-        }) 
+        }); 
 
         this._container.addEventListener('mouseleave', () => { 
             this._unitSelect.style.display = 'none'   
-        })
+        });
 
         this._arrowUp.addEventListener('click', () => {
             console.log("+1")
-        })
+
+        });
 
         this._arrowDown.addEventListener('click', () => {
             console.log("-1")
-        })
-    }
+        });
+
+        this._ip.addEventListener('keydown', (event: KeyboardEvent) => {
+            if (event.key === 'Enter'){
+                const inputValue = this._ip.value;
 
+                if (inputValue.endsWith('%')) {
+                    this._unitSelect.value = '%';
+                    this._ip.value = inputValue.slice(0, -1);
+                }
+                else if (inputValue.endsWith('px')) {
+                    this._unitSelect.value = 'px';
+                    this._ip.value = inputValue.slice(0, -2);
+                }
+                else if (inputValue.endsWith('cm')) {
+                    this._unitSelect.value = 'cm';
+                    this._ip.value = inputValue.slice(0, -2);
+                }
+            }   
+        });
+    }
 }
 
 customElements.define("node-projects-web-component-designer-unit-editor", UnitEditor)
\ No newline at end of file