@knowark/componarkjs 1.9.1 → 1.10.0

package/lib/base/component/component.js

@@ -18,6 +18,8 @@ export class Component extends globalThis.HTMLElement {
     define(tag, element, styles)
   }
 
+  static format = Symbol.for('format')
+
   /**
    * @param {object} styleMap
    * @return {string} **/
@@ -43,7 +45,11 @@ export class Component extends globalThis.HTMLElement {
 
   /** @param {string} content */
   set content (content) {
-    this.innerHTML = content
+    const format = globalThis[Component.format]
+    let template = document.createElement('template')
+    template.innerHTML = content
+    template = format ? format(template) : template
+    this.replaceChildren(template.content)
   }
 
   /** @return {string} */

package/lib/base/component/component.test.js

@@ -34,6 +34,14 @@ class MockComponent extends Component {
 }
 Component.define('mock-component', MockComponent)
 
+class MockContentComponent extends Component {
+  render () {
+    this.content = '<p>MOCK_CONTENT</p>'
+    return super.render()
+  }
+}
+Component.define('mock-content-component', MockContentComponent)
+
 describe('Component', () => {
   let container = null
   let component = null
@@ -488,4 +496,25 @@ describe('Component', () => {
 
     expect(result).toEqual('background-primary shadow-small')
   })
+
+  it('allows to use a globally provided template formatter', () => {
+    let formattedCalled = false
+    globalThis[Component.format] = (template) => {
+      formattedCalled = true
+      const paragraph = document.createElement('p')
+      paragraph.textContent = 'FORMATTED_CONTENT' 
+      template.content.replaceChildren(paragraph)
+      return template
+    }
+
+    container.innerHTML = `
+    <mock-content-component class></mock-content-component>
+    `
+
+    const element = container.querySelector('mock-content-component p')
+
+    expect(formattedCalled).toBe(true)
+    expect(element.textContent).toEqual('FORMATTED_CONTENT')
+    delete globalThis[Component.format]
+  })
 })

package/lib/base/utils/helpers.js

@@ -94,7 +94,7 @@ function transform (pipe, value) {
   return {
     string: String,
     boolean: Boolean,
-    number: Number
+    number: (value) => Number(String(value).replace(',', ''))
   }[pipe?.toLowerCase() || 'string'](value)
 }
 

package/lib/components/list/components/list.js

@@ -7,7 +7,7 @@ export class List extends Component {
   constructor () {
     super()
     this.addEventListener('click', this._onSelected.bind(this))
-    this.addEventListener('delete', this.onDeleted.bind(this))
+    this.addEventListener('delete', this._onDeleted.bind(this))
   }
 
   /** @param {Object} context */
@@ -84,7 +84,7 @@ export class List extends Component {
   }
 
   /** @param {MouseEvent} event */
-  onDeleted (event) {
+  _onDeleted (event) {
     event.stopImmediatePropagation()
 
     const target = /** @type {HTMLElement} */ (event.target)

package/lib/components/list/components/list.test.js

@@ -241,8 +241,7 @@ describe('List', () => {
       <template>
         <span>
           <strong>\${this}</strong></span>
-          <button data-\${this} onclick="this.dispatchEvent(
-            new CustomEvent('delete', { bubbles: true }))">
+          <button data-\${this}>
             DELETE
           </button>
       </template>
@@ -254,7 +253,7 @@ describe('List', () => {
     let items = list.selectAll('ark-list-item')
     expect(items.length).toEqual(4)
 
-    button.click()
+    button.dispatchEvent(new CustomEvent('delete', { bubbles: true }))
 
     button = list.querySelector('[data-colombia]')
     items = list.selectAll('ark-list-item')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knowark/componarkjs",
-  "version": "1.9.1",
+  "version": "1.10.0",
   "author": "Knowark",
   "description": "Knowark's Web Components Library",
   "license": "ISC",