@sebgroup/green-core 2.18.0 → 2.19.0

package/utils/helpers/component-meta.js

@@ -0,0 +1,276 @@
+import "../../chunks/chunk.QU3DSPNU.js";
+class CemParser {
+  /**
+   * Loads and parses the CEM file
+   */
+  static async loadManifest(cemPath = "../../custom-elements.json") {
+    const cemModule = await import(cemPath);
+    return cemModule.default;
+  }
+  /**
+   * Extracts modules that contain web components
+   */
+  static getComponentModules(manifest) {
+    return manifest.modules.filter(
+      (mod) => mod.declarations?.some((declaration) => {
+        const d = declaration;
+        return d.tagName && d.customElement === true;
+      })
+    );
+  }
+  /**
+   * Extracts component data from a JavaScriptModule declaration
+   */
+  static extractComponentData(mod, declaration) {
+    const className = declaration.name;
+    const tagName = declaration.tagName;
+    return {
+      tagName,
+      className,
+      description: declaration.description,
+      outputPath: mod.path,
+      sourcePath: mod.path,
+      properties: this.extractProperties(declaration),
+      events: this.extractEvents(declaration),
+      slots: this.extractSlots(declaration),
+      methods: this.extractMethods(declaration),
+      isFormControl: this.isFormControl(declaration),
+      isLinkComponent: this.isLinkComponent(declaration),
+      isCheckboxComponent: this.isCheckboxComponent(tagName)
+    };
+  }
+  /**
+   * Checks if a component is a form control by looking for properties inherited from GdsFormControlElement
+   */
+  static isFormControl(declaration) {
+    if (!declaration.members) return false;
+    return declaration.members.some(
+      (member) => member.inheritedFrom?.name === "GdsFormControlElement" && member.inheritedFrom?.module === "src/components/form/form-control.ts"
+    );
+  }
+  /**
+   * Checks if a component supports routing by looking for an 'href' property
+   */
+  static isLinkComponent(declaration) {
+    if (!declaration.members) return false;
+    return declaration.members.some(
+      (member) => member.kind === "field" && member.name === "href" && member.privacy !== "private" && member.privacy !== "protected"
+    );
+  }
+  /**
+   * Checks if a component is a checkbox by checking the tag name
+   * Checkboxes need special handling to work with boolean checked state instead of string values
+   */
+  static isCheckboxComponent(tagName) {
+    return tagName === "gds-checkbox";
+  }
+  /**
+   * Extracts properties
+   */
+  static extractProperties(declaration) {
+    if (!declaration.members) return [];
+    return declaration.members.filter(
+      (member) => member.name?.length > 0 && member.kind === "field" && member.privacy !== "private" && member.privacy !== "protected" && !member.readonly && !member.static
+    ).map((field) => ({
+      kind: "field",
+      name: field.name,
+      type: field.type,
+      defaultValue: field.default,
+      description: field.description
+    }));
+  }
+  /**
+   * Extracts events
+   */
+  static extractEvents(declaration) {
+    if (!declaration.events) return [];
+    return declaration.events.filter((event) => event.name && !event.inheritedFrom).map((event) => ({
+      name: event.name,
+      // Store original event name
+      type: this.mapEventType(event.type?.text, event.name),
+      description: event.description
+    }));
+  }
+  /**
+   * Extracts slot information
+   */
+  static extractSlots(declaration) {
+    if (!declaration.slots) return [];
+    return declaration.slots.map((slot) => ({
+      name: slot.name || "default",
+      description: slot.description
+    }));
+  }
+  /**
+   * Extracts public methods
+   */
+  static extractMethods(declaration) {
+    if (!declaration.members) return [];
+    return declaration.members.filter(
+      (member) => member.kind === "method" && member.privacy !== "private" && !member.static && !member.inheritedFrom && !member.name.startsWith("_")
+    ).map((method) => ({
+      name: method.name,
+      description: method.description,
+      returnType: method.return?.type,
+      parameters: method.parameters?.map((param) => ({
+        name: param.name,
+        type: param.type?.text || "any",
+        optional: param.optional || false
+      })) || []
+    }));
+  }
+  /**
+   * Maps CEM event types to TypeScript types
+   */
+  static mapEventType(cemType, eventName) {
+    if (cemType) {
+      if (cemType === "CustomEvent") {
+        return "CustomEvent<any>";
+      }
+      return cemType;
+    }
+    if (!eventName) return "Event";
+    const standardEventMap = {
+      click: "MouseEvent",
+      dblclick: "MouseEvent",
+      mousedown: "MouseEvent",
+      mouseup: "MouseEvent",
+      mouseover: "MouseEvent",
+      mouseout: "MouseEvent",
+      mousemove: "MouseEvent",
+      mouseenter: "MouseEvent",
+      mouseleave: "MouseEvent",
+      contextmenu: "MouseEvent",
+      keydown: "KeyboardEvent",
+      keyup: "KeyboardEvent",
+      keypress: "KeyboardEvent",
+      focus: "FocusEvent",
+      blur: "FocusEvent",
+      focusin: "FocusEvent",
+      focusout: "FocusEvent",
+      input: "InputEvent",
+      change: "Event",
+      submit: "SubmitEvent",
+      reset: "Event",
+      scroll: "Event",
+      resize: "UIEvent",
+      load: "Event",
+      unload: "Event",
+      error: "ErrorEvent",
+      touchstart: "TouchEvent",
+      touchend: "TouchEvent",
+      touchmove: "TouchEvent",
+      touchcancel: "TouchEvent",
+      wheel: "WheelEvent",
+      drag: "DragEvent",
+      dragstart: "DragEvent",
+      dragend: "DragEvent",
+      dragenter: "DragEvent",
+      dragleave: "DragEvent",
+      dragover: "DragEvent",
+      drop: "DragEvent"
+    };
+    const standardType = standardEventMap[eventName];
+    if (standardType) {
+      return standardType;
+    }
+    if (eventName.startsWith("gds-") || eventName.includes("-")) {
+      return "CustomEvent<any>";
+    }
+    return "Event";
+  }
+  /**
+   * Finds primitives that are re-exported by component modules
+   */
+  static findReExportedPrimitives(manifest) {
+    const reExportedPrimitives = [];
+    for (const JavaScriptModule of manifest.modules) {
+      if (!JavaScriptModule.path.includes("/components/") || !JavaScriptModule.exports) {
+        continue;
+      }
+      for (const exportDecl of JavaScriptModule.exports) {
+        if (exportDecl.declaration?.module?.includes("primitives/")) {
+          const primitivePackage = exportDecl.declaration.module;
+          const primitiveModule = manifest.modules.find(
+            (m) => m.path.includes(
+              primitivePackage.replace(/^\.\.\//, "src/").replace(
+                /^\.\//,
+                JavaScriptModule.path.replace(/\/[^/]+$/, "/")
+              )
+            )
+          );
+          if (primitiveModule?.declarations) {
+            for (const primitiveDecl of primitiveModule.declarations) {
+              if (primitiveDecl.customElement && primitiveDecl.tagName) {
+                reExportedPrimitives.push({
+                  primitiveName: primitiveDecl.tagName,
+                  primitiveClass: primitiveDecl.name,
+                  reExportModule: JavaScriptModule.path,
+                  reExportPath: JavaScriptModule.path.replace(/^src\//, "").replace(/\.ts$/, ".js")
+                });
+              }
+            }
+          }
+        }
+      }
+    }
+    return reExportedPrimitives;
+  }
+  /**
+   * Parses all components from the manifest
+   */
+  static async parseAllComponents(manifestPath) {
+    const manifest = await this.loadManifest(manifestPath);
+    const componentModules = this.getComponentModules(manifest);
+    const reExportedPrimitives = this.findReExportedPrimitives(manifest);
+    const components = [];
+    for (const JavaScriptModule of componentModules) {
+      if (JavaScriptModule.path.includes("/primitives/")) {
+        continue;
+      }
+      for (const declaration of JavaScriptModule.declarations || []) {
+        if (declaration.tagName && declaration.customElement === true) {
+          const componentData = this.extractComponentData(
+            JavaScriptModule,
+            declaration
+          );
+          components.push(componentData);
+        }
+      }
+    }
+    const primitiveMap = /* @__PURE__ */ new Map();
+    for (const reExported of reExportedPrimitives) {
+      if (primitiveMap.has(reExported.primitiveClass)) {
+        continue;
+      }
+      const primitiveModule = manifest.modules.find(
+        (m) => m.declarations?.some((d) => d.name === reExported.primitiveClass)
+      );
+      if (primitiveModule) {
+        const primitiveDecl = primitiveModule.declarations?.find(
+          (d) => d.name === reExported.primitiveClass
+        );
+        if (primitiveDecl) {
+          const componentData = this.extractComponentData(
+            primitiveModule,
+            primitiveDecl
+          );
+          componentData.sourcePath = reExported.reExportModule;
+          primitiveMap.set(reExported.primitiveClass, componentData);
+        }
+      }
+    }
+    components.push(...primitiveMap.values());
+    return { components, reExportedPrimitives };
+  }
+  /**
+   * Parses a single component by tag name
+   */
+  static async parseComponent(tagName, manifestPath) {
+    const { components } = await this.parseAllComponents(manifestPath);
+    return components.find((comp) => comp.tagName === tagName) || null;
+  }
+}
+export {
+  CemParser
+};

package/utils/helpers/component-meta.types.d.ts

@@ -0,0 +1,68 @@
+/**
+ * TypeScript interfaces for Custom Elements Manifest (CEM) structure
+ * Based on the schema used in custom-elements.json
+ */
+import { CustomElementField, Type } from 'custom-elements-manifest';
+/**
+ * Processed component meta data
+ */
+export interface ComponentData {
+    /** Original component class name (e.g., 'GdsAlert') */
+    className: string;
+    /** Web component tag name (e.g., 'gds-alert') */
+    tagName: string;
+    /** Component description */
+    description?: string;
+    /** File path where component will be generated */
+    outputPath: string;
+    /** Original source file path from the manifest (e.g., 'src/components/alert/alert.component.ts') */
+    sourcePath: string;
+    /** Input properties from attributes and reflected fields */
+    properties: CustomElementField[];
+    /** Output events */
+    events: ComponentEvent[];
+    /** Content projection slots */
+    slots: SlotInfo[];
+    /** Public methods that should be exposed */
+    methods: MethodInfo[];
+    /** Whether this component is a form control (extends GdsFormControlElement) */
+    isFormControl?: boolean;
+    /** Whether this component supports routing (has an href property) */
+    isLinkComponent?: boolean;
+    /** Whether this component is a checkbox (gds-checkbox) that needs special boolean handling */
+    isCheckboxComponent?: boolean;
+}
+export interface ComponentEvent {
+    /** Original event name from web component (e.g., 'gds-close') */
+    name: string;
+    /** Event type (e.g., 'CustomEvent<string>') */
+    type: string;
+    /** Event description */
+    description?: string;
+}
+export interface SlotInfo {
+    /** Slot name (empty string for default slot) */
+    name: string;
+    /** Slot description */
+    description?: string;
+}
+export interface MethodInfo {
+    /** Method name */
+    name: string;
+    /** Return type */
+    returnType?: Type;
+    /** Method parameters */
+    parameters: ParameterInfo[];
+    /** Method description */
+    description?: string;
+}
+export interface ParameterInfo {
+    /** Parameter name */
+    name: string;
+    /** Parameter type */
+    type: string;
+    /** Whether parameter is optional */
+    optional: boolean;
+    /** Parameter description */
+    description?: string;
+}

package/utils/helpers/custom-element-scoping.d.ts

@@ -105,7 +105,7 @@ export declare const html: (strings: TemplateStringsArray, ...values: any[]) =>
  * Returns the correctly scoped tag name for the given tag.
  * @param tagName The tag name to scope
  */
-export declare function getScopedTagName(tagName: string): string;
+export declare function getScopedTagName(tagName: string, alwaysAddSuffix?: boolean): string;
 /**
  * Returns the unscoped tag name for the given scoped tag.
  * @param tagName The scoped tag name to unscope

package/utils/helpers/custom-element-scoping.js

@@ -1,6 +1,6 @@
 import "../../chunks/chunk.QU3DSPNU.js";
 import { html as litHtml } from "lit";
-const VER_SUFFIX = "-891d0f";
+const VER_SUFFIX = "-607d3a";
 class ScopedElementRegistry {
   static get instance() {
     if (!globalThis.__gdsElementLookupTable?.[VER_SUFFIX])
@@ -60,8 +60,8 @@ function htmlTemplateTagFactory(extendedTag) {
   };
 }
 const html = htmlTemplateTagFactory(litHtml);
-function getScopedTagName(tagName) {
-  return ScopedElementRegistry.instance.get(tagName) ?? tagName;
+function getScopedTagName(tagName, alwaysAddSuffix = false) {
+  return ScopedElementRegistry.instance.get(tagName) ?? tagName + (alwaysAddSuffix ? VER_SUFFIX : "");
 }
 function getUnscopedTagName(tagName) {
   return [...ScopedElementRegistry.instance.entries()].find(

package/utils/mixins/focusable.js

@@ -1,9 +1,13 @@
 import "../../chunks/chunk.QU3DSPNU.js";
 const Focusable = (superClass) => {
   class HighlightableElement extends superClass {
-    constructor() {
-      super(...arguments);
-      this.onblur = (e) => {
+    focus(options) {
+      this.setAttribute("tabindex", "0");
+      super.focus(options);
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      this.addEventListener("blur", (e) => {
         this.setAttribute("tabindex", "-1");
         this.dispatchEvent(
           new FocusEvent("gds-blur", {
@@ -12,8 +16,8 @@ const Focusable = (superClass) => {
             relatedTarget: e.relatedTarget
           })
         );
-      };
-      this.onfocus = (e) => {
+      });
+      this.addEventListener("focus", (e) => {
         this.dispatchEvent(
           new FocusEvent("gds-focus", {
             bubbles: false,
@@ -21,11 +25,7 @@ const Focusable = (superClass) => {
             relatedTarget: e.relatedTarget
           })
         );
-      };
-    }
-    focus(options) {
-      this.setAttribute("tabindex", "0");
-      super.focus(options);
+      });
     }
   }
   return HighlightableElement;