@dropi/ui 0.1.27 → 0.1.29

package/dist/collection/collection-manifest.json

@@ -0,0 +1,77 @@
+{
+  "entries": [
+    "components/dropi-alert/dropi-alert.js",
+    "components/dropi-alert-modal/dropi-alert-modal.js",
+    "components/dropi-avatars/dropi-avatars.js",
+    "components/dropi-badge/dropi-badge.js",
+    "components/dropi-breadcrumb/dropi-breadcrumb.js",
+    "components/dropi-button/dropi-button.js",
+    "components/dropi-checkbox-selection-list/dropi-checkbox-selection-list.js",
+    "components/dropi-chips/dropi-chips.js",
+    "components/dropi-city-selector/dropi-city-selector.js",
+    "components/dropi-country-selector/dropi-country-selector.js",
+    "components/dropi-date-picker-range/dropi-date-picker-range.js",
+    "components/dropi-dropdown/dropi-dropdown.js",
+    "components/dropi-ilustration-icon/dropi-ilustration-icon.js",
+    "components/dropi-input/dropi-input.js",
+    "components/dropi-languages-selector/dropi-languages-selector.js",
+    "components/dropi-modal/dropi-modal.js",
+    "components/dropi-radio-selection-list/dropi-radio-selection-list.js",
+    "components/dropi-search/dropi-search.js",
+    "components/dropi-sidebar/dropi-sidebar.js",
+    "components/dropi-simple-stepper/dropi-simple-stepper.js",
+    "components/dropi-skeleton/dropi-skeleton.js",
+    "components/dropi-steps/dropi-steps.js",
+    "components/dropi-table/dropi-table.js",
+    "components/dropi-tabs/dropi-tabs.js",
+    "components/dropi-tag/dropi-tag.js",
+    "components/dropi-text-area/dropi-text-area.js",
+    "components/dropi-time-line/dropi-time-line.js",
+    "components/dropi-toast/dropi-toast.js",
+    "components/dropi-tooltip-v2/dropi-tooltip.js",
+    "components/dropi-vertical-steps/dropi-vertical-steps.js",
+    "components/dropi-accordion/dropi-accordion-item.js",
+    "components/dropi-accordion/dropi-accordion.js",
+    "components/dropi-alert-legacy/dropi-alert-legacy.js",
+    "components/dropi-badge-legacy/dropi-badge-legacy.js",
+    "components/dropi-banner-external/dropi-banner-external.js",
+    "components/dropi-card-checkbox/dropi-card-checkbox.js",
+    "components/dropi-card-product/dropi-card-product.js",
+    "components/dropi-card-section/dropi-card-section.js",
+    "components/dropi-carousel/dropi-carousel.js",
+    "components/dropi-checkbox/dropi-checkbox.js",
+    "components/dropi-color-picker/dropi-color-picker.js",
+    "components/dropi-country-flags/dropi-country-flags.js",
+    "components/dropi-date-picker/dropi-date-picker.js",
+    "components/dropi-drawer/dropi-drawer.js",
+    "components/dropi-empty-state/dropi-empty-state.js",
+    "components/dropi-favorite-button/dropi-favorite-button.js",
+    "components/dropi-file-upload/dropi-file-upload.js",
+    "components/dropi-file-upload-progress-bar/dropi-file-upload-progress-bar.js",
+    "components/dropi-icon/dropi-icon.js",
+    "components/dropi-image-miniature/dropi-image-miniature.js",
+    "components/dropi-image-overlay/dropi-image-overlay.js",
+    "components/dropi-logo/dropi-logo.js",
+    "components/dropi-lottie-loader/dropi-lottie-loader.js",
+    "components/dropi-media-player/dropi-media-player.js",
+    "components/dropi-navbar/dropi-navbar.js",
+    "components/dropi-otp-send-code/dropi-otp-send-code.js",
+    "components/dropi-paginator/dropi-paginator.js",
+    "components/dropi-phone-input/dropi-phone-input.js",
+    "components/dropi-radio-button/dropi-radio-button.js",
+    "components/dropi-read-more/dropi-read-more.js",
+    "components/dropi-select/dropi-select.js",
+    "components/dropi-switch/dropi-switch.js",
+    "components/dropi-tag-type-product/dropi-tag-type-product.js",
+    "components/dropi-tooltip/dropi-tooltip.js",
+    "components/dropi-youtube-lazy-video/dropi-youtube-lazy-video.js"
+  ],
+  "mixins": [],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.43.3",
+    "typescriptVersion": "5.8.3"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/dropi-accordion/dropi-accordion-item.css

@@ -0,0 +1,45 @@
+:host {
+  display: block;
+  border-bottom: 1px solid var(--Gray-Gray-100);
+}
+
+.accordion-header {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  background: white;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+}
+
+.accordion-header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.accordion-title {
+  font-size: var(--font-size-m);
+  font-weight: var(--font-weight-semibold);
+  color: var(--Gray-Gray-700);
+}
+
+.accordion-chevron {
+  transition: transform 0.3s ease;
+}
+
+.accordion-chevron--open {
+  transform: rotate(180deg);
+}
+
+.accordion-body {
+  overflow: hidden;
+  transition: max-height 0.3s ease-out;
+}
+
+.accordion-content {
+  padding: 0 16px 16px 16px;
+}

package/dist/collection/components/dropi-accordion/dropi-accordion-item.js

@@ -0,0 +1,172 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-accordion-item
+ * Collapsible section item intended to be used inside <dropi-accordion>.
+ */
+export class DropiAccordionItem {
+    el;
+    /** The title of the item — matches Angular `sectionTitle` */
+    sectionTitle = '';
+    /** Index of the item — matches Angular `index` */
+    index;
+    /** Whether the section is expanded */
+    open = false;
+    /** Disable toggling */
+    disabled = false;
+    /** Icon name before title */
+    preIcon = '';
+    contentHeight = '0px';
+    contentRef;
+    openChanged(val) {
+        this.updateHeight(val);
+    }
+    componentDidLoad() {
+        this.updateHeight(this.open);
+    }
+    updateHeight(open) {
+        if (!this.contentRef)
+            return;
+        this.contentHeight = open ? `${this.contentRef.scrollHeight}px` : '0px';
+    }
+    handleToggle() {
+        if (this.disabled)
+            return;
+        // Notify parent if needed, or just toggle locally
+        const parent = this.el.closest('dropi-accordion');
+        if (parent && !parent.multiple) {
+            // If parent is single-expand, we notify or handle via event
+        }
+        this.open = !this.open;
+        setTimeout(() => this.updateHeight(this.open), 0);
+    }
+    render() {
+        return (h("div", { key: '43f4ce6c38338a90a3b866a449f14e48b478e738', class: { 'accordion-item': true, 'accordion-item--open': this.open, 'accordion-item--disabled': this.disabled } }, h("button", { key: 'b5150a903bf75b82ffea9707e5906dc17f0bcd1c', class: "accordion-header", onClick: () => this.handleToggle(), "aria-expanded": String(this.open), disabled: this.disabled }, h("span", { key: '53f5c6a4e5a9d02412145395112368ddea9af746', class: "accordion-header-left" }, this.preIcon && h("dropi-icon", { key: '5fea3e2916fe5dfb6c1435f08c3b63aca4656523', name: this.preIcon, width: "20px", height: "20px", color: "Gray-Gray-600" }), h("span", { key: '3ad504dcf5d8b4f05d11a0e951a81b79428de3ec', class: "accordion-title" }, this.sectionTitle)), h("span", { key: 'bd44cf2fe9989fc80badb6e46a33a9d699c90f49', class: { 'accordion-chevron': true, 'accordion-chevron--open': this.open } }, h("dropi-icon", { key: '7a4b261df5ffd4c6276e4cccc6bc5e8f8e43a717', name: "Dropdown-down", width: "20px", height: "20px", color: "Gray-Gray-500" }))), h("div", { key: 'cb8789f49d4c83e33f2c366b90220b79b5619502', class: "accordion-body", style: { maxHeight: this.contentHeight }, ref: (el) => this.contentRef = el }, h("div", { key: '72d302242a40c9aa60a941814ac311a540b319f6', class: "accordion-content" }, h("slot", { key: 'b5a4a42f0d366f1f0409f719a52d5af11d77e3c3' })))));
+    }
+    static get is() { return "dropi-accordion-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-accordion-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-accordion-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "sectionTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The title of the item \u2014 matches Angular `sectionTitle`"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "section-title",
+                "defaultValue": "''"
+            },
+            "index": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Index of the item \u2014 matches Angular `index`"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "index"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the section is expanded"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable toggling"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "preIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon name before title"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pre-icon",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "contentHeight": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "openChanged"
+            }];
+    }
+}

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

@@ -0,0 +1,21 @@
+:host { display: block; width: 100%; margin-bottom: -1px; }
+*, *::before, *::after { box-sizing: border-box; }
+
+.accordion { border-top: 1px solid var(--Gray-Gray-100,#e6eaf2); border-bottom: 1px solid var(--Gray-Gray-100,#e6eaf2); overflow: hidden; }
+
+.accordion-header {
+  width: 100%; display: flex; align-items: center; justify-content: space-between;
+  padding: var(--Size-4,16px) var(--Size-5,20px);
+  background: transparent; border: none; cursor: pointer; gap: 12px; text-align: left;
+}
+.accordion-header:disabled { cursor: not-allowed; opacity: 0.5; }
+.accordion--open .accordion-header { border-bottom: 1px solid var(--Gray-Gray-100,#e6eaf2); }
+
+.accordion-header-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
+.accordion-title { font-size: var(--font-size-m, 16px); font-weight: var(--font-weight-bold,700); color: var(--Gray-Gray-600, #475066); line-height: 1.4; }
+
+.accordion-chevron { display: flex; align-items: center; flex-shrink: 0; transition: transform 0.22s ease; }
+.accordion-chevron--open { transform: rotate(180deg); }
+
+.accordion-body { max-height: 0; overflow: hidden; transition: max-height 0.28s ease; }
+.accordion-content { padding: 0 var(--Size-5,20px) var(--Size-4,16px); color: var(--Gray-Gray-600,#475066); font-size: var(--font-size-s,12px); line-height: 1.6; }

package/dist/collection/components/dropi-accordion/dropi-accordion.js

@@ -0,0 +1,48 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-accordion
+ * Container for <dropi-accordion-item> components.
+ */
+export class DropiAccordion {
+    /** Allows multiple sections to be open at the same time. If false, only one section can be open. */
+    multiple = false;
+    render() {
+        return (h("div", { key: '15575b05adec26235378bb459cdf158bdabe2852', class: "accordion-container" }, h("slot", { key: 'e5411aee85b69e50c777657b0cb2aa7d04d09fa4' })));
+    }
+    static get is() { return "dropi-accordion"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-accordion.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-accordion.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows multiple sections to be open at the same time. If false, only one section can be open."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiple",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,128 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.alert {
+  display: flex;
+  align-items: center;
+  gap: var(--Size-2, 8px);
+  padding: var(--Size-3, 12px);
+  border-radius: var(--Border-2, 8px);
+  border: 1px solid transparent;
+  width: 100%;
+}
+
+/* ── State colors ───────────────────────────────────────── */
+.alert--success {
+  background: var(--Success-Success-50, #e7f8f3);
+  border-color: var(--Success-Success-500, #0abb87);
+}
+
+.alert--error {
+  background: var(--Error-Error-50, #fef0f0);
+  border-color: var(--Error-Error-500, #f46a6b);
+}
+
+.alert--warning {
+  background: var(--Warning-Warning-50, #fef8ed);
+  border-color: var(--Warning-Warning-500, #f1b44c);
+}
+
+.alert--info {
+  background: var(--Info-Info-50, #eef6fe);
+  border-color: var(--Info-Info-500, #50a5f1);
+}
+
+/* ── Flag type (left accent border) ────────────────────── */
+.alert--flag {
+  padding: var(--Size-1, 4px) var(--Size-2, 8px);
+  border-radius: var(--Border-1, 4px);
+  border: none !important;
+  justify-content: center;
+}
+.alert--flag .alert__body {
+  justify-content: center;
+  text-align: center;
+}
+.alert--flag .alert__message {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-regular);
+}
+
+/* ── Icon ───────────────────────────────────────────────── */
+.alert__icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding-top: 1px;
+}
+
+/* ── Body ───────────────────────────────────────────────── */
+.alert__body {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--Size-1, 4px);
+}
+
+.alert__message {
+  font-size: var(--font-size-s);
+  color: var(--Gray-600, #475066);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.5;
+}
+
+.alert__link {
+  font-size: var(--font-size-s, 12px);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--Primary-Primary-500, #f49a3d);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+/* ── Actions ────────────────────────────────────────────── */
+.alert__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--Size-2, 8px);
+  flex-shrink: 0;
+}
+
+.alert__btn {
+  height: 28px;
+  padding: 0 var(--Size-3, 12px);
+  border-radius: var(--Border-2, 8px);
+  border: 1px solid var(--Primary-Primary-500, #f49a3d);
+  background: transparent;
+  color: var(--Primary-Primary-500, #f49a3d);
+  font-size: var(--font-size-xs, 10px);
+  font-family: inherit;
+  font-weight: var(--font-weight-bold, 700);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.alert__btn:hover {
+  background: var(--Primary-Primary-500, #f49a3d);
+  color: var(--Neutral-White, #ffffff);
+}
+
+.alert__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  opacity: 0.6;
+  transition: opacity 0.15s;
+}
+
+.alert__close:hover {
+  opacity: 1;
+}