be-intl 0.0.27 → 0.0.28

package/README.md

@@ -29,6 +29,14 @@ emits
 <time lang="ar-EG" datetime="2011-11-18T14:54:39.929Z" be-intl="{ &quot;weekday&quot;: &quot;long&quot;, &quot;year&quot;: &quot;numeric&quot;, &quot;month&quot;: &quot;long&quot;, &quot;day&quot;: &quot;numeric&quot; }">الجمعة، ١٨ نوفمبر ٢٠١١</time>
 ```
 
+[WIP]
+
+We can also employ more semantic syntax:
+
+```html
+<data value=123456.789 lang="de-DE" be-intl-style=currency be-intl-currency=EUR></data>
+```
+
 [TODO] Support [expanding out the attribute](https://github.com/bahrus/be-hive#behivior-aspects-untested) to avoid use of JSON
 
 ## Viewing Locally

package/be-intl.js

@@ -1,40 +1,35 @@
-import { XE } from 'xtal-element/XE.js';
-import { BeValueAdded, beValueAddedActions, beValueAddedPropDefaults, beValueAddedPropInfo } from 'be-value-added/be-value-added.js';
+import { BeValueAdded } from 'be-value-added/be-value-added.js';
 export class BeIntl extends BeValueAdded {
-    static get beConfig() {
-        return {
-            parse: true,
-            primaryProp: 'format',
-            primaryPropReq: true,
-        };
-    }
-    #langObserver;
-    hydrate(self) {
-        const { enhancedElement } = self;
-        const returnObj = super.hydrate(self);
-        if (!(enhancedElement instanceof HTMLElement))
-            return returnObj;
-        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);
-        }
-        returnObj.locale = enhancedElement.lang || defaultLocale;
-        delete returnObj.resolved;
-        return returnObj;
-    }
-    detach(detachedElement) {
-        super.detach(detachedElement);
-        if (this.#langObserver !== undefined)
-            this.#langObserver.disconnect();
-    }
+    static config = {
+        propInfo: {
+            ...(super.config.propInfo),
+            locale: {},
+            format: {},
+            intlDateFormat: {},
+            intlNumberFormat: {},
+            currency: {},
+        },
+        actions: {
+            hydrate: {
+                ifAllOf: ['attached'],
+            },
+            formatNumber: {
+                ifKeyIn: ['value'],
+                ifAllOf: ['intlNumberFormat']
+            },
+            formatDate: {
+                ifKeyIn: ['value'],
+                ifAllOf: ['intlDateFormat']
+            },
+            onFormattingChange: {
+                ifAllOf: ['locale'],
+                ifKeyIn: ['format', 'currency']
+            }
+        },
+        positractions: [
+            ...(super.config.positractions)
+        ]
+    };
     formatNumber(self) {
         const { enhancedElement, value } = self;
         if (value === undefined) {
@@ -49,7 +44,7 @@ export class BeIntl extends BeValueAdded {
         enhancedElement.textContent = this.intlDateFormat.format(value);
     }
     onFormattingChange(self) {
-        const { enhancedElement, locale, format } = self;
+        const { enhancedElement, locale, format, currency } = self;
         switch (enhancedElement.localName) {
             case 'time':
                 return {
@@ -57,6 +52,8 @@ export class BeIntl extends BeValueAdded {
                     resolved: true
                 };
             default:
+                if (currency !== undefined)
+                    format.currency = currency;
                 return {
                     intlNumberFormat: new Intl.NumberFormat(locale, format),
                     resolved: true
@@ -64,32 +61,3 @@ export class BeIntl extends BeValueAdded {
         }
     }
 }
-const defaultLocale = new Intl.NumberFormat().resolvedOptions().locale;
-export const tagName = 'be-intl';
-const xe = new XE({
-    config: {
-        tagName,
-        propDefaults: {
-            ...beValueAddedPropDefaults,
-        },
-        propInfo: {
-            ...beValueAddedPropInfo,
-        },
-        actions: {
-            ...beValueAddedActions,
-            formatNumber: {
-                ifKeyIn: ['value'],
-                ifAllOf: ['intlNumberFormat']
-            },
-            formatDate: {
-                ifKeyIn: ['value'],
-                ifAllOf: ['intlDateFormat']
-            },
-            onFormattingChange: {
-                ifAllOf: ['locale'],
-                ifKeyIn: ['format']
-            }
-        }
-    },
-    superclass: BeIntl
-});

package/behance.js

@@ -0,0 +1,5 @@
+import { BeIntl } from './be-intl.js';
+export { BeIntl } from './be-intl.js';
+import { def } from 'trans-render/lib/def.js';
+await BeIntl.bootUp();
+def('be-intl', BeIntl);

package/behivior.js

@@ -1,6 +1,39 @@
-import { register } from 'be-hive/register.js';
-import { tagName } from './be-intl.js';
-import './be-intl.js';
-const ifWantsToBe = 'intl';
-const upgrade = 'data,time,output';
-register(ifWantsToBe, upgrade, tagName);
+import { BeHive } from 'be-hive/be-hive.js';
+import { MountObserver } from 'mount-observer/MountObserver.js';
+const base = 'be-intl';
+const defaultLocale = new Intl.NumberFormat().resolvedOptions().locale;
+const emc = {
+    base,
+    branches: ['', 'style', 'currency',],
+    map: {
+        '0.0': {
+            instanceOf: 'Object',
+            mapsTo: 'format',
+            valIfFalsy: {},
+        },
+        '1.0': {
+            instanceOf: 'String',
+            mapsTo: '?.format?.style'
+        },
+        '2.0': {
+            instanceOf: 'String',
+            mapsTo: '?.format?.currency'
+        }
+    },
+    osotas: [
+        {
+            name: 'lang',
+            valIfNull: defaultLocale,
+            mapsTo: 'locale',
+        }
+    ],
+    enhPropKey: 'beIntl',
+    importEnh: async () => {
+        const { BeIntl } = await import('./behance.js');
+        return BeIntl;
+    }
+};
+const mose = document.createElement('script');
+mose.id = base;
+mose.synConfig = emc;
+MountObserver.synthesize(document, BeHive, mose);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "be-intl",
-  "version": "0.0.27",
+  "version": "0.0.28",
   "keywords": [
     "web-components",
     "web-component",
@@ -26,16 +26,16 @@
     "update": "ncu -u && npm install"
   },
   "dependencies": {
-    "be-enhanced": "0.0.75",
-    "be-hive": "0.0.143",
-    "be-propagating": "0.0.37",
-    "be-value-added": "0.0.27",
-    "trans-render": "0.0.756",
-    "xtal-element": "0.0.602"
+    "be-enhanced": "0.0.88",
+    "be-hive": "0.0.159",
+    "be-propagating": "0.0.39",
+    "be-value-added": "0.0.30",
+    "mount-observer": "0.0.25",
+    "trans-render": "0.0.769"
   },
   "devDependencies": {
     "may-it-serve": "0.0.6",
-    "@playwright/test": "1.42.1"
+    "@playwright/test": "1.44.1"
   },
   "author": "anderson.bruce.b@gmail.com",
   "license": "MIT"

package/types.d.ts

@@ -1,14 +1,15 @@
 import { ActionOnEventConfigs } from "trans-render/froop/types";
-import {IBE, Declarations} from 'be-enhanced/types';
-import {BVAEndUserProps, BVAAllProps} from 'be-value-added/types';
+import {BVAEndUserProps, BVAAllProps, BVAActions} from 'be-value-added/types';
 
 export interface EndUserProps extends BVAEndUserProps{
     format?: Intl.NumberFormatOptions | Intl.DateTimeFormatOptions,
     locale?: string;
     observeAttr?: string;
+    currency?: string;
 }
 
 export interface AllProps extends EndUserProps, BVAAllProps{
+    attached?: boolean;
     intlDateFormat?: Intl.DateTimeFormat,
     intlNumberFormat?: Intl.NumberFormat,
 }
@@ -21,7 +22,7 @@ export type ProPAP = Promise<PAP>;
 
 export type POA = [PAP | undefined, ActionOnEventConfigs<PAP, Actions>];
 
-export interface Actions{
+export interface Actions extends BVAActions {
     formatNumber(self: this): void;
     formatDate(self: this): void;
     onFormattingChange(self: this): PAP;