npm - @rededor/cura - Versions diffs - 1.2.0 → 1.3.0 - Mend

@rededor/cura 1.2.0 → 1.3.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 (257) hide show

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

@@ -41,7 +41,7 @@ const CuraCard$1 = /*@__PURE__*/ proxyCustomElement(class CuraCard extends HTMLE
         return classes;
     }
     render() {
-        return (h(Host, { key: 'db1a13cfe3bb925300e65641e1d45fade5a03f52', role: this.href ? 'link' : 'div' }, this.href ? (h("a", { class: this.getClasses(), target: this.target, style: this.styles, href: this.href }, h("slot", null))) : (h("div", { class: this.getClasses(), style: this.styles }, h("slot", null)))));
+        return (h(Host, { key: '72140d7ae467677c7acbdb3ff45fa84c9fe60fce', role: this.href ? 'link' : 'div' }, this.href ? (h("a", { class: this.getClasses(), target: this.target, style: this.styles, href: this.href }, h("slot", null))) : (h("div", { class: this.getClasses(), style: this.styles }, h("slot", null)))));
     }
     static get style() { return CuraCardStyle0; }
 }, [1, "cura-card", {

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

@@ -159,7 +159,7 @@ const CuraCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class CuraCheckbox exten
         return h("cura-icon", { class: "icon", name: iconName, size: iconSize, color: iconColor });
     }
     render() {
-        return (h(Host, { key: 'a346ec6f3d5a982471ac922982af7f9dbee14865' }, h("div", { key: '5786471ce3a9c1e116411f14b22d8bc5d7d39dce', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: '18d6646e969d7f78acba9deab9eb644de2df7011', class: "info" }, h("div", { key: 'fa29dbdfcd215a83aff824cb5d23d15b8f93313f', class: "label-wrapper" }, h("cura-label", { key: 'db7c96cc88553166b78e70f0c773fde12d54fc40', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: '408383422b9cdf45fe7cbfb51f7ea06ae3d1a260', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: '4af49958c61ddc4e79b719ff03179e6003eee93c', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '649bbc456157e103eb55c199857158d37c8b7b16' }))), h("div", { key: 'b0abfc17ee08f13ad82e4c22ea8f90d980893274', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: 'fba5fbe2853e340cc30ffe8d663f62b874cd1877', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
+        return (h(Host, { key: '00334ec058edf0849cf30c65d2f9e2e2e051de96' }, h("div", { key: 'd7c7857afa27a033f0642369717eb3be406f9f27', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: 'aed0ec8155b2a5c0e3000b416afd6c5455c55f0e', class: "info" }, h("div", { key: 'd90166401c6946c508d2cace62976c2e7374689f', class: "label-wrapper" }, h("cura-label", { key: '7c0c5cc650db37f09127050333f49c5f4b4c7dc6', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: '3c1cd2dcad221f4d93bde959ca33273270f0fe45', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: '3fd01d993596f36da00b3acfeef02f2a28340eae', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '2c106bd163a1b330a18061c0e99eb21c911d7da9' }))), h("div", { key: '2286927b31856a224049693295caa9e037695749', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: '9bb8a436f1500d046a9b57972307cf5feff183d3', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }

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

@@ -67,7 +67,7 @@ const CuraDisplay$1 = /*@__PURE__*/ proxyCustomElement(class CuraDisplay extends
         return tags[`${this.level}`] || tags['default'];
     }
     render() {
-        return (h(Host, { key: 'b7f2ed980b7cedd3c9fbd60f14bf8785bb5c26cb', style: this.hostCSSProperties() }, this.getHeadingTag()));
+        return (h(Host, { key: 'bf5c1121ffd1debb9b5763acdde1c7244b4afcc3', style: this.hostCSSProperties() }, this.getHeadingTag()));
     }
     get host() { return this; }
     static get watchers() { return {

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

@@ -11,7 +11,7 @@ const CuraDropdownSearchOptionTitle$1 = /*@__PURE__*/ proxyCustomElement(class C
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: '5a6afd8afb971845aeef19cd4ea6fe7586a1fb4e', slot: "dropdown-search-option" }, h("cura-label", { key: '00f5bc78178b6b549eaee21f28dcdb28b539099b', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, h("slot", { key: '0d858d26544542c8c05686a879a44366318e86ce' }))));
+        return (h(Host, { key: 'e4929a8c5c1c1f11b3e51dc088b2dd506e1bdfa0', slot: "dropdown-search-option" }, h("cura-label", { key: '5bb5406c11a39a6a587737cf99eb1d2deb2ea0da', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, h("slot", { key: 'c781e560b512d5362370e9855551b3e088ffbec1' }))));
     }
     static get style() { return CuraDropdownSearchOptionTitleStyle0; }
 }, [1, "cura-dropdown-search-option-title"]);

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

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

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:100%;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;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 CuraDropdownSearchStyle0 = curaDropdownSearchCss;
 const CuraDropdownSearch$1 = /*@__PURE__*/ proxyCustomElement(class CuraDropdownSearch extends HTMLElement {
@@ -21,18 +21,20 @@ const CuraDropdownSearch$1 = /*@__PURE__*/ proxyCustomElement(class CuraDropdown
                 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 (isKeyboardOpen) {
-                    dropdown.style.position = 'absolute';
-                    dropdown.style.bottom = `${window.screen.height - window.innerHeight}px`;
-                }
-                else {
-                    dropdown.style.position = 'fixed';
-                    dropdown.style.bottom = '0';
+                if (dropdown) {
+                    if (isKeyboardOpen) {
+                        dropdown.style.position = 'absolute';
+                        dropdown.style.bottom = `${window.screen.height - window.innerHeight}px`;
+                    }
+                    else {
+                        dropdown.style.position = 'fixed';
+                        dropdown.style.bottom = '0';
+                    }
                 }
                 window.scroll({
                     top: 0,
                     left: 0,
-                    behavior: "smooth",
+                    behavior: 'smooth',
                 });
             });
         };
@@ -120,6 +122,7 @@ const CuraDropdownSearch$1 = /*@__PURE__*/ proxyCustomElement(class CuraDropdown
     componentDidRender() {
         if (this.isDropdownOpen && this.isMobile) {
             this.showOverlay();
+            this.getDropdownSearchListHeight();
         }
         else {
             this.removeOverlay();
@@ -239,11 +242,18 @@ const CuraDropdownSearch$1 = /*@__PURE__*/ proxyCustomElement(class CuraDropdown
     handleOnFocus() {
         this.isDropdownOpen = true;
     }
+    getDropdownSearchListHeight() {
+        var _a;
+        const dropdownInputSearchElement = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-input-search');
+        if (dropdownInputSearchElement) {
+            this.host.style.setProperty('--dynamic-input-search-height', `${dropdownInputSearchElement.offsetHeight}px`);
+        }
+    }
     render() {
         const isMobileDropdown = this.isMobile && this.isDropdownOpen;
-        return (h(Host, { key: 'a4defbdfabd6cff5db81d35b43580009256abfa8', style: this.hostCSSProperties(), class: "dropdown-overlay" }, h("div", { key: '0c8db33b0fb93ef7ccb234ea6b61bd63851d4460', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, h("div", { key: '47430e63175189b9969f83254b1e92c40f7e0063', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (h("cura-button-transparent", { key: '932450ba13c8b47ea20fb83e963073243a7f71b7', fontColor: "dark", onClick: () => (this.isMobile = false), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), h("cura-input-text", { key: 'af9b7356b90d30a16b142a9249072867b4b79182', 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: '36a0df3dfbe9f164ccb41541fb5373b0e94c86bd', style: this.hostCSSProperties(), class: "dropdown-overlay" }, h("div", { key: 'e17cf1eec89b0346f49f497ffc6e5ea272fcd3eb', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, h("div", { key: 'eb33cc0c6abd4792cb18a4e55eaed913e4f75761', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (h("cura-button-transparent", { key: 'd837a3a15a89a9bd14260a32e3e218a3f53a18b1', fontColor: "dark", onClick: () => (this.isMobile = false), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), h("cura-input-text", { key: 'c8a02959ee1d637fde64fbcd8be238b7562f0790', 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: '87db405a858148aee63f7338ebcde28afc64c768', name: "helperText" }))), h("div", { key: '90f39c78512853a0c430f5947705b494093ba8e3', id: "dropdown-search-list", class: this.getDropdownClasses() }, h("slot", { key: 'decb45f75adfd4af1f1102778c39d8f4e4a94bfa', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
+            }, placeholder: this.placeholder, size: this.size, onKeyDown: this.handleKeyDown }, h("slot", { key: '9cc22d4cf269fee171456169b787be54a814189e', name: "helperText" }))), h("div", { key: '4a9ce1710312984d2af67ac3a04df504183caaf6', id: "dropdown-search-list", class: this.getDropdownClasses() }, h("slot", { key: 'afdeb4b938c3d6767e440f4b32316c45b2a5e86f', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
     }
     get host() { return this; }
     static get watchers() { return {

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: 100%;\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 private adjustInputPosition = () => {\n window.visualViewport.addEventListener('resize', () => {\n\n const isKeyboardOpen = window.innerHeight < window.screen.height 0.8;\n const dropdown = this.host.shadowRoot?.querySelector('.dropdown-mobile') as HTMLInputElement;\n\n if (isKeyboardOpen) {\n dropdown.style.position = 'absolute';\n dropdown.style.bottom = `${window.screen.height - window.innerHeight}px`;\n } else {\n dropdown.style.position = 'fixed';\n dropdown.style.bottom = '0';\n }\n\n window.scroll({\n top: 0,\n left: 0,\n behavior: \"smooth\",\n });\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 }\n\n @Watch('value')\n onValueChange(newValue: string) {\n this.updateSelectedOption(newValue);\n this.valueChanged.emit(newValue);\n }\n\n componentWillLoad() {\n this.updateSelectedOption(this.value);\n }\n\n componentDidRender() {\n if (this.isDropdownOpen && this.isMobile) {\n this.showOverlay();\n } else {\n this.removeOverlay();\n }\n }\n componentDidLoad() {\n window.addEventListener('resize', this.handleResize);\n window.addEventListener('resize', this.adjustInputPosition);\n }\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.handleResize);\n window.removeEventListener('resize', this.adjustInputPosition);\n\n }\n\n private showOverlay() {\n if (!this.overlayElement) {\n this.overlayElement = document.createElement('div');\n this.overlayElement.className = 'dropdown-overlay';\n this.overlayElement.style.position = 'fixed';\n this.overlayElement.style.top = '0';\n this.overlayElement.style.left = '0';\n this.overlayElement.style.width = '100%';\n this.overlayElement.style.height = '100%';\n this.overlayElement.style.zIndex = '9999';\n this.overlayElement.style.backgroundColor = 'white';\n document.body.appendChild(this.overlayElement);\n }\n }\n\n private removeOverlay() {\n if (this.overlayElement && this.overlayElement.parentNode === document.body) {\n document.body.removeChild(this.overlayElement);\n this.overlayElement = null;\n }\n }\n\n private handleSlotChange = () => {\n this.options = Array.from(this.host.querySelectorAll('cura-dropdown-search-option'));\n this.addClickListenersToOptions();\n this.updateHoveredIndex();\n };\n\n private addClickListenersToOptions() {\n this.options.forEach((option, index) => {\n option.addEventListener('optionSelected', () => this.onSelectedOption(index));\n });\n }\n\n private updateSelectedOption(value: string) {\n const selectedOptionIndex = this.options.findIndex(option => option.getAttribute('value') === value);\n this.hoveredIndex = selectedOptionIndex;\n this.updateOptionAttribute('hovered', this.hoveredIndex);\n this.updateOptionAttribute('selected', this.hoveredIndex);\n\n this.scrollIntoView();\n this.adjustInputPosition();\n\n }\n\n private handleInputChange = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.value = input.value;\n this.onValueChange(this.value);\n // this.valueChanged.emit(this.value);\n };\n\n private onSelectedOption(index: number) {\n const selectedOption = this.options[index];\n if (selectedOption.selectable) {\n const selectedValue = selectedOption.getAttribute('value') \|\| selectedOption.textContent;\n\n this.value = selectedValue \|\| '';\n this.updateSelectedOption(this.value);\n\n this.isDropdownOpen = false;\n this.isOnBlurInput = true;\n this.removeOverlay();\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n this.moveHighlight(1);\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n this.moveHighlight(-1);\n } else if (event.key === 'Enter') {\n event.preventDefault();\n if (this.hoveredIndex > -1) {\n this.handleOnBlur();\n this.onSelectedOption(this.hoveredIndex);\n }\n }\n };\n\n private moveHighlight(direction: number) {\n const visibleOptions = this.options;\n const newIndex = (this.hoveredIndex + direction + visibleOptions.length) % visibleOptions.length;\n this.hoveredIndex = newIndex;\n this.updateOptionAttribute('hovered', this.hoveredIndex);\n this.scrollIntoView();\n }\n\n private updateOptionAttribute(attribute: string, indexToUpdate: number) {\n this.options.forEach((option, index) => {\n (option as any)[attribute] = index === indexToUpdate;\n });\n }\n\n private updateHoveredIndex() {\n const visibleOptions = this.options;\n const currentValue = this.value;\n this.hoveredIndex = visibleOptions.findIndex(option => option.getAttribute('value') === currentValue);\n }\n\n private scrollIntoView() {\n const container = this.host.shadowRoot?.querySelector('.dropdown-search-list');\n const hoveredOption = this.options[this.hoveredIndex];\n\n if (container && hoveredOption) {\n const optionRect = hoveredOption.getBoundingClientRect();\n const containerRect = container.getBoundingClientRect();\n\n if (optionRect.bottom > containerRect.bottom) {\n container.scrollTop += optionRect.bottom - containerRect.bottom;\n }\n\n if (optionRect.top < containerRect.top) {\n container.scrollTop -= containerRect.top - optionRect.top;\n }\n }\n }\n\n private handleResize = () => {\n this.isMobile = window.innerWidth < 768;\n if (this.isDropdownOpen) {\n if (this.isMobile) {\n this.showOverlay();\n } else {\n this.removeOverlay();\n }\n }\n };\n\n handleOnBlur() {\n if (this.isOnBlurInput === true) {\n setTimeout(() => {\n this.isDropdownOpen = false;\n this.removeOverlay();\n }, 200);\n }\n }\n getClasses() {\n return {\n 'dropdown-input-search': true,\n 'dropdown-open': this.isDropdownOpen,\n 'disabled': this.disabled,\n [this.status]: true,\n };\n }\n\n getDropdownClasses() {\n return {\n 'dropdown-search-list': true,\n 'visible': this.options.length && this.isDropdownOpen ? true : false,\n };\n }\n\n hostCSSProperties() {\n return {\n '--dropdown-max-height': this.dropdownMaxHeight,\n };\n }\n\n handleOnFocus() {\n this.isDropdownOpen = true;\n }\n\n\n render() {\n const isMobileDropdown = this.isMobile && this.isDropdownOpen;\n return (\n <Host style={this.hostCSSProperties()} class=\"dropdown-overlay\">\n <div class={`dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`} style={this.styles}>\n <div class={this.getClasses()}>\n {this.isMobile && this.isDropdownOpen && (\n <cura-button-transparent\n fontColor=\"dark\"\n onClick={() => (this.isMobile = false)}\n iconName=\"arrowLeft\"\n size=\"medium\"\n iconOnly\n color=\"primary\"\n ></cura-button-transparent>\n )}\n <cura-input-text\n disabled={this.disabled}\n label={this.label}\n part=\"cura-input-field\"\n mode={isMobileDropdown ? 'transparent' : 'default'}\n required={this.required}\n hideErrorIcon={this.status === 'error'}\n iconName={this.iconName \|\| 'search'}\n value={this.value}\n status={this.status}\n onValueChange={e => this.onValueChange(e.target.value as string)}\n onInput={e => this.handleInputChange(e)}\n onFocus={() => this.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\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 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 if (isKeyboardOpen) {\n dropdown.style.position = 'absolute';\n dropdown.style.bottom = `${window.screen.height - window.innerHeight}px`;\n } else {\n dropdown.style.position = 'fixed';\n dropdown.style.bottom = '0';\n }\n }\n\n window.scroll({\n top: 0,\n left: 0,\n 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 }\n\n private removeOverlay() {\n if (this.overlayElement && this.overlayElement.parentNode === document.body) {\n document.body.removeChild(this.overlayElement);\n this.overlayElement = null;\n }\n }\n\n private handleSlotChange = () => {\n this.options = Array.from(this.host.querySelectorAll('cura-dropdown-search-option'));\n this.addClickListenersToOptions();\n this.updateHoveredIndex();\n };\n\n private addClickListenersToOptions() {\n this.options.forEach((option, index) => {\n option.addEventListener('optionSelected', () => this.onSelectedOption(index));\n });\n }\n\n private updateSelectedOption(value: string) {\n const selectedOptionIndex = this.options.findIndex(option => option.getAttribute('value') === value);\n this.hoveredIndex = selectedOptionIndex;\n this.updateOptionAttribute('hovered', this.hoveredIndex);\n this.updateOptionAttribute('selected', this.hoveredIndex);\n\n this.scrollIntoView();\n 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.removeOverlay();\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n this.moveHighlight(1);\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n this.moveHighlight(-1);\n } else if (event.key === 'Enter') {\n event.preventDefault();\n if (this.hoveredIndex > -1) {\n this.handleOnBlur();\n this.onSelectedOption(this.hoveredIndex);\n }\n }\n };\n\n private moveHighlight(direction: number) {\n const visibleOptions = this.options;\n const newIndex = (this.hoveredIndex + direction + visibleOptions.length) % visibleOptions.length;\n this.hoveredIndex = newIndex;\n this.updateOptionAttribute('hovered', this.hoveredIndex);\n this.scrollIntoView();\n }\n\n private updateOptionAttribute(attribute: string, indexToUpdate: number) {\n this.options.forEach((option, index) => {\n (option as any)[attribute] = index === indexToUpdate;\n });\n }\n\n private updateHoveredIndex() {\n const visibleOptions = this.options;\n const currentValue = this.value;\n this.hoveredIndex = visibleOptions.findIndex(option => option.getAttribute('value') === currentValue);\n }\n\n private scrollIntoView() {\n const container = this.host.shadowRoot?.querySelector('.dropdown-search-list');\n const hoveredOption = this.options[this.hoveredIndex];\n\n if (container && hoveredOption) {\n const optionRect = hoveredOption.getBoundingClientRect();\n const containerRect = container.getBoundingClientRect();\n\n if (optionRect.bottom > containerRect.bottom) {\n container.scrollTop += optionRect.bottom - containerRect.bottom;\n }\n\n if (optionRect.top < containerRect.top) {\n container.scrollTop -= containerRect.top - optionRect.top;\n }\n }\n }\n\n private handleResize = () => {\n this.isMobile = window.innerWidth < 768;\n if (this.isDropdownOpen) {\n if (this.isMobile) {\n this.showOverlay();\n } else {\n this.removeOverlay();\n }\n }\n };\n\n handleOnBlur() {\n if (this.isOnBlurInput === true) {\n setTimeout(() => {\n this.isDropdownOpen = false;\n this.removeOverlay();\n }, 200);\n }\n }\n getClasses() {\n return {\n 'dropdown-input-search': true,\n 'dropdown-open': this.isDropdownOpen,\n 'disabled': this.disabled,\n [this.status]: true,\n };\n }\n\n getDropdownClasses() {\n return {\n 'dropdown-search-list': true,\n 'visible': this.options.length && this.isDropdownOpen ? true : false,\n };\n }\n\n hostCSSProperties() {\n return {\n '--dropdown-max-height': this.dropdownMaxHeight,\n };\n }\n\n 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 render() {\n const isMobileDropdown = this.isMobile && this.isDropdownOpen;\n return (\n <Host style={this.hostCSSProperties()} class=\"dropdown-overlay\">\n <div class={`dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`} style={this.styles}>\n <div class={this.getClasses()}>\n {this.isMobile && this.isDropdownOpen && (\n <cura-button-transparent\n fontColor=\"dark\"\n onClick={() => (this.isMobile = false)}\n iconName=\"arrowLeft\"\n size=\"medium\"\n iconOnly\n color=\"primary\"\n ></cura-button-transparent>\n )}\n <cura-input-text\n disabled={this.disabled}\n label={this.label}\n part=\"cura-input-field\"\n mode={isMobileDropdown ? 'transparent' : 'default'}\n required={this.required}\n hideErrorIcon={this.status === 'error'}\n iconName={this.iconName \|\| 'search'}\n value={this.value}\n status={this.status}\n onValueChange={e => this.onValueChange(e.target.value as string)}\n onInput={e => this.handleInputChange(e)}\n onFocus={() => this.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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-const curaHeadingCss = ":host{display:block;font-size:var(--font-size-base)}:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-family:var(--font-family);font-size:1.714em;font-weight:var(--font-weight-regular);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0px}:host h1.bold-weight,:host h2.bold-weight,:host h3.bold-weight,:host h4.bold-weight,:host h5.bold-weight,:host h6.bold-weight{font-weight:var(--font-weight-medium)}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.071em;letter-spacing:-0.58px}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.214em;line-height:calc(var(--line-height) + 20%)}:host h1.small.bold-weight,:host h1.small ::slotted(b),:host h1.small ::slotted(strong),:host h2.small.bold-weight,:host h2.small ::slotted(b),:host h2.small ::slotted(strong),:host h3.small.bold-weight,:host h3.small ::slotted(b),:host h3.small ::slotted(strong),:host h4.small.bold-weight,:host h4.small ::slotted(b),:host h4.small ::slotted(strong),:host h5.small.bold-weight,:host h5.small ::slotted(b),:host h5.small ::slotted(strong),:host h6.small.bold-weight,:host h6.small ::slotted(b),:host h6.small ::slotted(strong){font-weight:var(--font-weight-bold)}:host h1.xsmall,:host h2.xsmall,:host h3.xsmall,:host h4.xsmall,:host h5.xsmall,:host h6.xsmall{font-size:0.714em;font-weight:var(--font-weight-medium);letter-spacing:0.6px}:host h1.xsmall.bold-weight,:host h1.xsmall ::slotted(b),:host h1.xsmall ::slotted(strong),:host h2.xsmall.bold-weight,:host h2.xsmall ::slotted(b),:host h2.xsmall ::slotted(strong),:host h3.xsmall.bold-weight,:host h3.xsmall ::slotted(b),:host h3.xsmall ::slotted(strong),:host h4.xsmall.bold-weight,:host h4.xsmall ::slotted(b),:host h4.xsmall ::slotted(strong),:host h5.xsmall.bold-weight,:host h5.xsmall ::slotted(b),:host h5.xsmall ::slotted(strong),:host h6.xsmall.bold-weight,:host h6.xsmall ::slotted(b),:host h6.xsmall ::slotted(strong){font-weight:var(--font-weight-bold)}@media (min-width: 769px) and (max-width: 1920px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:2em}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.357em;letter-spacing:-0.66px}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.357em}:host h1.xsmall,:host h2.xsmall,:host h3.xsmall,:host h4.xsmall,:host h5.xsmall,:host h6.xsmall{font-size:0.857em;line-height:calc(var(--line-height) + 3%);letter-spacing:0.72px}}@media (min-width: 1921px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:2.5em;line-height:calc(var(--line-height) + 5%);letter-spacing:-0.82px}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.929em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.714em;line-height:calc(var(--line-height) + 30%);letter-spacing:0%}:host h1.xsmall,:host h2.xsmall,:host h3.xsmall,:host h4.xsmall,:host h5.xsmall,:host h6.xsmall{font-size:1em;line-height:calc(var(--line-height) + 12.857%);letter-spacing:0.28px}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-medium)}:host ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-underline-offset:10%;cursor:pointer}:host ::slotted(u){text-underline-offset:10%}:host ::slotted(abbr){color:var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}:host ::slotted(i),:host ::slotted(em){font-weight:var(--font-weight-medium)}";
+const curaHeadingCss = ":host{display:block;font-size:var(--font-size-base)}:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-family:var(--font-family);font-size:1.714em;font-weight:var(--font-weight-regular);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0px}:host h1.bold-weight,:host h2.bold-weight,:host h3.bold-weight,:host h4.bold-weight,:host h5.bold-weight,:host h6.bold-weight{font-weight:var(--font-weight-medium)}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.071em;letter-spacing:-0.58px}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.214em;line-height:calc(var(--line-height) + 20%)}:host h1.small.bold-weight,:host h1.small ::slotted(b),:host h1.small ::slotted(strong),:host h2.small.bold-weight,:host h2.small ::slotted(b),:host h2.small ::slotted(strong),:host h3.small.bold-weight,:host h3.small ::slotted(b),:host h3.small ::slotted(strong),:host h4.small.bold-weight,:host h4.small ::slotted(b),:host h4.small ::slotted(strong),:host h5.small.bold-weight,:host h5.small ::slotted(b),:host h5.small ::slotted(strong),:host h6.small.bold-weight,:host h6.small ::slotted(b),:host h6.small ::slotted(strong){font-weight:var(--font-weight-bold)}:host h1.xsmall,:host h2.xsmall,:host h3.xsmall,:host h4.xsmall,:host h5.xsmall,:host h6.xsmall{font-size:0.714em;font-weight:var(--font-weight-medium);letter-spacing:0.6px}:host h1.xsmall.bold-weight,:host h1.xsmall ::slotted(b),:host h1.xsmall ::slotted(strong),:host h2.xsmall.bold-weight,:host h2.xsmall ::slotted(b),:host h2.xsmall ::slotted(strong),:host h3.xsmall.bold-weight,:host h3.xsmall ::slotted(b),:host h3.xsmall ::slotted(strong),:host h4.xsmall.bold-weight,:host h4.xsmall ::slotted(b),:host h4.xsmall ::slotted(strong),:host h5.xsmall.bold-weight,:host h5.xsmall ::slotted(b),:host h5.xsmall ::slotted(strong),:host h6.xsmall.bold-weight,:host h6.xsmall ::slotted(b),:host h6.xsmall ::slotted(strong){font-weight:var(--font-weight-bold)}@media (min-width: 769px) and (max-width: 1920px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:2em}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.357em;letter-spacing:-0.66px}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.357em}:host h1.xsmall,:host h2.xsmall,:host h3.xsmall,:host h4.xsmall,:host h5.xsmall,:host h6.xsmall{font-size:0.857em;line-height:calc(var(--line-height) + 3%);letter-spacing:0.72px}}@media (min-width: 1921px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:2.5em;line-height:calc(var(--line-height) + 5%);letter-spacing:-0.82px}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.929em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.714em;line-height:calc(var(--line-height) + 30%);letter-spacing:0%}:host h1.xsmall,:host h2.xsmall,:host h3.xsmall,:host h4.xsmall,:host h5.xsmall,:host h6.xsmall{font-size:1em;line-height:calc(var(--line-height) + 12.857%);letter-spacing:0.28px}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-medium)}:host ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-underline-offset:10%;cursor:pointer}:host ::slotted(u){text-underline-offset:10%}:host ::slotted(abbr){color:var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}:host ::slotted(i){font-weight:var(--font-weight-medium)}:host ::slotted(em){color:var(--color-link);font-style:normal}";
 const CuraHeadingStyle0 = curaHeadingCss;
 const CuraHeading = /*@__PURE__*/ proxyCustomElement(class CuraHeading extends HTMLElement {
@@ -43,17 +43,18 @@ const CuraHeading = /*@__PURE__*/ proxyCustomElement(class CuraHeading extends H
         };
     }
     hostCSSProperties() {
+        const fontColor = this.color
+            ? this.theme.colors.getColor(this.color)
+            : this.theme.fonts.getColor();
         return {
             '--margin-block': this.marginBlock,
             '--font-size-base': this.fontSizeBase,
-            '--line-height': this.lineHeight
+            '--line-height': this.lineHeight,
+            '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'),
         };
     }
     setColors() {
-        const fontColor = this.color
-            ? this.theme.colors.getColor(this.color)
-            : this.theme.fonts.getColor();
-        this.styles = Object.assign(Object.assign({}, this.styles), { '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'), '--color-link': this.theme.colors.getColor(`${this.spotColor}`) });
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--color-link': this.theme.colors.getColor(`${this.spotColor}`) });
     }
     getHeadingTag() {
         const tags = {
@@ -68,7 +69,7 @@ const CuraHeading = /*@__PURE__*/ proxyCustomElement(class CuraHeading extends H
         return tags[`${this.level}`] || tags['default'];
     }
     render() {
-        return (h(Host, { key: 'd16fc33c4b20770439fd4d48f4eb099564668b1e', style: this.hostCSSProperties() }, this.getHeadingTag()));
+        return (h(Host, { key: '4a130c7453ba61027050fc8f4a5739cad34d1c0a', style: this.hostCSSProperties() }, this.getHeadingTag()));
     }
     get host() { return this; }
     static get watchers() { return {

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

	@@ -1 +1 @@
1	- {"file":"cura-heading2.js","mappings":";;AAAA,MAAM,cAAc,GAAG,~~wmHAAwmH~~,CAAC;~~AAChoH~~,0BAAe,cAAc;;MCMhB,WAAW;;;;;QA4DtB,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;qBAtD0B,CAAC;oBAMuC,QAAQ;sBAMnD,SAAS;yBAM1B,aAAa;;2BAiBX,QAAQ;0BAMT,MAAM;sBAYxB,EAAE;;IA1BpB,iBAAiB;QACf,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IA2BD,iBAAiB;QACf,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB;IAED,UAAU;QACR,MAAM,OAAO,GAAG,EAAE,CAAC;QACnB,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,GAAI,IAAI,CAAC;QACzC,OAAO,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG,IAAI,CAAC;QACtD,OAAO,OAAO,CAAC;KAChB;IAED,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;QAC7C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;QAC/C,IAAI,CAAC,MAAM,GAAG;YACZ,eAAe,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC;YAChE,uBAAuB,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO;YAC7C,sBAAsB,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM;YAC3C,oBAAoB,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI;YACvC,qBAAqB,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK;SAC1C,CAAA;KACF;IAED,iBAAiB;QACf,~~OAAO;YACL,gBAAgB,EAAE,IAAI,CAAC,WAAW;YAClC,kBAAkB,EAAE,IAAI,CAAC,YAAY;YACrC,eAAe,EAAE,IAAI,CAAC,UAAU;SACjC,CAAC;KACH;IAED,SAAS;QACP,~~MAAM,SAAS,GAAG,IAAI,CAAC,KAAK;cACxB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;cACtC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;QAChC,IAAI,CAAC,~~MAAM~~,~~mCACN~~,IAAI,CAAC,~~MAAM~~,~~KACd~~,cAAc,EAAE,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAAC,~~EACzE~~,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,GAChE,CAAC;KACH;IAED,aAAa;QACX,MAAM,IAAI,GAAG;YACX,GAAG,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAAE,eAAa,CAAK;YACzE,GAAG,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAAE,eAAa,CAAK;YACzE,GAAG,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAAE,eAAa,CAAK;YACzE,GAAG,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAAE,eAAa,CAAK;YACzE,GAAG,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAAE,eAAa,CAAK;YACzE,GAAG,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAAE,eAAa,CAAK;YACzE,SAAS,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAAE,eAAa,CAAK;SAChF,CAAC;QACF,OAAO,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;KACjD;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE,IACjC,IAAI,CAAC,aAAa,EAAE,CACjB,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/text/cura-heading/cura-heading.scss?tag=cura-heading&encapsulation=shadow","src/components/text/cura-heading/cura-heading.tsx"],"sourcesContent":["@import '../../../scss/mixins/responsive.scss';\n\n:host {\n display: block;\n font-size: var(--font-size-base);\n\n h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-family);\n font-size: 1.714em;\n font-weight: var(--font-weight-regular);\n color: var(--color-body);\n line-height: var(--line-height);\n margin-block: var(--margin-block);\n letter-spacing: 0px;\n\n &.bold-weight {\n font-weight: var(--font-weight-medium);\n }\n\n &.large {\n font-size: 2.071em;\n letter-spacing: -0.58px;\n }\n\n &.small {\n font-size: 1.214em;\n line-height: calc(var(--line-height) + 20%);\n\n &.bold-weight, ::slotted(b), ::slotted(strong) {\n font-weight: var(--font-weight-bold);\n }\n }\n\n &.xsmall {\n font-size: 0.714em;\n font-weight: var(--font-weight-medium);\n letter-spacing: 0.6px;\n\n &.bold-weight, ::slotted(b), ::slotted(strong) {\n font-weight: var(--font-weight-bold);\n }\n }\n\n }\n\n @include medium-large() {\n h1, h2, h3, h4, h5, h6 {\n font-size: 2em;\n\n &.large {\n font-size: 2.357em;\n letter-spacing: -0.66px;\n }\n\n &.small {\n font-size: 1.357em;\n }\n\n &.xsmall {\n font-size: 0.857em;\n line-height: calc(var(--line-height) + 3%);\n letter-spacing: 0.72px;\n }\n\n }\n }\n\n @include xlarge-only() {\n h1, h2, h3, h4, h5, h6 {\n font-size: 2.5em;\n line-height: calc(var(--line-height) + 5%);\n letter-spacing: -0.82px;\n\n &.large {\n font-size: 2.929em;\n }\n\n &.small {\n font-size: 1.714em;\n line-height: calc(var(--line-height) + 30%);\n letter-spacing: 0%;\n }\n\n &.xsmall {\n font-size: 1em;\n line-height: calc(var(--line-height) + 12.857%);\n letter-spacing: 0.28px;\n }\n }\n }\n\n ::slotted(b), ::slotted(strong) {\n font-weight: var(--font-weight-medium);\n }\n\n ::slotted(a) {\n font-weight: var(--font-weight-bold);\n color: var(--color-link);\n text-underline-offset: 10%;\n cursor: pointer;\n }\n\n ::slotted(u) {\n text-underline-offset: 10%;\n }\n\n ::slotted(abbr) {\n color: var(--color-link);\n text-decoration: underline dashed 1px var(--color-link);\n text-underline-offset: 10%;\n cursor: default;\n }\n\n ::slotted(i), ~~::slotted(em)~~ {\n font-weight: var(--font-weight-medium);\n }\n\n}\n","import { Component, Host, h, Prop, Element, Watch, State } from '@stencil/core';\n\n@Component({\n tag: 'cura-heading',\n styleUrl: 'cura-heading.scss',\n shadow: true,\n})\nexport class CuraHeading {\n\n /*\n Heading level for semantics. Will render the related HTML tag <h1>, <h2>, ...\n * Values: 1(default) to 6.\n /\n @Prop({reflect: true}) level: 1 \| 2 \| 3 \| 4 \| 5 \| 6 = 1;\n\n /\n Heading style size.\n * Values: regular (deprecated), medium (default) \| large \| small \| caption (deprecated) \| xsmall.\n /\n @Prop({reflect: true}) size: 'regular' \| 'medium' \| 'large' \| 'small' \| 'caption' \| 'xsmall' = 'medium';\n\n /\n Heading font weight. It is possible to use regular HTML tags like <b> or <strong> as well.\n * Values: regular (default) \| bold.\n /\n @Prop({reflect: true}) weight: 'regular' \| 'bold' = 'regular';\n\n /\n Apply design system color to interactive elements like <a> and <abbr> inside the text.\n * Values: Color from design system scheme. Default to 'accent-dark'.\n /\n @Prop({reflect: true}) spotColor = 'accent-dark';\n\n /\n Text color.\n * Values: Color from design system scheme. Default to the font color from the theme.\n /\n @Prop() color: string;\n @Watch('color')\n @Watch('spotColor')\n handleChangeColor() {\n this.setColors();\n }\n\n /\n CSS margin-block property values.\n * Default to 1.25em\n /\n @Prop({reflect: true}) marginBlock = '1.25em';\n\n /\n CSS line-height property values.\n * Default to 140%\n /\n @Prop({reflect: true}) lineHeight = '130%';\n\n /\n Host element <cura-heading>\n /\n @Element() host: HTMLElement;\n\n /\n Internal Props\n */\n weights: any;\n fontSizeBase: string;\n @State() styles = {};\n theme = window.CuraAPI.theme;\n\n connectedCallback() {\n this.setFontProperties();\n this.setColors();\n }\n\n getClasses() {\n const classes = {};\n classes[this.size.toLowerCase()] = true;\n classes[`${this.weight.toLowerCase()}-weight`] = true;\n return classes;\n }\n\n setFontProperties() {\n this.weights = this.theme.fonts.getWeights();\n this.fontSizeBase = this.theme.fonts.getSize();\n this.styles = {\n '--font-family': window.CuraAPI.theme.fonts.getFamily('heading'),\n '--font-weight-regular': this.weights.regular,\n '--font-weight-medium': this.weights.medium,\n '--font-weight-bold': this.weights.bold,\n '--font-weight-black': this.weights.black\n }\n }\n\n hostCSSProperties() {\n return {\n '--margin-block': this.marginBlock,\n '--font-size-base': this.fontSizeBase,\n '--line-height': this.lineHeight\n };\n }\n\n setColors() {\n ~~const fontColor =~~ this.~~color\n ? this.theme.colors.getColor(this.color)\n : this.theme.fonts.getColor();\n this.~~styles = {\n ...this.styles,\n '--color-~~body': fontColor \|\| this.theme.colors.getColor('neutral-darker'),\n '--color-~~link': this.theme.colors.getColor(`${this.spotColor}`)\n };\n }\n\n getHeadingTag() {\n const tags = {\n '1': <h1 style={this.styles} class={this.getClasses()}><slot></slot></h1>,\n '2': <h2 style={this.styles} class={this.getClasses()}><slot></slot></h2>,\n '3': <h3 style={this.styles} class={this.getClasses()}><slot></slot></h3>,\n '4': <h4 style={this.styles} class={this.getClasses()}><slot></slot></h4>,\n '5': <h5 style={this.styles} class={this.getClasses()}><slot></slot></h5>,\n '6': <h6 style={this.styles} class={this.getClasses()}><slot></slot></h6>,\n 'default': <h1 style={this.styles} class={this.getClasses()}><slot></slot></h1>\n };\n return tags[`${this.level}`] \|\| tags['default'];\n }\n\n render() {\n return (\n <Host style={this.hostCSSProperties()}>\n { this.getHeadingTag() }\n </Host>\n );\n }\n\n}\n"],"version":3}
1	+ {"file":"cura-heading2.js","mappings":"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","names":[],"sources":["src/components/text/cura-heading/cura-heading.scss?tag=cura-heading&encapsulation=shadow","src/components/text/cura-heading/cura-heading.tsx"],"sourcesContent":["@import '../../../scss/mixins/responsive.scss';\n\n:host {\n display: block;\n font-size: var(--font-size-base);\n\n h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-family);\n font-size: 1.714em;\n font-weight: var(--font-weight-regular);\n color: var(--color-body);\n line-height: var(--line-height);\n margin-block: var(--margin-block);\n letter-spacing: 0px;\n\n &.bold-weight {\n font-weight: var(--font-weight-medium);\n }\n\n &.large {\n font-size: 2.071em;\n letter-spacing: -0.58px;\n }\n\n &.small {\n font-size: 1.214em;\n line-height: calc(var(--line-height) + 20%);\n\n &.bold-weight, ::slotted(b), ::slotted(strong) {\n font-weight: var(--font-weight-bold);\n }\n }\n\n &.xsmall {\n font-size: 0.714em;\n font-weight: var(--font-weight-medium);\n letter-spacing: 0.6px;\n\n &.bold-weight, ::slotted(b), ::slotted(strong) {\n font-weight: var(--font-weight-bold);\n }\n }\n\n }\n\n @include medium-large() {\n h1, h2, h3, h4, h5, h6 {\n font-size: 2em;\n\n &.large {\n font-size: 2.357em;\n letter-spacing: -0.66px;\n }\n\n &.small {\n font-size: 1.357em;\n }\n\n &.xsmall {\n font-size: 0.857em;\n line-height: calc(var(--line-height) + 3%);\n letter-spacing: 0.72px;\n }\n\n }\n }\n\n @include xlarge-only() {\n h1, h2, h3, h4, h5, h6 {\n font-size: 2.5em;\n line-height: calc(var(--line-height) + 5%);\n letter-spacing: -0.82px;\n\n &.large {\n font-size: 2.929em;\n }\n\n &.small {\n font-size: 1.714em;\n line-height: calc(var(--line-height) + 30%);\n letter-spacing: 0%;\n }\n\n &.xsmall {\n font-size: 1em;\n line-height: calc(var(--line-height) + 12.857%);\n letter-spacing: 0.28px;\n }\n }\n }\n\n ::slotted(b), ::slotted(strong) {\n font-weight: var(--font-weight-medium);\n }\n\n ::slotted(a) {\n font-weight: var(--font-weight-bold);\n color: var(--color-link);\n text-underline-offset: 10%;\n cursor: pointer;\n }\n\n ::slotted(u) {\n text-underline-offset: 10%;\n }\n\n ::slotted(abbr) {\n color: var(--color-link);\n text-decoration: underline dashed 1px var(--color-link);\n text-underline-offset: 10%;\n cursor: default;\n }\n\n ::slotted(i) {\n font-weight: var(--font-weight-medium);\n }\n\n ::slotted(em) {\n color: var(--color-link);\n font-style: normal;\n }\n\n}\n","import { Component, Host, h, Prop, Element, Watch, State } from '@stencil/core';\n\n@Component({\n tag: 'cura-heading',\n styleUrl: 'cura-heading.scss',\n shadow: true,\n})\nexport class CuraHeading {\n\n /*\n Heading level for semantics. Will render the related HTML tag <h1>, <h2>, ...\n * Values: 1(default) to 6.\n /\n @Prop({reflect: true}) level: 1 \| 2 \| 3 \| 4 \| 5 \| 6 = 1;\n\n /\n Heading style size.\n * Values: regular (deprecated), medium (default) \| large \| small \| caption (deprecated) \| xsmall.\n /\n @Prop({reflect: true}) size: 'regular' \| 'medium' \| 'large' \| 'small' \| 'caption' \| 'xsmall' = 'medium';\n\n /\n Heading font weight. It is possible to use regular HTML tags like <b> or <strong> as well.\n * Values: regular (default) \| bold.\n /\n @Prop({reflect: true}) weight: 'regular' \| 'bold' = 'regular';\n\n /\n Apply design system color to interactive elements like <a> and <abbr> inside the text.\n * Values: Color from design system scheme. Default to 'accent-dark'.\n /\n @Prop({reflect: true}) spotColor = 'accent-dark';\n\n /\n Text color.\n * Values: Color from design system scheme. Default to the font color from the theme.\n /\n @Prop() color: string;\n @Watch('color')\n @Watch('spotColor')\n handleChangeColor() {\n this.setColors();\n }\n\n /\n CSS margin-block property values.\n * Default to 1.25em\n /\n @Prop({reflect: true}) marginBlock = '1.25em';\n\n /\n CSS line-height property values.\n * Default to 140%\n /\n @Prop({reflect: true}) lineHeight = '130%';\n\n /\n Host element <cura-heading>\n /\n @Element() host: HTMLElement;\n\n /\n Internal Props\n */\n weights: any;\n fontSizeBase: string;\n @State() styles = {};\n theme = window.CuraAPI.theme;\n\n connectedCallback() {\n this.setFontProperties();\n this.setColors();\n }\n\n getClasses() {\n const classes = {};\n classes[this.size.toLowerCase()] = true;\n classes[`${this.weight.toLowerCase()}-weight`] = true;\n return classes;\n }\n\n setFontProperties() {\n this.weights = this.theme.fonts.getWeights();\n this.fontSizeBase = this.theme.fonts.getSize();\n this.styles = {\n '--font-family': window.CuraAPI.theme.fonts.getFamily('heading'),\n '--font-weight-regular': this.weights.regular,\n '--font-weight-medium': this.weights.medium,\n '--font-weight-bold': this.weights.bold,\n '--font-weight-black': this.weights.black\n }\n }\n\n hostCSSProperties() {\n const fontColor = this.color\n ? this.theme.colors.getColor(this.color)\n : this.theme.fonts.getColor();\n return {\n '--margin-block': this.marginBlock,\n '--font-size-base': this.fontSizeBase,\n '--line-height': this.lineHeight,\n '--color-body': fontColor \|\| this.theme.colors.getColor('neutral-darker'),\n };\n }\n\n setColors() {\n this.styles = {\n ...this.styles,\n '--color-link': this.theme.colors.getColor(`${this.spotColor}`)\n };\n }\n\n getHeadingTag() {\n const tags = {\n '1': <h1 style={this.styles} class={this.getClasses()}><slot></slot></h1>,\n '2': <h2 style={this.styles} class={this.getClasses()}><slot></slot></h2>,\n '3': <h3 style={this.styles} class={this.getClasses()}><slot></slot></h3>,\n '4': <h4 style={this.styles} class={this.getClasses()}><slot></slot></h4>,\n '5': <h5 style={this.styles} class={this.getClasses()}><slot></slot></h5>,\n '6': <h6 style={this.styles} class={this.getClasses()}><slot></slot></h6>,\n 'default': <h1 style={this.styles} class={this.getClasses()}><slot></slot></h1>\n };\n return tags[`${this.level}`] \|\| tags['default'];\n }\n\n render() {\n return (\n <Host style={this.hostCSSProperties()}>\n { this.getHeadingTag() }\n </Host>\n );\n }\n\n}\n"],"version":3}

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

@@ -52,7 +52,7 @@ const CuraIcon = /*@__PURE__*/ proxyCustomElement(class CuraIcon extends HTMLEle
         this.host.style.setProperty(prop, value);
     }
     render() {
-        return (h(Host, { key: '8955586152a043a308ad539516973dba36bd145d' }, h("svg", { key: 'f383174620a5dcaa33d3d969a6cd57e814b96140', version: "1.1", viewBox: "0 0 24 24", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg" }, h("use", { key: '1f0550ed5a7826c7f7ef36ed34f45b3da4f4e80d', xlinkHref: `${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}` }))));
+        return (h(Host, { key: '0ab55b86ccb41c3be1c1a114c35c81d8488e12cc' }, h("svg", { key: 'c787e2ff356af580215cef7c05225ef5ac716d21', version: "1.1", viewBox: "0 0 24 24", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg" }, h("use", { key: '71c4f67a6d50cd2112fcef7cbac7b506d662911e', 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

@@ -25,9 +25,9 @@ const CuraIconsView$1 = /*@__PURE__*/ proxyCustomElement(class CuraIconsView ext
         this.sizes.unshift(this.sizes.pop());
     }
     render() {
-        return (h(Host, { key: '578795eda26d68314425907d7d4b0716eae31677' }, h("div", { key: '1cabf7e4ad314bbcb93d86c4ad22e5d8d69e2f81', class: "iconDetail" }, h("cura-heading", { key: '154ada215d4a13b674870c7b3ac85cb2b2c96873', size: "small", "margin-block": "0 24px" }, "Icon: ", h("b", { key: '84b323f4f81831142ccb51109a2bcbbe8748c8e9' }, this.selected)), h("div", { key: '71ee5a42938cc43014e4b306460ab03ed03a8d2d', class: "iconSizes" }, this.sizes.map(size => size === 'micro' && !microIcons.includes(this.selected) ? '' :
-            h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size }), h("span", null, size)))), h("div", { key: 'f0ce668720e9897ea8abcd4c105fed555d0537dc', class: "iconSizes invert" }, this.sizes.map(size => size === 'micro' && !microIcons.includes(this.selected) ? '' :
-            h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size, color: "neutral-white" }), h("span", null, size))))), h("div", { key: '2c2a0f8f18eff3da6b4379e9549683f4daf2755d', class: "icons" }, iconsetdefaulticons.map(icon => h("div", { class: { icon: true, selected: icon === this.selected }, onClick: () => this.setSelected(icon) }, h("cura-icon", { name: icon, size: "32", color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }), h("cura-label", { size: "xsmall", weight: icon === this.selected ? 'bold' : 'regular', color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }, icon), !microIcons.includes(icon) ? '' :
+        return (h(Host, { key: '8852f24d59f30c812ac2e05be38bba10bccb1fd8' }, h("div", { key: '6b88398ca80b05a62681d7b6834d5d0f59d790fa', class: "iconDetail" }, h("cura-heading", { key: '5b3cab1aa26adc1b1b09dc3f3f5c0bd2ac394f89', size: "small", "margin-block": "0 24px" }, "Icon: ", h("b", { key: 'eb974ce78dd33e56cd2c6118c6c399f029660547' }, this.selected)), h("div", { key: '46d600bbf0903861f5c982b0e73c4757447d0324', class: "iconSizes" }, this.sizes.map(size => size === 'micro' && !microIcons.includes(this.selected) ? '' :
+            h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size }), h("span", null, size)))), h("div", { key: '973355e41f1a10405c8224461625215aedabe0e3', class: "iconSizes invert" }, this.sizes.map(size => size === 'micro' && !microIcons.includes(this.selected) ? '' :
+            h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size, color: "neutral-white" }), h("span", null, size))))), h("div", { key: 'acd2b60eb99238893fc97aa177e96f43a3c54bd1', class: "icons" }, iconsetdefaulticons.map(icon => h("div", { class: { icon: true, selected: icon === this.selected }, onClick: () => this.setSelected(icon) }, h("cura-icon", { name: icon, size: "32", color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }), h("cura-label", { size: "xsmall", weight: icon === this.selected ? 'bold' : 'regular', color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }, icon), !microIcons.includes(icon) ? '' :
             h("cura-paragraph", { color: 'success-dark', size: "xsmall", "margin-block": "0px", "line-height": '100%' }, "MICRO"))))));
     }
     static get style() { return CuraIconsViewStyle0; }