@dropi/ui 0.1.27 → 0.1.28

package/dist/collection/components/dropi-text-area/dropi-text-area.js

@@ -0,0 +1,512 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-text-area
+ * Multi-line text area with label, char counter, validation states,
+ * helper text, and native form association.
+ */
+export class DropiTextArea {
+    internals;
+    /** Input id. Defaults to label. */
+    id = '';
+    /** Name for native form submission */
+    name = '';
+    /** Label shown above the textarea */
+    label = '';
+    /** Placeholder text */
+    placeholder = '';
+    /** Current value (controlled) */
+    value = '';
+    /** Max character length */
+    maxLength;
+    /** Min character length */
+    minLength = 0;
+    /** Number of visible rows */
+    rows = 4;
+    /** Resize behavior */
+    resize = 'vertical';
+    /** Disable the textarea */
+    disabled = false;
+    /** Mark as required */
+    required = false;
+    /** Show the required asterisk */
+    showObligatoryAsterisk = false;
+    /** Helper / error text below the field */
+    textHelper = '';
+    /** Mark the field as invalid (consumer-controlled) */
+    hasError = false;
+    /**
+     * Convenience object prop — matches Angular `textAreaProperties: TextAreaProperties`.
+     * When provided, its non-null fields override individual props.
+     * Note: `formControl` is not supported in web components; use `value` + dropiInput instead.
+     */
+    textAreaProperties = null;
+    textAreaPropertiesChanged(val) {
+        if (!val)
+            return;
+        if (val.id !== undefined)
+            this.id = val.id;
+        if (val.label !== undefined)
+            this.label = val.label;
+        if (val.placeholder !== undefined)
+            this.placeholder = val.placeholder;
+        if (val.maxLength !== undefined)
+            this.maxLength = val.maxLength;
+        if (val.minLength !== undefined)
+            this.minLength = val.minLength;
+        if (val.textHelper !== undefined)
+            this.textHelper = val.textHelper;
+        if (val.rows !== undefined)
+            this.rows = val.rows;
+        if (val.resize !== undefined)
+            this.resize = val.resize;
+    }
+    touched = false;
+    /** Emitted on every keystroke */
+    dropiInput;
+    /** Emitted on blur */
+    dropiChange;
+    dropiFocus;
+    dropiBlur;
+    valueChanged(val) {
+        this.internals.setFormValue(val);
+    }
+    componentWillLoad() {
+        this.internals.setFormValue(this.value ?? '');
+        if (this.textAreaProperties)
+            this.textAreaPropertiesChanged(this.textAreaProperties);
+    }
+    handleInput(e) {
+        const val = e.target.value;
+        this.value = val;
+        this.internals.setFormValue(val);
+        this.dropiInput.emit(val);
+    }
+    handleBlur() {
+        this.touched = true;
+        this.dropiChange.emit(this.value);
+        this.dropiBlur.emit();
+    }
+    get resolvedId() {
+        return this.id || this.label;
+    }
+    get isInvalid() {
+        return this.hasError && this.touched;
+    }
+    get charCount() {
+        return this.value?.length ?? 0;
+    }
+    render() {
+        const showAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;
+        const showHelper = this.textHelper || this.isInvalid;
+        return (h("div", { key: 'd2333346006f94a5582d49cb2f34237b8b97d039', class: "textarea-wrapper" }, this.label && (h("label", { key: '0963e3d312bec5a96b4b3f8387c07ecfd97d6906', htmlFor: this.resolvedId, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : 'var(--Gray-Gray-600)' } }, this.label, showAsterisk && h("span", { key: '1e9bfecb2669fe2c6cd8b74a153fe21bbf8053b9', class: "asterisk" }, " *"))), h("div", { key: '6ac5236d0cb7ec4322339048eb364b7c41bfea5e', class: "textarea-container" }, h("textarea", { key: '94a18a7af80592659237d54e5897fcbd8b4aa47c', id: this.resolvedId, class: {
+                'form-control': true,
+                'Body-M-Regular': true,
+                'form-control-valid': !this.isInvalid && this.touched && !!this.value,
+                'form-control-invalid': this.isInvalid,
+            }, rows: this.rows, placeholder: this.placeholder, maxLength: this.maxLength, minLength: this.minLength, disabled: this.disabled, required: this.required, style: { resize: this.resize }, onInput: (e) => this.handleInput(e), onFocus: () => this.dropiFocus.emit(), onBlur: () => this.handleBlur() }, this.value), this.maxLength > 0 && (h("div", { key: 'e3271eeea7e85a64454c344986e36c85197f3782', class: "char-counter" }, this.charCount, "/", this.maxLength))), showHelper && (h("div", { key: 'c4b83072b96e56b45b6afc8209f4d124cb6d6bf3', class: "form-control-helper" }, this.isInvalid && (h("dropi-icon", { key: '98aef0a346f1ca3fe33cf9f2e6519f61aa787374', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" })), h("span", { key: 'f820d6043b390dc22d1b7ee1ee58dfd9a3fcd333', class: { 'invalid-color': this.isInvalid }, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : undefined } }, this.textHelper)))));
+    }
+    static get is() { return "dropi-text-area"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-text-area.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-text-area.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "id": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input id. Defaults to label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "id",
+                "defaultValue": "''"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name for native form submission"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label shown above the textarea"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current value (controlled)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "maxLength": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Max character length"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-length"
+            },
+            "minLength": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Min character length"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-length",
+                "defaultValue": "0"
+            },
+            "rows": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of visible rows"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rows",
+                "defaultValue": "4"
+            },
+            "resize": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "ResizeMode",
+                    "resolved": "\"both\" | \"horizontal\" | \"none\" | \"vertical\"",
+                    "references": {
+                        "ResizeMode": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-text-area/dropi-text-area.tsx",
+                            "id": "src/components/dropi-text-area/dropi-text-area.tsx::ResizeMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Resize behavior"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "resize",
+                "defaultValue": "'vertical'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable the textarea"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mark as required"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "showObligatoryAsterisk": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the required asterisk"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-obligatory-asterisk",
+                "defaultValue": "false"
+            },
+            "textHelper": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper / error text below the field"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text-helper",
+                "defaultValue": "''"
+            },
+            "hasError": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mark the field as invalid (consumer-controlled)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "has-error",
+                "defaultValue": "false"
+            },
+            "textAreaProperties": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TextAreaProperties | null",
+                    "resolved": "TextAreaProperties",
+                    "references": {
+                        "TextAreaProperties": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-text-area/dropi-text-area.tsx",
+                            "id": "src/components/dropi-text-area/dropi-text-area.tsx::TextAreaProperties"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Convenience object prop \u2014 matches Angular `textAreaProperties: TextAreaProperties`.\nWhen provided, its non-null fields override individual props.\nNote: `formControl` is not supported in web components; use `value` + dropiInput instead."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "touched": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiInput",
+                "name": "dropiInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on every keystroke"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiChange",
+                "name": "dropiChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on blur"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiFocus",
+                "name": "dropiFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiBlur",
+                "name": "dropiBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "textAreaProperties",
+                "methodName": "textAreaPropertiesChanged"
+            }, {
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}

package/dist/collection/components/dropi-time-line/dropi-time-line.css

@@ -0,0 +1,108 @@
+:host {
+  display: block;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.timeline {
+  display: flex;
+  flex-direction: column;
+}
+
+.tl-step {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--Size-3, 12px);
+}
+
+/* ── Left column: icon + line ───────────────────────────── */
+.tl-step__marker {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.tl-step__icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.2s, border-color 0.2s;
+}
+
+.tl-step--pending .tl-step__icon {
+  background: var(--Gray-Gray-100, #e6eaf2);
+  border: 2px solid var(--Gray-Gray-200, #c3c9d9);
+}
+
+.tl-step--active .tl-step__icon {
+  background: var(--Neutral-White, #ffffff);
+  border: 2px solid var(--Primary-Primary-500, #f49a3d);
+  box-shadow: 0 0 0 4px var(--Primary-Primary-100, #fde9d0);
+}
+
+.tl-step--done .tl-step__icon {
+  background: var(--Primary-Primary-500, #f49a3d);
+  border: 2px solid var(--Primary-Primary-500, #f49a3d);
+}
+
+.tl-step__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: block;
+}
+
+.tl-step--pending .tl-step__dot {
+  background: var(--Gray-Gray-300, #a3abbf);
+}
+
+.tl-step--active .tl-step__dot {
+  background: var(--Primary-Primary-500, #f49a3d);
+}
+
+.tl-step--done .tl-step__dot {
+  background: var(--Neutral-White, #ffffff);
+}
+
+/* ── Vertical connector ─────────────────────────────────── */
+.tl-step__line {
+  flex: 1;
+  width: 2px;
+  min-height: 24px;
+  margin: 4px 0;
+  background: var(--Gray-Gray-200, #c3c9d9);
+}
+
+.tl-step--done + .tl-step .tl-step__line,
+.tl-step--done .tl-step__line {
+  background: var(--Primary-Primary-500, #f49a3d);
+}
+
+/* ── Content ────────────────────────────────────────────── */
+.tl-step__content {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding-top: 6px;
+  padding-bottom: var(--Size-4, 16px);
+}
+
+.tl-step__label {
+  font-size: var(--font-size-s, 12px);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--Gray-Gray-700, #32394d);
+}
+
+.tl-step--pending .tl-step__label {
+  color: var(--Gray-Gray-400, #858ea6);
+  font-weight: var(--font-weight-regular, 400);
+}
+
+.tl-step__subtitle {
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Gray-Gray-500, #69738c);
+}

package/dist/collection/components/dropi-time-line/dropi-time-line.js

@@ -0,0 +1,69 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-time-line
+ * Vertical timeline showing ordered steps with status indicators.
+ */
+export class DropiTimeLine {
+    /** Array of timeline steps. Pass as JSON string or array */
+    steps = [];
+    get parsedSteps() {
+        if (typeof this.steps === 'string') {
+            try {
+                return JSON.parse(this.steps);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.steps || [];
+    }
+    render() {
+        const steps = this.parsedSteps;
+        return (h("div", { key: '0b43d3e673cda6f31476abcbc55ef2b6b9dbd7ac', class: "timeline" }, steps.map((step, i) => {
+            const isLast = i === steps.length - 1;
+            return (h("div", { class: { 'tl-step': true, [`tl-step--${step.status}`]: true }, key: step.id || i }, h("div", { class: "tl-step__marker" }, h("div", { class: "tl-step__icon" }, step.icon ? (h("dropi-icon", { name: step.icon, width: "16px", height: "16px", color: step.status === 'done' ? 'Neutral-White' : step.status === 'active' ? 'Primary-Primary-500' : 'Gray-Gray-400' })) : (h("span", { class: "tl-step__dot" }))), !isLast && h("div", { class: "tl-step__line" })), h("div", { class: "tl-step__content" }, h("span", { class: "tl-step__label" }, step.label), step.subtitle && h("span", { class: "tl-step__subtitle" }, step.subtitle))));
+        })));
+    }
+    static get is() { return "dropi-time-line"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-time-line.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-time-line.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "steps": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TimelineStep[] | string",
+                    "resolved": "TimelineStep[] | string",
+                    "references": {
+                        "TimelineStep": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-time-line/dropi-time-line.tsx",
+                            "id": "src/components/dropi-time-line/dropi-time-line.tsx::TimelineStep"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of timeline steps. Pass as JSON string or array"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "steps",
+                "defaultValue": "[]"
+            }
+        };
+    }
+}