le-kit 0.1.5 → 0.1.6

package/dist/collection/collection-manifest.json

@@ -0,0 +1,26 @@
+{
+  "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-component/le-component.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-slot/le-slot.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/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%;
+}

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

@@ -0,0 +1,614 @@
+import { h, Host } from "@stencil/core";
+import { classnames } from "../../utils/utils";
+/**
+ * A flexible box component for use as a flex item within le-stack.
+ *
+ * `le-box` wraps content and provides flex item properties like grow, shrink,
+ * basis, and self-alignment. It can also control its internal content alignment.
+ *
+ * @slot - Default slot for box content
+ *
+ * @cssprop --le-box-bg - Background color
+ * @cssprop --le-box-padding - Padding inside the box
+ * @cssprop --le-box-border-radius - Border radius
+ *
+ * @csspart box - The main box container
+ * @csspart content - The inner content wrapper
+ *
+ * @cmsEditable true
+ * @cmsCategory Layout
+ */
+export class LeBox {
+    el;
+    /**
+     * Flex grow factor - how much the item should grow relative to siblings
+     * @min 0
+     */
+    grow = 0;
+    /**
+     * Flex shrink factor - how much the item should shrink relative to siblings
+     * @min 0
+     */
+    shrink = 1;
+    /**
+     * Flex basis - initial size before growing/shrinking (e.g., '200px', '25%', 'auto')
+     */
+    basis = 'auto';
+    /**
+     * Width of the box (CSS value like '100px', '50%', 'auto')
+     */
+    width;
+    /**
+     * Height of the box (CSS value)
+     */
+    height;
+    /**
+     * Minimum width constraint
+     */
+    minWidth;
+    /**
+     * Maximum width constraint
+     */
+    maxWidth;
+    /**
+     * Minimum height constraint
+     */
+    minHeight;
+    /**
+     * Maximum height constraint
+     */
+    maxHeight;
+    /**
+     * Background color or CSS value (e.g., '#f0f0f0', 'var(--le-color-primary-light)')
+     */
+    background;
+    /**
+     * Border radius (e.g., '8px', 'var(--le-radius-md)')
+     */
+    borderRadius;
+    /**
+     * Border style (e.g., '1px solid #ccc', '2px dashed var(--le-color-border)')
+     */
+    border;
+    /**
+     * Self-alignment override for this item on the cross axis
+     * @allowedValues auto | start | center | end | stretch | baseline
+     */
+    alignSelf = 'auto';
+    /**
+     * Internal horizontal alignment of content
+     * @allowedValues start | center | end | stretch
+     */
+    alignContent = 'stretch';
+    /**
+     * Internal vertical alignment of content
+     * @allowedValues start | center | end | stretch
+     */
+    justifyContent = 'start';
+    /**
+     * Padding inside the box (CSS value like '8px', '1rem')
+     */
+    padding;
+    /**
+     * Order in the flex container (lower values come first)
+     */
+    order;
+    /**
+     * Whether to display box content as flex (for internal alignment)
+     */
+    displayFlex = false;
+    /**
+     * Direction of internal flex layout when displayFlex is true
+     * @allowedValues horizontal | vertical
+     */
+    innerDirection = 'vertical';
+    /**
+     * Gap between internal flex items when displayFlex is true
+     */
+    innerGap;
+    getAlignSelf() {
+        const alignMap = {
+            auto: 'auto',
+            start: 'flex-start',
+            center: 'center',
+            end: 'flex-end',
+            stretch: 'stretch',
+            baseline: 'baseline',
+        };
+        return alignMap[this.alignSelf] || 'auto';
+    }
+    getContentAlign() {
+        const alignMap = {
+            start: 'flex-start',
+            center: 'center',
+            end: 'flex-end',
+            stretch: 'stretch',
+        };
+        return alignMap[this.alignContent] || 'stretch';
+    }
+    getContentJustify() {
+        const justifyMap = {
+            start: 'flex-start',
+            center: 'center',
+            end: 'flex-end',
+            stretch: 'stretch',
+        };
+        return justifyMap[this.justifyContent] || 'flex-start';
+    }
+    render() {
+        // Host styles for flex item behavior
+        const hostStyle = {
+            flexGrow: String(this.grow),
+            flexShrink: String(this.shrink),
+            flexBasis: this.basis,
+            alignSelf: this.getAlignSelf(),
+        };
+        if (this.width)
+            hostStyle.width = this.width;
+        if (this.height)
+            hostStyle.height = this.height;
+        if (this.minWidth)
+            hostStyle.minWidth = this.minWidth;
+        if (this.maxWidth)
+            hostStyle.maxWidth = this.maxWidth;
+        if (this.minHeight)
+            hostStyle.minHeight = this.minHeight;
+        if (this.maxHeight)
+            hostStyle.maxHeight = this.maxHeight;
+        if (this.order !== undefined)
+            hostStyle.order = String(this.order);
+        // Inner content styles
+        const contentStyle = {};
+        if (this.padding) {
+            contentStyle.padding = this.padding;
+        }
+        if (this.background) {
+            contentStyle.background = this.background;
+        }
+        if (this.borderRadius) {
+            contentStyle.borderRadius = this.borderRadius;
+        }
+        if (this.border) {
+            contentStyle.border = this.border;
+        }
+        if (this.displayFlex) {
+            contentStyle.display = 'flex';
+            contentStyle.flexDirection = this.innerDirection === 'vertical' ? 'column' : 'row';
+            contentStyle.alignItems = this.getContentAlign();
+            contentStyle.justifyContent = this.getContentJustify();
+            if (this.innerGap) {
+                contentStyle.gap = this.innerGap;
+            }
+        }
+        const hostClass = classnames({
+            'has-grow': this.grow > 0,
+            'display-flex': this.displayFlex,
+            [`inner-${this.innerDirection}`]: this.displayFlex,
+        });
+        return (h(Host, { key: '8d71daaa3a1f34cf1b5fa3afe4f788d974d14dde', style: hostStyle, class: hostClass }, h("le-component", { key: '350393fef2159c40de43792502545ba93e0ec84c', component: "le-box" }, h("div", { key: '425be85bce62b600a383e164a847a2f0622496bd', class: "box", part: "box" }, h("div", { key: '104275e435d64a76428b5934aa0ece7ae3284cd8', class: "content", part: "content", style: contentStyle }, h("le-slot", { key: '7655d6bd5140ffcac514b266b4ca2f790a44e8ae', name: "", description: "Content inside this flex item", type: "slot", "allowed-components": "le-text,le-card,le-button,le-stack,le-box" }, h("slot", { key: '47efcfcc9b9efe5283fa8f558026b3b13ea5b959' })))))));
+    }
+    static get is() { return "le-box"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["le-box.default.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["le-box.default.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "grow": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "min",
+                            "text": "0"
+                        }],
+                    "text": "Flex grow factor - how much the item should grow relative to siblings"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "grow",
+                "defaultValue": "0"
+            },
+            "shrink": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "min",
+                            "text": "0"
+                        }],
+                    "text": "Flex shrink factor - how much the item should shrink relative to siblings"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shrink",
+                "defaultValue": "1"
+            },
+            "basis": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Flex basis - initial size before growing/shrinking (e.g., '200px', '25%', 'auto')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "basis",
+                "defaultValue": "'auto'"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Width of the box (CSS value like '100px', '50%', 'auto')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Height of the box (CSS value)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height"
+            },
+            "minWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum width constraint"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-width"
+            },
+            "maxWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum width constraint"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-width"
+            },
+            "minHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum height constraint"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-height"
+            },
+            "maxHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum height constraint"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-height"
+            },
+            "background": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Background color or CSS value (e.g., '#f0f0f0', 'var(--le-color-primary-light)')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "background"
+            },
+            "borderRadius": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Border radius (e.g., '8px', 'var(--le-radius-md)')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "border-radius"
+            },
+            "border": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Border style (e.g., '1px solid #ccc', '2px dashed var(--le-color-border)')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "border"
+            },
+            "alignSelf": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'auto' | 'start' | 'center' | 'end' | 'stretch' | 'baseline'",
+                    "resolved": "\"auto\" | \"baseline\" | \"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "allowedValues",
+                            "text": "auto | start | center | end | stretch | baseline"
+                        }],
+                    "text": "Self-alignment override for this item on the cross axis"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align-self",
+                "defaultValue": "'auto'"
+            },
+            "alignContent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'center' | 'end' | 'stretch'",
+                    "resolved": "\"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "allowedValues",
+                            "text": "start | center | end | stretch"
+                        }],
+                    "text": "Internal horizontal alignment of content"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align-content",
+                "defaultValue": "'stretch'"
+            },
+            "justifyContent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'center' | 'end' | 'stretch'",
+                    "resolved": "\"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "allowedValues",
+                            "text": "start | center | end | stretch"
+                        }],
+                    "text": "Internal vertical alignment of content"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "justify-content",
+                "defaultValue": "'start'"
+            },
+            "padding": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Padding inside the box (CSS value like '8px', '1rem')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padding"
+            },
+            "order": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Order in the flex container (lower values come first)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "order"
+            },
+            "displayFlex": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to display box content as flex (for internal alignment)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "display-flex",
+                "defaultValue": "false"
+            },
+            "innerDirection": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "allowedValues",
+                            "text": "horizontal | vertical"
+                        }],
+                    "text": "Direction of internal flex layout when displayFlex is true"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "inner-direction",
+                "defaultValue": "'vertical'"
+            },
+            "innerGap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Gap between internal flex items when displayFlex is true"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "inner-gap"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=le-box.js.map