@openremote/or-translate 1.3.0-snapshot.20250117163129 → 1.3.0-snapshot.20250117163435

package/component.stories.js

@@ -0,0 +1,88 @@
+import { getWcStorybookHelpers } from "wc-storybook-helpers";
+import {i18next, OrTranslate} from "@openremote/or-translate";
+import "@openremote/or-translate";
+import i18nextBackend from "i18next-http-backend";
+import { html } from 'lit';
+
+const { events, args, argTypes, template } = getWcStorybookHelpers("or-translate");
+
+/** @type { import('@storybook/web-components').Meta } */
+const meta = {
+    title: "Playground/or-translate",
+    component: "or-translate",
+    args,
+    argTypes,
+    parameters: {
+        actions: {
+            handles: events
+        }
+    }
+};
+
+/** @type { import('@storybook/web-components').Story } */
+export const Primary = {
+    args: {
+        value: "monday"
+    },
+    loaders: [
+        async (args) => ({
+            orTranslate: await loadOrTranslate(args)
+        })
+    ],
+    parameters: {
+        docs: {
+            source: {
+                code: getExampleCode()
+            },
+            story: {
+                height: '60px'
+            }
+        }
+    },
+    render: (args) => html`
+        ${template(args)}
+        ${template({value: "tuesday"})}
+        ${template({value: "wednesday"})}
+        ${template({value: "thursday"})}
+        ${template({value: "friday"})}
+        ${template({value: "saturday"})}
+        ${template({value: "sunday"})}
+    `
+};
+
+/* ------------------------------------------------------- */
+/*                   UTILITY FUNCTIONS                     */
+/* ------------------------------------------------------- */
+
+function getExampleCode() {
+
+    //language=javascript
+    return `
+import i18nextBackend from "i18next-http-backend"; // optional
+import "@openremote/or-translate";
+
+// (OPTIONAL) If not i18next is not initialized yet;
+i18next.use(i18nextBackend).init({lng: 'en', backend: {loadPath: () => "/shared/locales/{{lng}}/{{ns}}.json"}});
+
+// in your HTML code use this;
+<or-translate value="monday"></or-translate>
+`
+}
+
+/**
+ * Initialises {@link OrTranslate}, awaits initialization, and returns the HTML object.
+ */
+async function loadOrTranslate(args) {
+    console.debug("Loading OrTranslate...");
+    const orTranslate = Object.assign(new OrTranslate(), args);
+    console.debug("Waiting for i18next initialization...");
+    if(window.location.href.includes("localhost")) {
+        await i18next.use(i18nextBackend).init({lng: 'en', backend: {loadPath: () => "http://localhost:8080/shared/locales/{{lng}}/or.json"}});
+    } else {
+        await i18next.use(i18nextBackend).init({lng: 'en', backend: {loadPath: () => "/shared/locales/{{lng}}/or.json"}});
+    }
+    console.debug("OrTranslate loaded");
+    return orTranslate;
+}
+
+export default meta;

package/lib/index.d.ts

@@ -14,6 +14,20 @@ declare const OrTranslate_base: {
         readonly isConnected: boolean;
     };
 } & typeof LitElement;
+/**
+ * # Translate
+ * ### `<or-translate>` - `OrTranslate`
+ *
+ * Utility component that dynamically translates the value attribute using the [i18next](https://www.i18next.com) library. <br />
+ * Useful throughout web apps, as it automatically responds to language changes.
+ *
+ * Based on the selected language in cache, it will look up the `/locales` folder with the `or.json` file, and translate by key. <br />
+ * Location of the translation folder;
+ * - **OR Manager:** `/manager/src/web/shared/locales/<lang>/app.json`
+ * - **Custom projects:** `/ui/app/<your app>/locales/<lang>/app.json`
+ *
+ * The HTML content is a simple text, with no <span> or similar wrapper.
+ */
 export declare class OrTranslate extends OrTranslate_base {
     static styles: import("lit").CSSResult;
     value?: string;

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,mBAAmB,CAAC;AAC5C,OAAO,OAAiC,MAAM,SAAS,CAAC;AACxD,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,GAAG,EAAC,MAAM,KAAK,CAAC;AAC1C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAC,OAAO,EAAC,CAAC;AAEjB,OAAO,EAAC,SAAS,EAAC,CAAC;AAGZ,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,SAAS,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAkBjD,MAAM;QACZ,OAAO,IAAI,CAAA;cACL,IAAI,CAAC,mBAAmB,EAAE;SAC/B,CAAC;IACN,CAAC;IAES,mBAAmB;QACzB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;IACtG,CAAC;;AAxBa,kBAAM,GAAG,GAAG,CAAA;;;;;;;;KAQzB,AARmB,CAQlB;AAGK;IADN,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;0CACH;AAGf;IADN,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;4CACc;AAhB9B,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA2BvB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,mBAAmB,CAAC;AAC5C,OAAO,OAAiC,MAAM,SAAS,CAAC;AACxD,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,GAAG,EAAC,MAAM,KAAK,CAAC;AAC1C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAC,OAAO,EAAC,CAAC;AAEjB,OAAO,EAAC,SAAS,EAAC,CAAC;AAEnB;;;;;;;;;;;;;GAaG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,SAAS,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAkBjD,MAAM;QACZ,OAAO,IAAI,CAAA;cACL,IAAI,CAAC,mBAAmB,EAAE;SAC/B,CAAC;IACN,CAAC;IAES,mBAAmB;QACzB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;IACtG,CAAC;;AAxBa,kBAAM,GAAG,GAAG,CAAA;;;;;;;;KAQzB,AARmB,CAQlB;AAGK;IADN,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;0CACH;AAGf;IADN,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;4CACc;AAhB9B,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA2BvB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openremote/or-translate",
-  "version": "1.3.0-snapshot.20250117163129",
+  "version": "1.3.0-snapshot.20250117163435",
   "description": "Provides a web component for translations using i18next",
   "main": "dist/umd/index.bundle.js",
   "module": "lib/index.js",
@@ -20,7 +20,7 @@
     "lit": "^2.0.2"
   },
   "devDependencies": {
-    "@openremote/util": "1.3.0-snapshot.20250117163129"
+    "@openremote/util": "1.3.0-snapshot.20250117163435"
   },
   "publishConfig": {
     "access": "public"