le-kit 0.5.3 → 0.5.4

package/dist/collection/utils/utils.js

@@ -1,141 +0,0 @@
-/**
- * Utility functions for le-kit components
- */
-import { getMode } from "../global/app";
-/**
- * Generates a unique ID for component instances
- */
-export function generateId(prefix = 'le') {
-    return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;
-}
-/**
- * Parses a comma-separated string into an array
- */
-export function parseCommaSeparated(value) {
-    if (!value)
-        return [];
-    return value
-        .split(',')
-        .map(s => s.trim())
-        .filter(Boolean);
-}
-/**
- * Checks if a slot has content
- */
-export function slotHasContent(el, slotName = '') {
-    const selector = slotName ? `[slot="${slotName}"]` : ':not([slot])';
-    return el.querySelector(selector) !== null;
-}
-/**
- * Sets up a MutationObserver to track mode changes on ancestor elements.
- * Returns a cleanup function to disconnect the observer.
- *
- * If the element or any ancestor has an explicit `mode` attribute, that creates
- * a "mode boundary" - the mode is determined from that point, not from further up.
- * This allows components like le-popover to force default mode for their children.
- *
- * @param el - The component's host element
- * @param callback - Function to call when mode changes, receives the new mode
- * @returns Cleanup function to disconnect the observer
- *
- * @example
- * ```tsx
- * export class MyComponent {
- *   @Element() el: HTMLElement;
- *   @State() adminMode: boolean = false;
- *   private disconnectModeObserver?: () => void;
- *
- *   connectedCallback() {
- *     this.disconnectModeObserver = observeModeChanges(this.el, (mode) => {
- *       this.adminMode = mode === 'admin';
- *     });
- *   }
- *
- *   disconnectedCallback() {
- *     this.disconnectModeObserver?.();
- *   }
- * }
- * ```
- */
-export function observeModeChanges(el, callback) {
-    // Call immediately with current mode
-    callback(getMode(el));
-    // Set up observer for mode attribute changes
-    const observer = new MutationObserver(() => {
-        callback(getMode(el));
-    });
-    // Observe the element itself (for mode boundary changes)
-    observer.observe(el, {
-        attributes: true,
-        attributeFilter: ['mode'],
-    });
-    // Observe document root
-    observer.observe(document.documentElement, {
-        attributes: true,
-        attributeFilter: ['mode'],
-    });
-    // Traverse up, crossing shadow boundaries, and observe each element
-    let current = el;
-    while (current) {
-        if (current instanceof Element && current.parentElement) {
-            current = current.parentElement;
-            observer.observe(current, {
-                attributes: true,
-                attributeFilter: ['mode'],
-            });
-            // If this element has an explicit mode, it's a boundary
-            if (current.hasAttribute('mode')) {
-                break;
-            }
-        }
-        else {
-            // Check if we're in a shadow root
-            const root = current.getRootNode();
-            if (root instanceof ShadowRoot) {
-                // Cross the shadow boundary and observe the host
-                current = root.host;
-                observer.observe(current, {
-                    attributes: true,
-                    attributeFilter: ['mode'],
-                });
-                // If the host has an explicit mode, it's a boundary
-                if (current.hasAttribute('mode')) {
-                    break;
-                }
-            }
-            else {
-                break;
-            }
-        }
-    }
-    // Return cleanup function
-    return () => observer.disconnect();
-}
-/**
- * Combines multiple class names into a single string, filtering out falsy values.
- *
- * @param classes - arguments of class names, undefined, arrays, objects with boolean values and nested combinations of these
- * @returns Combined class names string
- */
-export function classnames(...classes) {
-    const result = [];
-    classes.forEach(cls => {
-        if (!cls)
-            return;
-        if (typeof cls === 'string') {
-            result.push(cls);
-        }
-        else if (Array.isArray(cls)) {
-            result.push(classnames(...cls));
-        }
-        else if (typeof cls === 'object') {
-            Object.entries(cls).forEach(([key, value]) => {
-                if (value) {
-                    result.push(key);
-                }
-            });
-        }
-    });
-    return result.join(' ');
-}
-//# sourceMappingURL=utils.js.map

package/dist/collection/utils/utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Utility functions for le-kit components\n */\n\nimport { getMode } from '../global/app';\n\n/**\n * Generates a unique ID for component instances\n */\nexport function generateId(prefix: string = 'le'): string {\n  return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n}\n\n/**\n * Parses a comma-separated string into an array\n */\nexport function parseCommaSeparated(value: string | undefined): string[] {\n  if (!value) return [];\n  return value\n    .split(',')\n    .map(s => s.trim())\n    .filter(Boolean);\n}\n\n/**\n * Checks if a slot has content\n */\nexport function slotHasContent(el: HTMLElement, slotName: string = ''): boolean {\n  const selector = slotName ? `[slot=\"${slotName}\"]` : ':not([slot])';\n  return el.querySelector(selector) !== null;\n}\n\n/**\n * Sets up a MutationObserver to track mode changes on ancestor elements.\n * Returns a cleanup function to disconnect the observer.\n * \n * If the element or any ancestor has an explicit `mode` attribute, that creates\n * a \"mode boundary\" - the mode is determined from that point, not from further up.\n * This allows components like le-popover to force default mode for their children.\n * \n * @param el - The component's host element\n * @param callback - Function to call when mode changes, receives the new mode\n * @returns Cleanup function to disconnect the observer\n * \n * @example\n * ```tsx\n * export class MyComponent {\n *   @Element() el: HTMLElement;\n *   @State() adminMode: boolean = false;\n *   private disconnectModeObserver?: () => void;\n * \n *   connectedCallback() {\n *     this.disconnectModeObserver = observeModeChanges(this.el, (mode) => {\n *       this.adminMode = mode === 'admin';\n *     });\n *   }\n * \n *   disconnectedCallback() {\n *     this.disconnectModeObserver?.();\n *   }\n * }\n * ```\n */\nexport function observeModeChanges(\n  el: HTMLElement,\n  callback: (mode: string) => void\n): () => void {\n  // Call immediately with current mode\n  callback(getMode(el));\n\n  // Set up observer for mode attribute changes\n  const observer = new MutationObserver(() => {\n    callback(getMode(el));\n  });\n\n  // Observe the element itself (for mode boundary changes)\n  observer.observe(el, {\n    attributes: true,\n    attributeFilter: ['mode'],\n  });\n\n  // Observe document root\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: ['mode'],\n  });\n\n  // Traverse up, crossing shadow boundaries, and observe each element\n  let current: Node | null = el;\n  while (current) {\n    if (current instanceof Element && current.parentElement) {\n      current = current.parentElement;\n      observer.observe(current, {\n        attributes: true,\n        attributeFilter: ['mode'],\n      });\n      // If this element has an explicit mode, it's a boundary\n      if ((current as Element).hasAttribute('mode')) {\n        break;\n      }\n    } else {\n      // Check if we're in a shadow root\n      const root = current.getRootNode();\n      if (root instanceof ShadowRoot) {\n        // Cross the shadow boundary and observe the host\n        current = root.host;\n        observer.observe(current, {\n          attributes: true,\n          attributeFilter: ['mode'],\n        });\n        // If the host has an explicit mode, it's a boundary\n        if ((current as Element).hasAttribute('mode')) {\n          break;\n        }\n      } else {\n        break;\n      }\n    }\n  }\n\n  // Return cleanup function\n  return () => observer.disconnect();\n}\n\n/**\n * Combines multiple class names into a single string, filtering out falsy values.\n * \n * @param classes - arguments of class names, undefined, arrays, objects with boolean values and nested combinations of these\n * @returns Combined class names string\n */\nexport function classnames(...classes: any[]): string {\n  const result: string[] = [];\n\n  classes.forEach(cls => {\n    if (!cls) return;\n\n    if (typeof cls === 'string') {\n      result.push(cls);\n    } else if (Array.isArray(cls)) {\n      result.push(classnames(...cls));\n    } else if (typeof cls === 'object') {\n      Object.entries(cls).forEach(([key, value]) => {\n        if (value) {\n          result.push(key);\n        }\n      });\n    }\n  });\n\n  return result.join(' ');\n}\n"]}

package/dist/components/app.js

@@ -1,180 +0,0 @@
-import { setMode } from '@stencil/core/internal/client';
-
-/**
- * Global mode initialization for le-kit components.
- *
- * Mode inheritance works as follows:
- * 1. Check the element's own `mode` attribute
- * 2. Traverse up the DOM to find a parent with `mode` attribute
- * 3. Check the document root element (html) for `mode` attribute
- * 4. Fall back to 'default'
- *
- * This allows setting mode at any level:
- * - `<html mode="admin">` - all components in admin mode
- * - `<le-card mode="admin">` - this card and its children in admin mode
- */
-function initializeMode() {
-    setMode((el) => {
-        // 1. Check element's own mode attribute
-        const ownMode = el.getAttribute('mode');
-        if (ownMode) {
-            return ownMode;
-        }
-        // 2. Traverse up the DOM tree to find inherited mode
-        let parent = el.parentElement;
-        while (parent) {
-            const parentMode = parent.getAttribute('mode');
-            if (parentMode) {
-                return parentMode;
-            }
-            parent = parent.parentElement;
-        }
-        // 3. Check document root element
-        const rootMode = document.documentElement.getAttribute('mode');
-        if (rootMode) {
-            return rootMode;
-        }
-        // 4. Default mode
-        return 'default';
-    });
-}
-/**
- * Helper function to get the current mode for an element.
- * Can be used programmatically in components.
- *
- * This function traverses both regular DOM and shadow DOM boundaries
- * to find the nearest mode attribute.
- */
-function getMode(el) {
-    // Check element's own mode
-    const ownMode = el.getAttribute('mode');
-    if (ownMode) {
-        return ownMode;
-    }
-    // Traverse up DOM, crossing shadow boundaries
-    let current = el;
-    while (current) {
-        // Try parent element first
-        if (current instanceof Element && current.parentElement) {
-            current = current.parentElement;
-            const mode = current.getAttribute?.('mode');
-            if (mode) {
-                return mode;
-            }
-        }
-        else {
-            // No parent element - check if we're in a shadow root
-            const root = current.getRootNode();
-            if (root instanceof ShadowRoot) {
-                // Cross the shadow boundary to the host element
-                current = root.host;
-                const mode = current.getAttribute?.('mode');
-                if (mode) {
-                    return mode;
-                }
-            }
-            else {
-                // We've reached the document root
-                break;
-            }
-        }
-    }
-    // Check document root
-    const rootMode = document.documentElement.getAttribute('mode');
-    if (rootMode) {
-        return rootMode;
-    }
-    return 'default';
-}
-/**
- * Helper function to get the current theme for an element.
- * Theme inheritance works the same as mode - cascades through DOM.
- */
-function getTheme(el) {
-    // Check element's own theme
-    const ownTheme = el.getAttribute('theme');
-    if (ownTheme) {
-        return ownTheme;
-    }
-    // Traverse up DOM
-    let parent = el.parentElement;
-    while (parent) {
-        const parentTheme = parent.getAttribute('theme');
-        if (parentTheme) {
-            return parentTheme;
-        }
-        parent = parent.parentElement;
-    }
-    // Check root
-    const rootTheme = document.documentElement.getAttribute('theme');
-    if (rootTheme) {
-        return rootTheme;
-    }
-    return 'default';
-}
-/**
- * Helper function to set mode on the document root.
- * Useful for switching all components to admin mode.
- */
-function setGlobalMode(mode) {
-    document.documentElement.setAttribute('mode', mode);
-}
-/**
- * Helper function to set theme on the document root.
- * Useful for switching all components to a different theme.
- */
-function setGlobalTheme(theme) {
-    document.documentElement.setAttribute('theme', theme);
-}
-// Use a Symbol to avoid conflicts with other libraries
-const LE_KIT_CONFIG_KEY = '__leKitConfig__';
-/**
- * Get the global config object, creating it if needed.
- * Uses globalThis (window in browser) to ensure config is shared
- * across all module bundles.
- */
-function getGlobalConfig() {
-    const g = globalThis;
-    if (!g[LE_KIT_CONFIG_KEY]) {
-        g[LE_KIT_CONFIG_KEY] = {
-            manifestFile: '/custom-elements.json',
-            assetBasePath: '',
-        };
-    }
-    return g[LE_KIT_CONFIG_KEY];
-}
-/**
- * Configure le-kit global settings.
- *
- * @example
- * ```ts
- * import { configureLeKit } from 'le-kit';
- *
- * configureLeKit({
- *   manifestFile: 'custom-elements.json',
- *   assetBasePath: '/le-kit-assets'
- * });
- * ```
- */
-function configureLeKit(config) {
-    const globalConfig = getGlobalConfig();
-    Object.assign(globalConfig, config);
-}
-/**
- * Get the current le-kit configuration.
- */
-function getLeKitConfig() {
-    return getGlobalConfig();
-}
-/**
- * Get the configured asset base path.
- * Used internally by components that load assets.
- */
-function getAssetBasePath() {
-    return getGlobalConfig().assetBasePath;
-}
-
-export { getTheme as a, setGlobalTheme as b, configureLeKit as c, getLeKitConfig as d, getAssetBasePath as e, getMode as g, initializeMode as i, setGlobalMode as s };
-//# sourceMappingURL=app.js.map
-
-//# sourceMappingURL=app.js.map

package/dist/components/app.js.map

@@ -1 +0,0 @@
-{"file":"app.js","mappings":"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","names":[],"sources":["src/global/app.ts"],"sourcesContent":["import { setMode } from '@stencil/core';\n\nexport type LeKitMode = 'default' | 'admin' | string;\nexport type LeKitTheme = 'default' | 'dark' | string;\n\n/**\n * Global mode initialization for le-kit components.\n *\n * Mode inheritance works as follows:\n * 1. Check the element's own `mode` attribute\n * 2. Traverse up the DOM to find a parent with `mode` attribute\n * 3. Check the document root element (html) for `mode` attribute\n * 4. Fall back to 'default'\n *\n * This allows setting mode at any level:\n * - `<html mode=\"admin\">` - all components in admin mode\n * - `<le-card mode=\"admin\">` - this card and its children in admin mode\n */\nfunction initializeMode() {\n  setMode((el: HTMLElement): LeKitMode => {\n    // 1. Check element's own mode attribute\n    const ownMode = el.getAttribute('mode');\n    if (ownMode) {\n      return ownMode as LeKitMode;\n    }\n\n    // 2. Traverse up the DOM tree to find inherited mode\n    let parent = el.parentElement;\n    while (parent) {\n      const parentMode = parent.getAttribute('mode');\n      if (parentMode) {\n        return parentMode as LeKitMode;\n      }\n      parent = parent.parentElement;\n    }\n\n    // 3. Check document root element\n    const rootMode = document.documentElement.getAttribute('mode');\n    if (rootMode) {\n      return rootMode as LeKitMode;\n    }\n\n    // 4. Default mode\n    return 'default';\n  });\n}\n\n// Default export for Stencil global script\nexport default initializeMode;\n\n/**\n * Helper function to get the current mode for an element.\n * Can be used programmatically in components.\n *\n * This function traverses both regular DOM and shadow DOM boundaries\n * to find the nearest mode attribute.\n */\nexport function getMode(el: HTMLElement): LeKitMode {\n  // Check element's own mode\n  const ownMode = el.getAttribute('mode');\n  if (ownMode) {\n    return ownMode as LeKitMode;\n  }\n\n  // Traverse up DOM, crossing shadow boundaries\n  let current: Node | null = el;\n  while (current) {\n    // Try parent element first\n    if (current instanceof Element && current.parentElement) {\n      current = current.parentElement;\n      const mode = (current as HTMLElement).getAttribute?.('mode');\n      if (mode) {\n        return mode as LeKitMode;\n      }\n    } else {\n      // No parent element - check if we're in a shadow root\n      const root = current.getRootNode();\n      if (root instanceof ShadowRoot) {\n        // Cross the shadow boundary to the host element\n        current = root.host;\n        const mode = (current as HTMLElement).getAttribute?.('mode');\n        if (mode) {\n          return mode as LeKitMode;\n        }\n      } else {\n        // We've reached the document root\n        break;\n      }\n    }\n  }\n\n  // Check document root\n  const rootMode = document.documentElement.getAttribute('mode');\n  if (rootMode) {\n    return rootMode as LeKitMode;\n  }\n\n  return 'default';\n}\n\n/**\n * Helper function to get the current theme for an element.\n * Theme inheritance works the same as mode - cascades through DOM.\n */\nexport function getTheme(el: HTMLElement): LeKitTheme {\n  // Check element's own theme\n  const ownTheme = el.getAttribute('theme');\n  if (ownTheme) {\n    return ownTheme as LeKitTheme;\n  }\n\n  // Traverse up DOM\n  let parent = el.parentElement;\n  while (parent) {\n    const parentTheme = parent.getAttribute('theme');\n    if (parentTheme) {\n      return parentTheme as LeKitTheme;\n    }\n    parent = parent.parentElement;\n  }\n\n  // Check root\n  const rootTheme = document.documentElement.getAttribute('theme');\n  if (rootTheme) {\n    return rootTheme as LeKitTheme;\n  }\n\n  return 'default';\n}\n\n/**\n * Helper function to set mode on the document root.\n * Useful for switching all components to admin mode.\n */\nexport function setGlobalMode(mode: LeKitMode): void {\n  document.documentElement.setAttribute('mode', mode);\n}\n\n/**\n * Helper function to set theme on the document root.\n * Useful for switching all components to a different theme.\n */\nexport function setGlobalTheme(theme: LeKitTheme): void {\n  document.documentElement.setAttribute('theme', theme);\n}\n\n/**\n * Type definition for le-kit configuration\n */\nexport interface LeKitConfig {\n  /**\n   * URL to the custom-elements.json manifest.\n   * Used by admin components (le-component, le-slot) to load component metadata.\n   *\n   * Default: '/custom-elements.json' (served from app root)\n   *\n   * For apps using le-kit, you may need to:\n   * 1. Copy the manifest from node_modules/le-kit/custom-elements.json to your public folder\n   * 2. Or set this to point to where the manifest is served\n   */\n  manifestFile: string;\n\n  /**\n   * Base path for loading assets (icons, etc.).\n   *\n   * Default: '' (empty - uses Stencil's getAssetPath)\n   *\n   * When set, assets will be loaded from: `${assetBasePath}/icons/${name}.json`\n   *\n   * For apps using le-kit, you should:\n   * 1. Copy the assets from node_modules/le-kit/dist/assets to your public folder\n   * 2. Set this to point to where the assets are served (e.g., '/le-kit-assets')\n   *\n   * @example\n   * ```ts\n   * configureLeKit({ assetBasePath: '/le-kit-assets' });\n   * ```\n   */\n  assetBasePath: string;\n}\n\n// Use a Symbol to avoid conflicts with other libraries\nconst LE_KIT_CONFIG_KEY = '__leKitConfig__';\n\n/**\n * Get the global config object, creating it if needed.\n * Uses globalThis (window in browser) to ensure config is shared\n * across all module bundles.\n */\nfunction getGlobalConfig(): LeKitConfig {\n  const g = globalThis as any;\n  if (!g[LE_KIT_CONFIG_KEY]) {\n    g[LE_KIT_CONFIG_KEY] = {\n      manifestFile: '/custom-elements.json',\n      assetBasePath: '',\n    };\n  }\n  return g[LE_KIT_CONFIG_KEY];\n}\n\n/**\n * Configure le-kit global settings.\n *\n * @example\n * ```ts\n * import { configureLeKit } from 'le-kit';\n *\n * configureLeKit({\n *   manifestFile: 'custom-elements.json',\n *   assetBasePath: '/le-kit-assets'\n * });\n * ```\n */\nexport function configureLeKit(config: Partial<LeKitConfig>): void {\n  const globalConfig = getGlobalConfig();\n  Object.assign(globalConfig, config);\n}\n\n/**\n * Get the current le-kit configuration.\n */\nexport function getLeKitConfig(): LeKitConfig {\n  return getGlobalConfig();\n}\n\n/**\n * Get the configured asset base path.\n * Used internally by components that load assets.\n */\nexport function getAssetBasePath(): string {\n  return getGlobalConfig().assetBasePath;\n}\n"],"version":3}