le-kit 0.5.2 → 0.5.4

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

@@ -1,614 +0,0 @@
-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: '01fad47e9fdff2931a8f0a26d540bb1a5da6a626', style: hostStyle, class: hostClass }, h("le-component", { key: '2d6b2588889925835e91ecbf6be811d21b47b015', component: "le-box" }, h("div", { key: 'd43fd71f7f9e1211bb2dfaaf577c6c9bef78b794', class: "box", part: "box" }, h("div", { key: '1b8b1680dfeb7e6f31ac627d55ae05796bef4f02', class: "content", part: "content", style: contentStyle }, h("le-slot", { key: '8af26e1c5047b9d5ab9f4ae0464c34bf3e931805', name: "", description: "Content inside this flex item", type: "slot", "allowed-components": "le-text,le-card,le-button,le-stack,le-box" }, h("slot", { key: 'db95a80650aa9846eb27ccd75ee074a86a9ef47c' })))))));
-    }
-    static get is() { return "le-box"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["le-box.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["le-box.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

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

@@ -1 +0,0 @@
-{"version":3,"file":"le-box.js","sourceRoot":"","sources":["../../../src/components/le-box/le-box.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, Host } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A flexible box component for use as a flex item within le-stack.\n *\n * `le-box` wraps content and provides flex item properties like grow, shrink,\n * basis, and self-alignment. It can also control its internal content alignment.\n *\n * @slot - Default slot for box content\n *\n * @cssprop --le-box-bg - Background color\n * @cssprop --le-box-padding - Padding inside the box\n * @cssprop --le-box-border-radius - Border radius\n *\n * @csspart box - The main box container\n * @csspart content - The inner content wrapper\n *\n * @cmsEditable true\n * @cmsCategory Layout\n */\n@Component({\n  tag: 'le-box',\n  styleUrl: 'le-box.css',\n  shadow: true,\n})\nexport class LeBox {\n  @Element() el: HTMLElement;\n\n  /**\n   * Flex grow factor - how much the item should grow relative to siblings\n   * @min 0\n   */\n  @Prop() grow: number = 0;\n\n  /**\n   * Flex shrink factor - how much the item should shrink relative to siblings\n   * @min 0\n   */\n  @Prop() shrink: number = 1;\n\n  /**\n   * Flex basis - initial size before growing/shrinking (e.g., '200px', '25%', 'auto')\n   */\n  @Prop() basis: string = 'auto';\n\n  /**\n   * Width of the box (CSS value like '100px', '50%', 'auto')\n   */\n  @Prop() width?: string;\n\n  /**\n   * Height of the box (CSS value)\n   */\n  @Prop() height?: string;\n\n  /**\n   * Minimum width constraint\n   */\n  @Prop() minWidth?: string;\n\n  /**\n   * Maximum width constraint\n   */\n  @Prop() maxWidth?: string;\n\n  /**\n   * Minimum height constraint\n   */\n  @Prop() minHeight?: string;\n\n  /**\n   * Maximum height constraint\n   */\n  @Prop() maxHeight?: string;\n\n  /**\n   * Background color or CSS value (e.g., '#f0f0f0', 'var(--le-color-primary-light)')\n   */\n  @Prop() background?: string;\n\n  /**\n   * Border radius (e.g., '8px', 'var(--le-radius-md)')\n   */\n  @Prop() borderRadius?: string;\n\n  /**\n   * Border style (e.g., '1px solid #ccc', '2px dashed var(--le-color-border)')\n   */\n  @Prop() border?: string;\n\n  /**\n   * Self-alignment override for this item on the cross axis\n   * @allowedValues auto | start | center | end | stretch | baseline\n   */\n  @Prop() alignSelf: 'auto' | 'start' | 'center' | 'end' | 'stretch' | 'baseline' = 'auto';\n\n  /**\n   * Internal horizontal alignment of content\n   * @allowedValues start | center | end | stretch\n   */\n  @Prop() alignContent: 'start' | 'center' | 'end' | 'stretch' = 'stretch';\n\n  /**\n   * Internal vertical alignment of content\n   * @allowedValues start | center | end | stretch\n   */\n  @Prop() justifyContent: 'start' | 'center' | 'end' | 'stretch' = 'start';\n\n  /**\n   * Padding inside the box (CSS value like '8px', '1rem')\n   */\n  @Prop() padding?: string;\n\n  /**\n   * Order in the flex container (lower values come first)\n   */\n  @Prop() order?: number;\n\n  /**\n   * Whether to display box content as flex (for internal alignment)\n   */\n  @Prop() displayFlex: boolean = false;\n\n  /**\n   * Direction of internal flex layout when displayFlex is true\n   * @allowedValues horizontal | vertical\n   */\n  @Prop() innerDirection: 'horizontal' | 'vertical' = 'vertical';\n\n  /**\n   * Gap between internal flex items when displayFlex is true\n   */\n  @Prop() innerGap?: string;\n\n  private getAlignSelf(): string {\n    const alignMap: Record<string, string> = {\n      auto: 'auto',\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      stretch: 'stretch',\n      baseline: 'baseline',\n    };\n    return alignMap[this.alignSelf] || 'auto';\n  }\n\n  private getContentAlign(): string {\n    const alignMap: Record<string, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      stretch: 'stretch',\n    };\n    return alignMap[this.alignContent] || 'stretch';\n  }\n\n  private getContentJustify(): string {\n    const justifyMap: Record<string, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      stretch: 'stretch',\n    };\n    return justifyMap[this.justifyContent] || 'flex-start';\n  }\n\n  render() {\n    // Host styles for flex item behavior\n    const hostStyle: { [key: string]: string } = {\n      flexGrow: String(this.grow),\n      flexShrink: String(this.shrink),\n      flexBasis: this.basis,\n      alignSelf: this.getAlignSelf(),\n    };\n\n    if (this.width) hostStyle.width = this.width;\n    if (this.height) hostStyle.height = this.height;\n    if (this.minWidth) hostStyle.minWidth = this.minWidth;\n    if (this.maxWidth) hostStyle.maxWidth = this.maxWidth;\n    if (this.minHeight) hostStyle.minHeight = this.minHeight;\n    if (this.maxHeight) hostStyle.maxHeight = this.maxHeight;\n    if (this.order !== undefined) hostStyle.order = String(this.order);\n\n    // Inner content styles\n    const contentStyle: { [key: string]: string } = {};\n\n    if (this.padding) {\n      contentStyle.padding = this.padding;\n    }\n    if (this.background) {\n      contentStyle.background = this.background;\n    }\n    if (this.borderRadius) {\n      contentStyle.borderRadius = this.borderRadius;\n    }\n    if (this.border) {\n      contentStyle.border = this.border;\n    }\n\n    if (this.displayFlex) {\n      contentStyle.display = 'flex';\n      contentStyle.flexDirection = this.innerDirection === 'vertical' ? 'column' : 'row';\n      contentStyle.alignItems = this.getContentAlign();\n      contentStyle.justifyContent = this.getContentJustify();\n      if (this.innerGap) {\n        contentStyle.gap = this.innerGap;\n      }\n    }\n\n    const hostClass = classnames({\n      'has-grow': this.grow > 0,\n      'display-flex': this.displayFlex,\n      [`inner-${this.innerDirection}`]: this.displayFlex,\n    });\n\n    return (\n      <Host style={hostStyle} class={hostClass}>\n        <le-component component=\"le-box\">\n          <div class=\"box\" part=\"box\">\n            <div class=\"content\" part=\"content\" style={contentStyle}>\n              <le-slot\n                name=\"\"\n                description=\"Content inside this flex item\"\n                type=\"slot\"\n                allowed-components=\"le-text,le-card,le-button,le-stack,le-box\"\n              >\n                <slot></slot>\n              </le-slot>\n            </div>\n          </div>\n        </le-component>\n      </Host>\n    );\n  }\n}\n"]}