@rededor/cura 1.0.0-alpha.1 → 1.0.0-alpha.3

package/dist/types/components/cura-toast/cura-toast.stories.d.ts

@@ -0,0 +1,119 @@
+declare const _default: {
+    title: string;
+    tags: string[];
+    render: ({ ...args }: {
+        [x: string]: any;
+    }) => string;
+    argTypes: {
+        label: {
+            control: string;
+            description: string;
+            table: {
+                category: string;
+            };
+            name: string;
+        };
+        type: {
+            control: {
+                type: string;
+            };
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            name: string;
+        };
+        position: {
+            control: {
+                type: string;
+            };
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            name: string;
+        };
+        closeButton: {
+            control: string;
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+        };
+        loader: {
+            control: string;
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+        };
+        icon: {
+            control: {
+                type: string;
+            };
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            name: string;
+        };
+        autoCloseDelay: {
+            control: string;
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: number;
+                };
+            };
+        };
+        content: {
+            control: string;
+            description: string;
+            defaultValue: string;
+            table: {
+                category: string;
+            };
+        };
+        actions: {
+            control: string;
+            description: string;
+            defaultValue: string;
+            table: {
+                category: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Toast: {
+    args: {
+        label: string;
+        type: string;
+        position: string;
+        closeButton: boolean;
+        loader: boolean;
+        icon: string;
+        autoCloseDelay: number;
+        content: string;
+        actions: string;
+    };
+};

package/dist/types/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.d.ts

@@ -8,6 +8,10 @@ export declare class CuraDropdownSearchOption {
      * Indicates if the dropdown search option is selected.
      */
     selected: boolean;
+    /**
+     * Indicates if the dropdown search is selectable.
+     */
+    selectable: boolean;
     /**
      * Indicates if the dropdown search option is hovered.
      */

package/dist/types/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.stories.d.ts

@@ -10,6 +10,16 @@ declare const _default: {
                 category: string;
             };
         };
+        selectable: {
+            control: string;
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+        };
         image: {
             control: string;
             description: string;
@@ -37,6 +47,7 @@ export default _default;
 export declare const DropdownSearchOption: {
     args: {
         value: string;
+        selectable: boolean;
         image: string;
         content: string;
         action: string;

package/dist/types/components/forms/cura-dropdown-search/cura-dropdown-search.d.ts

@@ -32,6 +32,11 @@ export declare class CuraDropdownSearch {
      * Custom icon name. Default: search.
      */
     iconName: string;
+    /**
+     * CSS max-height property for dropdown item.
+     * Default to 630px
+     */
+    dropdownMaxHeight: string;
     /**
      * Reference to the host element.
      */
@@ -107,5 +112,8 @@ export declare class CuraDropdownSearch {
         'dropdown-search-list': boolean;
         visible: boolean;
     };
+    hostCSSProperties(): {
+        '--dropdown-max-height': string;
+    };
     render(): any;
 }

package/dist/types/components/forms/cura-dropdown-search/cura-dropdown-search.stories.d.ts

@@ -75,6 +75,17 @@ declare const _default: {
                 category: string;
             };
         };
+        dropdownMaxHeight: {
+            control: string;
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+            name: string;
+        };
         helperText: {
             control: string;
             description: string;
@@ -113,12 +124,20 @@ export declare const DropdownSearch: {
         value: string;
         placeholder: string;
         label: string;
+        dropdownMaxHeight: string;
         helperText: string;
-        options: {
+        options: ({
+            value: string;
+            image: string;
+            content: string;
+            action: string;
+            selectable?: undefined;
+        } | {
             value: string;
             image: string;
             content: string;
             action: string;
-        }[];
+            selectable: boolean;
+        })[];
     };
 };

package/dist/types/components/loaders/cura-loader-bar/cura-loader-bar.d.ts

@@ -0,0 +1,12 @@
+export declare class CuraLoaderBar {
+    host: HTMLElement;
+    color: string;
+    progress: number;
+    styles: {};
+    handleChangeColor(): void;
+    handleProgress(): void;
+    connectedCallback(): void;
+    render(): any;
+    setColor(): void;
+    setProgress(): void;
+}

package/dist/types/components/loaders/cura-loader-bar/cura-loader-bar.stories.d.ts

@@ -0,0 +1,39 @@
+declare const _default: {
+    title: string;
+    tags: string[];
+    render: ({ ...args }: {
+        [x: string]: any;
+    }) => string;
+    argTypes: {
+        color: {
+            control: {
+                type: string;
+            };
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        progress: {
+            control: string;
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: number;
+                };
+            };
+        };
+    };
+};
+export default _default;
+export declare const LoaderBar: {
+    args: {
+        color: string;
+        progress: string;
+    };
+};

package/dist/types/components.d.ts

@@ -455,6 +455,10 @@ export namespace Components {
         "spotColor": string;
     }
     interface CuraDropdownSearch {
+        /**
+          * CSS max-height property for dropdown item. Default to 630px
+         */
+        "dropdownMaxHeight": string;
         /**
           * Custom icon name. Default: search.
          */
@@ -493,6 +497,10 @@ export namespace Components {
           * Indicates if the dropdown search option is hovered.
          */
         "hovered": boolean;
+        /**
+          * Indicates if the dropdown search is selectable.
+         */
+        "selectable": boolean;
         /**
           * Indicates if the dropdown search option is selected.
          */
@@ -658,6 +666,10 @@ export namespace Components {
          */
         "weight": 'regular' | 'bold';
     }
+    interface CuraLoaderBar {
+        "color": string;
+        "progress": number;
+    }
     interface CuraLoaderCircle {
         /**
           * One from color scheme. Default: neutral-white.
@@ -817,6 +829,15 @@ export namespace Components {
          */
         "size": 'small' | 'medium' | 'large';
     }
+    interface CuraToast {
+        "autoCloseDelay": number;
+        "closeButton": boolean;
+        "icon": string;
+        "label": string;
+        "loader": boolean;
+        "position": 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+        "type": 'info' | 'success' | 'warning' | 'error';
+    }
 }
 export interface CuraAlertCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -858,6 +879,10 @@ export interface CuraSwitchCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCuraSwitchElement;
 }
+export interface CuraToastCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCuraToastElement;
+}
 declare global {
     interface HTMLCuraAccordionElement extends Components.CuraAccordion, HTMLStencilElement {
     }
@@ -1057,6 +1082,12 @@ declare global {
         prototype: HTMLCuraLabelElement;
         new (): HTMLCuraLabelElement;
     };
+    interface HTMLCuraLoaderBarElement extends Components.CuraLoaderBar, HTMLStencilElement {
+    }
+    var HTMLCuraLoaderBarElement: {
+        prototype: HTMLCuraLoaderBarElement;
+        new (): HTMLCuraLoaderBarElement;
+    };
     interface HTMLCuraLoaderCircleElement extends Components.CuraLoaderCircle, HTMLStencilElement {
     }
     var HTMLCuraLoaderCircleElement: {
@@ -1132,6 +1163,23 @@ declare global {
         prototype: HTMLCuraSwitchElement;
         new (): HTMLCuraSwitchElement;
     };
+    interface HTMLCuraToastElementEventMap {
+        "close": void;
+    }
+    interface HTMLCuraToastElement extends Components.CuraToast, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCuraToastElementEventMap>(type: K, listener: (this: HTMLCuraToastElement, ev: CuraToastCustomEvent<HTMLCuraToastElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLCuraToastElementEventMap>(type: K, listener: (this: HTMLCuraToastElement, ev: CuraToastCustomEvent<HTMLCuraToastElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLCuraToastElement: {
+        prototype: HTMLCuraToastElement;
+        new (): HTMLCuraToastElement;
+    };
     interface HTMLElementTagNameMap {
         "cura-accordion": HTMLCuraAccordionElement;
         "cura-accordion-item": HTMLCuraAccordionItemElement;
@@ -1153,6 +1201,7 @@ declare global {
         "cura-icons-view": HTMLCuraIconsViewElement;
         "cura-input-text": HTMLCuraInputTextElement;
         "cura-label": HTMLCuraLabelElement;
+        "cura-loader-bar": HTMLCuraLoaderBarElement;
         "cura-loader-circle": HTMLCuraLoaderCircleElement;
         "cura-page-template": HTMLCuraPageTemplateElement;
         "cura-paragraph": HTMLCuraParagraphElement;
@@ -1160,6 +1209,7 @@ declare global {
         "cura-select": HTMLCuraSelectElement;
         "cura-select-option": HTMLCuraSelectOptionElement;
         "cura-switch": HTMLCuraSwitchElement;
+        "cura-toast": HTMLCuraToastElement;
     }
 }
 declare namespace LocalJSX {
@@ -1619,6 +1669,10 @@ declare namespace LocalJSX {
         "spotColor"?: string;
     }
     interface CuraDropdownSearch {
+        /**
+          * CSS max-height property for dropdown item. Default to 630px
+         */
+        "dropdownMaxHeight"?: string;
         /**
           * Custom icon name. Default: search.
          */
@@ -1666,6 +1720,10 @@ declare namespace LocalJSX {
           * Event emitted when the option is selected.
          */
         "onOptionSelected"?: (event: CuraDropdownSearchOptionCustomEvent<string>) => void;
+        /**
+          * Indicates if the dropdown search is selectable.
+         */
+        "selectable"?: boolean;
         /**
           * Indicates if the dropdown search option is selected.
          */
@@ -1836,6 +1894,10 @@ declare namespace LocalJSX {
          */
         "weight"?: 'regular' | 'bold';
     }
+    interface CuraLoaderBar {
+        "color"?: string;
+        "progress"?: number;
+    }
     interface CuraLoaderCircle {
         /**
           * One from color scheme. Default: neutral-white.
@@ -2001,6 +2063,16 @@ declare namespace LocalJSX {
          */
         "size"?: 'small' | 'medium' | 'large';
     }
+    interface CuraToast {
+        "autoCloseDelay"?: number;
+        "closeButton"?: boolean;
+        "icon"?: string;
+        "label"?: string;
+        "loader"?: boolean;
+        "onClose"?: (event: CuraToastCustomEvent<void>) => void;
+        "position"?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+        "type"?: 'info' | 'success' | 'warning' | 'error';
+    }
     interface IntrinsicElements {
         "cura-accordion": CuraAccordion;
         "cura-accordion-item": CuraAccordionItem;
@@ -2022,6 +2094,7 @@ declare namespace LocalJSX {
         "cura-icons-view": CuraIconsView;
         "cura-input-text": CuraInputText;
         "cura-label": CuraLabel;
+        "cura-loader-bar": CuraLoaderBar;
         "cura-loader-circle": CuraLoaderCircle;
         "cura-page-template": CuraPageTemplate;
         "cura-paragraph": CuraParagraph;
@@ -2029,6 +2102,7 @@ declare namespace LocalJSX {
         "cura-select": CuraSelect;
         "cura-select-option": CuraSelectOption;
         "cura-switch": CuraSwitch;
+        "cura-toast": CuraToast;
     }
 }
 export { LocalJSX as JSX };
@@ -2055,6 +2129,7 @@ declare module "@stencil/core" {
             "cura-icons-view": LocalJSX.CuraIconsView & JSXBase.HTMLAttributes<HTMLCuraIconsViewElement>;
             "cura-input-text": LocalJSX.CuraInputText & JSXBase.HTMLAttributes<HTMLCuraInputTextElement>;
             "cura-label": LocalJSX.CuraLabel & JSXBase.HTMLAttributes<HTMLCuraLabelElement>;
+            "cura-loader-bar": LocalJSX.CuraLoaderBar & JSXBase.HTMLAttributes<HTMLCuraLoaderBarElement>;
             "cura-loader-circle": LocalJSX.CuraLoaderCircle & JSXBase.HTMLAttributes<HTMLCuraLoaderCircleElement>;
             "cura-page-template": LocalJSX.CuraPageTemplate & JSXBase.HTMLAttributes<HTMLCuraPageTemplateElement>;
             "cura-paragraph": LocalJSX.CuraParagraph & JSXBase.HTMLAttributes<HTMLCuraParagraphElement>;
@@ -2062,6 +2137,7 @@ declare module "@stencil/core" {
             "cura-select": LocalJSX.CuraSelect & JSXBase.HTMLAttributes<HTMLCuraSelectElement>;
             "cura-select-option": LocalJSX.CuraSelectOption & JSXBase.HTMLAttributes<HTMLCuraSelectOptionElement>;
             "cura-switch": LocalJSX.CuraSwitch & JSXBase.HTMLAttributes<HTMLCuraSwitchElement>;
+            "cura-toast": LocalJSX.CuraToast & JSXBase.HTMLAttributes<HTMLCuraToastElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rededor/cura",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.3",
   "description": "Cura Design System",
   "author": "Rede D`Or São Luiz",
   "license": "MIT",
@@ -49,5 +49,5 @@
     "storybook": "^7.6.7",
     "svgo": "^3.3.2"
   },
-  "gitHead": "207e8251fef0c2d9597fc19892fabae2d945263c"
+  "gitHead": "8896d9667c4806311c15dca28fb1fb065bbb2490"
 }

package/dist/cura/p-251bd980.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as i,H as o,g as a}from"./p-312791fb.js";const r=":host{display:block;box-sizing:border-box;width:100%}ul{list-style:none;width:100%;margin:0;padding:0}li{width:100%;display:flex;align-items:center;align-content:center;justify-content:center;gap:8px;padding:8px 4px;flex-direction:row;background-color:var(--neutral-purewhite);border-bottom:1px solid var(--neutral-light);box-sizing:border-box;cursor:pointer}li.hovered{background-color:var(--neutral-white)}li cura-heading{width:100%;margin-block:0px}li ::slotted(div[slot=image]){min-width:32px;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{background-color:var(--neutral-white)}";const s=r;const n=class{constructor(i){e(this,i);this.optionSelected=t(this,"optionSelected",7);this.handleOptionClick=()=>{this.selected=!this.selected;this.optionSelected.emit(this.value);this.updateIconColor()};this.value=undefined;this.selected=false;this.hovered=false;this.styles={}}connectedCallback(){this.weights=window.CuraAPI.theme.fonts.getWeights();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()}updateIconColor(){const e=this.hostElement.querySelector('[slot="image"] cura-icon');if(e){e.setAttribute("color",this.selected?"primary":"neutral-dark")}}render(){return i(o,{key:"d045683759a6be8de6ba6e1e7c3ffb3c7e64c928",style:this.styles,slot:"dropdown-search-option"},i("ul",{key:"6fe79f291239629e214bcda850891413c307e120"},i("li",{key:"b62dcc68f2c14da18894fbcdd5e68d5a417ce053",onClick:this.handleOptionClick,value:this.value,class:{hovered:this.hovered,selected:this.selected}},i("slot",{key:"8883c51c5789d57b8a6b4567f5faeaacd5d52bff",name:"image"}),i("cura-heading",{key:"f701d19b2e707a78be62d3df5a768bf83959ecaa",size:"xsmall",lineHeight:"16px",marginBlock:"0px",weight:"bold",color:"neutral-black"},i("slot",{key:"ffe7d83f45a1757df017061a71b950cc50ce52d5"})),i("slot",{key:"4d0f901f5b5e1b7c8ebe5e1148118a2645c6eddd",name:"action"}))))}get hostElement(){return a(this)}static get watchers(){return{selected:["updateIconColor"]}}};n.style=s;export{n as cura_dropdown_search_option};
-//# sourceMappingURL=p-251bd980.entry.js.map

package/dist/cura/p-251bd980.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["curaDropdownSearchOptionCss","CuraDropdownSearchOptionStyle0","CuraDropdownSearchOption","this","handleOptionClick","selected","optionSelected","emit","value","updateIconColor","connectedCallback","weights","window","CuraAPI","theme","fonts","getWeights","styles","colors","getColor","componentDidLoad","iconElement","hostElement","querySelector","setAttribute","render","h","Host","key","style","slot","onClick","class","hovered","name","size","lineHeight","marginBlock","weight","color"],"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":[":host {\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n}\n\nul {\n  list-style: none;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n}\nli {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  align-content: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 8px 4px;\n  flex-direction: row;\n  background-color: var(--neutral-purewhite);\n  border-bottom: 1px solid var(--neutral-light);\n  box-sizing: border-box;\n  cursor: pointer;\n\n  &.hovered {\n    background-color: var(--neutral-white);\n  }\n\n  cura-heading {\n    width: 100%;\n    margin-block: 0px;\n  }\n\n  ::slotted(div[slot='image']) {\n    min-width: 32px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  ::slotted(div[slot='action']) {\n    display: flex;\n    justify-content: end;\n  }\n\n  &.selected {\n    background-color: var(--primary-lighter);\n  }\n\n  &:hover {\n    background-color: var(--neutral-white);\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 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 = () => {\n    this.selected = !this.selected;\n    this.optionSelected.emit(this.value);\n    this.updateIconColor();\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={this.handleOptionClick}\n            value={this.value}\n            class={{\n              hovered: this.hovered,\n              selected: this.selected,\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"],"mappings":"gEAAA,MAAMA,EAA8B,8sBACpC,MAAAC,EAAeD,E,MCMFE,EAAwB,M,wEAmC3BC,KAAAC,kBAAoB,KAC1BD,KAAKE,UAAYF,KAAKE,SACtBF,KAAKG,eAAeC,KAAKJ,KAAKK,OAC9BL,KAAKM,iBAAiB,E,mCA7BoC,M,aAKD,M,YAEzC,E,CAWlB,iBAAAC,GACEP,KAAKQ,QAAUC,OAAOC,QAAQC,MAAMC,MAAMC,aAC1Cb,KAAKc,OAAO,uBAAyBL,OAAOC,QAAQC,MAAMI,OAAOC,SAAS,qBAC1EhB,KAAKc,OAAO,mBAAqBL,OAAOC,QAAQC,MAAMI,OAAOC,SAAS,iBACtEhB,KAAKc,OAAO,mBAAqBL,OAAOC,QAAQC,MAAMI,OAAOC,SAAS,iBACtEhB,KAAKc,OAAO,qBAAuBL,OAAOC,QAAQC,MAAMI,OAAOC,SAAS,kBAAmB,G,CAS7F,gBAAAC,GACEjB,KAAKM,iB,CAIC,eAAAA,GACN,MAAMY,EAAclB,KAAKmB,YAAYC,cAAc,4BACnD,GAAIF,EAAa,CACfA,EAAYG,aAAa,QAASrB,KAAKE,SAAW,UAAY,e,EAIlE,MAAAoB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO1B,KAAKc,OAAQa,KAAK,0BAC7BJ,EAAA,MAAAE,IAAA,4CACEF,EAAA,MAAAE,IAAA,2CACEG,QAAS5B,KAAKC,kBACdI,MAAOL,KAAKK,MACZwB,MAAO,CACLC,QAAS9B,KAAK8B,QACd5B,SAAUF,KAAKE,WAGjBqB,EAAA,QAAAE,IAAA,2CAAMM,KAAK,UACXR,EAAA,gBAAAE,IAAA,2CAAcO,KAAK,SAASC,WAAW,OAAOC,YAAY,MAAMC,OAAO,OAAOC,MAAM,iBAClFb,EAAA,QAAAE,IAAA,8CAEFF,EAAA,QAAAE,IAAA,2CAAMM,KAAK,a","ignoreList":[]}

package/dist/cura/p-61d20270.entry.js

@@ -1,2 +0,0 @@
-import{r as o,h as e,H as r}from"./p-312791fb.js";const a=":host{display:block;box-sizing:border-box;width:100%}cura-label{padding:12px 0px;border-bottom:1px solid var(--neutral-light)}";const t=a;const c=class{constructor(e){o(this,e)}render(){return e(r,{key:"6e2312e0bf01db89fe6c85fbe525c02ed2dff7ec",slot:"dropdown-search-option"},e("cura-label",{key:"551017409617799c76a6119b4e61596a4188f5ad",color:"neutral-dark",size:"xsmall",lineHeight:"16px",marginBlock:"0"},e("slot",{key:"4e0b3b588dec8603df342358840bc0a2d8ab3c4c"})))}};c.style=t;export{c as cura_dropdown_search_option_title};
-//# sourceMappingURL=p-61d20270.entry.js.map

package/dist/cura/p-b3a50bcf.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as e,H as o,g as s}from"./p-312791fb.js";const r=":host{display:block;width:100%;box-sizing:border-box}.dropdown{display:flex;position:relative;flex-direction:column;width:inherit}.dropdown-input-search{width:100%;display:flex;justify-content:center;align-items:center;background:transparent}.dropdown-input-search.dropdown-open ::part(cura-input-field){border-radius:4px 4px 0px 0px}.dropdown-input-search.dropdown-open ::slotted([slot=helperText]){display:none}.dropdown-input-search.dropdown-open cura-input-text ::slotted([slot=helperText]){display:none}.dropdown-search-list{position:absolute;top:calc(100% - 8px);width:100%;max-height:630px;padding:12px 12px;margin:0;box-sizing:border-box;box-shadow:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16));border-radius:0px 0px 4px 4px;border-top:0 var(--neutral-light);border-right:2px solid var(--neutral-light);border-bottom:2px solid var(--neutral-light);border-left:2px solid var(--neutral-light);background-color:var(--neutral-purewhite);list-style:none;overflow-y:auto;display:none}.dropdown-search-list.visible{display:block}.dropdown-search-list-input-search{width:inherit;display:flex;justify-content:center;align-items:center;padding:16px 8px;border-bottom:2px solid var(--info-base);background-color:var(--neutral-purewhite)}.dropdown-search-list-input-search cura-input-text{width:inherit}.dropdown-search-list-input-search.error{background-color:var(--error-lighter);border-bottom:2px solid var(--error-dark)}.dropdown-mobile{position:absolute;top:0;left:0;right:0;width:100%;z-index:10000}.dropdown-mobile .dropdown-input-search{display:flex;gap:4px;padding:12px 8px;background-color:var(--neutral-purewhite);border-bottom:2px solid var(--info-base);z-index:10000}.dropdown-mobile .dropdown-input-search cura-button-transparent{display:flex}.dropdown-mobile .dropdown-input-search.error{background-color:var(--error-lighter);border-bottom:2px solid var(--error-dark)}.dropdown-mobile .dropdown-input-search.dropdown-open{display:flex}.dropdown-mobile .dropdown-input-search.dropdown-open ::slotted([slot=helperText]){display:block}.dropdown-mobile .dropdown-search-list{position:static;width:100%;height:100%;max-height:none;padding:12px 12px;margin:0;box-sizing:border-box;box-shadow:none;border:none;background-color:var(--neutral-purewhite);list-style:none;overflow-y:auto;z-index:10000}";const n=r;const d=class{constructor(e){t(this,e);this.valueChanged=i(this,"valueChanged",7);this.onselect=i(this,"onselect",7);this.overlayElement=null;this.handleSlotChange=()=>{this.options=Array.from(this.host.querySelectorAll("cura-dropdown-search-option"));this.addClickListenersToOptions();this.updateHoveredIndex()};this.handleInputChange=t=>{const i=t.target;this.value=i.value;this.onValueChange(this.value);this.valueChanged.emit(this.value)};this.handleKeyDown=t=>{if(t.key==="ArrowDown"){t.preventDefault();this.moveHighlight(1)}else if(t.key==="ArrowUp"){t.preventDefault();this.moveHighlight(-1)}else if(t.key==="Enter"){t.preventDefault();if(this.hoveredIndex>-1){this.handleOnBlur();this.onSelectedOption(this.hoveredIndex)}}};this.handleResize=()=>{this.isMobile=window.innerWidth<768;if(this.isDropdownOpen){if(this.isMobile){this.showOverlay()}else{this.removeOverlay()}}};this.status="default";this.name=undefined;this.required=false;this.selected=false;this.value="";this.placeholder="";this.label="";this.iconName="search";this.overlayVisible=false;this.isDropdownOpen=false;this.styles={};this.isMobile=window.innerWidth<768;this.mode="default";this.inputTextRef=undefined;this.isOnBlurInput=true;this.hoveredIndex=-1;this.options=[]}connectedCallback(){this.weights=window.CuraAPI.theme.fonts.getWeights();this.styles["--info-base"]=window.CuraAPI.theme.colors.getColor("info-base");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-dark"]=window.CuraAPI.theme.colors.getColor("neutral-dark");this.styles["--neutral-black-shadow"]=window.CuraAPI.theme.colors.getColor(`neutral-black`,.16);this.styles["--error-dark"]=window.CuraAPI.theme.colors.getColor("error-dark");this.styles["--error-lighter"]=window.CuraAPI.theme.colors.getColor("error-lighter");this.styles["--breakpoints"]=window.CuraAPI.theme.breakpoints.get();this.styles["--font-size"]=window.CuraAPI.theme.fonts.getSize();this.styles["--font-family"]=window.CuraAPI.theme.fonts.getFamily();this.styles["--font-weight-medium"]=this.weights.medium}onValueChange(t){this.updateSelectedOption(t)}componentWillLoad(){this.updateSelectedOption(this.value)}componentDidRender(){console.log(this.options);if(this.isDropdownOpen&&this.isMobile){this.showOverlay()}else{this.removeOverlay()}}componentDidLoad(){window.addEventListener("resize",this.handleResize)}disconnectedCallback(){window.removeEventListener("resize",this.handleResize)}showOverlay(){if(!this.overlayElement){this.overlayElement=document.createElement("div");this.overlayElement.className="dropdown-overlay";this.overlayElement.style.position="fixed";this.overlayElement.style.top="0";this.overlayElement.style.left="0";this.overlayElement.style.width="100%";this.overlayElement.style.height="100%";this.overlayElement.style.zIndex="9999";this.overlayElement.style.backgroundColor="white";document.body.appendChild(this.overlayElement)}}removeOverlay(){if(this.overlayElement&&this.overlayElement.parentNode===document.body){document.body.removeChild(this.overlayElement);this.overlayElement=null}}addClickListenersToOptions(){this.options.forEach(((t,i)=>{t.addEventListener("click",(()=>this.onSelectedOption(i)))}))}updateSelectedOption(t){const i=this.options.findIndex((i=>i.getAttribute("value")===t));this.hoveredIndex=i;this.updateOptionAttribute("hovered",this.hoveredIndex);this.updateOptionAttribute("selected",this.hoveredIndex);this.scrollIntoView()}onSelectedOption(t){const i=this.options[t];const e=i.getAttribute("value")||i.textContent;this.value=e||"";this.updateSelectedOption(this.value);this.isDropdownOpen=false;this.isOnBlurInput=true;this.removeOverlay()}moveHighlight(t){const i=this.options;const e=(this.hoveredIndex+t+i.length)%i.length;this.hoveredIndex=e;this.updateOptionAttribute("hovered",this.hoveredIndex);this.scrollIntoView()}updateOptionAttribute(t,i){this.options.forEach(((e,o)=>{e[t]=o===i}))}updateHoveredIndex(){const t=this.options;const i=this.value;this.hoveredIndex=t.findIndex((t=>t.getAttribute("value")===i))}scrollIntoView(){var t;const i=(t=this.host.shadowRoot)===null||t===void 0?void 0:t.querySelector(".dropdown-search-list");const e=this.options[this.hoveredIndex];if(i&&e){const t=e.getBoundingClientRect();const o=i.getBoundingClientRect();if(t.bottom>o.bottom){i.scrollTop+=t.bottom-o.bottom}if(t.top<o.top){i.scrollTop-=o.top-t.top}}}handleOnBlur(){if(this.isOnBlurInput===true){setTimeout((()=>{this.isDropdownOpen=false;this.removeOverlay()}),200)}}getClasses(){return{"dropdown-input-search":true,"dropdown-open":this.isDropdownOpen,[this.status]:true}}getDropdownClasses(){return{"dropdown-search-list":true,visible:this.options.length&&this.isDropdownOpen?true:false}}render(){const t=this.isMobile&&this.isDropdownOpen;return e(o,{key:"a1bac8740f5fb4b1504e3818f893ae9939366a2f",style:this.styles,class:"dropdown-overlay"},e("div",{key:"972cfac99c258a01a5ceacec4ca325e1445b4194",class:`dropdown ${t?"dropdown-mobile":""}`,style:this.styles},e("div",{key:"7433e2335ad6639d608ca23c3b25e2ecfaf4a7d2",class:this.getClasses()},this.isMobile&&this.isDropdownOpen&&e("cura-button-transparent",{key:"f9ca9af935b0c752ce27f65bfe34b9679dbd079b",fontColor:"dark",onClick:()=>this.isMobile=false,iconName:"arrowLeft",size:"medium",iconOnly:true,color:"primary"}),e("cura-input-text",{key:"b75f08b2c5d6e1e68bea7e8c162bf0481eec4218",label:this.label,part:"cura-input-field",mode:t?"transparent":"default",required:this.required,hideErrorIcon:this.status==="error",iconName:this.iconName||"search",value:this.value,status:this.status,onValueChange:t=>this.onValueChange(t.target.value),onInput:t=>this.handleInputChange(t),onFocus:()=>this.isDropdownOpen=true,onClick:()=>window.innerWidth<768?this.isMobile=true:null,onBlur:()=>{this.handleOnBlur()},placeholder:this.placeholder,size:"large",onKeyDown:this.handleKeyDown},e("slot",{key:"c46ff9544d7cacd7a28291b0dcee51d1e9c4f7c7",name:"helperText"}))),e("div",{key:"c6cbeffbcc00e83c4bbd51947640ae9602097563",id:"dropdown-search-list",class:this.getDropdownClasses()},e("slot",{key:"735d3178c6bc3879ed96ee90e3147f083f8ac634",name:"dropdown-search-option",onSlotchange:this.handleSlotChange}))))}get host(){return s(this)}static get watchers(){return{value:["onValueChange"]}}};d.style=n;export{d as cura_dropdown_search};
-//# sourceMappingURL=p-b3a50bcf.entry.js.map

package/dist/cura/p-b3a50bcf.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["curaDropdownSearchCss","CuraDropdownSearchStyle0","CuraDropdownSearch","this","overlayElement","handleSlotChange","options","Array","from","host","querySelectorAll","addClickListenersToOptions","updateHoveredIndex","handleInputChange","event","input","target","value","onValueChange","valueChanged","emit","handleKeyDown","key","preventDefault","moveHighlight","hoveredIndex","handleOnBlur","onSelectedOption","handleResize","isMobile","window","innerWidth","isDropdownOpen","showOverlay","removeOverlay","connectedCallback","weights","CuraAPI","theme","fonts","getWeights","styles","colors","getColor","breakpoints","get","getSize","getFamily","medium","newValue","updateSelectedOption","componentWillLoad","componentDidRender","console","log","componentDidLoad","addEventListener","disconnectedCallback","removeEventListener","document","createElement","className","style","position","top","left","width","height","zIndex","backgroundColor","body","appendChild","parentNode","removeChild","forEach","option","index","selectedOptionIndex","findIndex","getAttribute","updateOptionAttribute","scrollIntoView","selectedOption","selectedValue","textContent","isOnBlurInput","direction","visibleOptions","newIndex","length","attribute","indexToUpdate","currentValue","container","_a","shadowRoot","querySelector","hoveredOption","optionRect","getBoundingClientRect","containerRect","bottom","scrollTop","setTimeout","getClasses","status","getDropdownClasses","visible","render","isMobileDropdown","h","Host","class","fontColor","onClick","iconName","size","iconOnly","color","label","part","mode","required","hideErrorIcon","e","onInput","onFocus","onBlur","placeholder","onKeyDown","name","id","onSlotchange"],"sources":["src/components/forms/cura-dropdown-search/cura-dropdown-search.scss?tag=cura-dropdown-search&encapsulation=shadow","src/components/forms/cura-dropdown-search/cura-dropdown-search.tsx"],"sourcesContent":["@import '../../../scss/mixins/shadows.scss';\n\n:host {\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.dropdown {\n  display: flex;\n  position: relative;\n\n  flex-direction: column;\n  width: inherit;\n\n  &-input-search {\n    width: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background: transparent;\n\n\n    &.dropdown-open {\n      ::part(cura-input-field) {\n        border-radius: 4px 4px 0px 0px;\n      }\n      ::slotted([slot='helperText']) {\n        display: none;\n      }\n\n      cura-input-text {\n        ::slotted([slot='helperText']) {\n          display: none;\n        }\n      }\n    }\n  }\n\n  &-search-list {\n    position: absolute;\n    top:  calc(100% - 8px);\n    width: 100%;\n    max-height: 630px;\n    padding: 12px 12px;\n    margin: 0;\n    box-sizing: border-box;\n    @include shadow-level3(--neutral-black-shadow);\n    border-radius: 0px 0px 4px 4px;\n    border-top: 0 var(--neutral-light);\n    border-right: 2px solid var(--neutral-light);\n    border-bottom: 2px solid var(--neutral-light);\n    border-left: 2px solid var(--neutral-light);\n    background-color: var(--neutral-purewhite);\n    list-style: none;\n    overflow-y: auto;\n    display: none;\n\n    &.visible {\n      display: block;\n    }\n\n    &-input-search {\n      width: inherit;\n\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding: 16px 8px;\n      border-bottom: 2px solid var(--info-base);\n      background-color: var(--neutral-purewhite);\n\n      cura-input-text {\n        width: inherit;\n      }\n\n      &.error {\n        background-color: var(--error-lighter);\n        border-bottom: 2px solid var(--error-dark);\n      }\n    }\n  }\n\n  &-mobile {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    width: 100%;\n\n    z-index: 10000;\n    .dropdown-input-search {\n      display: flex;\n      gap: 4px;\n      padding: 12px 8px;\n      background-color: var(--neutral-purewhite);\n      border-bottom: 2px solid var(--info-base);\n      z-index: 10000;\n      cura-button-transparent {\n        display: flex;\n      }\n      &.error {\n        background-color: var(--error-lighter);\n        border-bottom: 2px solid var(--error-dark);\n      }\n      &.dropdown-open {\n        display: flex;\n\n        ::slotted([slot='helperText']) {\n          display: block;\n        }\n      }\n    }\n    .dropdown-search-list {\n      position: static;\n      width: 100%;\n      height: 100%;\n      max-height: none;\n      padding: 12px 12px;\n      margin: 0;\n      box-sizing: border-box;\n      box-shadow: none;\n      border: none;\n      background-color: var(--neutral-purewhite);\n      list-style: none;\n      overflow-y: auto;\n      z-index: 10000;\n    }\n  }\n}\n","import { Component, Host, Prop, State, Event, EventEmitter, Element, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-dropdown-search',\n  styleUrl: 'cura-dropdown-search.scss',\n  shadow: true,\n})\nexport class CuraDropdownSearch {\n  /**\n   * Define the status of the dropdown search.\n   */\n  @Prop({ reflect: true }) status: 'error' | 'default' = 'default';\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   * 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  }\n\n  componentWillLoad() {\n    this.updateSelectedOption(this.value);\n  }\n\n  componentDidRender() {\n    console.log(this.options);\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    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  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      [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  render() {\n    const isMobileDropdown = this.isMobile && this.isDropdownOpen;\n    return (\n      <Host style={this.styles} 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              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"],"mappings":"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","ignoreList":[]}

package/dist/cura/p-ced36448.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as r,h as t,H as i,g as a}from"./p-312791fb.js";const n=":host{display:block;position:relative;font-family:var(--font-family)}.wrapper{width:100%;user-select:none;text-align:left !important}.wrapper cura-label{margin-bottom:8px}.wrapper .helper-text{margin-top:8px;color:var(--neutral-dark)}.wrapper .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper .cura-input-field .feedback-icon{padding-left:12px}.wrapper .cura-input-field .up-down-icon{order:3;padding-right:12px;cursor:pointer;pointer-events:all}.wrapper .cura-input-field input{padding:0px 12px 0px 8px}.wrapper .cura-input-field.open{border-radius:4px 4px 0 0 !important}.wrapper.transparent{background-color:transparent;padding:0px;max-height:80px}.wrapper.transparent .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;background-color:transparent !important;border:none !important;border-radius:0;height:27px}.wrapper.transparent .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.transparent .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.transparent .cura-input-field .feedback-icon{padding-left:12px}.wrapper.transparent .cura-input-field input{color:var(--neutral-black) !important;font-size:16px;font-weight:var(--font-weight-bold) !important;padding:0}.wrapper.transparent .cura-input-field input::placeholder{color:var(--neutral-black)}.wrapper.transparent .cura-input-field .feedback-icon{order:3;margin:0 20px 0 0}.wrapper.transparent:focus-within .cura-input-field{border:none !important;background-color:transparent !important}.wrapper.transparent:focus-within .cura-input-field input{border:none !important;outline:none}.wrapper.transparent .helper-text{margin-top:0px}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field{border-color:var(--neutral-dark)}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input{color:var(--neutral-dark)}.wrapper:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly):not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper:focus-within .cura-input-field{border:2px solid var(--info-base) !important;background-color:var(--neutral-purewhite);outline:none}.wrapper:focus-within .cura-input-field input{color:var(--neutral-black) !important}.wrapper.success .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.success .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.success .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.success .cura-input-field .feedback-icon{padding-left:12px}.wrapper.success .cura-input-field input{color:var(--success-darker) !important}.wrapper.success .cura-input-field input::placeholder{color:var(--success-darker) !important}.wrapper.success:not(.transparent) .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--success-dark) !important;background-color:var(--success-lighter) !important}.wrapper.success:not(.transparent) .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.success:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.success:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.wrapper.error .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.error .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.error .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.error .cura-input-field .feedback-icon{padding-left:12px}.wrapper.error .cura-input-field input{color:var(--error-darker) !important}.wrapper.error .cura-input-field input::placeholder{color:var(--error-darker) !important}.wrapper.error:not(.transparent) .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;border:2px solid var(--error-dark) !important;background-color:var(--error-lighter) !important}.wrapper.error:not(.transparent) .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.error:not(.transparent) .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.error:not(.transparent) .cura-input-field .feedback-icon{padding-left:12px}.wrapper.disabled .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box;background-color:var(--neutral-white);border:2px solid var(--neutral-base)}.wrapper.disabled .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.disabled .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.disabled .cura-input-field .feedback-icon{padding-left:12px}.wrapper.disabled .cura-input-field input{color:var(--neutral-medium)}.wrapper.disabled .cura-input-field input::placeholder{color:var(--neutral-medium)}.wrapper.small .cura-input-field{width:100%;height:32px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.small .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:12px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.small .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.small .cura-input-field .feedback-icon{padding-left:12px}.wrapper.small .cura-input-field input{line-height:13px;letter-spacing:0.72px}.wrapper.small .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.wrapper.small.label .menu{top:53px}.wrapper.small .menu{top:33px}.wrapper.medium .cura-input-field{width:100%;height:40px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.medium .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:14px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.medium .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.medium .cura-input-field .feedback-icon{padding-left:12px}.wrapper.medium .cura-input-field input{line-height:16px;letter-spacing:0.56px}.wrapper.medium .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-regular)}.wrapper.medium.label .menu{top:61px}.wrapper.medium .menu{top:40px}.wrapper.large .cura-input-field{width:100%;height:44px;display:flex;flex-direction:row;align-items:center;background-color:var(--neutral-purewhite);border:2px solid var(--neutral-medium);border-radius:4px;color:var(--primary-base);letter-spacing:0.32px;line-height:20px;overflow:hidden;box-sizing:border-box}.wrapper.large .cura-input-field input{flex:1;width:100%;height:100%;background:transparent;border:none;outline:none;color:var(--neutral-dark);font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:16px;box-sizing:border-box;padding:0px 12px 0px 8px}.wrapper.large .cura-input-field input::placeholder{color:var(--neutral-dark)}.wrapper.large .cura-input-field .feedback-icon{padding-left:12px}.wrapper.large .helper-text{margin-top:8px;color:var(--neutral-dark);font-weight:var(--font-weight-bold)}.wrapper.large.label .menu{top:69px}.wrapper.large .menu{top:47px}.required{color:red}.menu{position:absolute;left:0;right:-1px;background:#fff;border:2px solid var(--neutral-light);border-radius:4px;z-index:1000;max-height:285px;overflow:hidden;border-top:transparent;align-items:center;scrollbar-color:var(--neutral-medium) var(--neutral-black-20);overflow-y:scroll;box-shadow:0px 4px 8px 0px rgba(38, 38, 38, 0.16)}.menu.open{border-radius:0 !important}";const o=n;const l=class{constructor(t){e(this,t);this.selected=r(this,"selected",7);if(t.$hostElement$["s-ei"]){this.internals=t.$hostElement$["s-ei"]}else{this.internals=t.$hostElement$.attachInternals();t.$hostElement$["s-ei"]=this.internals}this.styles={};this.theme=window.CuraAPI.theme;this.handleMutations=e=>{e.forEach((e=>{if(e.type==="attributes"){if(e.attributeName==="selected")this.updateSelectedOption();if(e.attributeName==="value")this.filterOptions()}}))};this.onOptiselected=e=>{const r=e.target;this.clearSelectedAttributes();r.setAttribute("selected","true")};this.handleKeyDown=e=>{var r;if(!this.isOpen)return;const{key:t}=e;if(t==="ArrowDown"){e.preventDefault();this.updateActiveIndex(1)}if(t==="ArrowUp"){e.preventDefault();this.updateActiveIndex(-1)}if(t==="Enter"){(r=this.options[this.activeIndex])===null||r===void 0?void 0:r.click()}};this.handleInputChange=e=>{this.value=e.target.value;this.isOpen=!!this.value.length;this.internals.setFormValue(this.value)};this.handleClick=e=>{if(this.disabled)return e.preventDefault();const r=e.target;if(r.tagName==="CURA-SELECT-OPTION")return this.onOptiselected(e);this.isOpen=!this.isOpen};this.label="";this.placeholder="";this.value="";this.mode="default";this.size="medium";this.status="default";this.disabled=false;this.required=false;this.isHovered=false;this.isFocused=false;this.isOpen=false;this.options=undefined;this.activeIndex=-1}formAssociatedCallback(e){e.ariaLabel=this.label}formStateRestoreCallback(e){this.value=e.value;this.updateSelectedOption()}formResetCallback(){this.value="";this.clearSelectedAttributes();this.internals.setFormValue(this.value);this.internals.setValidity({})}formDisabledCallback(e){this.disabled=e}componentWillLoad(){this.initializeOptions()}componentDidLoad(){this.setupMutationObserver()}connectedCallback(){this.applyStyles()}disconnectedCallback(){var e;(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect()}initializeOptions(){this.options=this.host.querySelectorAll("cura-select-option");this.options.forEach((e=>{e.setAttribute("size",this.size);e.setAttribute("selected","false")}))}applyStyles(){const{fonts:e,colors:r}=this.theme;const t=e.getWeights();this.styles=Object.assign(Object.assign({},this.styles),{"--font-weight-medium":t.medium,"--font-weight-bold":t.bold,"--font-weight-regular":t.regular,"--font-color":e.getColor(),"--font-family":e.getFamily(),"--font-size":e.getSize()});const i=["primary-base","neutral-purewhite","neutral-white","neutral-black","neutral-medium","neutral-light","neutral-base","neutral-dark","success-dark","success-darker","success-lighter","error-lighter","error-dark","error-darker","error-base","info-base"];i.forEach((e=>{this.styles[`--${e}`]=r.getColor(e)}))}setupMutationObserver(){this.mutationObserver=new MutationObserver(this.handleMutations);this.mutationObserver.observe(this.host,{attributes:true,subtree:true,attributeFilter:["selected","value"]})}updateSelectedOption(){const e=this.host.querySelector("cura-select-option[selected]");if(e){const r=e.textContent;if(this.value!==r){this.value=r;this.isOpen=false;this.internals.setFormValue(this.value);this.selected.emit({value:this.value,selected:true})}}}clearSelectedAttributes(){this.options.forEach((e=>e.removeAttribute("selected")))}filterOptions(){const e=this.value.toLowerCase();this.options.forEach((r=>{var t;const i=((t=r.textContent)===null||t===void 0?void 0:t.toLowerCase())||"";const a=this.isOpen?i.includes(e):true;r.style.display=a?"block":"none"}))}updateActiveIndex(e){if(this.options.length===0)return;this.activeIndex=(this.activeIndex+e+this.options.length)%this.options.length;this.updateOptionHighlights()}updateOptionHighlights(){this.options.forEach(((e,r)=>e.active=r===this.activeIndex))}getClasses(){return{wrapper:true,label:!!this.label,disabled:this.disabled,transparent:this.mode==="transparent",[this.size.toLowerCase()]:true,[this.status.toLowerCase()]:true}}getColor(e){if(this.disabled)return"neutral-medium";const r=this.status==="default";const t=this.isFocused||this.isHovered;if(e==="label"){if(!r||t)return"neutral-black";return"neutral-dark"}if(t&&r)return"neutral-black";if(this.status==="success")return"success-dark";if(this.status==="error")return"error-dark";return"neutral-dark"}renderIcon(){if(this.status==="default")return null;const e={success:"checkCircle",error:"alertCircle"}[this.status];return t("cura-icon",{class:"feedback-icon",name:e,iconset:"default",size:this.size==="large"?20:16,color:this.getColor("icon"),style:this.styles})}render(){return t(i,{key:"25024f752db0a0189ece93612e54a43b47668efd",style:this.styles},t("div",{key:"eae2f00129bb2d82fa1586ce7f6e2e4bb71b20de",class:this.getClasses(),tabIndex:0,ref:e=>this.selectRef=e,onMouseEnter:()=>this.isHovered=true,onMouseLeave:()=>this.isHovered=false,onKeyDown:this.handleKeyDown,onClick:this.handleClick},this.label&&t("cura-label",{key:"0ac1eb8e18c97432a2c46e35dc04fce4d2dc640a",class:"label",weight:"bold",size:this.size==="large"?"small":"xsmall",color:this.getColor("label")},this.label," ",this.required&&t("span",{key:"09e8e758d595c641afbb7729847bc6e123ecd869",class:"required"},"* ")),t("div",{key:"2248ebad1ab820689635db06db8725d39118b04b",class:{"cura-input-field":true,open:this.isOpen}},this.renderIcon(),t("input",{key:"ea3909b76182006256055be075a446a8cb2813af",tabIndex:0,type:"text",autocomplete:"off",onFocus:()=>this.isFocused=true,onBlur:()=>this.isFocused=false,"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.value}),t("cura-icon",{key:"13a28271273b9a96e39cb62ca91e6769ea33ee43",name:this.isOpen?"up":"down",class:"up-down-icon",color:this.disabled?"neutral-dark":"primary-base",size:16,iconset:"default"})),t("cura-label",{key:"fb1802d14cf6099e0ddf71f0623c1f0ffba6747c",class:"helper-text",size:"xsmall",color:this.getColor("text"),weight:this.mode==="transparent"?"bold":"regular"},t("slot",{key:"2c257fd28f5c560dd66fe9f73c2fb3c165174efa"})),this.isOpen&&t("div",{key:"36dbd0fa457f7d1ec9c771dafc7491a821267812",class:{menu:true,open:this.isOpen}},t("slot",{key:"f8d751989092e50820cb7b71903eef743f672a6b",name:"option"}))))}static get formAssociated(){return true}get host(){return a(this)}};l.style=o;const p=":host{display:block}.item{display:flex;padding:12px 8px;cursor:pointer;justify-content:space-between;align-items:center;box-sizing:border-box;background:var(--neutral-purewhite)}.item.selected{background-color:var(--primary-lighter-50);border-bottom:1px solid var(--primary-light)}.item:hover:not(.selected){background:var(--neutral-white);box-shadow:0 2px 0 0 var(--neutral-light)}.item.active{background:var(--neutral-white) !important}.item.selected.active{background-color:var(--primary-lighter-50) !important;box-shadow:none}";const s=p;const d=class{constructor(r){e(this,r);this.theme=window.CuraAPI.theme;this.value=undefined;this.selected=false;this.active=false;this.size="small";this.styles={}}connectedCallback(){const e=[{name:"--primary-lighter-50",theme:"primary-lighter",opacity:.5},{name:"--primary-light",theme:"primary-light"},{name:"--neutral-light",theme:"neutral-light"},{name:"--neutral-purewhite",theme:"neutral-purewhite"}];e.forEach((e=>this.styles=Object.assign(Object.assign({},this.styles),{[e.name]:this.theme.colors.getColor(e.theme,e===null||e===void 0?void 0:e.opacity)})))}getSize(e){const r={large:e==="label"?"medium":20,medium:e==="label"?"small":16,small:e==="label"?"xsmall":"micro"};return r[this.size]||r["medium"]}getClasses(){return{item:true,selected:this.selected,active:this.active}}render(){return t(i,{key:"9eb6b609efeb50130efd27c20bc7a42441687ce7",slot:"option"},t("div",{key:"f72ff1ec9f5b5a579152b09e7a02496be5ab944b",class:this.getClasses(),style:this.styles},t("cura-label",{key:"0b45ade14ca8ad351a696ec6bad4349eadec38f1",color:`${this.selected?"primary-base":"neutral-black"}`,size:this.getSize("label"),"margin-block":"0"},t("slot",{key:"2015c43b9b1686fdef5f0369a91ce376327e5d7f"})),this.selected&&t("cura-icon",{key:"9ee481f8ee3e586bd629559e90acf30976711059",name:"check",size:this.getSize("icon"),color:"primary-base"})))}get host(){return a(this)}static get watchers(){return{size:["getSize"]}}};d.style=s;export{l as cura_select,d as cura_select_option};
-//# sourceMappingURL=p-ced36448.entry.js.map