saasufy-components 3.15.1 → 3.16.0

package/README.md

@@ -19,6 +19,7 @@ Components for Saasufy
 ### User input
 - [input-provider](#input-provider)
 - [input-combiner](#input-combiner)
+- [input-transformer](#input-transformer)
 
 ### Authentication
 - [log-in-form](#log-in-form)
@@ -67,6 +68,7 @@ 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-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/input-combiner.js" type="module" defer></script>
+<script src="https://saasufy.com/node_modules/saasufy-components/input-transformer.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>
@@ -315,7 +317,8 @@ OR (with confirmation step)
 **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,
+- `onclick` (required): The logic to execute to delete the item. Should be either `deleteItem()` or `confirmDeleteItem()`.
+- `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:
 
@@ -608,6 +611,46 @@ The `combineFilters` function produces a combined query string (joined with `%AN
 - `provider-template`: A template string within which the `{{value}}` can be injected before passing to consumers. In the case of the `input-combiner`, the value is an object wherein each key represents the unique label associated with different `input-provider` components.
 - `debounce-delay`: The delay in milliseconds to wait before triggering a change event. This is useful to batch multiple updates together. Default is 0ms.
 
+### input-transformer
+
+A component which can be used to transform data from an `input-provider` component and pass the transformed data to other components (or HTML elements) via custom attributes.
+This component can be configured to provide its data to multiple components (consumers) via custom attributes.
+
+**Import**
+
+```html
+<script src="https://saasufy.com/node_modules/saasufy-components/input-transformer.js" type="module" defer></script>
+```
+
+**Example usage**
+
+The following example shows how to bind an `input-provider` component to an `input-transformer`.
+
+```html
+<input-provider
+  class="dollar-input"
+  name="count"
+  type="text"
+  consumers=".cents-transformer"
+  value=""
+  placeholder="Dollars"
+></input-provider>
+
+<input-transformer
+  class="cents-transformer"
+  consumers=".cents-container"
+  provider-template="{{Number(value) * 100}}"
+></input-transformer>
+
+<div class="cents-container"></div>
+```
+
+**Attributes**
+
+- `consumers`: This allows you to connect this `input-transformer` to other elements on your page. It takes a list of selectors with optional attributes to target. For example `.my-input:value` will find all elements with a `my-input` class and update their `value` attributes with the value of the `input-provider` component in real-time. You can specify multiple selectors separated by commas such as `.my-input,my-div` - In this case, because attribute names are not specified, values will be injected into the `value` attribute (for input elements) or into the `innerHTML` property (for other kinds of elements). The default attribute/property depends on the element type.
+- `provider-template`: A template string within which the `{{value}}` can be injected before passing to consumers.
+- `debounce-delay`: The delay in milliseconds to wait before triggering a change event. This is useful to batch multiple updates together. Default is 0ms.
+
 ### log-in-form
 
 A form component which allows end-users to authenticate themselves into your app using the Saasufy blockchain or any Capitalisk-based blockchain.

package/collection-browser.js

@@ -139,8 +139,14 @@ class CollectionBrowser extends SocketConsumer {
     let currentPageElements = this.shadowRoot.querySelector('slot[name="page-number"]').assignedElements();
     let pageNumber = Math.floor(this.collection.meta.pageOffset / this.collection.meta.pageSize + 1);
     for (let element of currentPageElements) {
-      if (element.nodeName === 'INPUT') {
+      if (element.nodeName === 'INPUT' || element.nodeName === 'MODEL-INPUT') {
         element.value = pageNumber;
+      } else if (
+        element.nodeName === 'INPUT-PROVIDER' ||
+        element.nodeName === 'INPUT-COMBINER' ||
+        element.nodeName === 'INPUT-TRANSFORMER'
+      ) {
+        element.setAttribute('value', pageNumber);
       } else {
         element.innerHTML = pageNumber;
       }

package/input-transformer.js

@@ -0,0 +1,48 @@
+import { debouncer, updateConsumerElements } from './utils.js';
+
+const DEFAULT_DEBOUNCE_DELAY = 0;
+
+class InputTransformer extends HTMLElement {
+  constructor() {
+    super();
+    this.isReady = false;
+    this.debounce = debouncer();
+  }
+  connectedCallback() {
+    this.isReady = true;
+    this.render();
+  }
+
+  static get observedAttributes() {
+    return [
+      'consumers',
+      'debounce-delay',
+      'provider-template',
+      'value'
+    ];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    this.render();
+  }
+
+  render() {
+    if (!this.hasAttribute('value')) return;
+
+    let value = this.getAttribute('value') || '';
+    let debounceDelay = this.getAttribute('debounce-delay');
+    debounceDelay = debounceDelay ? Number(debounceDelay) : DEFAULT_DEBOUNCE_DELAY;
+
+    if (!this.isReady) return;
+
+    let consumers = this.getAttribute('consumers');
+    if (!consumers) return;
+
+    this.debounce(async () => {
+      let providerTemplate = this.getAttribute('provider-template') || '{{value}}';
+      updateConsumerElements(consumers, value, providerTemplate);
+    }, debounceDelay);
+  }
+}
+
+window.customElements.define('input-transformer', InputTransformer);

package/overlay-modal.js

@@ -39,6 +39,7 @@ class OverlayModal extends HTMLElement {
         .modal-title-bar {
           display: var(--title-bar-display, flex);
           justify-content: space-between;
+          align-items: center;
           width: 100%;
           padding: 10px;
           color: #ffffff;

package/package.json

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

package/styles.css

@@ -178,6 +178,19 @@ collection-browser > [slot=next-page] {
   width: auto;
 }
 
+.confirm-modal-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  padding: 20px;
+}
+
+.confirm-modal-buttons-container {
+  display: flex;
+  gap: 5px;
+}
+
 .container-vertical {
   display: flex;
   flex-direction: column;

package/utils.js

@@ -320,6 +320,8 @@ export function updateConsumerElements(consumers, value, template, sourceElement
             }
           } else if (element.nodeName === 'MODEL-INPUT') {
             element.value = value;
+          } else if (element.nodeName === 'INPUT-TRANSFORMER') {
+            element.setAttribute('value', value);
           } else if (element.nodeName === 'INPUT-COMBINER') {
             element.setAttribute(
               'value',