npm - @rededor/cura - Versions diffs - 1.4.0 → 1.5.0-alpha.0 - Mend

@rededor/cura 1.4.0 → 1.5.0-alpha.0

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

Files changed (266) hide show

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

@@ -5,7 +5,7 @@ import { d as defineCustomElement$4 } from './cura-input-text2.js';
 import { d as defineCustomElement$3 } from './cura-label2.js';
 import { d as defineCustomElement$2 } from './cura-loader-circle2.js';
-const curaDropdownSearchCss = ":host{display:block;width:100%;box-sizing:border-box}.dropdown{display:flex;position:relative;flex-direction:column;width:inherit}.dropdown .dropdown-search-list{z-index:1000}.dropdown-input-search{width:100%;display:flex;justify-content:center;align-items:center;background:transparent}.dropdown-input-search.dropdown-open ::part(cura-input-field){border-radius:4px 4px 0px 0px}.dropdown-input-search.dropdown-open ::slotted([slot=helperText]){display:none}.dropdown-input-search.dropdown-open cura-input-text ::slotted([slot=helperText]){display:none}.dropdown-search-list{position:absolute;top:calc(100% - 8px);width:100%;max-height:var(--dropdown-max-height);padding:12px 12px;margin:0;box-sizing:border-box;box-shadow:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16));border-radius:0px 0px 4px 4px;border-top:0 var(--neutral-light);border-right:2px solid var(--neutral-light);border-bottom:2px solid var(--neutral-light);border-left:2px solid var(--neutral-light);background-color:var(--neutral-purewhite);list-style:none;overflow-y:auto;display:none}.dropdown-search-list.visible{display:block}.dropdown-search-list-input-search{width:inherit;display:flex;justify-content:center;align-items:center;padding:16px 8px;border-bottom:2px solid var(--info-base);background-color:var(--neutral-purewhite)}.dropdown-search-list-input-search cura-input-text{width:inherit}.dropdown-search-list-input-search.error{background-color:var(--error-lighter);border-bottom:2px solid var(--error-dark)}.dropdown-mobile{position:fixed;top:1%;left:0;right:0;width:100%;z-index:10000}.dropdown-mobile .dropdown-input-search{display:flex;gap:4px;padding:12px 8px;background-color:var(--neutral-purewhite);border-bottom:2px solid var(--info-base);z-index:10000}.dropdown-mobile .dropdown-input-search cura-button-transparent{display:flex}.dropdown-mobile .dropdown-input-search.error{background-color:var(--error-lighter);border-bottom:2px solid var(--error-dark)}.dropdown-mobile .dropdown-input-search.dropdown-open{display:flex}.dropdown-mobile .dropdown-input-search.dropdown-open ::slotted([slot=helperText]){display:block}.dropdown-mobile .dropdown-search-list{position:static;width:100%;height:calc(100vh - var(--dynamic-input-search-height, 0));max-height:none;padding:12px 12px;margin:0;box-sizing:border-box;box-shadow:none;border:none;background-color:var(--neutral-purewhite);list-style:none;overflow-y:auto;z-index:10000}";
+const curaDropdownSearchCss = ":host{display:block;width:100%;box-sizing:border-box}.dropdown{display:flex;position:relative;flex-direction:column;width:inherit}.dropdown .dropdown-search-list{z-index:1000}.dropdown-input-search{width:100%;display:flex;justify-content:center;align-items:center;background:transparent}.dropdown-input-search.dropdown-open ::part(cura-input-field){border-radius:4px 4px 0px 0px}.dropdown-input-search.dropdown-open ::slotted([slot=helperText]){display:none}.dropdown-input-search.dropdown-open cura-input-text ::slotted([slot=helperText]){display:none}.dropdown-search-list{position:absolute;top:calc(100% - 8px);width:100%;max-height:var(--dropdown-max-height);padding:12px 12px;margin:0;box-sizing:border-box;box-shadow:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16));border-radius:0px 0px 4px 4px;border-top:0 var(--neutral-light);border-right:2px solid var(--neutral-light);border-bottom:2px solid var(--neutral-light);border-left:2px solid var(--neutral-light);background-color:var(--neutral-purewhite);list-style:none;overflow-y:auto;display:none}.dropdown-search-list.visible{display:block}.dropdown-search-list-input-search{width:inherit;display:flex;justify-content:center;align-items:center;padding:16px 8px;border-bottom:2px solid var(--info-base);background-color:var(--neutral-purewhite)}.dropdown-search-list-input-search cura-input-text{width:inherit}.dropdown-search-list-input-search.error{background-color:var(--error-lighter);border-bottom:2px solid var(--error-dark)}.dropdown-mobile{position:fixed;top:1%;left:0;right:0;width:100%;z-index:10000}.dropdown-mobile .dropdown-input-search{display:flex;background-color:var(--neutral-purewhite);border-bottom:2px solid var(--info-base);z-index:10000}.dropdown-mobile .dropdown-input-search cura-button-transparent{display:flex;margin-right:4px}.dropdown-mobile .dropdown-input-search cura-input-text{padding:12px 8px 12px 0px}.dropdown-mobile .dropdown-input-search.error{background-color:var(--error-lighter);border-bottom:2px solid var(--error-dark)}.dropdown-mobile .dropdown-input-search.dropdown-open{display:flex}.dropdown-mobile .dropdown-input-search.dropdown-open ::slotted([slot=helperText]){display:block}.dropdown-mobile .dropdown-search-list{position:static;width:100%;height:calc(100vh - var(--dynamic-input-search-height, 0));max-height:none;padding:12px 12px;margin:0;box-sizing:border-box;box-shadow:none;border:none;background-color:var(--neutral-purewhite);list-style:none;overflow-y:auto;z-index:10000}";
 const CuraDropdownSearchStyle0 = curaDropdownSearchCss;
 const CuraDropdownSearch$1 = /*@__PURE__*/ proxyCustomElement(class CuraDropdownSearch extends HTMLElement {
@@ -17,16 +17,14 @@ const CuraDropdownSearch$1 = /*@__PURE__*/ proxyCustomElement(class CuraDropdown
         this.onselect = createEvent(this, "onselect", 7);
         this.overlayElement = null;
         this.adjustInputPosition = () => {
-            window.visualViewport.addEventListener('resize', () => {
-                var _a;
-                const isKeyboardOpen = window.innerHeight < window.screen.height * 0.8;
-                const dropdown = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-mobile');
-                if (dropdown) {
-                    dropdown.style.position = isKeyboardOpen ? 'absolute' : 'fixed';
-                    dropdown.style.bottom = isKeyboardOpen ? `${window.screen.height - window.innerHeight}px` : '0';
-                    window.scroll({ top: 0, left: 0, behavior: 'smooth' });
-                }
-            });
+            var _a, _b;
+            const isKeyboardOpen = (window === null || window === void 0 ? void 0 : window.innerHeight) < this.screenDefaultHeight;
+            const dropdown = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-mobile');
+            if (dropdown) {
+                dropdown.style.position = isKeyboardOpen ? 'absolute' : 'fixed';
+                dropdown.style.bottom = isKeyboardOpen ? `${((_b = window === null || window === void 0 ? void 0 : window.screen) === null || _b === void 0 ? void 0 : _b.height) - (window === null || window === void 0 ? void 0 : window.innerHeight)}px` : '0';
+                window.scroll({ top: 0, left: 0, behavior: 'smooth' });
+            }
         };
         this.handleSlotChange = () => {
             this.options = Array.from(this.host.querySelectorAll('cura-dropdown-search-option'));
@@ -68,6 +66,10 @@ const CuraDropdownSearch$1 = /*@__PURE__*/ proxyCustomElement(class CuraDropdown
                 }
             }
         };
+        this.setUp = () => {
+            this.handleResize();
+            this.adjustInputPosition();
+        };
         this.size = 'large';
         this.status = 'default';
         this.disabled = false;
@@ -89,6 +91,7 @@ const CuraDropdownSearch$1 = /*@__PURE__*/ proxyCustomElement(class CuraDropdown
         this.hoveredIndex = -1;
         this.options = [];
         this.originalOverflow = '';
+        this.screenDefaultHeight = 0;
     }
     connectedCallback() {
         this.weights = window.CuraAPI.theme.fonts.getWeights();
@@ -121,12 +124,15 @@ const CuraDropdownSearch$1 = /*@__PURE__*/ proxyCustomElement(class CuraDropdown
         }
     }
     componentDidLoad() {
-        window.addEventListener('resize', this.handleResize);
-        window.addEventListener('resize', this.adjustInputPosition);
+        var _a;
+        this.screenDefaultHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
+        window === null || window === void 0 ? void 0 : window.addEventListener('resize', this.setUp);
+        (_a = window === null || window === void 0 ? void 0 : window.visualViewport) === null || _a === void 0 ? void 0 : _a.addEventListener('resize', this.adjustInputPosition);
     }
     disconnectedCallback() {
-        window.removeEventListener('resize', this.handleResize);
-        window.removeEventListener('resize', this.adjustInputPosition);
+        var _a;
+        window === null || window === void 0 ? void 0 : window.removeEventListener('resize', this.setUp);
+        (_a = window === null || window === void 0 ? void 0 : window.visualViewport) === null || _a === void 0 ? void 0 : _a.removeEventListener('resize', this.adjustInputPosition);
     }
     showOverlay() {
         if (!this.overlayElement) {
@@ -153,7 +159,7 @@ const CuraDropdownSearch$1 = /*@__PURE__*/ proxyCustomElement(class CuraDropdown
     }
     addClickListenersToOptions() {
         this.options.forEach((option, index) => {
-            option.addEventListener('optionSelected', () => this.onSelectedOption(index));
+            option === null || option === void 0 ? void 0 : option.addEventListener('optionSelected', () => this.onSelectedOption(index));
         });
     }
     updateSelectedOption(value) {
@@ -161,7 +167,7 @@ const CuraDropdownSearch$1 = /*@__PURE__*/ proxyCustomElement(class CuraDropdown
         this.hoveredIndex = selectedOptionIndex;
         this.updateOptionAttribute('hovered', this.hoveredIndex);
         this.updateOptionAttribute('selected', this.hoveredIndex);
-        this.scrollIntoView();
+        this.scrollHoveredOptionIntoView();
         this.adjustInputPosition();
     }
     onSelectedOption(index) {
@@ -181,7 +187,7 @@ const CuraDropdownSearch$1 = /*@__PURE__*/ proxyCustomElement(class CuraDropdown
         const newIndex = (this.hoveredIndex + direction + visibleOptions.length) % visibleOptions.length;
         this.hoveredIndex = newIndex;
         this.updateOptionAttribute('hovered', this.hoveredIndex);
-        this.scrollIntoView();
+        this.scrollHoveredOptionIntoView();
     }
     updateOptionAttribute(attribute, indexToUpdate) {
         this.options.forEach((option, index) => {
@@ -193,7 +199,7 @@ const CuraDropdownSearch$1 = /*@__PURE__*/ proxyCustomElement(class CuraDropdown
         const currentValue = this.value;
         this.hoveredIndex = visibleOptions.findIndex(option => option.getAttribute('value') === currentValue);
     }
-    scrollIntoView() {
+    scrollHoveredOptionIntoView() {
         var _a;
         const container = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-search-list');
         const hoveredOption = this.options[this.hoveredIndex];
@@ -260,9 +266,9 @@ const CuraDropdownSearch$1 = /*@__PURE__*/ proxyCustomElement(class CuraDropdown
     }
     render() {
         const isMobileDropdown = this.isMobile && this.isDropdownOpen;
-        return (h(Host, { key: '5acd835c67558501ac74915597423754c1d412ea', style: this.hostCSSProperties(), class: "dropdown-overlay" }, h("div", { key: 'cb0ca2ec4f574f95897163726f81b75b18a4505e', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, h("div", { key: 'c6eac11c0c3420e35b7432af8748976f32814851', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (h("cura-button-transparent", { key: 'd1cd468c497877ad7f4f22a5dd1bc5bc662bfa6e', fontColor: "dark", onClick: () => this.handleGoBack(), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), h("cura-input-text", { key: '35f3943ecd4966a1d27ed9e4fba4de08376dd767', disabled: this.disabled, label: this.label, part: "cura-input-field", mode: isMobileDropdown ? 'transparent' : 'default', required: this.required, hideErrorIcon: this.status === 'error', iconName: this.iconName || 'search', value: this.value, status: this.status, onValueChange: e => this.onValueChange(e.target.value), onInput: e => this.handleInputChange(e), onFocus: () => this.handleOnFocus(), onClick: () => (window.innerWidth < 768 ? (this.isMobile = true) : null), onBlur: () => {
+        return (h(Host, { key: 'b65367e4fa490b0dff8616bb9d82665bf3bb6f2b', style: this.hostCSSProperties(), class: "dropdown-overlay" }, h("div", { key: 'ab7e1b6038a6dfa6b707bc97f225d68ed97bdc07', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, h("div", { key: '7e3ab85750a9d868fa789d1f1841c0a907b8948c', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (h("cura-button-transparent", { key: 'f171dceed48f41ad15736cbb358a1ffa6288d261', fontColor: "dark", onClick: () => this.handleGoBack(), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), h("cura-input-text", { key: '53e7aa39324cc7c4ce52388f80823d0fb144d4e0', disabled: this.disabled, label: this.label, part: "cura-input-field", mode: isMobileDropdown ? 'transparent' : 'default', required: this.required, hideErrorIcon: this.status === 'error', iconName: this.iconName || 'search', value: this.value, status: this.status, onValueChange: e => this.onValueChange(e.target.value), onInput: e => this.handleInputChange(e), onFocus: () => this.handleOnFocus(), onClick: () => (window.innerWidth < 768 ? (this.isMobile = true) : null), onBlur: () => {
                 this.handleOnBlur();
-            }, placeholder: this.placeholder, size: this.size, onKeyDown: this.handleKeyDown }, h("slot", { key: '13cffd23e80ec86b266c5b109b2e8ecb89f28944', name: "helperText" }))), h("div", { key: 'f0047c0b74057fbf21893f3c92fcaf97db59e544', id: "dropdown-search-list", class: this.getDropdownClasses() }, h("slot", { key: '386584475924a3a621308e50697c49bcbe5f1bae', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
+            }, placeholder: this.placeholder, size: this.size, onKeyDown: this.handleKeyDown }, h("slot", { key: '0fec269301bc1aa23978ec2b52adb856e9e8f17d', name: "helperText" }))), h("div", { key: 'a6060851435b1da0bac0adb2445bfb90000c17d7', id: "dropdown-search-list", class: this.getDropdownClasses() }, h("slot", { key: '5443c23f1279be7243a27fccb39aa9ce35452b99', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -290,7 +296,8 @@ const CuraDropdownSearch$1 = /*@__PURE__*/ proxyCustomElement(class CuraDropdown
         "isOnBlurInput": [32],
         "hoveredIndex": [32],
         "options": [32],
-        "originalOverflow": [32]
+        "originalOverflow": [32],
+        "screenDefaultHeight": [32]
     }, undefined, {
         "value": ["onValueChange"]
     }]);

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

	@@ -1 +1 @@
1	- {"file":"cura-dropdown-search.js","mappings":"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","names":["CuraDropdownSearch"],"sources":["src/components/forms/cura-dropdown-search/cura-dropdown-search.scss?tag=cura-dropdown-search&encapsulation=shadow","src/components/forms/cura-dropdown-search/cura-dropdown-search.tsx"],"sourcesContent":["@import '../../../scss/mixins/shadows.scss';\n\n:host {\n display: block;\n width: 100%;\n box-sizing: border-box;\n}\n\n.dropdown {\n display: flex;\n position: relative;\n\n flex-direction: column;\n width: inherit;\n\n .dropdown-search-list {\n z-index: 1000;\n }\n\n &-input-search {\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n background: transparent;\n\n\n &.dropdown-open {\n ::part(cura-input-field) {\n border-radius: 4px 4px 0px 0px;\n }\n ::slotted([slot='helperText']) {\n display: none;\n }\n\n cura-input-text {\n ::slotted([slot='helperText']) {\n display: none;\n }\n }\n }\n }\n\n &-search-list {\n position: absolute;\n top: calc(100% - 8px);\n width: 100%;\n max-height: var(--dropdown-max-height);\n padding: 12px 12px;\n margin: 0;\n box-sizing: border-box;\n @include shadow-level3(--neutral-black-shadow);\n border-radius: 0px 0px 4px 4px;\n border-top: 0 var(--neutral-light);\n border-right: 2px solid var(--neutral-light);\n border-bottom: 2px solid var(--neutral-light);\n border-left: 2px solid var(--neutral-light);\n background-color: var(--neutral-purewhite);\n list-style: none;\n overflow-y: auto;\n display: none;\n\n &.visible {\n display: block;\n }\n\n &-input-search {\n width: inherit;\n\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 16px 8px;\n border-bottom: 2px solid var(--info-base);\n background-color: var(--neutral-purewhite);\n\n cura-input-text {\n width: inherit;\n }\n\n &.error {\n background-color: var(--error-lighter);\n border-bottom: 2px solid var(--error-dark);\n }\n }\n }\n\n &-mobile {\n position: fixed;\n top: 1%;\n left: 0;\n right: 0;\n width: 100%;\n\n z-index: 10000;\n .dropdown-input-search {\n display: flex;\n gap: 4px;\n padding: 12px 8px;\n background-color: var(--neutral-purewhite);\n border-bottom: 2px solid var(--info-base);\n z-index: 10000;\n cura-button-transparent {\n display: flex;\n }\n &.error {\n background-color: var(--error-lighter);\n border-bottom: 2px solid var(--error-dark);\n }\n &.dropdown-open {\n display: flex;\n\n ::slotted([slot='helperText']) {\n display: block;\n }\n }\n }\n .dropdown-search-list {\n position: static;\n width: 100%;\n height: calc(100vh - var(--dynamic-input-search-height, 0));\n max-height: none;\n padding: 12px 12px;\n margin: 0;\n box-sizing: border-box;\n box-shadow: none;\n border: none;\n background-color: var(--neutral-purewhite);\n list-style: none;\n overflow-y: auto;\n z-index: 10000;\n }\n }\n}\n","import { Component, Host, Prop, State, Event, EventEmitter, Element, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'cura-dropdown-search',\n styleUrl: 'cura-dropdown-search.scss',\n shadow: true,\n})\nexport class CuraDropdownSearch {\n /*\n Size of the dropdown search mode default: 'small', 'medium', or 'large' (default: 'large')\n /\n @Prop({ reflect: true, mutable: true }) size: 'small' \| 'medium' \| 'large' = 'large';\n\n /\n Define the status of the dropdown search.\n /\n @Prop({ reflect: true }) status: 'error' \| 'default' = 'default';\n\n /\n Whether the select component is disabled.\n * Reflects as an attribute in the DOM.\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n The name of the dropdown search component.\n /\n @Prop({ reflect: true }) name: string;\n\n /\n Indicates if the dropdown search is required.\n /\n @Prop({ reflect: true, mutable: true }) required: boolean = false;\n\n /\n Indicates if the dropdown search is selected.\n /\n @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n\n /\n The value of the dropdown search.\n /\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n /\n The placeholder text for the dropdown search.\n /\n @Prop({ reflect: true, mutable: true }) placeholder: string = '';\n\n /\n The label for the dropdown search.\n /\n @Prop({ reflect: true, mutable: true }) label: string = '';\n\n /\n Custom icon name. Default: search.\n /\n @Prop({ reflect: true }) iconName = 'search';\n\n /\n CSS max-height property for dropdown item.\n * Default to 630px\n /\n @Prop({ reflect: true }) dropdownMaxHeight = '630px';\n\n /\n Reference to the host element.\n /\n @Element() host: HTMLElement;\n\n /\n Indicates if the overlay is visible.\n /\n @State() overlayVisible: boolean = false;\n\n /\n Event emitted when the value changes.\n /\n @Event() valueChanged: EventEmitter<string>;\n\n /\n Indicates if the dropdown is open.\n /\n @State() isDropdownOpen: boolean = false;\n\n /\n Styles for the component.\n\n /\n @State() styles = {};\n\n /\n Indicates if the component is being viewed on a mobile device.\n /\n @State() isMobile: boolean = window.innerWidth < 768;\n\n /\n The mode of the dropdown search.\n /\n @State() mode: 'default' \| 'transparent' = 'default';\n\n @Event() onselect: EventEmitter;\n\n @State() inputTextRef!: HTMLCuraInputTextElement;\n\n /\n Indicates if the input is on blur.\n /\n @State() isOnBlurInput: boolean = true;\n\n /\n The index of the currently hovered option.\n /\n @State() hoveredIndex: number = -1;\n\n /\n The options for the dropdown search.\n * @type {HTMLCuraDropdownSearchOptionElement[]}\n /\n\n weights;\n\n private overlayElement: HTMLDivElement \| null = null;\n\n @State() options: HTMLCuraDropdownSearchOptionElement[] = [];\n\n /\n \n * Stores the original value of the 'overflow' style of the body\n * before blocking the scroll.\n /\n @State() originalOverflow: string = '';\n\n private adjustInputPosition = () => {\n window.visualViewport.addEventListener('resize', () => {\n const isKeyboardOpen = window.innerHeight < window.screen.height 0.8;\n const dropdown = this.host.shadowRoot?.querySelector('.dropdown-mobile') as HTMLInputElement;\n\n if (dropdown) {\n dropdown.style.position = isKeyboardOpen ? 'absolute' : 'fixed';\n dropdown.style.bottom = isKeyboardOpen ? `${window.screen.height - window.innerHeight}px` : '0';\n window.scroll({ top: 0, left: 0, behavior: 'smooth' });\n }\n });\n };\n\n connectedCallback() {\n this.weights = window.CuraAPI.theme.fonts.getWeights();\n this.styles['--info-base'] = window.CuraAPI.theme.colors.getColor('info-base');\n this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor('neutral-purewhite');\n this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor('neutral-light');\n this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor('neutral-dark');\n this.styles['--neutral-black-shadow'] = window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16);\n this.styles['--error-dark'] = window.CuraAPI.theme.colors.getColor('error-dark');\n this.styles['--error-lighter'] = window.CuraAPI.theme.colors.getColor('error-lighter');\n this.styles['--breakpoints'] = window.CuraAPI.theme.breakpoints.get();\n this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n this.styles['--font-weight-medium'] = this.weights.medium;\n }\n\n @Watch('value')\n onValueChange(newValue: string) {\n this.updateSelectedOption(newValue);\n this.valueChanged.emit(newValue);\n }\n\n componentWillLoad() {\n this.updateSelectedOption(this.value);\n }\n\n componentDidRender() {\n if (this.isDropdownOpen && this.isMobile) {\n this.showOverlay();\n this.getDropdownSearchListHeight();\n } else {\n this.removeOverlay();\n }\n }\n componentDidLoad() {\n window.addEventListener('resize', this.handleResize);\n window.addEventListener('resize', this.adjustInputPosition);\n }\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.handleResize);\n window.removeEventListener('resize', this.adjustInputPosition);\n }\n\n private showOverlay() {\n if (!this.overlayElement) {\n this.overlayElement = document.createElement('div');\n this.overlayElement.className = 'dropdown-overlay';\n this.overlayElement.style.position = 'fixed';\n this.overlayElement.style.top = '0';\n this.overlayElement.style.left = '0';\n this.overlayElement.style.width = '100%';\n this.overlayElement.style.height = '100%';\n this.overlayElement.style.zIndex = '9999';\n this.overlayElement.style.backgroundColor = 'white';\n document.body.appendChild(this.overlayElement);\n\n this.originalOverflow = document.body.style.overflow;\n document.body.style.overflow = 'hidden';\n }\n }\n\n private removeOverlay() {\n if (this.overlayElement && this.overlayElement.parentNode === document.body) {\n document.body.removeChild(this.overlayElement);\n this.overlayElement = null;\n document.body.style.overflow = this.originalOverflow;\n }\n }\n\n private handleSlotChange = () => {\n this.options = Array.from(this.host.querySelectorAll('cura-dropdown-search-option'));\n this.addClickListenersToOptions();\n this.updateHoveredIndex();\n };\n\n private addClickListenersToOptions() {\n this.options.forEach((option, index) => {\n option.addEventListener('optionSelected', () => this.onSelectedOption(index));\n });\n }\n\n private updateSelectedOption(value: string) {\n const selectedOptionIndex = this.options.findIndex(option => option.getAttribute('value') === value);\n this.hoveredIndex = selectedOptionIndex;\n this.updateOptionAttribute('hovered', this.hoveredIndex);\n this.updateOptionAttribute('selected', this.hoveredIndex);\n\n this.scrollIntoView();\n this.adjustInputPosition();\n }\n\n private handleInputChange = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.value = input.value;\n this.onValueChange(this.value);\n // this.valueChanged.emit(this.value);\n };\n\n private onSelectedOption(index: number) {\n const selectedOption = this.options[index];\n if (selectedOption.selectable) {\n const selectedValue = selectedOption.getAttribute('value') \|\| selectedOption.textContent;\n\n this.value = selectedValue \|\| '';\n this.updateSelectedOption(this.value);\n\n this.isDropdownOpen = false;\n this.isOnBlurInput = true;\n this.resetDropdownStyles();\n this.removeOverlay();\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n this.moveHighlight(1);\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n this.moveHighlight(-1);\n } else if (event.key === 'Enter') {\n event.preventDefault();\n if (this.hoveredIndex > -1) {\n this.handleOnBlur();\n this.onSelectedOption(this.hoveredIndex);\n }\n }\n };\n\n private moveHighlight(direction: number) {\n const visibleOptions = this.options;\n const newIndex = (this.hoveredIndex + direction + visibleOptions.length) % visibleOptions.length;\n this.hoveredIndex = newIndex;\n this.updateOptionAttribute('hovered', this.hoveredIndex);\n this.scrollIntoView();\n }\n\n private updateOptionAttribute(attribute: string, indexToUpdate: number) {\n this.options.forEach((option, index) => {\n (option as any)[attribute] = index === indexToUpdate;\n });\n }\n\n private updateHoveredIndex() {\n const visibleOptions = this.options;\n const currentValue = this.value;\n this.hoveredIndex = visibleOptions.findIndex(option => option.getAttribute('value') === currentValue);\n }\n\n private scrollIntoView() {\n const container = this.host.shadowRoot?.querySelector('.dropdown-search-list');\n const hoveredOption = this.options[this.hoveredIndex];\n\n if (container && hoveredOption) {\n const optionRect = hoveredOption.getBoundingClientRect();\n const containerRect = container.getBoundingClientRect();\n\n if (optionRect.bottom > containerRect.bottom) {\n container.scrollTop += optionRect.bottom - containerRect.bottom;\n }\n\n if (optionRect.top < containerRect.top) {\n container.scrollTop -= containerRect.top - optionRect.top;\n }\n }\n }\n\n private handleResize = () => {\n this.isMobile = window.innerWidth < 768;\n if (this.isDropdownOpen) {\n if (this.isMobile) {\n this.showOverlay();\n } else {\n this.resetDropdownStyles();\n this.removeOverlay();\n }\n }\n };\n\n handleOnBlur() {\n if (this.isOnBlurInput === true) {\n setTimeout(() => {\n this.isDropdownOpen = false;\n this.resetDropdownStyles();\n this.removeOverlay();\n }, 200);\n }\n }\n getClasses() {\n return {\n 'dropdown-input-search': true,\n 'dropdown-open': this.isDropdownOpen,\n 'disabled': this.disabled,\n [this.status]: true,\n };\n }\n\n getDropdownClasses() {\n return {\n 'dropdown-search-list': true,\n 'visible': this.options.length && this.isDropdownOpen ? true : false,\n };\n }\n\n hostCSSProperties() {\n return {\n '--dropdown-max-height': this.dropdownMaxHeight,\n };\n }\n\n handleOnFocus() {\n this.isDropdownOpen = true;\n }\n\n getDropdownSearchListHeight() {\n const dropdownInputSearchElement = this.host.shadowRoot?.querySelector('.dropdown-input-search') as HTMLInputElement;\n if (dropdownInputSearchElement) {\n this.host.style.setProperty('--dynamic-input-search-height', `${dropdownInputSearchElement.offsetHeight}px`);\n }\n }\n\n handleGoBack() {\n this.resetDropdownStyles();\n this.isMobile = false;\n }\n\n resetDropdownStyles() {\n const dropdown = this.host.shadowRoot?.querySelector('.dropdown-mobile') as HTMLInputElement;\n if (dropdown && dropdown.style.position === 'fixed') {\n dropdown.style.position = 'relative';\n dropdown.style.removeProperty('bottom');\n }\n }\n\n render() {\n const isMobileDropdown = this.isMobile && this.isDropdownOpen;\n return (\n <Host style={this.hostCSSProperties()} class=\"dropdown-overlay\">\n <div class={`dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`} style={this.styles}>\n <div class={this.getClasses()}>\n {this.isMobile && this.isDropdownOpen && (\n <cura-button-transparent fontColor=\"dark\" onClick={() => this.handleGoBack()} iconName=\"arrowLeft\" size=\"medium\" iconOnly color=\"primary\"></cura-button-transparent>\n )}\n <cura-input-text\n disabled={this.disabled}\n label={this.label}\n part=\"cura-input-field\"\n mode={isMobileDropdown ? 'transparent' : 'default'}\n required={this.required}\n hideErrorIcon={this.status === 'error'}\n iconName={this.iconName \|\| 'search'}\n value={this.value}\n status={this.status}\n onValueChange={e => this.onValueChange(e.target.value as string)}\n onInput={e => this.handleInputChange(e)}\n onFocus={() => this.handleOnFocus()}\n onClick={() => (window.innerWidth < 768 ? (this.isMobile = true) : null)}\n onBlur={() => {\n this.handleOnBlur();\n }}\n placeholder={this.placeholder}\n size={this.size}\n onKeyDown={this.handleKeyDown}\n >\n <slot name=\"helperText\"></slot>\n </cura-input-text>\n </div>\n <div id=\"dropdown-search-list\" class={this.getDropdownClasses()}>\n <slot name=\"dropdown-search-option\" onSlotchange={this.handleSlotChange}></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"cura-dropdown-search.js","mappings":"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","names":["CuraDropdownSearch"],"sources":["src/components/forms/cura-dropdown-search/cura-dropdown-search.scss?tag=cura-dropdown-search&encapsulation=shadow","src/components/forms/cura-dropdown-search/cura-dropdown-search.tsx"],"sourcesContent":["@import '../../../scss/mixins/shadows.scss';\n\n:host {\n display: block;\n width: 100%;\n box-sizing: border-box;\n}\n\n.dropdown {\n display: flex;\n position: relative;\n\n flex-direction: column;\n width: inherit;\n\n .dropdown-search-list {\n z-index: 1000;\n }\n\n &-input-search {\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n background: transparent;\n\n\n &.dropdown-open {\n ::part(cura-input-field) {\n border-radius: 4px 4px 0px 0px;\n }\n ::slotted([slot='helperText']) {\n display: none;\n }\n\n cura-input-text {\n ::slotted([slot='helperText']) {\n display: none;\n }\n }\n }\n }\n\n &-search-list {\n position: absolute;\n top: calc(100% - 8px);\n width: 100%;\n max-height: var(--dropdown-max-height);\n padding: 12px 12px;\n margin: 0;\n box-sizing: border-box;\n @include shadow-level3(--neutral-black-shadow);\n border-radius: 0px 0px 4px 4px;\n border-top: 0 var(--neutral-light);\n border-right: 2px solid var(--neutral-light);\n border-bottom: 2px solid var(--neutral-light);\n border-left: 2px solid var(--neutral-light);\n background-color: var(--neutral-purewhite);\n list-style: none;\n overflow-y: auto;\n display: none;\n\n &.visible {\n display: block;\n }\n\n &-input-search {\n width: inherit;\n\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 16px 8px;\n border-bottom: 2px solid var(--info-base);\n background-color: var(--neutral-purewhite);\n\n cura-input-text {\n width: inherit;\n }\n\n &.error {\n background-color: var(--error-lighter);\n border-bottom: 2px solid var(--error-dark);\n }\n }\n }\n\n &-mobile {\n position: fixed;\n top: 1%;\n left: 0;\n right: 0;\n width: 100%;\n z-index: 10000;\n \n .dropdown-input-search {\n display: flex;\n background-color: var(--neutral-purewhite);\n border-bottom: 2px solid var(--info-base);\n z-index: 10000;\n cura-button-transparent {\n display: flex;\n margin-right: 4px;\n }\n cura-input-text {\n padding: 12px 8px 12px 0px;\n }\n &.error {\n background-color: var(--error-lighter);\n border-bottom: 2px solid var(--error-dark);\n }\n &.dropdown-open {\n display: flex;\n\n ::slotted([slot='helperText']) {\n display: block;\n }\n }\n }\n\n .dropdown-search-list {\n position: static;\n width: 100%;\n height: calc(100vh - var(--dynamic-input-search-height, 0));\n max-height: none;\n padding: 12px 12px;\n margin: 0;\n box-sizing: border-box;\n box-shadow: none;\n border: none;\n background-color: var(--neutral-purewhite);\n list-style: none;\n overflow-y: auto;\n z-index: 10000;\n }\n }\n}\n","import { Component, Host, Prop, State, Event, EventEmitter, Element, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'cura-dropdown-search',\n styleUrl: 'cura-dropdown-search.scss',\n shadow: true,\n})\nexport class CuraDropdownSearch {\n /*\n Size of the dropdown search mode default: 'small', 'medium', or 'large' (default: 'large')\n /\n @Prop({ reflect: true, mutable: true }) size: 'small' \| 'medium' \| 'large' = 'large';\n\n /\n Define the status of the dropdown search.\n /\n @Prop({ reflect: true }) status: 'error' \| 'default' = 'default';\n\n /\n Whether the select component is disabled.\n * Reflects as an attribute in the DOM.\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n The name of the dropdown search component.\n /\n @Prop({ reflect: true }) name: string;\n\n /\n Indicates if the dropdown search is required.\n /\n @Prop({ reflect: true, mutable: true }) required: boolean = false;\n\n /\n Indicates if the dropdown search is selected.\n /\n @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n\n /\n The value of the dropdown search.\n /\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n /\n The placeholder text for the dropdown search.\n /\n @Prop({ reflect: true, mutable: true }) placeholder: string = '';\n\n /\n The label for the dropdown search.\n /\n @Prop({ reflect: true, mutable: true }) label: string = '';\n\n /\n Custom icon name. Default: search.\n /\n @Prop({ reflect: true }) iconName = 'search';\n\n /\n CSS max-height property for dropdown item.\n * Default to 630px\n /\n @Prop({ reflect: true }) dropdownMaxHeight = '630px';\n\n /\n Reference to the host element.\n /\n @Element() host: HTMLElement;\n\n /\n Indicates if the overlay is visible.\n /\n @State() overlayVisible: boolean = false;\n\n /\n Event emitted when the value changes.\n /\n @Event() valueChanged: EventEmitter<string>;\n\n /\n Indicates if the dropdown is open.\n /\n @State() isDropdownOpen: boolean = false;\n\n /\n Styles for the component.\n\n /\n @State() styles = {};\n\n /\n Indicates if the component is being viewed on a mobile device.\n /\n @State() isMobile: boolean = window.innerWidth < 768;\n\n /\n The mode of the dropdown search.\n /\n @State() mode: 'default' \| 'transparent' = 'default';\n\n @Event() onselect: EventEmitter;\n\n @State() inputTextRef!: HTMLCuraInputTextElement;\n\n /\n Indicates if the input is on blur.\n /\n @State() isOnBlurInput: boolean = true;\n\n /\n The index of the currently hovered option.\n /\n @State() hoveredIndex: number = -1;\n\n /\n The options for the dropdown search.\n * @type {HTMLCuraDropdownSearchOptionElement[]}\n /\n\n weights;\n\n private overlayElement: HTMLDivElement \| null = null;\n\n @State() options: HTMLCuraDropdownSearchOptionElement[] = [];\n\n /\n \n * Stores the original value of the 'overflow' style of the body\n * before blocking the scroll.\n */\n @State() originalOverflow: string = '';\n @State() screenDefaultHeight = 0;\n\n private adjustInputPosition = () => {\n const isKeyboardOpen = window?.innerHeight < this.screenDefaultHeight;\n const dropdown = this.host.shadowRoot?.querySelector('.dropdown-mobile') as HTMLElement;\n if (dropdown) {\n dropdown.style.position = isKeyboardOpen ? 'absolute' : 'fixed';\n dropdown.style.bottom = isKeyboardOpen ? `${window?.screen?.height - window?.innerHeight}px` : '0';\n window.scroll({ top: 0, left: 0, behavior: 'smooth' });\n }\n };\n\n connectedCallback() {\n this.weights = window.CuraAPI.theme.fonts.getWeights();\n this.styles['--info-base'] = window.CuraAPI.theme.colors.getColor('info-base');\n this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor('neutral-purewhite');\n this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor('neutral-light');\n this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor('neutral-dark');\n this.styles['--neutral-black-shadow'] = window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16);\n this.styles['--error-dark'] = window.CuraAPI.theme.colors.getColor('error-dark');\n this.styles['--error-lighter'] = window.CuraAPI.theme.colors.getColor('error-lighter');\n this.styles['--breakpoints'] = window.CuraAPI.theme.breakpoints.get();\n this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n this.styles['--font-weight-medium'] = this.weights.medium;\n }\n\n @Watch('value')\n onValueChange(newValue: string) {\n this.updateSelectedOption(newValue);\n this.valueChanged.emit(newValue);\n }\n\n componentWillLoad() {\n this.updateSelectedOption(this.value);\n }\n\n componentDidRender() {\n if (this.isDropdownOpen && this.isMobile) {\n this.showOverlay();\n this.getDropdownSearchListHeight();\n } else {\n this.removeOverlay();\n }\n }\n componentDidLoad() {\n this.screenDefaultHeight = window?.innerHeight;\n window?.addEventListener('resize', this.setUp);\n window?.visualViewport?.addEventListener('resize', this.adjustInputPosition);\n }\n\n disconnectedCallback() {\n window?.removeEventListener('resize', this.setUp);\n window?.visualViewport?.removeEventListener('resize', this.adjustInputPosition);\n }\n \n private showOverlay() {\n if (!this.overlayElement) {\n this.overlayElement = document.createElement('div');\n this.overlayElement.className = 'dropdown-overlay';\n this.overlayElement.style.position = 'fixed';\n this.overlayElement.style.top = '0';\n this.overlayElement.style.left = '0';\n this.overlayElement.style.width = '100%';\n this.overlayElement.style.height = '100%';\n this.overlayElement.style.zIndex = '9999';\n this.overlayElement.style.backgroundColor = 'white';\n document.body.appendChild(this.overlayElement);\n\n this.originalOverflow = document.body.style.overflow;\n document.body.style.overflow = 'hidden';\n }\n }\n\n private removeOverlay() {\n if (this.overlayElement && this.overlayElement.parentNode === document.body) {\n document.body.removeChild(this.overlayElement);\n this.overlayElement = null;\n document.body.style.overflow = this.originalOverflow;\n }\n }\n\n private handleSlotChange = () => {\n this.options = Array.from(this.host.querySelectorAll('cura-dropdown-search-option'));\n this.addClickListenersToOptions();\n this.updateHoveredIndex();\n };\n\n private addClickListenersToOptions() {\n this.options.forEach((option, index) => {\n option?.addEventListener('optionSelected', () => this.onSelectedOption(index));\n });\n }\n\n private updateSelectedOption(value: string) {\n const selectedOptionIndex = this.options.findIndex(option => option.getAttribute('value') === value);\n this.hoveredIndex = selectedOptionIndex;\n this.updateOptionAttribute('hovered', this.hoveredIndex);\n this.updateOptionAttribute('selected', this.hoveredIndex);\n\n this.scrollHoveredOptionIntoView();\n this.adjustInputPosition();\n }\n\n private handleInputChange = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.value = input.value;\n this.onValueChange(this.value);\n // this.valueChanged.emit(this.value);\n };\n\n private onSelectedOption(index: number) {\n const selectedOption = this.options[index];\n if (selectedOption.selectable) {\n const selectedValue = selectedOption.getAttribute('value') \|\| selectedOption.textContent;\n\n this.value = selectedValue \|\| '';\n this.updateSelectedOption(this.value);\n\n this.isDropdownOpen = false;\n this.isOnBlurInput = true;\n this.resetDropdownStyles();\n this.removeOverlay();\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n this.moveHighlight(1);\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n this.moveHighlight(-1);\n } else if (event.key === 'Enter') {\n event.preventDefault();\n if (this.hoveredIndex > -1) {\n this.handleOnBlur();\n this.onSelectedOption(this.hoveredIndex);\n }\n }\n };\n\n private moveHighlight(direction: number) {\n const visibleOptions = this.options;\n const newIndex = (this.hoveredIndex + direction + visibleOptions.length) % visibleOptions.length;\n this.hoveredIndex = newIndex;\n this.updateOptionAttribute('hovered', this.hoveredIndex);\n this.scrollHoveredOptionIntoView();\n }\n\n private updateOptionAttribute(attribute: string, indexToUpdate: number) {\n this.options.forEach((option, index) => {\n (option as any)[attribute] = index === indexToUpdate;\n });\n }\n\n private updateHoveredIndex() {\n const visibleOptions = this.options;\n const currentValue = this.value;\n this.hoveredIndex = visibleOptions.findIndex(option => option.getAttribute('value') === currentValue);\n }\n\n private scrollHoveredOptionIntoView() {\n const container = this.host.shadowRoot?.querySelector('.dropdown-search-list');\n const hoveredOption = this.options[this.hoveredIndex];\n\n if (container && hoveredOption) {\n const optionRect = hoveredOption.getBoundingClientRect();\n const containerRect = container.getBoundingClientRect();\n\n if (optionRect.bottom > containerRect.bottom) {\n container.scrollTop += optionRect.bottom - containerRect.bottom;\n }\n\n if (optionRect.top < containerRect.top) {\n container.scrollTop -= containerRect.top - optionRect.top;\n }\n }\n }\n\n private handleResize = () => {\n this.isMobile = window.innerWidth < 768;\n if (this.isDropdownOpen) {\n if (this.isMobile) {\n this.showOverlay();\n } else {\n this.resetDropdownStyles();\n this.removeOverlay();\n }\n }\n };\n\n handleOnBlur() {\n if (this.isOnBlurInput === true) {\n setTimeout(() => {\n this.isDropdownOpen = false;\n this.resetDropdownStyles();\n this.removeOverlay();\n }, 200);\n }\n }\n getClasses() {\n return {\n 'dropdown-input-search': true,\n 'dropdown-open': this.isDropdownOpen,\n 'disabled': this.disabled,\n [this.status]: true,\n };\n }\n\n getDropdownClasses() {\n return {\n 'dropdown-search-list': true,\n 'visible': this.options.length && this.isDropdownOpen ? true : false,\n };\n }\n\n hostCSSProperties() {\n return {\n '--dropdown-max-height': this.dropdownMaxHeight,\n };\n }\n\n handleOnFocus() {\n this.isDropdownOpen = true;\n }\n\n getDropdownSearchListHeight() {\n const dropdownInputSearchElement = this.host.shadowRoot?.querySelector('.dropdown-input-search') as HTMLInputElement;\n if (dropdownInputSearchElement) {\n this.host.style.setProperty('--dynamic-input-search-height', `${dropdownInputSearchElement.offsetHeight}px`);\n }\n }\n\n handleGoBack() {\n this.resetDropdownStyles();\n this.isMobile = false;\n }\n\n resetDropdownStyles() {\n const dropdown = this.host.shadowRoot?.querySelector('.dropdown-mobile') as HTMLInputElement;\n if (dropdown && dropdown.style.position === 'fixed') {\n dropdown.style.position = 'relative';\n dropdown.style.removeProperty('bottom');\n }\n }\n\n setUp = () => {\n this.handleResize()\n this.adjustInputPosition();\n }\n\n render() {\n const isMobileDropdown = this.isMobile && this.isDropdownOpen;\n return (\n <Host style={this.hostCSSProperties()} class=\"dropdown-overlay\">\n <div class={`dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`} style={this.styles}>\n <div class={this.getClasses()}>\n {this.isMobile && this.isDropdownOpen && (\n <cura-button-transparent fontColor=\"dark\" onClick={() => this.handleGoBack()} iconName=\"arrowLeft\" size=\"medium\" iconOnly color=\"primary\"></cura-button-transparent>\n )}\n <cura-input-text\n disabled={this.disabled}\n label={this.label}\n part=\"cura-input-field\"\n mode={isMobileDropdown ? 'transparent' : 'default'}\n required={this.required}\n hideErrorIcon={this.status === 'error'}\n iconName={this.iconName \|\| 'search'}\n value={this.value}\n status={this.status}\n onValueChange={e => this.onValueChange(e.target.value as string)}\n onInput={e => this.handleInputChange(e)}\n onFocus={() => this.handleOnFocus()}\n onClick={() => (window.innerWidth < 768 ? (this.isMobile = true) : null)}\n onBlur={() => {\n this.handleOnBlur();\n }}\n placeholder={this.placeholder}\n size={this.size}\n onKeyDown={this.handleKeyDown}\n >\n <slot name=\"helperText\"></slot>\n </cura-input-text>\n </div>\n <div id=\"dropdown-search-list\" class={this.getDropdownClasses()}>\n <slot name=\"dropdown-search-option\" onSlotchange={this.handleSlotChange}></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/cura-heading2.js CHANGED Viewed

@@ -69,7 +69,7 @@ const CuraHeading = /*@__PURE__*/ proxyCustomElement(class CuraHeading extends H
         return tags[`${this.level}`] || tags['default'];
     }
     render() {
-        return (h(Host, { key: '16f2897c60b5a41256f326d520277480e2800f17', style: this.hostCSSProperties() }, this.getHeadingTag()));
+        return (h(Host, { key: 'cad9af85d407889d1c8c17f12237366e2cb50d1c', style: this.hostCSSProperties() }, this.getHeadingTag()));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/cura-icon2.js CHANGED Viewed

@@ -47,7 +47,7 @@ const CuraIcon = /*@__PURE__*/ proxyCustomElement(class CuraIcon extends HTMLEle
         this.host.style.setProperty(prop, value);
     }
     render() {
-        return (h(Host, { key: '0a9f6e85bc7be23072c17fd8f99ca88601e2a830' }, h("svg", { key: '00e4c6f5ce357b7a974d3dd0a27948fc1e8138ce', version: "1.1", viewBox: "0 0 24 24", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg" }, h("use", { key: '504a842d6b030539cb615cf60b090fbc9f771761', xlinkHref: `${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}` }))));
+        return (h(Host, { key: '09f68d2b455427bf45dca2e6b30e993ebfa6b3a0' }, h("svg", { key: 'f15fea7564efac510263f06f8d15288fec004f66', version: "1.1", viewBox: "0 0 24 24", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg" }, h("use", { key: 'b88136d10453dc9e1d2c41ceb10676b348430ae3', xlinkHref: `${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}` }))));
     }
     get host() { return this; }
     static get watchers() { return {

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

@@ -24,7 +24,7 @@ const CuraIconsView$1 = /*@__PURE__*/ proxyCustomElement(class CuraIconsView ext
         this.sizes.unshift(this.sizes.pop());
     }
     render() {
-        return (h(Host, { key: '4c5839d8673f7b6cc5ef212f3dab12fbd7fa4a65' }, h("div", { key: '80ac970319cd6041b133a5808ff5c47a8e7b8aa6', class: "iconDetail" }, h("cura-heading", { key: 'd1a2fbd4455304a9f581e62207492cd172abcd93', size: "small", "margin-block": "0 24px" }, "Icon: ", h("b", { key: '67e7e479b00f6305af972c7de12e926c0d2067ca' }, this.selected)), h("div", { key: '8eb81c26431259818f299dd7ebcf708d1f664dc1', class: "iconSizes" }, this.sizes.map(size => h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size }), h("span", null, size)))), h("div", { key: '2ff3b3a5868a68e2f6fa967fa2e3e9c2e5883451', class: "iconSizes invert" }, this.sizes.map(size => h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size, color: "neutral-white" }), h("span", null, size))))), h("div", { key: 'c3581991a1b8971447625ed67f4ba0d616efb855', class: "icons" }, iconsetdefaulticons.map(icon => h("div", { class: { icon: true, selected: icon === this.selected }, onClick: () => this.setSelected(icon) }, h("cura-icon", { name: icon, size: "32", color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }), h("cura-label", { size: "xsmall", weight: icon === this.selected ? 'bold' : 'regular', color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }, icon))))));
+        return (h(Host, { key: '4918bc5d13f24f3133af45ce5991b3f3f43e99cf' }, h("div", { key: '837d47976a39702b13ceb5a7c5ac8ae097d34988', class: "iconDetail" }, h("cura-heading", { key: 'de4c75c4652b464991aa173cf7243db65f9ba2ba', size: "small", "margin-block": "0 24px" }, "Icon: ", h("b", { key: '77591ce199e5140ddcde3d7b956586d27fe6bc05' }, this.selected)), h("div", { key: '6da36b174603d48ab3b11a8490c424f164855147', class: "iconSizes" }, this.sizes.map(size => h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size }), h("span", null, size)))), h("div", { key: '4920c8010e0a55f80bb557f4ba0e537b7861ae36', class: "iconSizes invert" }, this.sizes.map(size => h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size, color: "neutral-white" }), h("span", null, size))))), h("div", { key: '99739b351fb25036efd4b55774c0f077058be8fc', class: "icons" }, iconsetdefaulticons.map(icon => h("div", { class: { icon: true, selected: icon === this.selected }, onClick: () => this.setSelected(icon) }, h("cura-icon", { name: icon, size: "32", color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }), h("cura-label", { size: "xsmall", weight: icon === this.selected ? 'bold' : 'regular', color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }, icon))))));
     }
     static get style() { return CuraIconsViewStyle0; }
 }, [1, "cura-icons-view", {

package/dist/components/cura-input-date.js CHANGED Viewed

@@ -178,7 +178,7 @@ const CuraInputDate$1 = /*@__PURE__*/ proxyCustomElement(class CuraInputDate ext
         }
     }
     render() {
-        return (h(Host, { key: '4475cb04acbde80d6c0b4b8d307a2e6d85384251' }, h("div", { key: 'c5ee644bc041a5e66d516b179d2805f5b91e1312', class: "container", style: this.styles }, h("cura-input-text", { key: 'b73b2acd0e6ded25fe9bfcb3de3638dd7d30e474', label: this.label, name: this.name, status: this.status, value: this.value, onFocus: () => this.showCalendar(), size: this.size, "icon-name": this.iconName, placeholder: this.dateSettings.placeholder, "mask-preset": this.dateSettings.mask, "enable-selection-mode": true, onKeyUp: event => this.handleInputDates(event), autocomplete: "off", onValueChange: event => this.handleChangeDates(event) }, this.renderCalendarOrHelperText()))));
+        return (h(Host, { key: '1395108764c1957abb9371b82ab983d076aaf61e' }, h("div", { key: 'e3134a1cfbf6f07b83f148b3e1b9c699e273a098', class: "container", style: this.styles }, h("cura-input-text", { key: '507ce8cedd5a169832579ae3ea313d3b3d6813d2', label: this.label, name: this.name, status: this.status, value: this.value, onFocus: () => this.showCalendar(), size: this.size, "icon-name": this.iconName, placeholder: this.dateSettings.placeholder, "mask-preset": this.dateSettings.mask, "enable-selection-mode": true, onKeyUp: event => this.handleInputDates(event), autocomplete: "off", onValueChange: event => this.handleChangeDates(event) }, this.renderCalendarOrHelperText()))));
     }
     static get formAssociated() { return true; }
     get el() { return this; }

package/dist/components/cura-label2.js CHANGED Viewed

@@ -53,7 +53,7 @@ const CuraLabel = /*@__PURE__*/ proxyCustomElement(class CuraLabel extends HTMLE
         };
     }
     render() {
-        return (h(Host, { key: 'cd35f2488c9783fc69bf2aea4c56c5dbb6e4d954', style: this.hostCSSProperties() }, h("p", { key: '2ab39f5cbd61b55525b4d2d9c39d19106b735ebb', style: this.styles, class: this.getClasses() }, h("slot", { key: 'f30ccdb0c038ae93096ab94db4a80a407a9976dc' }))));
+        return (h(Host, { key: '0155daf05e29fca75db8d8b8b103a4d3b60c1bc9', style: this.hostCSSProperties() }, h("p", { key: 'cd63e97738f18f2842e3f6e3a0d086dd0c240651', style: this.styles, class: this.getClasses() }, h("slot", { key: 'e20da850c970c10f03f832d59db1050f2329c856' }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/cura-loader-bar2.js CHANGED Viewed

@@ -23,7 +23,7 @@ const CuraLoaderBar = /*@__PURE__*/ proxyCustomElement(class CuraLoaderBar exten
         this.setProgress();
     }
     render() {
-        return (h(Host, { key: '2cffac94bdca65aa8ddff9d57c085a6b2eb30410' }, h("div", { key: 'cfdcf79c63a6c40f24088a71f96986ba46e6d7b7', id: "progress-bar", class: "progress-bar", style: this.styles }, h("span", { key: 'ae0cd539ddc63db0d0adae566788501b2042d82b', class: "progress-bar-fill" }))));
+        return (h(Host, { key: 'ae36cc67cb0b22bf0156ee1cc41472ea74cee0a9' }, h("div", { key: 'd3cc5382d1b4967ab7622f4b71dfb51d2e913ddb', id: "progress-bar", class: "progress-bar", style: this.styles }, h("span", { key: '9a34c97d65e4cb4692371b876304175610770098', class: "progress-bar-fill" }))));
     }
     setColor() {
         this.styles = Object.assign(Object.assign({}, this.styles), { '--neutral-base': window.CuraAPI.theme.colors.getColor(`neutral-base`, 0.2), '--color-base': window.CuraAPI.theme.colors.getColor(this.color) });

package/dist/components/cura-loader-circle2.js CHANGED Viewed

@@ -26,7 +26,7 @@ const CuraLoaderCircle = /*@__PURE__*/ proxyCustomElement(class CuraLoaderCircle
         };
     }
     render() {
-        return (h(Host, { key: 'b54c7d6fb5f297776c415fc6320dcc56a8d8e23f', style: this.getStyles() }, h("svg", { key: '678e5b6959113b39bbd99cfa1cc24fe3476f88f5', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: 'f644ac82003dc4a59944d75d315c0e0e857de2c0' }, h("circle", { key: 'edf0ee851a9baf6f4928f961b296de9b82652aba', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), h("path", { key: '60892a122ff4036ca29e550794ab1ce06c221359', d: "M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5", "stroke-width": "2" })), h("defs", { key: '3b9a54760fe0bab2e8fe6139b8c7365d11e1d966' }, h("linearGradient", { key: '447ab3c5dd38685173404c775c7fd993f6ffd696', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'df6855ea0c534bd6a623580573f999f1e078f77f' }), h("stop", { key: '8a76e2928a39673780ad5561dbc5b4204af62fcb', offset: "1" }))))));
+        return (h(Host, { key: '4bbd56cb3e6ba4567a55151130434632f65ae43d', style: this.getStyles() }, h("svg", { key: 'e3bedd1366e04387303f70785d9524e45d2c05e1', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '0432c14bd08943b91d0df19ccece4b6ff689ff59' }, h("circle", { key: 'abcb2c008e0c86d5de76becb39784a765edb0c5f', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), h("path", { key: '0e46ede5d639ddcd639938ede38bd290b270e21b', d: "M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5", "stroke-width": "2" })), h("defs", { key: '078f23c3acf4d470be0bcf652d0fcfa032a349dd' }, h("linearGradient", { key: '15b205073cc09ecb60ec03cbbdbad1655d35419d', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'a4903782973fe126203024c4b7b9fbe01b5f673b' }), h("stop", { key: 'bb6ca25801db81e40f1d234ef89632fe175a737e', offset: "1" }))))));
     }
     static get style() { return CuraLoaderCircleStyle0; }
 }, [1, "cura-loader-circle", {

package/dist/components/cura-modal.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { d as defineCustomElement$3 } from './cura-icon2.js';
 import { d as defineCustomElement$2 } from './cura-paragraph2.js';
-const curaModalCss = ":host{display:block}.modal{position:fixed;height:100%;width:100%;top:var(--top-offset);bottom:var(--bottom-offset);left:var(--left-offset);right:var(--right-offset);z-index:-1;margin-top:var(--offset-top)}.modal.open{z-index:100}.modal.open .backdrop,.modal.open .wrapper{opacity:1;visibility:visible;animation:fadeIn 0.3s ease-out}.container{display:flex;align-items:center;justify-content:center}.backdrop,.wrapper{opacity:0;visibility:hidden;transition:opacity 0.3s ease, visibility 0.3s ease}.backdrop{background-color:var(--background-color);z-index:90;animation:fadeIn 0.3s ease-out}.wrapper{position:fixed;background-color:var(--neutral-white);border:2px solid var(--neutral-light);border-radius:calc(var(--base-spacing) * 3px);width:700px;max-width:600px;min-width:200px;padding:0px calc(var(--base-spacing) * 4px) calc(var(--base-spacing) * 4px) calc(var(--base-spacing) * 4px);z-index:100;box-shadow:0px 8px 16px 0px var(--neutral-black-shadow-4, rgba(38, 38, 38, 0.12));transform:scale(0.95);transition:transform 0.3s ease-out, opacity 0.3s ease, visibility 0.3s ease}.wrapper ::slotted(*){max-height:80vh;overflow:auto;padding-right:calc(var(--base-spacing) * 5px)}.modal.open .wrapper{transform:scale(1);opacity:1;visibility:visible}.close{justify-self:flex-end;padding-top:calc(var(--base-spacing) * 4px);background:none;border:none;cursor:pointer}.close.mobile{display:none}.close.desktop{display:flex}@media (max-width: 768px){.wrapper{position:fixed;bottom:0px;width:80%;padding-top:calc(var(--base-spacing) * 4px);padding-bottom:0px;border-radius:calc(var(--base-spacing) * 3px) calc(var(--base-spacing) * 3px) 0px 0px;border-bottom:none}.close{align-items:center;border-top:1px dashed var(--neutral-light);margin-top:calc(var(--base-spacing) * 4px);padding:calc(var(--base-spacing) * 4px) 0px;justify-content:center;width:100%}.close.mobile{display:flex;gap:calc(var(--base-spacing) * 2px)}.close.desktop{display:none}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}";
+const curaModalCss = ":host{display:block}.modal{position:fixed;height:100%;width:100%;top:var(--top-offset);bottom:var(--bottom-offset);left:var(--left-offset);right:var(--right-offset);z-index:-1;margin-top:var(--offset-top)}.modal.open{z-index:var(--zIndex)}.modal.open .backdrop,.modal.open .wrapper{opacity:1;visibility:visible;animation:fadeIn 0.3s ease-out}.container{display:flex;align-items:center;justify-content:center}.backdrop,.wrapper{opacity:0;visibility:hidden;transition:opacity 0.3s ease, visibility 0.3s ease}.backdrop{background-color:var(--background-color);z-index:calc(var(--zIndex) - 10);animation:fadeIn 0.3s ease-out}.wrapper{position:fixed;background-color:var(--neutral-white);border:2px solid var(--neutral-light);border-radius:calc(var(--base-spacing) * 3px);width:700px;max-width:600px;min-width:200px;padding:0px calc(var(--base-spacing) * 4px) calc(var(--base-spacing) * 4px) calc(var(--base-spacing) * 4px);z-index:var(--zIndex);box-shadow:0px 8px 16px 0px var(--neutral-black-shadow-4, rgba(38, 38, 38, 0.12));transform:scale(0.95);transition:transform 0.3s ease-out, opacity 0.3s ease, visibility 0.3s ease}.wrapper ::slotted(*){max-height:80vh;overflow:auto;padding-right:calc(var(--base-spacing) * 5px)}.modal.open .wrapper{transform:scale(1);opacity:1;visibility:visible}.close{justify-self:flex-end;padding-top:calc(var(--base-spacing) * 4px);background:none;border:none;cursor:pointer}.close.mobile{display:none}.close.desktop{display:flex}@media (max-width: 768px){.wrapper{position:fixed;bottom:0px;width:80%;padding-top:calc(var(--base-spacing) * 4px);padding-bottom:0px;border-radius:calc(var(--base-spacing) * 3px) calc(var(--base-spacing) * 3px) 0px 0px;border-bottom:none}.close{align-items:center;border-top:1px dashed var(--neutral-light);margin-top:calc(var(--base-spacing) * 4px);padding:calc(var(--base-spacing) * 4px) 0px;justify-content:center;width:100%}.close.mobile{display:flex;gap:calc(var(--base-spacing) * 2px)}.close.desktop{display:none}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}";
 const CuraModalStyle0 = curaModalCss;
 const CuraModal$1 = /*@__PURE__*/ proxyCustomElement(class CuraModal extends HTMLElement {
@@ -21,6 +21,8 @@ const CuraModal$1 = /*@__PURE__*/ proxyCustomElement(class CuraModal extends HTM
         this.bottom = 0;
         this.left = 0;
         this.right = 0;
+        this.mobileCloseLabel = 'Fechar';
+        this.zindex = '100';
         this.styles = {};
     }
     setColors() {
@@ -54,7 +56,7 @@ const CuraModal$1 = /*@__PURE__*/ proxyCustomElement(class CuraModal extends HTM
         this.setRight();
     }
     render() {
-        return (h(Host, { key: '5061e0536f1f06ae425a810fc15eb85d36caa271', role: "dialog", "aria-modal": "true" }, h("div", { key: '2afc242ddb391923dccfb6adc218179d32ee85e3', class: this.open ? 'modal container open' : 'modal container', style: this.styles }, h("div", { key: '5cf4d0d0817e23774984991467b8a34297f47336', class: this.open ? 'modal backdrop open' : 'modal backdrop', onClick: this.handleClose }), h("div", { key: 'ba6a2679ce03c87c88e42c4f28616ab9afc09116', class: "wrapper" }, h("button", { key: 'cc3126fa311ef7eb75dbdb56468d7b53af13740c', class: "close desktop", onClick: this.handleClose }, h("cura-icon", { key: 'b116480ab348f69fafbbc5e8bef7ee5a43640b00', name: "close", color: "error-dark", size: "small" })), h("slot", { key: '7fd83b4991dee4e7cab92bf6e357efa4ce3c1d71' }), h("button", { key: '1351ba9d296c1362197496f336a20007cd6f45f0', class: "close mobile", onClick: this.handleClose }, h("cura-icon", { key: '3d72c9f8981c380ab8ff19e4507497703011aece', name: "close", color: "error-dark", size: "16" }), h("cura-paragraph", { key: '77e1144a9edb1c20e34f9f7e02ea97264d525143', color: "error-dark", size: "small", marginBlock: "0" }, "Fechar"))))));
+        return (h(Host, { key: '50f4146aed5392ae16803fb060d4921a5e8a3271', role: "dialog", "aria-modal": "true", style: { '--zIndex': this.zindex } }, h("div", { key: '149e99a4b8b479515ed3d67c5c8aea08d4d96d1c', class: this.open ? 'modal container open' : 'modal container', style: this.styles }, h("div", { key: 'f32f7f7e16475c51babf95e1ca5f4fea449c1bb0', class: this.open ? 'modal backdrop open' : 'modal backdrop', onClick: this.handleClose }), h("div", { key: '183f7ab8f2cee8106795f6104c38a2c93272387f', class: "wrapper" }, h("button", { key: '28778c8120c92dfcae0443dccd21f55a204bd82e', class: "close desktop", onClick: this.handleClose }, h("cura-icon", { key: 'a847de5c1314ea1460673870334f3f98e98f1cf9', name: "close", color: "error-dark", size: "small" })), h("slot", { key: 'e08b556b7232425c2b83a21dac75d30fb4361a83' }), h("button", { key: 'e736a95f878ff5a2ad6897d9140fd74b26939445', class: "close mobile", onClick: this.handleClose }, h("cura-icon", { key: '9eaeaca6f4ea9d3cde5fd44e108de389c727f991', name: "close", color: "error-dark", size: "16" }), h("cura-paragraph", { key: '2476b85e5dd7d6092d3d1d1714ee4a79b73b12d0', color: "error-dark", size: "small", marginBlock: "0" }, this.mobileCloseLabel))))));
     }
     static get watchers() { return {
         "background": ["setColors"],
@@ -71,6 +73,8 @@ const CuraModal$1 = /*@__PURE__*/ proxyCustomElement(class CuraModal extends HTM
         "bottom": [2],
         "left": [2],
         "right": [2],
+        "mobileCloseLabel": [513, "mobile-close-label"],
+        "zindex": [513],
         "styles": [32]
     }, undefined, {
         "background": ["setColors"],

package/dist/components/cura-modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"cura-modal.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,~~m/DAAm/D~~,CAAC;~~AACzgE~~,wBAAe,YAAY;;MCMdA,WAAS;;;;;;~~QA4FZ~~,gBAAW,GAAG;YACpB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;SACnB,CAAC;~~oBA1FuD~~,KAAK;0BAKtB,OAAO;mBAKxB,CAAC;sBAKE,CAAC;oBAKH,CAAC;qBAKA,CAAC;~~sBAMR~~,EAAE;;IAGpB,SAAS;QACP,MAAM,eAAe,GAAG;YACtB,IAAI,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,EAAE,GAAG,CAAC;YAChE,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,EAAE,GAAG,CAAC;SACnE,CAAC;QAEF,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,oBAAoB,EAAE,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,GACvD,CAAC;KACH;IAED,SAAS,CAAC,IAAY,EAAE,KAAa;QACnC,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,CAAC,KAAK,IAAI,SAAS,GAAG,GAAG,KAAK,IAAI,GACnC,CAAC;KACH;IAGD,MAAM;QACJ,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;KACjC;IAGD,SAAS;QACP,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;KACvC;IAGD,OAAO;QACL,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KACnC;IAGD,QAAQ;QACN,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;KACrC;IAED,iBAAiB;QACf,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,iBAAiB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,EACxE,iBAAiB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,EACxE,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,GAC5D,CAAC;QACF,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,OAAO,EAAE,CAAC;QACf,IAAI,CAAC,QAAQ,EAAE,CAAC;KACjB;IAOD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,QAAQ,gBAAY,MAAM,~~IACnC~~,4DAAK,KAAK,EAAE,IAAI,CAAC,IAAI,GAAG,sBAAsB,GAAG,iBAAiB,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,IACpF,4DAAK,KAAK,EAAE,IAAI,CAAC,IAAI,GAAG,qBAAqB,GAAG,gBAAgB,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,GAAQ,EACnG,4DAAK,KAAK,EAAC,SAAS,IAElB,+DAAQ,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IACrD,kEAAW,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,GAAa,CAC7D,EACT,8DAAa,EAEb,+DAAQ,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IACpD,kEAAW,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,GAAa,EACjE,uEAAgB,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,GAAG,~~aAE9C~~,CACV,CACL,CACF,CACD,EACP;KACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["CuraModal"],"sources":["src/components/cura-modal/cura-modal.scss?tag=cura-modal&encapsulation=shadow","src/components/cura-modal/cura-modal.tsx"],"sourcesContent":["@import '../../../src/scss/mixins/spacing.scss';\n@import '../../../src/scss/mixins/shadows.scss';\n@import '../../../src/scss/mixins/responsive.scss';\n@import '../../../src/scss/mixins/animations.scss';\n\n:host {\n display: block;\n}\n\n.modal {\n position: fixed;\n height: 100%;\n width: 100%;\n top: var(--top-offset);\n bottom: var(--bottom-offset);\n left: var(--left-offset);\n right: var(--right-offset);\n z-index: -1;\n margin-top: var(--offset-top);\n\n &.open {\n z-index: ~~100~~;\n\n .backdrop,\n .wrapper {\n opacity: 1;\n visibility: visible;\n animation: fadeIn 0.3s ease-out;\n }\n }\n}\n\n.container {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.backdrop,\n.wrapper {\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n}\n\n.backdrop {\n background-color: var(--background-color);\n z-index: 90;\n animation: fadeIn 0.3s ease-out;\n}\n\n.wrapper {\n position: fixed;\n background-color: var(--neutral-white);\n border: 2px solid var(--neutral-light);\n border-radius: #{$spacing-xxxs};\n width: 700px;\n max-width: 600px;\n min-width: 200px;\n padding: #{$spacing-none} #{$spacing-xxs} #{$spacing-xxs} #{$spacing-xxs};\n z-index: ~~100~~;\n\n @include shadow-level4();\n\n transform: scale(0.95);\n transition: transform 0.3s ease-out, opacity 0.3s ease, visibility 0.3s ease;\n\n ::slotted() {\n max-height: 80vh;\n overflow: auto;\n padding-right: #{$spacing-xs};\n }\n}\n\n.modal.open .wrapper {\n transform: scale(1);\n opacity: 1;\n visibility: visible;\n}\n\n.close {\n justify-self: flex-end;\n padding-top: #{$spacing-xxs};\n background: none;\n border: none;\n cursor: pointer;\n\n &.mobile {\n display: none;\n }\n\n &.desktop {\n display: flex;\n }\n}\n\n@include mobile-only() {\n .wrapper {\n position: fixed;\n bottom: #{$spacing-none};\n width: 80%;\n padding-top: #{$spacing-xxs};\n padding-bottom: #{$spacing-none};\n border-radius: #{$spacing-xxxs} #{$spacing-xxxs} #{$spacing-none} #{$spacing-none};\n border-bottom: none;\n }\n\n .close {\n align-items: center;\n border-top: 1px dashed var(--neutral-light);\n margin-top: #{$spacing-xxs};\n padding: #{$spacing-xxs} #{$spacing-none};\n justify-content: center;\n width: 100%;\n\n &.mobile {\n display: flex;\n gap: #{$spacing-mini};\n }\n\n &.desktop {\n display: none;\n }\n }\n}\n\n@include fadeIn();\n@include fadeOut();\n","import { Component, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'cura-modal',\n styleUrl: 'cura-modal.scss',\n shadow: true,\n})\nexport class CuraModal {\n /\n Property open to control modal visibility.\n * Default: false\n /\n @Prop({ mutable: true, reflect: true }) open?: boolean = false;\n /\n Property background to control modal backdrop color.\n * Default: light\n /\n @Prop() background?: 'dark' \| 'light' = 'light';\n /\n Property top to control modal top position.\n * Default: 0px\n /\n @Prop() top?: number = 0;\n /\n Property bottom to control modal bottom position.\n * Default: 0px\n /\n @Prop() bottom?: number = 0;\n /\n Property left to control modal left position.\n * Default: 0px\n /\n @Prop() left?: number = 0;\n /\n Property right to control modal right position.\n * Default: 0px\n /\n @Prop() right?: number = 0;\n /\n Event close to handle modal close.\n /\n @Event({ eventName: 'modalClose' }) modalClose: EventEmitter<void>;\n\n @State() styles = {};\n\n @Watch('background')\n setColors() {\n const backgroundTheme = {\n dark: window.CuraAPI.theme.colors.getColor('neutral-black', 0.4),\n light: window.CuraAPI.theme.colors.getColor('primary-darker', 0.8),\n };\n\n this.styles = {\n ...this.styles,\n '--background-color': backgroundTheme[this.background],\n };\n }\n\n setOffset(name: string, value: number) {\n this.styles = {\n ...this.styles,\n [`--${name}-offset`]: `${value}px`,\n };\n }\n\n @Watch('top')\n setTop() {\n this.setOffset('top', this.top);\n }\n\n @Watch('bottom')\n setBottom() {\n this.setOffset('bottom', this.bottom);\n }\n\n @Watch('left')\n setLeft() {\n this.setOffset('left', this.left);\n }\n\n @Watch('right')\n setRight() {\n this.setOffset('right', this.right);\n }\n\n connectedCallback() {\n this.styles = {\n ...this.styles,\n '--neutral-white': window.CuraAPI.theme.colors.getColor('neutral-white'),\n '--neutral-light': window.CuraAPI.theme.colors.getColor('neutral-light'),\n '--base-spacing': window.CuraAPI.theme.spacing.getSpacing(),\n };\n this.setColors();\n this.setTop();\n this.setBottom();\n this.setLeft();\n this.setRight();\n }\n\n private handleClose = () => {\n this.modalClose.emit();\n this.open = false;\n };\n\n render() {\n return (\n <Host role=\"dialog\" aria-modal=\"true\">\n <div class={this.open ? 'modal container open' : 'modal container'} style={this.styles}>\n <div class={this.open ? 'modal backdrop open' : 'modal backdrop'} onClick={this.handleClose}></div>\n <div class=\"wrapper\">\n {/ Desktop button /}\n <button class=\"close desktop\" onClick={this.handleClose}>\n <cura-icon name=\"close\" color=\"error-dark\" size=\"small\"></cura-icon>\n </button>\n <slot></slot>\n {/ Mobile button */}\n <button class=\"close mobile\" onClick={this.handleClose}>\n <cura-icon name=\"close\" color=\"error-dark\" size=\"16\"></cura-icon>\n <cura-paragraph color=\"error-dark\" size=\"small\" marginBlock=\"0\">\n ~~Fechar~~\n </cura-paragraph>\n </button>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"cura-modal.js","mappings":"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","names":["CuraModal"],"sources":["src/components/cura-modal/cura-modal.scss?tag=cura-modal&encapsulation=shadow","src/components/cura-modal/cura-modal.tsx"],"sourcesContent":["@import '../../../src/scss/mixins/spacing.scss';\n@import '../../../src/scss/mixins/shadows.scss';\n@import '../../../src/scss/mixins/responsive.scss';\n@import '../../../src/scss/mixins/animations.scss';\n\n:host {\n display: block;\n}\n\n.modal {\n position: fixed;\n height: 100%;\n width: 100%;\n top: var(--top-offset);\n bottom: var(--bottom-offset);\n left: var(--left-offset);\n right: var(--right-offset);\n z-index: -1;\n margin-top: var(--offset-top);\n\n &.open {\n z-index: var(--zIndex);\n\n .backdrop,\n .wrapper {\n opacity: 1;\n visibility: visible;\n animation: fadeIn 0.3s ease-out;\n }\n }\n}\n\n.container {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.backdrop,\n.wrapper {\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n}\n\n.backdrop {\n background-color: var(--background-color);\n z-index: calc(var(--zIndex) - 10);\n animation: fadeIn 0.3s ease-out;\n}\n\n.wrapper {\n position: fixed;\n background-color: var(--neutral-white);\n border: 2px solid var(--neutral-light);\n border-radius: #{$spacing-xxxs};\n width: 700px;\n max-width: 600px;\n min-width: 200px;\n padding: #{$spacing-none} #{$spacing-xxs} #{$spacing-xxs} #{$spacing-xxs};\n z-index: var(--zIndex);\n\n @include shadow-level4();\n\n transform: scale(0.95);\n transition: transform 0.3s ease-out, opacity 0.3s ease, visibility 0.3s ease;\n\n ::slotted() {\n max-height: 80vh;\n overflow: auto;\n padding-right: #{$spacing-xs};\n }\n}\n\n.modal.open .wrapper {\n transform: scale(1);\n opacity: 1;\n visibility: visible;\n}\n\n.close {\n justify-self: flex-end;\n padding-top: #{$spacing-xxs};\n background: none;\n border: none;\n cursor: pointer;\n\n &.mobile {\n display: none;\n }\n\n &.desktop {\n display: flex;\n }\n}\n\n@include mobile-only() {\n .wrapper {\n position: fixed;\n bottom: #{$spacing-none};\n width: 80%;\n padding-top: #{$spacing-xxs};\n padding-bottom: #{$spacing-none};\n border-radius: #{$spacing-xxxs} #{$spacing-xxxs} #{$spacing-none} #{$spacing-none};\n border-bottom: none;\n }\n\n .close {\n align-items: center;\n border-top: 1px dashed var(--neutral-light);\n margin-top: #{$spacing-xxs};\n padding: #{$spacing-xxs} #{$spacing-none};\n justify-content: center;\n width: 100%;\n\n &.mobile {\n display: flex;\n gap: #{$spacing-mini};\n }\n\n &.desktop {\n display: none;\n }\n }\n}\n\n@include fadeIn();\n@include fadeOut();\n","import { Component, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'cura-modal',\n styleUrl: 'cura-modal.scss',\n shadow: true,\n})\nexport class CuraModal {\n /\n Property open to control modal visibility.\n * Default: false\n /\n @Prop({ mutable: true, reflect: true }) open?: boolean = false;\n /\n Property background to control modal backdrop color.\n * Default: light\n /\n @Prop() background?: 'dark' \| 'light' = 'light';\n /\n Property top to control modal top position.\n * Default: 0px\n /\n @Prop() top?: number = 0;\n /\n Property bottom to control modal bottom position.\n * Default: 0px\n /\n @Prop() bottom?: number = 0;\n /\n Property left to control modal left position.\n * Default: 0px\n /\n @Prop() left?: number = 0;\n /\n Property right to control modal right position.\n * Default: 0px\n /\n @Prop() right?: number = 0;\n /\n Defines the label for the close button when the modal is viewed on mobile.\n * Default: Fechar\n /\n @Prop({ reflect: true }) mobileCloseLabel: string = 'Fechar';\n /\n Property zindex to control the z-index value of the component.\n * Default: 100\n /\n @Prop({ reflect: true }) zindex: string = '100';\n /\n Event close to handle modal close.\n /\n @Event({ eventName: 'modalClose' }) modalClose: EventEmitter<void>;\n\n @State() styles = {};\n\n @Watch('background')\n setColors() {\n const backgroundTheme = {\n dark: window.CuraAPI.theme.colors.getColor('neutral-black', 0.4),\n light: window.CuraAPI.theme.colors.getColor('primary-darker', 0.8),\n };\n\n this.styles = {\n ...this.styles,\n '--background-color': backgroundTheme[this.background],\n };\n }\n\n setOffset(name: string, value: number) {\n this.styles = {\n ...this.styles,\n [`--${name}-offset`]: `${value}px`,\n };\n }\n\n @Watch('top')\n setTop() {\n this.setOffset('top', this.top);\n }\n\n @Watch('bottom')\n setBottom() {\n this.setOffset('bottom', this.bottom);\n }\n\n @Watch('left')\n setLeft() {\n this.setOffset('left', this.left);\n }\n\n @Watch('right')\n setRight() {\n this.setOffset('right', this.right);\n }\n\n connectedCallback() {\n this.styles = {\n ...this.styles,\n '--neutral-white': window.CuraAPI.theme.colors.getColor('neutral-white'),\n '--neutral-light': window.CuraAPI.theme.colors.getColor('neutral-light'),\n '--base-spacing': window.CuraAPI.theme.spacing.getSpacing(),\n };\n this.setColors();\n this.setTop();\n this.setBottom();\n this.setLeft();\n this.setRight();\n }\n\n private handleClose = () => {\n this.modalClose.emit();\n this.open = false;\n };\n\n render() {\n return (\n <Host role=\"dialog\" aria-modal=\"true\" style={{ '--zIndex': this.zindex }}>\n <div class={this.open ? 'modal container open' : 'modal container'} style={this.styles}>\n <div class={this.open ? 'modal backdrop open' : 'modal backdrop'} onClick={this.handleClose}></div>\n <div class=\"wrapper\">\n {/ Desktop button /}\n <button class=\"close desktop\" onClick={this.handleClose}>\n <cura-icon name=\"close\" color=\"error-dark\" size=\"small\"></cura-icon>\n </button>\n <slot></slot>\n {/ Mobile button */}\n <button class=\"close mobile\" onClick={this.handleClose}>\n <cura-icon name=\"close\" color=\"error-dark\" size=\"16\"></cura-icon>\n <cura-paragraph color=\"error-dark\" size=\"small\" marginBlock=\"0\">\n {this.mobileCloseLabel}\n </cura-paragraph>\n </button>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -21,7 +21,7 @@ const CuraPageTemplate$1 = /*@__PURE__*/ proxyCustomElement(class CuraPageTempla
         return classes;
     }
     render() {
-        return (h(Host, { key: '1e08a43c7701b7063cb652f6e040d3d5f5eb09a4' }, h("div", { key: '8aed196bdd1e4385a5cd397d531f32d5d6a34e45', style: this.styles, class: "grid-template" }, h("div", { key: '92bb8cc24ddc2a6c7cb81cca6326e3aae62fe9fb', id: "sub-header" }, h("slot", { key: 'af2542eb9aae107bb96009e1dbf234099e3fee06', name: 'sub-header' })), h("div", { key: '11ccbfe4b8f226d5f312b9db81cb10bf7aff6058', id: "header" }, h("slot", { key: 'f4cf6ce66934479b421841c0d85341ad771f8801', name: 'header' })), h("div", { key: 'b0af61b6a26cffbae8722a265bbf695984aeb192', id: "pre-content" }, h("slot", { key: '1c6e615377935f2d8bcdc0106a7f8ef46a4096c8', name: 'pre-content' })), h("div", { key: '7c9600de42ea9338571f59c7dfa07e8d83d907f3', id: "content-container", class: this.getClasses() }, h("div", { key: '8e9c4100038b1a7add298292b039098a66936fc3', id: "sidebar-left" }, h("slot", { key: '266eface0f8eb826fce97ec1c6eb8a5f2a983256', name: 'sidebar-left' })), h("div", { key: 'da2e6b2a9d72cb80f5f340e877388ce82e285d97', id: "content" }, h("slot", { key: '8e1fb56cad2e3b693fb40c87bc8b8813ac1c5cec', name: "content" }), h("slot", { key: '7fcfa41e62fbb3eb03e6350d2242119cea4a7172' })), h("div", { key: '561cdd39b2327375fbfab17b7d9ba61d3c8641e1', id: "sidebar-right" }, h("slot", { key: 'abb1a3c4b46a4e576f9720582e41237f323baedb', name: 'sidebar-right' }))), h("div", { key: '273e8172b1084ef92d125ec3c524bd0a357e740a', id: "post-body" }, h("slot", { key: '9c0ba47959028dd86b5d83fe9050e4cbd51b09f0', name: 'post-body' })), h("div", { key: 'ec53311edaed349b82cf37be5957d9a07e1e25d3', id: "footer" }, h("slot", { key: '16d56243b257ba7b3b6919c5fcd4b482d646b925', name: 'footer' })), h("div", { key: 'ed81fc5a890b564a6b437f61122259b6ea5a94f2', id: "sub-footer" }, h("slot", { key: '88c1d8297bd16ac01f7f5e81803cee6d1b13aa41', name: 'sub-footer' })))));
+        return (h(Host, { key: '9f26fb8ceb8b22ed9223bd215c07b6a19f6d78f1' }, h("div", { key: '38541ca9be4feecb9911c96cc954ba7501dc9b5e', style: this.styles, class: "grid-template" }, h("div", { key: 'daf436a589d75bb270f4b16230d1db1d7365c47e', id: "sub-header" }, h("slot", { key: '547c858a5913c600c1b745f400319d207a04c7ce', name: 'sub-header' })), h("div", { key: 'ba69ae91e87af01a8001a347f6de7d8ba7088619', id: "header" }, h("slot", { key: '6f72885d42d005f234942f2cbf8eefd98f4d0241', name: 'header' })), h("div", { key: 'd21dbb37e236b1b22e886a036a37fb2e65e538f3', id: "pre-content" }, h("slot", { key: '31b14b314d1ee2672f15883ea4bcc3c542520558', name: 'pre-content' })), h("div", { key: 'a1297f482f15b4947043401b25e2c4ecbedd31fd', id: "content-container", class: this.getClasses() }, h("div", { key: '9c0c466a46c5fc81c64663dd0aff4e073cc6cb72', id: "sidebar-left" }, h("slot", { key: '10364527d218b1c05064095a5a69a411cb23322a', name: 'sidebar-left' })), h("div", { key: '23029f84833a0959f43f30b4dcc5d8bc08a0bf05', id: "content" }, h("slot", { key: '8dbcf34f4808d0983df99c77b52f927b8f1a69d7', name: "content" }), h("slot", { key: '6a235586dfb316c6449d531a566940d8de4e4a40' })), h("div", { key: 'b88f94db774c17aaa312ca55c9e67d611cabace3', id: "sidebar-right" }, h("slot", { key: '5efbbf777d7acb28e91f4dace10558926dafef60', name: 'sidebar-right' }))), h("div", { key: 'f40b983f2266e565faba96e8906cd69073b6598c', id: "post-body" }, h("slot", { key: 'd0f047c73b5b777f1eb9d61191bf172473c100cf', name: 'post-body' })), h("div", { key: 'b54482672a8017036b060203b5426bb2897c75fa', id: "footer" }, h("slot", { key: '4c65d471dcd2dfabc32e163cb9575f3d05fb2cda', name: 'footer' })), h("div", { key: '24c5d5a19e6d3fb943a1e99a7dfcfe9ad7cbb283', id: "sub-footer" }, h("slot", { key: '6f595500cac9906db6902685f172feaa7ee9e711', name: 'sub-footer' })))));
     }
     get host() { return this; }
     static get style() { return CuraPageTemplateStyle0; }

package/dist/components/cura-paragraph2.js CHANGED Viewed

@@ -52,7 +52,7 @@ const CuraParagraph = /*@__PURE__*/ proxyCustomElement(class CuraParagraph exten
         };
     }
     render() {
-        return (h(Host, { key: '237ff05930df443e9e8c2cb618554525c2312e35', style: this.hostCSSProperties() }, h("p", { key: '71afec31842fc60f17881613ab2f36f4cffd358b', style: this.styles, class: this.setsizeClass() }, h("slot", { key: '07fa9781d53113b7d4f9b7732b48d6836f700406' }))));
+        return (h(Host, { key: '8363d3df5dcb93aab4452bfe67e16d5c6238bf1f', style: this.hostCSSProperties() }, h("p", { key: 'e69d42e093a182eda646c425c987d5f71f3d2041', style: this.styles, class: this.setsizeClass() }, h("slot", { key: '0402210f031bda68edee85a93043e2ae6347eee1' }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/cura-progress-bar.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface CuraProgressBar extends Components.CuraProgressBar, HTMLElement {}
+export const CuraProgressBar: {
+    prototype: CuraProgressBar;
+    new (): CuraProgressBar;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/cura-progress-bar.js ADDED Viewed

@@ -0,0 +1,8 @@
+import { C as CuraProgressBar$1, d as defineCustomElement$1 } from './cura-progress-bar2.js';
+const CuraProgressBar = CuraProgressBar$1;
+const defineCustomElement = defineCustomElement$1;
+export { CuraProgressBar, defineCustomElement };
+//# sourceMappingURL=cura-progress-bar.js.map

package/dist/components/cura-progress-bar.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"file":"cura-progress-bar.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/cura-progress-bar2.js ADDED Viewed

@@ -0,0 +1,48 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+const curaProgressBarCss = ":host{display:block;box-sizing:border-box}.progress-bar{position:relative;display:flex;align-items:center;justify-content:center}.progress-bar span{position:absolute;display:flex}";
+const CuraProgressBarStyle0 = curaProgressBarCss;
+const CuraProgressBar = /*@__PURE__*/ proxyCustomElement(class CuraProgressBar extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.progressColor = undefined;
+        this.progress = undefined;
+        this.size = 40;
+        this.strokeWidth = 3.25;
+        this.active = undefined;
+    }
+    render() {
+        const radius = (this.size - this.strokeWidth) / 2;
+        const circumference = radius * Math.PI * 2;
+        const dash = (this.progress * circumference) / 100;
+        const viewBox = `0 0 ${this.size} ${this.size}`;
+        return (h(Host, { key: 'e0da7ede087161c67c9dd0371d15030dd5107a19' }, h("div", { key: 'ebe68fb426b46e94b7d03ded4e8aaed852337f30', class: "progress-bar" }, h("svg", { key: 'ace46878d45bfbe51dae29c3020d74f43c2f5147', width: this.size, height: this.size, viewBox: viewBox }, h("circle", { key: 'dbbde61a95a7f13dc14a72fe538da43953852d7b', fill: "none", stroke: "#ccc", cx: this.size / 2, cy: this.size / 2, r: radius, "stroke-width": `${this.strokeWidth}px` }), this.active && (h("circle", { key: '272c197451a47c73cfa91d7f7578a50b26958732', fill: "none", stroke: this.progressColor, cx: this.size / 2, cy: this.size / 2, r: radius, "stroke-width": `${this.strokeWidth}px`, transform: `rotate(-90 ${this.size / 2} ${this.size / 2})`, "stroke-dasharray": `${dash}px ${circumference - dash}px`, "stroke-linecap": "round", style: { transition: 'all 0.5s' } }))), h("span", { key: 'a80f024e09fb54218fe97039459472855226c063' }, h("slot", { key: '5683f5edd5b54bd852fc1036b284656bfda066c4' })))));
+    }
+    static get style() { return CuraProgressBarStyle0; }
+}, [1, "cura-progress-bar", {
+        "progressColor": [513, "progress-color"],
+        "progress": [514],
+        "size": [514],
+        "strokeWidth": [514, "stroke-width"],
+        "active": [516]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cura-progress-bar"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cura-progress-bar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CuraProgressBar);
+            }
+            break;
+    } });
+}
+export { CuraProgressBar as C, defineCustomElement as d };
+//# sourceMappingURL=cura-progress-bar2.js.map

package/dist/components/cura-progress-bar2.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"cura-progress-bar2.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,qLAAqL,CAAC;AACjN,8BAAe,kBAAkB;;MCMpB,eAAe;;;;;;;oBAcc,EAAE;2BAKK,IAAI;;;IAOnD,MAAM;QACJ,MAAM,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC;QAClD,MAAM,aAAa,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC;QAC3C,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,GAAG,aAAa,IAAI,GAAG,CAAC;QAEnD,MAAM,OAAO,GAAG,OAAO,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;QAEhD,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,cAAc,IACvB,4DAAK,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,IACxD,+DAAQ,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC,EAAE,MAAM,kBAAgB,GAAG,IAAI,CAAC,WAAW,IAAI,GAAI,EAC3H,IAAI,CAAC,MAAM,KACV,+DACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,IAAI,CAAC,aAAa,EAC1B,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,EACjB,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,EACjB,CAAC,EAAE,MAAM,kBACK,GAAG,IAAI,CAAC,WAAW,IAAI,EACrC,SAAS,EAAE,cAAc,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,IAAI,CAAC,IAAI,GAAG,CAAC,GAAG,sBACxC,GAAG,IAAI,MAAM,aAAa,GAAG,IAAI,IAAI,oBACxC,OAAO,EACtB,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,GACjC,CACH,CACG,EACN,+DACE,8DAAa,CACR,CACH,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/cura-stepper/cura-progress-bar/cura-progress-bar.scss?tag=cura-progress-bar&encapsulation=shadow","src/components/cura-stepper/cura-progress-bar/cura-progress-bar.tsx"],"sourcesContent":[":host {\n display: block;\n box-sizing: border-box;\n}\n\n.progress-bar {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n\n & span {\n position: absolute;\n display: flex;\n }\n}","import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'cura-progress-bar',\n styleUrl: 'cura-progress-bar.scss',\n shadow: true,\n})\nexport class CuraProgressBar {\n /**\n * Defines the color of the progress bar\n */\n @Prop({ reflect: true }) progressColor: string;\n\n /**\n * Defines the percentage of progress\n */\n @Prop({ reflect: true }) progress: number;\n\n /**\n * Defines the size of the progress bar\n */\n @Prop({ reflect: true }) size: number = 40;\n\n /**\n * Defines the width of the stroke (outline) of the progress circle\n */\n @Prop({ reflect: true }) strokeWidth: number = 3.25;\n\n /**\n * Defines whether the progress bar is active\n */\n @Prop({ reflect: true }) active: boolean;\n\n render() {\n const radius = (this.size - this.strokeWidth) / 2;\n const circumference = radius * Math.PI * 2;\n const dash = (this.progress * circumference) / 100;\n\n const viewBox = `0 0 ${this.size} ${this.size}`;\n\n return (\n <Host>\n <div class=\"progress-bar\">\n <svg width={this.size} height={this.size} viewBox={viewBox}>\n <circle fill=\"none\" stroke=\"#ccc\" cx={this.size / 2} cy={this.size / 2} r={radius} stroke-width={`${this.strokeWidth}px`} />\n {this.active && (\n <circle\n fill=\"none\"\n stroke={this.progressColor}\n cx={this.size / 2}\n cy={this.size / 2}\n r={radius}\n stroke-width={`${this.strokeWidth}px`}\n transform={`rotate(-90 ${this.size / 2} ${this.size / 2})`}\n stroke-dasharray={`${dash}px ${circumference - dash}px`}\n stroke-linecap=\"round\"\n style={{ transition: 'all 0.5s' }}\n />\n )}\n </svg>\n <span>\n <slot></slot>\n </span>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/cura-radio.js CHANGED Viewed

@@ -131,7 +131,7 @@ const CuraRadio$1 = /*@__PURE__*/ proxyCustomElement(class CuraRadio extends HTM
         return statusColors[this.status][type];
     }
     render() {
-        return (h(Host, { key: '25923b3fbf86f71b658dad0bb9a2c6369a807fda' }, h("div", { key: 'baa6ddbadc3bbccd87382aebec5d7b7295a8bd56', class: this.getClasses(), style: this.styles }, h("div", { key: '09cb57517f50d2253f8f45547aac980e432857ef', class: "info" }, h("div", { key: '4a7ac1ece9ea44c27ee699f556f1026c99f15800', class: "label-wrapper" }, h("cura-label", { key: 'e0f883fcaf4645306606bf8b494b03659bafb4f4', class: "label", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: 'feb753a9d6bd48c3bb6e3f8ff15bce3bec626468', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: '0ef2068d42f16c4d8117785957b8b35952342aea', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '07754f271896b76c4c4570c12e1ed94eb1fce289' }))), h("input", { key: 'fc63364706b6849ff35d91478935de7e58892c2f', type: "radio", class: `radio ${this.size.toLocaleLowerCase()}`, name: this.name, value: this.value, required: this.required, tabIndex: this.ontabindex, disabled: this.disabled, checked: this.checked, onClick: this.handleClick }))));
+        return (h(Host, { key: 'eecc279b05da57162acf41d62bac48a00cc9d985' }, h("div", { key: '279b6922349bf02b7e65065bcb98b9c824073516', class: this.getClasses(), style: this.styles }, h("div", { key: 'a6a2de8f8d7e6efbca3aee079255451e448903a2', class: "info" }, h("div", { key: '6d2733ca86d087031e1ec4fdea26d5906f695479', class: "label-wrapper" }, h("cura-label", { key: '2c0c878411bb846ff7bcf24c385895f1d86b3022', class: "label", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: '07abc53858276dc6429381a0c658c562e1d05933', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: 'ab5c0451842242ee584f2d3b430b803498190118', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '3673a0a1ecc7f9dfa6975bdddaf708ed8ad1b72d' }))), h("input", { key: 'db602c601168ada1a5a375d3ef122d4f315fa256', type: "radio", class: `radio ${this.size.toLocaleLowerCase()}`, name: this.name, value: this.value, required: this.required, tabIndex: this.ontabindex, disabled: this.disabled, checked: this.checked, onClick: this.handleClick }))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }