@rededor/cura 1.2.0 → 1.3.0

package/dist/collection/components/cura-tooltip/cura-tooltip.js

@@ -0,0 +1,397 @@
+import { Host, h } from "@stencil/core";
+const BREAKPOINT_SMALL_MAX = 768;
+export class CuraTooltip {
+    constructor() {
+        this.styles = {};
+        this.handleClose = () => {
+            this.closeContainer();
+        };
+        this.elementId = '';
+        this.interactive = true;
+        this.delay = 250;
+        this.maxWidth = '280px';
+        this.position = 'top';
+        this.label = undefined;
+        this.closeButton = false;
+        this.isMobile = false;
+    }
+    onWindowResize() {
+        this.setPosition(this.targetElement);
+    }
+    onWindowScroll() {
+        this.setPosition(this.targetElement);
+    }
+    connectedCallback() {
+        this.setStyle();
+    }
+    render() {
+        return (h(Host, { key: '228558663e00355ca59429d70a129e4b0e426dc1', role: "tooltip", id: this.elementId }, h("div", { key: 'd8fa27a56dd894a4cfb335fc9de348402590aa93', class: "container", style: this.styles }, h("div", { key: '974114d04252a106deb2174bfe8ecf204e689d26', class: "content" }, h("cura-heading", { key: '14be9154283064e48d2435bc4bb6af6469b18e04', level: 4, size: "xsmall", color: "neutral-black", weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: 'db64a96112781640be945502b995dc07392977bd', color: "neutral-dark", "spot-color": "secondary-darker", size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: 'b3a9a3f7a5f227ddc92ac9498c3aee93f9196f77' }))), this.closeButton && !this.isMobile && h("cura-icon", { key: '66c113fe2c3b4c67b1b9e98408b8ca1736d4eb86', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.isMobile && h("cura-button-transparent", { key: '059b4e579bebc92b5082d98ce8ae3cce9f4da95d', class: "close-button", size: "small", type: "button", color: "error", "icon-name": "close", "icon-position": "right", onClick: this.handleClose }, "OK, entendi."))));
+    }
+    componentDidLoad() {
+        this.targetElement = document.querySelector(`[aria-labelledby="${this.elementId}"]`);
+        if (!this.interactive) {
+            this.host.style.visibility = 'visible';
+        }
+        else {
+            this.host.style.visibility = 'hidden';
+            let openTimeoutID = null;
+            let closeTimeoutID = null;
+            this.targetElement.addEventListener('mouseenter', () => {
+                clearTimeout(closeTimeoutID);
+                openTimeoutID = setTimeout(() => {
+                    this.host.style.visibility = 'visible';
+                }, typeof this.delay === 'number' && this.delay > 250 ? this.delay : 250);
+            });
+            this.targetElement.addEventListener('mouseleave', () => {
+                clearTimeout(openTimeoutID);
+                closeTimeoutID = setTimeout(() => {
+                    this.handleClose();
+                }, typeof this.delay === 'number' && this.delay > 250 ? this.delay : 250);
+            });
+            this.host.addEventListener('mouseenter', () => {
+                if (window.getComputedStyle(this.host).visibility === 'visible') {
+                    clearTimeout(closeTimeoutID);
+                }
+            });
+            this.host.addEventListener('mouseleave', () => {
+                clearTimeout(openTimeoutID);
+                this.handleClose();
+            });
+            this.targetElement.addEventListener('click', () => {
+                if (window.getComputedStyle(this.host).visibility === 'hidden') {
+                    openTimeoutID = setTimeout(() => {
+                        this.host.style.visibility = 'visible';
+                    }, typeof this.delay === 'number' && this.delay > 250 ? this.delay : 250);
+                }
+                else {
+                    clearTimeout(openTimeoutID);
+                    this.handleClose();
+                }
+            });
+            document.addEventListener('click', (event) => {
+                if (!this.targetElement.contains(event.target) && !this.host.contains(event.target)) {
+                    clearTimeout(openTimeoutID);
+                    this.handleClose();
+                }
+            });
+        }
+        setTimeout(() => {
+            this.setPosition(this.targetElement);
+        }, 100);
+    }
+    setStyle() {
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--max-width': this.maxWidth, '--base-spacing': window.CuraAPI.theme.spacing.getSpacing(), '--neutral-purewhite': window.CuraAPI.theme.colors.getColor(`neutral-purewhite`), '--neutral-light': window.CuraAPI.theme.colors.getColor(`neutral-light`), '--neutral-black-shadow': window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16) });
+    }
+    getClasses() {
+        const [firstPosition, secondPosition] = this.position.split('-');
+        const classes = {};
+        classes['container'] = true;
+        if (firstPosition) {
+            classes[firstPosition] = true;
+        }
+        if (secondPosition) {
+            classes[secondPosition] = true;
+        }
+        return classes;
+    }
+    setPosition(element) {
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+        const container = this.host.shadowRoot.querySelector('.container');
+        this.isMobile = windowWidth <= BREAKPOINT_SMALL_MAX;
+        this.host.style.position = this.isMobile ? 'fixed' : 'absolute';
+        this.host.style.bottom = this.isMobile ? '0' : 'unset';
+        container.style.flexDirection = this.isMobile ? 'column' : 'row';
+        if (this.isMobile) {
+            this.host.style.left = 'unset';
+            this.host.style.top = 'unset';
+            return;
+        }
+        const elementRect = {
+            top: element.offsetTop,
+            left: element.offsetLeft,
+            width: element.offsetWidth,
+            height: element.offsetHeight
+        };
+        const tooltipRect = this.host.getBoundingClientRect();
+        const SCREEN_LIMIT = 10;
+        const SPACE_TO_ELEMENT = 10;
+        const ARROW_HORIZONTAL_ADJUSTMENT = (elementRect.width * 0.5) + 18;
+        const ARROW_VERTICAL_ADJUSTMENT = (elementRect.height * 0.5) + 18;
+        const BORDER_COLOR = this.styles['--neutral-light'];
+        let left = 0;
+        let top = 0;
+        const positions = Object.keys(this.getClasses()).filter((p) => ['top', 'left', 'bottom', 'right', 'start', 'end'].includes(p));
+        const setArrowProperties = ({ arrowTop = '', arrowLeft = '', translate = '', borderColor = '' }) => {
+            if (arrowLeft)
+                this.host.style.setProperty('--arrow-left', arrowLeft);
+            if (arrowTop)
+                this.host.style.setProperty('--arrow-top', arrowTop);
+            if (translate)
+                this.host.style.setProperty('--arrow-translate', translate);
+            if (borderColor)
+                this.host.style.setProperty('--arrow-border-color', borderColor);
+        };
+        //Posicionamento vertical
+        if (positions.includes('top') || positions.includes('bottom')) {
+            setArrowProperties({ arrowLeft: '50%', translate: 'translateX(-50%)' });
+            if (positions.includes('top')) {
+                top = elementRect.top - tooltipRect.height - SPACE_TO_ELEMENT;
+                setArrowProperties({ arrowTop: 'calc(100% - 6px)', borderColor: `transparent ${BORDER_COLOR} ${BORDER_COLOR} transparent` });
+                if (top < SCREEN_LIMIT) {
+                    top = elementRect.top + elementRect.height + SPACE_TO_ELEMENT;
+                    setArrowProperties({ arrowTop: '-6px', borderColor: `${BORDER_COLOR} transparent transparent ${BORDER_COLOR}` });
+                }
+            }
+            if (positions.includes('bottom')) {
+                top = elementRect.top + elementRect.height + SPACE_TO_ELEMENT;
+                setArrowProperties({ arrowTop: '-6px', borderColor: `${BORDER_COLOR} transparent transparent ${BORDER_COLOR}` });
+                if (top + tooltipRect.height > windowHeight - SCREEN_LIMIT) {
+                    top = elementRect.top - tooltipRect.height - SPACE_TO_ELEMENT;
+                    setArrowProperties({ arrowTop: 'calc(100% - 6px)', borderColor: `transparent ${BORDER_COLOR} ${BORDER_COLOR} transparent` });
+                }
+            }
+            left = elementRect.left + (elementRect.width - tooltipRect.width) / 2;
+            if (positions.includes('start')) {
+                left = elementRect.left - tooltipRect.width + ARROW_HORIZONTAL_ADJUSTMENT;
+                setArrowProperties({ arrowLeft: 'calc(100% - 18px)' });
+                if (left < SCREEN_LIMIT) {
+                    left = elementRect.left + elementRect.width - ARROW_HORIZONTAL_ADJUSTMENT;
+                    setArrowProperties({ arrowLeft: '18px' });
+                }
+            }
+            if (positions.includes('end')) {
+                left = elementRect.left + elementRect.width - ARROW_HORIZONTAL_ADJUSTMENT;
+                setArrowProperties({ arrowLeft: '18px' });
+                if (left + tooltipRect.width > windowWidth - SCREEN_LIMIT) {
+                    left = elementRect.left - tooltipRect.width + ARROW_HORIZONTAL_ADJUSTMENT;
+                    setArrowProperties({ arrowLeft: 'calc(100% - 18px)' });
+                }
+            }
+        }
+        //Posicionamento horizontal
+        if (positions.includes('right') || positions.includes('left')) {
+            setArrowProperties({ arrowTop: '50%', translate: 'translateY(-50%)' });
+            if (positions.includes('right')) {
+                left = elementRect.left + elementRect.width + SPACE_TO_ELEMENT;
+                setArrowProperties({ arrowLeft: '-6px', borderColor: `transparent transparent ${BORDER_COLOR} ${BORDER_COLOR}` });
+                if (left + tooltipRect.width > windowWidth - SCREEN_LIMIT) {
+                    left = elementRect.left - tooltipRect.width - SPACE_TO_ELEMENT;
+                    setArrowProperties({ arrowLeft: 'calc(100% - 6px)', borderColor: `${BORDER_COLOR} ${BORDER_COLOR} transparent transparent` });
+                }
+            }
+            if (positions.includes('left')) {
+                left = elementRect.left - tooltipRect.width - SPACE_TO_ELEMENT;
+                setArrowProperties({ arrowLeft: 'calc(100% - 6px)', borderColor: `${BORDER_COLOR} ${BORDER_COLOR} transparent transparent` });
+                if (left < SCREEN_LIMIT) {
+                    left = elementRect.left + elementRect.width + SPACE_TO_ELEMENT;
+                    setArrowProperties({ arrowLeft: '-6px', borderColor: `transparent transparent ${BORDER_COLOR} ${BORDER_COLOR}` });
+                }
+            }
+            top = elementRect.top + (elementRect.height - tooltipRect.height) / 2;
+            if (positions.includes('start')) {
+                top = elementRect.top - tooltipRect.height + ARROW_VERTICAL_ADJUSTMENT;
+                setArrowProperties({ arrowTop: 'calc(100% - 18px)' });
+                if (top < SCREEN_LIMIT) {
+                    top = elementRect.top + elementRect.height - ARROW_VERTICAL_ADJUSTMENT;
+                    setArrowProperties({ arrowTop: '18px' });
+                }
+            }
+            if (positions.includes('end')) {
+                top = elementRect.top + elementRect.height - ARROW_VERTICAL_ADJUSTMENT;
+                setArrowProperties({ arrowTop: '18px' });
+                if (top + tooltipRect.height > windowHeight - SCREEN_LIMIT) {
+                    top = elementRect.top - tooltipRect.height + ARROW_VERTICAL_ADJUSTMENT;
+                    setArrowProperties({ arrowTop: 'calc(100% - 18px)' });
+                }
+            }
+        }
+        this.host.style.left = `${left}px`;
+        this.host.style.top = `${top}px`;
+    }
+    closeContainer() {
+        this.host.style.visibility = 'hidden';
+        this.tooltipClosed.emit();
+    }
+    static get is() { return "cura-tooltip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cura-tooltip.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cura-tooltip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "elementId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "element-id",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "interactive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "interactive",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "delay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "delay",
+                "reflect": false,
+                "defaultValue": "250"
+            },
+            "maxWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "max-width",
+                "reflect": false,
+                "defaultValue": "'280px'"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end'",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "position",
+                "reflect": true,
+                "defaultValue": "'top'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": true
+            },
+            "closeButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "close-button",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isMobile": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tooltipClosed",
+                "name": "tooltipClosed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "onWindowResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "scroll",
+                "method": "onWindowScroll",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}
+//# sourceMappingURL=cura-tooltip.js.map

package/dist/collection/components/cura-tooltip/cura-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-tooltip.js","sourceRoot":"","sources":["../../../src/components/cura-tooltip/cura-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, EventEmitter, Host, Prop, State, h, Event, Listen } from '@stencil/core';\n\nconst BREAKPOINT_SMALL_MAX = 768;\n\n@Component({\n  tag: 'cura-tooltip',\n  styleUrl: 'cura-tooltip.scss',\n  shadow: true,\n})\nexport class CuraTooltip {\n  @Element() host: HTMLElement;\n\n  @Prop() elementId = '';\n  @Prop() interactive = true;\n  @Prop() delay = 250;\n  @Prop() maxWidth = '280px';\n  @Prop({ reflect: true }) position: 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' = 'top';\n  @Prop({ reflect: true }) label: string;\n  @Prop({ reflect: true }) closeButton = false;\n\n  @State() isMobile = false;\n\n  @Event({ eventName: 'tooltipClosed' }) tooltipClosed: EventEmitter<void>;\n\n  targetElement: HTMLElement;\n\n  styles = {};\n\n  @Listen('resize', { target: 'window' })\n  onWindowResize() {\n    this.setPosition(this.targetElement);\n  }\n\n  @Listen('scroll', { target: 'window' })\n  onWindowScroll() {\n    this.setPosition(this.targetElement);\n  }\n\n  connectedCallback() {\n    this.setStyle();\n  }\n\n  render() {\n    return (\n      <Host role=\"tooltip\" id={this.elementId}>\n        <div class=\"container\" style={this.styles}>\n          <div class=\"content\">\n            <cura-heading level={4} size=\"xsmall\" color=\"neutral-black\" weight=\"bold\" margin-block=\"0\">\n              {this.label}\n            </cura-heading>\n            <cura-paragraph color=\"neutral-dark\" spot-color=\"secondary-darker\" size=\"xsmall\" marginBlock=\"0\" lineHeight=\"133.33%\">\n              <slot></slot>\n            </cura-paragraph>\n          </div>\n        {this.closeButton && !this.isMobile && <cura-icon class=\"close-icon\" name=\"close\" size={16} color=\"error-dark\" onClick={this.handleClose}></cura-icon>}\n        {this.isMobile && <cura-button-transparent class=\"close-button\" size=\"small\" type=\"button\" color=\"error\" icon-name=\"close\" icon-position=\"right\" onClick={this.handleClose}>OK, entendi.</cura-button-transparent>}\n        </div>\n      </Host>\n    );\n  }\n\n  componentDidLoad() {\n    this.targetElement = document.querySelector(`[aria-labelledby=\"${this.elementId}\"]`) as HTMLElement;\n\n    if (!this.interactive) {\n      this.host.style.visibility = 'visible';\n    } else {\n      this.host.style.visibility = 'hidden';\n\n      let openTimeoutID = null;\n      let closeTimeoutID = null;\n\n      this.targetElement.addEventListener('mouseenter', () => {\n        clearTimeout(closeTimeoutID);\n        openTimeoutID = setTimeout(() => {\n          this.host.style.visibility = 'visible';\n        }, typeof this.delay === 'number' && this.delay > 250 ? this.delay : 250);\n      });\n  \n      this.targetElement.addEventListener('mouseleave', () => {\n        clearTimeout(openTimeoutID);\n        closeTimeoutID = setTimeout(() => {\n          this.handleClose();\n        }, typeof this.delay === 'number' && this.delay > 250 ? this.delay : 250);\n      });\n\n      this.host.addEventListener('mouseenter', () => {\n        if (window.getComputedStyle(this.host).visibility === 'visible') {\n          clearTimeout(closeTimeoutID);\n        }\n      });\n\n      this.host.addEventListener('mouseleave', () => {\n        clearTimeout(openTimeoutID);\n        this.handleClose();\n      });\n\n      this.targetElement.addEventListener('click', () => {\n        if (window.getComputedStyle(this.host).visibility === 'hidden') {\n          openTimeoutID = setTimeout(() => {\n            this.host.style.visibility = 'visible';\n          }, typeof this.delay === 'number' && this.delay > 250 ? this.delay : 250);\n        } else {\n        clearTimeout(openTimeoutID);\n          this.handleClose();\n        }\n      });\n  \n      document.addEventListener('click', (event: MouseEvent) => {\n        if(!this.targetElement.contains(event.target as HTMLElement) && !this.host.contains(event.target as HTMLElement)) {\n          clearTimeout(openTimeoutID);\n          this.handleClose();\n        }\n      });\n    }\n\n    setTimeout(() => {\n      this.setPosition(this.targetElement);\n    }, 100);\n  }\n\n  setStyle() {\n    this.styles = {\n      ...this.styles,\n      '--max-width': this.maxWidth,\n      '--base-spacing': window.CuraAPI.theme.spacing.getSpacing(),\n      '--neutral-purewhite': window.CuraAPI.theme.colors.getColor(`neutral-purewhite`),\n      '--neutral-light': window.CuraAPI.theme.colors.getColor(`neutral-light`),\n      '--neutral-black-shadow': window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16),\n    }\n  }\n\n  getClasses() {\n    const [firstPosition, secondPosition] = this.position.split('-');\n    const classes = {};\n\n    classes['container'] = true;\n    if (firstPosition) { classes[firstPosition] = true; }\n    if (secondPosition) { classes[secondPosition] = true; }\n\n    return classes;\n  }\n\n  setPosition(element: HTMLElement) {\n    const windowWidth = window.innerWidth;\n    const windowHeight = window.innerHeight;\n    const container = this.host.shadowRoot.querySelector('.container') as HTMLElement;\n\n    this.isMobile = windowWidth <= BREAKPOINT_SMALL_MAX;\n\n    this.host.style.position = this.isMobile ? 'fixed' : 'absolute';\n    this.host.style.bottom = this.isMobile ? '0' : 'unset';\n    container.style.flexDirection = this.isMobile ? 'column' : 'row';\n\n    if (this.isMobile) {\n      this.host.style.left = 'unset';\n      this.host.style.top = 'unset';\n      return;\n    }\n\n    const elementRect = { \n      top: element.offsetTop, \n      left: element.offsetLeft, \n      width: element.offsetWidth, \n      height: element.offsetHeight\n    };\n    const tooltipRect = this.host.getBoundingClientRect();\n\n    const SCREEN_LIMIT = 10;\n    const SPACE_TO_ELEMENT = 10;\n    const ARROW_HORIZONTAL_ADJUSTMENT = (elementRect.width * 0.5) + 18;\n    const ARROW_VERTICAL_ADJUSTMENT = (elementRect.height * 0.5) + 18;\n    const BORDER_COLOR = this.styles['--neutral-light'];\n\n    let left = 0;\n    let top = 0;\n\n    const positions = Object.keys(this.getClasses()).filter((p) => ['top', 'left', 'bottom', 'right', 'start', 'end'].includes(p));\n\n    const setArrowProperties = ({ arrowTop = '', arrowLeft = '', translate = '', borderColor = '' }) => {\n      if (arrowLeft) this.host.style.setProperty('--arrow-left', arrowLeft);\n      if (arrowTop) this.host.style.setProperty('--arrow-top', arrowTop);\n      if (translate) this.host.style.setProperty('--arrow-translate', translate);\n      if (borderColor) this.host.style.setProperty('--arrow-border-color', borderColor);\n    };\n\n    //Posicionamento vertical\n    if (positions.includes('top') || positions.includes('bottom')) {\n      setArrowProperties({ arrowLeft: '50%', translate: 'translateX(-50%)' });\n\n      if (positions.includes('top')) {\n        top = elementRect.top - tooltipRect.height - SPACE_TO_ELEMENT;\n        setArrowProperties({ arrowTop: 'calc(100% - 6px)', borderColor: `transparent ${BORDER_COLOR} ${BORDER_COLOR} transparent` });\n\n        if (top < SCREEN_LIMIT) {\n          top = elementRect.top + elementRect.height + SPACE_TO_ELEMENT;\n          setArrowProperties({ arrowTop: '-6px', borderColor: `${BORDER_COLOR} transparent transparent ${BORDER_COLOR}` });\n        }\n      }\n\n      if (positions.includes('bottom')) {\n        top = elementRect.top + elementRect.height + SPACE_TO_ELEMENT;\n        setArrowProperties({ arrowTop: '-6px', borderColor: `${BORDER_COLOR} transparent transparent ${BORDER_COLOR}` });\n\n        if (top + tooltipRect.height > windowHeight - SCREEN_LIMIT) {\n          top = elementRect.top - tooltipRect.height - SPACE_TO_ELEMENT;\n          setArrowProperties({ arrowTop: 'calc(100% - 6px)', borderColor: `transparent ${BORDER_COLOR} ${BORDER_COLOR} transparent` });\n        }\n      }\n\n      left = elementRect.left + (elementRect.width - tooltipRect.width)/2;\n      \n      if (positions.includes('start')) {\n        left = elementRect.left - tooltipRect.width + ARROW_HORIZONTAL_ADJUSTMENT;\n        setArrowProperties({ arrowLeft: 'calc(100% - 18px)' });\n\n        if (left < SCREEN_LIMIT) {\n          left = elementRect.left + elementRect.width - ARROW_HORIZONTAL_ADJUSTMENT;\n          setArrowProperties({ arrowLeft: '18px' });\n        }\n      }\n\n      if (positions.includes('end')) {\n        left = elementRect.left + elementRect.width - ARROW_HORIZONTAL_ADJUSTMENT;\n        setArrowProperties({ arrowLeft: '18px' });\n\n        if (left + tooltipRect.width > windowWidth - SCREEN_LIMIT) {\n          left = elementRect.left - tooltipRect.width + ARROW_HORIZONTAL_ADJUSTMENT;\n          setArrowProperties({ arrowLeft: 'calc(100% - 18px)' });\n        }\n      }\n    }\n\n    //Posicionamento horizontal\n    if (positions.includes('right') || positions.includes('left')) {\n      setArrowProperties({ arrowTop: '50%', translate: 'translateY(-50%)' });\n\n      if (positions.includes('right')) {\n        left = elementRect.left + elementRect.width + SPACE_TO_ELEMENT;\n        setArrowProperties({ arrowLeft: '-6px', borderColor: `transparent transparent ${BORDER_COLOR} ${BORDER_COLOR}` });\n\n        if (left + tooltipRect.width > windowWidth - SCREEN_LIMIT) {\n          left = elementRect.left - tooltipRect.width - SPACE_TO_ELEMENT;\n          setArrowProperties({ arrowLeft: 'calc(100% - 6px)', borderColor: `${BORDER_COLOR} ${BORDER_COLOR} transparent transparent` });\n        }\n      }\n\n      if (positions.includes('left')) {\n        left = elementRect.left - tooltipRect.width - SPACE_TO_ELEMENT;\n        setArrowProperties({ arrowLeft: 'calc(100% - 6px)', borderColor: `${BORDER_COLOR} ${BORDER_COLOR} transparent transparent` });\n        \n        if (left < SCREEN_LIMIT) {\n          left = elementRect.left + elementRect.width + SPACE_TO_ELEMENT;\n          setArrowProperties({ arrowLeft: '-6px', borderColor: `transparent transparent ${BORDER_COLOR} ${BORDER_COLOR}` });\n        }\n      }\n      \n      top = elementRect.top + (elementRect.height - tooltipRect.height)/2;\n\n      if (positions.includes('start')) {\n        top = elementRect.top - tooltipRect.height + ARROW_VERTICAL_ADJUSTMENT;\n        setArrowProperties({ arrowTop: 'calc(100% - 18px)' });\n\n        if (top < SCREEN_LIMIT) {\n          top = elementRect.top + elementRect.height - ARROW_VERTICAL_ADJUSTMENT;\n          setArrowProperties({ arrowTop: '18px' });\n        }\n      }\n\n      if (positions.includes('end')) {\n        top = elementRect.top + elementRect.height - ARROW_VERTICAL_ADJUSTMENT;\n        setArrowProperties({ arrowTop: '18px' });\n\n        if (top + tooltipRect.height > windowHeight - SCREEN_LIMIT) {\n          top = elementRect.top - tooltipRect.height + ARROW_VERTICAL_ADJUSTMENT;\n          setArrowProperties({ arrowTop: 'calc(100% - 18px)' });\n        }\n      }\n    }\n\n    this.host.style.left = `${left}px`;\n    this.host.style.top = `${top}px`;\n  }\n\n  closeContainer() {\n    this.host.style.visibility = 'hidden';\n    this.tooltipClosed.emit();\n  }\n\n  handleClose = () => {\n    this.closeContainer();\n  };\n}\n"]}

package/dist/collection/components/cura-tooltip/cura-tooltip.stories.js

@@ -0,0 +1,137 @@
+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;
+};
+const renderCuraTooltip = (args) => {
+    return `<div style="width: 100%; height: 250px; display: flex; justify-content: center; align-items: center;">
+    ${args.targetElement}
+    <cura-tooltip
+    ${args.targetElementId ? `element-id="${args.targetElementId}"` : ''}
+    ${args.interactive === true ? '' : `interactive="${args.interactive}"`}
+    ${args.label ? `label="${args.label}"` : ''}
+    ${args.delay > 250 ? `delay="${args.delay}"` : ''}
+    ${args.maxWidth !== '280px' ? `max-width="${args.maxWidth}"` : ''}
+    ${args.position && args.position !== 'top' ? `position="${args.position}"` : ''}
+    ${args.closeButton === true ? `close-button="${args.closeButton}"` : ''}>
+		${args.content}
+    </cura-tooltip>
+    </div>`;
+};
+export default {
+    title: 'Componentes/Feedback/Tooltip',
+    tags: ['autodocs'],
+    render: (_a) => {
+        var args = __rest(_a, []);
+        return renderCuraTooltip(args);
+    },
+    argTypes: {
+        targetElementId: {
+            control: 'text',
+            description: 'Aria-labelledby do elemento alvo',
+            table: {
+                category: 'Properties',
+            },
+            name: 'elementId',
+        },
+        interactive: {
+            control: 'boolean',
+            description: 'Ativa a interatividade do tooltip',
+            table: {
+                category: 'Properties',
+            },
+            name: 'interactive',
+        },
+        delay: {
+            control: 'number',
+            description: 'Define a quantidade de tempo, em milisegundos, necessário para a abertura do tooltip.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 250 },
+            },
+            name: 'delay',
+        },
+        maxWidth: {
+            control: 'text',
+            description: 'Define a largura máxima do componente',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: '280px' },
+            },
+            name: 'maxWidth',
+        },
+        label: {
+            control: 'text',
+            description: 'Título do tooltip.',
+            table: {
+                category: 'Properties',
+            },
+            name: 'label',
+        },
+        position: {
+            control: { type: 'select' },
+            options: ['', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-start', 'bottom', 'bottom-end', 'left-start', 'left', 'left-end'],
+            description: 'Posição do Tooltip em relação ao conteúdo',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'top' },
+            },
+            name: 'position',
+        },
+        closeButton: {
+            control: 'boolean',
+            description: 'Define se o alerta pode ser fechado.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: false },
+            },
+            name: 'close-button'
+        },
+        targetElement: {
+            control: 'text',
+            description: 'Elemento que vai receber o tooltip',
+            table: {
+                category: 'Slot',
+            },
+            name: '',
+        },
+        content: {
+            control: 'text',
+            description: 'Conteúdo do tooltip. É projetado automaticamente dentro do slot.',
+            defaultValue: '',
+            table: {
+                category: 'Slot',
+            },
+        },
+        closeEvent: {
+            control: 'text',
+            description: 'Evento customizado (via listener) disparado quando o componente é fechado.',
+            name: 'tooltipClosed',
+            table: {
+                category: 'Events',
+            },
+        }
+    },
+};
+export const Tooltip = {
+    args: {
+        targetElement: '<cura-button size="small" aria-labelledby="notification">Tooltip</cura-button>',
+        targetElementId: 'notification',
+        interactive: true,
+        delay: 250,
+        maxWidth: '280px',
+        label: 'Título do tooltip',
+        position: 'top',
+        closeButton: false,
+        content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit <a href="#">Link</a>.`
+    },
+    closeEvent: '-',
+};
+//# sourceMappingURL=cura-tooltip.stories.js.map

package/dist/collection/components/cura-tooltip/cura-tooltip.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-tooltip.stories.js","sourceRoot":"","sources":["../../../src/components/cura-tooltip/cura-tooltip.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,MAAM,iBAAiB,GAAG,CAAC,IAAS,EAAE,EAAE;IACtC,OAAO;MACH,IAAI,CAAC,aAAa;;MAElB,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC,EAAE;MAClE,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB,IAAI,CAAC,WAAW,GAAG;MACpE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE;MACzC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,UAAU,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE;MAC/C,IAAI,CAAC,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE;MAC/D,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,aAAa,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE;MAC7E,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,CAAC,CAAC,iBAAiB,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,EAAE;IACvE,IAAI,CAAC,OAAO;;WAEL,CAAC;AACZ,CAAC,CAAA;AAED,eAAe;IACb,KAAK,EAAE,8BAA8B;IACrC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,EAAE,CAAC,EAAW,EAAE,EAAE;YAAV,IAAI,cAAT,EAAW,CAAF;QAChB,OAAO,iBAAiB,CAAC,IAAI,CAAC,CAAC;IACjC,CAAC;IACD,QAAQ,EAAE;QACR,eAAe,EAAE;YAClB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,kCAAkC;YAC/C,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;YACD,IAAI,EAAE,WAAW;SACf;QACD,WAAW,EAAE;YACd,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,mCAAmC;YAChD,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;YACD,IAAI,EAAE,aAAa;SACjB;QACD,KAAK,EAAE;YACR,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,uFAAuF;YACpG,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACjB,YAAY,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;aACpC;YACD,IAAI,EAAE,OAAO;SACX;QACD,QAAQ,EAAE;YACX,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,uCAAuC;YACpD,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACjB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;aACxC;YACD,IAAI,EAAE,UAAU;SACd;QACD,KAAK,EAAE;YACR,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,oBAAoB;YACjC,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;YACD,IAAI,EAAE,OAAO;SACX;QACH,QAAQ,EAAE;YACT,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,QAAQ,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,EAAE,UAAU,CAAC;YAC3J,WAAW,EAAE,2CAA2C;YACxD,KAAK,EAAE;gBACN,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aAChC;YACD,IAAI,EAAE,UAAU;SAChB;QACC,WAAW,EAAE;YACX,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,sCAAsC;YACnD,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACjC;YACD,IAAI,EAAE,cAAc;SACrB;QACD,aAAa,EAAE;YAChB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,oCAAoC;YACjD,KAAK,EAAE;gBACL,QAAQ,EAAE,MAAM;aACjB;YACD,IAAI,EAAE,EAAE;SACN;QACD,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,kEAAkE;YAC/E,YAAY,EAAE,EAAE;YAChB,KAAK,EAAE;gBACL,QAAQ,EAAE,MAAM;aACjB;SACF;QACD,UAAU,EAAE;YACV,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,4EAA4E;YACzF,IAAI,EAAE,eAAe;YACrB,KAAK,EAAE;gBACL,QAAQ,EAAE,QAAQ;aACnB;SACF;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE;QACJ,aAAa,EAAE,gFAAgF;QAC/F,eAAe,EAAE,cAAc;QAC/B,WAAW,EAAE,IAAI;QACjB,KAAK,EAAE,GAAG;QACV,QAAQ,EAAE,OAAO;QACjB,KAAK,EAAE,mBAAmB;QAC5B,QAAQ,EAAE,KAAK;QACb,WAAW,EAAE,KAAK;QAClB,OAAO,EAAE,+EAA+E;KACzF;IACD,UAAU,EAAE,GAAG;CAChB,CAAC","sourcesContent":["const renderCuraTooltip = (args: any) => {\n  return `<div style=\"width: 100%; height: 250px; display: flex; justify-content: center; align-items: center;\">\n    ${args.targetElement}\n    <cura-tooltip\n    ${args.targetElementId ? `element-id=\"${args.targetElementId}\"` : ''}\n    ${args.interactive === true ? '' : `interactive=\"${args.interactive}\"`}\n    ${args.label ? `label=\"${args.label}\"` : ''}\n    ${args.delay > 250 ? `delay=\"${args.delay}\"` : ''}\n    ${args.maxWidth !== '280px' ? `max-width=\"${args.maxWidth}\"` : ''}\n    ${args.position && args.position !== 'top' ? `position=\"${args.position}\"` : ''}\n    ${args.closeButton === true ? `close-button=\"${args.closeButton}\"` : ''}>\n\t\t${args.content}\n    </cura-tooltip>\n    </div>`;\n}\n\nexport default {\n  title: 'Componentes/Feedback/Tooltip',\n  tags: ['autodocs'],\n  render: ({ ...args }) => {\n    return renderCuraTooltip(args);\n  },\n  argTypes: {\n    targetElementId: {\n\t\t\tcontrol: 'text',\n\t\t\tdescription: 'Aria-labelledby do elemento alvo',\n\t\t\ttable: {\n\t\t\t\t\tcategory: 'Properties',\n\t\t\t},\n\t\t\tname: 'elementId',\n    },\n    interactive: {\n\t\t\tcontrol: 'boolean',\n\t\t\tdescription: 'Ativa a interatividade do tooltip',\n\t\t\ttable: {\n\t\t\t\t\tcategory: 'Properties',\n\t\t\t},\n\t\t\tname: 'interactive',\n    },\n    delay: {\n\t\t\tcontrol: 'number',\n\t\t\tdescription: 'Define a quantidade de tempo, em milisegundos, necessário para a abertura do tooltip.',\n\t\t\ttable: {\n\t\t\t\t\tcategory: 'Properties',\n          defaultValue: { summary: 250 },\n\t\t\t},\n\t\t\tname: 'delay',\n    },\n    maxWidth: {\n\t\t\tcontrol: 'text',\n\t\t\tdescription: 'Define a largura máxima do componente',\n\t\t\ttable: {\n\t\t\t\t\tcategory: 'Properties',\n          defaultValue: { summary: '280px' },\n\t\t\t},\n\t\t\tname: 'maxWidth',\n    },\n    label: {\n\t\t\tcontrol: 'text',\n\t\t\tdescription: 'Título do tooltip.',\n\t\t\ttable: {\n\t\t\t\t\tcategory: 'Properties',\n\t\t\t},\n\t\t\tname: 'label',\n    },\n\t\tposition: {\n\t\t\tcontrol: { type: 'select' },\n\t\t\toptions: ['', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-start', 'bottom', 'bottom-end', 'left-start', 'left', 'left-end'],\n\t\t\tdescription: 'Posição do Tooltip em relação ao conteúdo',\n\t\t\ttable: {\n\t\t\t\tcategory: 'Properties',\n\t\t\t\tdefaultValue: { summary: 'top' },\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: false },\n      },\n      name: 'close-button'\n    },\n    targetElement: {\n\t\t\tcontrol: 'text',\n\t\t\tdescription: 'Elemento que vai receber o tooltip',\n\t\t\ttable: {\n\t\t\t\t\tcategory: 'Slot',\n\t\t\t},\n\t\t\tname: '',\n    },\n    content: {\n      control: 'text',\n      description: 'Conteúdo do tooltip. É projetado automaticamente dentro do slot.',\n      defaultValue: '',\n      table: {\n        category: 'Slot',\n      },\n    },\n    closeEvent: {\n      control: 'text',\n      description: 'Evento customizado (via listener) disparado quando o componente é fechado.',\n      name: 'tooltipClosed',\n      table: {\n        category: 'Events',\n      },\n    }\n  },\n};\n\nexport const Tooltip = {\n  args: {\n    targetElement: '<cura-button size=\"small\" aria-labelledby=\"notification\">Tooltip</cura-button>',\n    targetElementId: 'notification',\n    interactive: true,\n    delay: 250,\n    maxWidth: '280px',\n    label: 'Título do tooltip',\n\t\tposition: 'top',\n    closeButton: false,\n    content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit <a href=\"#\">Link</a>.`\n  },\n  closeEvent: '-',\n};\n"]}

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

@@ -147,7 +147,7 @@ export class CuraCheckbox {
         return h("cura-icon", { class: "icon", name: iconName, size: iconSize, color: iconColor });
     }
     render() {
-        return (h(Host, { key: 'a346ec6f3d5a982471ac922982af7f9dbee14865' }, h("div", { key: '5786471ce3a9c1e116411f14b22d8bc5d7d39dce', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: '18d6646e969d7f78acba9deab9eb644de2df7011', class: "info" }, h("div", { key: 'fa29dbdfcd215a83aff824cb5d23d15b8f93313f', class: "label-wrapper" }, h("cura-label", { key: 'db7c96cc88553166b78e70f0c773fde12d54fc40', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: '408383422b9cdf45fe7cbfb51f7ea06ae3d1a260', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: '4af49958c61ddc4e79b719ff03179e6003eee93c', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '649bbc456157e103eb55c199857158d37c8b7b16' }))), h("div", { key: 'b0abfc17ee08f13ad82e4c22ea8f90d980893274', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: 'fba5fbe2853e340cc30ffe8d663f62b874cd1877', 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: '00334ec058edf0849cf30c65d2f9e2e2e051de96' }, h("div", { key: 'd7c7857afa27a033f0642369717eb3be406f9f27', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: 'aed0ec8155b2a5c0e3000b416afd6c5455c55f0e', class: "info" }, h("div", { key: 'd90166401c6946c508d2cace62976c2e7374689f', class: "label-wrapper" }, h("cura-label", { key: '7c0c5cc650db37f09127050333f49c5f4b4c7dc6', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: '3c1cd2dcad221f4d93bde959ca33273270f0fe45', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: '3fd01d993596f36da00b3acfeef02f2a28340eae', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '2c106bd163a1b330a18061c0e99eb21c911d7da9' }))), h("div", { key: '2286927b31856a224049693295caa9e037695749', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: '9bb8a436f1500d046a9b57972307cf5feff183d3', 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.js

@@ -36,12 +36,12 @@ export class CuraDropdownSearchOption {
         }
     }
     render() {
-        return (h(Host, { key: '3f02c7eb0d499c858c2145a7f63b0d935debaa2e', slot: "dropdown-search-option" }, h("div", { key: '5f9bfdaa8687e3784b7615b05fca16661847df62', style: this.styles, class: {
+        return (h(Host, { key: 'a084adaf6f89be71c8d5dc141705e7a71af353bb', slot: "dropdown-search-option" }, h("div", { key: '58ac361d8f16fdab8ef07d3be3f9c12a8c4b85ef', style: this.styles, class: {
                 "option-container": true,
                 hovered: this.selectable ? this.hovered : false,
                 selected: this.selected,
                 disabled: !this.selectable
-            } }, h("div", { key: '4786ae6abd65c3232f854e2322d8b7b9093d332b', class: "content-container" }, h("div", { key: '5a29f12c98477cb970af13706b95b2f76a45c938', class: "option-info", onClick: (e) => this.handleOptionClick(e) }, h("slot", { key: '199564385ab97d313235891c55eeff808de24857', name: "image" }), h("cura-heading", { key: 'bfdf99dae80d99bafa1bd30808986ce315cafd5f', size: "xsmall", lineHeight: "16px", marginBlock: "0px", weight: "bold", color: "neutral-black" }, h("slot", { key: '711d9843b8196400071b50a50d395d4775bec1f0' }))), h("slot", { key: '1487aac2527eba3511f9653a0d2986aac95e2bad', name: "action" })))));
+            } }, h("div", { key: '0a7f959582b45df5c30fbbd225fccfc93aa937f4', class: "content-container" }, h("div", { key: '74b8a9626430847bf9dfb32d5188303427d2fd28', class: "option-info", onClick: (e) => this.handleOptionClick(e) }, h("slot", { key: '1dba6e28939841569f290c9fb18d3b7595bac06a', name: "image" }), h("cura-heading", { key: 'f7722edfd7ab87f7d9bacf475d988a1e80af41ef', size: "xsmall", lineHeight: "16px", marginBlock: "0px", weight: "bold", color: "neutral-black" }, h("slot", { key: 'db0385e5e3d2c450ba9a96d75e7913d2fe913d98' }))), h("slot", { key: '734b467cfce5ce114b06a10e3a153723da7ad41d', 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-title/cura-dropdown-search-option-title.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class CuraDropdownSearchOptionTitle {
     render() {
-        return (h(Host, { key: '5a6afd8afb971845aeef19cd4ea6fe7586a1fb4e', slot: "dropdown-search-option" }, h("cura-label", { key: '00f5bc78178b6b549eaee21f28dcdb28b539099b', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, h("slot", { key: '0d858d26544542c8c05686a879a44366318e86ce' }))));
+        return (h(Host, { key: 'e4929a8c5c1c1f11b3e51dc088b2dd506e1bdfa0', slot: "dropdown-search-option" }, h("cura-label", { key: '5bb5406c11a39a6a587737cf99eb1d2deb2ea0da', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, h("slot", { key: 'c781e560b512d5362370e9855551b3e088ffbec1' }))));
     }
     static get is() { return "cura-dropdown-search-option-title"; }
     static get encapsulation() { return "shadow"; }