@rededor/cura 1.6.0-alpha.4 → 1.6.0

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

@@ -16,7 +16,7 @@ export class CuraLoaderBar {
         this.setProgress();
     }
     render() {
-        return (h(Host, { key: '282ee3653b83cbf7e34920c62ee6a00d22add8d0' }, h("div", { key: '2a5c70d038d6b362ac9d24e60de2ccb68221f7e3', id: "progress-bar", class: "progress-bar", style: this.styles }, h("span", { key: 'b10c55dda03fe7c92cf1aec1432a6338c04f2e3d', class: "progress-bar-fill" }))));
+        return (h(Host, { key: '1998824d6b116e2c4333b347476cfee523095f94' }, h("div", { key: '2c97c04b18b84edabfe603cb98f81330a7b21a68', id: "progress-bar", class: "progress-bar", style: this.styles }, h("span", { key: '7cca25e41f5d310123e9a07dff37f83edb5bdc62', 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

@@ -19,7 +19,7 @@ export class CuraLoaderCircle {
         };
     }
     render() {
-        return (h(Host, { key: '269527f065adf8cd35d6bbe6109e117f26c5e02c', style: this.getStyles() }, h("svg", { key: '4541cd3ee1003f93e7ea83e6cbdc9effcd5ef61b', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '64939f37a9dd55e9431cd0848f561f346f43be87' }, h("circle", { key: 'a7202aa4be9776b2f035dab40922a346d7284f19', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), h("path", { key: '490f083e9fe14ca62a8f8b530973d981098f2cef', 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: '94af0657b89a161ac617957b0ae24d53872b1139' }, h("linearGradient", { key: '29406a4830366edc3a945be2c31096eebaa70e48', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '356c8c0347b272e6cee5c47191b2381d08346b66' }), h("stop", { key: '02fa4f0ed3d994ca274bc9175da6f3e7a4246b2d', offset: "1" }))))));
+        return (h(Host, { key: '32dd500d10e563701364bb6670a40ac9ccd0c2a6', style: this.getStyles() }, h("svg", { key: '68c958972419a1f93009f2ea09cc957e6ca5ec82', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '16c8878c324b2eebf8c28d61c7fcf372ab348d60' }, h("circle", { key: 'c26fade05ef6ec1861e14b6831b31922be12bc05', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), h("path", { key: 'd7880ecb0164a214fbcabed606265bd3c349e858', 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: '4483e24d036775acdeba084ea8c6f2f18589ef3b' }, h("linearGradient", { key: '3d629d00197dabe1fae8b02ebe521c0fa1c248d3', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'd4df4cdb7d37a6d455b008488bc6a826f95708d3' }), h("stop", { key: 'b79b8bf6ad212ebd6bae7fad917984e64aded96e', offset: "1" }))))));
     }
     static get is() { return "cura-loader-circle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -60,7 +60,7 @@ export class CuraDisplay {
         return tags[`${this.level}`] || tags['default'];
     }
     render() {
-        return (h(Host, { key: '7e0a43f434bce1797cebbe4d6d2565e64d64bab7', style: this.hostCSSProperties() }, this.getHeadingTag()));
+        return (h(Host, { key: '4cd3f3b8491d02da7e1be104ebf23c8c21b013fd', style: this.hostCSSProperties() }, this.getHeadingTag()));
     }
     static get is() { return "cura-display"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text/cura-heading/cura-heading.css

@@ -66,6 +66,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
+  display: block;
 }
 :host h1 ::slotted(b), :host h1 ::slotted(strong), :host h2 ::slotted(b), :host h2 ::slotted(strong), :host h3 ::slotted(b), :host h3 ::slotted(strong), :host h4 ::slotted(b), :host h4 ::slotted(strong), :host h5 ::slotted(b), :host h5 ::slotted(strong), :host h6 ::slotted(b), :host h6 ::slotted(strong) {
   font-weight: var(--font-weight-medium);

package/dist/collection/components/text/cura-heading/cura-heading.js

@@ -59,7 +59,7 @@ export class CuraHeading {
         return tags[`${this.level}`] || tags['default'];
     }
     render() {
-        return (h(Host, { key: '16917fae239920b3a22f98cebe744b6195865980', style: this.hostCSSProperties() }, this.getHeadingTag()));
+        return (h(Host, { key: 'e79594795b4b4f7ba5402556d70ab39677da948e', style: this.hostCSSProperties() }, this.getHeadingTag()));
     }
     static get is() { return "cura-heading"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text/cura-paragraph/cura-paragraph.css

@@ -30,6 +30,7 @@
 :host {
   display: block;
   font-size: var(--font-size-base);
+  min-width: 0;
 }
 :host p {
   font-family: var(--font-family);
@@ -39,6 +40,7 @@
   line-height: var(--line-height);
   margin-block: var(--margin-block);
   letter-spacing: 0.28px;
+  width: 100%;
 }
 :host p.large {
   font-size: 1.214em;
@@ -59,6 +61,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
+  display: block;
 }
 :host p ::slotted(b), :host p ::slotted(strong) {
   font-weight: var(--font-weight-bold);

package/dist/collection/components/text/cura-paragraph/cura-paragraph.js

@@ -43,7 +43,7 @@ export class CuraParagraph {
         return classes;
     }
     render() {
-        return (h(Host, { key: '7b1bc13afe5749f31574986ac91b497aa7ff2c71', style: this.hostCSSProperties() }, h("p", { key: '3614b36c4cd1dadde454b67312dc694fd0063d79', style: this.styles, class: this.getClasses() }, h("slot", { key: '7dae91cae891902a729cd1270799ff911289d505' }))));
+        return (h(Host, { key: '82a00d925fb71039df0ae6f2e3a5d9cca5303088', style: this.hostCSSProperties() }, h("p", { key: 'f4254d6492ffcd18f5f8fe1c50337b57e70124b7', style: this.styles, class: this.getClasses() }, h("slot", { key: 'a1fde2f7ce4185535c204e06883ce3588e6023c8' }))));
     }
     static get is() { return "cura-paragraph"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/cura-display.js

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

package/dist/components/cura-dropdown-search-category.js.map

@@ -1 +1 @@
-{"file":"cura-dropdown-search-category.js","mappings":";;;AAAA,MAAM,6BAA6B,GAAG,mdAAmd,CAAC;AAC1f,yCAAe,6BAA6B;;MCM/BA,4BAA0B;IALvC;;;;QAOE,WAAM,GAAG,EAAE,CAAC;QACZ,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;KAmB9B;IAjBC,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG;YACZ,iBAAiB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC;SAC/D,CAAC;KACH;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IACjD,qEAAc,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,EAAC,WAAW,EAAC,GAAG,EAAC,UAAU,EAAC,KAAK,IAC7F,8DAAa,CACA,CACX,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraDropdownSearchCategory"],"sources":["src/components/cura-dropdown-search-new/cura-dropdown-search-category/cura-dropdown-search-category.scss?tag=cura-dropdown-search-category&encapsulation=shadow","src/components/cura-dropdown-search-new/cura-dropdown-search-category/cura-dropdown-search-category.tsx"],"sourcesContent":["@import '../../../scss/mixins/spacing.scss';\n@import '../../../scss/mixins/dropdown-search-options.scss';\n\n:host {\n  @include host-component();\n\n  .component-container {\n    @include component-container() {\n      padding: #{$spacing-xxxs} 0;\n    };\n  }\n}\n\n:host(:last-child) {\n  @include host-last-child();\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-dropdown-search-category',\n  styleUrl: 'cura-dropdown-search-category.scss',\n  shadow: true,\n})\nexport class CuraDropdownSearchCategory {\n\n  styles = {};\n  theme = window.CuraAPI.theme;\n\n  connectedCallback() {\n    this.styles = {\n      '--neutral-light': this.theme.colors.getColor('neutral-light')\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"component-container\" style={this.styles}>\n          <cura-heading size='xsmall' weight='bold' color='neutral-dark' marginBlock='0' lineHeight='1em'>\n            <slot></slot>\n          </cura-heading>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"cura-dropdown-search-category.js","mappings":";;;AAAA,MAAM,6BAA6B,GAAG,mdAAmd,CAAC;AAC1f,yCAAe,6BAA6B;;MCM/BA,4BAA0B;IALvC;;;;QAOE,WAAM,GAAG,EAAE,CAAC;QACZ,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;KAmB9B;IAjBC,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG;YACZ,iBAAiB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC;SAC/D,CAAC;KACH;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IACjD,qEAAc,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,EAAC,WAAW,EAAC,GAAG,EAAC,UAAU,EAAC,KAAK,IAC7F,8DAAa,CACA,CACX,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraDropdownSearchCategory"],"sources":["src/components/cura-dropdown-search/cura-dropdown-search-category/cura-dropdown-search-category.scss?tag=cura-dropdown-search-category&encapsulation=shadow","src/components/cura-dropdown-search/cura-dropdown-search-category/cura-dropdown-search-category.tsx"],"sourcesContent":["@import '../../../scss/mixins/spacing.scss';\n@import '../../../scss/mixins/dropdown-search-options.scss';\n\n:host {\n  @include host-component();\n\n  .component-container {\n    @include component-container() {\n      padding: #{$spacing-xxxs} 0;\n    };\n  }\n}\n\n:host(:last-child) {\n  @include host-last-child();\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-dropdown-search-category',\n  styleUrl: 'cura-dropdown-search-category.scss',\n  shadow: true,\n})\nexport class CuraDropdownSearchCategory {\n\n  styles = {};\n  theme = window.CuraAPI.theme;\n\n  connectedCallback() {\n    this.styles = {\n      '--neutral-light': this.theme.colors.getColor('neutral-light')\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"component-container\" style={this.styles}>\n          <cura-heading size='xsmall' weight='bold' color='neutral-dark' marginBlock='0' lineHeight='1em'>\n            <slot></slot>\n          </cura-heading>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/cura-dropdown-search-not-found.js.map

@@ -1 +1 @@
-{"file":"cura-dropdown-search-not-found.js","mappings":";;;AAAA,MAAM,6BAA6B,GAAG,2cAA2c,CAAC;AAClf,yCAAe,6BAA6B;;MCM/BA,4BAA0B;IALvC;;;;;QASE,gBAAW,GAAG,CAAC,EAAS;YACtB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;YACxB,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,EAAE,CAAC,eAAe,EAAE,CAAC;SACtB,CAAA;KAaF;IAXC,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAG,IAAI,CAAC,WAAW,IACzD,qEAAc,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY,IAC1D,8DAAa,CACA,CACX,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraDropdownSearchNotFound"],"sources":["src/components/cura-dropdown-search-new/cura-dropdown-search-not-found/cura-dropdown-search-not-found.scss?tag=cura-dropdown-search-not-found&encapsulation=shadow","src/components/cura-dropdown-search-new/cura-dropdown-search-not-found/cura-dropdown-search-not-found.tsx"],"sourcesContent":["@import '../../../scss/mixins/spacing.scss';\n@import '../../../scss/mixins/dropdown-search-options.scss';\n\n:host {\n  @include host-component();\n\n  .component-container {\n    @include component-container();\n    border-bottom: none;\n    cursor: default;\n\n    cura-heading {\n      --margin-block: 0 !important;\n      flex: 1;\n    }\n  }\n}","import { Component, Host, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'cura-dropdown-search-not-found',\n  styleUrl: 'cura-dropdown-search-not-found.scss',\n  shadow: true,\n})\nexport class CuraDropdownSearchNotFound {\n\n  @Event() actionclick: EventEmitter<any>;\n\n  handleClick = (ev: Event) => {\n    this.actionclick.emit();\n    ev.preventDefault();\n    ev.stopPropagation();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"component-container\" onClick={ this.handleClick }>\n          <cura-heading size=\"xsmall\" weight=\"bold\" color=\"error-dark\">\n            <slot></slot>\n          </cura-heading>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"cura-dropdown-search-not-found.js","mappings":";;;AAAA,MAAM,6BAA6B,GAAG,2cAA2c,CAAC;AAClf,yCAAe,6BAA6B;;MCM/BA,4BAA0B;IALvC;;;;;QASE,gBAAW,GAAG,CAAC,EAAS;YACtB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;YACxB,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,EAAE,CAAC,eAAe,EAAE,CAAC;SACtB,CAAA;KAaF;IAXC,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAG,IAAI,CAAC,WAAW,IACzD,qEAAc,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY,IAC1D,8DAAa,CACA,CACX,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraDropdownSearchNotFound"],"sources":["src/components/cura-dropdown-search/cura-dropdown-search-not-found/cura-dropdown-search-not-found.scss?tag=cura-dropdown-search-not-found&encapsulation=shadow","src/components/cura-dropdown-search/cura-dropdown-search-not-found/cura-dropdown-search-not-found.tsx"],"sourcesContent":["@import '../../../scss/mixins/spacing.scss';\n@import '../../../scss/mixins/dropdown-search-options.scss';\n\n:host {\n  @include host-component();\n\n  .component-container {\n    @include component-container();\n    border-bottom: none;\n    cursor: default;\n\n    cura-heading {\n      --margin-block: 0 !important;\n      flex: 1;\n    }\n  }\n}","import { Component, Host, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'cura-dropdown-search-not-found',\n  styleUrl: 'cura-dropdown-search-not-found.scss',\n  shadow: true,\n})\nexport class CuraDropdownSearchNotFound {\n\n  @Event() actionclick: EventEmitter<any>;\n\n  handleClick = (ev: Event) => {\n    this.actionclick.emit();\n    ev.preventDefault();\n    ev.stopPropagation();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"component-container\" onClick={ this.handleClick }>\n          <cura-heading size=\"xsmall\" weight=\"bold\" color=\"error-dark\">\n            <slot></slot>\n          </cura-heading>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './cura-heading2.js';
 
-const curaDropdownSearchOptionCss = ":host{display:block;box-sizing:border-box;width:100%}:host(:last-of-type) .content-container{border-bottom:none}.option-container{width:100%;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(--cura-spacing-base) * 2px) calc(var(--cura-spacing-base) * 1px);background-color:var(--neutral-purewhite);border-bottom:1px solid var(--neutral-light)}.content-container ::slotted(div[slot=action]){display:flex;justify-content:end}.option-info{width:100%;display:flex;align-items:center;align-content:center;justify-content:center;gap:calc(var(--cura-spacing-base) * 2px);flex-direction:row;box-sizing:border-box;cursor:pointer}.option-info cura-heading{width:100%;margin-block:0px}.option-info ::slotted(div[slot=image]){min-width:calc(var(--cura-spacing-base) * 8px);display:flex;justify-content:center;align-items:center}";
+const curaDropdownSearchOptionCss = ":host{display:block;box-sizing:border-box}:host .component-container{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;min-height:calc(var(--cura-spacing-base) * 10px);padding:0 calc(var(--cura-spacing-base) * 1px);border-bottom:1px solid var(--neutral-light);transition:background-color 0.15s linear}:host .component-container:not(.selected):not(.not-selectable):has(.selectable-container:hover),:host .component-container:not(.selected):not(.not-selectable).highlighted{background-color:var(--neutral-white)}:host .selectable-container{flex:1;display:flex;align-items:center;justify-content:flex-start;padding:calc(var(--cura-spacing-base) * 3px) 0;min-height:calc(var(--cura-spacing-base) * 10px);min-width:0;gap:calc(var(--cura-spacing-base) * 1px);cursor:pointer}:host .selectable-container .content{flex:1;align-items:center;justify-content:flex-end;padding-right:calc(var(--cura-spacing-base) * 1px);min-width:0}:host .selectable-container ::slotted(cura-icon){--color:var(--neutral-dark) !important;margin:0 10px}:host .selectable-container ::slotted(cura-avatar){margin:0 calc(var(--cura-spacing-base) * 1px)}:host .selectable-container ::slotted(cura-heading),:host .selectable-container ::slotted(cura-paragraph){--margin-block:0 !important;--color-spot:var(--primary) !important}:host .selectable-container ::slotted(cura-heading){--color-body:var(--neutral-black) !important}:host .selectable-container ::slotted(cura-paragraph){--color-body:var(--neutral-dark) !important}:host .selected{background-color:var(--primary-lighter-50);border-bottom-color:var(--primary-light)}:host .selected .selectable-container{cursor:default}:host .selected .selectable-container ::slotted(cura-icon){--color:var(--primary) !important}:host .selected .selectable-container ::slotted(cura-heading){--color-body:var(--primary) !important}:host .actions-container{display:flex}:host .actions-container ::slotted(*){padding-left:calc(var(--cura-spacing-base) * 1px)}:host .not-selectable .selectable-container{cursor:default}:host(:last-child) .component-container{border-bottom:none !important}";
 const CuraDropdownSearchOptionStyle0 = curaDropdownSearchOptionCss;
 
 const CuraDropdownSearchOption$1 = /*@__PURE__*/ proxyCustomElement(class CuraDropdownSearchOption extends HTMLElement {
@@ -9,79 +8,68 @@ const CuraDropdownSearchOption$1 = /*@__PURE__*/ proxyCustomElement(class CuraDr
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.optionSelected = createEvent(this, "optionSelected", 7);
-        this.handleOptionClick = (e) => {
-            if (this.selectable) {
-                this.selected = !this.selected;
-                this.optionSelected.emit(this.value);
-                this.updateIconColor();
-            }
-            else {
-                e.preventDefault();
-                e.stopImmediatePropagation();
-            }
-        };
+        this.actionclick = createEvent(this, "actionclick", 7);
+        this.selectoption = createEvent(this, "selectoption", 7);
+        this.styles = {};
+        this.theme = window.CuraAPI.theme;
         this.value = undefined;
-        this.selected = false;
+        this.optionid = undefined;
         this.selectable = true;
-        this.hovered = false;
-        this.styles = {};
+        this.selected = false;
+        this.highlighted = false;
     }
     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`);
-        this.styles['--primary-lighter'] = window.CuraAPI.theme.colors.getColor(`primary-lighter`, 50);
-    }
-    componentDidLoad() {
-        this.updateIconColor();
+        this.styles = {
+            '--neutral-light': this.theme.colors.getColor('neutral-light'),
+            '--neutral-white': this.theme.colors.getColor('neutral-white'),
+            '--neutral-dark': this.theme.colors.getColor('neutral-dark'),
+            '--neutral-black': this.theme.colors.getColor('neutral-black'),
+            '--primary-lighter-50': this.theme.colors.getColor('primary-lighter', .5),
+            '--primary-light': this.theme.colors.getColor('primary-light'),
+            '--primary': this.theme.colors.getColor('primary-base')
+        };
     }
-    updateIconColor() {
-        const iconElement = this.hostElement.querySelector('[slot="image"] cura-icon');
-        if (iconElement) {
-            iconElement.setAttribute('color', this.selected ? 'primary' : 'neutral-dark');
+    handleSelect() {
+        if (this.selectable) {
+            this.selectoption.emit(this.optionid);
+        }
+        else {
+            this.actionclick.emit();
         }
     }
+    handleActionsClick() {
+        this.actionclick.emit();
+    }
+    getClasses() {
+        return {
+            'component-container': true,
+            'selected': this.selected,
+            'highlighted': this.highlighted,
+            'not-selectable': !this.selectable
+        };
+    }
     render() {
-        return (h(Host, { key: '81c4404d784d2038823d84bf2b4beef53a874644', slot: "dropdown-search-option" }, h("div", { key: '476757ab00466607c2ab01a2b5a82da4c45087af', style: this.styles, class: {
-                "option-container": true,
-                hovered: this.selectable ? this.hovered : false,
-                selected: this.selected,
-                disabled: !this.selectable
-            } }, h("div", { key: '2a35edbe88ed99587972e0e657250867cb6ba814', class: "content-container" }, h("div", { key: '5bb136c9c5386d6c40985a86bc7e2e85c239110e', class: "option-info", onClick: (e) => this.handleOptionClick(e) }, h("slot", { key: 'f5ad44434728cb3879819f6016fcf9927354c05f', name: "image" }), h("cura-heading", { key: '43fa2a1c1a206f6bd1b0f52f5bc536cbb98bbe56', size: "xsmall", lineHeight: "16px", marginBlock: "0px", weight: "bold", color: "neutral-black" }, h("slot", { key: '197963392c5cef12d29dfbe312f4359b950de9f3' }))), h("slot", { key: '146144af1e1a5d1a18eb2aceaa71b749a4c61ba6', name: "action" })))));
+        return (h(Host, { key: '6168a95a628d07878f472c310390bf9c45bd5057' }, h("div", { key: '29763282f101a9fbe205c91e7b3c70fa51878e63', class: this.getClasses(), style: this.styles }, h("div", { key: '46bd7a250ad866b984e6f4184aa4800e89b741c9', class: "selectable-container", onClick: () => this.handleSelect() }, h("slot", { key: '77088405f3cc4f077e49a4266fb926348774d9e9', name: 'image' }), h("div", { key: '96baef2af4ffe7c5ec809a5adbd0512120b6c71c', class: "content" }, h("slot", { key: 'e41794e8eaff6bfe1516e88e8591ca915eb7ad3f' }))), h("div", { key: '991bca3b0956519b531d576a1738bc3f200cc73f', class: "actions-container", onClick: () => this.handleActionsClick() }, h("slot", { key: '098e8c29ab48ef8e0cfff2a48a31860eafb62487', name: 'actions' })))));
     }
-    get hostElement() { return this; }
-    static get watchers() { return {
-        "selected": ["updateIconColor"]
-    }; }
     static get style() { return CuraDropdownSearchOptionStyle0; }
 }, [1, "cura-dropdown-search-option", {
-        "value": [513],
-        "selected": [1540],
+        "value": [1],
+        "optionid": [1],
         "selectable": [516],
-        "hovered": [1540],
-        "styles": [32]
-    }, undefined, {
-        "selected": ["updateIconColor"]
+        "selected": [516],
+        "highlighted": [516]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["cura-dropdown-search-option", "cura-heading"];
+    const components = ["cura-dropdown-search-option"];
     components.forEach(tagName => { switch (tagName) {
         case "cura-dropdown-search-option":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, CuraDropdownSearchOption$1);
             }
             break;
-        case "cura-heading":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
     } });
 }
 

package/dist/components/cura-dropdown-search-option.js.map

@@ -1 +1 @@
-{"file":"cura-dropdown-search-option.js","mappings":";;;AAAA,MAAM,2BAA2B,GAAG,8kCAA8kC,CAAC;AACnnC,uCAAe,2BAA2B;;MCM7BA,0BAAwB;;;;;;QAyC3B,sBAAiB,GAAG,CAAC,CAAQ;YACnC,IAAI,IAAI,CAAC,UAAU,EAAE;gBACnB,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;aACxB;iBAAM;gBACL,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,wBAAwB,EAAE,CAAC;aAC9B;SACF,CAAC;;wBAzC0D,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,gBAAgB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;QAC1E,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;KAChG;IAaD,gBAAgB;QACd,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAGO,eAAe;QACrB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;QAC/E,IAAI,WAAW,EAAE;YACf,WAAW,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,cAAc,CAAC,CAAC;SAC/E;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,wBAAwB,IACjC,4DACE,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;gBACxB,OAAO,EAAE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,GAAG,KAAK;gBAC/C,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,QAAQ,EAAE,CAAC,IAAI,CAAC,UAAU;aAC3B,IACD,4DAAK,KAAK,EAAC,mBAAmB,IAC5B,4DAAK,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAChE,6DAAM,IAAI,EAAC,OAAO,GAAQ,EAC1B,qEAAc,IAAI,EAAC,QAAQ,EAAC,UAAU,EAAC,MAAM,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe,IACjG,8DAAa,CACA,CACX,EACN,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraDropdownSearchOption"],"sources":["src/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.scss?tag=cura-dropdown-search-option&encapsulation=shadow","src/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.tsx"],"sourcesContent":["@import \"../../../../scss/mixins/spacing.scss\";\n\n:host {\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n}\n\n:host(:last-of-type) .content-container  {\n  border-bottom: none;\n}\n\n.option-container {\n  width: 100%;\n  display: flex;\n\n  &:hover:not(.disabled):not(.selected) .content-container {\n    background-color: var(--neutral-white);\n  }\n\n  &.selected .content-container {\n    background-color: var(--primary-lighter);\n  }\n\n  &.disabled {\n    cursor: default;\n  }\n}\n\n.content-container {\n  display: flex;\n  width: 100%;\n  box-sizing: border-box;\n  padding: #{$spacing-mini} #{$spacing-tiny};\n  background-color: var(--neutral-purewhite);\n  border-bottom: 1px solid var(--neutral-light);\n\n  ::slotted(div[slot='action']) {\n    display: flex;\n    justify-content: end;\n  }\n}\n\n.option-info {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  align-content: center;\n  justify-content: center;\n  gap: #{$spacing-mini};\n  flex-direction: row;\n  box-sizing: border-box;\n  cursor: pointer;\n\n  cura-heading {\n    width: 100%;\n    margin-block: 0px;\n  }\n\n  ::slotted(div[slot='image']) {\n    min-width: #{$spacing-m};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n}\n","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"],"version":3}
+{"file":"cura-dropdown-search-option.js","mappings":";;AAAA,MAAM,2BAA2B,GAAG,koEAAkoE,CAAC;AACvqE,uCAAe,2BAA2B;;MCM7BA,0BAAwB;;;;;;;QAiCnC,WAAM,GAAG,EAAE,CAAC;QACZ,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;;;0BAlBgB,IAAI;wBAMN,KAAK;2BAMF,KAAK;;IAQnD,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG;YACZ,iBAAiB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC;YAC9D,iBAAiB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC;YAC9D,gBAAgB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC;YAC5D,iBAAiB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC;YAC9D,sBAAsB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,iBAAiB,EAAE,EAAE,CAAC;YACzE,iBAAiB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC;YAC9D,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC;SACxD,CAAC;KACH;IAED,YAAY;QACV,IAAI,IAAI,CAAC,UAAU,EAAG;YACpB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACvC;aAAM;YACL,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;SACzB;KACF;IAED,kBAAkB;QAChB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;KACzB;IAED,UAAU;QACR,OAAO;YACL,qBAAqB,EAAE,IAAI;YAC3B,UAAU,EAAE,IAAI,CAAC,QAAQ;YACzB,aAAa,EAAE,IAAI,CAAC,WAAW;YAC/B,gBAAgB,EAAE,CAAC,IAAI,CAAC,UAAU;SACnC,CAAA;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,IAC/C,4DAAK,KAAK,EAAC,sBAAsB,EAAC,OAAO,EAAG,MAAM,IAAI,CAAC,YAAY,EAAE,IACnE,6DAAM,IAAI,EAAC,OAAO,GAAQ,EAC1B,4DAAK,KAAK,EAAC,SAAS,IAClB,8DAAa,CACT,CACF,EACN,4DAAK,KAAK,EAAC,mBAAmB,EAAC,OAAO,EAAG,MAAM,IAAI,CAAC,kBAAkB,EAAE,IACtE,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraDropdownSearchOption"],"sources":["src/components/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.scss?tag=cura-dropdown-search-option&encapsulation=shadow","src/components/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.tsx"],"sourcesContent":["@import '../../../scss/mixins/spacing.scss';\n@import '../../../scss/mixins/dropdown-search-options.scss';\n\n:host {\n  @include host-component();\n\n  .component-container {\n    @include component-container();\n    transition: background-color .15s linear;\n  }\n\n  .component-container:not(.selected):not(.not-selectable):has(.selectable-container:hover),\n  .component-container:not(.selected):not(.not-selectable).highlighted {\n    background-color: var(--neutral-white);\n  }\n\n  .selectable-container {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    padding: #{$spacing-xxxs} 0;\n    min-height: #{$spacing-l};\n    min-width: 0;\n    gap: #{$spacing-tiny};\n    cursor: pointer;\n\n    .content {\n      flex: 1;\n      align-items: center;\n      justify-content: flex-end;\n      padding-right: #{$spacing-tiny};\n      min-width: 0;\n    }\n\n    ::slotted(cura-icon) {\n      --color: var(--neutral-dark) !important;\n      margin: 0 10px;\n    }\n    ::slotted(cura-avatar) {\n      margin: 0 #{$spacing-tiny};\n    }\n    ::slotted(cura-heading),\n    ::slotted(cura-paragraph) {\n      --margin-block: 0 !important;\n      --color-spot: var(--primary) !important;\n    }\n    ::slotted(cura-heading) {\n      --color-body: var(--neutral-black) !important;\n    }\n    ::slotted(cura-paragraph) {\n      --color-body: var(--neutral-dark) !important;\n    }\n  }\n\n  .selected {\n    background-color: var(--primary-lighter-50);\n    border-bottom-color: var(--primary-light);\n\n    .selectable-container {\n      cursor: default;\n\n      ::slotted(cura-icon) {\n        --color: var(--primary) !important;\n      }\n      ::slotted(cura-heading) {\n        --color-body: var(--primary) !important;\n      }\n    }\n  }\n\n  .actions-container {\n    display: flex;\n\n    ::slotted(*) {\n      padding-left: #{$spacing-tiny};\n    }\n  }\n\n  .not-selectable {\n    .selectable-container {\n      cursor: default;\n    }\n  }\n}\n\n:host(:last-child) {\n  @include host-last-child();\n}\n","import { Component, Host, h, Prop, Event, EventEmitter } 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  /**\n   * Required. The value for item term reference.\n   * This will set the value of the seaarch field when the option is selected.\n   */\n  @Prop() value!: string;\n  /**\n   * Required. The unique identifier for the option.\n   * This will reference the option element for the parent.\n   */\n  @Prop() optionid!: string;\n  /**\n   * Enable selection for this option.\n   * Default is true.\n   */\n  @Prop({reflect: true}) selectable: boolean = true;\n  /**\n   * Selected state.\n   * This will be managed by the parent component.\n   * Default is false.\n   */\n  @Prop({reflect: true}) selected: boolean = false;\n  /**\n   * Highlighted state.\n   * This will be managed by the parent component.\n   * Default is false.\n   */\n  @Prop({reflect: true}) highlighted: boolean = false;\n\n  @Event() actionclick: EventEmitter<any>;\n  @Event() selectoption: EventEmitter<string>;\n\n  styles = {};\n  theme = window.CuraAPI.theme;\n\n  connectedCallback() {\n    this.styles = {\n      '--neutral-light': this.theme.colors.getColor('neutral-light'),\n      '--neutral-white': this.theme.colors.getColor('neutral-white'),\n      '--neutral-dark': this.theme.colors.getColor('neutral-dark'),\n      '--neutral-black': this.theme.colors.getColor('neutral-black'),\n      '--primary-lighter-50': this.theme.colors.getColor('primary-lighter', .5),\n      '--primary-light': this.theme.colors.getColor('primary-light'),\n      '--primary': this.theme.colors.getColor('primary-base')\n    };\n  }\n\n  handleSelect() {\n    if( this.selectable ) {\n      this.selectoption.emit(this.optionid);\n    } else {\n      this.actionclick.emit();\n    }\n  }\n\n  handleActionsClick() {\n    this.actionclick.emit();\n  }\n\n  getClasses() {\n    return {\n      'component-container': true,\n      'selected': this.selected,\n      'highlighted': this.highlighted,\n      'not-selectable': !this.selectable\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getClasses()} style={this.styles}>\n          <div class=\"selectable-container\" onClick={ () => this.handleSelect() }>\n            <slot name='image'></slot>\n            <div class=\"content\">\n              <slot></slot>\n            </div>\n          </div>\n          <div class=\"actions-container\" onClick={ () => this.handleActionsClick() }>\n            <slot name='actions'></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}