@openremote/or-rules 1.8.0-snapshot.20250725120000 → 1.8.0-snapshot.20250725123024

package/lib/flow-viewer/services/project.js

@@ -1,222 +1 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { EventEmitter } from "events";
-import { input } from "../components/flow-editor";
-import { NodeUtilities } from "../node-structure";
-import { SocketTypeMatcher } from "../node-structure/socket.type.matcher";
-export class Project extends EventEmitter {
-    constructor() {
-        super();
-        this.nodes = [];
-        this.connections = [];
-        this.existingFlowRuleId = -1;
-        this.existingFlowRuleName = null;
-        this.existingFlowRuleDesc = null;
-        this.isInUnsavedState = false;
-        this.isConnecting = false;
-        this.history = [];
-        this.historyIndex = 0;
-        this.startConnectionDrag = (e, socket, isInputNode) => {
-            this.connectionStartSocket = null;
-            this.connectionEndSocket = null;
-            if (isInputNode) {
-                this.connectionEndSocket = socket;
-            }
-            else {
-                this.connectionStartSocket = socket;
-            }
-            this.isConnecting = true;
-            this.emit("connectionstart", e, socket);
-        };
-        this.connectionDragging = (e) => {
-            this.emit("connecting", e);
-        };
-        this.endConnectionDrag = (e, socket, isInputNode) => {
-            if (!this.isConnecting) {
-                return;
-            }
-            if (isInputNode) {
-                this.connectionEndSocket = socket;
-            }
-            else {
-                this.connectionStartSocket = socket;
-            }
-            this.isConnecting = false;
-            this.emit("connectionend", e, socket);
-            if (this.connectionEndSocket && this.connectionStartSocket) {
-                this.createConnection(this.connectionStartSocket.id, this.connectionEndSocket.id);
-            }
-        };
-        this.setMaxListeners(1024);
-    }
-    get isCurrentlyConnecting() {
-        return this.isConnecting;
-    }
-    set unsavedState(state) {
-        this.isInUnsavedState = state;
-        this.emit("unsavedstateset", state);
-    }
-    get unsavedState() {
-        return this.isInUnsavedState;
-    }
-    setCurrentProject(id, name, desc) {
-        this.unsavedState = false;
-        this.existingFlowRuleId = id;
-        this.existingFlowRuleName = name;
-        this.existingFlowRuleDesc = desc;
-        this.history = [];
-        this.emit("projectset", id);
-    }
-    notifyChange() {
-        this.unsavedState = true;
-        this.emit("changed");
-    }
-    createUndoSnapshot() {
-        this.history = this.history.splice(0, this.historyIndex + 1);
-        this.history.push(JSON.parse(JSON.stringify(this.toNodeCollection("", ""))));
-        this.historyIndex = this.history.length - 1;
-    }
-    undo() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this.history.length === 0 || this.historyIndex === -1) {
-                return;
-            }
-            if (this.historyIndex === this.history.length - 1) {
-                this.history.push(JSON.parse(JSON.stringify(this.toNodeCollection("", ""))));
-            }
-            yield this.fromNodeCollection(this.history[this.historyIndex]);
-            this.historyIndex--;
-            this.notifyChange();
-        });
-    }
-    redo() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this.history.length === 0 || this.historyIndex >= (this.history.length - 2)) {
-                return;
-            }
-            this.historyIndex++;
-            yield this.fromNodeCollection(this.history[this.historyIndex + 1]);
-            this.notifyChange();
-        });
-    }
-    fromNodeCollection(collection) {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield this.clear();
-            collection.nodes.forEach((node) => {
-                this.addNode(node);
-            });
-            collection.connections.forEach((conn) => {
-                this.createConnection(conn.from, conn.to);
-            });
-            this.emit("nodecollectionloaded", collection);
-            this.unsavedState = false;
-        });
-    }
-    toNodeCollection(name, description) {
-        return {
-            name,
-            description,
-            connections: this.connections,
-            nodes: this.nodes
-        };
-    }
-    clear() {
-        return __awaiter(this, arguments, void 0, function* (alsoResetProject = false) {
-            input.clearSelection();
-            this.nodes.forEach((n) => {
-                this.removeNode(n);
-            });
-            this.nodes = [];
-            this.connections = [];
-            this.unsavedState = !alsoResetProject;
-            if (alsoResetProject) {
-                this.setCurrentProject(-1, null, null);
-            }
-            this.emit("cleared");
-        });
-    }
-    addNode(node) {
-        if (this.nodes.filter((n) => n.id === node.id).length > 0) {
-            throw new Error("Node with identical identity already exists in the project");
-        }
-        this.nodes.push(node);
-        this.emit("nodeadded", node);
-    }
-    removeNode(node) {
-        input.clearSelection();
-        this.connections.filter((c) => {
-            const from = NodeUtilities.getSocketFromID(c.from, this.nodes);
-            const to = NodeUtilities.getSocketFromID(c.to, this.nodes);
-            return from.nodeId === node.id || to.nodeId === node.id;
-        }).forEach((c) => {
-            this.removeConnection(c);
-        });
-        this.nodes.filter((n) => n.id === node.id).forEach((n) => {
-            this.nodes.splice(this.nodes.indexOf(n), 1);
-            this.emit("noderemoved", n);
-        });
-    }
-    removeConnection(connection) {
-        input.clearSelection();
-        this.connections.filter((c) => c.from === connection.from && c.to === connection.to).forEach((c) => {
-            const index = this.connections.indexOf(c);
-            if (index === -1) {
-                console.warn("attempt to delete nonexistent connection");
-            }
-            else {
-                this.connections.splice(index, 1);
-                this.emit("connectionremoved", c);
-            }
-        });
-    }
-    isValidConnection(connection) {
-        const fromSocket = NodeUtilities.getSocketFromID(connection.from, this.nodes);
-        const toSocket = NodeUtilities.getSocketFromID(connection.to, this.nodes);
-        if (!fromSocket ||
-            !toSocket) {
-            return false;
-        }
-        return !(!SocketTypeMatcher.match(fromSocket.type, toSocket.type) ||
-            fromSocket.id === toSocket.id ||
-            fromSocket.nodeId === toSocket.nodeId);
-    }
-    createConnection(fromSocket, toSocket) {
-        const connection = {
-            from: fromSocket,
-            to: toSocket
-        };
-        if (!(this.isValidConnection(connection))) {
-            return false;
-        }
-        // If the type contains _ARRAY, then assume that we allow multiple nodes to connect to that socket.
-        if (!((NodeUtilities.getSocketFromID(connection.to, this.nodes).type).includes("_ARRAY"))) {
-            for (const c of this.connections.filter((j) => j.to === toSocket)) {
-                // TODO: this.connections should contain the types of the other nodes, so that we only remove
-                this.removeConnection(c);
-            }
-        }
-        this.connections.push(connection);
-        this.emit("connectioncreated", fromSocket, toSocket);
-        return true;
-    }
-    removeInvalidConnections() {
-        for (const c of this.connections.map(c => this.enrichConnection(c)).filter(j => !this.isValidConnection(j))) {
-            this.removeConnection(c);
-        }
-    }
-    enrichConnection(c) {
-        var _a, _b;
-        return {
-            from: (_a = NodeUtilities.getSocketFromID(c.from, this.nodes)) === null || _a === void 0 ? void 0 : _a.id,
-            to: (_b = NodeUtilities.getSocketFromID(c.to, this.nodes)) === null || _b === void 0 ? void 0 : _b.id
-        };
-    }
-}
-//# sourceMappingURL=project.js.map
+var __awaiter=this&&this.__awaiter||function(t,e,i,n){return new(i||(i=Promise))(function(o,s){function h(t){try{c(n.next(t))}catch(t){s(t)}}function r(t){try{c(n.throw(t))}catch(t){s(t)}}function c(t){var e;t.done?o(t.value):((e=t.value)instanceof i?e:new i(function(t){t(e)})).then(h,r)}c((n=n.apply(t,e||[])).next())})};import{EventEmitter as t}from"events";import{input as e}from"../components/flow-editor";import{NodeUtilities as i}from"../node-structure";import{SocketTypeMatcher as n}from"../node-structure/socket.type.matcher";export class Project extends t{constructor(){super(),this.nodes=[],this.connections=[],this.existingFlowRuleId=-1,this.existingFlowRuleName=null,this.existingFlowRuleDesc=null,this.isInUnsavedState=!1,this.isConnecting=!1,this.history=[],this.historyIndex=0,this.startConnectionDrag=(t,e,i)=>{this.connectionStartSocket=null,this.connectionEndSocket=null,i?this.connectionEndSocket=e:this.connectionStartSocket=e,this.isConnecting=!0,this.emit("connectionstart",t,e)},this.connectionDragging=t=>{this.emit("connecting",t)},this.endConnectionDrag=(t,e,i)=>{this.isConnecting&&(i?this.connectionEndSocket=e:this.connectionStartSocket=e,this.isConnecting=!1,this.emit("connectionend",t,e),this.connectionEndSocket&&this.connectionStartSocket&&this.createConnection(this.connectionStartSocket.id,this.connectionEndSocket.id))},this.setMaxListeners(1024)}get isCurrentlyConnecting(){return this.isConnecting}set unsavedState(t){this.isInUnsavedState=t,this.emit("unsavedstateset",t)}get unsavedState(){return this.isInUnsavedState}setCurrentProject(t,e,i){this.unsavedState=!1,this.existingFlowRuleId=t,this.existingFlowRuleName=e,this.existingFlowRuleDesc=i,this.history=[],this.emit("projectset",t)}notifyChange(){this.unsavedState=!0,this.emit("changed")}createUndoSnapshot(){this.history=this.history.splice(0,this.historyIndex+1),this.history.push(JSON.parse(JSON.stringify(this.toNodeCollection("","")))),this.historyIndex=this.history.length-1}undo(){return __awaiter(this,void 0,void 0,function*(){0!==this.history.length&&-1!==this.historyIndex&&(this.historyIndex===this.history.length-1&&this.history.push(JSON.parse(JSON.stringify(this.toNodeCollection("","")))),yield this.fromNodeCollection(this.history[this.historyIndex]),this.historyIndex--,this.notifyChange())})}redo(){return __awaiter(this,void 0,void 0,function*(){0===this.history.length||this.historyIndex>=this.history.length-2||(this.historyIndex++,yield this.fromNodeCollection(this.history[this.historyIndex+1]),this.notifyChange())})}fromNodeCollection(t){return __awaiter(this,void 0,void 0,function*(){yield this.clear(),t.nodes.forEach(t=>{this.addNode(t)}),t.connections.forEach(t=>{this.createConnection(t.from,t.to)}),this.emit("nodecollectionloaded",t),this.unsavedState=!1})}toNodeCollection(t,e){return{name:t,description:e,connections:this.connections,nodes:this.nodes}}clear(){return __awaiter(this,arguments,void 0,function*(t=!1){e.clearSelection(),this.nodes.forEach(t=>{this.removeNode(t)}),this.nodes=[],this.connections=[],this.unsavedState=!t,t&&this.setCurrentProject(-1,null,null),this.emit("cleared")})}addNode(t){if(this.nodes.filter(e=>e.id===t.id).length>0)throw Error("Node with identical identity already exists in the project");this.nodes.push(t),this.emit("nodeadded",t)}removeNode(t){e.clearSelection(),this.connections.filter(e=>{let n=i.getSocketFromID(e.from,this.nodes),o=i.getSocketFromID(e.to,this.nodes);return n.nodeId===t.id||o.nodeId===t.id}).forEach(t=>{this.removeConnection(t)}),this.nodes.filter(e=>e.id===t.id).forEach(t=>{this.nodes.splice(this.nodes.indexOf(t),1),this.emit("noderemoved",t)})}removeConnection(t){e.clearSelection(),this.connections.filter(e=>e.from===t.from&&e.to===t.to).forEach(t=>{let e=this.connections.indexOf(t);-1===e?console.warn("attempt to delete nonexistent connection"):(this.connections.splice(e,1),this.emit("connectionremoved",t))})}isValidConnection(t){let e=i.getSocketFromID(t.from,this.nodes),o=i.getSocketFromID(t.to,this.nodes);return!!e&&!!o&&!(!n.match(e.type,o.type)||e.id===o.id||e.nodeId===o.nodeId)}createConnection(t,e){let n={from:t,to:e};if(!this.isValidConnection(n))return!1;if(!i.getSocketFromID(n.to,this.nodes).type.includes("_ARRAY"))for(let t of this.connections.filter(t=>t.to===e))this.removeConnection(t);return this.connections.push(n),this.emit("connectioncreated",t,e),!0}removeInvalidConnections(){for(let t of this.connections.map(t=>this.enrichConnection(t)).filter(t=>!this.isValidConnection(t)))this.removeConnection(t)}enrichConnection(t){var e,n;return{from:null==(e=i.getSocketFromID(t.from,this.nodes))?void 0:e.id,to:null==(n=i.getSocketFromID(t.to,this.nodes))?void 0:n.id}}}

package/lib/flow-viewer/services/shortcuts.js

@@ -1,63 +1 @@
-import { FlowNode } from "../components/flow-node";
-import { ConnectionLine } from "../components/connection-line";
-import { input, project } from "../components/flow-editor";
-export class Shortcuts {
-    constructor() {
-        this.actions = [
-            {
-                keys: ["Delete", "Backspace"],
-                action: () => {
-                    project.createUndoSnapshot();
-                    const selectedNodes = input.selected.filter((s) => s instanceof FlowNode && s.selected && !s.frozen);
-                    const selectedConnections = input.selected.filter((s) => s instanceof ConnectionLine && s.selected);
-                    selectedConnections.forEach((n) => project.removeConnection(n.connection));
-                    selectedNodes.forEach((n) => project.removeNode(n.node));
-                    project.notifyChange();
-                }
-            },
-            {
-                keys: ["KeyA"],
-                requireCtrl: true,
-                action: () => {
-                    if (input.selected.length > 0) {
-                        input.clearSelection(true);
-                    }
-                    else {
-                        input.selectables.forEach((s) => {
-                            input.select(s, true);
-                        });
-                    }
-                }
-            },
-            {
-                keys: ["KeyZ"],
-                requireCtrl: true,
-                action: () => {
-                    project.undo();
-                }
-            },
-            {
-                keys: ["KeyY"],
-                requireCtrl: true,
-                action: () => {
-                    project.redo();
-                }
-            }
-        ];
-        window.addEventListener("keydown", (e) => {
-            if (!(document.activeElement instanceof HTMLBodyElement)) {
-                return;
-            }
-            this.actions.forEach((a) => {
-                if (!a.keys.includes(e.key) && !a.keys.includes(e.code)) {
-                    return;
-                }
-                if (a.requireCtrl && !e.ctrlKey) {
-                    return;
-                }
-                a.action();
-            });
-        });
-    }
-}
-//# sourceMappingURL=shortcuts.js.map
+import{FlowNode as e}from"../components/flow-node";import{ConnectionLine as o}from"../components/connection-line";import{input as t,project as n}from"../components/flow-editor";export class Shortcuts{constructor(){this.actions=[{keys:["Delete","Backspace"],action:()=>{n.createUndoSnapshot();let c=t.selected.filter(o=>o instanceof e&&o.selected&&!o.frozen);t.selected.filter(e=>e instanceof o&&e.selected).forEach(e=>n.removeConnection(e.connection)),c.forEach(e=>n.removeNode(e.node)),n.notifyChange()}},{keys:["KeyA"],requireCtrl:!0,action:()=>{t.selected.length>0?t.clearSelection(!0):t.selectables.forEach(e=>{t.select(e,!0)})}},{keys:["KeyZ"],requireCtrl:!0,action:()=>{n.undo()}},{keys:["KeyY"],requireCtrl:!0,action:()=>{n.redo()}}],window.addEventListener("keydown",e=>{document.activeElement instanceof HTMLBodyElement&&this.actions.forEach(o=>{(o.keys.includes(e.key)||o.keys.includes(e.code))&&(!o.requireCtrl||e.ctrlKey)&&o.action()})})}}

package/lib/flow-viewer/styles/editor-workspace-style.js

@@ -1,55 +1,53 @@
-import { css } from "lit";
-export const EditorWorkspaceStyle = css `
-:host{
-    background: whitesmoke;
-    position: relative;
-    display: block;
-    overflow: hidden;
-    box-shadow: rgba(0, 0, 0, 0.2) 0 0 4px inset;
-    height: 100%;
-}
-
-.view-options{
-    position: absolute;
-    left: 0;
-    top: 0;
-    display: flex;
-    flex-direction: row;
-}
-
-.button{
-    padding: 10px;
-    margin: 10px;
-    cursor:pointer;
-    background: rgba(0,0,0,0.02);
-}
-
-or-mwc-input[type=button]
-{
-    margin: 10px;
-    color: inherit;
-}
-
-.button:hover{
-    background: rgba(0,0,0,0.04);
-}
-
-.button:active{
-    background: rgba(0,0,0,0.06);
-}
-
-svg, connection-container {
-    pointer-events: none;
-    position: absolute;
-    display: block;
-    right: 0;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    height: 100%;
-    stroke-width: 4px;
-    stroke: rgb(80,80,80);
-}
-`;
-//# sourceMappingURL=editor-workspace-style.js.map
+import{css as o}from"lit";export const EditorWorkspaceStyle=o`
+:host{
+    background: whitesmoke;
+    position: relative;
+    display: block;
+    overflow: hidden;
+    box-shadow: rgba(0, 0, 0, 0.2) 0 0 4px inset;
+    height: 100%;
+}
+
+.view-options{
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: flex;
+    flex-direction: row;
+}
+
+.button{
+    padding: 10px;
+    margin: 10px;
+    cursor:pointer;
+    background: rgba(0,0,0,0.02);
+}
+
+or-mwc-input[type=button]
+{
+    margin: 10px;
+    color: inherit;
+}
+
+.button:hover{
+    background: rgba(0,0,0,0.04);
+}
+
+.button:active{
+    background: rgba(0,0,0,0.06);
+}
+
+svg, connection-container {
+    pointer-events: none;
+    position: absolute;
+    display: block;
+    right: 0;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    stroke-width: 4px;
+    stroke: rgb(80,80,80);
+}
+`;

package/lib/flow-viewer/styles/flow-node-style.js

@@ -1,95 +1,93 @@
-import { css } from "lit";
-export const FlowNodeStyle = css `
-:host{
-    white-space: nowrap;
-    min-width: 80px;
-    min-height: 80px;
-    background: rgba(200,200,200, 0.85);
-
-    display: grid;
-    grid-template-columns: auto auto auto;
-    grid-template-rows: auto 1fr;
-    grid-template-areas: 
-        "title title title"
-        "input internal output";
-
-    position: absolute;
-    border-radius: var(--roundness);
-    transform-origin: 0 0;
-    z-index: 0;
-}
-:host([minimal]){
-    min-width: 60px;
-    min-height: 60px;
-    grid-template-columns: var(--socket-display-size) 1fr var(--socket-display-size);
-    grid-template-rows: auto;
-    grid-template-areas: 
-        "input title output";
-}
-.socket-side{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    justify-content: space-evenly;
-}
-.inputs{
-    grid-area: input;
-    align-items: flex-start;
-}
-.inputs flow-node-socket{
-    transform: translateX(calc(var(--socket-size) / -2));
-}
-.outputs{
-    grid-area: output;
-    align-items: flex-end;
-}
-.outputs flow-node-socket{
-    transform: translateX(calc(var(--socket-size) / 2));
-}
-.title{
-    grid-area: title;
-    padding: 3px 6px 3px 6px;
-    background: rgb(180,180,180);
-    border-radius: inherit;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-    color: white;
-    cursor: grab;
-}
-.title.input{
-    background: var(--input-color);
-    text-align: right;
-}
-.title.processor{
-    background: var(--processor-color);
-    text-align: center;
-}
-.title.output{
-    background: var(--output-color);
-    text-align: left;
-}
-.title.minimal{
-    background: transparent;
-    font-size: 20px;
-    line-height: 50%;
-    display: table;
-    padding: 15px 0 15px 0;
-    text-align: center;
-    margin-top: auto;
-    margin-bottom: auto;
-}
-.title.minimal[singlechar]{
-    font-size: 32px;
-}
-.lock-icon{
-    position: absolute;
-    top: 0px;
-    right: 0px;
-    color: rgba(255,255,255,0.8);
-    transform: scale(.7);
-}
-.lock-icon.input{
-    left: 0;
-}
-`;
-//# sourceMappingURL=flow-node-style.js.map
+import{css as t}from"lit";export const FlowNodeStyle=t`
+:host{
+    white-space: nowrap;
+    min-width: 80px;
+    min-height: 80px;
+    background: rgba(200,200,200, 0.85);
+
+    display: grid;
+    grid-template-columns: auto auto auto;
+    grid-template-rows: auto 1fr;
+    grid-template-areas: 
+        "title title title"
+        "input internal output";
+
+    position: absolute;
+    border-radius: var(--roundness);
+    transform-origin: 0 0;
+    z-index: 0;
+}
+:host([minimal]){
+    min-width: 60px;
+    min-height: 60px;
+    grid-template-columns: var(--socket-display-size) 1fr var(--socket-display-size);
+    grid-template-rows: auto;
+    grid-template-areas: 
+        "input title output";
+}
+.socket-side{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    justify-content: space-evenly;
+}
+.inputs{
+    grid-area: input;
+    align-items: flex-start;
+}
+.inputs flow-node-socket{
+    transform: translateX(calc(var(--socket-size) / -2));
+}
+.outputs{
+    grid-area: output;
+    align-items: flex-end;
+}
+.outputs flow-node-socket{
+    transform: translateX(calc(var(--socket-size) / 2));
+}
+.title{
+    grid-area: title;
+    padding: 3px 6px 3px 6px;
+    background: rgb(180,180,180);
+    border-radius: inherit;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    color: white;
+    cursor: grab;
+}
+.title.input{
+    background: var(--input-color);
+    text-align: right;
+}
+.title.processor{
+    background: var(--processor-color);
+    text-align: center;
+}
+.title.output{
+    background: var(--output-color);
+    text-align: left;
+}
+.title.minimal{
+    background: transparent;
+    font-size: 20px;
+    line-height: 50%;
+    display: table;
+    padding: 15px 0 15px 0;
+    text-align: center;
+    margin-top: auto;
+    margin-bottom: auto;
+}
+.title.minimal[singlechar]{
+    font-size: 32px;
+}
+.lock-icon{
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    color: rgba(255,255,255,0.8);
+    transform: scale(.7);
+}
+.lock-icon.input{
+    left: 0;
+}
+`;

package/lib/flow-viewer/styles/picker-styles.js

@@ -1,31 +1,29 @@
-import { css } from "lit";
-export const PickerStyle = css `
-input{
-    border: 0;
-    height: max-content;
-}
-textarea {
-    min-width: 150px;
-    min-height: 37px;
-} 
-input[type=number] {
-    padding: 11px 10px;
-}
-textarea, input[type=text], select{
-    font-family: inherit;
-    padding: 10px;
-    border-radius: var(--roundness);    
-    width: fit-content;
-    border: none;
-}
-.attribute-label{
-    padding: 5px;
-    background: rgba(0,0,0,0.05);
-    text-align: center;
-    border-radius: var(--roundness);
-    font-size: 110%;
-    color: rgb(76, 76, 76);
-    font-weight: 400;
-}
-`;
-//# sourceMappingURL=picker-styles.js.map
+import{css as t}from"lit";export const PickerStyle=t`
+input{
+    border: 0;
+    height: max-content;
+}
+textarea {
+    min-width: 150px;
+    min-height: 37px;
+} 
+input[type=number] {
+    padding: 11px 10px;
+}
+textarea, input[type=text], select{
+    font-family: inherit;
+    padding: 10px;
+    border-radius: var(--roundness);    
+    width: fit-content;
+    border: none;
+}
+.attribute-label{
+    padding: 5px;
+    background: rgba(0,0,0,0.05);
+    text-align: center;
+    border-radius: var(--roundness);
+    font-size: 110%;
+    color: rgb(76, 76, 76);
+    font-weight: 400;
+}
+`;