@rededor/cura 1.2.0 → 1.4.0-alpha.0

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

@@ -14,7 +14,7 @@ export class CuraPageTemplate {
         return classes;
     }
     render() {
-        return (h(Host, { key: 'ab4b10fe60c2d8cac394e1d4ab9e9415901e5e80' }, h("div", { key: 'bb1136f5c7dff53c8de05a1e4c2a0a16416f1c6e', style: this.styles, class: "grid-template" }, h("div", { key: 'eab90c228293eb3213380d8f2d74231dce0a3723', id: "sub-header" }, h("slot", { key: '5857d627c6038ada32dacd9840fd51f002245215', name: 'sub-header' })), h("div", { key: '9ebdd52e3f31f24b5a45c855539ee5c68f16b099', id: "header" }, h("slot", { key: 'ea50789c8628109a2d599f2a8a94dc3ac54f8b43', name: 'header' })), h("div", { key: 'c37250f3054ba97f31f6b6cff428ffbdf96869e9', id: "pre-content" }, h("slot", { key: 'e2c81d9af2c587356b26eaff85dec7318ddf52e2', name: 'pre-content' })), h("div", { key: 'ddd4aa8338ce668e42511b38d6b5ee8012f01c5b', id: "content-container", class: this.getClasses() }, h("div", { key: '31ebabdf53749aec5b526308b063f3c2c0d4821b', id: "sidebar-left" }, h("slot", { key: '01a4ce493250b17e7bef8c173bc66a10217f2f53', name: 'sidebar-left' })), h("div", { key: 'bde5a719d07f67230a56192ecc412721ff4d36bb', id: "content" }, h("slot", { key: '3cf647a29db3e59ccc7827f3ec01d55fa0a90109', name: "content" }), h("slot", { key: '8f8d9b784f5d65bbedace6378f7df09cc659968a' })), h("div", { key: '1dd69a2f8d28faa4a204d024b5884bd4ec37bf42', id: "sidebar-right" }, h("slot", { key: '4052cf77ae1be773f58a0b9c6bf39960591e1aa8', name: 'sidebar-right' }))), h("div", { key: '76188d32df6addc6f41018ba2bcb869b0811eaf2', id: "post-body" }, h("slot", { key: 'a9aa2d75a63a204ff2e24f525e9a4cbbacbb2dfa', name: 'post-body' })), h("div", { key: 'bd12d4cc7c2cde9428565899f0f89aaf6eaee04c', id: "footer" }, h("slot", { key: '3797061c1debbe0f415771def9068e56c96f9a5a', name: 'footer' })), h("div", { key: 'b5f292bd394bebc7394769827730daa4496c66b2', id: "sub-footer" }, h("slot", { key: '20f8a50ea6c385a2c4348508c2aab8558d3139cf', name: 'sub-footer' })))));
+        return (h(Host, { key: 'd79c3d22ccbd93d8a56c700e3016507d18720464' }, h("div", { key: 'a717f44d6b5df9f00ffe61fff816721705748040', style: this.styles, class: "grid-template" }, h("div", { key: '7a3d585d4213799b32e2043327442b21833fd4fc', id: "sub-header" }, h("slot", { key: 'dbab9738fe221a426642e5d63e88130e1f351591', name: 'sub-header' })), h("div", { key: '39f2878cac260b70b8e53b57b6b9b5b07f658251', id: "header" }, h("slot", { key: '511af91f30dfcfde3ced7bce4c341a2802c88db8', name: 'header' })), h("div", { key: 'ed8d1b1e0d5ffca939c525ee8320da7f2afde95d', id: "pre-content" }, h("slot", { key: 'dd8c722ddd113f49965a6397625980aace8b78e8', name: 'pre-content' })), h("div", { key: '64a5767bbc858f18e44a3339b6bb567b3e5a8c0d', id: "content-container", class: this.getClasses() }, h("div", { key: '919e9d54e10f1469264f193545e80b680b63c801', id: "sidebar-left" }, h("slot", { key: '8ddeb7358bd9f6d0e08b1e3f323219b8980eec9c', name: 'sidebar-left' })), h("div", { key: '48e3860c1674658c386124c80a35b85bdb085e3e', id: "content" }, h("slot", { key: '8bc21a187897a5e9cd2e922285364a02425cefa6', name: "content" }), h("slot", { key: '587d13eed3fedcbf9e33dc4084cb2554ba70125d' })), h("div", { key: '7f620fd04b4cf4a051954dca8a95293c2a7c1d9a', id: "sidebar-right" }, h("slot", { key: '3499275e67a00fcaab4f044535dbeb19c1040569', name: 'sidebar-right' }))), h("div", { key: '59b9e4a5fe541f2ad6dac53a40588482b33e0cad', id: "post-body" }, h("slot", { key: '7493b3b330cabf263990a149c1b526501260de95', name: 'post-body' })), h("div", { key: '4a35c95f7ad04f04bb8673babc06d243e1b8f931', id: "footer" }, h("slot", { key: 'f69ffbd9c9cabe72e1ee4f147f7a1448311a7f0c', name: 'footer' })), h("div", { key: 'd53b60b2d9170797e7dc12b3179c24b7f76ac41d', id: "sub-footer" }, h("slot", { key: '75dcebb2f223ed1d0b1181ea3773fbb6bf096e33', name: 'sub-footer' })))));
     }
     static get is() { return "cura-page-template"; }
     static get encapsulation() { return "shadow"; }

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

@@ -21,7 +21,7 @@ export class CuraToast {
         this.setStyle();
     }
     render() {
-        return (h(Host, { key: 'b875e88d00075a71d6052563a45849f0b3124f13' }, h("div", { key: 'e766c7a687ec1f9ad943dc4e2ebb87c100da5b71', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: '9379419d8403c5c7b14182bb136cd3375f8aa09a', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), h("div", { key: '38f2a177984d826209d6fbdc9ad3036ef02a1825', class: "content" }, h("cura-heading", { key: 'a4fd1cce18d6208daa527b8da5687b47fbb59968', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: 'fb803bbcbe47f1d2eca897ca5679d71294fe59ab', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '9ea56d9f87a423b109945cd4cf4078347a9fc1e9' })), h("slot", { key: '045b4ae11997260832288428df6672be6e918730', name: "actions" })), this.closeButton && h("cura-icon", { key: 'e326bb7786f60c95bed9d910e46f47bb4273bb7b', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && h("cura-loader-bar", { key: 'bf1d59681ac35d79fe240777e5d5424ee2b4a4e7', color: `${this.type}-base`, progress: this.progress }))));
+        return (h(Host, { key: '467952f8386d659d44090163f3e14c0231dfcafd' }, h("div", { key: 'f510e12d309c79842d30cc24409b61433a6fe58e', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: 'acd2a9d52ad91565c7bd36bc205753bdfe6e3e59', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), h("div", { key: 'dced39ca17901673360dacbf27764b1387eff20d', class: "content" }, h("cura-heading", { key: '6ac55c8ae757f654c808b72b4f44b54dc822107c', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: 'e8e83b891e0b7e02901999f1622a183afc94c28e', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '080891767b1b552520d7d3ed59002a9478eb0288' })), h("slot", { key: '0a43f99bbaf2e4cdd2fd7dc1d5a0431602b76361', name: "actions" })), this.closeButton && h("cura-icon", { key: '1ec27e6d6d44b82ed26a59cb6ba967858b4c8809', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && h("cura-loader-bar", { key: '6457bb003e4706d3f60b85aa3faa3e0b6b276869', color: `${this.type}-base`, progress: this.progress }))));
     }
     componentDidLoad() {
         this.openContainer();

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

@@ -0,0 +1,159 @@
+/* Breakpoints variables */
+/**
+ * Responsive media for mobile (small) only.
+ * Use: @include mobile-only() { ... }
+ */
+/**
+ * Responsive media for medium only.
+ * Use: @include medium-only() { ... }
+ */
+/**
+ * Responsive media for large only.
+ * Use: @include large-only() { ... }
+ */
+/**
+ * Responsive media for xlarge only.
+ * Use: @include xlarge-only() { ... }
+ */
+/**
+ * Responsive media for medium to large.
+ * Use: @include medium-large() { ... }
+ */
+/**
+ * Responsive media for large and up.
+ * Use: @include large-up() { ... }
+ */
+/**
+ * Global Shadow Level Definitions.
+ * Required CSS Properties with respective opacities:
+ * --neutral-black,
+ * --neutral-purewhite,
+ * --accent-base
+ * --primary-base
+ */
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --neutral-purewhite opacity: 0.2
+ * Use: @include shadow-level1(){ ... }
+ */
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --neutral-black opacity: 0.16
+ * Use: @include shadow-level2(--neutral-black-shadow){ ... }
+ */
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --neutral-black opacity: 0.16
+ * Use: @include shadow-level3(--neutral-black-shadow){ ... }
+ */
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --neutral-black opacity: 0.12
+ * Use: @include shadow-level4(){ ... }
+ */
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --neutral-black opacity: 0.8
+ * Use: @include shadow-level5(){ ... }
+ */
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --accent-base opacity: 0.2
+ * Use: @include shadow-level5-accent(){ ... }
+ */
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --primary-base opacity: 0.16
+ * Use: @include shadow-level3-primary(){ ... }
+ */
+/**
+ * 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 {
+  position: absolute;
+  z-index: 99999;
+  display: block;
+  width: fit-content;
+  height: fit-content;
+  box-sizing: border-box;
+}
+@media (max-width: 768px) {
+  :host {
+    width: 100%;
+  }
+}
+:host .container {
+  display: flex;
+  box-sizing: border-box;
+  max-width: var(--max-width);
+  height: auto;
+  padding: calc(var(--base-spacing) * 2px);
+  border: 1px solid var(--neutral-light);
+  border-radius: calc(var(--base-spacing) * 1px);
+  background-color: var(--neutral-purewhite);
+  box-shadow: 0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16));
+}
+@media (max-width: 768px) {
+  :host .container {
+    max-width: 90%;
+    height: fit-content;
+    padding: calc(var(--base-spacing) * 4px) calc(var(--base-spacing) * 4px) 0 calc(var(--base-spacing) * 4px);
+    margin: 0 auto;
+    border: 2px solid;
+    border-radius: calc(var(--base-spacing) * 3px) calc(var(--base-spacing) * 3px) 0 0;
+    border-color: var(--neutral-light) var(--neutral-light) transparent var(--neutral-light);
+  }
+}
+:host .container::after {
+  content: "";
+  position: absolute;
+  z-index: 99999;
+  width: calc(var(--base-spacing) * 2.5px);
+  height: calc(var(--base-spacing) * 2.5px);
+  border: 1px solid;
+  border-radius: 2px;
+  background-color: var(--neutral-purewhite);
+  left: var(--arrow-left);
+  top: var(--arrow-top);
+  border-color: var(--arrow-border-color);
+  transform: var(--arrow-translate) rotate(45deg);
+}
+@media (max-width: 768px) {
+  :host .container::after {
+    display: none;
+  }
+}
+:host .container .content {
+  flex: 1 1 0;
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--base-spacing) * 1px);
+}
+@media (max-width: 768px) {
+  :host .container .content {
+    padding-bottom: calc(var(--base-spacing) * 4px);
+    border-bottom: 1px dashed var(--neutral-light);
+  }
+}
+:host .container .close-icon {
+  margin-left: calc(var(--base-spacing) * 3px);
+  cursor: pointer;
+}
+:host .container .close-button {
+  padding: calc(var(--base-spacing) * 2px) 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: '732345360f527ffc69743818657643616b2ee611', role: "tooltip", id: this.elementId }, h("div", { key: '166aa0dd54c933f8b3b8ecc5c5c76824ef180d71', class: "container", style: this.styles }, h("div", { key: '7b54ec53f3b454979c45415ddcd164a71a9ab2b0', class: "content" }, h("cura-heading", { key: '71bf328ed2f9e5d704e6d06989a4bef6d7c4993d', level: 4, size: "xsmall", color: "neutral-black", weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: 'a427a4b9df7bfae50300c9947db9df825a2f7da0', color: "neutral-dark", "spot-color": "secondary-darker", size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '65875debf5bd3eec9f3070ab96cf644460897c3b' }))), this.closeButton && !this.isMobile && h("cura-icon", { key: 'dac8229dc0f348b45ea3af9392c2001f638a0efb', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.isMobile && h("cura-button-transparent", { key: '6c90921145206d47ab84eaee972a08b9dcad7cf0', 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":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAgB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEtG,MAAM,oBAAoB,GAAG,GAAG,CAAC;AAOjC,MAAM,OAAO,WAAW;;QAiBtB,WAAM,GAAG,EAAE,CAAC;QAuQZ,gBAAW,GAAG,GAAG,EAAE;YACjB,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC,CAAC;yBAvRkB,EAAE;2BACA,IAAI;qBACV,GAAG;wBACA,OAAO;wBACmK,KAAK;;2BAE3J,KAAK;wBAExB,KAAK;;IASzB,cAAc;QACZ,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IACvC,CAAC;IAGD,cAAc;QACZ,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IACvC,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,SAAS,EAAC,EAAE,EAAE,IAAI,CAAC,SAAS;YACrC,4DAAK,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM;gBACvC,4DAAK,KAAK,EAAC,SAAS;oBAClB,qEAAc,KAAK,EAAE,CAAC,EAAE,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,eAAe,EAAC,MAAM,EAAC,MAAM,kBAAc,GAAG,IACvF,IAAI,CAAC,KAAK,CACE;oBACf,uEAAgB,KAAK,EAAC,cAAc,gBAAY,kBAAkB,EAAC,IAAI,EAAC,QAAQ,EAAC,WAAW,EAAC,GAAG,EAAC,UAAU,EAAC,SAAS;wBACnH,8DAAa,CACE,CACb;gBACP,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,kEAAW,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,GAAc;gBACrJ,IAAI,CAAC,QAAQ,IAAI,gFAAyB,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,OAAO,eAAW,OAAO,mBAAe,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,mBAAwC,CAC5M,CACD,CACR,CAAC;IACJ,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,qBAAqB,IAAI,CAAC,SAAS,IAAI,CAAgB,CAAC;QAEpG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YACtB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS,CAAC;QACzC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;YAEtC,IAAI,aAAa,GAAG,IAAI,CAAC;YACzB,IAAI,cAAc,GAAG,IAAI,CAAC;YAE1B,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE;gBACrD,YAAY,CAAC,cAAc,CAAC,CAAC;gBAC7B,aAAa,GAAG,UAAU,CAAC,GAAG,EAAE;oBAC9B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS,CAAC;gBACzC,CAAC,EAAE,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;YAC5E,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE;gBACrD,YAAY,CAAC,aAAa,CAAC,CAAC;gBAC5B,cAAc,GAAG,UAAU,CAAC,GAAG,EAAE;oBAC/B,IAAI,CAAC,WAAW,EAAE,CAAC;gBACrB,CAAC,EAAE,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;YAC5E,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE;gBAC5C,IAAI,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,UAAU,KAAK,SAAS,EAAE,CAAC;oBAChE,YAAY,CAAC,cAAc,CAAC,CAAC;gBAC/B,CAAC;YACH,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE;gBAC5C,YAAY,CAAC,aAAa,CAAC,CAAC;gBAC5B,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;gBAChD,IAAI,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,UAAU,KAAK,QAAQ,EAAE,CAAC;oBAC/D,aAAa,GAAG,UAAU,CAAC,GAAG,EAAE;wBAC9B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS,CAAC;oBACzC,CAAC,EAAE,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;gBAC5E,CAAC;qBAAM,CAAC;oBACR,YAAY,CAAC,aAAa,CAAC,CAAC;oBAC1B,IAAI,CAAC,WAAW,EAAE,CAAC;gBACrB,CAAC;YACH,CAAC,CAAC,CAAC;YAEH,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAAiB,EAAE,EAAE;gBACvD,IAAG,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAqB,CAAC,EAAE,CAAC;oBACjH,YAAY,CAAC,aAAa,CAAC,CAAC;oBAC5B,IAAI,CAAC,WAAW,EAAE,CAAC;gBACrB,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;QAED,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACvC,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,aAAa,EAAE,IAAI,CAAC,QAAQ,EAC5B,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,EAC3D,qBAAqB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,mBAAmB,CAAC,EAChF,iBAAiB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,EACxE,wBAAwB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,EAAE,IAAI,CAAC,GACtF,CAAA;IACH,CAAC;IAED,UAAU;QACR,MAAM,CAAC,aAAa,EAAE,cAAc,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACjE,MAAM,OAAO,GAAG,EAAE,CAAC;QAEnB,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;QAC5B,IAAI,aAAa,EAAE,CAAC;YAAC,OAAO,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC;QAAC,CAAC;QACrD,IAAI,cAAc,EAAE,CAAC;YAAC,OAAO,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC;QAAC,CAAC;QAEvD,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,WAAW,CAAC,OAAoB;QAC9B,MAAM,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;QACtC,MAAM,YAAY,GAAG,MAAM,CAAC,WAAW,CAAC;QACxC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAgB,CAAC;QAElF,IAAI,CAAC,QAAQ,GAAG,WAAW,IAAI,oBAAoB,CAAC;QAEpD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC;QAChE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC;QACvD,SAAS,CAAC,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;QAEjE,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,OAAO,CAAC;YAC/B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,OAAO,CAAC;YAC9B,OAAO;QACT,CAAC;QAED,MAAM,WAAW,GAAG;YAClB,GAAG,EAAE,OAAO,CAAC,SAAS;YACtB,IAAI,EAAE,OAAO,CAAC,UAAU;YACxB,KAAK,EAAE,OAAO,CAAC,WAAW;YAC1B,MAAM,EAAE,OAAO,CAAC,YAAY;SAC7B,CAAC;QACF,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAEtD,MAAM,YAAY,GAAG,EAAE,CAAC;QACxB,MAAM,gBAAgB,GAAG,EAAE,CAAC;QAC5B,MAAM,2BAA2B,GAAG,CAAC,WAAW,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,EAAE,CAAC;QACnE,MAAM,yBAAyB,GAAG,CAAC,WAAW,CAAC,MAAM,GAAG,GAAG,CAAC,GAAG,EAAE,CAAC;QAClE,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;QAEpD,IAAI,IAAI,GAAG,CAAC,CAAC;QACb,IAAI,GAAG,GAAG,CAAC,CAAC;QAEZ,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;QAE/H,MAAM,kBAAkB,GAAG,CAAC,EAAE,QAAQ,GAAG,EAAE,EAAE,SAAS,GAAG,EAAE,EAAE,SAAS,GAAG,EAAE,EAAE,WAAW,GAAG,EAAE,EAAE,EAAE,EAAE;YACjG,IAAI,SAAS;gBAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC;YACtE,IAAI,QAAQ;gBAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;YACnE,IAAI,SAAS;gBAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC;YAC3E,IAAI,WAAW;gBAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,WAAW,CAAC,CAAC;QACpF,CAAC,CAAC;QAEF,yBAAyB;QACzB,IAAI,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC9D,kBAAkB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC,CAAC;YAExE,IAAI,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC9B,GAAG,GAAG,WAAW,CAAC,GAAG,GAAG,WAAW,CAAC,MAAM,GAAG,gBAAgB,CAAC;gBAC9D,kBAAkB,CAAC,EAAE,QAAQ,EAAE,kBAAkB,EAAE,WAAW,EAAE,eAAe,YAAY,IAAI,YAAY,cAAc,EAAE,CAAC,CAAC;gBAE7H,IAAI,GAAG,GAAG,YAAY,EAAE,CAAC;oBACvB,GAAG,GAAG,WAAW,CAAC,GAAG,GAAG,WAAW,CAAC,MAAM,GAAG,gBAAgB,CAAC;oBAC9D,kBAAkB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,YAAY,4BAA4B,YAAY,EAAE,EAAE,CAAC,CAAC;gBACnH,CAAC;YACH,CAAC;YAED,IAAI,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;gBACjC,GAAG,GAAG,WAAW,CAAC,GAAG,GAAG,WAAW,CAAC,MAAM,GAAG,gBAAgB,CAAC;gBAC9D,kBAAkB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,YAAY,4BAA4B,YAAY,EAAE,EAAE,CAAC,CAAC;gBAEjH,IAAI,GAAG,GAAG,WAAW,CAAC,MAAM,GAAG,YAAY,GAAG,YAAY,EAAE,CAAC;oBAC3D,GAAG,GAAG,WAAW,CAAC,GAAG,GAAG,WAAW,CAAC,MAAM,GAAG,gBAAgB,CAAC;oBAC9D,kBAAkB,CAAC,EAAE,QAAQ,EAAE,kBAAkB,EAAE,WAAW,EAAE,eAAe,YAAY,IAAI,YAAY,cAAc,EAAE,CAAC,CAAC;gBAC/H,CAAC;YACH,CAAC;YAED,IAAI,GAAG,WAAW,CAAC,IAAI,GAAG,CAAC,WAAW,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK,CAAC,GAAC,CAAC,CAAC;YAEpE,IAAI,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC;gBAChC,IAAI,GAAG,WAAW,CAAC,IAAI,GAAG,WAAW,CAAC,KAAK,GAAG,2BAA2B,CAAC;gBAC1E,kBAAkB,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC,CAAC;gBAEvD,IAAI,IAAI,GAAG,YAAY,EAAE,CAAC;oBACxB,IAAI,GAAG,WAAW,CAAC,IAAI,GAAG,WAAW,CAAC,KAAK,GAAG,2BAA2B,CAAC;oBAC1E,kBAAkB,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,CAAC;gBAC5C,CAAC;YACH,CAAC;YAED,IAAI,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC9B,IAAI,GAAG,WAAW,CAAC,IAAI,GAAG,WAAW,CAAC,KAAK,GAAG,2BAA2B,CAAC;gBAC1E,kBAAkB,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,CAAC;gBAE1C,IAAI,IAAI,GAAG,WAAW,CAAC,KAAK,GAAG,WAAW,GAAG,YAAY,EAAE,CAAC;oBAC1D,IAAI,GAAG,WAAW,CAAC,IAAI,GAAG,WAAW,CAAC,KAAK,GAAG,2BAA2B,CAAC;oBAC1E,kBAAkB,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC,CAAC;gBACzD,CAAC;YACH,CAAC;QACH,CAAC;QAED,2BAA2B;QAC3B,IAAI,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;YAC9D,kBAAkB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC,CAAC;YAEvE,IAAI,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC;gBAChC,IAAI,GAAG,WAAW,CAAC,IAAI,GAAG,WAAW,CAAC,KAAK,GAAG,gBAAgB,CAAC;gBAC/D,kBAAkB,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,2BAA2B,YAAY,IAAI,YAAY,EAAE,EAAE,CAAC,CAAC;gBAElH,IAAI,IAAI,GAAG,WAAW,CAAC,KAAK,GAAG,WAAW,GAAG,YAAY,EAAE,CAAC;oBAC1D,IAAI,GAAG,WAAW,CAAC,IAAI,GAAG,WAAW,CAAC,KAAK,GAAG,gBAAgB,CAAC;oBAC/D,kBAAkB,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,WAAW,EAAE,GAAG,YAAY,IAAI,YAAY,0BAA0B,EAAE,CAAC,CAAC;gBAChI,CAAC;YACH,CAAC;YAED,IAAI,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;gBAC/B,IAAI,GAAG,WAAW,CAAC,IAAI,GAAG,WAAW,CAAC,KAAK,GAAG,gBAAgB,CAAC;gBAC/D,kBAAkB,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,WAAW,EAAE,GAAG,YAAY,IAAI,YAAY,0BAA0B,EAAE,CAAC,CAAC;gBAE9H,IAAI,IAAI,GAAG,YAAY,EAAE,CAAC;oBACxB,IAAI,GAAG,WAAW,CAAC,IAAI,GAAG,WAAW,CAAC,KAAK,GAAG,gBAAgB,CAAC;oBAC/D,kBAAkB,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,2BAA2B,YAAY,IAAI,YAAY,EAAE,EAAE,CAAC,CAAC;gBACpH,CAAC;YACH,CAAC;YAED,GAAG,GAAG,WAAW,CAAC,GAAG,GAAG,CAAC,WAAW,CAAC,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC,GAAC,CAAC,CAAC;YAEpE,IAAI,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC;gBAChC,GAAG,GAAG,WAAW,CAAC,GAAG,GAAG,WAAW,CAAC,MAAM,GAAG,yBAAyB,CAAC;gBACvE,kBAAkB,CAAC,EAAE,QAAQ,EAAE,mBAAmB,EAAE,CAAC,CAAC;gBAEtD,IAAI,GAAG,GAAG,YAAY,EAAE,CAAC;oBACvB,GAAG,GAAG,WAAW,CAAC,GAAG,GAAG,WAAW,CAAC,MAAM,GAAG,yBAAyB,CAAC;oBACvE,kBAAkB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC;gBAC3C,CAAC;YACH,CAAC;YAED,IAAI,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC9B,GAAG,GAAG,WAAW,CAAC,GAAG,GAAG,WAAW,CAAC,MAAM,GAAG,yBAAyB,CAAC;gBACvE,kBAAkB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC;gBAEzC,IAAI,GAAG,GAAG,WAAW,CAAC,MAAM,GAAG,YAAY,GAAG,YAAY,EAAE,CAAC;oBAC3D,GAAG,GAAG,WAAW,CAAC,GAAG,GAAG,WAAW,CAAC,MAAM,GAAG,yBAAyB,CAAC;oBACvE,kBAAkB,CAAC,EAAE,QAAQ,EAAE,mBAAmB,EAAE,CAAC,CAAC;gBACxD,CAAC;YACH,CAAC;QACH,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,IAAI,IAAI,CAAC;QACnC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IACnC,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;QACtC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;IAC5B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKF","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"]}