le-kit 0.1.4 → 0.1.5

package/dist/collection/components/le-component/le-component.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"le-component.js","sourceRoot":"","sources":["../../../src/components/le-component/le-component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, h, Host, Element } from '@stencil/core';\nimport { classnames, observeModeChanges } from '../../utils/utils';\n\n/**\n * Component wrapper for admin mode editing.\n *\n * This component is used internally by other components to provide admin-mode \n * editing capabilities. It wraps the component's rendered output and shows\n * a settings popover for editing properties.\n *\n * In default mode, it acts as a simple passthrough (display: contents).\n * In admin mode, it shows a border, component name header, and settings popover.\n *\n * The host element is found automatically by traversing up through the shadow DOM.\n *\n * Usage inside a component's render method:\n * ```tsx\n * render() {\n *   return (\n *     <le-component component=\"le-card\">\n *       <Host>...</Host>\n *     </le-component>\n *   );\n * }\n * ```\n *\n * @slot - The component's rendered content\n *\n * @cmsInternal true\n * @cmsCategory System\n */\n@Component({\n  tag: 'le-component',\n  styleUrl: 'le-component.css',\n  shadow: true,\n})\nexport class LeComponent {\n  @Element() el: HTMLElement;\n\n  /**\n   * The tag name of the component (e.g., 'le-card').\n   * Used to look up property metadata and display the component name.\n   */\n  @Prop() component!: string;\n\n  /**\n   * Optional display name for the component.\n   * If not provided, the tag name will be formatted as the display name.\n   */\n  @Prop() displayName?: string;\n\n  /**\n   * Classes to apply to the host element.\n   * Allows parent components to pass their styling classes.\n   */\n  @Prop() hostClass?: string;\n\n  /**\n   * Inline styles to apply to the host element.\n   * Allows parent components to pass dynamic styles (e.g., flex properties).\n   */\n  @Prop() hostStyle?: { [key: string]: string };\n\n  /**\n   * Reference to the host element (found automatically from parent)\n   */\n  private hostElement?: HTMLElement;\n\n  /**\n   * Internal state to track admin mode\n   */\n  @State() private adminMode: boolean = false;\n\n  /**\n   * Component metadata loaded from Custom Elements Manifest\n   */\n  @State() private componentMeta: ComponentMetadata | null = null;\n\n  /**\n   * Current property values of the host component\n   */\n  @State() private propertyValues: Record<string, any> = {};\n\n  private disconnectModeObserver?: () => void;\n\n  connectedCallback() {\n    // Find the host element - le-component is rendered inside the component's shadow DOM,\n    // so we need to find the shadow root's host element\n    this.findHostElement();\n\n    this.disconnectModeObserver = observeModeChanges(this.el, (mode) => {\n      this.adminMode = mode === 'admin';\n      // Load metadata and refresh property values only when entering admin mode\n      if (this.adminMode) {\n        if (!this.componentMeta) {\n          this.loadComponentMetadata();\n        } else {\n          this.readPropertyValues();\n        }\n      }\n    });\n  }\n\n  /**\n   * Find the host element by traversing up through shadow DOM\n   */\n  private findHostElement() {\n    // Get the shadow root that contains this le-component\n    const rootNode = this.el.getRootNode();\n    if (rootNode instanceof ShadowRoot) {\n      // The host of this shadow root is our target component (e.g., le-card)\n      this.hostElement = rootNode.host as HTMLElement;\n    }\n  }\n\n  componentDidLoad() {\n    // Read initial property values from the host element\n    this.readPropertyValues();\n  }\n\n  disconnectedCallback() {\n    this.disconnectModeObserver?.();\n  }\n\n  /**\n   * Formats a tag name into a display name\n   * e.g., 'le-card' -> 'Card'\n   */\n  private formatDisplayName(tagName: string): string {\n    return tagName\n      .replace(/^le-/, '') // Remove 'le-' prefix\n      .split('-')\n      .map(word => word.charAt(0).toUpperCase() + word.slice(1))\n      .join(' ');\n  }\n\n  /**\n   * Load component metadata from the Custom Elements Manifest\n   */\n  private async loadComponentMetadata() {\n    try {\n      // Fetch the manifest - in production this would be bundled or cached\n      const response = await fetch('/custom-elements.json');\n      const manifest = await response.json();\n\n      // Find the component definition\n      for (const module of manifest.modules) {\n        for (const declaration of module.declarations || []) {\n          if (declaration.tagName === this.component) {\n            const attributes = (declaration.attributes || []).filter(\n              (attr: AttributeMetadata) => !this.isInternalAttribute(attr.name)\n            );\n            this.componentMeta = {\n              tagName: declaration.tagName,\n              description: declaration.description,\n              attributes,\n            };\n            // console.log(`[le-component] Loaded metadata for ${this.component}:`, this.componentMeta);\n            // Read property values after metadata is loaded\n            this.readPropertyValues();\n            return;\n          }\n        }\n      }\n      // console.warn(`[le-component] No metadata found for component: ${this.component}`);\n    } catch (error) {\n      // console.warn(`[le-component] Failed to load metadata for component: ${this.component}`, error);\n    }\n  }\n\n  /**\n   * Check if an attribute is internal (should not be shown in editor)\n   */\n  private isInternalAttribute(name: string): boolean {\n    const internalAttrs = ['mode', 'theme', 'class', 'style', 'id', 'slot'];\n    return internalAttrs.includes(name);\n  }\n\n  /**\n   * Read current property values from the host element\n   */\n  private readPropertyValues() {\n    if (!this.hostElement || !this.componentMeta) return;\n\n    const values: Record<string, any> = {};\n    for (const attr of this.componentMeta.attributes) {\n      const value = this.hostElement.getAttribute(attr.name);\n      values[attr.name] = this.parseAttributeValue(value, attr.type?.text);\n    }\n    this.propertyValues = values;\n  }\n\n  /**\n   * Parse an attribute value based on its type\n   */\n  private parseAttributeValue(value: string | null, type?: string): any {\n    if (value === null) return undefined;\n    \n    if (type === 'boolean') {\n      return value !== null && value !== 'false';\n    }\n    if (type === 'number') {\n      return parseFloat(value);\n    }\n    return value;\n  }\n\n  /**\n   * Handle property value changes from the editor\n   */\n  private handlePropertyChange(attrName: string, value: any, type?: string) {\n    if (!this.hostElement) return;\n\n    // Update the host element's attribute\n    if (type === 'boolean') {\n      if (value) {\n        this.hostElement.setAttribute(attrName, '');\n      } else {\n        this.hostElement.removeAttribute(attrName);\n      }\n    } else if (value === undefined || value === '') {\n      this.hostElement.removeAttribute(attrName);\n    } else {\n      this.hostElement.setAttribute(attrName, String(value));\n    }\n\n    // Update local state\n    this.propertyValues = { ...this.propertyValues, [attrName]: value };\n  }\n\n  /**\n   * Delete this component from the DOM\n   */\n  private deleteComponent() {\n    if (!this.hostElement) return;\n\n    // Confirm deletion\n    const name = this.displayName || this.formatDisplayName(this.component);\n    if (!confirm(`Delete this ${name}?`)) return;\n\n    // Remove the host element from its parent\n    const parent = this.hostElement.parentElement;\n    if (parent) {\n      this.hostElement.remove();\n    }\n  }\n\n  /**\n   * Render the property editor form\n   */\n  private renderPropertyEditor() {\n    const hasProperties = this.componentMeta && this.componentMeta.attributes.length > 0;\n\n    return (\n      <div class=\"property-editor-container\">\n        {hasProperties ? (\n          <form class=\"property-editor\" onSubmit={(e) => e.preventDefault()}>\n            {this.componentMeta!.attributes.map(attr => this.renderPropertyField(attr))}\n          </form>\n        ) : (\n          <p class=\"no-properties\">No editable properties</p>\n        )}\n        <div class=\"property-editor-actions\">\n          <le-button\n            type=\"button\"\n            variant=\"outlined\"\n            color=\"danger\"\n            full-width\n            onClick={() => this.deleteComponent()}\n          >\n            <span slot=\"icon-start\">🗑️</span>\n            <span>Delete Component</span>\n          </le-button>\n        </div>\n      </div>\n    );\n  }\n\n  /**\n   * Render a single property field based on its type\n   */\n  private renderPropertyField(attr: AttributeMetadata) {\n    const value = this.propertyValues[attr.name];\n    const type = attr.type?.text || 'string';\n\n    // Check if type is a union of string literals (e.g., \"'default' | 'outlined' | 'elevated'\")\n    const enumMatch = type.match(/^'[^']+'/);\n    if (enumMatch) {\n      const options = type.split('|').map(opt => opt.trim().replace(/'/g, ''));\n      return (\n        <div class=\"property-field\">\n          <label htmlFor={`prop-${attr.name}`}>\n            {attr.name}\n            {attr.description && <span class=\"property-hint\">{attr.description}</span>}\n          </label>\n          <select\n            id={`prop-${attr.name}`}\n            onChange={(e) => this.handlePropertyChange(attr.name, (e.target as HTMLSelectElement).value, type)}\n          >\n            {options.map(opt => (\n              <option value={opt} selected={value === opt || (!value && attr.default?.replace(/'/g, '') === opt)}>{opt}</option>\n            ))}\n          </select>\n        </div>\n      );\n    }\n\n    // Boolean type\n    if (type === 'boolean') {\n      return (\n        <div class=\"property-field property-field--checkbox\">\n          <le-checkbox\n            name={`prop-${attr.name}`}\n            checked={value === true || value === ''}\n            onChange={(e) => this.handlePropertyChange(attr.name, (e.target as HTMLInputElement).checked, type)}\n          >\n            {attr.name}\n            {attr.description && <div slot=\"description\">{attr.description}</div>}\n          </le-checkbox>\n        </div>\n      );\n    }\n\n    // Number type\n    if (type === 'number') {\n      return (\n        <div class=\"property-field\">\n          <label htmlFor={`prop-${attr.name}`}>\n            {attr.name}\n            {attr.description && <span class=\"property-hint\">{attr.description}</span>}\n          </label>\n          <input\n            type=\"number\"\n            id={`prop-${attr.name}`}\n            value={value ?? ''}\n            placeholder={attr.default}\n            onChange={(e) => this.handlePropertyChange(attr.name, (e.target as HTMLInputElement).value, type)}\n          />\n        </div>\n      );\n    }\n\n    // Default: string/text input\n    return (\n      <div class=\"property-field\">\n        <le-string-input\n          name={`prop-${attr.name}`}\n          label={attr.name}\n          value={value ?? ''}\n          placeholder={attr.default?.replace(/'/g, '')}\n          onChange={(e: any) => this.handlePropertyChange(attr.name, e.detail.value, type)}\n        >\n          <span slot=\"description\">{attr.description}</span>\n        </le-string-input>\n      </div>\n    );\n  }\n\n  render() {\n    const name = this.displayName || this.formatDisplayName(this.component);\n\n    // In default mode, just pass through content with host classes\n    if (!this.adminMode) {\n      return (\n        <Host class={classnames(this.component, this.hostClass)} style={this.hostStyle}>\n          <slot></slot>\n        </Host>\n      );\n    }\n\n    // In admin mode, show wrapper with header and settings\n    return (\n      <Host class={classnames(this.component, this.hostClass, 'admin-mode')} style={this.hostStyle}>\n        <div class=\"le-component-wrapper\">\n          <div class=\"le-component-header\">\n            <span class=\"le-component-name\">{name}</span>\n            <le-popover \n              popoverTitle={`${name} Settings`}\n              position=\"right\"\n              align=\"start\"\n              min-width=\"300px\"\n              mode=\"default\"\n            >\n              <le-button\n                type=\"button\"\n                class=\"le-component-button\"\n                slot=\"trigger\"\n                variant=\"clear\"\n                size=\"small\"\n                aria-label=\"Edit component properties\"\n                icon-only\n              >\n                <span class=\"le-component-trigger\" slot=\"icon-only\">⚙</span>\n              </le-button>\n              {this.renderPropertyEditor()}\n            </le-popover>\n          </div>\n          <div class=\"le-component-content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n/**\n * Type definitions for component metadata\n */\ninterface ComponentMetadata {\n  tagName: string;\n  description?: string;\n  attributes: AttributeMetadata[];\n}\n\ninterface AttributeMetadata {\n  name: string;\n  fieldName?: string;\n  description?: string;\n  default?: string;\n  type?: {\n    text: string;\n  };\n}\n"]}

package/dist/collection/components/le-number-input/le-number-input.css

@@ -1,135 +0,0 @@
-:host {
-  display: block;
-  --le-input-bg: var(--le-color-surface, #ffffff);
-  --le-input-color: var(--le-color-text-primary, #333333);
-  --le-input-border: var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);
-  --le-input-radius: var(--le-radius-sm, 4px);
-  --le-input-padding: 2px 6px;
-  --le-input-height: 1.5rem;
-  --le-input-label-color: var(--le-color-text-primary, #333333);
-  --le-input-desc-color: var(--le-color-text-secondary, #666666);
-  --le-input-placeholder-color: #999999;
-  --le-input-border-error: 2px solid var(--le-color-danger, #dc3545);
-  --le-input-error-color: var(--le-color-danger, #dc3545);
-}
-
-.le-input-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.le-input-label {
-  display: block;
-  font-size: 0.9em;
-  font-weight: 500;
-  color: var(--le-input-label-color);
-  margin-bottom: 2px;
-}
-
-.le-input-container {
-  position: relative;
-  display: flex;
-  align-items: center;
-  background: var(--le-input-bg);
-  border: var(--le-input-border);
-  border-radius: var(--le-input-radius);
-  transition: border-color 0.2s;
-}
-
-.le-input-container:focus-within {
-  outline: 2px solid var(--le-color-focus);
-  outline-offset: 2px;
-}
-
-.le-input-container.has-error {
-  border: var(--le-input-border-error);
-}
-
-:host([disabled]) .le-input-container {
-  opacity: 0.6;
-  background-color: rgba(0,0,0,0.05);
-  cursor: not-allowed;
-}
-
-input {
-  flex: 1;
-  width: 100%;
-  height: calc(var(--le-input-height) - 2px);
-  padding: var(--le-input-padding);
-  border: none;
-  background: transparent;
-  color: var(--le-input-color);
-  font-family: inherit;
-  font-size: inherit;
-  outline: none;
-  text-align: right; /* Aligned to end */
-  -moz-appearance: textfield; /* Remove default spinners in Firefox */
-}
-
-/* Remove default spinners in Chrome/Safari/Edge */
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input::placeholder {
-  color: var(--le-input-placeholder-color);
-}
-
-.icon-start, .icon-end {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 8px;
-  color: var(--le-input-desc-color);
-}
-
-.le-input-controls {
-  display: flex;
-  flex-direction: column;
-  border-left: 1px solid var(--le-color-border, #cccccc);
-  height: 100%;
-}
-
-.le-input-control-btn {
-  --le-button-border-radius: 0;
-  --le-button-padding-x: 0;
-  --le-button-padding-y: 0;
-  --le-button-small-font-size: 9.5px;
-  --le-button-small-padding: 0 0.2rem;
-  --le-button-icon-aspect-ratio: 2;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 50%;
-  cursor: pointer;
-  background: none;
-  border: none;
-  color: var(--le-input-desc-color);
-  font-size: 10px;
-  line-height: 1;
-}
-
-.le-input-control-btn:hover {
-  background-color: rgba(0,0,0,0.05);
-  color: var(--le-color-primary, #007bff);
-}
-
-.le-input-control-btn:active {
-  background-color: rgba(0,0,0,0.1);
-}
-
-.le-input-description {
-  font-size: 0.85em;
-  color: var(--le-input-desc-color);
-  margin-top: 2px;
-}
-
-.le-input-error {
-  font-size: 0.85em;
-  color: var(--le-input-error-color);
-  margin-top: 2px;
-}