@rededor/cura 1.8.3-alpha.0 → 2.0.0-alpha.11

package/dist/collection/components/cura-dropdown-search/cura-dropdown-search.js

@@ -72,6 +72,13 @@ export class CuraDropdownSearch {
                 this.setZoomHeight();
             }, this.resizeTimeoutMs);
         };
+        this.handleVisualViewportChange = () => {
+            if (!this.zoomState)
+                return;
+            if (this.viewportTimeout)
+                clearTimeout(this.viewportTimeout);
+            this.viewportTimeout = setTimeout(() => this.setZoomHeight(), this.resizeTimeoutMs);
+        };
         this.handleFocus = () => {
             if (this.focusTimeout)
                 clearTimeout(this.focusTimeout);
@@ -170,6 +177,10 @@ export class CuraDropdownSearch {
         this.styles['--font-weight-medium'] = this.weights.medium;
         window === null || window === void 0 ? void 0 : window.addEventListener('resize', this.handleWindowResize);
         window === null || window === void 0 ? void 0 : window.addEventListener('orientationchange', this.handleWindowResize);
+        if (window === null || window === void 0 ? void 0 : window.visualViewport) {
+            window.visualViewport.addEventListener('resize', this.handleVisualViewportChange);
+            window.visualViewport.addEventListener('scroll', this.handleVisualViewportChange);
+        }
         this.isMobile = checkMobile();
     }
     componentDidLoad() {
@@ -186,6 +197,10 @@ export class CuraDropdownSearch {
     removeAllListeners() {
         window === null || window === void 0 ? void 0 : window.removeEventListener('resize', this.handleWindowResize);
         window === null || window === void 0 ? void 0 : window.removeEventListener('orientationchange', this.handleWindowResize);
+        if (window === null || window === void 0 ? void 0 : window.visualViewport) {
+            window.visualViewport.removeEventListener('resize', this.handleVisualViewportChange);
+            window.visualViewport.removeEventListener('scroll', this.handleVisualViewportChange);
+        }
         this.host.removeEventListener('actionclick', this.handleOptionActionClick);
         this.host.removeEventListener('selectoption', this.handleSelectOption);
     }
@@ -231,7 +246,9 @@ export class CuraDropdownSearch {
             if (this.valueTimeout)
                 clearTimeout(this.valueTimeout);
             this.valueTimeout = setTimeout(() => {
-                this.termchange.emit(this.value === '' || this.value.length < this.searchminchars ? '' : this.value);
+                var _a;
+                const value = (_a = this.value) !== null && _a !== void 0 ? _a : '';
+                this.termchange.emit(value === '' || value.length < this.searchminchars ? '' : value);
             }, this.searchdelay || 300);
         }
     }
@@ -290,9 +307,14 @@ export class CuraDropdownSearch {
         setTimeout(() => { this.zoomState = false; }, 300);
     }
     setZoomHeight() {
-        var _a;
-        const h = window ? `${((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || window.innerHeight}px` : '100vh';
-        this.styles = Object.assign(Object.assign({}, this.styles), { '--height': h });
+        if (window === null || window === void 0 ? void 0 : window.visualViewport) {
+            const height = `${window.visualViewport.height}px`;
+            const topOffset = `${window.visualViewport.offsetTop}px`;
+            this.styles = Object.assign(Object.assign({}, this.styles), { '--height': height, '--top-offset': topOffset });
+            return;
+        }
+        const h = window ? `${window.innerHeight}px` : '100vh';
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--height': h, '--top-offset': '0px' });
     }
     getClasses() {
         return {
@@ -309,7 +331,7 @@ export class CuraDropdownSearch {
         };
     }
     render() {
-        return (h(Host, { key: '06350dc474b86ca27d1f78559fc6296fbc3aa73e', style: this.getHostCSSProperties(), role: "search", "aria-label": this.label, "aria-required": this.required, "aria-disabled": this.disabled, "aria-expanded": this.zoomState }, h("div", { key: 'e5cc22f978f014b4fb5bd9d33c73154d19991ef3', class: this.getClasses(), style: this.styles }, h("div", { key: '2f0ccd3de2ab3dd3b5b93f5225c25c6dbec517c1', class: "component-controls" }, this.isMobile && this.zoomState ? (h("cura-button-transparent", { fontColor: "dark", onClick: () => this.handleBackClick(), iconName: "arrowLeft", size: "large", iconOnly: true, color: "primary", id: "button-back" })) : '', h("cura-input-text", { key: '9c98bf9e910d5503e93addc3d34ae9739bccf9ab', disabled: this.disabled, label: this.label, part: "cura-input-field", mode: this.zoomState ? 'transparent' : 'default', required: this.required, iconName: this.icon || 'search', value: this.value, status: this.status, onValueChange: (ev) => this.handleInputValueChange(ev), onInput: (ev) => this._preventEvent(ev), onFocus: () => this.handleFocus(), onClick: (ev) => this._preventEvent(ev), onBlur: () => this.handleBlur(), onFocusout: () => this.handleFocusout(), onInputClear: (ev) => this.handleInputClear(ev), placeholder: this.placeholder, size: this.size, onKeyDown: (ev) => this.handleKeyDown(ev) }, h("slot", { key: 'e6c0a8578436f1fa1392defb6fc7b0126bb3ae33', name: "helperText" }))), h("div", { key: '06c4fb438972a42558072600bf91af9b5c94a538', class: "dropdown-container", onMouseOver: () => this.handleDropdownMouseOver() }, h("slot", { key: 'c0a63a14785e15a6fcb555732f47efa94efec930', onSlotchange: () => this.handleSlotChange() })))));
+        return (h(Host, { key: '7a312071ecc60fe462636ad7b32bcb82b5d5c1a2', style: this.getHostCSSProperties(), role: "search", "aria-label": this.label, "aria-required": this.required, "aria-disabled": this.disabled, "aria-expanded": this.zoomState }, h("div", { key: 'c4b906871b300013208649f8dcf9b27cf161daae', class: this.getClasses(), style: this.styles }, h("div", { key: '97d3d3ae67dc79f2d04456555388cce9aec36f7d', class: "component-controls" }, this.isMobile && this.zoomState ? (h("cura-button-transparent", { fontColor: "dark", onClick: () => this.handleBackClick(), iconName: "arrowLeft", size: "large", iconOnly: true, color: "primary", id: "button-back" })) : '', h("cura-input-text", { key: '53aa07646542b9941804f7a7f0d66f8c340ce664', disabled: this.disabled, label: this.label, part: "cura-input-field", mode: this.zoomState ? 'transparent' : 'default', required: this.required, iconName: this.icon || 'search', value: this.value, status: this.status, onValueChange: (ev) => this.handleInputValueChange(ev), onInput: (ev) => this._preventEvent(ev), onFocus: () => this.handleFocus(), onClick: (ev) => this._preventEvent(ev), onBlur: () => this.handleBlur(), onFocusout: () => this.handleFocusout(), onInputClear: (ev) => this.handleInputClear(ev), placeholder: this.placeholder, size: this.size, onKeyDown: (ev) => this.handleKeyDown(ev) }, h("slot", { key: 'fb206e8295b0139082b79cc747bfe8e424df33fa', name: "helperText" }))), h("div", { key: '8ab0ad70e667c4b01b2f7a31fc5df6056b170565', class: "dropdown-container", onMouseOver: () => this.handleDropdownMouseOver() }, h("slot", { key: 'dc3cda02f7a70d7229457d6c225a606ee2e03f52', onSlotchange: () => this.handleSlotChange() })))));
     }
     static get is() { return "cura-dropdown-search"; }
     static get encapsulation() { return "shadow"; }
@@ -327,7 +349,6 @@ export class CuraDropdownSearch {
         return {
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -342,11 +363,11 @@ export class CuraDropdownSearch {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "name"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'small' | 'medium' | 'large' | string",
@@ -362,11 +383,11 @@ export class CuraDropdownSearch {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "size",
                 "defaultValue": "'large'"
             },
             "status": {
                 "type": "string",
-                "attribute": "status",
                 "mutable": true,
                 "complexType": {
                     "original": "'error' | 'default' | string",
@@ -382,11 +403,11 @@ export class CuraDropdownSearch {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "status",
                 "defaultValue": "'default'"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -402,11 +423,11 @@ export class CuraDropdownSearch {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "required": {
                 "type": "boolean",
-                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -422,11 +443,11 @@ export class CuraDropdownSearch {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "required",
                 "defaultValue": "false"
             },
             "placeholder": {
                 "type": "string",
-                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -442,11 +463,11 @@ export class CuraDropdownSearch {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "placeholder",
                 "defaultValue": "''"
             },
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -462,11 +483,11 @@ export class CuraDropdownSearch {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "label",
                 "defaultValue": "''"
             },
             "icon": {
                 "type": "string",
-                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -482,11 +503,11 @@ export class CuraDropdownSearch {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "icon",
                 "defaultValue": "'search'"
             },
             "maxheight": {
                 "type": "string",
-                "attribute": "maxheight",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -502,11 +523,11 @@ export class CuraDropdownSearch {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "maxheight",
                 "defaultValue": "'400px'"
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -522,11 +543,11 @@ export class CuraDropdownSearch {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "value",
                 "defaultValue": "''"
             },
             "searchdelay": {
                 "type": "number",
-                "attribute": "searchdelay",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -542,11 +563,11 @@ export class CuraDropdownSearch {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "searchdelay",
                 "defaultValue": "400"
             },
             "searchminchars": {
                 "type": "number",
-                "attribute": "searchminchars",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -562,6 +583,7 @@ export class CuraDropdownSearch {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "searchminchars",
                 "defaultValue": "3"
             }
         };
@@ -651,4 +673,3 @@ export class CuraDropdownSearch {
     }
     static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=cura-dropdown-search.js.map

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

@@ -286,4 +286,3 @@ export const DropdownSearchNew = {
         cssMaxHeight: ''
     }
 };
-//# sourceMappingURL=cura-dropdown-search.stories.js.map

package/dist/collection/components/cura-icon/cura-icon.definitions.js

@@ -11,4 +11,3 @@ export const iconSizes = {
     "micro": { size: 12, stroke: 1.25 },
     "default": { size: 24, stroke: 2 }
 };
-//# sourceMappingURL=cura-icon.definitions.js.map

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

@@ -44,7 +44,6 @@ export class CuraIcon {
         return {
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -60,11 +59,11 @@ export class CuraIcon {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "name",
                 "defaultValue": "''"
             },
             "color": {
                 "type": "string",
-                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -80,11 +79,11 @@ export class CuraIcon {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "color",
                 "defaultValue": "'neutral-base'"
             },
             "size": {
                 "type": "any",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "string | number",
@@ -99,11 +98,11 @@ export class CuraIcon {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "size"
             },
             "iconset": {
                 "type": "string",
-                "attribute": "iconset",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -119,11 +118,11 @@ export class CuraIcon {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "iconset",
                 "defaultValue": "'default'"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -139,6 +138,7 @@ export class CuraIcon {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             }
         };
@@ -157,4 +157,3 @@ export class CuraIcon {
             }];
     }
 }
-//# sourceMappingURL=cura-icon.js.map

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

@@ -71,4 +71,3 @@ export const Icon = {
         disabled: false,
     },
 };
-//# sourceMappingURL=cura-icon.stories.js.map

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

@@ -34,4 +34,3 @@ export class CuraIconsView {
         };
     }
 }
-//# sourceMappingURL=cura-icons-view.js.map

package/dist/collection/components/cura-icons-view/cura-icons-view.stories.js

@@ -8,4 +8,3 @@ export default {
     },
 };
 export const IconsetDefault = {};
-//# sourceMappingURL=cura-icons-view.stories.js.map

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

@@ -117,7 +117,6 @@ export class CuraModal {
         return {
             "open": {
                 "type": "boolean",
-                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -133,11 +132,11 @@ export class CuraModal {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "open",
                 "defaultValue": "false"
             },
             "background": {
                 "type": "string",
-                "attribute": "background",
                 "mutable": false,
                 "complexType": {
                     "original": "'dark' | 'light'",
@@ -153,11 +152,11 @@ export class CuraModal {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "background",
                 "defaultValue": "'light'"
             },
             "top": {
                 "type": "number",
-                "attribute": "top",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -173,11 +172,11 @@ export class CuraModal {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "top",
                 "defaultValue": "0"
             },
             "bottom": {
                 "type": "number",
-                "attribute": "bottom",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -193,11 +192,11 @@ export class CuraModal {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "bottom",
                 "defaultValue": "0"
             },
             "left": {
                 "type": "number",
-                "attribute": "left",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -213,11 +212,11 @@ export class CuraModal {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "left",
                 "defaultValue": "0"
             },
             "right": {
                 "type": "number",
-                "attribute": "right",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -233,11 +232,11 @@ export class CuraModal {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "right",
                 "defaultValue": "0"
             },
             "mobileCloseLabel": {
                 "type": "string",
-                "attribute": "mobile-close-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -253,11 +252,11 @@ export class CuraModal {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "mobile-close-label",
                 "defaultValue": "'Fechar'"
             },
             "canClose": {
                 "type": "boolean",
-                "attribute": "can-close",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -273,11 +272,11 @@ export class CuraModal {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "can-close",
                 "defaultValue": "true"
             },
             "zindex": {
                 "type": "string",
-                "attribute": "zindex",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -293,6 +292,7 @@ export class CuraModal {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "zindex",
                 "defaultValue": "'100'"
             }
         };
@@ -339,4 +339,3 @@ export class CuraModal {
             }];
     }
 }
-//# sourceMappingURL=cura-modal.js.map

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

@@ -146,4 +146,3 @@ export const CuraModal = {
         zindex: '100',
     },
 };
-//# sourceMappingURL=cura-modal.stories.js.map

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

@@ -32,7 +32,6 @@ export class CuraPageTemplate {
         return {
             "contentwidth": {
                 "type": "string",
-                "attribute": "contentwidth",
                 "mutable": false,
                 "complexType": {
                     "original": "'default' | 'centered'",
@@ -48,10 +47,10 @@ export class CuraPageTemplate {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "contentwidth",
                 "defaultValue": "'default'"
             }
         };
     }
     static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=cura-page-template.js.map

package/dist/collection/components/cura-stepper/cura-progress-bar/cura-progress-bar.js

@@ -33,7 +33,6 @@ export class CuraProgressBar {
         return {
             "progressColor": {
                 "type": "string",
-                "attribute": "progress-color",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -48,11 +47,11 @@ export class CuraProgressBar {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "progress-color"
             },
             "progress": {
                 "type": "number",
-                "attribute": "progress",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -67,11 +66,11 @@ export class CuraProgressBar {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "progress"
             },
             "size": {
                 "type": "number",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -87,11 +86,11 @@ export class CuraProgressBar {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "size",
                 "defaultValue": "40"
             },
             "strokeWidth": {
                 "type": "number",
-                "attribute": "stroke-width",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -107,11 +106,11 @@ export class CuraProgressBar {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "stroke-width",
                 "defaultValue": "3.25"
             },
             "active": {
                 "type": "boolean",
-                "attribute": "active",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -126,9 +125,9 @@ export class CuraProgressBar {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "active"
             }
         };
     }
 }
-//# sourceMappingURL=cura-progress-bar.js.map

package/dist/collection/components/cura-stepper/cura-stepper-item/cura-stepper-item.js

@@ -82,7 +82,6 @@ export class CuraStepperItem {
         return {
             "displayHeading": {
                 "type": "boolean",
-                "attribute": "display-heading",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -98,11 +97,11 @@ export class CuraStepperItem {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "display-heading",
                 "defaultValue": "false"
             },
             "heading": {
                 "type": "string",
-                "attribute": "heading",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -117,11 +116,11 @@ export class CuraStepperItem {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "heading"
             },
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -136,11 +135,11 @@ export class CuraStepperItem {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "label"
             },
             "status": {
                 "type": "string",
-                "attribute": "status",
                 "mutable": false,
                 "complexType": {
                     "original": "'done' | 'stop' | 'active' | 'default'",
@@ -156,6 +155,7 @@ export class CuraStepperItem {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "status",
                 "defaultValue": "'default'"
             }
         };
@@ -167,4 +167,3 @@ export class CuraStepperItem {
     }
     static get elementRef() { return "hostElement"; }
 }
-//# sourceMappingURL=cura-stepper-item.js.map