diff --git a/src/components/badge-firstnationsled.js b/src/components/badge-firstnationsled.js
deleted file mode 100644
index 421324bdf3bdfce6992c422e066fc910db9c92c7..0000000000000000000000000000000000000000
--- a/src/components/badge-firstnationsled.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import { LitElement, css, html } from "lit";
-
-import("../utils.js").then((utils) => {
- // Custom widget for First Nations Led
- customElements.define(
- "custom-badge-firstnationsled",
- class extends LitElement {
- constructor() {
- super();
- }
- static properties = {
- value: { attribute: "value" },
- };
- static styles = css`
- div {
- display: inline-block;
- font-size: 12px;
- font-weight: 600;
- line-height: 16px;
- height: auto;
- text-align: left;
- background-color: #ede7e2;
- color: #191c1d;
- border-radius: 41px;
- text-transform: uppercase;
- padding: 4px;
- padding-right: 12px;
- margin-right: 6px;
- margin-bottom: 6px;
- background-image: url(/Australian_Aboriginal_Flag.png);
- background-repeat: no-repeat;
- background-size: 31px 15px;
- padding-left: 50px;
- background-position: 12px;
- }
- `;
- render() {
- return html`${this.value.length > 0
- ? html`<div>First Nations Led</div>`
- : ""}`;
- }
- }
- );
-});
diff --git a/src/solid-ofn-rpp.js b/src/components/main.js
similarity index 98%
rename from src/solid-ofn-rpp.js
rename to src/components/main.js
index 4cad0c84aed869eb9effc8b5b4815b4d04ba09dd..aa22ed6034797dff58cf85a21fe38380bf4d4526 100644
--- a/src/solid-ofn-rpp.js
+++ b/src/components/main.js
@@ -1,6 +1,6 @@
import { LitElement, html, unsafeCSS } from "lit";
-import makeExpand from './helpers/expand.js';
-import style from "./styles/index.scss?inline";
+import makeExpand from '@helpers/expand.js';
+import style from "@styles/index.scss?inline";
import "~icons/mdi/home-silo";
import "~icons/mdi/food-apple";
import "~icons/mdi/open-in-new";
@@ -10,7 +10,7 @@ import "~icons/mdi/linkedin";
import "~icons/mdi/whatsapp";
import "~icons/mdi/email-outline";
-import("./utils.js").then((utils) => {
+import("@helpers/utils.js").then((utils) => {
import(/* @vite-ignore */ utils.coreVersion()).then((core) => {
const expand = makeExpand(core, utils);
@@ -674,11 +674,8 @@ import("./utils.js").then((utils) => {
<div class="row">
<solid-display
bind-resources=""
- required-ofn:first_nations_country=""
- fields="title, fnc(ofn:First_Nations_country)"
- value-title="First Nation Country"
- class-title="col s12 text-14 bold"
- class-fnc="col s12 text-14"
+ fields="ofn:First_Nations_country"
+ widget-ofn:First_Nations_country="custom-display-firstnationsled"
></solid-display>
</div>
<div class="row text-link valign-wrapper">
diff --git a/src/components/multiple-badge-list.js b/src/components/multiple-badge-list.js
deleted file mode 100644
index 6fd70a61ee8eddac3326d43e3bb6d1c06b6afdd0..0000000000000000000000000000000000000000
--- a/src/components/multiple-badge-list.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import { LitElement, css, html } from "lit";
-
-import("../utils.js").then((utils) => {
- // Custom widget for badges (simple array)
- customElements.define(
- "custom-multiple-badge-list",
- class extends LitElement {
- constructor() {
- super();
- }
- static properties = {
- value: { attribute: "value" },
- };
- static styles = css`
- div {
- display: inline-block;
- font-size: 12px;
- font-weight: 600;
- line-height: 16px;
- height: auto;
- text-align: left;
- background-color: #ede7e2;
- color: #191c1d;
- border-radius: 41px;
- text-transform: uppercase;
- padding: 4px;
- padding-left: 12px;
- padding-right: 12px;
- margin-right: 6px;
- margin-bottom: 6px;
- }
- `;
- render() {
- const badges = this.value.replace(/[\[\]\"]/g, "").split(",");
- return html`${badges.map((chip) =>
- chip.length > 0 ? html`<div>${chip}</div>` : ""
- )}`;
- }
- }
- );
-});
diff --git a/src/components/partials/wholesale-buy.js b/src/components/partials/wholesale-buy.js
index fd460cfefa3d03b526d29b9f18ca28114fe8936d..8d332596325222af75bafdccfa24149a4554b043 100644
--- a/src/components/partials/wholesale-buy.js
+++ b/src/components/partials/wholesale-buy.js
@@ -3,7 +3,7 @@ import { Task } from "@lit/task";
import "~icons/mdi/phone-in-talk";
import "~icons/mdi/open-in-new";
-import("../../utils.js").then((utils) => {
+import("@helpers/utils.js").then((utils) => {
import(/* @vite-ignore */ utils.coreVersion()).then((core) => {
// Custom widget for wholesale
customElements.define(
diff --git a/src/components/widgets/badge-firstnationsled.js b/src/components/widgets/badge-firstnationsled.js
new file mode 100644
index 0000000000000000000000000000000000000000..f67f43f68bcfcef1c135c2499560ebef8a0f361e
--- /dev/null
+++ b/src/components/widgets/badge-firstnationsled.js
@@ -0,0 +1,41 @@
+import { LitElement, css, html } from "lit";
+
+customElements.define(
+ "custom-badge-firstnationsled",
+ class extends LitElement {
+ constructor() {
+ super();
+ }
+ static properties = {
+ value: { attribute: "value" },
+ };
+ static styles = css`
+ div {
+ display: inline-block;
+ font-size: 12px;
+ font-weight: 600;
+ line-height: 16px;
+ height: auto;
+ text-align: left;
+ background-color: #ede7e2;
+ color: #191c1d;
+ border-radius: 41px;
+ text-transform: uppercase;
+ padding: 4px;
+ padding-right: 12px;
+ margin-right: 6px;
+ margin-bottom: 6px;
+ background-image: url(/Australian_Aboriginal_Flag.png);
+ background-repeat: no-repeat;
+ background-size: 31px 15px;
+ padding-left: 50px;
+ background-position: 12px;
+ }
+ `;
+ render() {
+ return html`${this.value.length > 0
+ ? html`<div>First Nations Led</div>`
+ : ""}`;
+ }
+ }
+);
diff --git a/src/components/widgets/display-firstnationsled.js b/src/components/widgets/display-firstnationsled.js
new file mode 100644
index 0000000000000000000000000000000000000000..0c7cb50c529856033cbe7216523dc8d21236cec3
--- /dev/null
+++ b/src/components/widgets/display-firstnationsled.js
@@ -0,0 +1,18 @@
+import { LitElement, html } from "lit";
+
+customElements.define(
+ "custom-display-firstnationsled",
+ class extends LitElement {
+ constructor() {
+ super();
+ }
+ static properties = {
+ value: { attribute: "value" },
+ };
+ render() {
+ return html`${this.value.length > 0
+ ? html`<div class="col s12 text-14 bold">First Nations Led</div><div class="col s12 text-14">${this.value}</div>`
+ : ""}`;
+ }
+ }
+);
diff --git a/src/components/widgets/multiple-badge-list.js b/src/components/widgets/multiple-badge-list.js
new file mode 100644
index 0000000000000000000000000000000000000000..c1fcfb2610f939babc2c085053ae690d0e0898fb
--- /dev/null
+++ b/src/components/widgets/multiple-badge-list.js
@@ -0,0 +1,38 @@
+import { LitElement, css, html } from "lit";
+
+customElements.define(
+ "custom-multiple-badge-list",
+ class extends LitElement {
+ constructor() {
+ super();
+ }
+ static properties = {
+ value: { attribute: "value" },
+ };
+ static styles = css`
+ div {
+ display: inline-block;
+ font-size: 12px;
+ font-weight: 600;
+ line-height: 16px;
+ height: auto;
+ text-align: left;
+ background-color: #ede7e2;
+ color: #191c1d;
+ border-radius: 41px;
+ text-transform: uppercase;
+ padding: 4px;
+ padding-left: 12px;
+ padding-right: 12px;
+ margin-right: 6px;
+ margin-bottom: 6px;
+ }
+ `;
+ render() {
+ const badges = this.value.replace(/[\[\]\"]/g, "").split(",");
+ return html`${badges.map((chip) =>
+ chip.length > 0 ? html`<div>${chip}</div>` : ""
+ )}`;
+ }
+ }
+);
diff --git a/src/components/multiple-badge-small.js b/src/components/widgets/multiple-badge-small.js
similarity index 82%
rename from src/components/multiple-badge-small.js
rename to src/components/widgets/multiple-badge-small.js
index 6a783e7bb474a03c14df4a8b845659f855689d92..5d9487314b74ad5355ef18a22137e7433f04be64 100644
--- a/src/components/multiple-badge-small.js
+++ b/src/components/widgets/multiple-badge-small.js
@@ -1,9 +1,9 @@
-import makeExpand from '../helpers/expand.js';
+import makeExpand from '@helpers/expand.js';
-import("../utils.js").then((utils) => {
+import("@helpers/utils.js").then((utils) => {
import(/* @vite-ignore */ utils.coreVersion()).then((core) => {
const expand = makeExpand(core, utils);
- // Custom widget for badges (from ldp container)
+
core.Sib.register({
name: "custom-multiple-badge-small",
use: [core.StoreMixin],
diff --git a/src/components/multiple-badge.js b/src/components/widgets/multiple-badge.js
similarity index 82%
rename from src/components/multiple-badge.js
rename to src/components/widgets/multiple-badge.js
index 62834629266653fdaade3f475aa632435e6d0667..9c7bea6b2add9668c100a240ace7ff87871cd31b 100644
--- a/src/components/multiple-badge.js
+++ b/src/components/widgets/multiple-badge.js
@@ -1,9 +1,9 @@
-import makeExpand from '../helpers/expand.js';
+import makeExpand from '@helpers/expand.js';
-import("../utils.js").then((utils) => {
+import("@helpers/utils.js").then((utils) => {
import(/* @vite-ignore */ utils.coreVersion()).then((core) => {
const expand = makeExpand(core, utils);
- // Custom widget for badges (from ldp container)
+
core.Sib.register({
name: "custom-multiple-badge",
use: [core.StoreMixin],
diff --git a/src/components/safe-html-value-short.js b/src/components/widgets/safe-html-value-short.js
similarity index 73%
rename from src/components/safe-html-value-short.js
rename to src/components/widgets/safe-html-value-short.js
index 1472e3ebe5a819af4cd58c74c0d695973a7d1fad..063b90ea9ae2dbc3602e6a1d064d23d809fde7a9 100644
--- a/src/components/safe-html-value-short.js
+++ b/src/components/widgets/safe-html-value-short.js
@@ -1,7 +1,6 @@
import { LitElement, html } from "lit";
-import("../utils.js").then((utils) => {
- // Custom widget for producer description, original contains some unsafe html, truncated
+import("@helpers/utils.js").then((utils) => {
customElements.define(
"custom-safe-html-value-short",
class extends LitElement {
diff --git a/src/components/safe-html-value.js b/src/components/widgets/safe-html-value.js
similarity index 77%
rename from src/components/safe-html-value.js
rename to src/components/widgets/safe-html-value.js
index 4add98bc9bb62c9be952b6d93203031253c2c5b8..f5f6d4e15d1837b1cee2a40956784966257a9be2 100644
--- a/src/components/safe-html-value.js
+++ b/src/components/widgets/safe-html-value.js
@@ -1,8 +1,7 @@
import { LitElement, html } from "lit";
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import("../utils.js").then((utils) => {
- // Custom widget for producer description, original contains some unsafe html
+import("@helpers/utils.js").then((utils) => {
customElements.define(
"custom-safe-html-value",
class extends LitElement {
diff --git a/src/components/search-firstnationsled.js b/src/components/widgets/search-firstnationsled.js
similarity index 91%
rename from src/components/search-firstnationsled.js
rename to src/components/widgets/search-firstnationsled.js
index 9e2f84aa04857afd8364972d5c8315d70fac0813..f2feb5cbb64dd93c8fe21f5e5754a5822e70ea23 100644
--- a/src/components/search-firstnationsled.js
+++ b/src/components/widgets/search-firstnationsled.js
@@ -1,6 +1,6 @@
-import { LitElement, css, html } from "lit";
+import { LitElement, html } from "lit";
-import("../utils.js").then((utils) => {
+import("@helpers/utils.js").then((utils) => {
// Custom widget for filtering First Nations Led
customElements.define(
"custom-search-firstnationsled",
diff --git a/src/components/social-links.js b/src/components/widgets/social-links.js
similarity index 92%
rename from src/components/social-links.js
rename to src/components/widgets/social-links.js
index cb4db68bf01d3917ac4ae37c24d10bb75cc6d24a..edd6f76b1e95fd9340adfc195f37901ba6f95f05 100644
--- a/src/components/social-links.js
+++ b/src/components/widgets/social-links.js
@@ -1,6 +1,6 @@
-import makeExpand from '../helpers/expand.js';
+import makeExpand from '@helpers/expand.js';
-import("../utils.js").then((utils) => {
+import("@helpers/utils.js").then((utils) => {
import(/* @vite-ignore */ utils.coreVersion()).then((core) => {
const expand = makeExpand(core, utils);
// Custom widget for social media links
diff --git a/src/utils.js b/src/helpers/utils.js
similarity index 100%
rename from src/utils.js
rename to src/helpers/utils.js
diff --git a/src/index.js b/src/index.js
index acea4ac91d2e09d66f6ae3de72c0a4a3d065a923..8a60d893bed94e9bf289e104fe360cabb0e04c08 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,16 +1,12 @@
import "materialize-css/dist/js/materialize.min.js";
-
-import('./utils.js').then(utils => {
- import(/* @vite-ignore */utils.coreVersion()).then(async (core) => {
- await import("./components/safe-html-value.js");
- await import("./components/safe-html-value-short.js");
- await import("./components/multiple-badge-list.js");
- await import("./components/badge-firstnationsled.js");
- await import("./components/search-firstnationsled.js");
- await import("./components/multiple-badge.js");
- await import("./components/multiple-badge-small.js");
- await import("./components/social-links.js");
- await import("./components/partials/wholesale-buy.js");
- await import("./solid-ofn-rpp.js");
- });
-});
\ No newline at end of file
+import "@widgets/badge-firstnationsled.js";
+import "@widgets/display-firstnationsled.js";
+import "@widgets/multiple-badge-list.js";
+import "@widgets/multiple-badge-small.js";
+import "@widgets/multiple-badge.js";
+import "@widgets/safe-html-value-short.js";
+import "@widgets/safe-html-value.js";
+import "@widgets/search-firstnationsled.js";
+import "@widgets/social-links.js";
+import "@partials/wholesale-buy.js";
+import "@components/main.js";
diff --git a/vite.config.js b/vite.config.js
index 313e7e787bc2b32fe7f4568677ed97c0e7534d22..6ae274b18430da3e01eaca43fb5c62f1d6b10387 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -25,4 +25,13 @@ export default defineConfig({
},
}),
],
+ resolve: {
+ alias: {
+ "@components": "/src/components",
+ "@helpers": "/src/helpers",
+ "@partials": "/src/components/partials",
+ "@styles": "/src/styles",
+ "@widgets": "/src/components/widgets",
+ },
+ },
});