be-intl 0.0.12 → 0.0.14

package/README.md

@@ -17,6 +17,8 @@ emits
 <data value=123456.789 lang="de-DE" be-intl='{ "style": "currency", "currency": "EUR" }'>123.456,79 €</data>
 ```
 
+The output element provides identical support.
+
 ```html
 <time lang="ar-EG" datetime=2011-11-18T14:54:39.929Z be-intl='{ "weekday": "long", "year": "numeric", "month": "long", "day": "numeric" }'></time>
 ```
@@ -51,3 +53,4 @@ import 'be-intl/be-intl.js';
     import 'https://esm.run/be-intl';
 </script>
 ```
+

package/be-intl.js

@@ -1,7 +1,7 @@
-import { BE, propDefaults, propInfo } from 'be-enhanced/BE.js';
 import { XE } from 'xtal-element/XE.js';
 import { register } from 'be-hive/register.js';
-export class BeIntl extends BE {
+import { BeValueAdded, beValueAddedActions, beValueAddedPropDefaults, beValueAddedPropInfo } from 'be-value-added/be-value-added.js';
+export class BeIntl extends BeValueAdded {
     static get beConfig() {
         return {
             parse: true,
@@ -9,67 +9,30 @@ export class BeIntl extends BE {
             primaryPropReq: true,
         };
     }
-    async attach(enhancedElement, enhancementInfo) {
-        await super.attach(enhancedElement, enhancementInfo);
-        import('be-propagating/be-propagating.js');
-        const base = await enhancedElement.beEnhanced.whenResolved('be-propagating');
-        const propagator = base.propagators.get('self');
-        propagator.addEventListener('lang', e => {
-            this.locale = e.detail.newVal;
-        });
-        switch (enhancedElement.localName) {
-            case 'data':
-            case 'output':
-                {
-                    propagator.addEventListener('value', e => {
-                        const newVal = e.detail.newVal;
-                        switch (typeof newVal) {
-                            case 'string':
-                                if (!newVal) {
-                                    this.value = 0;
-                                }
-                                break;
-                            default:
-                                this.value = newVal;
-                        }
-                    });
-                    const val = enhancedElement.value;
-                    if (val !== '') {
-                        this.value = JSON.parse(val);
-                    }
-                }
-                break;
-            case 'time':
-                {
-                    propagator.addEventListener('dateTime', e => {
-                        const newVal = e.detail.newVal;
-                        switch (typeof newVal) {
-                            case 'string':
-                                try {
-                                    this.value = new Date(newVal);
-                                }
-                                catch (e) {
-                                    console.error(e);
-                                }
-                            default:
-                                if (newVal instanceof Date) {
-                                    this.value = newVal;
-                                }
-                        }
-                    });
-                    const val = enhancedElement.dateTime;
-                    if (val !== '') {
-                        try {
-                            this.value = new Date(val);
-                        }
-                        catch (e) {
-                            console.error(e);
-                        }
-                    }
-                }
-                break;
+    #langObserver;
+    hydrate(self) {
+        const { enhancedElement } = self;
+        const returnObj = super.hydrate(self);
+        const { observeAttr } = self;
+        if (observeAttr) {
+            const mutOptions = {
+                attributeFilter: ['lang'],
+                attributes: true
+            };
+            self.#langObserver = new MutationObserver(( /*mutations: MutationRecord[]*/) => {
+                self.locale = enhancedElement.lang || defaultLocale;
+                ;
+            });
+            self.#langObserver.observe(enhancedElement, mutOptions);
         }
-        this.locale = enhancedElement.lang || defaultLocale;
+        returnObj.locale = enhancedElement.lang || defaultLocale;
+        delete returnObj.resolved;
+        return returnObj;
+    }
+    detach(detachedElement) {
+        super.detach(detachedElement);
+        if (this.#langObserver !== undefined)
+            this.#langObserver.disconnect();
     }
     formatNumber(self) {
         const { enhancedElement, value } = self;
@@ -108,17 +71,13 @@ const xe = new XE({
     config: {
         tagName,
         propDefaults: {
-            ...propDefaults,
+            ...beValueAddedPropDefaults,
         },
         propInfo: {
-            ...propInfo,
-            value: {
-                notify: {
-                    dispatch: true
-                }
-            }
+            ...beValueAddedPropInfo,
         },
         actions: {
+            ...beValueAddedActions,
             formatNumber: {
                 ifKeyIn: ['value'],
                 ifAllOf: ['intlNumberFormat']

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "be-intl",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "keywords": [
     "web-components",
     "web-component",
@@ -26,15 +26,16 @@
     "update": "ncu -u && npm install"
   },
   "dependencies": {
-    "be-enhanced": "0.0.36",
-    "be-hive": "0.0.115",
+    "be-enhanced": "0.0.38",
+    "be-hive": "0.0.116",
     "be-propagating": "0.0.21",
-    "trans-render": "0.0.699",
-    "xtal-element": "0.0.574"
+    "be-value-added": "0.0.1",
+    "trans-render": "0.0.701",
+    "xtal-element": "0.0.576"
   },
   "devDependencies": {
     "may-it-serve": "0.0.5",
-    "@playwright/test": "1.36.1"
+    "@playwright/test": "1.37.0"
   },
   "author": "anderson.bruce.b@gmail.com",
   "license": "MIT"

package/types.d.ts

@@ -1,13 +1,13 @@
 import { ActionOnEventConfigs } from "trans-render/froop/types";
 import {IBE, Declarations} from 'be-enhanced/types';
+import {BVAEndUserProps, BVAAllProps} from 'be-value-added/types';
 
-export interface EndUserProps extends IBE<HTMLDataElement | HTMLTimeElement | HTMLOutputElement>{
+export interface EndUserProps extends BVAEndUserProps<HTMLDataElement | HTMLTimeElement, number | Date | boolean>{
     format?: Intl.NumberFormatOptions | Intl.DateTimeFormatOptions,
-    value?: number | Date;
     locale?: string;
 }
 
-export interface AllProps extends EndUserProps{
+export interface AllProps extends EndUserProps, BVAAllProps{
     intlDateFormat?: Intl.DateTimeFormat,
     intlNumberFormat?: Intl.NumberFormat,
 }