le-kit 0.1.5 → 0.1.6

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

@@ -0,0 +1,389 @@
+import { h } from "@stencil/core";
+import { classnames } from "../../utils/utils";
+/**
+ * A flexible stack layout component using CSS flexbox.
+ *
+ * `le-stack` arranges its children in a row (horizontal) or column (vertical)
+ * with configurable spacing, alignment, and wrapping behavior. Perfect for
+ * creating responsive layouts.
+ *
+ * @slot - Default slot for stack items (le-box components recommended)
+ *
+ * @cssprop --le-stack-gap - Gap between items (defaults to var(--le-space-md))
+ *
+ * @csspart stack - The main stack container
+ *
+ * @cmsEditable true
+ * @cmsCategory Layout
+ */
+export class LeStack {
+    el;
+    /**
+     * Direction of the stack layout
+     * @allowedValues horizontal | vertical
+     */
+    direction = 'horizontal';
+    /**
+     * Gap between items (CSS value like '8px', '1rem', 'var(--le-space-md)')
+     */
+    gap;
+    /**
+     * Alignment of items on the cross axis
+     * @allowedValues start | center | end | stretch | baseline
+     */
+    align = 'stretch';
+    /**
+     * Distribution of items on the main axis
+     * @allowedValues start | center | end | space-between | space-around | space-evenly
+     */
+    justify = 'start';
+    /**
+     * Whether items should wrap to multiple lines
+     */
+    wrap = false;
+    /**
+     * Alignment of wrapped lines (only applies when wrap is true)
+     * @allowedValues start | center | end | stretch | space-between | space-around
+     */
+    alignContent = 'stretch';
+    /**
+     * Whether to reverse the order of items
+     */
+    reverse = false;
+    /**
+     * Maximum number of items allowed in the stack (for CMS validation)
+     * @min 1
+     */
+    maxItems;
+    /**
+     * Whether the stack should take full width of its container
+     */
+    fullWidth = false;
+    /**
+     * Whether the stack should take full height of its container
+     */
+    fullHeight = false;
+    /**
+     * Padding inside the stack container (CSS value)
+     */
+    padding;
+    getFlexDirection() {
+        const base = this.direction === 'vertical' ? 'column' : 'row';
+        return this.reverse ? `${base}-reverse` : base;
+    }
+    getAlignItems() {
+        const alignMap = {
+            start: 'flex-start',
+            center: 'center',
+            end: 'flex-end',
+            stretch: 'stretch',
+            baseline: 'baseline',
+        };
+        return alignMap[this.align] || 'stretch';
+    }
+    getJustifyContent() {
+        const justifyMap = {
+            start: 'flex-start',
+            center: 'center',
+            end: 'flex-end',
+            'space-between': 'space-between',
+            'space-around': 'space-around',
+            'space-evenly': 'space-evenly',
+        };
+        return justifyMap[this.justify] || 'flex-start';
+    }
+    getAlignContent() {
+        const alignContentMap = {
+            start: 'flex-start',
+            center: 'center',
+            end: 'flex-end',
+            stretch: 'stretch',
+            'space-between': 'space-between',
+            'space-around': 'space-around',
+        };
+        return alignContentMap[this.alignContent] || 'stretch';
+    }
+    render() {
+        const style = {
+            display: 'flex',
+            flexDirection: this.getFlexDirection(),
+            alignItems: this.getAlignItems(),
+            justifyContent: this.getJustifyContent(),
+            flexWrap: this.wrap ? 'wrap' : 'nowrap',
+        };
+        if (this.wrap) {
+            style.alignContent = this.getAlignContent();
+        }
+        if (this.gap) {
+            style.gap = this.gap;
+        }
+        if (this.padding) {
+            style.padding = this.padding;
+        }
+        // if (this.fullWidth) {
+        //   style.width = '100%';
+        // }
+        // if (this.fullHeight) {
+        //   style.height = '100%';
+        // }
+        const hostClass = classnames(`direction-${this.direction}`, {
+            'wrap': this.wrap,
+            'reverse': this.reverse,
+            'full-width': this.fullWidth,
+            'full-height': this.fullHeight,
+        });
+        // Slot style for admin mode - make items display in the same direction
+        const slotStyle = `display: flex; flex-direction: ${this.getFlexDirection()}; gap: ${this.gap || 'var(--le-space-md)'}; flex-wrap: ${this.wrap ? 'wrap' : 'nowrap'}; justify-content: ${this.getJustifyContent()}; align-items: ${this.getAlignItems()};`;
+        return (h("le-component", { key: 'e1547512915e47e4c5ddbcbcbd3971579e45a140', component: "le-stack", hostClass: hostClass }, h("div", { key: '61a4fd57c61c56a8abac0ae2348e6e48034efc4d', class: "stack", part: "stack", style: style }, h("le-slot", { key: '0ef0f996ce0efcb20a47171197d82e5b326c7e8c', name: "", description: `Items arranged ${this.direction}ly${this.maxItems ? ` (max ${this.maxItems})` : ''}`, type: "slot", "allowed-components": "le-text,le-box,le-card,le-button,le-stack", slotStyle: slotStyle }, h("slot", { key: 'f41f351d8b6dbdaf20756e9bc317a35a0424fc6c' })))));
+    }
+    static get is() { return "le-stack"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["le-stack.default.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["le-stack.default.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "direction": {
+                "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 the stack layout"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "direction",
+                "defaultValue": "'horizontal'"
+            },
+            "gap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Gap between items (CSS value like '8px', '1rem', 'var(--le-space-md)')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gap"
+            },
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'center' | 'end' | 'stretch' | 'baseline'",
+                    "resolved": "\"baseline\" | \"center\" | \"end\" | \"start\" | \"stretch\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "allowedValues",
+                            "text": "start | center | end | stretch | baseline"
+                        }],
+                    "text": "Alignment of items on the cross axis"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align",
+                "defaultValue": "'stretch'"
+            },
+            "justify": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly'",
+                    "resolved": "\"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "allowedValues",
+                            "text": "start | center | end | space-between | space-around | space-evenly"
+                        }],
+                    "text": "Distribution of items on the main axis"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "justify",
+                "defaultValue": "'start'"
+            },
+            "wrap": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether items should wrap to multiple lines"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "wrap",
+                "defaultValue": "false"
+            },
+            "alignContent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'center' | 'end' | 'stretch' | 'space-between' | 'space-around'",
+                    "resolved": "\"center\" | \"end\" | \"space-around\" | \"space-between\" | \"start\" | \"stretch\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "allowedValues",
+                            "text": "start | center | end | stretch | space-between | space-around"
+                        }],
+                    "text": "Alignment of wrapped lines (only applies when wrap is true)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align-content",
+                "defaultValue": "'stretch'"
+            },
+            "reverse": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to reverse the order of items"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "reverse",
+                "defaultValue": "false"
+            },
+            "maxItems": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "min",
+                            "text": "1"
+                        }],
+                    "text": "Maximum number of items allowed in the stack (for CMS validation)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-items"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the stack should take full width of its container"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "full-width",
+                "defaultValue": "false"
+            },
+            "fullHeight": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the stack should take full height of its container"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "full-height",
+                "defaultValue": "false"
+            },
+            "padding": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Padding inside the stack container (CSS value)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padding"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=le-stack.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"le-stack.js","sourceRoot":"","sources":["../../../src/components/le-stack/le-stack.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A flexible stack layout component using CSS flexbox.\n *\n * `le-stack` arranges its children in a row (horizontal) or column (vertical)\n * with configurable spacing, alignment, and wrapping behavior. Perfect for\n * creating responsive layouts.\n *\n * @slot - Default slot for stack items (le-box components recommended)\n *\n * @cssprop --le-stack-gap - Gap between items (defaults to var(--le-space-md))\n *\n * @csspart stack - The main stack container\n *\n * @cmsEditable true\n * @cmsCategory Layout\n */\n@Component({\n  tag: 'le-stack',\n  styleUrl: 'le-stack.default.css',\n  shadow: true,\n})\nexport class LeStack {\n  @Element() el: HTMLElement;\n\n  /**\n   * Direction of the stack layout\n   * @allowedValues horizontal | vertical\n   */\n  @Prop() direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Gap between items (CSS value like '8px', '1rem', 'var(--le-space-md)')\n   */\n  @Prop() gap?: string;\n\n  /**\n   * Alignment of items on the cross axis\n   * @allowedValues start | center | end | stretch | baseline\n   */\n  @Prop() align: 'start' | 'center' | 'end' | 'stretch' | 'baseline' = 'stretch';\n\n  /**\n   * Distribution of items on the main axis\n   * @allowedValues start | center | end | space-between | space-around | space-evenly\n   */\n  @Prop() justify: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly' = 'start';\n\n  /**\n   * Whether items should wrap to multiple lines\n   */\n  @Prop() wrap: boolean = false;\n\n  /**\n   * Alignment of wrapped lines (only applies when wrap is true)\n   * @allowedValues start | center | end | stretch | space-between | space-around\n   */\n  @Prop() alignContent: 'start' | 'center' | 'end' | 'stretch' | 'space-between' | 'space-around' = 'stretch';\n\n  /**\n   * Whether to reverse the order of items\n   */\n  @Prop() reverse: boolean = false;\n\n  /**\n   * Maximum number of items allowed in the stack (for CMS validation)\n   * @min 1\n   */\n  @Prop() maxItems?: number;\n\n  /**\n   * Whether the stack should take full width of its container\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * Whether the stack should take full height of its container\n   */\n  @Prop() fullHeight: boolean = false;\n\n  /**\n   * Padding inside the stack container (CSS value)\n   */\n  @Prop() padding?: string;\n\n  private getFlexDirection(): string {\n    const base = this.direction === 'vertical' ? 'column' : 'row';\n    return this.reverse ? `${base}-reverse` : base;\n  }\n\n  private getAlignItems(): string {\n    const alignMap: Record<string, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      stretch: 'stretch',\n      baseline: 'baseline',\n    };\n    return alignMap[this.align] || 'stretch';\n  }\n\n  private getJustifyContent(): string {\n    const justifyMap: Record<string, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      'space-between': 'space-between',\n      'space-around': 'space-around',\n      'space-evenly': 'space-evenly',\n    };\n    return justifyMap[this.justify] || 'flex-start';\n  }\n\n  private getAlignContent(): string {\n    const alignContentMap: Record<string, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      stretch: 'stretch',\n      'space-between': 'space-between',\n      'space-around': 'space-around',\n    };\n    return alignContentMap[this.alignContent] || 'stretch';\n  }\n\n  render() {\n    const style: { [key: string]: string } = {\n      display: 'flex',\n      flexDirection: this.getFlexDirection(),\n      alignItems: this.getAlignItems(),\n      justifyContent: this.getJustifyContent(),\n      flexWrap: this.wrap ? 'wrap' : 'nowrap',\n    };\n\n    if (this.wrap) {\n      style.alignContent = this.getAlignContent();\n    }\n\n    if (this.gap) {\n      style.gap = this.gap;\n    }\n\n    if (this.padding) {\n      style.padding = this.padding;\n    }\n\n    // if (this.fullWidth) {\n    //   style.width = '100%';\n    // }\n\n    // if (this.fullHeight) {\n    //   style.height = '100%';\n    // }\n\n    const hostClass = classnames(\n      `direction-${this.direction}`,\n      {\n        'wrap': this.wrap,\n        'reverse': this.reverse,\n        'full-width': this.fullWidth,\n        'full-height': this.fullHeight,\n      }\n    );\n\n    // Slot style for admin mode - make items display in the same direction\n    const slotStyle = `display: flex; flex-direction: ${this.getFlexDirection()}; gap: ${this.gap || 'var(--le-space-md)'}; flex-wrap: ${this.wrap ? 'wrap' : 'nowrap'}; justify-content: ${this.getJustifyContent()}; align-items: ${this.getAlignItems()};`;\n\n    return (\n      <le-component component=\"le-stack\" hostClass={hostClass}>\n        <div class=\"stack\" part=\"stack\" style={style}>\n          <le-slot\n            name=\"\"\n            description={`Items arranged ${this.direction}ly${this.maxItems ? ` (max ${this.maxItems})` : ''}`}\n            type=\"slot\"\n            allowed-components=\"le-text,le-box,le-card,le-button,le-stack\"\n            slotStyle={slotStyle}\n          >\n            <slot></slot>\n          </le-slot>\n        </div>\n      </le-component>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,83 @@
+: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-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;
+}
+
+
+:host([disabled]) .le-input-container {
+  opacity: 0.6;
+  background-color: rgba(0,0,0,0.05);
+  cursor: not-allowed;
+}
+
+input {
+  flex: 1;
+  min-height: var(--le-input-height);
+  padding: var(--le-input-padding);
+  border: none;
+  background: transparent;
+  color: var(--le-input-color);
+  font-family: inherit;
+  font-size: inherit;
+  outline: none;
+  width: 100%;
+}
+
+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-description {
+  font-size: 0.85em;
+  color: var(--le-input-desc-color);
+  margin-top: 2px;
+}
+
+.le-input-description::has(le-slot > slot[name=description]:empty) {
+  display: none;
+}