@dropi/ui 0.1.24 → 0.1.26

package/dist/collection/components/dropi-read-more/dropi-read-more.js

@@ -1,154 +0,0 @@
-import { h } from "@stencil/core";
-/**
- * @component dropi-read-more
- * Truncates text to a word limit with an expandable "Ver más / Ver menos" toggle.
- */
-export class DropiReadMore {
-    /** Full text to display */
-    text = '';
-    /** Maximum number of words before truncating */
-    maxWords = 20;
-    /** Allow collapsing back after expanding */
-    showSeeLess = true;
-    /** Inline CSS string applied to the text element (matches Angular `textStyle`) */
-    textStyle = '';
-    /** Inline CSS string applied to the toggle button (matches Angular `buttonStyle`) */
-    buttonStyle = '';
-    expanded = false;
-    get words() {
-        return (this.text || '').split(/\s+/).filter(Boolean);
-    }
-    get needsTruncation() {
-        return this.words.length > this.maxWords;
-    }
-    get displayText() {
-        if (!this.needsTruncation || this.expanded)
-            return this.text;
-        return this.words.slice(0, this.maxWords).join(' ');
-    }
-    render() {
-        const showToggle = this.needsTruncation && (this.expanded ? this.showSeeLess : true);
-        return (h("div", { key: '125c5f1d75c1e06f02d9898f375626bb75a67cd8', class: "read-more" }, h("p", { key: '4a4450a3468e7fe7297fdae98d370f8cd77b8553', class: "read-more__text", style: this.textStyle ? this.textStyle : undefined }, this.displayText, showToggle && (h("button", { key: 'cfe58b2781b908d9a0a802b4bd68cedf8dea827e', class: "read-more__toggle", style: this.buttonStyle ? this.buttonStyle : undefined, onClick: () => this.expanded = !this.expanded }, this.expanded ? ' Ver menos' : '... Ver más')))));
-    }
-    static get is() { return "dropi-read-more"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["dropi-read-more.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["dropi-read-more.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "text": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Full text to display"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "text",
-                "defaultValue": "''"
-            },
-            "maxWords": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Maximum number of words before truncating"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "max-words",
-                "defaultValue": "20"
-            },
-            "showSeeLess": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Allow collapsing back after expanding"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "show-see-less",
-                "defaultValue": "true"
-            },
-            "textStyle": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Inline CSS string applied to the text element (matches Angular `textStyle`)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "text-style",
-                "defaultValue": "''"
-            },
-            "buttonStyle": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Inline CSS string applied to the toggle button (matches Angular `buttonStyle`)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "button-style",
-                "defaultValue": "''"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "expanded": {}
-        };
-    }
-}

package/dist/collection/components/dropi-search/dropi-search.css

@@ -1,112 +0,0 @@
-:host {
-  display: block;
-  width: 100%;
-  position: relative;
-}
-
-*, *::before, *::after { box-sizing: border-box; }
-
-.search-label {
-  display: block;
-  font-size: var(--font-size-xs, 10px);
-  color: var(--Gray-Gray-600, #475066);
-  margin-bottom: 4px;
-}
-
-/* ── Input row ──────────────────────────────────────────── */
-.search-input-row {
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 100%;
-}
-
-.search-icon {
-  position: absolute;
-  left: 10px;
-  pointer-events: none;
-  z-index: 1;
-}
-
-.search-input {
-  width: 100%;
-  height: 40px;
-  padding: 0 36px 0 34px;
-  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
-  border-radius: var(--Border-2, 8px);
-  background: var(--Neutral-White, #ffffff);
-  font-size: var(--font-size-s, 12px);
-  font-family: inherit;
-  color: var(--Gray-Gray-700, #32394d);
-  outline: none;
-  transition: border-color 0.2s;
-}
-
-.search-input:focus {
-  border-color: var(--Info-Info-500, #50a5f1);
-}
-
-.search-input::placeholder {
-  color: var(--Gray-Gray-400, #858ea6);
-}
-
-.search-clear {
-  position: absolute;
-  right: 10px;
-  display: flex;
-  align-items: center;
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  z-index: 1;
-}
-
-/* ── Dropdown ───────────────────────────────────────────── */
-.search-dropdown {
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
-  right: 0;
-  max-height: var(--dropdown-height, 240px);
-  overflow-y: auto;
-  background: var(--Neutral-White, #ffffff);
-  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
-  border-radius: var(--Border-2, 8px);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
-  z-index: 100;
-}
-
-.search-option {
-  display: flex;
-  align-items: center;
-  gap: var(--Size-2, 8px);
-  padding: var(--Size-2, 8px) var(--Size-3, 12px);
-  cursor: pointer;
-  transition: background 0.15s;
-  user-select: none;
-}
-
-.search-option:hover {
-  background: var(--Gray-Gray-50, #f7f8fa);
-}
-
-.search-option--selected {
-  background: var(--Primary-Primary-50, #fff5eb);
-}
-
-.search-option__label {
-  flex: 1;
-  font-size: var(--font-size-s, 12px);
-  color: var(--Gray-Gray-700, #32394d);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.search-no-results {
-  padding: var(--Size-3, 12px);
-  font-size: var(--font-size-s, 12px);
-  color: var(--Gray-Gray-400, #858ea6);
-  text-align: center;
-}