@openremote/or-mwc-components 1.11.0-snapshot.20251031091914 → 1.11.0-snapshot.20251031111902

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openremote/or-mwc-components",
-  "version": "1.11.0-snapshot.20251031091914",
+  "version": "1.11.0-snapshot.20251031111902",
   "description": "Material Design Components packaged as web components (The official components are hardcoded to use Material Design font which has limited icons)",
   "customElements": "custom-elements.json",
   "main": "dist/umd/index.bundle.js",
@@ -23,6 +23,7 @@
     "prepack": "npx tsc -b"
   },
   "author": "OpenRemote",
+  "repository": "https://github.com/openremote/openremote",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
     "@material/base": "^9.0.0",
@@ -50,10 +51,10 @@
     "@material/tab-indicator": "^9.0.0",
     "@material/tab-scroller": "^9.0.0",
     "@material/textfield": "^9.0.0",
-    "@openremote/core": "1.11.0-snapshot.20251031091914",
-    "@openremote/model": "1.11.0-snapshot.20251031091914",
-    "@openremote/or-icon": "1.11.0-snapshot.20251031091914",
-    "@openremote/or-translate": "1.11.0-snapshot.20251031091914",
+    "@openremote/core": "1.11.0-snapshot.20251031111902",
+    "@openremote/model": "1.11.0-snapshot.20251031111902",
+    "@openremote/or-icon": "1.11.0-snapshot.20251031111902",
+    "@openremote/or-translate": "1.11.0-snapshot.20251031111902",
     "lit": "^3.3.1",
     "moment": "^2.29.4"
   },

package/stories/input/button.stories.ts

@@ -0,0 +1,75 @@
+/*
+ * Copyright 2025, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import {setCustomElementsManifest, type Meta, type StoryObj } from "@storybook/web-components";
+import {getStorybookHelpers} from "@wc-toolkit/storybook-helpers";
+import customElements from "../../custom-elements.json" with { type: "json" };
+import packageJson from "../../package.json" with { type: "json" };
+import {InputType} from "../../src/or-mwc-input";
+import "../../src/or-mwc-input";
+
+const tagName = "or-mwc-input";
+type Story = StoryObj;
+setCustomElementsManifest(customElements);
+
+const { events, args, argTypes, template } = getStorybookHelpers(tagName);
+
+const meta: Meta = {
+    title: "Playground/or-mwc-input/button",
+    component: tagName,
+    args: args,
+    argTypes: argTypes,
+    render: storyArgs => template(storyArgs),
+    excludeStories: /^[a-z].*/,
+    parameters: {
+        actions: {
+            handles: events
+        },
+        docs: {
+            subtitle: `<${tagName} type="button">`,
+            description: "Buttons represent actions that are available to the user."
+        }
+    }
+};
+
+export const Primary: Story = {
+    args: {
+        type: InputType.BUTTON,
+        label: "Button"
+    }
+};
+
+export const OutlinedExample: Story = {
+    name: "Outlined Button Example",
+    parameters: {
+        title: "Outlined button",
+        summary: "You can outline the button using the `outlined` HTML attribute."
+    },
+    args: {
+        type: InputType.BUTTON,
+        outlined: true,
+        label: "Button"
+    }
+};
+
+export const examples: Story[] = [OutlinedExample];
+
+export {customElements, packageJson};
+
+export default meta;

package/stories/input/checkbox.stories.ts

@@ -0,0 +1,60 @@
+/*
+ * Copyright 2025, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import {setCustomElementsManifest, type Meta, type StoryObj } from "@storybook/web-components";
+import {getStorybookHelpers} from "@wc-toolkit/storybook-helpers";
+import customElements from "../../custom-elements.json" with { type: "json" };
+import packageJson from "../../package.json" with { type: "json" };
+import {InputType} from "../../src/or-mwc-input";
+import "../../src/or-mwc-input";
+
+const tagName = "or-mwc-input";
+type Story = StoryObj;
+setCustomElementsManifest(customElements);
+
+const { events, args, argTypes, template } = getStorybookHelpers(tagName);
+
+const meta: Meta = {
+    title: "Playground/or-mwc-input/checkbox",
+    component: tagName,
+    args: args,
+    argTypes: argTypes,
+    render: storyArgs => template(storyArgs),
+    excludeStories: /^[a-z].*/,
+    parameters: {
+        actions: {
+            handles: events
+        },
+        docs: {
+            subtitle: `<${tagName} type="checkbox">`,
+            description: "Checkboxes allow the user to toggle an option on or off."
+        }
+    }
+};
+
+export const Primary: Story = {
+    args: {
+        type: InputType.CHECKBOX,
+        label: "Checkbox"
+    }
+};
+
+export {customElements, packageJson};
+
+export default meta;

package/stories/input/color.stories.ts

@@ -0,0 +1,60 @@
+/*
+ * Copyright 2025, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import {setCustomElementsManifest, type Meta, type StoryObj } from "@storybook/web-components";
+import {getStorybookHelpers} from "@wc-toolkit/storybook-helpers";
+import customElements from "../../custom-elements.json" with { type: "json" };
+import packageJson from "../../package.json" with { type: "json" };
+import {InputType} from "../../src/or-mwc-input";
+import "../../src/or-mwc-input";
+
+const tagName = "or-mwc-input";
+type Story = StoryObj;
+setCustomElementsManifest(customElements);
+
+const { events, args, argTypes, template } = getStorybookHelpers(tagName);
+
+const meta: Meta = {
+    title: "Playground/or-mwc-input/color",
+    component: tagName,
+    args: args,
+    argTypes: argTypes,
+    render: storyArgs => template(storyArgs),
+    excludeStories: /^[a-z].*/,
+    parameters: {
+        actions: {
+            handles: events
+        },
+        docs: {
+            subtitle: `<${tagName} type="color">`,
+            description: "Color pickers allow the user to select a color."
+        }
+    }
+};
+
+export const Primary: Story = {
+    args: {
+        type: InputType.COLOUR,
+        label: "Colour picker"
+    }
+};
+
+export {customElements, packageJson};
+
+export default meta;

package/stories/input/date.stories.ts

@@ -0,0 +1,86 @@
+/*
+ * Copyright 2025, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import {setCustomElementsManifest, type Meta, type StoryObj } from "@storybook/web-components";
+import {getStorybookHelpers} from "@wc-toolkit/storybook-helpers";
+import customElements from "../../custom-elements.json" with { type: "json" };
+import packageJson from "../../package.json" with { type: "json" };
+import {InputType} from "../../src/or-mwc-input";
+import "../../src/or-mwc-input";
+
+const tagName = "or-mwc-input";
+type Story = StoryObj;
+setCustomElementsManifest(customElements);
+
+const { events, args, argTypes, template } = getStorybookHelpers(tagName);
+
+const meta: Meta = {
+    title: "Playground/or-mwc-input/date",
+    component: tagName,
+    args: args,
+    argTypes: argTypes,
+    render: storyArgs => template(storyArgs),
+    excludeStories: /^[a-z].*/,
+    parameters: {
+        actions: {
+            handles: events
+        },
+        docs: {
+            subtitle: `<${tagName} type="date | time | datetime">`,
+            description: "Date pickers allow the user to select a date."
+        }
+    }
+};
+
+export const Primary: Story = {
+    args: {
+        type: InputType.DATE,
+        label: "Date picker"
+    }
+};
+
+export const TimeExample: Story = {
+    name: "Time Example",
+    parameters: {
+        title: "Select a time",
+        summary: "Instead of selecting a date, you could require the user to select a time."
+    },
+    args: {
+        type: InputType.TIME,
+        label: "Time picker"
+    }
+};
+
+export const DateTimeExample: Story = {
+    name: "Date time Example",
+    parameters: {
+        title: "Select a date and time",
+        summary: "If you require users to set both a date and time, you can combine them in a 'date time picker'."
+    },
+    args: {
+        type: InputType.DATETIME,
+        label: "Date time picker"
+    }
+};
+
+export const examples: Story[] = [TimeExample, DateTimeExample];
+
+export {customElements, packageJson};
+
+export default meta;

package/stories/input/input.stories.ts

@@ -0,0 +1,87 @@
+/*
+ * Copyright 2025, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import {setCustomElementsManifest, type Meta, type StoryObj } from "@storybook/web-components";
+import {getStorybookHelpers} from "@wc-toolkit/storybook-helpers";
+import customElements from "../../custom-elements.json" with { type: "json" };
+import packageJson from "../../package.json" with { type: "json" };
+import {InputType} from "../../src/or-mwc-input";
+import "../../src/or-mwc-input";
+
+const tagName = "or-mwc-input";
+type Story = StoryObj;
+setCustomElementsManifest(customElements);
+
+const { events, args, argTypes, template } = getStorybookHelpers(tagName);
+
+const meta: Meta = {
+    title: "Playground/or-mwc-input/input",
+    component: tagName,
+    args: args,
+    argTypes: argTypes,
+    render: storyArgs => template(storyArgs),
+    excludeStories: /^[a-z].*/,
+    parameters: {
+        actions: {
+            handles: events
+        },
+        docs: {
+            subtitle: `<${tagName} type="text | number | password">`,
+            description: "Inputs collect data from the user."
+        }
+    }
+};
+
+export const Primary: Story = {
+    args: {
+        type: InputType.TEXT,
+        label: "Enter text"
+    }
+};
+
+export const NumberExample: Story = {
+    name: "Number Example",
+    parameters: {
+        title: "Only allow number input",
+        summary: "Require users to select a number, instead of writing a piece of text."
+    },
+    args: {
+        type: InputType.NUMBER,
+        label: "Pick a number"
+    }
+};
+
+export const PasswordExample: Story = {
+    name: "Password Example",
+    parameters: {
+        title: "Using password visibility",
+        summary: "If the input needs to be secret, you can use `type='password'` to make the text masked."
+    },
+    args: {
+        type: InputType.PASSWORD,
+        label: "Write down your secret",
+        value: "password"
+    }
+};
+
+export const examples: Story[] = [NumberExample, PasswordExample];
+
+export {customElements, packageJson};
+
+export default meta;

package/stories/input/select.stories.ts

@@ -0,0 +1,66 @@
+/*
+ * Copyright 2025, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import {setCustomElementsManifest, type Meta, type StoryObj } from "@storybook/web-components";
+import {getStorybookHelpers} from "@wc-toolkit/storybook-helpers";
+import customElements from "../../custom-elements.json" with { type: "json" };
+import packageJson from "../../package.json" with { type: "json" };
+import {InputType} from "../../src/or-mwc-input";
+import "../../src/or-mwc-input";
+
+const tagName = "or-mwc-input";
+type Story = StoryObj;
+setCustomElementsManifest(customElements);
+
+const { events, args, argTypes, template } = getStorybookHelpers(tagName);
+
+const meta: Meta = {
+    title: "Playground/or-mwc-input/select",
+    component: tagName,
+    args: args,
+    argTypes: argTypes,
+    render: storyArgs => template(storyArgs),
+    excludeStories: /^[a-z].*/,
+    parameters: {
+        actions: {
+            handles: events
+        },
+        docs: {
+            subtitle: `<${tagName} type="select">`,
+            description: "Selects allow you to choose items from a menu of predefined options.",
+            story: {
+                height: "240px"
+            }
+        }
+    }
+};
+
+export const Primary: Story = {
+    args: {
+        type: InputType.SELECT,
+        label: "Select amount",
+        placeHolder: "Select amount",
+        options: JSON.stringify(["One", "Two", "Three"]),
+        fullWidth: true
+    }
+};
+
+export {customElements, packageJson};
+
+export default meta;

package/stories/table.stories.ts

@@ -0,0 +1,69 @@
+/*
+ * Copyright 2025, OpenRemote Inc.
+ *
+ * See the CONTRIBUTORS.txt file in the distribution for a
+ * full listing of individual contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import {setCustomElementsManifest, type Meta, type StoryObj } from "@storybook/web-components";
+import {getStorybookHelpers} from "@wc-toolkit/storybook-helpers";
+import customElements from "../custom-elements.json" with { type: "json" };
+import packageJson from "../package.json" with { type: "json" };
+import "../src/or-mwc-table";
+
+const tagName = "or-mwc-table";
+type Story = StoryObj;
+setCustomElementsManifest(customElements);
+
+const { events, args, argTypes, template } = getStorybookHelpers(tagName);
+
+const meta: Meta = {
+    title: "Playground/or-mwc-table",
+    component: tagName,
+    args: args,
+    argTypes: argTypes,
+    render: storyArgs => template(storyArgs),
+    excludeStories: /^[a-z].*/,
+    parameters: {
+        actions: {
+            handles: events
+        },
+        docs: {
+            subtitle: `<${tagName}>`,
+            description: "Used for organizing data rows and columns."
+        }
+    }
+};
+
+export const Primary: Story = {
+    args: {
+        columns: JSON.stringify([{title: "Column 1"}, {title: "Column 2"}, {title: "Column 3"}]),
+        rows: JSON.stringify([
+            {content: ["Row 1, Column 1", "Row 1, Column 2", "Row 1, Column 3"]},
+            {content: ["Row 2, Column 1", "Row 2, Column 2", "Row 2, Column 3"]}
+        ])
+    },
+    parameters: {
+        docs: {
+            story: {
+                height: "240px"
+            }
+        }
+    }
+};
+
+export {customElements, packageJson};
+
+export default meta;