@dropi/ui 0.1.20 → 0.1.21

package/dist/collection/components/dropi-banner-external/dropi-banner-external.js

@@ -19,22 +19,28 @@ export class DropiBannerExternal {
     alt = '';
     /** Background color behind the image */
     backgroundColor = 'transparent';
+    /** Slug name (matches Angular `slugName`) */
+    slugName = '';
+    /** Whether to show on white brand (matches Angular `viewOnWhiteBrand`) */
+    viewOnWhiteBrand = false;
+    /** Countries list to show (matches Angular `viewOnlyCountries`) */
+    viewOnlyCountries = [];
     closed = false;
     /** Emitted when the banner is clicked (only when no link is set) */
-    dropiBannerClick;
-    /** Emitted when the close button is clicked */
-    dropiBannerClose;
+    bannerClick;
+    /** Emitted with false when the close button is clicked (matches Angular `isVisible`) */
+    isVisible;
     handleClick(e) {
         if (!this.link) {
             e.preventDefault();
-            this.dropiBannerClick.emit();
+            this.bannerClick.emit();
         }
     }
     closeBanner(e) {
         e.preventDefault();
         e.stopPropagation();
         this.closed = true;
-        this.dropiBannerClose.emit();
+        this.isVisible.emit(false);
     }
     render() {
         if (this.closed || !this.imageUrl)
@@ -135,6 +141,64 @@ export class DropiBannerExternal {
                 "reflect": false,
                 "attribute": "background-color",
                 "defaultValue": "'transparent'"
+            },
+            "slugName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Slug name (matches Angular `slugName`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "slug-name",
+                "defaultValue": "''"
+            },
+            "viewOnWhiteBrand": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show on white brand (matches Angular `viewOnWhiteBrand`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "view-on-white-brand",
+                "defaultValue": "false"
+            },
+            "viewOnlyCountries": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Countries list to show (matches Angular `viewOnlyCountries`)"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
             }
         };
     }
@@ -145,8 +209,8 @@ export class DropiBannerExternal {
     }
     static get events() {
         return [{
-                "method": "dropiBannerClick",
-                "name": "dropiBannerClick",
+                "method": "bannerClick",
+                "name": "bannerClick",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -160,18 +224,18 @@ export class DropiBannerExternal {
                     "references": {}
                 }
             }, {
-                "method": "dropiBannerClose",
-                "name": "dropiBannerClose",
+                "method": "isVisible",
+                "name": "isVisible",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the close button is clicked"
+                    "text": "Emitted with false when the close button is clicked (matches Angular `isVisible`)"
                 },
                 "complexType": {
-                    "original": "void",
-                    "resolved": "void",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 }
             }];

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

@@ -20,7 +20,7 @@
   justify-content: center;
   gap: var(--Size-1, 4px);
   border-radius: var(--Border-2, 8px);
-  font-weight: 700;
+  font-weight: var(--font-weight-bold);
   min-width: 33px;
   line-height: 110%;
   cursor: pointer;
@@ -48,7 +48,7 @@
 /* ── Sizes ─────────────────────────────────────────────────── */
 .btn.large  { padding: var(--Size-4, 16px); font-size: var(--Size-4, 16px); height: 48px; }
 .btn.normal { padding: var(--Size-3, 12px); font-size: var(--font-size-s, 12px); height: 40px; }
-.btn.small  { padding: var(--Size-2, 8px);  font-size: var(--Size-3, 12px); height: 29px; }
+.btn.small  { padding: var(--Size-2, 8px);  font-size: var(--font-size-s, 12px); height: 29px; }
 
 /* ── Disabled / Loading ─────────────────────────────────────── */
 .btn.disabled,
@@ -60,37 +60,37 @@
 /* ══════════════════════════════════════════════════════════════
    PRIMARY severity
 ═══════════════════════════════════════════════════════════════ */
-.btn.primary.default  { background: var(--Primary-Primary-500, #f49a3d); color: var(--Neutral-White, #fff); }
+.btn.primary.default  { background: var(--Primary-Primary-500, #f49a3d); color: var(--Neutral-White, #ffffff); }
 .btn.primary.default:hover { background: var(--Primary-Primary-600, #e58017); }
 
-.btn.primary.success  { background: var(--Success-Success-500, #0abb87); color: var(--Neutral-White, #fff); }
+.btn.primary.success  { background: var(--Success-Success-500, #0abb87); color: var(--Neutral-White, #ffffff); }
 .btn.primary.success:hover { background: var(--Success-Success-600, #09aa7b); }
 
-.btn.primary.info     { background: var(--Info-Info-500, #50a5f1); color: var(--Neutral-White, #fff); }
+.btn.primary.info     { background: var(--Info-Info-500, #50a5f1); color: var(--Neutral-White, #ffffff); }
 .btn.primary.info:hover { background: var(--Info-Info-600, #4996db); }
 
-.btn.primary.error    { background: var(--Error-Error-500, #f46a6b); color: var(--Neutral-White, #fff); }
+.btn.primary.error    { background: var(--Error-Error-500, #f46a6b); color: var(--Neutral-White, #ffffff); }
 .btn.primary.error:hover { background: var(--Error-Error-600, #de6061); }
 
-.btn.primary.warning  { background: var(--Warning-Warning-500, #f1b44c); color: var(--Neutral-White, #fff); }
+.btn.primary.warning  { background: var(--Warning-Warning-500, #f1b44c); color: var(--Neutral-White, #ffffff); }
 .btn.primary.warning:hover { background: var(--Warning-Warning-600, #dba445); }
 
-.btn.primary.legacy   { background: var(--Secondary-Secondary-500, #008dbf); color: var(--Neutral-White, #fff); }
+.btn.primary.legacy   { background: var(--Secondary-Secondary-500, #008dbf); color: var(--Neutral-White, #ffffff); }
 .btn.primary.legacy:hover { background: var(--Secondary-Secondary-600, #007199); }
 
 /* Disabled primary */
-.btn.primary.disabled.default  { background: var(--Primary-Primary-300, #f2bc85); color: var(--Neutral-White, #fff); }
-.btn.primary.disabled.success  { background: var(--Success-Success-300, #5bd1af); color: var(--Neutral-White, #fff); }
-.btn.primary.disabled.info     { background: var(--Info-Info-300, #8ac3f6); color: var(--Neutral-White, #fff); }
-.btn.primary.disabled.error    { background: var(--Error-Error-300, #f89b9c); color: var(--Neutral-White, #fff); }
-.btn.primary.disabled.warning  { background: var(--Warning-Warning-300, #f6cd87); color: var(--Neutral-White, #fff); }
-.btn.primary.disabled.legacy   { background: var(--Secondary-Secondary-300, #62bad9); color: var(--Neutral-White, #fff); }
+.btn.primary.disabled.default  { background: var(--Primary-Primary-300, #f2bc85); color: var(--Neutral-White, #ffffff); }
+.btn.primary.disabled.success  { background: var(--Success-Success-300, #5bd1af); color: var(--Neutral-White, #ffffff); }
+.btn.primary.disabled.info     { background: var(--Info-Info-300, #8ac3f6); color: var(--Neutral-White, #ffffff); }
+.btn.primary.disabled.error    { background: var(--Error-Error-300, #f89b9c); color: var(--Neutral-White, #ffffff); }
+.btn.primary.disabled.warning  { background: var(--Warning-Warning-300, #f6cd87); color: var(--Neutral-White, #ffffff); }
+.btn.primary.disabled.legacy   { background: var(--Secondary-Secondary-300, #62bad9); color: var(--Neutral-White, #ffffff); }
 
 /* ══════════════════════════════════════════════════════════════
    SECONDARY severity
 ═══════════════════════════════════════════════════════════════ */
 .btn.secondary {
-  background: var(--Neutral-White, #fff);
+  background: var(--Neutral-White, #ffffff);
   border: 1px solid;
 }
 
@@ -150,8 +150,8 @@
 
 .btn.tertiary.dropdown {
   color: var(--Gray-Gray-500, #69738c);
-  font-weight: 400;
-  font-size: 14px;
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-s);
   background: transparent;
 }
 

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

@@ -19,10 +19,12 @@ export class DropiButton {
     preIcon = '';
     /** Icon name to show after the text */
     postIcon = '';
+    /** Custom icon color override */
+    customIconColor = '';
     /** Button label */
     text = '';
     /** Emitted on click (not emitted when disabled or loading) */
-    dropiClick;
+    onClick;
     colorMap = {
         default: 'Primary-Primary-',
         success: 'Success-Success-',
@@ -31,6 +33,7 @@ export class DropiButton {
         legacy: 'Secondary-Secondary-',
         warning: 'Warning-Warning-',
         dropdown: 'Gray-Gray-',
+        'default-light': 'Gray-Gray-',
     };
     get iconSize() {
         if (this.size === 'large')
@@ -53,7 +56,7 @@ export class DropiButton {
     }
     handleClick(e) {
         if (this.state !== 'disabled' && this.state !== 'loading') {
-            this.dropiClick.emit(e);
+            this.onClick.emit(e);
         }
     }
     renderLoadingSpinner() {
@@ -64,14 +67,15 @@ export class DropiButton {
         const hasText = this.text !== '';
         const showPostIcon = this.postIcon !== '' || this.type === 'dropdown';
         const dropdownIcon = this.type === 'dropdown' ? 'Dropdown-down' : this.postIcon;
-        return (h("button", { key: 'e924f56cb86a87ee8a314cfc5c278042a4d0a87d', class: {
+        return (h("button", { key: '4df67bd28e77c9a14fb33f3131b60ac508ca1937', class: {
                 btn: true,
                 'without-text': !hasText,
                 [this.severity]: true,
                 [this.type]: true,
                 [this.size]: true,
                 [this.state]: true,
-            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (h("dropi-icon", { key: '6d42026da19f7bf2fc6186659b8afc48748544f1', name: this.preIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), hasText && h("span", { key: 'c71ee430fec84cd24d261dc12973ad0b472cc71c', class: "text" }, this.text), showPostIcon && (h("dropi-icon", { key: 'ff3890de446e5b48c88a980f01cce4e7b9764b24', name: dropdownIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), h("slot", { key: '3ee6aacd17a004664ad4bcf89219a8e2dc865343' })));
+                'full-width': this.fullWidth,
+            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (h("dropi-icon", { key: '7a54bf7ebfad24786109a17af928bfc43ccc7db4', name: this.preIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), hasText && h("span", { key: 'ffb3b062d93c3a7090d971538d23c309f915b749', class: "text" }, this.text), showPostIcon && (h("dropi-icon", { key: '16127c78c5b4a3372ba89b24bc9b067e2d035cd1', name: dropdownIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), h("slot", { key: 'a65ee231501ad83a059eb5988e96e1dcd18c5706' })));
     }
     static get is() { return "dropi-button"; }
     static get encapsulation() { return "shadow"; }
@@ -92,7 +96,7 @@ export class DropiButton {
                 "mutable": false,
                 "complexType": {
                     "original": "ButtonType",
-                    "resolved": "\"default\" | \"dropdown\" | \"error\" | \"info\" | \"legacy\" | \"success\" | \"warning\"",
+                    "resolved": "\"default\" | \"default-light\" | \"dropdown\" | \"error\" | \"info\" | \"legacy\" | \"success\" | \"warning\"",
                     "references": {
                         "ButtonType": {
                             "location": "local",
@@ -251,6 +255,26 @@ export class DropiButton {
                 "attribute": "post-icon",
                 "defaultValue": "''"
             },
+            "customIconColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom icon color override"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-icon-color",
+                "defaultValue": "''"
+            },
             "text": {
                 "type": "string",
                 "mutable": false,
@@ -275,8 +299,8 @@ export class DropiButton {
     }
     static get events() {
         return [{
-                "method": "dropiClick",
-                "name": "dropiClick",
+                "method": "onClick",
+                "name": "onClick",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/components/dropi-card-checkbox/dropi-card-checkbox.css

@@ -77,7 +77,9 @@
 
 .extra-info h4 {
   margin: 0;
-  font-size: var(--font-size-s, 12px);
+  font-weight: var(--font-weight-semibold);
+  color: inherit;
+  line-height: inherit;
 }
 
 .default-card {

package/dist/collection/components/dropi-card-checkbox/dropi-card-checkbox.js

@@ -12,12 +12,12 @@ import { h } from "@stencil/core";
  * ></dropi-card-checkbox>
  */
 export class DropiCardCheckbox {
-    /** Visual type: 'default' = no border, 'with-card' = bordered card */
+    /** Visual type — matches Angular: 'default' | 'with card' */
     type = 'default';
-    /** Whether the checkbox is checked */
-    checked = false;
-    /** Main title */
-    cardTitle = '';
+    /** Whether the checkbox is checked — matches Angular 'state' */
+    state = 'checked';
+    /** Main title — matches Angular 'title' */
+    title = 'Tittle';
     /** Optional description below title */
     description = '';
     /** Optional extra info shown on the right */
@@ -27,20 +27,23 @@ export class DropiCardCheckbox {
     /** Disables interaction */
     disabled = false;
     /** Emitted with the new checked state when clicked */
-    dropiChange;
+    onChange;
+    get isChecked() {
+        return this.state === 'checked';
+    }
     handleClick() {
         if (this.disabled)
             return;
-        this.checked = !this.checked;
-        this.dropiChange.emit(this.checked);
+        this.state = this.isChecked ? 'default' : 'checked';
+        this.onChange.emit(this.isChecked);
     }
     render() {
-        return (h("div", { key: '9c647faab478d2817593315051b1f02d0334756d', class: {
+        return (h("div", { key: 'b6e9f4e5855a03b04102fd2206c4d478d49e4753', class: {
                 'container-card-check': true,
                 'default-card': this.type === 'default',
-                'is-checked': this.checked && this.type === 'with-card',
+                'is-checked': this.isChecked && this.type === 'with card',
                 'disabled': this.disabled,
-            }, onClick: () => this.handleClick() }, h("dropi-checkbox", { key: '31db5cd31da290692d6aa77e0129b7e4361c23aa', checked: this.checked, disabled: this.disabled }), h("div", { key: '4b5c8eeadd255a79344d634d84e3ff93fafa34b4', class: "container-text" }, h("div", { key: '30a03f764294e0b4ca8a2bf4fd1badc08d0dc7e9', class: "title-check" }, this.cardTitle), this.description && h("div", { key: '751b4fac066b17c903e56a0aa5ef16b0d4151944', class: "description-text" }, this.description)), (this.extraInfo || this.extraInfoDescription) && (h("div", { key: '6b7eec457d42169ac87d1042b65b1bebdd436a5e', class: "extra-info" }, this.extraInfo && h("div", { key: '07e1cfa079668255343570498e0ad0dc0351effb' }, this.extraInfo), this.extraInfoDescription && h("h4", { key: '3a8277e2749b9cbdaf7d5d11086c7f2ac11dc39c' }, this.extraInfoDescription)))));
+            }, onClick: () => this.handleClick() }, h("dropi-checkbox", { key: '45af833a92b8441b79e2679a8f584f74e6b0c458', checked: this.isChecked, disabled: this.disabled }), h("div", { key: 'b0678976e2f52eef02fa5cb71ae6db284b26212d', class: "container-text" }, h("div", { key: 'd5bc253eb3262223d1e9ba31b2193cd3c1d11abe', class: "title-check" }, this.title), this.description && h("div", { key: '5555ff237e6c80552dafa079de1b6901e3e672a5', class: "description-text" }, this.description)), (this.extraInfo || this.extraInfoDescription) && (h("div", { key: '675a7b4a1195d2a452f3be11d4ae1553f7b19b4b', class: "extra-info" }, this.extraInfo && h("div", { key: '33e7cec0ccc2c1c5f8afe61a54463382b11343b4' }, this.extraInfo), this.extraInfoDescription && h("h4", { key: 'f5d61a5ff4706d4bcb2cd7f818e06cff8787ac6d' }, this.extraInfoDescription)))));
     }
     static get is() { return "dropi-card-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -60,15 +63,15 @@ export class DropiCardCheckbox {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'default' | 'with-card'",
-                    "resolved": "\"default\" | \"with-card\"",
+                    "original": "'default' | 'with card'",
+                    "resolved": "\"default\" | \"with card\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Visual type: 'default' = no border, 'with-card' = bordered card"
+                    "text": "Visual type \u2014 matches Angular: 'default' | 'with card'"
                 },
                 "getter": false,
                 "setter": false,
@@ -76,27 +79,27 @@ export class DropiCardCheckbox {
                 "attribute": "type",
                 "defaultValue": "'default'"
             },
-            "checked": {
-                "type": "boolean",
+            "state": {
+                "type": "string",
                 "mutable": true,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "'checked' | 'default'",
+                    "resolved": "\"checked\" | \"default\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the checkbox is checked"
+                    "text": "Whether the checkbox is checked \u2014 matches Angular 'state'"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "checked",
-                "defaultValue": "false"
+                "attribute": "state",
+                "defaultValue": "'checked'"
             },
-            "cardTitle": {
+            "title": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -108,13 +111,13 @@ export class DropiCardCheckbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Main title"
+                    "text": "Main title \u2014 matches Angular 'title'"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "card-title",
-                "defaultValue": "''"
+                "attribute": "title",
+                "defaultValue": "'Tittle'"
             },
             "description": {
                 "type": "string",
@@ -200,8 +203,8 @@ export class DropiCardCheckbox {
     }
     static get events() {
         return [{
-                "method": "dropiChange",
-                "name": "dropiChange",
+                "method": "onChange",
+                "name": "onChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,