npm - @rededor/cura - Versions diffs - 1.0.0-alpha.8 → 1.0.0 - Mend

@rededor/cura 1.0.0-alpha.8 → 1.0.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 (263) hide show

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

@@ -21,7 +21,7 @@ export class CuraToast {
         this.setStyle();
     }
     render() {
-        return (h(Host, { key: '47453cc474cc82642c9363b2e2dcb246bcbc0990' }, h("div", { key: '90eae573aa9343666cbd7c61f66c2314e24377b3', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: 'ca9c8dcbab273aada4d80d5e025d17f08e6b71fd', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), h("div", { key: 'cc70492c6baf8a55a195a37378f23ad4174b79e7', class: "content" }, h("cura-heading", { key: '51881b8db43df91ce52bfcbe5f0db88fadd959ac', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: '80fdd7048123b4ce8e7a604914c4d522aa75858c', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: 'd74ba171c699de611f12e66110cfdd2573e6c210' })), h("slot", { key: '034e0d8efc6fd221967807c084226cd74e56ba18', name: "actions" })), this.closeButton && h("cura-icon", { key: '3077f5c74f0a109a706d295fa336595301837acb', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && h("cura-loader-bar", { key: '445383c6a9c18454ef157d025a80c376e1ce9419', color: `${this.type}-base`, progress: this.progress }))));
+        return (h(Host, { key: '65417f506ab0db06fd38449643c679d4fea1fffd' }, h("div", { key: '80e509d36768bea4b99e215dc9d81aec83b9143c', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: 'd2f6a36370ab4c6555bb679f481e1975fb234e41', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), h("div", { key: 'c312e11dbb469c1a486eaf90898c6149ce099627', class: "content" }, h("cura-heading", { key: 'f0ff03c554caaf0213476c23004b1361a876cf19', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: 'd94ab5591663c1135712bf54dd90182de5d18ed5', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '9dc18a1ded79abcc258b4a2c892084addb194c9f' })), h("slot", { key: '829788786a56a1492b6fef2dd053f84fdafd7ea1', name: "actions" })), this.closeButton && h("cura-icon", { key: '1d507a45d3a860e859f879de15d79bc7c3a34787', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && h("cura-loader-bar", { key: '0ad99ff90899e19b3b2e9a13a2ac3fa76dae286d', color: `${this.type}-base`, progress: this.progress }))));
     }
     componentDidLoad() {
         this.openContainer();

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

@@ -147,7 +147,7 @@ export class CuraCheckbox {
         return h("cura-icon", { class: "icon", name: iconName, size: iconSize, color: iconColor });
     }
     render() {
-        return (h(Host, { key: 'b74eebdbcaed952fa2157c3cbb3a84ce92bb9e6c' }, h("div", { key: 'e18e4e5aa12a3e298db65399ebf002aa991100f2', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: 'fdbcf3ec4b12bf9c6d80cded5ce9d17c4f5e2a39', class: "info" }, h("div", { key: 'cbe76b43956bed00ab638b953a44d941ffb748d5', class: "label-wrapper" }, h("cura-label", { key: '259c5e5e63a6d36ed15845899eaf8c76b2b50273', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: '42d8b2777d4790bd8f83a7ddc939c6ab584b5cf0', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: 'bcafaacf64c8967f78a3e9b7ecfe6d1412517ea3', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: 'c9cc9e74cc9048ead8375a158253491e1aae4dfe' }))), h("div", { key: 'e63ba7ef796c9d46cf4729facf1be985b8174028', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: '2e7e2e302e577f26d8022fe4a0108f0e6727450f', 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: 'd24019856ac701df4acbe1f7e104df67eae93945' }, h("div", { key: '413093861acf19223c65aae30bd5cd62053eec43', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: '5ba8881480f1ef8692cde13258246175ac52f3c8', class: "info" }, h("div", { key: 'e3473b617a9261dfacea2c2b8bd826b87a739c6b', class: "label-wrapper" }, h("cura-label", { key: '2a4b7c973795a23b123c250259d95df63796f53c', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: '093a39a051be67644f6206095686cda606a3c9f5', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: '8fe9215b5a56a1cf7f10871e721c1b04cd88d37f', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '5633213ce05d2f554a2acc9804d5306436eaac45' }))), h("div", { key: '5ff152af172d4a8cb0e83e2e50ec8fa6449ef9e4', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: 'f62a404773c19fedfd236aa82ecd8582fdfd4c36', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
     }
     static get is() { return "cura-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.css CHANGED Viewed

@@ -1,57 +1,76 @@
+/**
+ * Global Spacing Definitions.
+ * Required CSS Properties:
+ * --base-spacing
+ */
+/* None: 0px */
+/* Tiny default: 4px */
+/* Mini default: 8px */
+/* XXXS default: 12px */
+/* XXS default: 16px */
+/* XS default: 20px */
+/* S default: 20px */
+/* M default: 32px */
+/* L default: 40px */
+/* XL default: 48px */
+/* XXL default: 64px */
+/* XXXL default: 72px */
+/* Huge default: 96px */
 :host {
   display: block;
   box-sizing: border-box;
   width: 100%;
 }
-:host(:last-of-type) li {
+:host(:last-of-type) .content-container {
   border-bottom: none;
 }
-ul {
-  list-style: none;
+.option-container {
   width: 100%;
-  margin: 0;
-  padding: 0;
+  display: flex;
+}
+.option-container:hover:not(.disabled):not(.selected) .content-container {
+  background-color: var(--neutral-white);
+}
+.option-container.selected .content-container {
+  background-color: var(--primary-lighter);
+}
+.option-container.disabled {
+  cursor: default;
+}
+.content-container {
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+  padding: calc(var(--base-spacing) * 2px) calc(var(--base-spacing) * 1px);
+  background-color: var(--neutral-purewhite);
+  border-bottom: 1px solid var(--neutral-light);
+}
+.content-container ::slotted(div[slot=action]) {
+  display: flex;
+  justify-content: end;
 }
-li {
+.option-info {
   width: 100%;
   display: flex;
   align-items: center;
   align-content: center;
   justify-content: center;
-  gap: 8px;
-  padding: 8px 4px;
+  gap: calc(var(--base-spacing) * 2px);
   flex-direction: row;
-  background-color: var(--neutral-purewhite);
-  border-bottom: 1px solid var(--neutral-light);
   box-sizing: border-box;
   cursor: pointer;
 }
-li.disabled {
-  cursor: default;
-}
-li.hovered {
-  background-color: var(--neutral-white);
-}
-li cura-heading {
+.option-info cura-heading {
   width: 100%;
   margin-block: 0px;
 }
-li ::slotted(div[slot=image]) {
-  min-width: 32px;
+.option-info ::slotted(div[slot=image]) {
+  min-width: calc(var(--base-spacing) * 8px);
   display: flex;
   justify-content: center;
   align-items: center;
-}
-li ::slotted(div[slot=action]) {
-  display: flex;
-  justify-content: end;
-}
-li.selected {
-  background-color: var(--primary-lighter);
-}
-li:hover:not(.disabled) {
-  background-color: var(--neutral-white);
 }

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

@@ -20,6 +20,7 @@ export class CuraDropdownSearchOption {
     }
     connectedCallback() {
         this.weights = window.CuraAPI.theme.fonts.getWeights();
+        this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
         this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor(`neutral-purewhite`);
         this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor(`neutral-light`);
         this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);
@@ -35,11 +36,12 @@ export class CuraDropdownSearchOption {
         }
     }
     render() {
-        return (h(Host, { key: 'aa4b585c3f67a74d1371430200ad309f74015af6', style: this.styles, slot: "dropdown-search-option" }, h("ul", { key: '5413964e5e10e68e4ff2ac30f68f6e22cff6dcc1' }, h("li", { key: '3aab9b7d5e3904e57a7310addc4b15a51453d31d', onClick: (e) => this.handleOptionClick(e), value: this.value, class: {
+        return (h(Host, { key: '957218946adc6611a384d8e86860eb4f8ae50db3', slot: "dropdown-search-option" }, h("div", { key: 'a9b41feb6d72ae97cdeedd9a9aed36e2d6df40fe', style: this.styles, class: {
+                "option-container": true,
                 hovered: this.selectable ? this.hovered : false,
                 selected: this.selected,
                 disabled: !this.selectable
-            } }, h("slot", { key: '030c06f2e9bcfd0169b8d94c8976cd4b1e25b834', name: "image" }), h("cura-heading", { key: 'f5bd16d815a853a41d98aac09517359a5e1b432d', size: "xsmall", lineHeight: "16px", marginBlock: "0px", weight: "bold", color: "neutral-black" }, h("slot", { key: '878d1db64dc98c57530adf947cbc216ac1ce1be0' })), h("slot", { key: '81c92fcb864bc8f2324cc353574123705fc386a8', name: "action" })))));
+            } }, h("div", { key: '18994a7e0ad6e2b4ab37ae65edc796e4cdedce43', class: "content-container" }, h("div", { key: '2505977c08bea5d92b3cc33af5c117709120b82b', class: "option-info", onClick: (e) => this.handleOptionClick(e) }, h("slot", { key: 'bc5ac8b88938f29693b6f9d68ec933e7abc513e4', name: "image" }), h("cura-heading", { key: '81d2b1d1e8b60f26a6e444d18dac0ddfc95b44ea', size: "xsmall", lineHeight: "16px", marginBlock: "0px", weight: "bold", color: "neutral-black" }, h("slot", { key: 'e91fb72dc20136d0a6b56da0d03eaba02327d80d' }))), h("slot", { key: 'f0e24b8548bec4ff52f3fcccd77562ef5548d5f6', name: "action" })))));
     }
     static get is() { return "cura-dropdown-search-option"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"cura-dropdown-search-option.js","sourceRoot":"","sources":["../../../../../src/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOrG,MAAM,OAAO,wBAAwB;;~~QAwC3B~~,sBAAiB,GAAG,CAAC,CAAQ,EAAE,EAAE;YACvC,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBACpB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;gBAC/B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACrC,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,CAAC;iBAAM,CAAC;gBACN,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,wBAAwB,EAAE,CAAC;YAC/B,CAAC;QACH,CAAC,CAAC;;~~wBAxC0D~~,KAAK;0BAKlB,IAAI;uBAKQ,KAAK;sBAE9C,EAAE;;IAWpB,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;QACvD,IAAI,CAAC,MAAM,CAAC,qBAAqB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAC;QAC/F,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;QACvF,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;QACvF,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,iBAAiB,EAAE,EAAE,CAAC,CAAC;IACjG,CAAC;IAaD,gBAAgB;QACd,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAGO,eAAe;QACrB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;QAC/E,IAAI,WAAW,EAAE,CAAC;YAChB,WAAW,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;QAChF,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,~~KAAK,EAAE,~~IAAI,~~CAAC,MAAM,EAAE,IAAI,~~EAAC,wBAAwB;~~YACrD;gBACE~~,~~2DACE~~,~~OAAO~~,EAAE,~~CAAC,CAAC,EAAE,EAAE,CAAC,~~IAAI,CAAC,~~iBAAiB~~,~~CAAC~~,~~CAAC~~,~~CAAC~~,~~EACzC~~,~~KAAK,~~EAAE,IAAI~~,CAAC,KAAK,EACjB,KAAK,EAAE~~;~~wBACL~~,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK;~~wBAC~~/C,QAAQ,EAAE,IAAI,CAAC,QAAQ;~~wBACvB~~,QAAQ,EAAE,CAAC,IAAI,CAAC,UAAU;~~qBAC3B~~;~~oBAED~~,6DAAM,IAAI,EAAC,OAAO,GAAQ;~~oBAC1B~~,qEAAc,IAAI,EAAC,QAAQ,EAAC,UAAU,EAAC,MAAM,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe;~~wBACjG~~,8DAAa,CACA;~~oBACf~~,6DAAM,IAAI,EAAC,QAAQ,GAAQ,~~CACxB~~,CACF,~~CACA~~,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'cura-dropdown-search-option',\n styleUrl: 'cura-dropdown-search-option.scss',\n shadow: true,\n})\nexport class CuraDropdownSearchOption {\n /*\n The value of the dropdown search option.\n /\n @Prop({ reflect: true }) value: string;\n\n /\n Indicates if the dropdown search option is selected.\n /\n @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n\n /\n Indicates if the dropdown search is selectable.\n /\n @Prop({ reflect: true }) selectable: boolean = true;\n\n /\n Indicates if the dropdown search option is hovered.\n /\n @Prop({ reflect: true, mutable: true }) hovered: boolean = false;\n\n @State() styles = {};\n\n /\n Event emitted when the option is selected.\n */\n @Event() optionSelected: EventEmitter<string>;\n\n @Element() hostElement: HTMLElement;\n\n weights;\n\n connectedCallback() {\n this.weights = window.CuraAPI.theme.fonts.getWeights();\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-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n this.styles['--primary-lighter'] = window.CuraAPI.theme.colors.getColor(`primary-lighter`, 50);\n }\n\n private handleOptionClick = (e: Event) => {\n if (this.selectable) {\n this.selected = !this.selected;\n this.optionSelected.emit(this.value);\n this.updateIconColor();\n } else {\n e.preventDefault();\n e.stopImmediatePropagation();\n }\n };\n\n componentDidLoad() {\n this.updateIconColor();\n }\n\n @Watch('selected')\n private updateIconColor() {\n const iconElement = this.hostElement.querySelector('[slot=\"image\"] cura-icon');\n if (iconElement) {\n iconElement.setAttribute('color', this.selected ? 'primary' : 'neutral-dark');\n }\n }\n\n render() {\n return (\n <Host ~~style={this.styles}~~ slot=\"dropdown-search-option\">\n <~~ul>\~~n ~~<li\n onClick~~={~~(e) =>~~ this.~~handleOptionClick(e)~~}\n ~~value~~={~~this.value}~~\n ~~class={{~~\n hovered: this.selectable ? this.hovered : false,\n selected: this.selected,\n disabled: !this.selectable\n }}\n >\n <slot name=\"image\"></slot>\n <cura-heading size=\"xsmall\" lineHeight=\"16px\" marginBlock=\"0px\" weight=\"bold\" color=\"neutral-black\">\n <slot></slot>\n </cura-heading>\n <slot name=\"action\"></slot>\n </li>\n </ul>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"cura-dropdown-search-option.js","sourceRoot":"","sources":["../../../../../src/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'cura-dropdown-search-option',\n styleUrl: 'cura-dropdown-search-option.scss',\n shadow: true,\n})\nexport class CuraDropdownSearchOption {\n /*\n The value of the dropdown search option.\n /\n @Prop({ reflect: true }) value: string;\n\n /\n Indicates if the dropdown search option is selected.\n /\n @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n\n /\n Indicates if the dropdown search is selectable.\n /\n @Prop({ reflect: true }) selectable: boolean = true;\n\n /\n Indicates if the dropdown search option is hovered.\n /\n @Prop({ reflect: true, mutable: true }) hovered: boolean = false;\n\n @State() styles = {};\n\n /\n Event emitted when the option is selected.\n */\n @Event() optionSelected: EventEmitter<string>;\n\n @Element() hostElement: HTMLElement;\n\n weights;\n\n connectedCallback() {\n this.weights = window.CuraAPI.theme.fonts.getWeights();\n this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\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-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n this.styles['--primary-lighter'] = window.CuraAPI.theme.colors.getColor(`primary-lighter`, 50);\n }\n\n private handleOptionClick = (e: Event) => {\n if (this.selectable) {\n this.selected = !this.selected;\n this.optionSelected.emit(this.value);\n this.updateIconColor();\n } else {\n e.preventDefault();\n e.stopImmediatePropagation();\n }\n };\n\n componentDidLoad() {\n this.updateIconColor();\n }\n\n @Watch('selected')\n private updateIconColor() {\n const iconElement = this.hostElement.querySelector('[slot=\"image\"] cura-icon');\n if (iconElement) {\n iconElement.setAttribute('color', this.selected ? 'primary' : 'neutral-dark');\n }\n }\n\n render() {\n return (\n <Host slot=\"dropdown-search-option\">\n <div\n style={this.styles}\n class={{\n \"option-container\": true,\n hovered: this.selectable ? this.hovered : false,\n selected: this.selected,\n disabled: !this.selectable\n }}>\n <div class=\"content-container\">\n <div class=\"option-info\" onClick={(e) => this.handleOptionClick(e)}>\n <slot name=\"image\"></slot>\n <cura-heading size=\"xsmall\" lineHeight=\"16px\" marginBlock=\"0px\" weight=\"bold\" color=\"neutral-black\">\n <slot></slot>\n </cura-heading>\n </div>\n <slot name=\"action\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class CuraDropdownSearchOptionTitle {
     render() {
-        return (h(Host, { key: 'd27a47a6d61497f488c449188b2c6036529350cc', slot: "dropdown-search-option" }, h("cura-label", { key: 'ba63e9fce7392087551ccc7fb46a83cffa6785c9', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, h("slot", { key: 'f14d41a3ed995f6f9a946e7d96e5c0b0208310ad' }))));
+        return (h(Host, { key: 'b9fbb0edaea7457fad9244d5c032961bd913f170', slot: "dropdown-search-option" }, h("cura-label", { key: 'dbefa340f1001a532c7f2152907b87e5e2e1f0ec', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, h("slot", { key: '1d03c41d153dc707db82943c77dd96547c98c78a' }))));
     }
     static get is() { return "cura-dropdown-search-option-title"; }
     static get encapsulation() { return "shadow"; }

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

@@ -118,7 +118,7 @@ export class CuraDropdownSearch {
     }
     addClickListenersToOptions() {
         this.options.forEach((option, index) => {
-            option.addEventListener('click', () => this.onSelectedOption(index));
+            option.addEventListener('optionSelected', () => this.onSelectedOption(index));
         });
     }
     updateSelectedOption(value) {
@@ -200,9 +200,9 @@ export class CuraDropdownSearch {
     }
     render() {
         const isMobileDropdown = this.isMobile && this.isDropdownOpen;
-        return (h(Host, { key: 'b5fd18f900ab61704e75d3c768c73dd7c616e741', style: this.hostCSSProperties(), class: "dropdown-overlay" }, h("div", { key: 'd15ed52f0cd8fe17c3320c235f740b8118883cbf', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, h("div", { key: '8690cc4ecea61480603468e6e2d6b811c656ec72', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (h("cura-button-transparent", { key: '1de51bb3c1f6bb4ac67ac12b0a6983840df1f248', fontColor: "dark", onClick: () => (this.isMobile = false), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), h("cura-input-text", { key: '477980345bd09b89655f38b7ebf1db44f8475e35', 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.isDropdownOpen = true), onClick: () => (window.innerWidth < 768 ? (this.isMobile = true) : null), onBlur: () => {
+        return (h(Host, { key: '0332c943d5c4240283d9672d021e611a982fe52e', style: this.hostCSSProperties(), class: "dropdown-overlay" }, h("div", { key: '2f65822008f3f7fae7c55033e3a6d75efa3e8466', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, h("div", { key: '28bfa930d8f66007716f586a35c78ebf9086974e', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (h("cura-button-transparent", { key: '1e1c18de7fca61e6420b175c602865fc5aec5e36', fontColor: "dark", onClick: () => (this.isMobile = false), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), h("cura-input-text", { key: '5fc1a11e5491ae15d0cc9f1d9aab32cd69a2d2ba', 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.isDropdownOpen = true), onClick: () => (window.innerWidth < 768 ? (this.isMobile = true) : null), onBlur: () => {
                 this.handleOnBlur();
-            }, placeholder: this.placeholder, size: "large", onKeyDown: this.handleKeyDown }, h("slot", { key: '55a3e00b86b3bfcc54f0352d48399af44139eb2e', name: "helperText" }))), h("div", { key: 'd123c4f652f675eb3a98f7ea0f518c01c767b97f', id: "dropdown-search-list", class: this.getDropdownClasses() }, h("slot", { key: '06e5a691a3be5eaa0861953bd36779f8993af83a', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
+            }, placeholder: this.placeholder, size: "large", onKeyDown: this.handleKeyDown }, h("slot", { key: 'f6ae0aea0d15fded19af9152e68a8de56995497f', name: "helperText" }))), h("div", { key: '1ec396eafe90f062aea392faca54473ba3cc475b', id: "dropdown-search-list", class: this.getDropdownClasses() }, h("slot", { key: 'afc41aa7166145912e163086f6df603dc3e39d51', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
     }
     static get is() { return "cura-dropdown-search"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"cura-dropdown-search.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-dropdown-search/cura-dropdown-search.tsx"],"names":[],"mappings":"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","sourcesContent":["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 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 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 } else {\n this.removeOverlay();\n }\n }\n componentDidLoad() {\n window.addEventListener('resize', this.handleResize);\n }\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.handleResize);\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('click', () => 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 }\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 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.isDropdownOpen = true)}\n onClick={() => (window.innerWidth < 768 ? (this.isMobile = true) : null)}\n onBlur={() => {\n this.handleOnBlur();\n }}\n placeholder={this.placeholder}\n size=\"large\"\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"]}
1	+ {"version":3,"file":"cura-dropdown-search.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-dropdown-search/cura-dropdown-search.tsx"],"names":[],"mappings":"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","sourcesContent":["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 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 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 } else {\n this.removeOverlay();\n }\n }\n componentDidLoad() {\n window.addEventListener('resize', this.handleResize);\n }\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.handleResize);\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 }\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 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.isDropdownOpen = true)}\n onClick={() => (window.innerWidth < 768 ? (this.isMobile = true) : null)}\n onBlur={() => {\n this.handleOnBlur();\n }}\n placeholder={this.placeholder}\n size=\"large\"\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"]}

package/dist/collection/components/forms/cura-label/cura-label.js CHANGED Viewed

@@ -46,7 +46,7 @@ export class CuraLabel {
         };
     }
     render() {
-        return (h(Host, { key: '34d418859c8067e879a089240d36b58f5e91c8fc', style: this.hostCSSProperties() }, h("p", { key: '4a28171e079f80d8e61ebe840b858d65dd6d62c3', style: this.styles, class: this.getClasses() }, h("slot", { key: '0796484498caddf7935ff3458e13cfab47759a4b' }))));
+        return (h(Host, { key: '77ee1eeda9c4bef3c64a098df6420d8f1545e06f', style: this.hostCSSProperties() }, h("p", { key: '6ade3961e8b1fa6cf5d3ae2bd695774cdfa197a7', style: this.styles, class: this.getClasses() }, h("slot", { key: '1fe809e027a5137e747835198527bcfab8c73d86' }))));
     }
     static get is() { return "cura-label"; }
     static get encapsulation() { return "shadow"; }
@@ -66,8 +66,8 @@ export class CuraLabel {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'medium' | 'large' | 'small' | 'xsmall'",
-                    "resolved": "\"large\" | \"medium\" | \"small\" | \"xsmall\"",
+                    "original": "'medium' | 'large' | 'small' | 'xsmall' | string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,

package/dist/collection/components/forms/cura-label/cura-label.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cura-label.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-label/cura-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOhF,MAAM,OAAO,SAAS;;QAsDpB,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;~~oBAhD0C~~,QAAQ;~~sBAM3B~~,SAAS;yBAM1B,aAAa;;2BAiBX,GAAG;0BAMJ,MAAM;sBAYxB,EAAE;;IA1BpB,iBAAiB;QACf,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IA2BD,iBAAiB;QACf,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAED,UAAU;QACR,MAAM,SAAS,GAAG,EAAE,CAAC;QACrB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,GAAG,IAAI,CAAC;QAC1C,SAAS,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG,IAAI,CAAC;QACxD,OAAO,SAAS,CAAC;IACnB,CAAC;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,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC;YACnD,sBAAsB,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM;YAC3C,oBAAoB,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI;SACxC,CAAC;IACJ,CAAC;IAED,SAAS;QACP,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK;YAC1B,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;YACxC,CAAC,CAAC,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;IACJ,CAAC;IAED,iBAAiB;QACf,OAAO;YACL,gBAAgB,EAAE,IAAI,CAAC,WAAW;YAClC,kBAAkB,EAAE,IAAI,CAAC,YAAY;YACrC,eAAe,EAAE,IAAI,CAAC,UAAU;SACjC,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE;YACnC,0DAAG,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;gBAC7C,8DAAa,CACX,CACC,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, Prop, h, Element, Watch, State } from '@stencil/core';\n\n@Component({\n tag: 'cura-label',\n styleUrl: 'cura-label.scss',\n shadow: true,\n})\nexport class CuraLabel {\n\n /*\n Set size of body text.\n * Values: medium (default) \| large \| small \| xsmall.\n /\n @Prop({reflect: true}) size: 'medium' \| 'large' \| 'small' \| 'xsmall' = 'medium';\n\n /\n Label 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 = '0';\n\n /\n CSS line-height property values.\n * Default to 140%\n /\n @Prop({reflect: true}) lineHeight = '125%';\n\n /\n Host element <cura-label>\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 sizeclass = {};\n sizeclass[this.size.toLowerCase()] = true;\n sizeclass[`${this.weight.toLowerCase()}-weight`] = true;\n return sizeclass;\n }\n\n setFontProperties() {\n this.weights = this.theme.fonts.getWeights();\n this.fontSizeBase = this.theme.fonts.getSize();\n this.styles = {\n '--font-family': this.theme.fonts.getFamily('body'),\n '--font-weight-medium': this.weights.medium,\n '--font-weight-bold': this.weights.bold\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 hostCSSProperties() {\n return {\n '--margin-block': this.marginBlock,\n '--font-size-base': this.fontSizeBase,\n '--line-height': this.lineHeight\n };\n }\n\n render() {\n return (\n <Host style={this.hostCSSProperties()}>\n <p style={this.styles} class={this.getClasses()}>\n <slot></slot>\n </p>\n </Host>\n );\n }\n\n}\n"]}
1	+ {"version":3,"file":"cura-label.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-label/cura-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOhF,MAAM,OAAO,SAAS;;QAsDpB,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;oBAhDmD,QAAQ;sBAMpC,SAAS;yBAM1B,aAAa;;2BAiBX,GAAG;0BAMJ,MAAM;sBAYxB,EAAE;;IA1BpB,iBAAiB;QACf,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IA2BD,iBAAiB;QACf,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAED,UAAU;QACR,MAAM,SAAS,GAAG,EAAE,CAAC;QACrB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,GAAG,IAAI,CAAC;QAC1C,SAAS,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG,IAAI,CAAC;QACxD,OAAO,SAAS,CAAC;IACnB,CAAC;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,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC;YACnD,sBAAsB,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM;YAC3C,oBAAoB,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI;SACxC,CAAC;IACJ,CAAC;IAED,SAAS;QACP,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK;YAC1B,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;YACxC,CAAC,CAAC,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;IACJ,CAAC;IAED,iBAAiB;QACf,OAAO;YACL,gBAAgB,EAAE,IAAI,CAAC,WAAW;YAClC,kBAAkB,EAAE,IAAI,CAAC,YAAY;YACrC,eAAe,EAAE,IAAI,CAAC,UAAU;SACjC,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE;YACnC,0DAAG,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;gBAC7C,8DAAa,CACX,CACC,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, Prop, h, Element, Watch, State } from '@stencil/core';\n\n@Component({\n tag: 'cura-label',\n styleUrl: 'cura-label.scss',\n shadow: true,\n})\nexport class CuraLabel {\n\n /*\n Set size of body text.\n * Values: medium (default) \| large \| small \| xsmall.\n /\n @Prop({reflect: true}) size: 'medium' \| 'large' \| 'small' \| 'xsmall' \| string = 'medium';\n\n /\n Label 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 = '0';\n\n /\n CSS line-height property values.\n * Default to 140%\n /\n @Prop({reflect: true}) lineHeight = '125%';\n\n /\n Host element <cura-label>\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 sizeclass = {};\n sizeclass[this.size.toLowerCase()] = true;\n sizeclass[`${this.weight.toLowerCase()}-weight`] = true;\n return sizeclass;\n }\n\n setFontProperties() {\n this.weights = this.theme.fonts.getWeights();\n this.fontSizeBase = this.theme.fonts.getSize();\n this.styles = {\n '--font-family': this.theme.fonts.getFamily('body'),\n '--font-weight-medium': this.weights.medium,\n '--font-weight-bold': this.weights.bold\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 hostCSSProperties() {\n return {\n '--margin-block': this.marginBlock,\n '--font-size-base': this.fontSizeBase,\n '--line-height': this.lineHeight\n };\n }\n\n render() {\n return (\n <Host style={this.hostCSSProperties()}>\n <p style={this.styles} class={this.getClasses()}>\n <slot></slot>\n </p>\n </Host>\n );\n }\n\n}\n"]}

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

@@ -120,7 +120,7 @@ export class CuraRadio {
         return statusColors[this.status][type];
     }
     render() {
-        return (h(Host, { key: 'cd50b6a8c2b43e7ddfc44c2a2d634118e8c8180c' }, h("div", { key: '0ab58b0b1e0561cfbe5801167873d3f1f6b8b48d', class: this.getClasses(), style: this.styles }, h("div", { key: '24399f088f99dd08696b8421140c64765b7ae82f', class: "info" }, h("div", { key: '5fa201595808fd9aede224943fd37cfe8972b51e', class: "label-wrapper" }, h("cura-label", { key: '58f5d8d6f176a1519458c30fbbf0f11bc11b72c1', class: "label", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: 'ce96f49de0925ca3739640acadd25bb8d9fbbd26', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: 'b2188df747035a27bae0ad5206ac48ef31320268', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '215226214804fe80e0b049224a590411ddd1f01e' }))), h("input", { key: 'd3fc5b35a27e44f9d8e5f5ab9f9c348ef7bc8bb9', 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: '47a86162a780f9bfc554ab0f39e20e2f1e01a9d9' }, h("div", { key: 'a0f2860ed3ff500bfc100c1e546da8ced421b207', class: this.getClasses(), style: this.styles }, h("div", { key: '9191f64704f6c1d791922464a75e00afa0cdcb7e', class: "info" }, h("div", { key: 'c61a9ba353b49db897c27f6356bfe3d76651b186', class: "label-wrapper" }, h("cura-label", { key: 'aa942db786a175452697b17229dc05e9113e8097', class: "label", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: 'aed6a56437cc00fb7050043ce0a89877770acc6c', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: '4b489038012fcf112d89d5cdcce46e55b363eca0', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: 'edff8c3ddc4875017dc7e9342fe3c9e19bdb86dc' }))), h("input", { key: '43d5c937fbaa9139abaa3c1c8b5534a39fa4017c', 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 is() { return "cura-radio"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/cura-select/cura-select.js CHANGED Viewed

@@ -264,13 +264,13 @@ export class CuraSelect {
         return (h("cura-icon", { class: 'feedback-icon', name: icon, iconset: 'default', size: this.size === 'large' ? 20 : 16, color: this.getColor('icon'), style: this.styles }));
     }
     render() {
-        return (h(Host, { key: '3c3decc50564c121ed3d3f6ebbdb3cceb598d43a', style: this.styles }, h("div", { key: '2705f712b9691954baa75a9c634c93ccebee0740', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (h("cura-label", { key: '3344e10727cf46fdbd9808577753d89b03ea8ffa', class: 'label', weight: 'bold', size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && h("span", { key: 'a7711d139f6624d8a4edf31aa508bcf6151c7628', class: 'required' }, "* "))), h("div", { key: '831a81c1eff493bd3ae4939b2d0f2615f147b03e', class: {
+        return (h(Host, { key: 'bc202c6de926da5642421b91b1f38abfda496c83', style: this.styles }, h("div", { key: 'e80bc20071f9ba3c2e385d5c87c1ef6ffd5d9bd9', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (h("cura-label", { key: 'e090559a5ed7d0c6cdb9603e6b715dbfa54d383e', class: 'label', weight: 'bold', size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && h("span", { key: 'da3b3a38328a81b4c7d43cedf392f6a35ca5cad5', class: 'required' }, "* "))), h("div", { key: '48e6d57d80b140d8dd51dd079c0ce7f39d7a9a96', class: {
                 'cura-input-field': true,
                 'open': this.isOpen
-            } }, this.renderIcon(), h("input", { key: '7b60d8d8dacbc48078db6be44a9dd3940467cb28', type: "text", autocomplete: 'off', onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyNavigation, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error'), onInput: this.handleInputChange, style: this.styles, placeholder: this.placeholder, disabled: this.disabled, required: this.required, value: this.textInput }), h("cura-icon", { key: '77767f52fb9a546ee46ebc13ede2c5cf72f7f716', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: 'default' })), h("cura-label", { key: 'a3f3457d0afb0bc100c914a73ba95a67fa9c6c49', class: "helper-text", size: 'xsmall', color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, h("slot", { key: 'e9756f0c73ccbabd67c13388f0838c5cbd4fc6d1' })), this.isOpen && (h("div", { key: '699f71716a21d6bfa97036cd38a87c9266567234', class: {
+            } }, this.renderIcon(), h("input", { key: 'd9c1fc1d7cd068aa4f52f002924f7caaa11c099b', type: "text", autocomplete: 'off', onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyNavigation, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error'), onInput: this.handleInputChange, style: this.styles, placeholder: this.placeholder, disabled: this.disabled, required: this.required, value: this.textInput }), h("cura-icon", { key: '3099bd0ffc0f758e39815db70f7c79c55d97190e', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: 'default' })), h("cura-label", { key: 'e82da158d25d0cad7102d5ed13698f0f741cd6ea', class: "helper-text", size: 'xsmall', color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, h("slot", { key: '71ab712009bc6a61f189da5a082330eed9e89d33' })), this.isOpen && (h("div", { key: '4a6f38f3798ea894936554c0b4191b45dc5172eb', class: {
                 'menu': true,
                 'open': this.isOpen
-            } }, h("slot", { key: 'dc338221fb3660195c4fa1a933baeb30ad6f4b2e', name: 'option' }))))));
+            } }, h("slot", { key: '8db3420024df6aa85f0e8265c6f88c9bb4a8811f', name: 'option' }))))));
     }
     static get is() { return "cura-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/cura-select-options/cura-select-option.js CHANGED Viewed

@@ -33,7 +33,7 @@ export class CuraSelectOption {
         };
     }
     render() {
-        return (h(Host, { key: '231c03411af0a5639358ff232e4a81287a8571f0', slot: "option" }, h("div", { key: 'b5baa8f7c4a4e863b96ffda1454a8c339d4b2656', class: this.getClasses(), style: this.styles }, h("cura-label", { key: '36d3381260263303242c443004f7e201c2683d4e', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, h("slot", { key: 'cc72fed8c51592c8fd076d091272879c7572a181' })), this.selected && h("cura-icon", { key: 'e118108f84d49b3d6574a143f09b2c43d43d11a8', name: 'check', size: this.getSize('icon'), color: "primary-base" }))));
+        return (h(Host, { key: '5feb573684784f2cf70876ccc1bb673b853d69b4', slot: "option" }, h("div", { key: '03c65c64facc97c887c19f2226dfc5f1830004e1', class: this.getClasses(), style: this.styles }, h("cura-label", { key: '79f32d2bcc3ec42c8adb581fb8c4151920d55111', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, h("slot", { key: '0df731f7223fac86e58676597c052caadd1d2858' })), this.selected && h("cura-icon", { key: '28d4f9561a60bf9ecfeca44e4835b46ffee28ec1', name: 'check', size: this.getSize('icon'), color: "primary-base" }))));
     }
     static get is() { return "cura-select-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/cura-switch/cura-switch.js CHANGED Viewed

@@ -92,7 +92,7 @@ export class CuraSwitch {
         return classes;
     }
     render() {
-        return (h(Host, { key: '2ccbfc3c5aae5ec8be3f879541b7cbcf203b62a9' }, h("div", { key: '2acacb0bab31f8736155dc764a6e3d57508f7a48', class: this.getClasses(), style: this.styles }, h("div", { key: '16c7cfedbd029d4e481cb2c3268690d594962ff3', class: "info" }, h("cura-label", { key: '24ed0fd9a9c0ebacc52407319b16a202f2defc96', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, class: "label", weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', lineHeight: "125%", color: this.assignColor('neutral-white', 'neutral-black') }, this.label), h("cura-label", { key: '4a84fb18a2fd43c623cb9aa9e9573482a22f6372', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, h("slot", { key: '0ec0427dee691d224daa58db943c07d906d08dd0' }))), h("div", { key: '5b4a04200b4880474b693e605ba3e8671a3bd980', onClick: this.toggleSwitch, class: "control" }, h("div", { key: '2e3e764a87d57edc520f9d56b980d80d455d8d74', class: `track ${this.size.toLowerCase()}` }, h("div", { key: '36b9da57ea3b95e419d7bb0b5ad4f24d7acd1b63', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
+        return (h(Host, { key: 'a18d2e4516e63c9dc080fabb97ded6cb145f096f' }, h("div", { key: 'e6cfb0bada406eef4b6dc400eae2cc8e15ff209b', class: this.getClasses(), style: this.styles }, h("div", { key: '520489765d61a4c96079cc51395c9a7038c1ec12', class: "info" }, h("cura-label", { key: '3b064a7794c262d62e4d8e04475ca20d87febc7b', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, class: "label", weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', lineHeight: "125%", color: this.assignColor('neutral-white', 'neutral-black') }, this.label), h("cura-label", { key: 'b94ac8cf1fd1e3ba0dce269b677636f09bc97597', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, h("slot", { key: '437f81a5bde1395d97c346928191c8ab0ce7219d' }))), h("div", { key: '3e36e82138a69c5f829f54ec82af0646fdea4fbb', onClick: this.toggleSwitch, class: "control" }, h("div", { key: '7068b0664ebb020037d63df565e5c835b7a4fa46', class: `track ${this.size.toLowerCase()}` }, h("div", { key: '6ce66dfe5d06bdfdb625b38b0e0adb20df7db130', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
     }
     static get is() { return "cura-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/loaders/cura-loader-bar/cura-loader-bar.js CHANGED Viewed

@@ -16,7 +16,7 @@ export class CuraLoaderBar {
         this.setProgress();
     }
     render() {
-        return (h(Host, { key: 'fbd3b560f2c5bc00e729300e3f2afa09690cabc8' }, h("div", { key: '0a728618223b33796b63768a543580b5d30e0115', id: "progress-bar", class: "progress-bar", style: this.styles }, h("span", { key: '06230a2ddf4bea3bef96a09814f3e0da9dde31a3', class: "progress-bar-fill" }))));
+        return (h(Host, { key: 'e8c5cf2c47e5b8a1a3e0ea758df9a5183b94afbe' }, h("div", { key: '4375509425a0f7f8a86ded54c792f04d8b34d004', id: "progress-bar", class: "progress-bar", style: this.styles }, h("span", { key: '2d78b8f09726918cb01ef2ba775cf061f8b1fbab', 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/collection/components/loaders/cura-loader-circle/cura-loader-circle.js CHANGED Viewed

@@ -19,7 +19,7 @@ export class CuraLoaderCircle {
         };
     }
     render() {
-        return (h(Host, { key: 'dd0c9e5b82f8f3b41511d31333af00e46435e9db', style: this.getStyles() }, h("svg", { key: '2a6a1edab6501c7788bebed93bbc87143d10fbaf', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '8dd113e23ffc4f5df091738a878eee76e030c904' }, h("circle", { key: 'a6e06aad2260ffb8cec65aed59ef8f09459765a1', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), h("path", { key: '88ac6f03cac1030593e06e6062d8d9947474aa62', 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: '6bae1e73907f3f8a17560ef055290c4ac41959e7' }, h("linearGradient", { key: 'c2510effd844984927f4b32fbb7f770ebcb09a3c', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '477e90e9eadf1385a8b897917886e1fe352c41d0' }), h("stop", { key: '135e22c3a11916fa1ce4bc5870774ecf37512e6f', offset: "1" }))))));
+        return (h(Host, { key: '4c3a12d61a3b686438ece6752160337ca8cacf18', style: this.getStyles() }, h("svg", { key: 'bf8d817e7624419514e8f918ade94024c0d6bcb9', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '69885675868e25d75e9b0a461cb6563ba32a317a' }, h("circle", { key: 'a1b20469b5bb76d101cfbba683f99689b2a8b8ed', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), h("path", { key: 'c74b6313eff3374f711ace4c638fa0e671325f12', 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: '5f5861e8cdf8f192cd3312c345b0c3f2afeeb0c2' }, h("linearGradient", { key: '98826d4d31d454e8d013349003bc89c3b82118bd', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'c0e582f71ef1a6870d0f77047198f58bf18987f6' }), h("stop", { key: '3f120a0b8e9c86388f084d34e4bda9f8c5893702', offset: "1" }))))));
     }
     static get is() { return "cura-loader-circle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text/cura-display/cura-display.css CHANGED Viewed

@@ -36,16 +36,28 @@
   margin-block: var(--margin-block);
   letter-spacing: 0px;
 }
+:host h1.small, :host h2.small, :host h3.small, :host h4.small, :host h5.small, :host h6.small {
+  font-size: 2.2857142857em;
+  letter-spacing: -1.68px;
+}
 @media (min-width: 769px) and (max-width: 1920px) {
   :host h1, :host h2, :host h3, :host h4, :host h5, :host h6 {
     font-size: 3.429em;
   }
+  :host h1.small, :host h2.small, :host h3.small, :host h4.small, :host h5.small, :host h6.small {
+    font-size: 2.8571428571em;
+    letter-spacing: -1.92px;
+  }
 }
 @media (min-width: 1921px) {
   :host h1, :host h2, :host h3, :host h4, :host h5, :host h6 {
     font-size: 4.286em;
     line-height: calc(var(--line-height) + 5%);
   }
+  :host h1.small, :host h2.small, :host h3.small, :host h4.small, :host h5.small, :host h6.small {
+    font-size: 3.5714285714em;
+    letter-spacing: -1.2px;
+  }
 }
 :host ::slotted(b), :host ::slotted(strong) {
   font-weight: var(--font-weight-bold);
@@ -59,6 +71,10 @@
 :host ::slotted(u) {
   text-underline-offset: 10%;
 }
+:host ::slotted(i), :host ::slotted(em) {
+  font-style: italic;
+  font-weight: var(--font-weight-medium);
+}
 :host ::slotted(abbr) {
   color: var(--color-link);
   text-decoration: underline dashed 1px var(--color-link);

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

@@ -3,6 +3,7 @@ export class CuraDisplay {
     constructor() {
         this.theme = window.CuraAPI.theme;
         this.level = 1;
+        this.size = 'large';
         this.spotColor = 'accent-dark';
         this.color = undefined;
         this.marginBlock = '1.25em';
@@ -22,7 +23,8 @@ export class CuraDisplay {
         this.styles = {
             '--font-family': window.CuraAPI.theme.fonts.getFamily('display'),
             '--font-size': window.CuraAPI.theme.fonts.getSize(),
-            '--font-weight-bold': this.weights.bold
+            '--font-weight-bold': this.weights.bold,
+            '--font-weight-medium': this.weights.medium
         };
     }
     hostCSSProperties() {
@@ -38,20 +40,27 @@ export class CuraDisplay {
             : 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}`) });
     }
+    getClasses() {
+        var _a;
+        const classes = {};
+        classes[`${(_a = this.size) === null || _a === void 0 ? void 0 : _a.toLowerCase()}`] = true;
+        return classes;
+    }
     getHeadingTag() {
+        const classes = this.getClasses();
         const tags = {
-            '1': h("h1", { style: this.styles }, h("slot", null)),
-            '2': h("h2", { style: this.styles }, h("slot", null)),
-            '3': h("h3", { style: this.styles }, h("slot", null)),
-            '4': h("h4", { style: this.styles }, h("slot", null)),
-            '5': h("h5", { style: this.styles }, h("slot", null)),
-            '6': h("h6", { style: this.styles }, h("slot", null)),
-            'default': h("h1", { style: this.styles }, h("slot", null))
+            '1': h("h1", { style: this.styles, class: classes }, h("slot", null)),
+            '2': h("h2", { style: this.styles, class: classes }, h("slot", null)),
+            '3': h("h3", { style: this.styles, class: classes }, h("slot", null)),
+            '4': h("h4", { style: this.styles, class: classes }, h("slot", null)),
+            '5': h("h5", { style: this.styles, class: classes }, h("slot", null)),
+            '6': h("h6", { style: this.styles, class: classes }, h("slot", null)),
+            'default': h("h1", { style: this.styles, class: classes }, h("slot", null))
         };
         return tags[`${this.level}`] || tags['default'];
     }
     render() {
-        return (h(Host, { key: '89df8c001192a7526e6976d9b43099562d65809d', style: this.hostCSSProperties() }, this.getHeadingTag()));
+        return (h(Host, { key: 'ffd8e58f9bf50038554591ec2b191e0488ae0500', style: this.hostCSSProperties() }, this.getHeadingTag()));
     }
     static get is() { return "cura-display"; }
     static get encapsulation() { return "shadow"; }
@@ -85,6 +94,24 @@ export class CuraDisplay {
                 "reflect": true,
                 "defaultValue": "1"
             },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'large' | 'small'",
+                    "resolved": "\"large\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display size.\nValues: 'large' (default) | 'small'."
+                },
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "'large'"
+            },
             "spotColor": {
                 "type": "string",
                 "mutable": false,
@@ -100,7 +127,7 @@ export class CuraDisplay {
                     "text": "Apply design system color to interactive elements like <a> and <abbr> inside the text.\nValues: Color from design system scheme. Default to 'accent-dark'."
                 },
                 "attribute": "spot-color",
-                "reflect": true,
+                "reflect": false,
                 "defaultValue": "'accent-dark'"
             },
             "color": {