@openremote/or-vaadin-components 1.14.0-snapshot.20260112194843

package/README.md

@@ -0,0 +1,30 @@
+# @openremote/or-vaadin-components
+[![NPM Version][npm-image]][npm-url]
+
+Package containing [Vaadin Web Components](https://vaadin.com/docs/latest/components), built with [Lit](https://lit.dev), with a slight adjustment to work within the OpenRemote ecosystem.
+For documentation you can check out their [website](https://vaadin.com/docs/latest/components).
+
+## Install
+```bash
+npm i @openremote/or-vaadin-components
+yarn add @openremote/or-vaadin-components
+```
+
+## Usage
+### JavaScript / TypeScript example using a Text Field
+Note: using the `document.createElement()` API is an example here. Please check the documentation of your JavaScript framework for proper installation of Lit web components.
+```typescript
+import "@openremote/or-vaadin-components/or-vaadin-textfield";
+
+// Load text field into the app
+const textField = document.createElement("or-vaadin-textfield");
+textField.setAttribute("label", "Company name");
+textField.setAttribute("value", "OpenRemote");
+document.body.appendChild(textField);
+```
+
+## License
+[GNU AGPL](https://www.gnu.org/licenses/agpl-3.0.en.html)
+
+[npm-image]: https://img.shields.io/npm/v/@openremote/or-vaadin-components.svg
+[npm-url]: https://npmjs.org/package/@openremote/or-vaadin-components

package/custom-elements-jsx.d.ts

@@ -0,0 +1,324 @@
+
+import type { OrVaadinCheckbox } from "./lib/or-vaadin-checkbox.d.ts";
+import type { dialogFooterRenderer, dialogRenderer, OrVaadinDialog } from "./lib/or-vaadin-dialog.d.ts";
+import type { OrVaadinInput } from "./lib/or-vaadin-input.d.ts";
+import type { OrVaadinNumberfield } from "./lib/or-vaadin-numberfield.d.ts";
+import type { OrVaadinPasswordField } from "./lib/or-vaadin-passwordfield.d.ts";
+import type { OrVaadinSelect } from "./lib/or-vaadin-select.d.ts";
+import type { OrVaadinTextarea } from "./lib/or-vaadin-textarea.d.ts";
+import type { OrVaadinTextfield } from "./lib/or-vaadin-textfield.d.ts";
+
+/**
+ * This type can be used to create scoped tags for your components.
+ *
+ * Usage:
+ *
+ * ```ts
+ * import type { ScopedElements } from "path/to/library/jsx-integration";
+ *
+ * declare module "my-library" {
+ *   namespace JSX {
+ *     interface IntrinsicElements
+ *       extends ScopedElements<'test-', ''> {}
+ *   }
+ * }
+ * ```
+ *
+ * @deprecated Runtime scoped elements result in duplicate types and can confusing for developers. It is recommended to use the `prefix` and `suffix` options to generate new types instead.
+ */
+export type ScopedElements<
+  Prefix extends string = "",
+  Suffix extends string = ""
+> = {
+  [Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key];
+};
+
+type BaseProps<T extends HTMLElement> = {
+
+  /** Content added between the opening and closing tags of the element */
+  children?: any;
+  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
+  class?: string;
+  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
+  className?: string;
+  /** Takes an object where the key is the class name(s) and the value is a boolean expression. When true, the class is applied, and when false, it is removed. */
+  classList?: Record<string, boolean | undefined>;
+  /** Specifies the text direction of the element. */
+  dir?: "ltr" | "rtl";
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+  /** For <label> and <output>, lets you associate the label with some control. */
+  htmlFor?: string;
+  /** Specifies whether the element should be hidden. */
+  hidden?: boolean | string;
+  /** A unique identifier for the element. */
+  id?: string;
+  /** Keys tell React which array item each component corresponds to */
+  key?: string | number;
+  /** Specifies the language of the element. */
+  lang?: string;
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+  /** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
+  ref?: T | ((e: T) => void);
+  /** Adds a reference for a custom element slot */
+  slot?: string;
+  /** Prop for setting inline styles */
+  style?: Record<string, string | number>;
+  /** Overrides the default Tab button behavior. Avoid using values other than -1 and 0. */
+  tabIndex?: number;
+  /** Specifies the tooltip text for the element. */
+  title?: string;
+  /** Passing 'no' excludes the element content from being translated. */
+  translate?: "yes" | "no";
+  /** The popover global attribute is used to designate an element as a popover element. */
+  popover?: "auto" | "hint" | "manual";
+  /** Turns an element element into a popover control button; takes the ID of the popover element to control as its value. */
+  popovertarget?: "top" | "bottom" | "left" | "right" | "auto";
+  /** Specifies the action to be performed on a popover element being controlled by a control element. */
+  popovertargetaction?: "show" | "hide" | "toggle";
+
+} ;
+
+type BaseEvents = {
+
+
+};
+
+
+
+export type OrVaadinCheckboxProps = {
+
+
+}
+
+
+export type OrVaadinDialogProps = {
+
+
+}
+
+
+export type OrVaadinInputProps = {
+  /** The input type that determines which Vaadin component to render.
+Refer to InputType and OrVaadinInput.TEMPLATES for the supported types. */
+  "type"?: OrVaadinInput['type'];
+
+  /**  */
+  "onchange"?: (e: CustomEvent<CustomEvent>) => void;
+}
+
+
+export type OrVaadinNumberfieldProps = {
+
+  /**  */
+  "onsubmit"?: (e: CustomEvent<CustomEvent>) => void;
+}
+
+
+export type OrVaadinPasswordFieldProps = {
+
+  /**  */
+  "onsubmit"?: (e: CustomEvent<CustomEvent>) => void;
+}
+
+
+export type OrVaadinSelectProps = {
+
+
+}
+
+
+export type OrVaadinTextareaProps = {
+
+  /**  */
+  "onsubmit"?: (e: CustomEvent<CustomEvent>) => void;
+}
+
+
+export type OrVaadinTextfieldProps = {
+
+  /**  */
+  "onsubmit"?: (e: CustomEvent<CustomEvent>) => void;
+}
+
+  export type CustomElements = {
+
+
+  /**
+     * 
+  */
+    "or-vaadin-checkbox": Partial<OrVaadinCheckboxProps & BaseProps<OrVaadinCheckbox> & BaseEvents>;
+
+
+  /**
+     * 
+  */
+    "or-vaadin-dialog": Partial<OrVaadinDialogProps & BaseProps<OrVaadinDialog> & BaseEvents>;
+
+
+  /**
+     * Custom element that wraps various Vaadin input components based on the specified `type`.
+ * Provides a unified interface for interacting with different types of inputs.
+ * 
+ * ## Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `type`: The input type that determines which Vaadin component to render.
+ * Refer to InputType and OrVaadinInput.TEMPLATES for the supported types. 
+ * - `native`: Returns the native Vaadin input element. (property only) (readonly)
+ * - `nativeValue`: Returns the value of the native Vaadin input element. (property only) (readonly)
+ * 
+ * ## Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `change`: undefined
+ * 
+ * ## Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `checkValidity() => boolean`: Function that returns a boolean which indicates if the element meets any constraint validation rules applied to it.
+ * - `getCheckboxTemplate(onChange?: (e: Event) => void) => void`: undefined
+ * - `getNumberFieldTemplate(onChange?: (e: Event) => void) => void`: undefined
+ * - `getTextAreaTemplate(onChange?: (e: Event) => void) => void`: undefined
+ * - `getTextFieldTemplate(onChange?: (e: Event) => void) => void`: undefined
+ * - `getPasswordFieldTemplate(onChange?: (e: Event) => void) => void`: undefined
+ * - `getSelectTemplate(onChange?: (e: Event) => void) => void`: undefined
+  */
+    "or-vaadin-input": Partial<OrVaadinInputProps & BaseProps<OrVaadinInput> & BaseEvents>;
+
+
+  /**
+     * 
+ * 
+ * ## Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `submit`: undefined
+ * 
+ * ## Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `_onEnter(ev: KeyboardEvent) => void`: undefined
+  */
+    "or-vaadin-numberfield": Partial<OrVaadinNumberfieldProps & BaseProps<OrVaadinNumberfield> & BaseEvents>;
+
+
+  /**
+     * 
+ * 
+ * ## Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `submit`: undefined
+ * 
+ * ## Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `_onEnter(ev: KeyboardEvent) => void`: undefined
+  */
+    "or-vaadin-passwordfield": Partial<OrVaadinPasswordFieldProps & BaseProps<OrVaadinPasswordField> & BaseEvents>;
+
+
+  /**
+     * 
+  */
+    "or-vaadin-select": Partial<OrVaadinSelectProps & BaseProps<OrVaadinSelect> & BaseEvents>;
+
+
+  /**
+     * 
+ * 
+ * ## Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `submit`: undefined
+ * 
+ * ## Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `_onEnter(ev: KeyboardEvent) => void`: undefined
+  */
+    "or-vaadin-textarea": Partial<OrVaadinTextareaProps & BaseProps<OrVaadinTextarea> & BaseEvents>;
+
+
+  /**
+     * 
+ * 
+ * ## Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `submit`: undefined
+ * 
+ * ## Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `_onEnter(ev: KeyboardEvent) => void`: undefined
+  */
+    "or-vaadin-textfield": Partial<OrVaadinTextfieldProps & BaseProps<OrVaadinTextfield> & BaseEvents>;
+  }
+
+export type CustomCssProperties = {
+
+}
+
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare module 'preact' {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare module '@builder.io/qwik' {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare module '@stencil/core' {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare module 'hono/jsx' {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare module 'react-native' {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
+}