npm - @rededor/cura - Versions diffs - 1.0.0-alpha.8 → 1.1.0 - Mend

@rededor/cura 1.0.0-alpha.8 → 1.1.0

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 (344) hide show

package/dist/collection/components/cura-card/cura-card.js CHANGED Viewed

@@ -34,7 +34,7 @@ export class CuraCard {
         return classes;
     }
     render() {
-        return (h(Host, { key: 'e158f46384cc9fddf84ad55aed0f945283339d38', role: this.href ? 'link' : 'div' }, this.href ? (h("a", { class: this.getClasses(), target: this.target, style: this.styles, href: this.href }, h("slot", null))) : (h("div", { class: this.getClasses(), style: this.styles }, h("slot", null)))));
+        return (h(Host, { key: '24318e0e70d7a9cb1cbdfa3503b2fa5bce791c00', role: this.href ? 'link' : 'div' }, this.href ? (h("a", { class: this.getClasses(), target: this.target, style: this.styles, href: this.href }, h("slot", null))) : (h("div", { class: this.getClasses(), style: this.styles }, h("slot", null)))));
     }
     static get is() { return "cura-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cura-icon/cura-icon.js CHANGED Viewed

@@ -31,7 +31,7 @@ export class CuraIcon {
         this.host.style.setProperty(prop, value);
     }
     render() {
-        return (h(Host, { key: 'd49f752d12f9babd6a82fe97ef384f89879e1db9' }, h("svg", { key: '0c6d9dad5f8f8b571dd422ebb5f7941a75b46336', version: "1.1", viewBox: "0 0 24 24", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg" }, h("use", { key: '88eab15bcbbff03713282d99055f140ccd424108', xlinkHref: `${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}` }))));
+        return (h(Host, { key: '42f2502c1180315fde13c1c383ba2335e681f25b' }, h("svg", { key: 'b30e76338033abd6be556049e1db9d949173adc2', version: "1.1", viewBox: "0 0 24 24", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg" }, h("use", { key: '45df96f126cc573ce5189332a04c4e9a6db02b36', xlinkHref: `${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}` }))));
     }
     static get is() { return "cura-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cura-icons-view/cura-icons-view.js CHANGED Viewed

@@ -14,9 +14,9 @@ export class CuraIconsView {
         this.sizes.unshift(this.sizes.pop());
     }
     render() {
-        return (h(Host, { key: '57820e2608c03f54b58656602ca329c7166e142e' }, h("div", { key: '47fb932e5b2c0876f58fde68b88e30193e14b590', class: "iconDetail" }, h("cura-heading", { key: 'b4ad008b60026ac7ceccee16c68276e9bef114cb', size: "small", "margin-block": "0 24px" }, "Icon: ", h("b", { key: '6634d3ae9cf33df1942563e44e72f470199725e5' }, this.selected)), h("div", { key: '8c565d1b3714dc5b1aad971e408cab340a4aca46', class: "iconSizes" }, this.sizes.map(size => size === 'micro' && !microIcons.includes(this.selected) ? '' :
-            h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size }), h("span", null, size)))), h("div", { key: 'd979d1169689f583900d85d592c29bb2869ff62a', class: "iconSizes invert" }, this.sizes.map(size => size === 'micro' && !microIcons.includes(this.selected) ? '' :
-            h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size, color: "neutral-white" }), h("span", null, size))))), h("div", { key: '0ed5c55f057bcdea8de3bdaa1d2f45a516763d95', class: "icons" }, iconsetdefaulticons.map(icon => h("div", { class: { icon: true, selected: icon === this.selected }, onClick: () => this.setSelected(icon) }, h("cura-icon", { name: icon, size: "32", color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }), h("cura-label", { size: "xsmall", weight: icon === this.selected ? 'bold' : 'regular', color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }, icon), !microIcons.includes(icon) ? '' :
+        return (h(Host, { key: 'a6617c95d8f812380ad9a6471b2d3308f230d985' }, h("div", { key: 'fd3d146d453f37b1e1f8968113271bd59c870821', class: "iconDetail" }, h("cura-heading", { key: '6f8ba0f48fe6a3fd7d237bf8606f0e789bb9a24e', size: "small", "margin-block": "0 24px" }, "Icon: ", h("b", { key: '9a90cfdc2df40488ece88e4af4ddf7af4c8b7413' }, this.selected)), h("div", { key: '0b0978997491adc4bf5c9629c3ca93302d352a57', class: "iconSizes" }, this.sizes.map(size => size === 'micro' && !microIcons.includes(this.selected) ? '' :
+            h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size }), h("span", null, size)))), h("div", { key: '0d8666083a28088fbb036920c0130770fadb9fe8', class: "iconSizes invert" }, this.sizes.map(size => size === 'micro' && !microIcons.includes(this.selected) ? '' :
+            h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size, color: "neutral-white" }), h("span", null, size))))), h("div", { key: 'fcc2275ca60d1c36dbcc5a7a5b10e1a35d2445e2', class: "icons" }, iconsetdefaulticons.map(icon => h("div", { class: { icon: true, selected: icon === this.selected }, onClick: () => this.setSelected(icon) }, h("cura-icon", { name: icon, size: "32", color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }), h("cura-label", { size: "xsmall", weight: icon === this.selected ? 'bold' : 'regular', color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }, icon), !microIcons.includes(icon) ? '' :
             h("cura-paragraph", { color: 'success-dark', size: "xsmall", "margin-block": "0px", "line-height": '100%' }, "MICRO"))))));
     }
     static get is() { return "cura-icons-view"; }

package/dist/collection/components/cura-page-template/cura-page-template.js CHANGED Viewed

@@ -14,7 +14,7 @@ export class CuraPageTemplate {
         return classes;
     }
     render() {
-        return (h(Host, { key: 'b420fd773b337fbf64107124c3a65b7d543aa0f9' }, h("div", { key: '00e031bf40ed01904107f07367ee5b3042c1871f', style: this.styles, class: "grid-template" }, h("div", { key: '4c5c8112fe739d2b330a5a71bfdd6f6339206b15', id: "sub-header" }, h("slot", { key: '8b9896a17e6016bc791da8fd01f562a41d7f5bb1', name: 'sub-header' })), h("div", { key: '9d45f7a18ce35ae550521b281cfc0d9ea5009343', id: "header" }, h("slot", { key: '79ecbfb33b818b41c98f8a1f09243f6c2082b7bd', name: 'header' })), h("div", { key: '129b9928ddd3c0f0c357fa71494b3b77876ecd49', id: "pre-content" }, h("slot", { key: '71b6fbe0755848ac8df0a800e65b8ebc6909aff3', name: 'pre-content' })), h("div", { key: '80389bc85c71768906aa2ab564a80b84a045705d', id: "content-container", class: this.getClasses() }, h("div", { key: '438eb89b07be453c1a7caf31eb78879a6b000fc3', id: "sidebar-left" }, h("slot", { key: '8e0dd99e31be8d03d767acdee8bd18f4f6fe80bd', name: 'sidebar-left' })), h("div", { key: '21edd321d65ff1a685c699314a2d4617a14b6d09', id: "content" }, h("slot", { key: '125f790bc5d5ecade8946c154b00fdb7591ec26f', name: "content" }), h("slot", { key: 'e52dfd04c751d893335037f6dc970902a37a7d4f' })), h("div", { key: '3d35da8b265ca7a96fe36d8f037c6db0e0857537', id: "sidebar-right" }, h("slot", { key: '1d812f29d7cc068b0c4f6e705a60defc91da7145', name: 'sidebar-right' }))), h("div", { key: '10f23a4d4e837bbb11e140a5fd09be05836a27ba', id: "post-body" }, h("slot", { key: '8f3bd8fea091a0b025e69f1a0916016f1354aeb8', name: 'post-body' })), h("div", { key: '474062139aa0dd1ed49bc9c8594820fa2ff0ba83', id: "footer" }, h("slot", { key: 'ad46b1122b0875390822df6db770413980090f5e', name: 'footer' })), h("div", { key: 'c3de6dd778e675e38099d85d248e7923e276a25c', id: "sub-footer" }, h("slot", { key: '81a48964dc8912a225ea9ea49478d674d8d7271b', name: 'sub-footer' })))));
+        return (h(Host, { key: '11b8c556d3608f5fdb0f80fa5c0c9a71fa51e506' }, h("div", { key: '41c0a6cb17747a0bf8fb44f8e5766412dd261b4d', style: this.styles, class: "grid-template" }, h("div", { key: 'f563c6dbcd7506bfc100df9d5e4d7afe28cc7172', id: "sub-header" }, h("slot", { key: '2db35bb65c395d6af3ec1654fdbe2fa76735d60d', name: 'sub-header' })), h("div", { key: 'dff85fecdcf50c6812dd7eda1d2547b868da36a4', id: "header" }, h("slot", { key: 'dd1726210432a383868ae4ab716ee20259a7a744', name: 'header' })), h("div", { key: '3d8ebad203977884ea3b0c97cffd764e7c87ff8b', id: "pre-content" }, h("slot", { key: '15e9cd099c005d78afc31624d968142d657cd53e', name: 'pre-content' })), h("div", { key: '682ac5ec6855a6e598a1c27dae336787f38d5143', id: "content-container", class: this.getClasses() }, h("div", { key: 'a288d9994489df25bffac158026df89e688064a9', id: "sidebar-left" }, h("slot", { key: '26546baebf11e32f18ddec1659453e85cb5f8542', name: 'sidebar-left' })), h("div", { key: 'f998d555d298800c770919c6195b2d963000c07f', id: "content" }, h("slot", { key: 'e15084b2c7a2092331e92d5a0e389a37e07905d0', name: "content" }), h("slot", { key: '31a9c32a7309a34882ee8c7e5fe5f8893083a1ba' })), h("div", { key: '661aa62b89dd76d5d40008690fa56d53234e048d', id: "sidebar-right" }, h("slot", { key: 'f0b96d33a41818840a38ca162fd32fba8b3f70bb', name: 'sidebar-right' }))), h("div", { key: 'bdb1b6793f62315d80ab3843224a56e9586f5cc4', id: "post-body" }, h("slot", { key: 'c373462fbd8d8ecebccb1515304be38b68f1fc87', name: 'post-body' })), h("div", { key: '097ae8d7ccb045ebcc60f2829b43a2ba8e87fc2b', id: "footer" }, h("slot", { key: '1d519a8e1e5094bbf5c2a3309c4e84122468ab3e', name: 'footer' })), h("div", { key: '62e5ab1d7c9a4be5e4b4f9ab0803b298ee9fe125', id: "sub-footer" }, h("slot", { key: '59a0637bbc2dad5a2bfef04e78858a95f59231d1', name: 'sub-footer' })))));
     }
     static get is() { return "cura-page-template"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cura-toast/cura-toast.js CHANGED Viewed

@@ -21,7 +21,7 @@ export class CuraToast {
         this.setStyle();
     }
     render() {
-        return (h(Host, { key: '47453cc474cc82642c9363b2e2dcb246bcbc0990' }, h("div", { key: '90eae573aa9343666cbd7c61f66c2314e24377b3', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: 'ca9c8dcbab273aada4d80d5e025d17f08e6b71fd', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), h("div", { key: 'cc70492c6baf8a55a195a37378f23ad4174b79e7', class: "content" }, h("cura-heading", { key: '51881b8db43df91ce52bfcbe5f0db88fadd959ac', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: '80fdd7048123b4ce8e7a604914c4d522aa75858c', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: 'd74ba171c699de611f12e66110cfdd2573e6c210' })), h("slot", { key: '034e0d8efc6fd221967807c084226cd74e56ba18', name: "actions" })), this.closeButton && h("cura-icon", { key: '3077f5c74f0a109a706d295fa336595301837acb', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && h("cura-loader-bar", { key: '445383c6a9c18454ef157d025a80c376e1ce9419', color: `${this.type}-base`, progress: this.progress }))));
+        return (h(Host, { key: '65417f506ab0db06fd38449643c679d4fea1fffd' }, h("div", { key: '80e509d36768bea4b99e215dc9d81aec83b9143c', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: 'd2f6a36370ab4c6555bb679f481e1975fb234e41', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), h("div", { key: 'c312e11dbb469c1a486eaf90898c6149ce099627', class: "content" }, h("cura-heading", { key: 'f0ff03c554caaf0213476c23004b1361a876cf19', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: 'd94ab5591663c1135712bf54dd90182de5d18ed5', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '9dc18a1ded79abcc258b4a2c892084addb194c9f' })), h("slot", { key: '829788786a56a1492b6fef2dd053f84fdafd7ea1', name: "actions" })), this.closeButton && h("cura-icon", { key: '1d507a45d3a860e859f879de15d79bc7c3a34787', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && h("cura-loader-bar", { key: '0ad99ff90899e19b3b2e9a13a2ac3fa76dae286d', color: `${this.type}-base`, progress: this.progress }))));
     }
     componentDidLoad() {
         this.openContainer();

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

@@ -100,15 +100,23 @@
 }
 /* Estado Checked */
-.checked .checkbox,
-.indeterminate .checkbox {
+.checked .checkbox {
   border-color: var(--color-dark);
   background: var(--color-base);
 }
-.checked .checkbox:hover,
+.checked .checkbox:hover {
+  border-color: var(--color-base) !important;
+  background: var(--color-light);
+}
+/* Estado Indeterminate */
+.indeterminate .checkbox {
+  border-color: var(--color-base);
+  background: var(--color-light);
+}
 .indeterminate .checkbox:hover {
-  border-color: var(--color-light) !important;
-  background: var(--color-lighter);
+  border-color: var(--color-dark) !important;
+  background: var(--color-base);
 }
 .checked .icon,

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: '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()))));
+        return (h(Host, { key: 'd24019856ac701df4acbe1f7e104df67eae93945' }, h("div", { key: '413093861acf19223c65aae30bd5cd62053eec43', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: '5ba8881480f1ef8692cde13258246175ac52f3c8', class: "info" }, h("div", { key: 'e3473b617a9261dfacea2c2b8bd826b87a739c6b', class: "label-wrapper" }, h("cura-label", { key: '2a4b7c973795a23b123c250259d95df63796f53c', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: '093a39a051be67644f6206095686cda606a3c9f5', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: '8fe9215b5a56a1cf7f10871e721c1b04cd88d37f', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '5633213ce05d2f554a2acc9804d5306436eaac45' }))), h("div", { key: '5ff152af172d4a8cb0e83e2e50ec8fa6449ef9e4', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: 'f62a404773c19fedfd236aa82ecd8582fdfd4c36', 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

@@ -1,57 +1,76 @@
+/**
+ * Global Spacing Definitions.
+ * Required CSS Properties:
+ * --base-spacing
+ */
+/* None: 0px */
+/* Tiny default: 4px */
+/* Mini default: 8px */
+/* XXXS default: 12px */
+/* XXS default: 16px */
+/* XS default: 20px */
+/* S default: 20px */
+/* M default: 32px */
+/* L default: 40px */
+/* XL default: 48px */
+/* XXL default: 64px */
+/* XXXL default: 72px */
+/* Huge default: 96px */
 :host {
   display: block;
   box-sizing: border-box;
   width: 100%;
 }
-:host(:last-of-type) li {
+:host(:last-of-type) .content-container {
   border-bottom: none;
 }
-ul {
-  list-style: none;
+.option-container {
   width: 100%;
-  margin: 0;
-  padding: 0;
+  display: flex;
+}
+.option-container:hover:not(.disabled):not(.selected) .content-container {
+  background-color: var(--neutral-white);
+}
+.option-container.selected .content-container {
+  background-color: var(--primary-lighter);
+}
+.option-container.disabled {
+  cursor: default;
+}
+.content-container {
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+  padding: calc(var(--base-spacing) * 2px) calc(var(--base-spacing) * 1px);
+  background-color: var(--neutral-purewhite);
+  border-bottom: 1px solid var(--neutral-light);
+}
+.content-container ::slotted(div[slot=action]) {
+  display: flex;
+  justify-content: end;
 }
-li {
+.option-info {
   width: 100%;
   display: flex;
   align-items: center;
   align-content: center;
   justify-content: center;
-  gap: 8px;
-  padding: 8px 4px;
+  gap: calc(var(--base-spacing) * 2px);
   flex-direction: row;
-  background-color: var(--neutral-purewhite);
-  border-bottom: 1px solid var(--neutral-light);
   box-sizing: border-box;
   cursor: pointer;
 }
-li.disabled {
-  cursor: default;
-}
-li.hovered {
-  background-color: var(--neutral-white);
-}
-li cura-heading {
+.option-info cura-heading {
   width: 100%;
   margin-block: 0px;
 }
-li ::slotted(div[slot=image]) {
-  min-width: 32px;
+.option-info ::slotted(div[slot=image]) {
+  min-width: calc(var(--base-spacing) * 8px);
   display: flex;
   justify-content: center;
   align-items: center;
-}
-li ::slotted(div[slot=action]) {
-  display: flex;
-  justify-content: end;
-}
-li.selected {
-  background-color: var(--primary-lighter);
-}
-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

@@ -20,6 +20,7 @@ export class CuraDropdownSearchOption {
     }
     connectedCallback() {
         this.weights = window.CuraAPI.theme.fonts.getWeights();
+        this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
         this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor(`neutral-purewhite`);
         this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor(`neutral-light`);
         this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);
@@ -35,11 +36,12 @@ export class CuraDropdownSearchOption {
         }
     }
     render() {
-        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: {
+        return (h(Host, { key: '957218946adc6611a384d8e86860eb4f8ae50db3', slot: "dropdown-search-option" }, h("div", { key: 'a9b41feb6d72ae97cdeedd9a9aed36e2d6df40fe', style: this.styles, class: {
+                "option-container": true,
                 hovered: this.selectable ? this.hovered : false,
                 selected: this.selected,
                 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" })))));
+            } }, h("div", { key: '18994a7e0ad6e2b4ab37ae65edc796e4cdedce43', class: "content-container" }, h("div", { key: '2505977c08bea5d92b3cc33af5c117709120b82b', class: "option-info", onClick: (e) => this.handleOptionClick(e) }, h("slot", { key: 'bc5ac8b88938f29693b6f9d68ec933e7abc513e4', name: "image" }), h("cura-heading", { key: '81d2b1d1e8b60f26a6e444d18dac0ddfc95b44ea', size: "xsmall", lineHeight: "16px", marginBlock: "0px", weight: "bold", color: "neutral-black" }, h("slot", { key: 'e91fb72dc20136d0a6b56da0d03eaba02327d80d' }))), h("slot", { key: 'f0e24b8548bec4ff52f3fcccd77562ef5548d5f6', name: "action" })))));
     }
     static get is() { return "cura-dropdown-search-option"; }
     static get encapsulation() { return "shadow"; }

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;;~~QAwC3B~~,sBAAiB,GAAG,CAAC,CAAQ,EAAE,EAAE;YACvC,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBACpB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;gBAC/B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACrC,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,CAAC;iBAAM,CAAC;gBACN,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,wBAAwB,EAAE,CAAC;YAC/B,CAAC;QACH,CAAC,CAAC;;~~wBAxC0D~~,KAAK;0BAKlB,IAAI;uBAKQ,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;IAaD,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,~~CAAC,CAAC,EAAE,EAAE,CAAC,~~IAAI,CAAC,~~iBAAiB~~,~~CAAC~~,~~CAAC~~,~~CAAC~~,~~EACzC~~,~~KAAK,~~EAAE,IAAI~~,CAAC,KAAK,EACjB,KAAK,EAAE~~;~~wBACL~~,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK;~~wBAC~~/C,QAAQ,EAAE,IAAI,CAAC,QAAQ;~~wBACvB~~,QAAQ,EAAE,CAAC,IAAI,CAAC,UAAU;~~qBAC3B~~;~~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 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"]}
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['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\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 slot=\"dropdown-search-option\">\n <div\n style={this.styles}\n class={{\n \"option-container\": true,\n hovered: this.selectable ? this.hovered : false,\n selected: this.selected,\n disabled: !this.selectable\n }}>\n <div class=\"content-container\">\n <div class=\"option-info\" onClick={(e) => this.handleOptionClick(e)}>\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 </div>\n <slot name=\"action\"></slot>\n </div>\n </div>\n </Host>\n );\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: 'd27a47a6d61497f488c449188b2c6036529350cc', slot: "dropdown-search-option" }, h("cura-label", { key: 'ba63e9fce7392087551ccc7fb46a83cffa6785c9', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, h("slot", { key: 'f14d41a3ed995f6f9a946e7d96e5c0b0208310ad' }))));
+        return (h(Host, { key: 'b9fbb0edaea7457fad9244d5c032961bd913f170', slot: "dropdown-search-option" }, h("cura-label", { key: 'dbefa340f1001a532c7f2152907b87e5e2e1f0ec', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, h("slot", { key: '1d03c41d153dc707db82943c77dd96547c98c78a' }))));
     }
     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.js CHANGED Viewed

@@ -41,6 +41,7 @@ export class CuraDropdownSearch {
                 }
             }
         };
+        this.size = 'large';
         this.status = 'default';
         this.disabled = false;
         this.name = undefined;
@@ -118,7 +119,7 @@ export class CuraDropdownSearch {
     }
     addClickListenersToOptions() {
         this.options.forEach((option, index) => {
-            option.addEventListener('click', () => this.onSelectedOption(index));
+            option.addEventListener('optionSelected', () => this.onSelectedOption(index));
         });
     }
     updateSelectedOption(value) {
@@ -183,14 +184,14 @@ export class CuraDropdownSearch {
         return {
             'dropdown-input-search': true,
             'dropdown-open': this.isDropdownOpen,
-            disabled: this.disabled,
+            'disabled': this.disabled,
             [this.status]: true,
         };
     }
     getDropdownClasses() {
         return {
             'dropdown-search-list': true,
-            'visible': this.options.length && this.isDropdownOpen ? true : false
+            'visible': this.options.length && this.isDropdownOpen ? true : false,
         };
     }
     hostCSSProperties() {
@@ -200,9 +201,9 @@ export class CuraDropdownSearch {
     }
     render() {
         const isMobileDropdown = this.isMobile && this.isDropdownOpen;
-        return (h(Host, { key: 'b5fd18f900ab61704e75d3c768c73dd7c616e741', style: this.hostCSSProperties(), class: "dropdown-overlay" }, h("div", { key: 'd15ed52f0cd8fe17c3320c235f740b8118883cbf', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, h("div", { key: '8690cc4ecea61480603468e6e2d6b811c656ec72', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (h("cura-button-transparent", { key: '1de51bb3c1f6bb4ac67ac12b0a6983840df1f248', fontColor: "dark", onClick: () => (this.isMobile = false), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), h("cura-input-text", { key: '477980345bd09b89655f38b7ebf1db44f8475e35', disabled: this.disabled, 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: 'd0b8f3d5a755ad1898c046b9138f1e67ffaa7551', style: this.hostCSSProperties(), class: "dropdown-overlay" }, h("div", { key: '6f39302526074fbeb79258900300e9b0fae32a81', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, h("div", { key: 'acc77ef22319099260652c7f3863c360d5f29438', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (h("cura-button-transparent", { key: '2b69691925b17800a5a9ad212106700c79446d70', fontColor: "dark", onClick: () => (this.isMobile = false), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), h("cura-input-text", { key: 'd13ea595a08ad01dc4f3c551d28d036b73068d5a', disabled: this.disabled, 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: '55a3e00b86b3bfcc54f0352d48399af44139eb2e', name: "helperText" }))), h("div", { key: 'd123c4f652f675eb3a98f7ea0f518c01c767b97f', id: "dropdown-search-list", class: this.getDropdownClasses() }, h("slot", { key: '06e5a691a3be5eaa0861953bd36779f8993af83a', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
+            }, placeholder: this.placeholder, size: this.size, onKeyDown: this.handleKeyDown }, h("slot", { key: '2a24a3c4e0909eb46e710f894e2a281f024496a4', name: "helperText" }))), h("div", { key: 'af42a387f10bb455a812d89878dd65b15858a7ff', id: "dropdown-search-list", class: this.getDropdownClasses() }, h("slot", { key: '1d574b5166aad988bfd713abda3f6befebf44335', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
     }
     static get is() { return "cura-dropdown-search"; }
     static get encapsulation() { return "shadow"; }
@@ -218,6 +219,24 @@ export class CuraDropdownSearch {
     }
     static get properties() {
         return {
+            "size": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the dropdown search mode default: 'small', 'medium', or 'large' (default: 'large')"
+                },
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "'large'"
+            },
             "status": {
                 "type": "string",
                 "mutable": false,

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 Whether the select component is disabled.\n * Reflects as an attribute in the DOM.\n /\n @Prop({ reflect: true }) disabled: boolean = false;\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(newValue);\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 disabled: this.disabled,\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 disabled={this.disabled}\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 Size of the dropdown search mode default: 'small', 'medium', or 'large' (default: 'large')\n /\n @Prop({ reflect: true, mutable: true }) size: 'small' \| 'medium' \| 'large' = 'large';\n\n /\n Define the status of the dropdown search.\n /\n @Prop({ reflect: true }) status: 'error' \| 'default' = 'default';\n\n /\n Whether the select component is disabled.\n * Reflects as an attribute in the DOM.\n /\n @Prop({ reflect: true }) disabled: boolean = false;\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(newValue);\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('optionSelected', () => 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 'disabled': this.disabled,\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 disabled={this.disabled}\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={this.size}\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

@@ -3,6 +3,7 @@ const storybookUrl = `${window.location.origin}`;
 const renderCuraDropdownSearch = (args) => {
     return `<cura-dropdown-search
     style="height: 400px;"
+    size="${args.size}"
     status="${args.status}"
     name="${args.name}"
     icon-name="${args.iconName}"
@@ -10,8 +11,10 @@ const renderCuraDropdownSearch = (args) => {
     selected="${args.selected}"
     value="${args.value}"
     placeholder="${args.placeholder}"
-    label="${args.label}"${args.dropdownMaxHeight && args.dropdownMaxHeight !== '630px' ? `
-    dropdown-max-height="${args.dropdownMaxHeight}"` : ''}>
+    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
@@ -67,14 +70,23 @@ export default {
                 category: 'Properties',
             },
         },
+        size: {
+            control: { type: 'inline-radio' },
+            options: ['small', 'medium', 'large'],
+            description: "Tamanho do componente. Pode ser 'small', 'medium' ou 'large'.",
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'large' },
+            },
+        },
         iconName: {
             control: { type: 'select' },
             options: ['', ...iconNames],
             description: 'Nome do ícone no iconset a ser utilizado.',
             table: {
-                category: 'Icons'
+                category: 'Icons',
             },
-            name: 'icon-name'
+            name: 'icon-name',
         },
         required: {
             control: 'boolean',
@@ -114,7 +126,7 @@ export default {
                 category: 'Properties',
                 defaultValue: { summary: '630px' },
             },
-            name: 'dropdown-max-height'
+            name: 'dropdown-max-height',
         },
         helperText: {
             control: 'text',
@@ -142,6 +154,7 @@ export default {
 };
 export const DropdownSearch = {
     args: {
+        size: 'large',
         status: 'default',
         name: 'cura-dropdown',
         iconName: '',
@@ -164,7 +177,7 @@ export const DropdownSearch = {
                 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
+                selectable: false,
             },
             {
                 value: 'Copa D’Or - Centro Cardiológico',

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

	@@ -1 +1 @@
1	- {"version":3,"file":"cura-dropdown-search.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-dropdown-search/cura-dropdown-search.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import iconNames from '../../../assets/icons/iconset-default-list';\n\nconst storybookUrl = `${window.location.origin}`;\nconst renderCuraDropdownSearch = (args: any) => {\n return `<cura-dropdown-search\n style=\"height: 400px;\"\n status=\"${args.status}\"\n name=\"${args.name}\"\n icon-name=\"${args.iconName}\"\n required=\"${args.required}\"\n selected=\"${args.selected}\"\n value=\"${args.value}\"\n placeholder=\"${args.placeholder}\"\n label=\"${args.label}\"${args.dropdownMaxHeight && args.dropdownMaxHeight !== '630px' ? `\n dropdown-max-height=\"${args.dropdownMaxHeight}\"` : ''}>\n ${args.helperText ? `<span slot=\"helperText\">${args.helperText}</span>` : ''}\n <cura-dropdown-search-option-title>Mais Buscados</cura-dropdown-search-option-title>\n ${args.options\n .map(\n option => `<cura-dropdown-search-option value=\"${option.value}\"${option.selectable === false ? ` selectable=\"false\"` : ''}>\n ${option.image ? ` <div slot=\"image\">${option.image}</div>` : ''}\n ${option.content}\n ${\n option.action\n ? ` <div slot=\"action\">\n ${option.action}\n </div>`\n : ''\n }\n </cura-dropdown-search-option>\n `,\n )\n .join('')}\n </cura-dropdown-search>`;\n};\n\nexport default {\n title: 'Componentes/DropdownSearch/DropDownSearch',\n tags: ['autodocs'],\n parameters: {\n docs: {\n description: {\n component: `<cura-paragraph size=\"small\">\n\n O \\`cura-dropdown-search\\` é um componente para busca rápida entre opções, com suporte a ícones, avatares, e ações customizáveis. Ele é responsivo e seu layout é ajustado dependendo do tamanho da tela.\n <br/><br/>\n\n Em dispositivos móveis, o componente abre em modo full-screen, facilitando a navegação e seleção de opções. Você pode visualizar esse comportamento abrindo o story dele\n [aqui](${storybookUrl}/?path=/story/componentes-dropdownsearch-dropdownsearch--dropdown-search) e ajustando o tamanho da sua tela.\n\n </cura-paragraph>`,\n },\n },\n },\n render: args => {\n return renderCuraDropdownSearch(args);\n },\n argTypes: {\n status: {\n control: { type: 'inline-radio' },\n options: ['default', 'error'],\n description: 'Status do dropdown.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'default' },\n },\n },\n name: {\n control: 'text',\n description: 'Nome do dropdown.',\n required: false,\n table: {\n category: 'Properties',\n },\n },\n iconName: {\n control: { type: 'select' },\n options: ['', ...iconNames],\n description: 'Nome do ícone no iconset a ser utilizado.',\n table: {\n category: 'Icons'\n },\n name: 'icon-name'\n },\n required: {\n control: 'boolean',\n description: 'Define se o campo é obrigatório.',\n table: {\n category: 'Properties',\n defaultValue: { summary: false },\n },\n },\n value: {\n control: 'text',\n description: 'Valor atual do campo de busca.',\n table: {\n category: 'Properties',\n },\n },\n placeholder: {\n control: 'text',\n description: 'Texto do placeholder.',\n required: false,\n table: {\n category: 'Properties',\n },\n },\n label: {\n control: 'text',\n description: 'Texto da label do input.',\n required: false,\n table: {\n category: 'Properties',\n },\n },\n dropdownMaxHeight: {\n control: 'text',\n description: 'Altura máxima para o dropdown.',\n table: {\n category: 'Properties',\n defaultValue: { summary: '630px' },\n },\n name: 'dropdown-max-height'\n },\n helperText: {\n control: 'text',\n description: 'Texto de ajuda para o dropdown.',\n table: {\n category: 'Slots',\n },\n },\n oninput: {\n control: 'none',\n description: 'Evento via Listener quando o estado do value do dropdown é alterado',\n table: {\n category: 'Events',\n },\n },\n options: {\n control: { type: 'object' },\n description: 'Um slot name=dropdown-search-option para herdar as opções do dropdown. Pensado para usar o componente `<cura-dropdown-search-option>`',\n table: {\n category: 'Slots',\n defaultValue: { summary: [] },\n },\n },\n },\n};\n\nexport const DropdownSearch = {\n args: {\n status: 'default',\n name: 'cura-dropdown',\n iconName: '',\n required: false,\n value: '',\n placeholder: 'Faça a sua busca',\n label: 'Busca',\n dropdownMaxHeight: '630px',\n helperText: 'Digite o que você deseja buscar.',\n options: [\n {\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 value: 'Dora Martins de Souza',\n image: '<cura-avatar size=\"32\" imageSrc=\"\"></cura-avatar>',\n content: `Not Selectable Dora Martins de Souza\n <cura-paragraph color=\"neutral-dark\" margin-block=\"0\" size=\"xsmall\">Ortopedista Cirúrgico</cura-paragraph>`,\n action: '',\n selectable: false\n },\n {\n value: 'Copa D’Or - Centro Cardiológico',\n image: `\n <div slot=\"image\">\n <div\n style=\"\n display: flex;\n align-content: center;\n align-items: center;\n justify-content: center;\n text-align: center;\n letter-spacing: 0.72px;\n width: 32px;\n height: 32px;\n border-radius: 4px;\n background-color: #E9E9E9;\n \"\n >\n <cura-label size=\"xsmall\" margin-block=\"0\" lineHeight=\"0\" color=\"neutral-black\" weight=\"bold\">\n 1 <br />\n KM\n </cura-label>\n </div>\n </div>\n `,\n content: `<div style=\"line-height='0';\">\n Copa D’Or - Centro Cardiológico\n <cura-paragraph color=\"neutral-dark\" margin-block=\"0\" size=\"xsmall\">\n Rua Siqueira Campos, 93 Copacabana, Rio de Janeiro\n </cura-paragraph>\n </div>`,\n action: '',\n },\n ],\n },\n};\n"]}
1	+ {"version":3,"file":"cura-dropdown-search.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-dropdown-search/cura-dropdown-search.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import iconNames from '../../../assets/icons/iconset-default-list';\n\nconst storybookUrl = `${window.location.origin}`;\nconst renderCuraDropdownSearch = (args: any) => {\n return `<cura-dropdown-search\n style=\"height: 400px;\"\n size=\"${args.size}\"\n status=\"${args.status}\"\n name=\"${args.name}\"\n icon-name=\"${args.iconName}\"\n required=\"${args.required}\"\n selected=\"${args.selected}\"\n value=\"${args.value}\"\n placeholder=\"${args.placeholder}\"\n label=\"${args.label}\"${\n args.dropdownMaxHeight && args.dropdownMaxHeight !== '630px'\n ? `\n dropdown-max-height=\"${args.dropdownMaxHeight}\"`\n : ''\n }>\n ${args.helperText ? `<span slot=\"helperText\">${args.helperText}</span>` : ''}\n <cura-dropdown-search-option-title>Mais Buscados</cura-dropdown-search-option-title>\n ${args.options\n .map(\n option => `<cura-dropdown-search-option value=\"${option.value}\"${option.selectable === false ? ` selectable=\"false\"` : ''}>\n ${option.image ? ` <div slot=\"image\">${option.image}</div>` : ''}\n ${option.content}\n ${\n option.action\n ? ` <div slot=\"action\">\n ${option.action}\n </div>`\n : ''\n }\n </cura-dropdown-search-option>\n `,\n )\n .join('')}\n </cura-dropdown-search>`;\n};\n\nexport default {\n title: 'Componentes/DropdownSearch/DropDownSearch',\n tags: ['autodocs'],\n parameters: {\n docs: {\n description: {\n component: `<cura-paragraph size=\"small\">\n\n O \\`cura-dropdown-search\\` é um componente para busca rápida entre opções, com suporte a ícones, avatares, e ações customizáveis. Ele é responsivo e seu layout é ajustado dependendo do tamanho da tela.\n <br/><br/>\n\n Em dispositivos móveis, o componente abre em modo full-screen, facilitando a navegação e seleção de opções. Você pode visualizar esse comportamento abrindo o story dele\n [aqui](${storybookUrl}/?path=/story/componentes-dropdownsearch-dropdownsearch--dropdown-search) e ajustando o tamanho da sua tela.\n\n </cura-paragraph>`,\n },\n },\n },\n render: args => {\n return renderCuraDropdownSearch(args);\n },\n argTypes: {\n status: {\n control: { type: 'inline-radio' },\n options: ['default', 'error'],\n description: 'Status do dropdown.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'default' },\n },\n },\n name: {\n control: 'text',\n description: 'Nome do dropdown.',\n required: false,\n table: {\n category: 'Properties',\n },\n },\n size: {\n control: { type: 'inline-radio' },\n options: ['small', 'medium', 'large'],\n description: \"Tamanho do componente. Pode ser 'small', 'medium' ou 'large'.\",\n table: {\n category: 'Properties',\n defaultValue: { summary: 'large' },\n },\n },\n iconName: {\n control: { type: 'select' },\n options: ['', ...iconNames],\n description: 'Nome do ícone no iconset a ser utilizado.',\n table: {\n category: 'Icons',\n },\n name: 'icon-name',\n },\n required: {\n control: 'boolean',\n description: 'Define se o campo é obrigatório.',\n table: {\n category: 'Properties',\n defaultValue: { summary: false },\n },\n },\n value: {\n control: 'text',\n description: 'Valor atual do campo de busca.',\n table: {\n category: 'Properties',\n },\n },\n placeholder: {\n control: 'text',\n description: 'Texto do placeholder.',\n required: false,\n table: {\n category: 'Properties',\n },\n },\n label: {\n control: 'text',\n description: 'Texto da label do input.',\n required: false,\n table: {\n category: 'Properties',\n },\n },\n dropdownMaxHeight: {\n control: 'text',\n description: 'Altura máxima para o dropdown.',\n table: {\n category: 'Properties',\n defaultValue: { summary: '630px' },\n },\n name: 'dropdown-max-height',\n },\n helperText: {\n control: 'text',\n description: 'Texto de ajuda para o dropdown.',\n table: {\n category: 'Slots',\n },\n },\n oninput: {\n control: 'none',\n description: 'Evento via Listener quando o estado do value do dropdown é alterado',\n table: {\n category: 'Events',\n },\n },\n options: {\n control: { type: 'object' },\n description: 'Um slot name=dropdown-search-option para herdar as opções do dropdown. Pensado para usar o componente `<cura-dropdown-search-option>`',\n table: {\n category: 'Slots',\n defaultValue: { summary: [] },\n },\n },\n },\n};\n\nexport const DropdownSearch = {\n args: {\n size: 'large',\n status: 'default',\n name: 'cura-dropdown',\n iconName: '',\n required: false,\n value: '',\n placeholder: 'Faça a sua busca',\n label: 'Busca',\n dropdownMaxHeight: '630px',\n helperText: 'Digite o que você deseja buscar.',\n options: [\n {\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 value: 'Dora Martins de Souza',\n image: '<cura-avatar size=\"32\" imageSrc=\"\"></cura-avatar>',\n content: `Not Selectable Dora Martins de Souza\n <cura-paragraph color=\"neutral-dark\" margin-block=\"0\" size=\"xsmall\">Ortopedista Cirúrgico</cura-paragraph>`,\n action: '',\n selectable: false,\n },\n {\n value: 'Copa D’Or - Centro Cardiológico',\n image: `\n <div slot=\"image\">\n <div\n style=\"\n display: flex;\n align-content: center;\n align-items: center;\n justify-content: center;\n text-align: center;\n letter-spacing: 0.72px;\n width: 32px;\n height: 32px;\n border-radius: 4px;\n background-color: #E9E9E9;\n \"\n >\n <cura-label size=\"xsmall\" margin-block=\"0\" lineHeight=\"0\" color=\"neutral-black\" weight=\"bold\">\n 1 <br />\n KM\n </cura-label>\n </div>\n </div>\n `,\n content: `<div style=\"line-height='0';\">\n Copa D’Or - Centro Cardiológico\n <cura-paragraph color=\"neutral-dark\" margin-block=\"0\" size=\"xsmall\">\n Rua Siqueira Campos, 93 Copacabana, Rio de Janeiro\n </cura-paragraph>\n </div>`,\n action: '',\n },\n ],\n },\n};\n"]}