le-kit 0.1.7 → 0.1.8

package/dist/core/cjs/le-turntable.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"le-turntable.entry.cjs.js","sources":["src-core/components/le-turntable/le-turntable.css?tag=le-turntable&encapsulation=shadow","src-core/components/le-turntable/le-turntable.tsx"],"sourcesContent":[":host {\n  display: block;\n  cursor: grab;\n}\n\ndiv.turntable {\n  width: 100%;\n  height: 100%;\n  padding: 1px;\n}\n","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"],"names":["h"],"mappings":"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"}

package/dist/core/cjs/loader.cjs.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var index = require('./index-D7B9TPh8.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await index.globalScripts();
+  return index.bootstrapLazy([["le-number-input.cjs",[[769,"le-number-input",{"value":[1538],"name":[1],"label":[1],"placeholder":[1],"min":[2],"max":[2],"step":[2],"required":[4],"disabled":[4],"readonly":[4],"iconStart":[1,"icon-start"],"showSpinners":[4,"show-spinners"],"externalId":[1,"external-id"],"isValid":[32],"validationMessage":[32]},null,{"value":["valueChanged"]}]]],["le-popup.cjs",[[769,"le-popup",{"open":[1540],"type":[1],"popupTitle":[1,"popup-title"],"message":[1],"modal":[4],"position":[1],"confirmText":[1,"confirm-text"],"cancelText":[1,"cancel-text"],"placeholder":[1],"defaultValue":[1,"default-value"],"closeOnBackdrop":[4,"close-on-backdrop"],"inputValue":[32],"show":[64],"hide":[64]}]]],["le-box.cjs",[[769,"le-box",{"grow":[2],"shrink":[2],"basis":[1],"width":[1],"height":[1],"minWidth":[1,"min-width"],"maxWidth":[1,"max-width"],"minHeight":[1,"min-height"],"maxHeight":[1,"max-height"],"background":[1],"borderRadius":[1,"border-radius"],"border":[1],"alignSelf":[1,"align-self"],"alignContent":[1,"align-content"],"justifyContent":[1,"justify-content"],"padding":[1],"order":[2],"displayFlex":[4,"display-flex"],"innerDirection":[1,"inner-direction"],"innerGap":[1,"inner-gap"]}]]],["le-card.cjs",[[769,"le-card",{"variant":[1],"interactive":[4]}]]],["le-checkbox.cjs",[[769,"le-checkbox",{"checked":[1540],"disabled":[4],"name":[1],"value":[1],"externalId":[1,"external-id"]}]]],["le-popover.cjs",[[769,"le-popover",{"mode":[1537],"open":[1540],"position":[1],"align":[1],"popoverTitle":[1,"popover-title"],"showClose":[4,"show-close"],"closeOnClickOutside":[4,"close-on-click-outside"],"closeOnEscape":[4,"close-on-escape"],"offset":[2],"width":[1],"minWidth":[1,"min-width"],"maxWidth":[1,"max-width"],"isPositioned":[32],"show":[64],"hide":[64],"toggle":[64]}]]],["le-round-progress.cjs",[[769,"le-round-progress",{"value":[2],"padding":[2],"paths":[1],"params":[32]},null,{"value":["updateValue"],"padding":["updatePadding"],"paths":["updateProgressBackgrounds"]}]]],["le-stack.cjs",[[769,"le-stack",{"direction":[1],"gap":[1],"align":[1],"justify":[1],"wrap":[4],"alignContent":[1,"align-content"],"reverse":[4],"maxItems":[2,"max-items"],"fullWidth":[4,"full-width"],"fullHeight":[4,"full-height"],"padding":[1]}]]],["le-string-input.cjs",[[769,"le-string-input",{"mode":[1537],"value":[1537],"name":[1],"type":[1],"label":[1],"iconStart":[1,"icon-start"],"iconEnd":[1,"icon-end"],"placeholder":[1],"disabled":[4],"readonly":[4],"externalId":[1,"external-id"]}]]],["le-text.cjs",[[769,"le-text",{"variant":[1537],"align":[513],"color":[1],"truncate":[4],"maxLines":[2,"max-lines"],"adminMode":[32],"content":[32],"isFocused":[32],"selectionState":[32]},null,{"variant":["onVariantChange"]}]]],["le-turntable.cjs",[[769,"le-turntable",{"center":[1],"value":[2]},[[9,"mousemove","handleMouseMove"],[9,"mouseup","handleMouseUp"],[9,"resize","handleWindowResize"]],{"value":["updateValue"]}]]],["le-button.cjs",[[769,"le-button",{"mode":[1537],"variant":[1],"color":[1],"size":[1],"selected":[4],"fullWidth":[516,"full-width"],"iconOnly":[4,"icon-only"],"disabled":[4],"type":[1],"href":[1],"target":[1]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;
+//# sourceMappingURL=loader.cjs.js.map

package/dist/core/cjs/loader.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.cjs.js","sources":["@lazy-external-entrypoint?app-data=conditional"],"sourcesContent":["export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\nexport const defineCustomElements = async (win, options) => {\n  if (typeof window === 'undefined') return undefined;\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n};\n"],"names":["globalScripts","bootstrapLazy"],"mappings":";;;;AAGY,MAAC,oBAAoB,GAAG,OAAO,GAAG,EAAE,OAAO,KAAK;AAC5D,EAAE,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,OAAO,SAAS;AACrD,EAAE,MAAMA,mBAAa,EAAE;AACvB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D;;;;;"}

package/dist/core/cjs/utils-DrsoID-a.js

@@ -0,0 +1,152 @@
+'use strict';
+
+var index = require('./index-D7B9TPh8.js');
+
+/**
+ * Utility functions for le-kit components
+ */
+/**
+ * Generates a unique ID for component instances
+ */
+function generateId(prefix = 'le') {
+    return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;
+}
+/**
+ * Parses a comma-separated string into an array
+ */
+function parseCommaSeparated(value) {
+    if (!value)
+        return [];
+    return value
+        .split(',')
+        .map(s => s.trim())
+        .filter(Boolean);
+}
+/**
+ * Checks if a slot has content
+ */
+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?.();
+ *   }
+ * }
+ * ```
+ */
+function observeModeChanges(el, callback) {
+    // Call immediately with current mode
+    callback(index.getMode(el));
+    // Set up observer for mode attribute changes
+    const observer = new MutationObserver(() => {
+        callback(index.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
+ */
+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(' ');
+}
+
+exports.classnames = classnames;
+exports.generateId = generateId;
+exports.observeModeChanges = observeModeChanges;
+exports.parseCommaSeparated = parseCommaSeparated;
+exports.slotHasContent = slotHasContent;
+//# sourceMappingURL=utils-DrsoID-a.js.map
+
+//# sourceMappingURL=utils-DrsoID-a.js.map

package/dist/core/cjs/utils-DrsoID-a.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils-DrsoID-a.js","sources":["src-core/utils/utils.ts"],"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"],"names":["getMode"],"mappings":"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"}

package/dist/core/collection/collection-manifest.json

@@ -0,0 +1,24 @@
+{
+  "entries": [
+    "components/le-popup/le-popup.js",
+    "components/le-box/le-box.js",
+    "components/le-button/le-button.js",
+    "components/le-card/le-card.js",
+    "components/le-checkbox/le-checkbox.js",
+    "components/le-number-input/le-number-input.js",
+    "components/le-popover/le-popover.js",
+    "components/le-round-progress/le-round-progress.js",
+    "components/le-stack/le-stack.js",
+    "components/le-string-input/le-string-input.js",
+    "components/le-text/le-text.js",
+    "components/le-turntable/le-turntable.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.38.3",
+    "typescriptVersion": "5.9.3"
+  },
+  "collections": [],
+  "bundles": [],
+  "global": "global/app.js"
+}

package/dist/core/collection/components/le-box/le-box.default.css

@@ -0,0 +1,37 @@
+/**
+ * le-box default styles
+ *
+ * Flex item properties are applied inline via hostStyle.
+ * This CSS handles visual styling and theming.
+ */
+
+:host {
+  display: block;
+  box-sizing: border-box;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+/* Box container - full size by default */
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+/* Content wrapper */
+.content {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background: var(--le-box-bg, transparent);
+  border-radius: var(--le-box-border-radius, 0);
+  padding: var(--le-box-padding, 0);
+}
+
+/* When displayFlex is enabled, ensure content stretches */
+:host(.display-flex) .content {
+  min-height: 100%;
+}