saasufy-components 2.12.1 → 2.14.0

package/README.md

@@ -1,6 +1,41 @@
 # Saasufy Components
 Components for Saasufy
 
+### Application state
+- [app-router](#app-router)
+- [socket-provider](#socket-provider)
+
+### Collections of resources
+- [collection-browser](#collection-browser)
+- [collection-adder](#collection-adder)
+- [collection-deleter](#collection-deleter)
+- [collection-reducer](#collection-reducer)
+
+### Single resources
+- [model-input](#model-input)
+- [model-text](#model-text)
+- [model-viewer](#model-viewer)
+
+### User input
+- [input-provider](#input-provider)
+
+### Authentication
+- [log-in-form](#log-in-form)
+- [log-out](#log-out)
+- [oauth-link](#oauth-link)
+- [oauth-handler](#oauth-handler)
+
+### Display groups
+- [render-group](#render-group)
+- [conditional-group](#conditional-group)
+- [if-group](#if-group)
+- [switch-group](#switch-group)
+- [collection-adder-group](#collection-adder-group)
+
+### Modal windows
+- [confirm-modal](#confirm-modal)
+- [overlay-modal](#overlay-modal)
+
 ## Overview
 
 Many Saasufy components use a combination of `<template slot="item">` and `<div slot="viewport">`. Both of these are known as `slotted` elements.
@@ -29,14 +64,17 @@ To use components, you just need to include them into your `.html` file inside y
 <script src="https://saasufy.com/node_modules/saasufy-components/model-text.js" type="module" defer></script>
 <script src="https://saasufy.com/node_modules/saasufy-components/model-viewer.js" type="module" defer></script>
 <script src="https://saasufy.com/node_modules/saasufy-components/input-provider.js" type="module" defer></script>
-<script src="https://saasufy.com/node_modules/saasufy-components/confirm-modal.js" type="module" defer></script>
-<script src="https://saasufy.com/node_modules/saasufy-components/render-group.js" type="module" defer></script>
-<script src="https://saasufy.com/node_modules/saasufy-components/conditional-group.js" type="module" defer></script>
-<script src="https://saasufy.com/node_modules/saasufy-components/collection-adder-group.js" type="module" defer></script>
 <script src="https://saasufy.com/node_modules/saasufy-components/log-in-form.js" type="module" defer></script>
 <script src="https://saasufy.com/node_modules/saasufy-components/log-out.js" type="module" defer></script>
 <script src="https://saasufy.com/node_modules/saasufy-components/oauth-link.js" type="module" defer></script>
 <script src="https://saasufy.com/node_modules/saasufy-components/oauth-handler.js" type="module" defer></script>
+<script src="https://saasufy.com/node_modules/saasufy-components/render-group.js" type="module" defer></script>
+<script src="https://saasufy.com/node_modules/saasufy-components/conditional-group.js" type="module" defer></script>
+<script src="https://saasufy.com/node_modules/saasufy-components/if-group.js" type="module" defer></script>
+<script src="https://saasufy.com/node_modules/saasufy-components/switch-group.js" type="module" defer></script>
+<script src="https://saasufy.com/node_modules/saasufy-components/collection-adder-group.js" type="module" defer></script>
+<script src="https://saasufy.com/node_modules/saasufy-components/confirm-modal.js" type="module" defer></script>
+<script src="https://saasufy.com/node_modules/saasufy-components/overlay-modal.js" type="module" defer></script>
 ```
 
 You should only add the script tags for the components which your page uses to avoid wasting bandwidth and unnecessarily delaying page load for your users.
@@ -144,40 +182,152 @@ Can also perform basic CRUD operations such as deleting or creating records by l
     </div>
   </template>
 
-  <div slot="viewport" class="chat-viewport"></div>
+  <template slot="loader">
+    <div class="loading-spinner-container">
+      <div class="spinning">&#8635;</div>
+    </div>
+  </template>
 
-  <div slot="loader" class="loading-spinner-container">
-    <div class="spinning">&#8635;</div>
-  </div>
+  <div slot="viewport" class="chat-viewport"></div>
 </collection-browser>
 ```
 
 **Attributes**
 
-- `collection-type` (required): Specifies the type of collection to be used, which defines the dataset you want to work with. This should match a `Model` available in your Saasufy service.
+- `collection-type` (required): Specifies the type of collection to display. This should match a `Model` available in your Saasufy service.
 - `collection-fields` (required): A comma-separated list of fields from the `Model` that you want to display or use. This lets you pick specific pieces of data from your collection to work with.
 - `collection-view` (required): Determines the view of the collection. This should match one of the `Views` defined in your Saasufy service under that specific `Model`.
 - `collection-view-params` (required): Parameters for the view, specified as comma-separated key-value pairs (e.g., key1=value1,key2=value2). These parameters can customize the behavior of the collection view. The keys must match `paramFields` specified in your Saasufy service under the relevant `View`.
 - `collection-page-size`: Sets how many items from the collection are displayed at once. This is useful for pagination, allowing users to navigate through large sets of data in chunks.
 - `collection-page-offset`: Indicates the current page offset in the collection's data. It’s like telling the browser which page of data you want to display initially.
 - `type-alias`: Allows you to provide an alternative name for your `Model` to use when injecting values inside the template. This is useful for situations where you may have multiple `collection-browser` elements and/or `model-viewer` elements of the same type nested inside each other and want to avoid `Model` name clashes in the nested template definitions. For example, if the `type-alias` in the snippet above was set to `SubChat`, then `{{Chat.message}}` would become `{{SubChat.message}}`.
-- `hide-error-logs`: A flag that, when present, suppresses error logs from being printed to the console. This can be used to keep the user interface clean of technical messages.
+- `hide-error-logs`: A flag which, when present, suppresses error logs from being printed to the console.
 - `max-show-loader`: If this attribute is present, your slotted `loader` element will be shown as often as possible; this includes situations where the collection is merely refreshing itself. It is disabled by default.
 
 ### collection-adder
 
 A form component for inserting data into collections.
 
+**Example usage**
+
+```html
+<collection-adder
+  collection-type="Product"
+  collection-fields="name,brand,qty"
+  model-values="categoryName=electronics"
+  submit-button-label="Create"
+  trim-spaces
+></collection-adder>
+```
+
+**Attributes**
+
+- `collection-type` (required): Specifies the type of collection to add the resource to when the form is submitted. This should match a `Model` available in your Saasufy service.
+- `collection-fields`: A comma-separated list of fields from the `Model` to display as input elements inside the form for the user to fill in. Each field name in this list can optionally be followed by an input element type after a `:` character. For example `collection-fields="qty:number, size:select(small,medium,large)` will create one input element with `type="number"` and one with `type=select` with options `small`, `medium` or `large`. To make a select field optional, you can prefix the list of options with a comma; e.g. `size:select(,small,medium,large)`.
+- `model-values`: An optional list of key-value pairs in the format `field1=value1,field2=value2` to add to the newly created resource alongside the values collected from the user via the form.
+- `submit-button-label`: Text to display on the submit button. If not specified, defaults to `Submit`.
+- `hide-submit-button`: Adding this attribute will hide the submit button from the form.
+- `success-message`: A message to show the user if the resource has been successfully added to the collection after submitting the form.
+- `autocapitalize`: Can be set to `off` to disable auto-capitalization of the first input character on mobile devices.
+- `autocorrect`: Can be set to `off` to disable auto-correction of input on mobile devices.
+- `trim-spaces`: If this attribute exists on the element, then leading and trailing spaces will be trimmed from each input element's value before submitting the form.
+
 ### collection-deleter
 
 A component which can be placed anywhere inside a `collection-browser` component to delete a specific item from a collection as a result of a user action (e.g. on click).
 It supports either immediate deletion or deletion upon confirmation; in the latter case, the parent `collection-browser` must have a `confirm-modal` component slotted into its `modal` slot.
 
+**Example usage**
+
+```html
+<!-- Must be placed somewhere inside a collection-browser component, typically inside the slotted item template. -->
+<collection-deleter model-id="{{Product.id}}" confirm-message="Are you sure you want to delete the {{Product.name}} product?" onclick="confirmDeleteItem()">&#x2715;</collection-deleter>
+```
+
+**Attributes**
+
+- `model-id` (required): Specifies the ID of the resource to delete from the parent collection when this component is activated. This can be achieved by invoking either the `deleteItem()` or `confirmDeleteItem()` function from inside an event handler. The example above shows how to achieve deletion via the `onclick` event. You can either invoke `deleteItem()` to delete the resource immediately or you can invoke `confirmDeleteItem()` to require additional confirmation prior to deletion.
+- `confirm-message`: The confirmation message to show the user when this component's `confirmDeleteItem()` function is invoked,
+
+If `confirmDeleteItem()` is used, then the parent `collection-browser` must have a `confirm-modal` element slotted into it as shown here:
+
+```html
+<collection-browser
+  collection-type="Product"
+  collection-fields="name,qty"
+  collection-view="alphabeticalView"
+  collection-view-params=""
+  collection-page-size="50"
+>
+  <template slot="item">
+    <div>
+      <div class="chat-message">{{Product.name}}</div>
+      <collection-deleter model-id="{{Product.id}}" confirm-message="Are you sure you want to delete the {{Product.name}} product?" onclick="confirmDeleteItem()">&#x2715;</collection-deleter>
+    </div>
+  </template>
+
+  <div slot="viewport" class="chat-viewport"></div>
+
+  <!-- The confirm-modal element must be specified here with slot="modal" to prompt the user for confirmation -->
+  <confirm-modal slot="modal" title="Delete confirmation" message="" confirm-button-label="Delete"></confirm-modal>
+</collection-browser>
+```
+
 ### collection-reducer
 
 Similar to the `collection-browser` component but designed to render collections in combined format. For example, to combine values from multiple records into a single item.
 A common use case is to extract and join values to pass to other child components via their attributes.
 
+**Example usage**
+
+```html
+<!--
+  Here, the collection-reducer fetches all available categories and joins their name fields
+  to use as options for a model-input select element.
+  This allows the user to choose among available category names to update the
+  current product's categoryName field.
+  You should assume that {{productId}} comes from a parent component (e.g. app-router).
+-->
+<collection-reducer
+  collection-type="Category"
+  collection-fields="name"
+  collection-view="alphabeticalView"
+  collection-page-size="100"
+  collection-view-params=""
+>
+  <template slot="item">
+    <div class="form">
+      <label class="label-container">
+        <div>Product category</div>
+        <model-input
+          type="select"
+          options="{{joinFields(Category, 'name')}}"
+          model-type="Product"
+          default-value="accountId"
+          model-id="{{productId}}"
+          model-field="categoryName"
+        ></model-input>
+      </label>
+    </div>
+  </template>
+  <div slot="viewport"></div>
+</collection-reducer>
+```
+
+Unlike with `collection-browser` or `model-viewer`, the template variable references not a single model instance but an array of model instances.
+In the example above, the name of the first element can be accessed with `{{Category[0].name}}`.
+
+**Attributes**
+
+- `collection-type` (required): Specifies the type of collection to use. This should match a `Model` available in your Saasufy service.
+- `collection-fields` (required): A comma-separated list of fields from the `Model` that you want to use. This lets you pick specific pieces of data from your collection to work with.
+- `collection-view` (required): Determines the view of the collection. This should match one of the `Views` defined in your Saasufy service under that specific `Model`.
+- `collection-view-params` (required): Parameters for the view, specified as comma-separated key-value pairs (e.g., key1=value1,key2=value2). These parameters can customize the behavior of the collection view. The keys must match `paramFields` specified in your Saasufy service under the relevant `View`.
+- `collection-page-size`: Sets how many items from the collection are displayed at once. This is useful for pagination, allowing users to navigate through large sets of data in chunks.
+- `collection-page-offset`: Indicates the current page offset in the collection's data. It’s like telling the browser which page of data you want to display initially.
+- `type-alias`: Allows you to provide an alternative name for your `Model` to use when injecting values inside the template. This is useful for situations where you may have multiple `collection-browser` elements and/or `model-viewer` elements of the same type nested inside each other and want to avoid `Model` name clashes in the nested template definitions. For example, if the `type-alias` in the snippet above was set to `SubChat`, then `{{Chat.message}}` would become `{{SubChat.message}}`.
+- `hide-error-logs`: A flag which, when present, suppresses error logs from being printed to the console.
+
 ### model-input
 
 Used for displaying and editing a single field of a model instance in real time.
@@ -211,18 +361,24 @@ A component which can be placed inside a `socket-provider` to deauthenticate the
 
 Example usage: `<log-out onclick="logOut()"><a href="javascript:void(0)">Log out</a></log-out>`
 
-### confirm-modal
+### oauth-link
 
-A modal component to prompt the user for confirmation before performing sensitive operations.
+A link to initiate an OAuth flow to authenticate a user as part of log in. Can support a range of different OAuth providers.
 
-### overlay-modal
+### oauth-handler
 
-A general purpose modal component.
+This component handles the final stage of OAuth and then redirects the user to the relevant page/URL if successful.
+When using an OAuth provider, the callback URL which you register with the provider must lead the user back to a page which contains this `oauth-handler` component.
 
 ### render-group
 
 A component which can be used to guarantee that certain children components are always rendered at the same time (once they are loaded) to provide a smooth user experience.
 
+### conditional-group
+
+A component which exposes a `show-content` property which can be set to true or false to show or hide its content.
+It's intended to be placed inside a `model-viewer`, `collection-browser` or `collection-reducer` component such that the true/false value of the `show-content` attribute can be computed using a template `{{expression}}` placeholder. Unlike `if-group`, this component does not require a template, however, the trade-off is that the slotted content will be pre-processed by the browser even when the expression is false. This may not be suitable if you want to (for example) render child images conditionally because the browser will preload images based on their `src` attributes, even if they are not shown.
+
 ### if-group
 
 A component which exposes a `show-content` property which can be set to true or false to show or hide its content.
@@ -233,11 +389,14 @@ It's intended to be placed inside a `model-viewer`, `collection-browser` or `col
 A component which exposes a `show-cases` property which can be set to key-value pairs in the format `key1=true,key2=false`. It can be used to conditionally display multiple slotted elements based on multiple conditions. It helps to keep HTML clean when the conditions are complex.
 This element is intended to be placed inside a `model-viewer`, `collection-browser` or `collection-reducer` component such that the true/false values of the `show-cases` attribute can be computed using template `{{expression}}` placeholders. This component requires one or more templates and a viewport to be slotted in. The content of the templates will not be processed unless the `show-cases` condition is met. All templates must have a `slot="content"` attribute and a name attribute in the format `name="key1"` where the value `key1` corresponds to the key specified inside the `show-cases` attribute of the `switch-group`.
 
-### conditional-group
-
-A component which exposes a `show-content` property which can be set to true or false to show or hide its content.
-It's intended to be placed inside a `model-viewer`, `collection-browser` or `collection-reducer` component such that the true/false value of the `show-content` attribute can be computed using a template `{{expression}}` placeholder. Unlike `if-group`, this component does not require a template, however, the trade-off is that the slotted content will be pre-processed by the browser even when the expression is false. This may not be suitable if you want to (for example) render child images conditionally because the browser will preload images based on their `src` attributes, even if they are not shown.
-
 ### collection-adder-group
 
 A component which can be used to group together multiple `collection-adder` components. It can be used to insert multiple records into a collection via a single button click.
+
+### confirm-modal
+
+A modal component to prompt the user for confirmation before performing sensitive operations.
+
+### overlay-modal
+
+A general purpose modal component.

package/collection-browser.js

@@ -9,6 +9,7 @@ class CollectionBrowser extends SocketConsumer {
     super();
     this.isReady = false;
     this.isStale = true;
+    this.activeLoader = null;
     this.attachShadow({ mode: 'open' });
 
     this.handleShowModalEvent = (event) => {
@@ -46,7 +47,7 @@ class CollectionBrowser extends SocketConsumer {
       this.goToPage((event.detail || {}).offset);
     };
 
-    this.handleSlotChangeEvent = () => {
+    this.handleSlotChangeEvent = (event) => {
       this.renderList();
     };
   }
@@ -54,6 +55,7 @@ class CollectionBrowser extends SocketConsumer {
   connectedCallback() {
     this.isReady = true;
     this.socket = this.getSocket();
+    this.activeLoader = null;
     this.shadowRoot.addEventListener('slotchange', this.handleSlotChangeEvent);
     this.addEventListener('showModal', this.handleShowModalEvent);
     this.addEventListener('crudCreate', this.handleCRUDCreateEvent);
@@ -162,23 +164,26 @@ class CollectionBrowser extends SocketConsumer {
 
   renderList() {
     let viewportSlot = this.shadowRoot.querySelector('slot[name="viewport"]');
+
+    let viewportNode = viewportSlot.assignedNodes()[0];
+    if (!viewportNode) return;
+
     let loaderSlot = this.shadowRoot.querySelector('slot[name="loader"]');
-    let hasLoaders = !!loaderSlot.assignedNodes().length;
+    let loaderNode = loaderSlot.assignedNodes()[0];
 
     if (!this.collection || !this.collection.isLoaded) {
-      if (hasLoaders && (this.isStale || this.hasAttribute('max-show-loader'))) {
-        viewportSlot.classList.add('hidden');
-        loaderSlot.classList.remove('hidden');
+      if (
+        loaderNode &&
+        this.activeLoader !== loaderNode &&
+        (this.isStale || this.hasAttribute('max-show-loader'))
+      ) {
+        this.activeLoader = loaderNode;
+        viewportNode.innerHTML = loaderNode.innerHTML;
       }
       return;
     }
     this.isStale = false;
-
-    loaderSlot.classList.add('hidden');
-    viewportSlot.classList.remove('hidden');
-
-    let viewportNode = viewportSlot.assignedNodes()[0];
-    if (!viewportNode) return;
+    this.activeLoader = null;
 
     let itemTemplate = this.shadowRoot.querySelector('slot[name="item"]').assignedNodes()[0];
     let noItemTemplate = this.shadowRoot.querySelector('slot[name="no-item"]').assignedNodes()[0];
@@ -241,11 +246,6 @@ class CollectionBrowser extends SocketConsumer {
     });
 
     this.shadowRoot.innerHTML = `
-      <style>
-        .hidden {
-          display: none;
-        }
-      </style>
       <slot name="loader"></slot>
       <slot name="item"></slot>
       <slot name="no-item"></slot>

package/collection-reducer.js

@@ -7,6 +7,9 @@ const DEFAULT_RELOAD_DELAY = 0;
 class CollectionReducer extends SocketConsumer {
   constructor() {
     super();
+    this.isReady = false;
+    this.isStale = true;
+    this.activeLoader = null;
     this.attachShadow({ mode: 'open' });
 
     this.handleGoToPreviousPageEvent = () => {
@@ -24,12 +27,12 @@ class CollectionReducer extends SocketConsumer {
     this.handleSlotChangeEvent = () => {
       this.renderReduction();
     };
-    this.isReady = false;
   }
 
   connectedCallback() {
     this.isReady = true;
     this.socket = this.getSocket();
+    this.activeLoader = null;
     this.shadowRoot.addEventListener('slotchange', this.handleSlotChangeEvent);
     this.addEventListener('goToPreviousPage', this.handleGoToPreviousPageEvent);
     this.addEventListener('goToNextPage', this.handleGoToNextPageEvent);
@@ -47,12 +50,14 @@ class CollectionReducer extends SocketConsumer {
 
   goToPreviousPage() {
     if (!this.collection) return;
+    this.isStale = true;
     this.collection.fetchPreviousPage();
     this.setAttribute('collection-page-offset', this.collection.meta.pageOffset);
   }
 
   goToNextPage() {
     if (!this.collection) return;
+    this.isStale = true;
     this.collection.fetchNextPage();
     this.setAttribute('collection-page-offset', this.collection.meta.pageOffset);
   }
@@ -69,6 +74,7 @@ class CollectionReducer extends SocketConsumer {
       'collection-view-params',
       'collection-page-size',
       'collection-page-offset',
+      'max-show-loader',
       'type-alias',
       'hide-error-logs'
     ];
@@ -79,6 +85,7 @@ class CollectionReducer extends SocketConsumer {
     if (this.collection && name === 'collection-page-offset') {
       let newOffset = Number(newValue);
       if (newOffset !== this.collection.meta.pageOffset) {
+        this.isStale = true;
         this.collection.fetchPage(newOffset);
       }
       this.updatePageNumberElements();
@@ -128,22 +135,26 @@ class CollectionReducer extends SocketConsumer {
 
   renderReduction() {
     let viewportSlot = this.shadowRoot.querySelector('slot[name="viewport"]');
+
+    let viewportNode = viewportSlot.assignedNodes()[0];
+    if (!viewportNode) return;
+
     let loaderSlot = this.shadowRoot.querySelector('slot[name="loader"]');
-    let hasLoaders = !!loaderSlot.assignedNodes().length;
+    let loaderNode = loaderSlot.assignedNodes()[0];
 
     if (!this.collection || !this.collection.isLoaded) {
-      if (hasLoaders) {
-        viewportSlot.classList.add('hidden');
-        loaderSlot.classList.remove('hidden');
+      if (
+        loaderNode &&
+        this.activeLoader !== loaderNode &&
+        (this.isStale || this.hasAttribute('max-show-loader'))
+      ) {
+        this.activeLoader = loaderNode;
+        viewportNode.innerHTML = loaderNode.innerHTML;
       }
       return;
     }
-
-    loaderSlot.classList.add('hidden');
-    viewportSlot.classList.remove('hidden');
-
-    let viewportNode = viewportSlot.assignedNodes()[0];
-    if (!viewportNode) return;
+    this.isStale = false;
+    this.activeLoader = null;
 
     let itemTemplate = this.shadowRoot.querySelector('slot[name="item"]').assignedNodes()[0];
     let noItemTemplate = this.shadowRoot.querySelector('slot[name="no-item"]').assignedNodes()[0];
@@ -174,10 +185,11 @@ class CollectionReducer extends SocketConsumer {
     );
     let viewParams = Object.fromEntries(
       collectionViewParams.split(',')
-      .map(pair => pair.split('='))
-      .filter(([field]) => field)
+        .map(pair => pair.split('='))
+        .filter(([field]) => field)
     );
     if (this.collection) this.collection.destroy();
+    this.isStale = true;
 
     this.collection = new AGCollection({
       socket: this.socket,
@@ -191,11 +203,6 @@ class CollectionReducer extends SocketConsumer {
     });
 
     this.shadowRoot.innerHTML = `
-      <style>
-        .hidden {
-          display: none;
-        }
-      </style>
       <slot name="loader"></slot>
       <slot name="item"></slot>
       <slot name="no-item"></slot>

package/model-input.js

@@ -61,6 +61,14 @@ class ModelInput extends SocketConsumer {
 
   set value(newValue) {
     if (this.inputElement) {
+      if (this.inputElement.type === 'checkbox') {
+        let oldValue = this.inputElement.checked;
+        this.inputElement.checked = newValue;
+        if (oldValue !== newValue) {
+          this.triggerChange();
+        }
+        return;
+      }
       let oldValue = this.inputElement.value;
       this.inputElement.value = newValue;
       if (oldValue !== newValue) {
@@ -70,7 +78,13 @@ class ModelInput extends SocketConsumer {
   }
 
   get value() {
-    return (this.inputElement && this.inputElement.value) || '';
+    if (!this.inputElement) {
+      return '';
+    }
+    if (this.inputElement.type === 'checkbox') {
+      return this.inputElement.checked;
+    }
+    return this.inputElement.value;
   }
 
   render() {

package/model-viewer.js

@@ -11,11 +11,13 @@ class ModelViewer extends SocketConsumer {
       this.renderItem();
     };
     this.isReady = false;
+    this.activeLoader = null;
   }
 
   connectedCallback() {
     this.isReady = true;
     this.socket = this.getSocket();
+    this.activeLoader = null;
     this.shadowRoot.addEventListener('slotchange', this.handleSlotChangeEvent);
     this.render();
   }
@@ -53,22 +55,22 @@ class ModelViewer extends SocketConsumer {
 
   renderItem() {
     let viewportSlot = this.shadowRoot.querySelector('slot[name="viewport"]');
+
+    let viewportNode = viewportSlot.assignedNodes()[0];
+    if (!viewportNode) return;
+
     let loaderSlot = this.shadowRoot.querySelector('slot[name="loader"]');
-    let hasLoaders = !!loaderSlot.assignedNodes().length;
+    let loaderNode = loaderSlot.assignedNodes()[0];
 
     if (!this.model || !this.model.isLoaded) {
-      if (hasLoaders) {
-        viewportSlot.classList.add('hidden');
-        loaderSlot.classList.remove('hidden');
+      if (loaderNode && this.activeLoader !== loaderNode) {
+        this.activeLoader = loaderNode;
+        viewportNode.innerHTML = loaderNode.innerHTML;
       }
       return;
     }
 
-    loaderSlot.classList.add('hidden');
-    viewportSlot.classList.remove('hidden');
-
-    let viewportNode = viewportSlot.assignedNodes()[0];
-    if (!viewportNode) return;
+    this.activeLoader = null;
 
     let itemTemplate = this.shadowRoot.querySelector('slot[name="item"]').assignedNodes()[0];
     let modelValue = this.model.value;
@@ -130,11 +132,6 @@ class ModelViewer extends SocketConsumer {
     }
 
     this.shadowRoot.innerHTML = `
-      <style>
-        .hidden {
-          display: none;
-        }
-      </style>
       <slot name="loader"></slot>
       <slot name="item"></slot>
       <slot name="no-item"></slot>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "2.12.1",
+  "version": "2.14.0",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {