@dropi/ui 0.1.27 → 0.1.29

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

@@ -0,0 +1,178 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-card-section
+ * Section card with title, description and a switch or dropdown control.
+ */
+export class DropiCardSection {
+    /** Section title — matches Angular 'title' */
+    title = 'title';
+    /** Section description */
+    description = 'Description';
+    /** Control type on the right */
+    typeElement = 'dropdown';
+    /** Title size variant */
+    type = 'important';
+    /** Switch checked state */
+    isChecked = false;
+    /** Emitted when switch changes */
+    onChange;
+    /** Emitted when dropdown icon is clicked */
+    onClick;
+    render() {
+        return (h("div", { key: 'aa7548c223bf3238b7af10e52821e3ffd19fefca', class: "card-section" }, h("div", { key: '6b0ed1e7f7c282b0f67277567a2fa1ffbab9d04e', class: "card-section__text" }, this.type === 'important'
+            ? h("h5", { class: "card-section__title card-section__title--important" }, this.title)
+            : h("h6", { class: "card-section__title" }, this.title), this.description && h("p", { key: 'f0c83d631d541d95c19e4a246634da56413a3de9', class: "card-section__desc" }, this.description)), h("div", { key: '976d78401ab26872df88115ae0f0449bcd2faae9', class: "card-section__control" }, this.typeElement === 'switch' ? (h("dropi-switch", { isChecked: this.isChecked, onOnChange: (e) => {
+                this.isChecked = e.detail;
+                this.onChange.emit(e.detail);
+            } })) : (h("button", { class: "card-section__dropdown-btn", onClick: () => this.onClick.emit(), "aria-label": "Expandir" }, h("dropi-icon", { name: "Dropdown-down", width: "20px", height: "20px", color: "Gray-Gray-500" }))))));
+    }
+    static get is() { return "dropi-card-section"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-card-section.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-card-section.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "title": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Section title \u2014 matches Angular 'title'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "title",
+                "defaultValue": "'title'"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Section description"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description",
+                "defaultValue": "'Description'"
+            },
+            "typeElement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'dropdown' | 'switch'",
+                    "resolved": "\"dropdown\" | \"switch\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Control type on the right"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type-element",
+                "defaultValue": "'dropdown'"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'medium' | 'important'",
+                    "resolved": "\"important\" | \"medium\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Title size variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'important'"
+            },
+            "isChecked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Switch checked state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-checked",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "onChange",
+                "name": "onChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when switch changes"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "onClick",
+                "name": "onClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when dropdown icon is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,148 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+.dropi-carousel-container {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  padding: 0 var(--Size-4);
+}
+
+.dropi-carousel-content {
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 1rem 0;
+  width: 100%;
+}
+
+.dropi-carousel-items-content {
+  overflow: hidden;
+  flex: 1;
+  padding: 0;
+  width: 100%;
+  max-width: 100%;
+}
+
+.dropi-carousel-items-container {
+  display: flex;
+  padding-bottom: var(--Size-3);
+  will-change: transform;
+}
+
+.dropi-carousel-item {
+  flex: 0 0 auto;
+  padding: 0 0.5rem;
+  box-sizing: border-box;
+}
+
+.dropi-carousel-item > * {
+  width: 100%;
+  box-sizing: border-box;
+  display: block;
+}
+
+.dropi-carousel-nav {
+  display: flex;
+  width: 40px;
+  height: 40px;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.2s;
+  flex-shrink: 0;
+  z-index: 1;
+  border-radius: var(--Border-5);
+  background: var(--Neutral-White, #fff);
+  box-shadow: var(--Shadow-medium);
+  border: none;
+  appearance: none;
+  padding: 0;
+}
+
+.dropi-carousel-nav:hover {
+  background: var(--Gray-Gray-50);
+}
+
+.dropi-carousel-nav:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.dropi-carousel-prev {
+  margin-right: 1rem;
+}
+
+.dropi-carousel-next {
+  margin-left: 1rem;
+}
+
+.dropi-carousel-indicators {
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+  list-style: none;
+  padding: 1rem 0 0 0;
+  margin: 0;
+}
+
+.dropi-carousel-indicators li {
+  cursor: pointer;
+}
+
+.dropi-carousel-indicators li button {
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  border: 1px solid var(--Gray-Gray-100, #eceef4);
+  background: var(--Neutral-White, #fff);
+  cursor: pointer;
+  transition: all 0.2s;
+  padding: 0;
+}
+
+.dropi-carousel-indicators li.active button {
+  background: var(--Primary-Primary-500);
+  border-color: var(--Primary-Primary-500);
+}
+
+.dropi-carousel-indicators li:hover button {
+  background: var(--Gray-Gray-200);
+}
+
+/* Vertical Orientation */
+.vertical .dropi-carousel-content {
+  flex-direction: column;
+}
+
+.vertical .dropi-carousel-items-container {
+  flex-direction: column;
+}
+
+.vertical .dropi-carousel-prev {
+  margin: 0 0 1rem 0;
+}
+
+.vertical .dropi-carousel-next {
+  margin: 1rem 0 0 0;
+}
+
+/* Responsive fixes */
+@media (max-width: 768px) {
+  .dropi-carousel-container {
+    padding: 0;
+  }
+  .dropi-carousel-item {
+    padding: 0 0.25rem;
+  }
+}