le-kit 0.0.3 → 0.1.1

package/dist/collection/components/le-turntable/le-turntable.js

@@ -1,102 +1,210 @@
-export class LeTurntable {
-    constructor() {
-        this.center = 'center';
-        this.value = 0;
-        this.rotating = false;
-        this.currentAngle = 0;
-    }
-    updateValue(newValue) {
-        if (!this.rotating) {
-            this.currentAngle = parseFloat(newValue);
-            this.setAngle(this.currentAngle);
-        }
-    }
-    handleMouseDown(evt) {
-        this.rotating = true;
-        this.startAngle = this.getAngle(evt.pageX, evt.pageY);
-        evt.preventDefault();
-        evt.cancelBubble = true;
-        return false;
-    }
-    handleMouseMove(evt) {
-        if (this.rotating) {
-            this.setAngle(this.currentAngle + (this.getAngle(evt.pageX, evt.pageY) - this.startAngle));
-            return false;
-        }
-    }
-    handleMouseUp(evt) {
-        if (this.rotating) {
-            const angle = this.currentAngle + (this.getAngle(evt.pageX, evt.pageY) - this.startAngle);
-            this.setAngle(angle);
-            this.currentAngle = angle;
-            this.rotating = false;
-            return false;
-        }
-    }
-    handleWindowResize() {
-        this.getTransformOrigin();
-    }
-    componentDidLoad() {
-        this.el.style.transformOrigin = this.center;
-        this.currentAngle = this.value;
-        this.getTransformOrigin();
-        this.setAngle(this.currentAngle);
-    }
-    componentDidUpdate() {
-        this.getTransformOrigin();
-    }
-    getTransformOrigin() {
-        [this.centerX, this.centerY] = window.getComputedStyle(this.el, null)
-            .transformOrigin
-            .split(' ')
-            .map(val => Math.round(parseFloat(val)));
-        let t = null;
-        const scrollContainer = ((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.scrollLeft === 'number' ? t : document.body;
-        const clientRects = this.el.getBoundingClientRect();
-        this.pageX = Math.round(clientRects.left + scrollContainer.scrollLeft);
-        this.pageY = Math.round(clientRects.top + scrollContainer.scrollTop);
-    }
-    getAngle(posX, posY) {
-        const x = posX - this.pageX - this.centerX;
-        const y = posY - this.pageY - this.centerY;
-        const angle = Math.round(Math.atan2(y, x) * 180 / Math.PI * 100) / 100;
-        return angle;
-    }
-    setAngle(angle) {
-        this.el.style.transform = `rotate(${angle}deg)`;
-    }
-    render() {
-        return h("div", { class: "turntable", onMouseDown: this.handleMouseDown.bind(this) },
-            h("slot", null));
-    }
-    static get is() { return "le-turntable"; }
-    static get encapsulation() { return "shadow"; }
-    static get properties() { return {
-        "center": {
-            "type": String,
-            "attr": "center"
-        },
-        "el": {
-            "elementRef": true
-        },
-        "value": {
-            "type": Number,
-            "attr": "value",
-            "watchCallbacks": ["updateValue"]
-        }
-    }; }
-    static get listeners() { return [{
-            "name": "window:mousemove",
-            "method": "handleMouseMove",
-            "passive": true
-        }, {
-            "name": "window:mouseup",
-            "method": "handleMouseUp",
-            "passive": true
-        }, {
-            "name": "window:resize",
-            "method": "handleWindowResize",
-            "passive": true
-        }]; }
-    static get style() { return "/**style-placeholder:le-turntable:**/"; }
-}
+import { h } from "@stencil/core";
+export class LeTurntable {
+    // host element
+    el;
+    // transform origin
+    // gets the same values as transform-origin css property
+    center = 'center';
+    // transform rotate
+    value = 0;
+    updateValue(newValue) {
+        if (!this.rotating) {
+            this.currentAngle = parseFloat(newValue);
+            this.setAngle(this.currentAngle);
+        }
+    }
+    /**
+     * Internal state
+     *
+     * using properties instead of @State decoratorm
+     * because we are only changing styles of the element and don't
+     * need the element to be rerendered
+     */
+    // indicates is the element being manually rotated right now
+    rotating = false;
+    // coordinates of the transform origin in pixels
+    centerX;
+    centerY;
+    // element page (body?) offset in pixels
+    pageX;
+    pageY;
+    currentAngle = 0;
+    // angle at the start of the drag
+    startAngle;
+    /**
+     * Event listeners
+     */
+    handleMouseDown(evt) {
+        // set rotating mode on
+        this.rotating = true;
+        // get start angle
+        //   getting pageX/Y, because when the element is transformed
+        //   relative values are useless
+        this.startAngle = this.getAngle(evt.pageX, evt.pageY);
+        // cancel the event to prevent text selection
+        evt.preventDefault();
+        evt.stopPropagation();
+        return false;
+    }
+    /**
+     * Fires when the mouse moves
+     * checks is the element rotating right now and if it is
+     * then calc the current angle and rotate the element
+     *
+     * TODO: attach events only after the dragStart?
+     */
+    handleMouseMove(evt) {
+        if (this.rotating) {
+            // calc angle update and rotate element
+            this.setAngle(this.currentAngle + (this.getAngle(evt.pageX, evt.pageY) - this.startAngle));
+            return false;
+        }
+    }
+    handleMouseUp(evt) {
+        if (this.rotating) {
+            const angle = this.currentAngle + (this.getAngle(evt.pageX, evt.pageY) - this.startAngle);
+            this.setAngle(angle);
+            this.currentAngle = angle;
+            this.rotating = false;
+            return false;
+        }
+    }
+    // on window resize the center should be recalculated
+    handleWindowResize() {
+        this.getTransformOrigin();
+    }
+    /**
+     * Component lifecycles
+     */
+    componentDidLoad() {
+        this.el.style.transformOrigin = this.center;
+        this.currentAngle = this.value;
+        this.getTransformOrigin();
+        this.setAngle(this.currentAngle);
+    }
+    componentDidUpdate() {
+        this.getTransformOrigin();
+    }
+    /**
+     * Calculates the transform origin of the component
+     * and the page offset in pixels
+     *
+     * We'll need these values to calculate the angle of pointer event
+     */
+    getTransformOrigin() {
+        // transform origin
+        [this.centerX, this.centerY] = window
+            .getComputedStyle(this.el, null)
+            .transformOrigin.split(' ')
+            .map(val => Math.round(parseFloat(val)));
+        // page offset
+        let t = null;
+        const scrollContainer = ((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.scrollLeft === 'number' ? t : document.body;
+        const clientRects = this.el.getBoundingClientRect();
+        this.pageX = Math.round(clientRects.left + scrollContainer.scrollLeft);
+        this.pageY = Math.round(clientRects.top + scrollContainer.scrollTop);
+    }
+    /**
+     * Calculates current angle
+     *
+     * @param {number} posX  horizontal mouse position
+     * @param {number} posY  vertical mouse position
+     */
+    getAngle(posX, posY) {
+        const x = posX - this.pageX - this.centerX;
+        const y = posY - this.pageY - this.centerY;
+        const angle = Math.round(((Math.atan2(y, x) * 180) / Math.PI) * 100) / 100;
+        return angle;
+    }
+    setAngle(angle) {
+        this.el.style.transform = `rotate(${angle}deg)`;
+    }
+    render() {
+        return (h("div", { key: 'ec9a506a360881ab3c3df97027c8a25d663f6819', class: "turntable", onMouseDown: this.handleMouseDown.bind(this) }, h("slot", { key: '926a84fa75952bdc3e44f1b2146848401e8ab10f' })));
+    }
+    static get is() { return "le-turntable"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["le-turntable.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["le-turntable.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "center": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "center",
+                "defaultValue": "'center'"
+            },
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "updateValue"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "mousemove",
+                "method": "handleMouseMove",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "mouseup",
+                "method": "handleMouseUp",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "resize",
+                "method": "handleWindowResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}
+//# sourceMappingURL=le-turntable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"le-turntable.js","sourceRoot":"","sources":["../../../src/components/le-turntable/le-turntable.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Prop, Listen, h, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'le-turntable',\n  styleUrl: 'le-turntable.css',\n  shadow: true,\n})\nexport class LeTurntable {\n  // host element\n  @Element() el: HTMLElement;\n\n  // transform origin\n  // gets the same values as transform-origin css property\n  @Prop() center: string = 'center';\n\n  // transform rotate\n  @Prop() value: number = 0;\n\n  @Watch('value')\n  updateValue(newValue) {\n    if (!this.rotating) {\n      this.currentAngle = parseFloat(newValue);\n      this.setAngle(this.currentAngle);\n    }\n  }\n\n  /**\n   * Internal state\n   *\n   * using properties instead of @State decoratorm\n   * because we are only changing styles of the element and don't\n   * need the element to be rerendered\n   */\n\n  // indicates is the element being manually rotated right now\n  rotating = false;\n\n  // coordinates of the transform origin in pixels\n  centerX: number;\n  centerY: number;\n\n  // element page (body?) offset in pixels\n  pageX: number;\n  pageY: number;\n\n  currentAngle: number = 0;\n  // angle at the start of the drag\n  startAngle: number;\n\n  /**\n   * Event listeners\n   */\n  handleMouseDown(evt: MouseEvent) {\n    // set rotating mode on\n    this.rotating = true;\n\n    // get start angle\n    //   getting pageX/Y, because when the element is transformed\n    //   relative values are useless\n    this.startAngle = this.getAngle(evt.pageX, evt.pageY);\n\n    // cancel the event to prevent text selection\n    evt.preventDefault();\n    evt.stopPropagation();\n    return false;\n  }\n\n  /**\n   * Fires when the mouse moves\n   * checks is the element rotating right now and if it is\n   * then calc the current angle and rotate the element\n   *\n   * TODO: attach events only after the dragStart?\n   */\n  @Listen('mousemove', { target: 'window' })\n  handleMouseMove(evt: MouseEvent) {\n    if (this.rotating) {\n      // calc angle update and rotate element\n      this.setAngle(this.currentAngle + (this.getAngle(evt.pageX, evt.pageY) - this.startAngle));\n      return false;\n    }\n  }\n\n  @Listen('mouseup', { target: 'window' })\n  handleMouseUp(evt: MouseEvent) {\n    if (this.rotating) {\n      const angle = this.currentAngle + (this.getAngle(evt.pageX, evt.pageY) - this.startAngle);\n      this.setAngle(angle);\n      this.currentAngle = angle;\n      this.rotating = false;\n      return false;\n    }\n  }\n\n  // on window resize the center should be recalculated\n  @Listen('resize', { target: 'window' })\n  handleWindowResize() {\n    this.getTransformOrigin();\n  }\n\n  /**\n   * Component lifecycles\n   */\n  componentDidLoad() {\n    this.el.style.transformOrigin = this.center;\n    this.currentAngle = this.value;\n\n    this.getTransformOrigin();\n    this.setAngle(this.currentAngle);\n  }\n\n  componentDidUpdate() {\n    this.getTransformOrigin();\n  }\n\n  /**\n   * Calculates the transform origin of the component\n   * and the page offset in pixels\n   *\n   * We'll need these values to calculate the angle of pointer event\n   */\n  getTransformOrigin() {\n    // transform origin\n    [this.centerX, this.centerY] = window\n      .getComputedStyle(this.el, null)\n      .transformOrigin.split(' ')\n      .map(val => Math.round(parseFloat(val)));\n    // page offset\n    let t = null;\n    const scrollContainer = ((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.scrollLeft === 'number' ? t : document.body;\n    const clientRects = this.el.getBoundingClientRect();\n    this.pageX = Math.round(clientRects.left + scrollContainer.scrollLeft);\n    this.pageY = Math.round(clientRects.top + scrollContainer.scrollTop);\n  }\n\n  /**\n   * Calculates current angle\n   *\n   * @param {number} posX  horizontal mouse position\n   * @param {number} posY  vertical mouse position\n   */\n  getAngle(posX: number, posY: number) {\n    const x = posX - this.pageX - this.centerX;\n    const y = posY - this.pageY - this.centerY;\n    const angle = Math.round(((Math.atan2(y, x) * 180) / Math.PI) * 100) / 100;\n    return angle;\n  }\n\n  setAngle(angle) {\n    this.el.style.transform = `rotate(${angle}deg)`;\n  }\n\n  render() {\n    return (\n      <div class=\"turntable\" onMouseDown={this.handleMouseDown.bind(this)}>\n        <slot />\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/global/app.js

@@ -0,0 +1,130 @@
+import { setMode } from "@stencil/core";
+/**
+ * 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';
+    });
+}
+// Default export for Stencil global script
+export default initializeMode;
+/**
+ * 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.
+ */
+export 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.
+ */
+export 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.
+ */
+export 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.
+ */
+export function setGlobalTheme(theme) {
+    document.documentElement.setAttribute('theme', theme);
+}
+//# sourceMappingURL=app.js.map

package/dist/collection/global/app.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app.js","sourceRoot":"","sources":["../../src/global/app.ts"],"names":[],"mappings":"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","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"]}

package/dist/collection/index-admin.js

@@ -0,0 +1,27 @@
+/**
+ * Full Le-Kit component exports
+ * Includes all components with admin mode support
+ *
+ * Auto-generated by scripts/build-targets.mjs
+ * Do not edit manually.
+ */
+// Component class exports
+export { LeBox } from './components/le-box/le-box';
+export { LeButton } from './components/le-button/le-button';
+export { LeCard } from './components/le-card/le-card';
+export { LeCheckbox } from './components/le-checkbox/le-checkbox';
+export { LeComponent } from './components/le-component/le-component';
+export { LeNumberInput } from './components/le-number-input/le-number-input';
+export { LePopover } from './components/le-popover/le-popover';
+export { LePopup } from './components/le-popup/le-popup';
+export { LeRoundProgress } from './components/le-round-progress/le-round-progress';
+export { LeSlot } from './components/le-slot/le-slot';
+export { LeStack } from './components/le-stack/le-stack';
+export { LeStringInput } from './components/le-string-input/le-string-input';
+export { LeText } from './components/le-text/le-text';
+export { LeTurntable } from './components/le-turntable/le-turntable';
+// Re-export utilities and types from main index
+export { generateId, parseCommaSeparated, slotHasContent } from './utils/utils';
+export { getMode, setGlobalMode, getTheme, setGlobalTheme } from './global/app';
+export { leAlert, leConfirm, lePrompt } from './components/le-popup/le-popup.api';
+//# sourceMappingURL=index-admin.js.map

package/dist/collection/index-admin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-admin.js","sourceRoot":"","sources":["../src/index-admin.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,0BAA0B;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AACnF,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAErE,gDAAgD;AAChD,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEhF,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC","sourcesContent":["/**\n * Full Le-Kit component exports\n * Includes all components with admin mode support\n * \n * Auto-generated by scripts/build-targets.mjs\n * Do not edit manually.\n */\n\n// Component class exports\nexport { LeBox } from './components/le-box/le-box';\nexport { LeButton } from './components/le-button/le-button';\nexport { LeCard } from './components/le-card/le-card';\nexport { LeCheckbox } from './components/le-checkbox/le-checkbox';\nexport { LeComponent } from './components/le-component/le-component';\nexport { LeNumberInput } from './components/le-number-input/le-number-input';\nexport { LePopover } from './components/le-popover/le-popover';\nexport { LePopup } from './components/le-popup/le-popup';\nexport { LeRoundProgress } from './components/le-round-progress/le-round-progress';\nexport { LeSlot } from './components/le-slot/le-slot';\nexport { LeStack } from './components/le-stack/le-stack';\nexport { LeStringInput } from './components/le-string-input/le-string-input';\nexport { LeText } from './components/le-text/le-text';\nexport { LeTurntable } from './components/le-turntable/le-turntable';\n\n// Re-export utilities and types from main index\nexport { generateId, parseCommaSeparated, slotHasContent } from './utils/utils';\nexport { getMode, setGlobalMode, getTheme, setGlobalTheme } from './global/app';\nexport type { LeKitMode, LeKitTheme } from './global/app';\nexport { leAlert, leConfirm, lePrompt } from './components/le-popup/le-popup.api';\nexport type { PopupOptions } from './components/le-popup/le-popup.api';\nexport type { PopupResult, PopupType, PopupPosition } from './components/le-popup/le-popup';\n\n// Type exports\nexport type * from './types/options';\nexport type * from './types/blocks';\n"]}

package/dist/collection/index-core.js

@@ -0,0 +1,25 @@
+/**
+ * Core Le-Kit component exports
+ * Excludes admin-only components (le-component, le-slot)
+ *
+ * Auto-generated by scripts/build-targets.mjs
+ * Do not edit manually.
+ */
+// Component class exports
+export { LeBox } from './components/le-box/le-box';
+export { LeButton } from './components/le-button/le-button';
+export { LeCard } from './components/le-card/le-card';
+export { LeCheckbox } from './components/le-checkbox/le-checkbox';
+export { LeNumberInput } from './components/le-number-input/le-number-input';
+export { LePopover } from './components/le-popover/le-popover';
+export { LePopup } from './components/le-popup/le-popup';
+export { LeRoundProgress } from './components/le-round-progress/le-round-progress';
+export { LeStack } from './components/le-stack/le-stack';
+export { LeStringInput } from './components/le-string-input/le-string-input';
+export { LeText } from './components/le-text/le-text';
+export { LeTurntable } from './components/le-turntable/le-turntable';
+// Re-export utilities and types from main index
+export { generateId, parseCommaSeparated, slotHasContent } from './utils/utils';
+export { getMode, setGlobalMode, getTheme, setGlobalTheme } from './global/app';
+export { leAlert, leConfirm, lePrompt } from './components/le-popup/le-popup.api';
+//# sourceMappingURL=index-core.js.map

package/dist/collection/index-core.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-core.js","sourceRoot":"","sources":["../src/index-core.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,0BAA0B;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAC;AACnF,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAErE,gDAAgD;AAChD,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEhF,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC","sourcesContent":["/**\n * Core Le-Kit component exports\n * Excludes admin-only components (le-component, le-slot)\n * \n * Auto-generated by scripts/build-targets.mjs\n * Do not edit manually.\n */\n\n// Component class exports\nexport { LeBox } from './components/le-box/le-box';\nexport { LeButton } from './components/le-button/le-button';\nexport { LeCard } from './components/le-card/le-card';\nexport { LeCheckbox } from './components/le-checkbox/le-checkbox';\nexport { LeNumberInput } from './components/le-number-input/le-number-input';\nexport { LePopover } from './components/le-popover/le-popover';\nexport { LePopup } from './components/le-popup/le-popup';\nexport { LeRoundProgress } from './components/le-round-progress/le-round-progress';\nexport { LeStack } from './components/le-stack/le-stack';\nexport { LeStringInput } from './components/le-string-input/le-string-input';\nexport { LeText } from './components/le-text/le-text';\nexport { LeTurntable } from './components/le-turntable/le-turntable';\n\n// Re-export utilities and types from main index\nexport { generateId, parseCommaSeparated, slotHasContent } from './utils/utils';\nexport { getMode, setGlobalMode, getTheme, setGlobalTheme } from './global/app';\nexport type { LeKitMode, LeKitTheme } from './global/app';\nexport { leAlert, leConfirm, lePrompt } from './components/le-popup/le-popup.api';\nexport type { PopupOptions } from './components/le-popup/le-popup.api';\nexport type { PopupResult, PopupType, PopupPosition } from './components/le-popup/le-popup';\n\n// Type exports\nexport type * from './types/options';\nexport type * from './types/blocks';\n"]}

package/dist/collection/index.js

@@ -0,0 +1,15 @@
+/**
+ * @fileoverview Entry point for le-kit component library
+ *
+ * This file exports utilities, types, and helper functions.
+ * Components are auto-registered and available as custom elements.
+ *
+ * @see README.md for usage instructions
+ */
+// Utility exports
+export { generateId, parseCommaSeparated, slotHasContent } from './utils/utils';
+// Global mode and theme helpers
+export { getMode, setGlobalMode, getTheme, setGlobalTheme } from './global/app';
+// Popup/dialog programmatic API
+export { leAlert, leConfirm, lePrompt } from './components/le-popup/le-popup.api';
+//# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,kBAAkB;AAClB,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAEhF,gCAAgC;AAChC,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAGhF,gCAAgC;AAChC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC","sourcesContent":["/**\n * @fileoverview Entry point for le-kit component library\n *\n * This file exports utilities, types, and helper functions.\n * Components are auto-registered and available as custom elements.\n *\n * @see README.md for usage instructions\n */\n\n// Utility exports\nexport { generateId, parseCommaSeparated, slotHasContent } from './utils/utils';\n\n// Global mode and theme helpers\nexport { getMode, setGlobalMode, getTheme, setGlobalTheme } from './global/app';\nexport type { LeKitMode, LeKitTheme } from './global/app';\n\n// Popup/dialog programmatic API\nexport { leAlert, leConfirm, lePrompt } from './components/le-popup/le-popup.api';\nexport type { PopupOptions } from './components/le-popup/le-popup.api';\nexport type { PopupResult, PopupType, PopupPosition } from './components/le-popup/le-popup';\n\n// Type exports\nexport type * from './components.d.ts';\n"]}