npm - @rededor/cura - Versions diffs - 1.0.0-alpha.1 → 1.0.0-alpha.3 - Mend

@rededor/cura 1.0.0-alpha.1 → 1.0.0-alpha.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (131) hide show

package/dist/collection/components/cura-toast/cura-toast.stories.js ADDED Viewed

@@ -0,0 +1,149 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import iconNames from "../../assets/icons/iconset-default-list";
+const renderCuraToast = (args) => {
+    return `<div style="width: 100%; height: 250px;">
+    <cura-toast
+    ${args.label ? `label="${args.label}"` : ''}
+    ${args.type && args.type !== 'info' ? `type="${args.type}"` : ''}
+    ${args.position && args.position !== 'top-right' ? `position="${args.position}"` : ''}
+    ${args.closeButton !== true ? `close-button="${args.closeButton}"` : ''}
+    ${args.loader !== true ? `loader="${args.loader}"` : ''}
+    ${args.icon ? `icon="${args.icon}"` : ''}
+    ${args.autoCloseDelay !== 10000 ? `auto-close-delay="${args.autoCloseDelay}"` : ''}>
+		${args.content}
+		${args.actions}
+    </cura-toast>
+    </div>`;
+};
+export default {
+    title: 'Componentes/Feedback/Toast',
+    tags: ['autodocs'],
+    render: (_a) => {
+        var args = __rest(_a, []);
+        return renderCuraToast(args);
+    },
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'Título do toast.',
+            table: {
+                category: 'Properties',
+            },
+            name: 'label',
+        },
+        type: {
+            control: { type: 'select' },
+            options: ['', 'info', 'success', 'warning', 'error'],
+            description: 'Tipos de alertas disponíveis: <b>info</b>, <b>success</b>, <b>warning</b>, <b>error</b>.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'info' },
+            },
+            name: 'type',
+        },
+        position: {
+            control: { type: 'select' },
+            options: ['', 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'],
+            description: 'Posição do Toast na tela',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'top-right' },
+            },
+            name: 'position',
+        },
+        closeButton: {
+            control: 'boolean',
+            description: 'Define se o alerta pode ser fechado.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: true },
+            },
+        },
+        loader: {
+            control: 'boolean',
+            description: 'Define se mostra ou não a barra de progresso',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: true },
+            },
+        },
+        icon: {
+            control: { type: 'select' },
+            options: ['', ...iconNames],
+            description: 'Nome do ícone personalizado.',
+            table: {
+                category: 'Icons',
+                defaultValue: { summary: 'De acordo com o tipo de alert.' },
+            },
+            name: 'icon'
+        },
+        autoCloseDelay: {
+            control: 'number',
+            description: 'Define a quantidade de tempo, em milisegundos, que o toast ficará aberto.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 10000 },
+            },
+        },
+        content: {
+            control: 'text',
+            description: 'Conteúdo do texto principal do toast. É projetado automaticamente dentro do slot padrão.',
+            defaultValue: '',
+            table: {
+                category: 'Slot',
+            },
+        },
+        actions: {
+            control: 'text',
+            description: 'Conteúdo da ações de links e botões',
+            defaultValue: '',
+            table: {
+                category: 'Slot',
+            },
+        }
+    },
+};
+export const Toast = {
+    args: {
+        label: 'Título do toast',
+        type: 'info',
+        position: 'top-right',
+        closeButton: true,
+        loader: true,
+        icon: '',
+        autoCloseDelay: 10000,
+        content: 'Texto explicativo para o toast.',
+        actions: `<div slot="actions">
+                <cura-paragraph spot-color="primary" size="xsmall" margin-block="8px 0">
+                  <a href="http://www.google.com" target="_blank" rel="noopener noreferrer">Link</a>
+                  <a href="http://www.google.com" target="_blank" rel="noopener noreferrer" style="margin-left: 8px">Link</a>
+                </cura-paragraph>
+                <div style="display: flex; justify-content: space-between; gap: 8px; margin-top: 12px;">
+                  <cura-button-outline
+                    size="small"
+                    color="primary"
+                    style="width: 100%;">
+                    Button
+                  </cura-button-outline>
+                  <cura-button
+                    size="small"
+                    color="accent"
+                    style="width: 100%;">
+                    Button
+                  </cura-button>
+                </div>
+              </div>`
+    },
+};
+//# sourceMappingURL=cura-toast.stories.js.map

package/dist/collection/components/cura-toast/cura-toast.stories.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"cura-toast.stories.js","sourceRoot":"","sources":["../../../src/components/cura-toast/cura-toast.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import iconNames from '../../assets/icons/iconset-default-list';\n\nconst renderCuraToast = (args: any) => {\n return `<div style=\"width: 100%; height: 250px;\">\n <cura-toast\n ${args.label ? `label=\"${args.label}\"` : ''}\n ${args.type && args.type !== 'info' ? `type=\"${args.type}\"` : ''}\n ${args.position && args.position !== 'top-right' ? `position=\"${args.position}\"` : ''}\n ${args.closeButton !== true ? `close-button=\"${args.closeButton}\"` : ''}\n ${args.loader !== true ? `loader=\"${args.loader}\"` : ''}\n ${args.icon ? `icon=\"${args.icon}\"` : ''}\n ${args.autoCloseDelay !== 10000 ? `auto-close-delay=\"${args.autoCloseDelay}\"` : ''}>\n\t\t${args.content}\n\t\t${args.actions}\n </cura-toast>\n </div>`;\n}\n\nexport default {\n title: 'Componentes/Feedback/Toast',\n tags: ['autodocs'],\n render: ({ ...args }) => {\n return renderCuraToast(args);\n },\n argTypes: {\n label: {\n\t\t\tcontrol: 'text',\n\t\t\tdescription: 'Título do toast.',\n\t\t\ttable: {\n\t\t\t\t\tcategory: 'Properties',\n\t\t\t},\n\t\t\tname: 'label',\n },\n type: {\n\t\t\tcontrol: { type: 'select' },\n\t\t\toptions: ['', 'info', 'success', 'warning', 'error'],\n\t\t\tdescription: 'Tipos de alertas disponíveis: <b>info</b>, <b>success</b>, <b>warning</b>, <b>error</b>.',\n\t\t\ttable: {\n\t\t\t\t\tcategory: 'Properties',\n\t\t\t\t\tdefaultValue: { summary: 'info' },\n\t\t\t},\n\t\t\tname: 'type',\n },\n\t\tposition: {\n\t\t\tcontrol: { type: 'select' },\n\t\t\toptions: ['', 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'],\n\t\t\tdescription: 'Posição do Toast na tela',\n\t\t\ttable: {\n\t\t\t\tcategory: 'Properties',\n\t\t\t\tdefaultValue: { summary: 'top-right' },\n\t\t\t},\n\t\t\tname: 'position',\n\t\t},\n closeButton: {\n control: 'boolean',\n description: 'Define se o alerta pode ser fechado.',\n table: {\n category: 'Properties',\n defaultValue: { summary: true },\n },\n },\n\t\tloader: {\n control: 'boolean',\n description: 'Define se mostra ou não a barra de progresso',\n table: {\n category: 'Properties',\n defaultValue: { summary: true },\n },\n },\n icon: {\n control: {type: 'select' },\n options: ['', ...iconNames],\n description: 'Nome do ícone personalizado.',\n table: {\n category: 'Icons',\n defaultValue: { summary: 'De acordo com o tipo de alert.' },\n },\n name: 'icon'\n },\n\t\tautoCloseDelay: {\n control: 'number',\n description: 'Define a quantidade de tempo, em milisegundos, que o toast ficará aberto.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 10000 },\n },\n },\n\t\tcontent: {\n control: 'text',\n description: 'Conteúdo do texto principal do toast. É projetado automaticamente dentro do slot padrão.',\n defaultValue: '',\n table: {\n category: 'Slot',\n },\n },\n actions: {\n control: 'text',\n description: 'Conteúdo da ações de links e botões',\n defaultValue: '',\n table: {\n category: 'Slot',\n },\n }\n },\n};\n\nexport const Toast = {\n args: {\n label: 'Título do toast',\n type: 'info',\n\t\tposition: 'top-right',\n closeButton: true,\n loader: true,\n icon: '',\n\t\tautoCloseDelay: 10000,\n content: 'Texto explicativo para o toast.',\n actions: `<div slot=\"actions\">\n <cura-paragraph spot-color=\"primary\" size=\"xsmall\" margin-block=\"8px 0\">\n <a href=\"http://www.google.com\" target=\"_blank\" rel=\"noopener noreferrer\">Link</a>\n <a href=\"http://www.google.com\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"margin-left: 8px\">Link</a>\n </cura-paragraph>\n <div style=\"display: flex; justify-content: space-between; gap: 8px; margin-top: 12px;\">\n <cura-button-outline\n size=\"small\"\n color=\"primary\"\n style=\"width: 100%;\">\n Button\n </cura-button-outline>\n <cura-button\n size=\"small\"\n color=\"accent\"\n style=\"width: 100%;\">\n Button\n </cura-button>\n </div>\n </div>`\n },\n};\n"]}

package/dist/collection/components/forms/cura-checkbox/cura-checkbox.js CHANGED Viewed

@@ -147,7 +147,7 @@ export class CuraCheckbox {
         return h("cura-icon", { class: "icon", name: iconName, size: iconSize, color: iconColor });
     }
     render() {
-        return (h(Host, { key: '9f96ab8f12502dc777ee00d02d8306ecd3ce9776' }, h("div", { key: '4a782c31e4d97df0c7cc1d60a3c83125d01d31f6', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: 'c2de03821506646ffbe84cd7106ab91c1cdeba55', class: "info" }, h("div", { key: '9a8985036acf8770541b69e35ff449572a6afb0e', class: "label-wrapper" }, h("cura-label", { key: 'a128e382aa3f25c849fbe488f3820aa9b3cdb775', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: '84e4817990f7499f047af339ce1ed9efc0ed060c', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: '33527a9347eb8971d869b7e5ec492c3a7057b123', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: 'cda5d0d9eca328fd20663f941a41325eb1ad0e29' }))), h("div", { key: '588b04e6c9c74daf8406d0cca1e50bd39d1703c9', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: '209fee01eb3051602e5a9633de4fdea59d986a53', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
+        return (h(Host, { key: 'b74eebdbcaed952fa2157c3cbb3a84ce92bb9e6c' }, h("div", { key: 'e18e4e5aa12a3e298db65399ebf002aa991100f2', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: 'fdbcf3ec4b12bf9c6d80cded5ce9d17c4f5e2a39', class: "info" }, h("div", { key: 'cbe76b43956bed00ab638b953a44d941ffb748d5', class: "label-wrapper" }, h("cura-label", { key: '259c5e5e63a6d36ed15845899eaf8c76b2b50273', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: '42d8b2777d4790bd8f83a7ddc939c6ab584b5cf0', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: 'bcafaacf64c8967f78a3e9b7ecfe6d1412517ea3', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: 'c9cc9e74cc9048ead8375a158253491e1aae4dfe' }))), h("div", { key: 'e63ba7ef796c9d46cf4729facf1be985b8174028', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: '2e7e2e302e577f26d8022fe4a0108f0e6727450f', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
     }
     static get is() { return "cura-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.css CHANGED Viewed

@@ -25,6 +25,9 @@ li {
   box-sizing: border-box;
   cursor: pointer;
 }
+li.disabled {
+  cursor: default;
+}
 li.hovered {
   background-color: var(--neutral-white);
 }
@@ -45,6 +48,6 @@ li ::slotted(div[slot=action]) {
 li.selected {
   background-color: var(--primary-lighter);
 }
-li:hover {
+li:hover:not(.disabled) {
   background-color: var(--neutral-white);
 }

package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.js CHANGED Viewed

@@ -1,13 +1,20 @@
 import { Host, h } from "@stencil/core";
 export class CuraDropdownSearchOption {
     constructor() {
-        this.handleOptionClick = () => {
-            this.selected = !this.selected;
-            this.optionSelected.emit(this.value);
-            this.updateIconColor();
+        this.handleOptionClick = (e) => {
+            if (this.selectable) {
+                this.selected = !this.selected;
+                this.optionSelected.emit(this.value);
+                this.updateIconColor();
+            }
+            else {
+                e.preventDefault();
+                e.stopImmediatePropagation();
+            }
         };
         this.value = undefined;
         this.selected = false;
+        this.selectable = true;
         this.hovered = false;
         this.styles = {};
     }
@@ -28,10 +35,11 @@ export class CuraDropdownSearchOption {
         }
     }
     render() {
-        return (h(Host, { key: 'd045683759a6be8de6ba6e1e7c3ffb3c7e64c928', style: this.styles, slot: "dropdown-search-option" }, h("ul", { key: '6fe79f291239629e214bcda850891413c307e120' }, h("li", { key: 'b62dcc68f2c14da18894fbcdd5e68d5a417ce053', onClick: this.handleOptionClick, value: this.value, class: {
-                hovered: this.hovered,
+        return (h(Host, { key: 'aa4b585c3f67a74d1371430200ad309f74015af6', style: this.styles, slot: "dropdown-search-option" }, h("ul", { key: '5413964e5e10e68e4ff2ac30f68f6e22cff6dcc1' }, h("li", { key: '3aab9b7d5e3904e57a7310addc4b15a51453d31d', onClick: (e) => this.handleOptionClick(e), value: this.value, class: {
+                hovered: this.selectable ? this.hovered : false,
                 selected: this.selected,
-            } }, h("slot", { key: '8883c51c5789d57b8a6b4567f5faeaacd5d52bff', name: "image" }), h("cura-heading", { key: 'f701d19b2e707a78be62d3df5a768bf83959ecaa', size: "xsmall", lineHeight: "16px", marginBlock: "0px", weight: "bold", color: "neutral-black" }, h("slot", { key: 'ffe7d83f45a1757df017061a71b950cc50ce52d5' })), h("slot", { key: '4d0f901f5b5e1b7c8ebe5e1148118a2645c6eddd', name: "action" })))));
+                disabled: !this.selectable
+            } }, h("slot", { key: '030c06f2e9bcfd0169b8d94c8976cd4b1e25b834', name: "image" }), h("cura-heading", { key: 'f5bd16d815a853a41d98aac09517359a5e1b432d', size: "xsmall", lineHeight: "16px", marginBlock: "0px", weight: "bold", color: "neutral-black" }, h("slot", { key: '878d1db64dc98c57530adf947cbc216ac1ce1be0' })), h("slot", { key: '81c92fcb864bc8f2324cc353574123705fc386a8', name: "action" })))));
     }
     static get is() { return "cura-dropdown-search-option"; }
     static get encapsulation() { return "shadow"; }
@@ -82,6 +90,24 @@ export class CuraDropdownSearchOption {
                 "reflect": true,
                 "defaultValue": "false"
             },
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates if the dropdown search is selectable."
+                },
+                "attribute": "selectable",
+                "reflect": true,
+                "defaultValue": "true"
+            },
             "hovered": {
                 "type": "boolean",
                 "mutable": true,

package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cura-dropdown-search-option.js","sourceRoot":"","sources":["../../../../../src/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOrG,MAAM,OAAO,wBAAwB;;~~QAmC3B~~,sBAAiB,GAAG,~~GAAG~~,EAAE;~~YAC/B~~,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;~~YAC~~/B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;~~YACrC~~,IAAI,CAAC,eAAe,EAAE,CAAC;~~QACzB~~,CAAC,CAAC;;~~wBA9B0D~~,KAAK;~~uBAKN~~,KAAK;sBAE9C,EAAE;;IAWpB,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;QACvD,IAAI,CAAC,MAAM,CAAC,qBAAqB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAC;QAC/F,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;QACvF,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;QACvF,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,iBAAiB,EAAE,EAAE,CAAC,CAAC;IACjG,CAAC;~~IAQD~~,gBAAgB;QACd,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAGO,eAAe;QACrB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;QAC/E,IAAI,WAAW,EAAE,CAAC;YAChB,WAAW,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;QAChF,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAC,wBAAwB;YACrD;gBACE,2DACE,OAAO,EAAE,IAAI,CAAC,iBAAiB,~~EAC/B~~,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE;wBACL,OAAO,EAAE,IAAI,CAAC,OAAO;~~wBACrB~~,QAAQ,EAAE,IAAI,CAAC,QAAQ;~~qBACxB~~;oBAED,6DAAM,IAAI,EAAC,OAAO,GAAQ;oBAC1B,qEAAc,IAAI,EAAC,QAAQ,EAAC,UAAU,EAAC,MAAM,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe;wBACjG,8DAAa,CACA;oBACf,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACxB,CACF,CACA,CACR,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'cura-dropdown-search-option',\n styleUrl: 'cura-dropdown-search-option.scss',\n shadow: true,\n})\nexport class CuraDropdownSearchOption {\n /*\n The value of the dropdown search option.\n /\n @Prop({ reflect: true }) value: string;\n\n /\n Indicates if the dropdown search option is selected.\n /\n @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n\n /\n Indicates if the dropdown search option is hovered.\n /\n @Prop({ reflect: true, mutable: true }) hovered: boolean = false;\n\n @State() styles = {};\n\n /\n Event emitted when the option is selected.\n */\n @Event() optionSelected: EventEmitter<string>;\n\n @Element() hostElement: HTMLElement;\n\n weights;\n\n connectedCallback() {\n this.weights = window.CuraAPI.theme.fonts.getWeights();\n this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor(`neutral-purewhite`);\n this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor(`neutral-light`);\n this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n this.styles['--primary-lighter'] = window.CuraAPI.theme.colors.getColor(`primary-lighter`, 50);\n }\n\n private handleOptionClick = () => {\n this.selected = !this.selected;\n this.optionSelected.emit(this.value);\n this.updateIconColor();\n };\n\n componentDidLoad() {\n this.updateIconColor();\n }\n\n @Watch('selected')\n private updateIconColor() {\n const iconElement = this.hostElement.querySelector('[slot=\"image\"] cura-icon');\n if (iconElement) {\n iconElement.setAttribute('color', this.selected ? 'primary' : 'neutral-dark');\n }\n }\n\n render() {\n return (\n <Host style={this.styles} slot=\"dropdown-search-option\">\n <ul>\n <li\n onClick={this.handleOptionClick}\n value={this.value}\n class={{\n hovered: this.hovered,\n selected: this.selected,\n }}\n >\n <slot name=\"image\"></slot>\n <cura-heading size=\"xsmall\" lineHeight=\"16px\" marginBlock=\"0px\" weight=\"bold\" color=\"neutral-black\">\n <slot></slot>\n </cura-heading>\n <slot name=\"action\"></slot>\n </li>\n </ul>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"cura-dropdown-search-option.js","sourceRoot":"","sources":["../../../../../src/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'cura-dropdown-search-option',\n styleUrl: 'cura-dropdown-search-option.scss',\n shadow: true,\n})\nexport class CuraDropdownSearchOption {\n /*\n The value of the dropdown search option.\n /\n @Prop({ reflect: true }) value: string;\n\n /\n Indicates if the dropdown search option is selected.\n /\n @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n\n /\n Indicates if the dropdown search is selectable.\n /\n @Prop({ reflect: true }) selectable: boolean = true;\n\n /\n Indicates if the dropdown search option is hovered.\n /\n @Prop({ reflect: true, mutable: true }) hovered: boolean = false;\n\n @State() styles = {};\n\n /\n Event emitted when the option is selected.\n */\n @Event() optionSelected: EventEmitter<string>;\n\n @Element() hostElement: HTMLElement;\n\n weights;\n\n connectedCallback() {\n this.weights = window.CuraAPI.theme.fonts.getWeights();\n this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor(`neutral-purewhite`);\n this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor(`neutral-light`);\n this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n this.styles['--primary-lighter'] = window.CuraAPI.theme.colors.getColor(`primary-lighter`, 50);\n }\n\n private handleOptionClick = (e: Event) => {\n if (this.selectable) {\n this.selected = !this.selected;\n this.optionSelected.emit(this.value);\n this.updateIconColor();\n } else {\n e.preventDefault();\n e.stopImmediatePropagation();\n }\n };\n\n componentDidLoad() {\n this.updateIconColor();\n }\n\n @Watch('selected')\n private updateIconColor() {\n const iconElement = this.hostElement.querySelector('[slot=\"image\"] cura-icon');\n if (iconElement) {\n iconElement.setAttribute('color', this.selected ? 'primary' : 'neutral-dark');\n }\n }\n\n render() {\n return (\n <Host style={this.styles} slot=\"dropdown-search-option\">\n <ul>\n <li\n onClick={(e) => this.handleOptionClick(e)}\n value={this.value}\n class={{\n hovered: this.selectable ? this.hovered : false,\n selected: this.selected,\n disabled: !this.selectable\n }}\n >\n <slot name=\"image\"></slot>\n <cura-heading size=\"xsmall\" lineHeight=\"16px\" marginBlock=\"0px\" weight=\"bold\" color=\"neutral-black\">\n <slot></slot>\n </cura-heading>\n <slot name=\"action\"></slot>\n </li>\n </ul>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.stories.js CHANGED Viewed

@@ -1,5 +1,5 @@
 const renderCuraDropdownSearchOption = (args) => {
-    return `<cura-dropdown-search-option value="${args.value}">
+    return `<cura-dropdown-search-option value="${args.value}"${args.selectable === false ? ` selectable="false"` : ''}>
     ${args.image ? `<div slot="image">${args.image}</div>` : ''}
     ${args.content}
     ${args.action ? `<div slot="action">
@@ -22,6 +22,14 @@ export default {
                 category: 'Properties',
             },
         },
+        selectable: {
+            control: 'boolean',
+            description: 'Define se a opção pode ou não ser selecionada.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: true },
+            },
+        },
         image: {
             control: 'text',
             description: 'Conteúdo do slot `image`.',
@@ -48,6 +56,7 @@ export default {
 export const DropdownSearchOption = {
     args: {
         value: 'Clinica Médica Geral',
+        selectable: true,
         image: '<cura-icon size="24" name="medical"></cura-icon>',
         content: 'Clinica Médica Geral',
         action: `<cura-button-transparent font-color="dark" color='primary' icon-name='delete' size='small' icon-only={true}></cura-button-transparent>`,

package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cura-dropdown-search-option.stories.js","sourceRoot":"","sources":["../../../../../src/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.stories.tsx"],"names":[],"mappings":"AAAA,MAAM,8BAA8B,GAAG,CAAC,IAAS,EAAE,EAAE;IACnD,OAAO,uCAAuC,IAAI,CAAC,KAAK;~~MACpD~~,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,qBAAqB,IAAI,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE;MACzD,IAAI,CAAC,OAAO;MACZ,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;QACZ,IAAI,CAAC,MAAM;WACR,CAAC,CAAC,CAAC,EAAE;;GAEb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe;IACb,KAAK,EAAE,iDAAiD;IACxD,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,MAAM,EAAE,IAAI,CAAC,EAAE;QACb,OAAO,8BAA8B,CAAC,IAAI,CAAC,CAAC;IAC9C,CAAC;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,iBAAiB;YAC9B,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;SACF;~~QAGD~~,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,2BAA2B;YACxC,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;aAClB;SACF;QACD,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,uDAAuD;YACpE,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;aAClB;SACF;QACD,MAAM,EAAE;YACN,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,4BAA4B;YACzC,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;aAClB;SACF;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,IAAI,EAAE;QACJ,KAAK,EAAE,sBAAsB;QAC7B,KAAK,EAAE,kDAAkD;QACzD,OAAO,EAAE,sBAAsB;QAC/B,MAAM,EAAE,wIAAwI;KACjJ;CACF,CAAC","sourcesContent":["const renderCuraDropdownSearchOption = (args: any) => {\n return `<cura-dropdown-search-option value=\"${args.value}\">\n ${args.image ? `<div slot=\"image\">${args.image}</div>` : ''}\n ${args.content}\n ${args.action ? `<div slot=\"action\">\n ${args.action}\n </div>` : ''}\n</cura-dropdown-search-option>\n `;\n};\n\nexport default {\n title: 'Componentes/DropdownSearch/DropdownSearchOption',\n tags: ['autodocs'],\n\n render: args => {\n return renderCuraDropdownSearchOption(args);\n },\n argTypes: {\n value: {\n control: 'text',\n description: 'Valor da opção.',\n table: {\n category: 'Properties',\n },\n },\n\n\n image: {\n control: 'text',\n description: 'Conteúdo do slot `image`.',\n table: {\n category: 'Slots',\n },\n },\n content: {\n control: 'text',\n description: 'Conteúdo do slot. É englobado por um `<cura-heading>`',\n table: {\n category: 'Slots',\n },\n },\n action: {\n control: 'text',\n description: 'Conteúdo do slot `action`.',\n table: {\n category: 'Slots',\n },\n },\n },\n};\n\nexport const DropdownSearchOption = {\n args: {\n value: 'Clinica Médica Geral',\n image: '<cura-icon size=\"24\" name=\"medical\"></cura-icon>',\n content: 'Clinica Médica Geral',\n action: `<cura-button-transparent font-color=\"dark\" color='primary' icon-name='delete' size='small' icon-only={true}></cura-button-transparent>`,\n },\n};\n"]}
1	+ {"version":3,"file":"cura-dropdown-search-option.stories.js","sourceRoot":"","sources":["../../../../../src/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.stories.tsx"],"names":[],"mappings":"AAAA,MAAM,8BAA8B,GAAG,CAAC,IAAS,EAAE,EAAE;IACnD,OAAO,uCAAuC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,KAAK,KAAK,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE;MAC9G,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,qBAAqB,IAAI,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE;MACzD,IAAI,CAAC,OAAO;MACZ,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;QACZ,IAAI,CAAC,MAAM;WACR,CAAC,CAAC,CAAC,EAAE;;GAEb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe;IACb,KAAK,EAAE,iDAAiD;IACxD,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,MAAM,EAAE,IAAI,CAAC,EAAE;QACb,OAAO,8BAA8B,CAAC,IAAI,CAAC,CAAC;IAC9C,CAAC;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,iBAAiB;YAC9B,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;SACF;QACD,UAAU,EAAE;YACV,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,gDAAgD;YAC7D,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;aAChC;SACF;QACD,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,2BAA2B;YACxC,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;aAClB;SACF;QACD,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,uDAAuD;YACpE,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;aAClB;SACF;QACD,MAAM,EAAE;YACN,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,4BAA4B;YACzC,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;aAClB;SACF;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,IAAI,EAAE;QACJ,KAAK,EAAE,sBAAsB;QAC7B,UAAU,EAAE,IAAI;QAChB,KAAK,EAAE,kDAAkD;QACzD,OAAO,EAAE,sBAAsB;QAC/B,MAAM,EAAE,wIAAwI;KACjJ;CACF,CAAC","sourcesContent":["const renderCuraDropdownSearchOption = (args: any) => {\n return `<cura-dropdown-search-option value=\"${args.value}\"${args.selectable === false ? ` selectable=\"false\"` : ''}>\n ${args.image ? `<div slot=\"image\">${args.image}</div>` : ''}\n ${args.content}\n ${args.action ? `<div slot=\"action\">\n ${args.action}\n </div>` : ''}\n</cura-dropdown-search-option>\n `;\n};\n\nexport default {\n title: 'Componentes/DropdownSearch/DropdownSearchOption',\n tags: ['autodocs'],\n\n render: args => {\n return renderCuraDropdownSearchOption(args);\n },\n argTypes: {\n value: {\n control: 'text',\n description: 'Valor da opção.',\n table: {\n category: 'Properties',\n },\n },\n selectable: {\n control: 'boolean',\n description: 'Define se a opção pode ou não ser selecionada.',\n table: {\n category: 'Properties',\n defaultValue: { summary: true },\n },\n },\n image: {\n control: 'text',\n description: 'Conteúdo do slot `image`.',\n table: {\n category: 'Slots',\n },\n },\n content: {\n control: 'text',\n description: 'Conteúdo do slot. É englobado por um `<cura-heading>`',\n table: {\n category: 'Slots',\n },\n },\n action: {\n control: 'text',\n description: 'Conteúdo do slot `action`.',\n table: {\n category: 'Slots',\n },\n },\n },\n};\n\nexport const DropdownSearchOption = {\n args: {\n value: 'Clinica Médica Geral',\n selectable: true,\n image: '<cura-icon size=\"24\" name=\"medical\"></cura-icon>',\n content: 'Clinica Médica Geral',\n action: `<cura-button-transparent font-color=\"dark\" color='primary' icon-name='delete' size='small' icon-only={true}></cura-button-transparent>`,\n },\n};\n"]}

package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search-option-title/cura-dropdown-search-option-title.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class CuraDropdownSearchOptionTitle {
     render() {
-        return (h(Host, { key: '6e2312e0bf01db89fe6c85fbe525c02ed2dff7ec', slot: "dropdown-search-option" }, h("cura-label", { key: '551017409617799c76a6119b4e61596a4188f5ad', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, h("slot", { key: '4e0b3b588dec8603df342358840bc0a2d8ab3c4c' }))));
+        return (h(Host, { key: 'd27a47a6d61497f488c449188b2c6036529350cc', slot: "dropdown-search-option" }, h("cura-label", { key: 'ba63e9fce7392087551ccc7fb46a83cffa6785c9', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, h("slot", { key: 'f14d41a3ed995f6f9a946e7d96e5c0b0208310ad' }))));
     }
     static get is() { return "cura-dropdown-search-option-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search.css CHANGED Viewed

@@ -73,7 +73,7 @@
   position: absolute;
   top: calc(100% - 8px);
   width: 100%;
-  max-height: 630px;
+  max-height: var(--dropdown-max-height);
   padding: 12px 12px;
   margin: 0;
   box-sizing: border-box;
@@ -108,7 +108,7 @@
   border-bottom: 2px solid var(--error-dark);
 }
 .dropdown-mobile {
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   right: 0;

package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search.js CHANGED Viewed

@@ -11,7 +11,7 @@ export class CuraDropdownSearch {
             const input = event.target;
             this.value = input.value;
             this.onValueChange(this.value);
-            this.valueChanged.emit(this.value);
+            // this.valueChanged.emit(this.value);
         };
         this.handleKeyDown = (event) => {
             if (event.key === 'ArrowDown') {
@@ -49,6 +49,7 @@ export class CuraDropdownSearch {
         this.placeholder = '';
         this.label = '';
         this.iconName = 'search';
+        this.dropdownMaxHeight = '630px';
         this.overlayVisible = false;
         this.isDropdownOpen = false;
         this.styles = {};
@@ -75,12 +76,12 @@ export class CuraDropdownSearch {
     }
     onValueChange(newValue) {
         this.updateSelectedOption(newValue);
+        this.valueChanged.emit(this.value);
     }
     componentWillLoad() {
         this.updateSelectedOption(this.value);
     }
     componentDidRender() {
-        console.log(this.options);
         if (this.isDropdownOpen && this.isMobile) {
             this.showOverlay();
         }
@@ -128,12 +129,14 @@ export class CuraDropdownSearch {
     }
     onSelectedOption(index) {
         const selectedOption = this.options[index];
-        const selectedValue = selectedOption.getAttribute('value') || selectedOption.textContent;
-        this.value = selectedValue || '';
-        this.updateSelectedOption(this.value);
-        this.isDropdownOpen = false;
-        this.isOnBlurInput = true;
-        this.removeOverlay();
+        if (selectedOption.selectable) {
+            const selectedValue = selectedOption.getAttribute('value') || selectedOption.textContent;
+            this.value = selectedValue || '';
+            this.updateSelectedOption(this.value);
+            this.isDropdownOpen = false;
+            this.isOnBlurInput = true;
+            this.removeOverlay();
+        }
     }
     moveHighlight(direction) {
         const visibleOptions = this.options;
@@ -188,11 +191,16 @@ export class CuraDropdownSearch {
             'visible': this.options.length && this.isDropdownOpen ? true : false
         };
     }
+    hostCSSProperties() {
+        return {
+            '--dropdown-max-height': this.dropdownMaxHeight,
+        };
+    }
     render() {
         const isMobileDropdown = this.isMobile && this.isDropdownOpen;
-        return (h(Host, { key: 'a1bac8740f5fb4b1504e3818f893ae9939366a2f', style: this.styles, class: "dropdown-overlay" }, h("div", { key: '972cfac99c258a01a5ceacec4ca325e1445b4194', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, h("div", { key: '7433e2335ad6639d608ca23c3b25e2ecfaf4a7d2', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (h("cura-button-transparent", { key: 'f9ca9af935b0c752ce27f65bfe34b9679dbd079b', fontColor: "dark", onClick: () => (this.isMobile = false), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), h("cura-input-text", { key: 'b75f08b2c5d6e1e68bea7e8c162bf0481eec4218', label: this.label, part: "cura-input-field", mode: isMobileDropdown ? 'transparent' : 'default', required: this.required, hideErrorIcon: this.status === 'error', iconName: this.iconName || 'search', value: this.value, status: this.status, onValueChange: e => this.onValueChange(e.target.value), onInput: e => this.handleInputChange(e), onFocus: () => (this.isDropdownOpen = true), onClick: () => (window.innerWidth < 768 ? (this.isMobile = true) : null), onBlur: () => {
+        return (h(Host, { key: '993da099b8256bfb9ee7b3ebabd4860e9019d097', style: this.hostCSSProperties(), class: "dropdown-overlay" }, h("div", { key: '883246cc7a1020ba83a4eda4fb1f6483519314cf', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, h("div", { key: '5189508f35c5fc62883820a8c378bce8a3e67b7d', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (h("cura-button-transparent", { key: 'cbedd224556935a715380168c1be22d3127e920c', fontColor: "dark", onClick: () => (this.isMobile = false), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), h("cura-input-text", { key: 'a8dd2fe42d5bc64683ba56e7bad6b6d08ce92fca', label: this.label, part: "cura-input-field", mode: isMobileDropdown ? 'transparent' : 'default', required: this.required, hideErrorIcon: this.status === 'error', iconName: this.iconName || 'search', value: this.value, status: this.status, onValueChange: e => this.onValueChange(e.target.value), onInput: e => this.handleInputChange(e), onFocus: () => (this.isDropdownOpen = true), onClick: () => (window.innerWidth < 768 ? (this.isMobile = true) : null), onBlur: () => {
                 this.handleOnBlur();
-            }, placeholder: this.placeholder, size: "large", onKeyDown: this.handleKeyDown }, h("slot", { key: 'c46ff9544d7cacd7a28291b0dcee51d1e9c4f7c7', name: "helperText" }))), h("div", { key: 'c6cbeffbcc00e83c4bbd51947640ae9602097563', id: "dropdown-search-list", class: this.getDropdownClasses() }, h("slot", { key: '735d3178c6bc3879ed96ee90e3147f083f8ac634', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
+            }, placeholder: this.placeholder, size: "large", onKeyDown: this.handleKeyDown }, h("slot", { key: '9991e5cfd78b73b9b2da92ae217fad3ae109a2c9', name: "helperText" }))), h("div", { key: '664abccc90e95b83aa3192282453d199ae2a0c5f', id: "dropdown-search-list", class: this.getDropdownClasses() }, h("slot", { key: '2eca99c0ec684020000edc46ebbc5f8097e78200', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
     }
     static get is() { return "cura-dropdown-search"; }
     static get encapsulation() { return "shadow"; }
@@ -350,6 +358,24 @@ export class CuraDropdownSearch {
                 "attribute": "icon-name",
                 "reflect": true,
                 "defaultValue": "'search'"
+            },
+            "dropdownMaxHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "CSS max-height property for dropdown item.\nDefault to 630px"
+                },
+                "attribute": "dropdown-max-height",
+                "reflect": true,
+                "defaultValue": "'630px'"
             }
         };
     }

package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cura-dropdown-search.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-dropdown-search/cura-dropdown-search.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, State, Event, EventEmitter, Element, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'cura-dropdown-search',\n styleUrl: 'cura-dropdown-search.scss',\n shadow: true,\n})\nexport class CuraDropdownSearch {\n /*\n Define the status of the dropdown search.\n /\n @Prop({ reflect: true }) status: 'error' \| 'default' = 'default';\n\n /\n The name of the dropdown search component.\n /\n @Prop({ reflect: true }) name: string;\n\n /\n Indicates if the dropdown search is required.\n /\n @Prop({ reflect: true, mutable: true }) required: boolean = false;\n\n /\n Indicates if the dropdown search is selected.\n /\n @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n\n /\n The value of the dropdown search.\n /\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n /\n The placeholder text for the dropdown search.\n /\n @Prop({ reflect: true, mutable: true }) placeholder: string = '';\n\n /\n The label for the dropdown search.\n /\n @Prop({ reflect: true, mutable: true }) label: string = '';\n\n /\n Custom icon name. Default: search.\n /\n @Prop({reflect: true}) iconName = 'search';\n\n /\n Reference to the host element.\n /\n @Element() host: HTMLElement;\n\n /\n Indicates if the overlay is visible.\n /\n @State() overlayVisible: boolean = false;\n\n /\n Event emitted when the value changes.\n /\n @Event() valueChanged: EventEmitter<string>;\n\n /\n Indicates if the dropdown is open.\n /\n @State() isDropdownOpen: boolean = false;\n\n /\n Styles for the component.\n\n /\n @State() styles = {};\n\n /\n Indicates if the component is being viewed on a mobile device.\n /\n @State() isMobile: boolean = window.innerWidth < 768;\n\n /\n The mode of the dropdown search.\n /\n @State() mode: 'default' \| 'transparent' = 'default';\n\n @Event() onselect: EventEmitter;\n\n @State() inputTextRef!: HTMLCuraInputTextElement;\n\n /\n Indicates if the input is on blur.\n /\n @State() isOnBlurInput: boolean = true;\n\n /\n The index of the currently hovered option.\n /\n @State() hoveredIndex: number = -1;\n\n /\n The options for the dropdown search.\n * @type {HTMLCuraDropdownSearchOptionElement[]}\n */\n\n weights;\n\n private overlayElement: HTMLDivElement \| null = null;\n\n @State() options: HTMLCuraDropdownSearchOptionElement[] = [];\n\n connectedCallback() {\n this.weights = window.CuraAPI.theme.fonts.getWeights();\n this.styles['--info-base'] = window.CuraAPI.theme.colors.getColor('info-base');\n this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor('neutral-purewhite');\n this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor('neutral-light');\n this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor('neutral-dark');\n this.styles['--neutral-black-shadow'] = window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16);\n this.styles['--error-dark'] = window.CuraAPI.theme.colors.getColor('error-dark');\n this.styles['--error-lighter'] = window.CuraAPI.theme.colors.getColor('error-lighter');\n this.styles['--breakpoints'] = window.CuraAPI.theme.breakpoints.get();\n this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n this.styles['--font-weight-medium'] = this.weights.medium;\n }\n\n @Watch('value')\n onValueChange(newValue: string) {\n this.updateSelectedOption(newValue);\n }\n\n componentWillLoad() {\n this.updateSelectedOption(this.value);\n }\n\n componentDidRender() {\n console.log(this.options);\n if (this.isDropdownOpen && this.isMobile) {\n this.showOverlay();\n } else {\n this.removeOverlay();\n }\n }\n componentDidLoad() {\n window.addEventListener('resize', this.handleResize);\n }\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.handleResize);\n }\n\n private showOverlay() {\n if (!this.overlayElement) {\n this.overlayElement = document.createElement('div');\n this.overlayElement.className = 'dropdown-overlay';\n this.overlayElement.style.position = 'fixed';\n this.overlayElement.style.top = '0';\n this.overlayElement.style.left = '0';\n this.overlayElement.style.width = '100%';\n this.overlayElement.style.height = '100%';\n this.overlayElement.style.zIndex = '9999';\n this.overlayElement.style.backgroundColor = 'white';\n document.body.appendChild(this.overlayElement);\n }\n }\n\n private removeOverlay() {\n if (this.overlayElement && this.overlayElement.parentNode === document.body) {\n document.body.removeChild(this.overlayElement);\n this.overlayElement = null;\n }\n }\n\n private handleSlotChange = () => {\n this.options = Array.from(this.host.querySelectorAll('cura-dropdown-search-option'));\n this.addClickListenersToOptions();\n this.updateHoveredIndex();\n };\n\n private addClickListenersToOptions() {\n this.options.forEach((option, index) => {\n option.addEventListener('click', () => this.onSelectedOption(index));\n });\n }\n\n private updateSelectedOption(value: string) {\n const selectedOptionIndex = this.options.findIndex(option => option.getAttribute('value') === value);\n this.hoveredIndex = selectedOptionIndex;\n this.updateOptionAttribute('hovered', this.hoveredIndex);\n this.updateOptionAttribute('selected', this.hoveredIndex);\n\n this.scrollIntoView();\n }\n\n private handleInputChange = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.value = input.value;\n this.onValueChange(this.value);\n this.valueChanged.emit(this.value);\n };\n\n private onSelectedOption(index: number) {\n const selectedOption = this.options[index];\n const selectedValue = selectedOption.getAttribute('value') \|\| selectedOption.textContent;\n\n this.value = selectedValue \|\| '';\n this.updateSelectedOption(this.value);\n\n this.isDropdownOpen = false;\n this.isOnBlurInput = true;\n this.removeOverlay();\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n this.moveHighlight(1);\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n this.moveHighlight(-1);\n } else if (event.key === 'Enter') {\n event.preventDefault();\n if (this.hoveredIndex > -1) {\n this.handleOnBlur();\n this.onSelectedOption(this.hoveredIndex);\n }\n }\n };\n\n private moveHighlight(direction: number) {\n const visibleOptions = this.options;\n const newIndex = (this.hoveredIndex + direction + visibleOptions.length) % visibleOptions.length;\n this.hoveredIndex = newIndex;\n this.updateOptionAttribute('hovered', this.hoveredIndex);\n this.scrollIntoView();\n }\n\n private updateOptionAttribute(attribute: string, indexToUpdate: number) {\n this.options.forEach((option, index) => {\n (option as any)[attribute] = index === indexToUpdate;\n });\n }\n\n private updateHoveredIndex() {\n const visibleOptions = this.options;\n const currentValue = this.value;\n this.hoveredIndex = visibleOptions.findIndex(option => option.getAttribute('value') === currentValue);\n }\n\n private scrollIntoView() {\n const container = this.host.shadowRoot?.querySelector('.dropdown-search-list');\n const hoveredOption = this.options[this.hoveredIndex];\n\n if (container && hoveredOption) {\n const optionRect = hoveredOption.getBoundingClientRect();\n const containerRect = container.getBoundingClientRect();\n\n if (optionRect.bottom > containerRect.bottom) {\n container.scrollTop += optionRect.bottom - containerRect.bottom;\n }\n\n if (optionRect.top < containerRect.top) {\n container.scrollTop -= containerRect.top - optionRect.top;\n }\n }\n }\n\n private handleResize = () => {\n this.isMobile = window.innerWidth < 768;\n if (this.isDropdownOpen) {\n if (this.isMobile) {\n this.showOverlay();\n } else {\n this.removeOverlay();\n }\n }\n };\n\n handleOnBlur() {\n if (this.isOnBlurInput === true) {\n setTimeout(() => {\n this.isDropdownOpen = false;\n this.removeOverlay();\n }, 200);\n }\n }\n getClasses() {\n return {\n 'dropdown-input-search': true,\n 'dropdown-open': this.isDropdownOpen,\n [this.status]: true,\n };\n }\n\n getDropdownClasses() {\n return {\n 'dropdown-search-list': true,\n 'visible': this.options.length && this.isDropdownOpen ? true : false\n };\n }\n\n render() {\n const isMobileDropdown = this.isMobile && this.isDropdownOpen;\n return (\n <Host style={this.styles} class=\"dropdown-overlay\">\n <div class={`dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`} style={this.styles}>\n <div class={this.getClasses()}>\n {this.isMobile && this.isDropdownOpen && (\n <cura-button-transparent\n fontColor=\"dark\"\n onClick={() => (this.isMobile = false)}\n iconName=\"arrowLeft\"\n size=\"medium\"\n iconOnly\n color=\"primary\"\n ></cura-button-transparent>\n )}\n <cura-input-text\n label={this.label}\n part=\"cura-input-field\"\n mode={isMobileDropdown ? 'transparent' : 'default'}\n required={this.required}\n hideErrorIcon={this.status === 'error'}\n iconName={this.iconName \|\| 'search'}\n value={this.value}\n status={this.status}\n onValueChange={e => this.onValueChange(e.target.value as string)}\n onInput={e => this.handleInputChange(e)}\n onFocus={() => (this.isDropdownOpen = true)}\n onClick={() => (window.innerWidth < 768 ? (this.isMobile = true) : null)}\n onBlur={() => {\n this.handleOnBlur();\n }}\n placeholder={this.placeholder}\n size=\"large\"\n onKeyDown={this.handleKeyDown}\n >\n <slot name=\"helperText\"></slot>\n </cura-input-text>\n </div>\n <div id=\"dropdown-search-list\" class={this.getDropdownClasses()}>\n <slot name=\"dropdown-search-option\" onSlotchange={this.handleSlotChange}></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"cura-dropdown-search.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-dropdown-search/cura-dropdown-search.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, State, Event, EventEmitter, Element, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'cura-dropdown-search',\n styleUrl: 'cura-dropdown-search.scss',\n shadow: true,\n})\nexport class CuraDropdownSearch {\n /*\n Define the status of the dropdown search.\n /\n @Prop({ reflect: true }) status: 'error' \| 'default' = 'default';\n\n /\n The name of the dropdown search component.\n /\n @Prop({ reflect: true }) name: string;\n\n /\n Indicates if the dropdown search is required.\n /\n @Prop({ reflect: true, mutable: true }) required: boolean = false;\n\n /\n Indicates if the dropdown search is selected.\n /\n @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n\n /\n The value of the dropdown search.\n /\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n /\n The placeholder text for the dropdown search.\n /\n @Prop({ reflect: true, mutable: true }) placeholder: string = '';\n\n /\n The label for the dropdown search.\n /\n @Prop({ reflect: true, mutable: true }) label: string = '';\n\n /\n Custom icon name. Default: search.\n /\n @Prop({reflect: true}) iconName = 'search';\n\n /\n CSS max-height property for dropdown item.\n * Default to 630px\n /\n @Prop({reflect: true}) dropdownMaxHeight = '630px';\n\n /\n Reference to the host element.\n /\n @Element() host: HTMLElement;\n\n /\n Indicates if the overlay is visible.\n /\n @State() overlayVisible: boolean = false;\n\n /\n Event emitted when the value changes.\n /\n @Event() valueChanged: EventEmitter<string>;\n\n /\n Indicates if the dropdown is open.\n /\n @State() isDropdownOpen: boolean = false;\n\n /\n Styles for the component.\n\n /\n @State() styles = {};\n\n /\n Indicates if the component is being viewed on a mobile device.\n /\n @State() isMobile: boolean = window.innerWidth < 768;\n\n /\n The mode of the dropdown search.\n /\n @State() mode: 'default' \| 'transparent' = 'default';\n\n @Event() onselect: EventEmitter;\n\n @State() inputTextRef!: HTMLCuraInputTextElement;\n\n /\n Indicates if the input is on blur.\n /\n @State() isOnBlurInput: boolean = true;\n\n /\n The index of the currently hovered option.\n /\n @State() hoveredIndex: number = -1;\n\n /\n The options for the dropdown search.\n * @type {HTMLCuraDropdownSearchOptionElement[]}\n */\n\n weights;\n\n private overlayElement: HTMLDivElement \| null = null;\n\n @State() options: HTMLCuraDropdownSearchOptionElement[] = [];\n\n connectedCallback() {\n this.weights = window.CuraAPI.theme.fonts.getWeights();\n this.styles['--info-base'] = window.CuraAPI.theme.colors.getColor('info-base');\n this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor('neutral-purewhite');\n this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor('neutral-light');\n this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor('neutral-dark');\n this.styles['--neutral-black-shadow'] = window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16);\n this.styles['--error-dark'] = window.CuraAPI.theme.colors.getColor('error-dark');\n this.styles['--error-lighter'] = window.CuraAPI.theme.colors.getColor('error-lighter');\n this.styles['--breakpoints'] = window.CuraAPI.theme.breakpoints.get();\n this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n this.styles['--font-weight-medium'] = this.weights.medium;\n }\n\n @Watch('value')\n onValueChange(newValue: string) {\n this.updateSelectedOption(newValue);\n this.valueChanged.emit(this.value);\n }\n\n componentWillLoad() {\n this.updateSelectedOption(this.value);\n }\n\n componentDidRender() {\n if (this.isDropdownOpen && this.isMobile) {\n this.showOverlay();\n } else {\n this.removeOverlay();\n }\n }\n componentDidLoad() {\n window.addEventListener('resize', this.handleResize);\n }\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.handleResize);\n }\n\n private showOverlay() {\n if (!this.overlayElement) {\n this.overlayElement = document.createElement('div');\n this.overlayElement.className = 'dropdown-overlay';\n this.overlayElement.style.position = 'fixed';\n this.overlayElement.style.top = '0';\n this.overlayElement.style.left = '0';\n this.overlayElement.style.width = '100%';\n this.overlayElement.style.height = '100%';\n this.overlayElement.style.zIndex = '9999';\n this.overlayElement.style.backgroundColor = 'white';\n document.body.appendChild(this.overlayElement);\n }\n }\n\n private removeOverlay() {\n if (this.overlayElement && this.overlayElement.parentNode === document.body) {\n document.body.removeChild(this.overlayElement);\n this.overlayElement = null;\n }\n }\n\n private handleSlotChange = () => {\n this.options = Array.from(this.host.querySelectorAll('cura-dropdown-search-option'));\n this.addClickListenersToOptions();\n this.updateHoveredIndex();\n };\n\n private addClickListenersToOptions() {\n this.options.forEach((option, index) => {\n option.addEventListener('click', () => this.onSelectedOption(index));\n });\n }\n\n private updateSelectedOption(value: string) {\n const selectedOptionIndex = this.options.findIndex(option => option.getAttribute('value') === value);\n this.hoveredIndex = selectedOptionIndex;\n this.updateOptionAttribute('hovered', this.hoveredIndex);\n this.updateOptionAttribute('selected', this.hoveredIndex);\n\n this.scrollIntoView();\n }\n\n private handleInputChange = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.value = input.value;\n this.onValueChange(this.value);\n // this.valueChanged.emit(this.value);\n };\n\n private onSelectedOption(index: number) {\n const selectedOption = this.options[index];\n if(selectedOption.selectable) {\n const selectedValue = selectedOption.getAttribute('value') \|\| selectedOption.textContent;\n\n this.value = selectedValue \|\| '';\n this.updateSelectedOption(this.value);\n\n this.isDropdownOpen = false;\n this.isOnBlurInput = true;\n this.removeOverlay();\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n this.moveHighlight(1);\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n this.moveHighlight(-1);\n } else if (event.key === 'Enter') {\n event.preventDefault();\n if (this.hoveredIndex > -1) {\n this.handleOnBlur();\n this.onSelectedOption(this.hoveredIndex);\n }\n }\n };\n\n private moveHighlight(direction: number) {\n const visibleOptions = this.options;\n const newIndex = (this.hoveredIndex + direction + visibleOptions.length) % visibleOptions.length;\n this.hoveredIndex = newIndex;\n this.updateOptionAttribute('hovered', this.hoveredIndex);\n this.scrollIntoView();\n }\n\n private updateOptionAttribute(attribute: string, indexToUpdate: number) {\n this.options.forEach((option, index) => {\n (option as any)[attribute] = index === indexToUpdate;\n });\n }\n\n private updateHoveredIndex() {\n const visibleOptions = this.options;\n const currentValue = this.value;\n this.hoveredIndex = visibleOptions.findIndex(option => option.getAttribute('value') === currentValue);\n }\n\n private scrollIntoView() {\n const container = this.host.shadowRoot?.querySelector('.dropdown-search-list');\n const hoveredOption = this.options[this.hoveredIndex];\n\n if (container && hoveredOption) {\n const optionRect = hoveredOption.getBoundingClientRect();\n const containerRect = container.getBoundingClientRect();\n\n if (optionRect.bottom > containerRect.bottom) {\n container.scrollTop += optionRect.bottom - containerRect.bottom;\n }\n\n if (optionRect.top < containerRect.top) {\n container.scrollTop -= containerRect.top - optionRect.top;\n }\n }\n }\n\n private handleResize = () => {\n this.isMobile = window.innerWidth < 768;\n if (this.isDropdownOpen) {\n if (this.isMobile) {\n this.showOverlay();\n } else {\n this.removeOverlay();\n }\n }\n };\n\n handleOnBlur() {\n if (this.isOnBlurInput === true) {\n setTimeout(() => {\n this.isDropdownOpen = false;\n this.removeOverlay();\n }, 200);\n }\n }\n getClasses() {\n return {\n 'dropdown-input-search': true,\n 'dropdown-open': this.isDropdownOpen,\n [this.status]: true,\n };\n }\n\n getDropdownClasses() {\n return {\n 'dropdown-search-list': true,\n 'visible': this.options.length && this.isDropdownOpen ? true : false\n };\n }\n\n hostCSSProperties() {\n return {\n '--dropdown-max-height': this.dropdownMaxHeight,\n };\n }\n\n render() {\n const isMobileDropdown = this.isMobile && this.isDropdownOpen;\n return (\n <Host style={this.hostCSSProperties()} class=\"dropdown-overlay\">\n <div class={`dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`} style={this.styles}>\n <div class={this.getClasses()}>\n {this.isMobile && this.isDropdownOpen && (\n <cura-button-transparent\n fontColor=\"dark\"\n onClick={() => (this.isMobile = false)}\n iconName=\"arrowLeft\"\n size=\"medium\"\n iconOnly\n color=\"primary\"\n ></cura-button-transparent>\n )}\n <cura-input-text\n label={this.label}\n part=\"cura-input-field\"\n mode={isMobileDropdown ? 'transparent' : 'default'}\n required={this.required}\n hideErrorIcon={this.status === 'error'}\n iconName={this.iconName \|\| 'search'}\n value={this.value}\n status={this.status}\n onValueChange={e => this.onValueChange(e.target.value as string)}\n onInput={e => this.handleInputChange(e)}\n onFocus={() => (this.isDropdownOpen = true)}\n onClick={() => (window.innerWidth < 768 ? (this.isMobile = true) : null)}\n onBlur={() => {\n this.handleOnBlur();\n }}\n placeholder={this.placeholder}\n size=\"large\"\n onKeyDown={this.handleKeyDown}\n >\n <slot name=\"helperText\"></slot>\n </cura-input-text>\n </div>\n <div id=\"dropdown-search-list\" class={this.getDropdownClasses()}>\n <slot name=\"dropdown-search-option\" onSlotchange={this.handleSlotChange}></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search.stories.js CHANGED Viewed

@@ -10,11 +10,12 @@ const renderCuraDropdownSearch = (args) => {
     selected="${args.selected}"
     value="${args.value}"
     placeholder="${args.placeholder}"
-    label="${args.label}">
+    label="${args.label}"${args.dropdownMaxHeight && args.dropdownMaxHeight !== '630px' ? `
+    dropdown-max-height="${args.dropdownMaxHeight}"` : ''}>
     ${args.helperText ? `<span slot="helperText">${args.helperText}</span>` : ''}
     <cura-dropdown-search-option-title>Mais Buscados</cura-dropdown-search-option-title>
     ${args.options
-        .map(option => `<cura-dropdown-search-option value="${option.value}">
+        .map(option => `<cura-dropdown-search-option value="${option.value}"${option.selectable === false ? ` selectable="false"` : ''}>
     ${option.image ? `  <div slot="image">${option.image}</div>` : ''}
       ${option.content}
     ${option.action
@@ -106,6 +107,15 @@ export default {
                 category: 'Properties',
             },
         },
+        dropdownMaxHeight: {
+            control: 'text',
+            description: 'Altura máxima para o dropdown.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: '630px' },
+            },
+            name: 'dropdown-max-height'
+        },
         helperText: {
             control: 'text',
             description: 'Texto de ajuda para o dropdown.',
@@ -139,6 +149,7 @@ export const DropdownSearch = {
         value: '',
         placeholder: 'Faça a sua busca',
         label: 'Busca',
+        dropdownMaxHeight: '630px',
         helperText: 'Digite o que você deseja buscar.',
         options: [
             {
@@ -150,9 +161,10 @@ export const DropdownSearch = {
             {
                 value: 'Dora Martins de Souza',
                 image: '<cura-avatar size="32" imageSrc=""></cura-avatar>',
-                content: `Dora Martins de Souza
+                content: `Not Selectable Dora Martins de Souza
         <cura-paragraph color="neutral-dark" margin-block="0" size="xsmall">Ortopedista Cirúrgico</cura-paragraph>`,
                 action: '',
+                selectable: false
             },
             {
                 value: 'Copa D’Or - Centro Cardiológico',