@pacem/pacem-core 2.0.0-chebyshev → 2.0.0-euler

package/dist/browser/pacem-core.js

@@ -1,5 +1,5 @@
 /*!
- * @pacem/pacem-core v2.0.0-chebyshev (https://js.pacem.it)
+ * @pacem/pacem-core v2.0.0-euler (https://js.pacem.it)
  * Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */
@@ -3097,12 +3097,19 @@
     const WATCH_BIND_PREFIX = 'pacem:binding:';
     //const WATCH_THROTTLE_PREFIX: string = 'pacem:throttle:';
     const INSTANCE_CHILDREN_VAR = 'pacem:view-children';
+    const VIEWCHILD_SURFACES_VAR = 'pacem:view-children:surface';
     const HAS_BIND_PREFIX = 'pacem:has-binding:';
     const HAS_TEMPLATE_VAR = 'pacem:custom-element:has-template';
     const HASBEEN_TEMPLATED_VAR = 'pacem:custom-element:has-templated';
     const INSTANCE_PROMISE_VAR = 'pacem:custom-element:promise';
     const INSTANCE_READY_VAR = 'pacem:custom-element:ready';
     const INSTANCE_ONREADY_VAR = 'pacem:custom-element:startup';
+    const SURFACETHEME_FACE_ATTR = 'surface-face';
+    const SURFACETHEME_CONTENT_ATTR = 'surface-content';
+    const SURFACETHEME_MODIFIER_ATTR = 'surface-modifier';
+    /** the modifier of a host that is its own face */
+    const SURFACETHEME_FACE_MODIFIER = 'face';
+    const SURFACETHEME_CONTENT_MODIFIER = 'content';
     //const TYPE_OPTIONS_VAR = 'pacem:custom-element:options';
     function processBinding(element, property, binding) {
         var _this = element;
@@ -3143,8 +3150,8 @@
                                 //cancelAnimationFrame(_this[handleName]);
                                 //_this[handleName] = requestAnimationFrame(() => {
                                 _this[prop] = value.evaluate /*Async*/() /*.then(val => {
-                                    _this[prop] = val;
-                                })*/;
+                                        _this[prop] = val;
+                                    })*/;
                                 //});
                             }
                         }
@@ -3276,6 +3283,23 @@
                         //console.log(`${_this.localName} connected.`);
                         _this.setAttribute('pacem', '');
                         _this.setAttribute('cloak', '');
+                        const faces = GET_VAL$5(proto, VIEWCHILD_SURFACES_VAR) ?? [];
+                        if (!Utils.isNullOrEmpty(config.modifiers)
+                            // if any surface face gets declared then the host must be spotted as a **surface** host, even if empty in modifiers
+                            || !Utils.isNullOrEmpty(faces)) {
+                            const currentModifiers = _this.getAttribute(SURFACETHEME_MODIFIER_ATTR)?.split(/\s+/) ?? [];
+                            const ownModifiers = (config.modifiers ?? []).slice(0);
+                            if (!faces.some(f => f.face)) {
+                                // no faces declared: the host is its own face
+                                ownModifiers.push(SURFACETHEME_FACE_MODIFIER);
+                            }
+                            if (!faces.some(f => f.content)) {
+                                // no contents declared: the host is its own content
+                                ownModifiers.push(SURFACETHEME_CONTENT_MODIFIER);
+                            }
+                            const modifiers = currentModifiers.union(ownModifiers);
+                            _this.setAttribute(SURFACETHEME_MODIFIER_ATTR, modifiers.join(' ').trim().replace(/\s+/g, ' '));
+                        }
                         // reset INSTANCE_CHILDREN_VAR at connectedCallback
                         DEL_VAL$4(_this, INSTANCE_CHILDREN_VAR);
                         // ready to fire
@@ -3398,6 +3422,33 @@
                                 if (!Utils.isNull(deferred))
                                     deferred.resolve();
                             };
+                            // apply surface face attributes
+                            for (let item of faces) {
+                                const element = _this[item.ref];
+                                if (Utils.isNull(element)) {
+                                    continue;
+                                }
+                                // shadow dom
+                                if (config.shadow) {
+                                    if (item.content) {
+                                        const part = typeof item.content === 'string' ? item.content : 'content';
+                                        Utils.addPart(element, part);
+                                    }
+                                    if (item.face) {
+                                        const part = typeof item.face === 'string' ? item.face : 'face';
+                                        Utils.addPart(element, part);
+                                    }
+                                }
+                                else {
+                                    // non shadow dom
+                                    if (item.content) {
+                                        element.setAttribute(SURFACETHEME_CONTENT_ATTR, item.content.toString());
+                                    }
+                                    if (item.face) {
+                                        element.setAttribute(SURFACETHEME_FACE_ATTR, item.face.toString());
+                                    }
+                                }
+                            }
                             _this.removeAttribute('cloak');
                             //...now that the document is ready:
                             // fire original viewActivatedCallback
@@ -3524,7 +3575,7 @@
                                         // put proved to have relevant attribute empty. (e.g. some widget utils like `PacemWidgetFetchParameterElement` need this)
                                         || Utils.isNullOrEmpty(attr)) {
                                         var config;
-                                        if (val === undefined || val === null) {
+                                        if (Utils.isNull(val)) {
                                             _this.removeAttribute(attrName);
                                         }
                                         else if (property && (config = property.config) && typeof config.converter.convertBack === 'function') {
@@ -3705,19 +3756,23 @@
             }
         };
     }
-    /**
-     * Property decorator that turns a class field into a lazily-resolved, cached reference to a descendant
-     * element matching `selector`. Resolution happens on first read (via `shadowRoot.querySelectorAll` when
-     * available, falling back to the element itself), and only nodes whose `INSTANCE_HOST_VAR` points back
-     * at `this` are considered — this keeps the lookup scoped to the current element's own template output,
-     * skipping over descendants that belong to a nested custom element's own template. The cache is reset
-     * whenever the host element reconnects to the DOM (`connectedCallback`, see the {@link CustomElement} decorator).
-     *
-     * @param selector CSS selector identifying the child element to bind to.
-     * @returns A property decorator to apply to the view-child field (read-only; no setter is defined).
-     */
-    function ViewChild(selector) {
+    function ViewChild(selector, faceOrObj = false, content) {
+        let face;
+        // content falls back to face's truthy value when not provided.
+        if (typeof faceOrObj === 'object') {
+            const { face: face0, content: content0 } = faceOrObj;
+            face = face0;
+            content = content0 ?? (!!face0);
+        }
+        else {
+            face = faceOrObj;
+            content ??= (!!face);
+        }
         return (target, prop, descriptor) => {
+            if (face || content) {
+                const faces = GET_VAL$5(target, VIEWCHILD_SURFACES_VAR, []);
+                faces.push({ ref: prop, face, content });
+            }
             const key = `${prop}_${Utils.uniqueCode()}`;
             function findElement() {
                 const _this = this, nodelist = (_this.shadowRoot || _this).querySelectorAll(selector);
@@ -3733,7 +3788,7 @@
                 const _this = this;
                 // reset INSTANCE_CHILDREN_VAR on connectedCallback!
                 const dict = GET_VAL$5(_this, INSTANCE_CHILDREN_VAR, {});
-                return dict[key] = dict[key] || findElement.call(_this);
+                return dict[key] ??= findElement.call(_this);
             }
             if (delete target[prop]) {
                 Object.defineProperty(target, prop, {
@@ -5112,10 +5167,11 @@
             this._tabIndex = -1;
             /** Gets or sets the list of behaviors to attach to this element. */
             this.behaviors = [];
-            this._aria = new ElementAria(this, role, aria);
+            this.#aria = new ElementAria(this, role, aria);
         }
         // #region ARIA
-        get aria() { return this._aria; }
+        get aria() { return this.#aria; }
+        #aria;
         // #endregion
         static #stdEvtsMemoizer = null;
         static get emittedEventTypes() {
@@ -5125,10 +5181,11 @@
         #parts;
         connectedCallback() {
             super.connectedCallback();
-            if (!Utils.isNullOrEmpty(this._aria.role)) {
-                this.setAttribute('role', this._aria.role);
+            const aria = this.#aria;
+            if (!Utils.isNullOrEmpty(aria.role)) {
+                this.setAttribute('role', aria.role);
             }
-            let ariaAttrs = this._aria.attributes.toObject();
+            let ariaAttrs = aria.attributes.toObject();
             if (!Utils.isNullOrEmpty(ariaAttrs)) {
                 for (let name in ariaAttrs) {
                     this.setAttribute('aria-' + name, ariaAttrs[name]);