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

package/dist/bundle/pacem-core.mjs

@@ -1,5 +1,5 @@
 /*!
- * @pacem/pacem-core v2.0.0-chebyshev (https://js.pacem.it)
+ * @pacem/pacem-core v2.0.0-davinci (https://js.pacem.it)
  * Pacem (https://pacem.it)
  * Licensed under Apache-2.0
  */
@@ -2826,12 +2826,18 @@ var WATCH_PROP_PREFIX = "pacem:property:";
 var WATCH_VERS_PROP = "pacem:version";
 var WATCH_BIND_PREFIX = "pacem:binding:";
 var INSTANCE_CHILDREN_VAR = "pacem:view-children";
+var VIEWCHILD_SURFACES_VAR = "pacem:view-children:surface";
 var HAS_BIND_PREFIX = "pacem:has-binding:";
 var HAS_TEMPLATE_VAR = "pacem:custom-element:has-template";
 var HASBEEN_TEMPLATED_VAR = "pacem:custom-element:has-templated";
 var INSTANCE_PROMISE_VAR = "pacem:custom-element:promise";
 var INSTANCE_READY_VAR = "pacem:custom-element:ready";
 var INSTANCE_ONREADY_VAR = "pacem:custom-element:startup";
+var SURFACETHEME_FACE_ATTR = "surface-face";
+var SURFACETHEME_CONTENT_ATTR = "surface-content";
+var SURFACETHEME_MODIFIER_ATTR = "surface-modifier";
+var SURFACETHEME_FACE_MODIFIER = "face";
+var SURFACETHEME_CONTENT_MODIFIER = "content";
 function processBinding(element, property, binding) {
   var _this = element;
   const prop = property;
@@ -2955,6 +2961,19 @@ var CustomElement = (config) => {
           const _this = this;
           _this.setAttribute("pacem", "");
           _this.setAttribute("cloak", "");
+          const faces = GET_VAL2(proto, VIEWCHILD_SURFACES_VAR) ?? [];
+          if (!Utils.isNullOrEmpty(config.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)) {
+              ownModifiers.push(SURFACETHEME_FACE_MODIFIER);
+            }
+            if (!faces.some((f) => f.content)) {
+              ownModifiers.push(SURFACETHEME_CONTENT_MODIFIER);
+            }
+            const modifiers = currentModifiers.union(ownModifiers);
+            _this.setAttribute(SURFACETHEME_MODIFIER_ATTR, modifiers.join(" ").trim().replace(/\s+/g, " "));
+          }
           DEL_VAL(_this, INSTANCE_CHILDREN_VAR);
           if (originalConnectedCallback && originalConnectedCallback.value)
             originalConnectedCallback.value.apply(_this, []);
@@ -3049,6 +3068,29 @@ var CustomElement = (config) => {
               if (!Utils.isNull(deferred))
                 deferred.resolve();
             };
+            for (let item of faces) {
+              const element = _this[item.ref];
+              if (Utils.isNull(element)) {
+                continue;
+              }
+              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 {
+                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");
             Promise.all(promises).then((_) => fireViewActivated());
           });
@@ -3162,7 +3204,7 @@ ${e.message ?? e}`);
                 var attrName = CustomElementUtils.camelToKebab(name), attr = _this.attributes.getNamedItem(attrName);
                 if (ready || Utils.isNullOrEmpty(attr)) {
                   var config2;
-                  if (val === void 0 || val === null) {
+                  if (Utils.isNull(val)) {
                     _this.removeAttribute(attrName);
                   } else if (property && (config2 = property.config) && typeof config2.converter.convertBack === "function") {
                     const sval = config2.converter.convertBack(val, _this);
@@ -3306,8 +3348,21 @@ function Watch(config) {
     }
   };
 }
-function ViewChild(selector) {
+function ViewChild(selector, faceOrObj = false, content) {
+  let face;
+  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_VAL2(target, VIEWCHILD_SURFACES_VAR, []);
+      faces.push({ ref: prop, face, content });
+    }
     const key2 = `${prop}_${Utils.uniqueCode()}`;
     function findElement() {
       const _this = this, nodelist = (_this.shadowRoot || _this).querySelectorAll(selector);
@@ -3322,7 +3377,7 @@ function ViewChild(selector) {
     function getter() {
       const _this = this;
       const dict = GET_VAL2(_this, INSTANCE_CHILDREN_VAR, {});
-      return dict[key2] = dict[key2] || findElement.call(_this);
+      return dict[key2] ??= findElement.call(_this);
     }
     if (delete target[prop]) {
       Object.defineProperty(target, prop, {
@@ -4568,12 +4623,13 @@ var PacemElement = class extends PacemEventTarget {
     this.#parts = [];
     this._tabIndex = -1;
     this.behaviors = [];
-    this._aria = new ElementAria(this, role, aria);
+    this.#aria = new ElementAria(this, role, aria);
   }
   // #region ARIA
   get aria() {
-    return this._aria;
+    return this.#aria;
   }
+  #aria;
   // #endregion
   static #stdEvtsMemoizer = null;
   static get emittedEventTypes() {
@@ -4583,10 +4639,11 @@ var PacemElement = class extends PacemEventTarget {
   #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]);