le-kit 0.0.3 → 0.1.0

package/dist/collection/components/le-round-progress/le-round-progress.js

@@ -1,84 +1,184 @@
-export class LeRoundProgress {
-    constructor() {
-        this.value = 0;
-        this.padding = 0;
-    }
-    updateValue(newValue) {
-        this.value = parseFloat(newValue);
-    }
-    updatePadding(newValue) {
-        this.padding = parseFloat(newValue);
-        this.calcParams();
-    }
-    updateProgressBackgrounds(newValue) {
-        this.progressPaths = JSON.parse(newValue);
-    }
-    componentWillLoad() {
-        if (typeof this.paths === 'string') {
-            this.updateProgressBackgrounds(this.paths);
-        }
-        this.calcParams();
-    }
-    calcParams() {
-        const width = this.el.getBoundingClientRect().width;
-        const diameter = width - this.padding;
-        const circumference = Math.PI * diameter;
-        this.params = { width, diameter, circumference };
-    }
-    getViewBox() {
-        return '0 0 ' + this.params.width + ' ' + this.params.width;
-    }
-    getPath() {
-        return 'M' + (this.params.width / 2) + ' ' + ((this.params.width - this.params.diameter) / 2) +
-            ' a ' + (this.params.diameter / 2) + ' ' + (this.params.diameter / 2) +
-            ' 0 0 1 0 ' + this.params.diameter +
-            ' a ' + (this.params.diameter / 2) + ' ' + (this.params.diameter / 2) +
-            ' 0 0 1 0 -' + this.params.diameter;
-    }
-    getStrokeDashArray() {
-        return (this.value / 100 * this.params.circumference) + ', ' + this.params.circumference;
-    }
-    getPaths() {
-        if (!this.progressPaths || !this.progressPaths.length) {
-            return null;
-        }
-        let paths = [];
-        this.progressPaths.forEach(bg => {
-            paths.push(h("path", { class: "round-progress--path", d: this.getPath(), stroke: bg.color, "stroke-width": bg.width, "stroke-dasharray": bg.dasharray, "stroke-linecap": bg.linecap }));
-        });
-        return (h("svg", { viewBox: this.getViewBox(), class: "round-progress" }, paths));
-    }
-    render() {
-        return h("div", { class: "round-progress--container" },
-            this.getPaths(),
-            h("svg", { viewBox: this.getViewBox(), class: "round-progress round-progress--progress" },
-                h("path", { class: "round-progress--circle", "stroke-dasharray": this.getStrokeDashArray(), d: this.getPath() })),
-            h("slot", null));
-    }
-    static get is() { return "le-round-progress"; }
-    static get encapsulation() { return "shadow"; }
-    static get properties() { return {
-        "el": {
-            "elementRef": true
-        },
-        "padding": {
-            "type": Number,
-            "attr": "padding",
-            "watchCallbacks": ["updatePadding"]
-        },
-        "params": {
-            "state": true
-        },
-        "paths": {
-            "type": String,
-            "attr": "paths",
-            "watchCallbacks": ["updateProgressBackgrounds"]
-        },
-        "value": {
-            "type": Number,
-            "attr": "value",
-            "watchCallbacks": ["updateValue"]
-        }
-    }; }
-    static get style() { return "/**style-placeholder:le-round-progress:**/"; }
-}
+import { h } from "@stencil/core";
+export class LeRoundProgress {
+    // host element
+    el;
+    // progress value coming from an attribute
+    value = 0;
+    updateValue(newValue) {
+        this.value = parseFloat(newValue);
+    }
+    // padding value coming from an attribute
+    padding = 0;
+    updatePadding(newValue) {
+        this.padding = parseFloat(newValue);
+        this.calcParams();
+    }
+    // the progress backgrounds can be as many as needed
+    // but it should be JSON format: double quotes and strict commas
+    paths;
+    updateProgressBackgrounds(newValue) {
+        this.progressPaths = JSON.parse(newValue);
+    }
+    progressPaths;
+    params;
+    /**
+     * Component lifecycles
+     *
+     * Before the component is loaded, we need to calculate and update params
+     * using the component size (width of the round progress)
+     * and progress width (max of )
+     */
+    componentWillLoad() {
+        if (typeof this.paths === 'string') {
+            this.updateProgressBackgrounds(this.paths);
+        }
+        this.calcParams();
+    }
+    calcParams() {
+        // get element width
+        const width = this.el.getBoundingClientRect().width;
+        const diameter = width - this.padding;
+        // calc circumference — we'll need it later to calc the stroke paths
+        const circumference = Math.PI * diameter;
+        this.params = { width, diameter, circumference };
+    }
+    /**
+     * Returns the viewPath attribute value for the SVG
+     * based on the width of the parent element
+     */
+    getViewBox() {
+        return '0 0 ' + this.params.width + ' ' + this.params.width;
+    }
+    /**
+     * Returns the circular path for the progress stroke
+     * and additional paths in the background
+     */
+    getPath() {
+        return ('M' +
+            this.params.width / 2 +
+            ' ' +
+            (this.params.width - this.params.diameter) / 2 +
+            ' a ' +
+            this.params.diameter / 2 +
+            ' ' +
+            this.params.diameter / 2 +
+            ' 0 0 1 0 ' +
+            this.params.diameter +
+            ' a ' +
+            this.params.diameter / 2 +
+            ' ' +
+            this.params.diameter / 2 +
+            ' 0 0 1 0 -' +
+            this.params.diameter);
+    }
+    getStrokeDashArray() {
+        return (this.value / 100) * this.params.circumference + ', ' + this.params.circumference;
+    }
+    getPaths() {
+        if (!this.progressPaths || !this.progressPaths.length) {
+            return null;
+        }
+        let paths = [];
+        this.progressPaths.forEach(bg => {
+            paths.push(h("path", { class: "round-progress--path", d: this.getPath(), stroke: bg.color, "stroke-width": bg.width, "stroke-dasharray": bg.dasharray, "stroke-linecap": bg.linecap }));
+        });
+        return (h("svg", { viewBox: this.getViewBox(), class: "round-progress" }, paths));
+    }
+    render() {
+        return (h("div", { key: '1ffc36704bee5d0822623ac4559ad2d4690095a4', class: "round-progress--container" }, this.getPaths(), h("svg", { key: '12e4dfe5fe2df0cb672d4c001459b8dcc8253591', viewBox: this.getViewBox(), class: "round-progress round-progress--progress" }, h("path", { key: 'd8ce69610687fb578ce2104bd3eccba24951dd96', class: "round-progress--circle", "stroke-dasharray": this.getStrokeDashArray(), d: this.getPath() })), h("slot", { key: '3976b08a7e838579d6af34a778a8756255d98e57' })));
+    }
+    static get is() { return "le-round-progress"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["le-round-progress.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["le-round-progress.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "padding": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padding",
+                "defaultValue": "0"
+            },
+            "paths": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "paths"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "params": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "updateValue"
+            }, {
+                "propName": "padding",
+                "methodName": "updatePadding"
+            }, {
+                "propName": "paths",
+                "methodName": "updateProgressBackgrounds"
+            }];
+    }
+}
+//# sourceMappingURL=le-round-progress.js.map

package/dist/collection/components/le-round-progress/le-round-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"le-round-progress.js","sourceRoot":"","sources":["../../../src/components/le-round-progress/le-round-progress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'le-round-progress',\n  styleUrl: 'le-round-progress.css',\n  shadow: true,\n})\nexport class LeRoundProgress {\n  // host element\n  @Element() el: HTMLElement;\n\n  // progress value coming from an attribute\n  @Prop() value: number = 0;\n  @Watch('value')\n  updateValue(newValue: string) {\n    this.value = parseFloat(newValue);\n  }\n\n  // padding value coming from an attribute\n  @Prop() padding: number = 0;\n  @Watch('padding')\n  updatePadding(newValue: string) {\n    this.padding = parseFloat(newValue);\n    this.calcParams();\n  }\n\n  // the progress backgrounds can be as many as needed\n  // but it should be JSON format: double quotes and strict commas\n  @Prop() paths: string;\n  @Watch('paths')\n  updateProgressBackgrounds(newValue: string) {\n    this.progressPaths = JSON.parse(newValue);\n  }\n  progressPaths: any[];\n\n  @State() params: {\n    width: number;\n    diameter: number;\n    circumference: number;\n  };\n\n  /**\n   * Component lifecycles\n   *\n   * Before the component is loaded, we need to calculate and update params\n   * using the component size (width of the round progress)\n   * and progress width (max of )\n   */\n  componentWillLoad() {\n    if (typeof this.paths === 'string') {\n      this.updateProgressBackgrounds(this.paths);\n    }\n    this.calcParams();\n  }\n\n  calcParams() {\n    // get element width\n    const width = this.el.getBoundingClientRect().width;\n    const diameter = width - this.padding;\n    // calc circumference — we'll need it later to calc the stroke paths\n    const circumference = Math.PI * diameter;\n\n    this.params = { width, diameter, circumference };\n  }\n\n  /**\n   * Returns the viewPath attribute value for the SVG\n   * based on the width of the parent element\n   */\n  getViewBox() {\n    return '0 0 ' + this.params.width + ' ' + this.params.width;\n  }\n\n  /**\n   * Returns the circular path for the progress stroke\n   * and additional paths in the background\n   */\n  getPath() {\n    return (\n      'M' +\n      this.params.width / 2 +\n      ' ' +\n      (this.params.width - this.params.diameter) / 2 +\n      ' a ' +\n      this.params.diameter / 2 +\n      ' ' +\n      this.params.diameter / 2 +\n      ' 0 0 1 0 ' +\n      this.params.diameter +\n      ' a ' +\n      this.params.diameter / 2 +\n      ' ' +\n      this.params.diameter / 2 +\n      ' 0 0 1 0 -' +\n      this.params.diameter\n    );\n  }\n\n  getStrokeDashArray() {\n    return (this.value / 100) * this.params.circumference + ', ' + this.params.circumference;\n  }\n\n  getPaths() {\n    if (!this.progressPaths || !this.progressPaths.length) {\n      return null;\n    }\n    let paths = [];\n    this.progressPaths.forEach(bg => {\n      paths.push(<path class=\"round-progress--path\" d={this.getPath()} stroke={bg.color} stroke-width={bg.width} stroke-dasharray={bg.dasharray} stroke-linecap={bg.linecap} />);\n    });\n    return (\n      <svg viewBox={this.getViewBox()} class=\"round-progress\">\n        {paths}\n      </svg>\n    );\n  }\n\n  render() {\n    return (\n      <div class=\"round-progress--container\">\n        {this.getPaths()}\n        <svg viewBox={this.getViewBox()} class=\"round-progress round-progress--progress\">\n          <path class=\"round-progress--circle\" stroke-dasharray={this.getStrokeDashArray()} d={this.getPath()} />\n        </svg>\n        <slot />\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/le-slot/le-slot.default.css

@@ -0,0 +1,222 @@
+/**
+ * Styles for le-slot component
+ * Uses :host(.admin-mode) to toggle between default and admin styles
+ */
+
+/* ============================================
+   DEFAULT MODE - Invisible passthrough
+   ============================================ */
+:host {
+  display: contents;
+  --le-slot-border-color: #0088ff;
+  --le-slot-bg-color: rgba(0, 136, 255, 0.05);
+  --le-slot-header-bg: rgb(218, 238, 255);
+  --le-slot-label-color: #0066cc;
+  --le-slot-description-color: #666;
+  --le-slot-required-color: #e53935;
+  --le-slot-dropzone-min-height: 20px;
+  --le-slot-dropzone-border-color: #ccc;
+}
+
+.le-slot-container,
+.le-slot-header,
+.le-slot-description,
+.le-slot-dropzone,
+.le-slot-input {
+  display: none;
+}
+
+/* Hidden slot wrapper - keeps slot in DOM but invisible */
+.hidden-slot {
+  display: none;
+}
+
+/* ============================================
+   ADMIN MODE - Visible placeholder UI
+   ============================================ */
+:host(.admin-mode) {
+  display: block;
+  flex: 1;
+}
+
+:host(.admin-mode) .le-slot-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  border: 2px dashed var(--le-slot-border-color);
+  border-radius: 4px;
+  background: var(--le-slot-bg-color);
+  margin: 4px 0;
+}
+
+:host(.admin-mode) .le-slot-header {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 0 0 var(--le-spacing-1, 4px);
+  background: var(--le-slot-header-bg);
+  border-bottom: 1px solid var(--le-slot-border-color);
+  font-size: var(--le-font-size-xs, 11px);
+  font-weight: 400;
+  text-transform: capitalize;
+}
+:host(.admin-mode) .le-slot-header-no-label {
+  justify-content: flex-end;
+  height: 16px;
+  border: none;
+  background-color: transparent;
+}
+
+.le-slot-label {
+  color: var(--le-slot-label-color);
+  text-align: start;
+  overflow: hidden;
+  width: 0;
+  flex: 1 1 0%;
+}
+
+.le-slot-required {
+  color: var(--le-slot-required-color);
+  font-weight: bold;
+}
+
+:host(.admin-mode) .le-slot-description {
+  display: block;
+  padding: 4px 8px;
+  font-size: 12px;
+  color: var(--le-slot-description-color);
+  font-style: italic;
+}
+:host(.admin-mode) .le-slot-description-icon {
+  display: inline-block;
+  font-size: 9px;
+  line-height: 1;
+  cursor: pointer;
+  color: var(--le-slot-description-color);
+}
+
+:host(.admin-mode) .le-slot-dropzone {
+  display: block;
+  min-height: var(--le-slot-dropzone-min-height);
+  padding: var(--le-spacing-1, 4px);
+  position: relative;
+}
+
+:host(.admin-mode) .le-slot-dropzone:empty::before {
+  content: 'Drop content here';
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  inset: 8px;
+  border: 2px dashed var(--le-slot-dropzone-border-color);
+  border-radius: 4px;
+  color: #999;
+  font-size: 12px;
+  pointer-events: none;
+}
+
+/* Highlight when dragging over */
+:host(.admin-mode.drag-over) .le-slot-container {
+  border-color: #00cc66;
+  background: rgba(0, 204, 102, 0.1);
+}
+
+:host(.admin-mode.drag-over) .le-slot-dropzone:empty::before {
+  border-color: #00cc66;
+  color: #00cc66;
+  content: 'Release to drop';
+}
+
+/* ============================================
+   TEXT INPUT STYLES (Admin mode)
+   ============================================ */
+:host(.admin-mode) .le-slot-input {
+  display: block;
+  padding: var(--le-spacing-1, 4px);
+}
+
+:host(.admin-mode) .le-slot-input input,
+:host(.admin-mode) .le-slot-input textarea {
+  display: block;
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid var(--le-slot-dropzone-border-color);
+  border-radius: 4px;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1.4;
+  background: #fff;
+  color: #333;
+  box-sizing: border-box;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+:host(.admin-mode) .le-slot-input input:focus,
+:host(.admin-mode) .le-slot-input textarea:focus {
+  outline: none;
+  border-color: var(--le-slot-border-color);
+  box-shadow: 0 0 0 3px rgba(0, 136, 255, 0.15);
+}
+
+:host(.admin-mode) .le-slot-input input::placeholder,
+:host(.admin-mode) .le-slot-input textarea::placeholder {
+  color: #999;
+}
+
+:host(.admin-mode) .le-slot-input textarea {
+  resize: vertical;
+  min-height: 60px;
+}
+
+/* Hide the slot content in text/textarea mode - it's just for default value */
+:host(.admin-mode) .le-slot-input slot {
+  display: none;
+}
+
+/* ============================================
+   INVALID HTML STATE
+   ============================================ */
+.le-slot-invalid {
+  color: var(--le-slot-required-color);
+  font-size: 10px;
+  margin-left: auto;
+  font-weight: normal;
+  text-transform: none;
+}
+
+:host(.admin-mode) .le-slot-input.has-error input,
+:host(.admin-mode) .le-slot-input.has-error textarea {
+  border-color: var(--le-slot-required-color);
+  background: rgba(229, 57, 53, 0.05);
+}
+
+:host(.admin-mode) .le-slot-input.has-error input:focus,
+:host(.admin-mode) .le-slot-input.has-error textarea:focus {
+  border-color: var(--le-slot-required-color);
+  box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.15);
+}
+
+
+/* ========================================
+   Component Picker (Add Button & Popover)
+   ======================================== */
+.le-slot-add-btn {
+  font-size: 24px;
+  line-height: 0px;
+  width: 12px;
+  height: 12px;
+}
+
+.le-slot-header-no-label .le-slot-add-btn {
+  font-size: 16px;
+}
+
+.le-slot-button {
+  width: 20px;
+  height: 20px;
+}
+
+:host(.admin-mode) .le-slot-header-no-label.le-slot-header-text {
+  height: 0;
+}