@universityofmaryland/web-model-library 1.0.0

package/dist/attributes/values.mjs

@@ -0,0 +1,81 @@
+const campaign = {
+  forward: "forward"
+};
+const data = {
+  type: {
+    academic: "academic"
+  }
+};
+const display = {
+  block: "block",
+  feature: "feature",
+  featured: "featured",
+  hero: "hero",
+  image: "image",
+  list: "list",
+  minimal: "minimal",
+  overlay: "overlay",
+  promo: "promo",
+  short: "short",
+  stacked: "stacked",
+  standard: "standard",
+  statement: "statement",
+  sticky: "sticky",
+  tabular: "tabular"
+};
+const layout = {
+  center: "center",
+  defaultCentered: "default-centered",
+  defaultInteriorCentered: "default-interior-centered",
+  defaultInterior: "default-interior",
+  fixed: "fixed",
+  fullImage: "full-image",
+  full: "full",
+  large: "large",
+  small: "small",
+  left: "left",
+  right: "right",
+  stackedInterior: "stacked-interior"
+};
+const search = {
+  domain: "domain"
+};
+const size = {
+  NORMAL: "normal",
+  LARGE: "large"
+};
+const state = {
+  CLOSED: "closed",
+  FALSE: "false",
+  OPENED: "open",
+  TRUE: "true"
+};
+const theme = {
+  DARK: "dark",
+  GOLD: "gold",
+  LIGHT: "light",
+  MARYLAND: "maryland"
+};
+const type = {
+  OUTLINE: "outline",
+  PRIMARY: "primary",
+  SECONDARY: "secondary",
+  MEGA: "mega",
+  VISUAL: "visual",
+  SIMPLE: "simple"
+};
+const AttributeValues = {
+  campaign,
+  data,
+  display,
+  layout,
+  search,
+  size,
+  state,
+  theme,
+  type
+};
+export {
+  AttributeValues as default
+};
+//# sourceMappingURL=values.mjs.map

package/dist/attributes/values.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"values.mjs","sources":["../../source/attributes/values.ts"],"sourcesContent":["// Values\n\nconst campaign = {\n  forward: 'forward',\n};\n\nconst data = {\n  type: {\n    academic: 'academic',\n  },\n};\n\nconst display = {\n  block: 'block',\n  feature: 'feature',\n  featured: 'featured',\n  hero: 'hero',\n  image: 'image',\n  list: 'list',\n  minimal: 'minimal',\n  overlay: 'overlay',\n  promo: 'promo',\n  short: 'short',\n  stacked: 'stacked',\n  standard: 'standard',\n  statement: 'statement',\n  sticky: 'sticky',\n  tabular: 'tabular',\n};\n\nconst layout = {\n  center: 'center',\n  defaultCentered: 'default-centered',\n  defaultInteriorCentered: 'default-interior-centered',\n  defaultInterior: 'default-interior',\n  fixed: 'fixed',\n  fullImage: 'full-image',\n  full: 'full',\n  large: 'large',\n  small: 'small',\n  left: 'left',\n  right: 'right',\n  stackedInterior: 'stacked-interior',\n};\n\nconst search = {\n  domain: 'domain',\n};\n\nconst size = {\n  NORMAL: 'normal',\n  LARGE: 'large',\n};\n\nconst state = {\n  CLOSED: 'closed',\n  FALSE: 'false',\n  OPENED: 'open',\n  TRUE: 'true',\n};\n\nconst theme = {\n  DARK: 'dark',\n  GOLD: 'gold',\n  LIGHT: 'light',\n  MARYLAND: 'maryland',\n};\n\nconst type = {\n  OUTLINE: 'outline',\n  PRIMARY: 'primary',\n  SECONDARY: 'secondary',\n  MEGA: 'mega',\n  VISUAL: 'visual',\n  SIMPLE: 'simple',\n};\n\nconst AttributeValues = {\n  campaign,\n  data,\n  display,\n  layout,\n  search,\n  size,\n  state,\n  theme,\n  type,\n};\n\nexport default AttributeValues;\n"],"names":[],"mappings":"AAEA,MAAM,WAAW;AAAA,EACf,SAAS;AACX;AAEA,MAAM,OAAO;AAAA,EACX,MAAM;AAAA,IACJ,UAAU;AAAA,EAAA;AAEd;AAEA,MAAM,UAAU;AAAA,EACd,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU;AAAA,EACV,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,SAAS;AACX;AAEA,MAAM,SAAS;AAAA,EACb,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,yBAAyB;AAAA,EACzB,iBAAiB;AAAA,EACjB,OAAO;AAAA,EACP,WAAW;AAAA,EACX,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM;AAAA,EACN,OAAO;AAAA,EACP,iBAAiB;AACnB;AAEA,MAAM,SAAS;AAAA,EACb,QAAQ;AACV;AAEA,MAAM,OAAO;AAAA,EACX,QAAQ;AAAA,EACR,OAAO;AACT;AAEA,MAAM,QAAQ;AAAA,EACZ,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AACR;AAEA,MAAM,QAAQ;AAAA,EACZ,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AACZ;AAEA,MAAM,OAAO;AAAA,EACX,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AACV;AAEA,MAAM,kBAAkB;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;"}

package/dist/attributes.d.ts

@@ -0,0 +1,2 @@
+export * from './attributes/index'
+export {}

package/dist/attributes.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const handler = require("./attributes/handler.js");
+const names = require("./attributes/names.js");
+const values = require("./attributes/values.js");
+const checks = require("./attributes/checks.js");
+exports.handler = handler;
+exports.names = names;
+exports.values = values;
+exports.getValue = checks.getValue;
+exports.hasDecoration = checks.hasDecoration;
+exports.hasInfo = checks.hasInfo;
+exports.includesFeature = checks.includesFeature;
+exports.includesSharing = checks.includesSharing;
+exports.isData = checks.isData;
+exports.isDisplay = checks.isDisplay;
+exports.isInfo = checks.isInfo;
+exports.isLayout = checks.isLayout;
+exports.isSharing = checks.isSharing;
+exports.isTheme = checks.isTheme;
+exports.isType = checks.isType;
+exports.isVisual = checks.isVisual;
+//# sourceMappingURL=attributes.js.map

package/dist/attributes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attributes.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

package/dist/attributes.mjs

@@ -0,0 +1,23 @@
+import { default as default2 } from "./attributes/handler.mjs";
+import { default as default3 } from "./attributes/names.mjs";
+import { default as default4 } from "./attributes/values.mjs";
+import { getValue, hasDecoration, hasInfo, includesFeature, includesSharing, isData, isDisplay, isInfo, isLayout, isSharing, isTheme, isType, isVisual } from "./attributes/checks.mjs";
+export {
+  getValue,
+  default2 as handler,
+  hasDecoration,
+  hasInfo,
+  includesFeature,
+  includesSharing,
+  isData,
+  isDisplay,
+  isInfo,
+  isLayout,
+  isSharing,
+  isTheme,
+  isType,
+  isVisual,
+  default3 as names,
+  default4 as values
+};
+//# sourceMappingURL=attributes.mjs.map

package/dist/attributes.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"attributes.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+import { default as Slots, SlotProps } from './slots';
+import { BaseProps, OptionalProps, SlotResult } from './slots/create';
+import * as Attributes from './attributes';
+import * as Model from './model';
+import * as Register from './utilities/register';
+import * as Lifecycle from './utilities/lifecycle';
+export type * from './_types';
+export { Attributes, Model, Register, Slots, Lifecycle };
+export type { SlotProps, BaseProps, OptionalProps, SlotResult };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../source/index.ts"],"names":[],"mappings":"AA8DA,OAAO,KAAK,UAAU,MAAM,cAAc,CAAC;AAC3C,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,OAAO,KAAK,QAAQ,MAAM,sBAAsB,CAAC;AACjD,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,KAAK,SAAS,MAAM,uBAAuB,CAAC;AACnD,OAAO,EACL,KAAK,SAAS,EACd,KAAK,aAAa,EAClB,KAAK,UAAU,EAChB,MAAM,gBAAgB,CAAC;AAGxB,mBAAmB,UAAU,CAAC;AAG9B,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;AAGzD,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC"}

package/dist/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const attributes = require("./attributes.js");
+const model = require("./model.js");
+const register = require("./utilities/register.js");
+const slots = require("./slots.js");
+const lifecycle = require("./utilities/lifecycle.js");
+exports.Attributes = attributes;
+exports.Model = model;
+exports.Register = register;
+exports.Slots = slots;
+exports.Lifecycle = lifecycle;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/dist/index.mjs

@@ -0,0 +1,13 @@
+import * as attributes from "./attributes.mjs";
+import * as model from "./model.mjs";
+import * as register from "./utilities/register.mjs";
+import { default as default2 } from "./slots.mjs";
+import * as lifecycle from "./utilities/lifecycle.mjs";
+export {
+  attributes as Attributes,
+  lifecycle as Lifecycle,
+  model as Model,
+  register as Register,
+  default2 as Slots
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/model/index.d.ts

@@ -0,0 +1,43 @@
+import { SlotConfig, ComponentEventDetail, ElementRef } from '../_types';
+interface AttributeConfig {
+    name: string;
+    handler: (element: ElementRef, oldValue: string, newValue: string) => void;
+}
+interface ComponentLifecycle {
+    beforeConnect?: (ref: ElementRef, shadow: ShadowRoot) => void;
+    afterConnect?: (ref: ElementRef, shadow: ShadowRoot) => void;
+    onReady?: (ref: ElementRef, shadow: ShadowRoot) => void;
+}
+interface ComponentConfig extends ComponentLifecycle {
+    tagName: string;
+    attributes?: AttributeConfig[];
+    slots?: Record<string, SlotConfig>;
+    createComponent: (host: HTMLElement) => ElementRef;
+}
+declare const ComponentConfig: (config: ComponentConfig) => <T extends typeof BaseComponent>(constructor: T) => T;
+declare class BaseComponent extends HTMLElement {
+    static componentConfig: ComponentConfig;
+    protected shadow: ShadowRoot;
+    protected elementRef: ElementRef | null;
+    protected config: ComponentConfig;
+    constructor();
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    protected initializeComponent(): void;
+    protected setupShadowDom(component: ElementRef): void;
+    protected validateConfig(): void;
+    protected afterInit(): Promise<void>;
+    protected handleAttributeChange(name: string, oldValue: string, newValue: string): void;
+    protected cleanup(): void;
+    protected dispatchComponentEvent<T extends ComponentEventDetail>(eventName: string, detail: Omit<T, 'tagName' | 'element' | 'timestamp'>): void;
+    protected handleError(message: string, error: unknown): void;
+    private validateSlots;
+    private executeLifecycleCallbacks;
+    private executeCallback;
+    getRef(): ElementRef | null;
+}
+declare const createCustomElement: (config: ComponentConfig) => typeof BaseComponent;
+export { createCustomElement, BaseComponent, type ComponentConfig, type AttributeConfig, };
+//# sourceMappingURL=index.d.ts.map

package/dist/model/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../source/model/index.ts"],"names":[],"mappings":"AAsCA,OAAO,KAAK,EACV,UAAU,EACV,oBAAoB,EAGpB,UAAU,EACX,MAAM,WAAW,CAAC;AAEnB,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5E;AASD,UAAU,kBAAkB;IAC1B,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC9D,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7D,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;CACzD;AAED,UAAU,eAAgB,SAAQ,kBAAkB;IAClD,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,eAAe,EAAE,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACnC,eAAe,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,UAAU,CAAC;CACpD;AAGD,QAAA,MAAM,eAAe,GAAI,QAAQ,eAAe,MAC7B,CAAC,SAAS,OAAO,aAAa,EAAE,aAAa,CAAC,MAIhE,CAAC;AAUF,cAAM,aAAc,SAAQ,WAAW;IACrC,MAAM,CAAC,eAAe,EAAE,eAAe,CAAC;IAExC,SAAS,CAAC,MAAM,EAAE,UAAU,CAAC;IAC7B,SAAS,CAAC,UAAU,EAAE,UAAU,GAAG,IAAI,CAAQ;IAC/C,SAAS,CAAC,MAAM,EAAE,eAAe,CAAC;;IAkBlC,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;IAI5B,wBAAwB,CACtB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,GACf,IAAI;IAUP,SAAS,CAAC,mBAAmB,IAAI,IAAI;IAoBrC,SAAS,CAAC,cAAc,CAAC,SAAS,EAAE,UAAU,GAAG,IAAI;IAOrD,SAAS,CAAC,cAAc,IAAI,IAAI;cAuBhB,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC;IAe1C,SAAS,CAAC,qBAAqB,CAC7B,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,GACf,IAAI;IAYP,SAAS,CAAC,OAAO,IAAI,IAAI;IAOzB,SAAS,CAAC,sBAAsB,CAAC,CAAC,SAAS,oBAAoB,EAC7D,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,IAAI,CAAC,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,CAAC,GACnD,IAAI;IAiBP,SAAS,CAAC,WAAW,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI;IAiB5D,OAAO,CAAC,aAAa;YA+DP,yBAAyB;YAYzB,eAAe;IActB,MAAM,IAAI,UAAU,GAAG,IAAI;CAGnC;AAuBD,QAAA,MAAM,mBAAmB,GAAI,QAAQ,eAAe,KAAG,OAAO,aAS7D,CAAC;AAEF,OAAO,EACL,mBAAmB,EACnB,aAAa,EACb,KAAK,eAAe,EACpB,KAAK,eAAe,GACrB,CAAC"}

package/dist/model.d.ts

@@ -0,0 +1,2 @@
+export * from './model/index'
+export {}

package/dist/model.js

@@ -0,0 +1,259 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styles = require("./utilities/styles.js");
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __decoratorStart = (base) => [, , , __create(base?.[__knownSymbol("metadata")] ?? null)];
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) fns[i].call(self);
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var it, done, ctx, k = flags & 7, p = false;
+  var j = 0;
+  var extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (target = target.prototype, k < 5 && (k > 3 || !p) && __getOwnPropDesc(target, name));
+  __name(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    it = (0, decorators[i])(target, ctx), done._ = 1;
+    __expectFn(it) && (target = it);
+  }
+  return __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+const ComponentConfig = (config) => {
+  return function(constructor) {
+    constructor.componentConfig = config;
+    return constructor;
+  };
+};
+class BaseComponent extends HTMLElement {
+  constructor() {
+    super();
+    this.elementRef = null;
+    const constructor = this.constructor;
+    this.config = constructor.componentConfig;
+    if (!this.config) {
+      throw new Error(
+        "Component config not found. Did you forget to use the @Component decorator?"
+      );
+    }
+    this.shadow = this.attachShadow({ mode: "open" });
+    this.validateConfig();
+  }
+  static get observedAttributes() {
+    return this.componentConfig?.attributes?.map((attr) => attr.name) || [];
+  }
+  connectedCallback() {
+    try {
+      this.initializeComponent();
+    } catch (error) {
+      this.handleError("Failed to initialize component", error);
+    }
+  }
+  disconnectedCallback() {
+    this.cleanup();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    try {
+      this.handleAttributeChange(name, oldValue, newValue);
+    } catch (error) {
+      this.handleError(`Failed to handle attribute change: ${name}`, error);
+    }
+  }
+  initializeComponent() {
+    try {
+      this.validateSlots();
+      const componentRef = this.config.createComponent(this);
+      if (!componentRef || !componentRef.element) {
+        throw new Error(
+          "Component creation failed: Invalid component reference"
+        );
+      }
+      this.elementRef = componentRef;
+      this.setupShadowDom(componentRef);
+      this.afterInit();
+    } catch (error) {
+      this.handleError("Failed to initialize component", error);
+    }
+  }
+  setupShadowDom(component) {
+    this.shadow.appendChild(
+      styles({ styles: component.styles || "" }).content.cloneNode(true)
+    );
+    this.shadow.appendChild(component.element);
+  }
+  validateConfig() {
+    const requiredFields = [
+      "tagName",
+      "createComponent"
+    ];
+    requiredFields.forEach((field) => {
+      if (!this.config[field]) {
+        throw new Error(`Missing required config field: ${field}`);
+      }
+    });
+    if (this.config.attributes) {
+      this.config.attributes.forEach((attr) => {
+        if (!attr.name || !attr.handler) {
+          throw new Error(
+            "Invalid attribute config: requires name and handler"
+          );
+        }
+      });
+    }
+  }
+  async afterInit() {
+    if (!this.elementRef) {
+      this.handleError("Cannot initialize - missing element reference", null);
+      return;
+    }
+    await this.executeLifecycleCallbacks();
+    this.dispatchComponentEvent("umdComponent:ready", {
+      shadowRoot: this.shadow,
+      ref: this.elementRef
+    });
+  }
+  handleAttributeChange(name, oldValue, newValue) {
+    if (!this.elementRef) return;
+    const handler = this.config.attributes?.find(
+      (attr) => attr.name === name
+    )?.handler;
+    if (handler) {
+      handler(this.elementRef, oldValue, newValue);
+    }
+  }
+  cleanup() {
+    this.elementRef = null;
+  }
+  /**
+   * Helper method to dispatch component events with consistent structure
+   */
+  dispatchComponentEvent(eventName, detail) {
+    const fullDetail = {
+      ...detail,
+      tagName: this.config.tagName,
+      element: this,
+      timestamp: Date.now()
+    };
+    this.dispatchEvent(
+      new CustomEvent(eventName, {
+        detail: fullDetail,
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  handleError(message, error) {
+    console.error(`[${this.config.tagName}]`, message, error);
+    const errorType = this.elementRef ? "runtime" : message.toLowerCase().includes("validation") ? "validation" : "initialization";
+    this.dispatchComponentEvent("umdComponent:error", {
+      type: errorType,
+      message,
+      details: error
+    });
+  }
+  validateSlots() {
+    if (!this.config.slots) return;
+    const errors = [];
+    Object.entries(this.config.slots).forEach(([name, config]) => {
+      const type = name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`).replace(/^-/, "");
+      if (config.required) {
+        const slotElement = this.querySelector(`[slot="${type}"]`);
+        if (!slotElement) {
+          errors.push({
+            slot: name,
+            error: "missing",
+            message: `Required slot "${type}" is missing`
+          });
+        }
+      }
+      if (config.deprecated) {
+        const slotElement = this.querySelector(`[slot="${type}"]`);
+        if (slotElement) {
+          errors.push({
+            slot: name,
+            error: "deprecated",
+            message: `Slot "${type}" is deprecated. ${config.deprecated}`
+          });
+        }
+      }
+      if (config.allowedElements) {
+        const slotElements = Array.from(
+          this.querySelectorAll(`[slot="${type}"]`)
+        );
+        const invalidElements = slotElements.filter(
+          (element) => !config.allowedElements.includes(element.tagName.toLowerCase())
+        );
+        if (invalidElements.length > 0) {
+          errors.push({
+            slot: name,
+            error: "invalid-elements",
+            message: `Slot "${type}" contains invalid elements. Allowed: ${config.allowedElements.join(
+              ", "
+            )}`,
+            invalidElements
+          });
+        }
+      }
+    });
+    if (errors.length > 0) {
+      this.handleError("Slot validation failed", errors);
+      errors.forEach((error) => {
+        console.warn(`[${this.config.tagName}]`, error.message, error);
+      });
+    }
+  }
+  async executeLifecycleCallbacks() {
+    const lifecycleMethods = [
+      "beforeConnect",
+      "afterConnect",
+      "onReady"
+    ];
+    for (const method of lifecycleMethods) {
+      await this.executeCallback(method);
+    }
+  }
+  async executeCallback(name) {
+    const callback = this.config[name];
+    if (!callback) {
+      return;
+    }
+    try {
+      await Promise.resolve(callback(this.elementRef, this.shadow));
+    } catch (error) {
+      this.handleError(`Failed to execute ${name} callback`, error);
+    }
+  }
+  getRef() {
+    return this.elementRef;
+  }
+}
+const createCustomElement = (config) => {
+  var _Component_decorators, _init, _a;
+  _Component_decorators = [ComponentConfig(config)];
+  class Component extends (_a = BaseComponent) {
+    constructor() {
+      super();
+    }
+  }
+  _init = __decoratorStart(_a);
+  Component = __decorateElement(_init, 0, "Component", _Component_decorators, Component);
+  __runInitializers(_init, 1, Component);
+  return Component;
+};
+exports.BaseComponent = BaseComponent;
+exports.createCustomElement = createCustomElement;
+//# sourceMappingURL=model.js.map

package/dist/model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"model.js","sources":["../source/model/index.ts"],"sourcesContent":["/**\n * Custom Element Model System\n *\n * Provides a base class and utilities for creating web components with:\n * - Shadow DOM encapsulation\n * - Attribute observation and handling\n * - Slot validation\n * - Lifecycle management\n * - Error handling\n *\n * ## Key Features:\n *\n * 1. **Attribute Handling**: Automatic observation and callback execution\n * 2. **Slot Validation**: Required slots, deprecated warnings, element type checking\n * 3. **Lifecycle Hooks**: beforeConnect, afterConnect, onReady\n * 4. **Error Management**: Centralized error handling with custom events\n *\n * ## Usage:\n * ```typescript\n * const element = createCustomElement({\n *   tagName: 'my-component',\n *   slots: {\n *     headline: { required: true, allowedElements: ['h2', 'h3'] },\n *     content: { allowedElements: ['div', 'p'] }\n *   },\n *   attributes: [{\n *     name: 'theme',\n *     handler: (ref, oldValue, newValue) => {\n *       // Handle theme change\n *     }\n *   }],\n *   createComponent: (host) => {\n *     // Create and return component\n *   }\n * });\n * ```\n */\nimport StylesTemplate from '../utilities/styles';\nimport type {\n  SlotConfig,\n  ComponentEventDetail,\n  ComponentReadyDetail,\n  ComponentErrorDetail,\n  ElementRef\n} from '../_types';\n\ninterface AttributeConfig {\n  name: string;\n  handler: (element: ElementRef, oldValue: string, newValue: string) => void;\n}\n\ninterface SlotValidationError {\n  slot: string;\n  error: 'missing' | 'deprecated' | 'invalid-elements';\n  message: string;\n  invalidElements?: Element[];\n}\n\ninterface ComponentLifecycle {\n  beforeConnect?: (ref: ElementRef, shadow: ShadowRoot) => void;\n  afterConnect?: (ref: ElementRef, shadow: ShadowRoot) => void;\n  onReady?: (ref: ElementRef, shadow: ShadowRoot) => void;\n}\n\ninterface ComponentConfig extends ComponentLifecycle {\n  tagName: string;\n  attributes?: AttributeConfig[];\n  slots?: Record<string, SlotConfig>;\n  createComponent: (host: HTMLElement) => ElementRef;\n}\n\n// Store the config on the constructor itself\nconst ComponentConfig = (config: ComponentConfig) => {\n  return function <T extends typeof BaseComponent>(constructor: T) {\n    constructor.componentConfig = config;\n    return constructor;\n  };\n};\n\n/**\n * Base class for all web components created by the Model system.\n * Extends HTMLElement with shadow DOM support, attribute observation,\n * slot validation, and lifecycle management.\n *\n * @internal This class is not meant to be extended directly.\n * Use `createCustomElement` to create components.\n */\nclass BaseComponent extends HTMLElement {\n  static componentConfig: ComponentConfig;\n\n  protected shadow: ShadowRoot;\n  protected elementRef: ElementRef | null = null;\n  protected config: ComponentConfig;\n\n  constructor() {\n    super();\n\n    const constructor = this.constructor as typeof BaseComponent;\n    this.config = constructor.componentConfig;\n\n    if (!this.config) {\n      throw new Error(\n        'Component config not found. Did you forget to use the @Component decorator?',\n      );\n    }\n\n    this.shadow = this.attachShadow({ mode: 'open' });\n    this.validateConfig();\n  }\n\n  static get observedAttributes(): string[] {\n    return this.componentConfig?.attributes?.map((attr) => attr.name) || [];\n  }\n\n  connectedCallback(): void {\n    try {\n      this.initializeComponent();\n    } catch (error) {\n      this.handleError('Failed to initialize component', error);\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.cleanup();\n  }\n\n  attributeChangedCallback(\n    name: string,\n    oldValue: string,\n    newValue: string,\n  ): void {\n    if (oldValue === newValue) return;\n\n    try {\n      this.handleAttributeChange(name, oldValue, newValue);\n    } catch (error) {\n      this.handleError(`Failed to handle attribute change: ${name}`, error);\n    }\n  }\n\n  protected initializeComponent(): void {\n    try {\n      this.validateSlots();\n\n      const componentRef = this.config.createComponent(this);\n\n      if (!componentRef || !componentRef.element) {\n        throw new Error(\n          'Component creation failed: Invalid component reference',\n        );\n      }\n\n      this.elementRef = componentRef;\n      this.setupShadowDom(componentRef);\n      this.afterInit();\n    } catch (error) {\n      this.handleError('Failed to initialize component', error);\n    }\n  }\n\n  protected setupShadowDom(component: ElementRef): void {\n    this.shadow.appendChild(\n      StylesTemplate({ styles: component.styles || '' }).content.cloneNode(true),\n    );\n    this.shadow.appendChild(component.element);\n  }\n\n  protected validateConfig(): void {\n    const requiredFields: (keyof ComponentConfig)[] = [\n      'tagName',\n      'createComponent',\n    ];\n\n    requiredFields.forEach((field) => {\n      if (!this.config[field]) {\n        throw new Error(`Missing required config field: ${field}`);\n      }\n    });\n\n    if (this.config.attributes) {\n      this.config.attributes.forEach((attr) => {\n        if (!attr.name || !attr.handler) {\n          throw new Error(\n            'Invalid attribute config: requires name and handler',\n          );\n        }\n      });\n    }\n  }\n\n  protected async afterInit(): Promise<void> {\n    if (!this.elementRef) {\n      this.handleError('Cannot initialize - missing element reference', null);\n      return;\n    }\n\n    await this.executeLifecycleCallbacks();\n\n    // Dispatch umdComponent:ready event after all lifecycle callbacks complete\n    this.dispatchComponentEvent<ComponentReadyDetail>('umdComponent:ready', {\n      shadowRoot: this.shadow,\n      ref: this.elementRef,\n    });\n  }\n\n  protected handleAttributeChange(\n    name: string,\n    oldValue: string,\n    newValue: string,\n  ): void {\n    if (!this.elementRef) return;\n\n    const handler = this.config.attributes?.find(\n      (attr) => attr.name === name,\n    )?.handler;\n\n    if (handler) {\n      handler(this.elementRef, oldValue, newValue);\n    }\n  }\n\n  protected cleanup(): void {\n    this.elementRef = null;\n  }\n\n  /**\n   * Helper method to dispatch component events with consistent structure\n   */\n  protected dispatchComponentEvent<T extends ComponentEventDetail>(\n    eventName: string,\n    detail: Omit<T, 'tagName' | 'element' | 'timestamp'>,\n  ): void {\n    const fullDetail = {\n      ...detail,\n      tagName: this.config.tagName,\n      element: this,\n      timestamp: Date.now(),\n    } as unknown as T;\n\n    this.dispatchEvent(\n      new CustomEvent<T>(eventName, {\n        detail: fullDetail,\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  protected handleError(message: string, error: unknown): void {\n    console.error(`[${this.config.tagName}]`, message, error);\n\n    // Determine error type based on component state and message\n    const errorType = this.elementRef\n      ? 'runtime'\n      : message.toLowerCase().includes('validation')\n      ? 'validation'\n      : 'initialization';\n\n    this.dispatchComponentEvent<ComponentErrorDetail>('umdComponent:error', {\n      type: errorType,\n      message,\n      details: error,\n    });\n  }\n\n  private validateSlots(): void {\n    if (!this.config.slots) return;\n\n    const errors: SlotValidationError[] = [];\n\n    Object.entries(this.config.slots).forEach(([name, config]) => {\n      const type = name\n        .replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)\n        .replace(/^-/, '');\n\n      if (config.required) {\n        const slotElement = this.querySelector(`[slot=\"${type}\"]`);\n        if (!slotElement) {\n          errors.push({\n            slot: name,\n            error: 'missing',\n            message: `Required slot \"${type}\" is missing`,\n          });\n        }\n      }\n\n      if (config.deprecated) {\n        const slotElement = this.querySelector(`[slot=\"${type}\"]`);\n        if (slotElement) {\n          errors.push({\n            slot: name,\n            error: 'deprecated',\n            message: `Slot \"${type}\" is deprecated. ${config.deprecated}`,\n          });\n        }\n      }\n\n      if (config.allowedElements) {\n        const slotElements = Array.from(\n          this.querySelectorAll(`[slot=\"${type}\"]`),\n        );\n        const invalidElements = slotElements.filter(\n          (element) =>\n            !config.allowedElements!.includes(element.tagName.toLowerCase()),\n        );\n\n        if (invalidElements.length > 0) {\n          errors.push({\n            slot: name,\n            error: 'invalid-elements',\n            message: `Slot \"${type}\" contains invalid elements. Allowed: ${config.allowedElements.join(\n              ', ',\n            )}`,\n            invalidElements,\n          });\n        }\n      }\n    });\n\n    if (errors.length > 0) {\n      this.handleError('Slot validation failed', errors);\n\n      errors.forEach((error) => {\n        console.warn(`[${this.config.tagName}]`, error.message, error);\n      });\n    }\n  }\n\n  private async executeLifecycleCallbacks(): Promise<void> {\n    const lifecycleMethods = [\n      'beforeConnect',\n      'afterConnect',\n      'onReady',\n    ] as const;\n\n    for (const method of lifecycleMethods) {\n      await this.executeCallback(method);\n    }\n  }\n\n  private async executeCallback(name: keyof ComponentLifecycle): Promise<void> {\n    const callback = this.config[name];\n\n    if (!callback) {\n      return;\n    }\n\n    try {\n      await Promise.resolve(callback(this.elementRef!, this.shadow));\n    } catch (error) {\n      this.handleError(`Failed to execute ${name} callback`, error);\n    }\n  }\n\n  public getRef(): ElementRef | null {\n    return this.elementRef;\n  }\n}\n\n/**\n * Factory function to create a custom element class.\n *\n * @param config - Component configuration including tagName, slots, attributes, and lifecycle hooks\n * @returns Custom element class that extends BaseComponent\n *\n * @example\n * ```typescript\n * export default () => {\n *   Register.registerWebComponent({\n *     name: tagName,\n *     element: createCustomElement({\n *       tagName,\n *       slots,\n *       attributes,\n *       createComponent\n *     })\n *   });\n * };\n * ```\n */\nconst createCustomElement = (config: ComponentConfig): typeof BaseComponent => {\n  @ComponentConfig(config)\n  class Component extends BaseComponent {\n    constructor() {\n      super();\n    }\n  }\n\n  return Component;\n};\n\nexport {\n  createCustomElement,\n  BaseComponent,\n  type ComponentConfig,\n  type AttributeConfig,\n};\n"],"names":["StylesTemplate"],"mappings":"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"}