@dropi/ui 0.1.55 → 999.0.0

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

@@ -1,510 +0,0 @@
-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. */
-    inputId;
-    /** 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.inputId !== undefined)
-            this.inputId = val.inputId;
-        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);
-        this.dropiChange.emit(val);
-    }
-    handleBlur() {
-        this.touched = true;
-        this.dropiBlur.emit();
-    }
-    get resolvedId() {
-        return this.inputId || this.name;
-    }
-    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: '0b5292b24d3e4f2b56d69e985ede73be0f9a1338', class: "textarea-wrapper" }, this.label && (h("label", { key: '19a45a83b92bed4b98da68389f5eee6affce9eb2', htmlFor: this.resolvedId, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : 'var(--Gray-Gray-600)' } }, this.label, showAsterisk && h("span", { key: 'e67602dbd7095504c4c1bf574d03a01a5238b561', class: "asterisk" }, " *"))), h("div", { key: '1d858e327147e87ca9df03d38e7bb90e0464fe31', class: "textarea-container" }, h("textarea", { key: 'c50cab6f4126a99628bd0aa6f2843fec43b27edf', 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: 'f62af4910cccf74bbbc7bad4064228545fba5d88', class: "char-counter" }, this.charCount, "/", this.maxLength))), showHelper && (h("div", { key: 'ca4ac5b41128f27dee5363aca453dc1f085d9e61', class: "form-control-helper" }, this.isInvalid && (h("dropi-icon", { key: 'a9c83edecd20dd318dd6ba7e4cc0d41ad748278a', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" })), h("span", { key: '09efa2feba4a232e453cc99f64d98eac9fd76632', 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 {
-            "inputId": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Input id. Defaults to label."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "input-id"
-            },
-            "name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Name for native form submission"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "name"
-            },
-            "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

@@ -1,109 +0,0 @@
-:host {
-  display: block;
-}
-
-*, *::before, *::after { box-sizing: border-box; }
-button, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }
-
-.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

@@ -1,69 +0,0 @@
-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: '22a2f8ff7a33e892096c3aaf381e23b110ec6b0a', 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, iconWidth: "16px", iconHeight: "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": "[]"
-            }
-        };
-    }
-}