npm - @rededor/cura - Versions diffs - 1.7.0 → 1.8.0 - Mend

@rededor/cura 1.7.0 → 1.8.0

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

Files changed (569) hide show

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

	@@ -1 +1 @@
1	- {"file":"cura-checkbox.js","mappings":"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","names":["CuraCheckbox"],"sources":["src/components/forms/cura-checkbox/cura-checkbox.scss?tag=cura-checkbox&encapsulation=shadow","src/components/forms/cura-checkbox/cura-checkbox.tsx"],"sourcesContent":["@import '../../../scss/mixins/text.scss';\n\n:host {\n display: block;\n box-sizing: border-box;\n\n min-width: 0;\n}\n\n/* Container e Layout /\n.container {\n display: flex;\n align-items: center;\n flex-direction: row-reverse;\n justify-content: start;\n gap: var(--gap);\n\n cursor: pointer;\n}\n\n.position {\n &.container {\n flex-direction: row;\n }\n\n .label-wrapper {\n justify-content: end;\n }\n\n .message {\n text-align: right;\n }\n\n .label {\n order: 1;\n }\n}\n\n.info {\n display: flex;\n flex-direction: column;\n\n overflow: hidden;\n}\n\n.label.textoverflow-single {\n @include truncate-single();\n min-width: 0;\n max-width: 100%;\n}\n\n.label-wrapper {\n display: flex;\n justify-content: start;\n align-items: center;\n gap: 5px;\n}\n\n/ Control e Checkbox /\n.control {\n width: fit-content;\n cursor: pointer;\n position: relative;\n}\n\n.checkbox {\n appearance: none;\n border: 2px solid var(--neutral-base-neutral-medium);\n border-radius: 4px;\n background: var(--neutral-black-neutral-purewhite);\n flex: 1 0;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n cursor: pointer;\n box-sizing: border-box;\n width: var(--size);\n height: var(--size);\n flex: 0 0 var(--size);\n}\n\n.icon {\n position: absolute;\n display: flex;\n opacity: 0;\n transition: opacity 0.3s;\n}\n\n/ Estados de Foco /\n.checkbox:focus {\n border-color: var(--info-base) !important;\n}\n\n/ Estado Disabled /\n.disabled .checkbox {\n background: var(--neutral-black-neutral-white);\n border-color: var(--neutral-darker-neutral-base);\n cursor: not-allowed;\n\n &:hover {\n border-color: var(--neutral-darker-neutral-base) !important;\n }\n}\n\n.disabled.checked .checkbox,\n.disabled.indeterminate .checkbox {\n background: var(--neutral-black-neutral-white);\n border-color: var(--neutral-darker-neutral-base);\n\n &:hover {\n border-color: var(--neutral-base-neutral-white);\n background: var(--primary-base-neutral-white);\n }\n}\n\n.disabled .checkbox:focus {\n border-color: var(--neutral-darker-neutral-base) !important;\n}\n\n/ Estado Checked /\n.checked .checkbox {\n border-color: var(--color-dark);\n background: var(--color-base);\n\n &:hover {\n border-color: var(--color-base) !important;\n background: var(--color-light);\n }\n}\n\n/ Estado Indeterminate /\n.indeterminate .checkbox {\n border-color: var(--color-base);\n background: var(--color-light);\n\n &:hover {\n border-color: var(--color-dark) !important;\n background: var(--color-base);\n }\n}\n\n.checked .icon,\n.indeterminate .icon {\n opacity: 1;\n}\n\n/ Hover para não disabled, default, checked, indeterminate /\n:not(.disabled):not(.checked):not(.indeterminate) .checkbox:hover {\n border-color: var(--neutral-purewhite-neutral-dark);\n}\n\n/ Estado Success /\n\n.success.dark .checkbox {\n background: var(--neutral-black);\n}\n\n.success .checkbox {\n border-color: var(--success-base);\n background: var(--success-lighter);\n\n &:hover {\n border-color: var(--success-base) !important;\n }\n}\n\n.success.checked .checkbox {\n border-color: var(--success-dark-base);\n background: var(--success-base-lighter);\n\n &:hover {\n border-color: var(--success-dark-base);\n }\n}\n\n/ Estado Error /\n\n.error.dark .checkbox {\n background: var(--neutral-black);\n}\n\n.error .checkbox {\n border-color: var(--error-base);\n background: var(--error-lighter);\n\n &:hover {\n border-color: var(--error-base) !important;\n }\n}\n\n.error.checked .checkbox {\n border-color: var(--error-dark-base);\n background: var(--error-base-lighter);\n\n &:hover {\n border-color: var(--error-dark-base);\n }\n}\n\n/ Input /\ninput {\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n}\n","import { Component, Prop, Event, Element, h, Host, Watch, EventEmitter, State, AttachInternals } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n tag: 'cura-checkbox',\n styleUrl: 'cura-checkbox.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class CuraCheckbox {\n /\n Reflects the checked state of the checkbox.\n * Mutable property allowing state change.\n /\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n /\n Reflects the indeterminate state of the checkbox.\n * Mutable property allowing state change.\n /\n @Prop({ reflect: true, mutable: true }) indeterminate: boolean = false;\n /\n Status of the checkbox.\n * Can be 'error', 'success', or 'default'.\n /\n @Prop({ reflect: true, mutable: true }) status: 'error' \| 'success' \| 'default' = 'default';\n /\n Reflects the disabled state of the checkbox.\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n /\n Reflects the required state of the checkbox.\n /\n @Prop({ reflect: true }) required: boolean = false;\n /\n Text label associated with the checkbox.\n /\n @Prop({ reflect: true }) label: string;\n /\n Specifies the tabindex of the checkbox.\n /\n @Prop({ reflect: true }) ontabindex: number = 0;\n /\n Position of the label relative to the checkbox.\n * Can be 'left' or 'right'.\n /\n @Prop({ reflect: true }) position: 'left' \| 'right' = 'left';\n /\n Value associated with the checkbox.\n /\n @Prop({ reflect: true }) value: string;\n /\n Name attribute of the checkbox.\n /\n @Prop({ reflect: true }) name: string;\n /\n Size of the checkbox.\n * Can be 'small', 'medium', or 'large'.\n /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n /\n Background theme of the checkbox.\n * Can be 'dark' or 'light'.\n /\n @Prop() background: 'dark' \| 'light' = 'light';\n /\n iconColor theme of the checkbox.\n * Can be 'dark' or 'light'.\n /\n @Prop() iconColor: 'dark' \| 'light' = 'dark';\n /\n Color theme of the checkbox.\n /\n @Prop() color = 'accent';\n\n /\n Controls how the label text should handle overflow.\n * - `'none'`: No overflow handling; the label displays normally.\n * - `'single'`: The label will be truncated with an ellipsis if it overflows a single line.\n * - `string`: Custom overflow handling mode.\n \n @default 'none'\n /\n @Prop({ reflect: true }) overflowLabel: 'none' \| 'single' \| string = 'none';\n\n /\n Controls how the helper text should handle overflow.\n * - `'none'`: No overflow handling; the label displays normally.\n * - `'single'`: The label will be truncated with an ellipsis if it overflows a single line.\n * - `string`: Custom overflow handling mode.\n \n @default 'none'\n /\n @Prop({ reflect: true }) overflowHelper: 'none' \| 'single' \| string = 'none';\n\n @State() styles = {};\n\n @Element() host: HTMLElement;\n\n @Event() onchange: EventEmitter<{ value: string; checked: boolean; indeterminate: boolean }>;\n\n @AttachInternals() internals: ElementInternals;\n\n isDarkBackground = () => this.background === 'dark';\n\n isDarkIconColor = () => this.iconColor === 'dark';\n\n @Watch('size')\n sizeHandler() {\n this.styles = {\n ...this.styles,\n '--size': `${formsSizes[this.size].size}px`,\n '--gap': `${formsSizes[this.size].gap}px`,\n };\n }\n\n /\n Watches changes in color and background properties to update styles.\n /\n @Watch('color')\n @Watch('background')\n setColors() {\n const colors = [\n { name: '--color-base', background: `${this.color}-base` },\n { name: '--color-lighter', background: `${this.color}-lighter` },\n { name: '--color-light', background: `${this.color}-light` },\n { name: '--color-dark', background: `${this.color}-dark` },\n { name: '--info-base', background: 'info-base' },\n { name: '--error-base', background: 'error-base' },\n { name: '--success-lighter', background: 'success-lighter' },\n { name: '--success-base', background: 'success-base' },\n { name: '--success-dark', background: 'success-dark' },\n { name: '--error-lighter', background: 'error-lighter' },\n { name: '--neutral-black', background: 'neutral-black' },\n { name: '--primary-base-neutral-white', background: this.isDarkBackground() ? 'primary-base' : 'neutral-white' },\n { name: '--neutral-base-neutral-medium', background: this.isDarkBackground() ? 'neutral-base' : 'neutral-medium' },\n { name: '--neutral-black-neutral-purewhite', background: this.isDarkBackground() ? 'neutral-black' : 'neutral-purewhite' },\n { name: '--neutral-black-neutral-white', background: this.isDarkBackground() ? 'neutral-black' : 'neutral-white' },\n { name: '--neutral-darker-neutral-base', background: this.isDarkBackground() ? 'neutral-darker' : 'neutral-base' },\n { name: '--neutral-base-neutral-base', background: this.isDarkBackground() ? 'primary-base' : 'neutral-base' },\n { name: '--neutral-purewhite-neutral-dark', background: this.isDarkBackground() ? 'neutral-purewhite' : 'neutral-dark' },\n { name: '--primary-base-neutral-medium', background: this.isDarkBackground() ? 'primary-base' : 'neutral-medium' },\n { name: '--success-base-lighter', background: this.isDarkBackground() ? 'success-base' : 'success-lighter' },\n { name: '--success-dark-base', background: this.isDarkBackground() ? 'success-dark' : 'success-base' },\n { name: '--error-base-lighter', background: this.isDarkBackground() ? 'error-base' : 'error-lighter' },\n { name: '--error-dark-base', background: this.isDarkBackground() ? 'error-dark' : 'error-base' },\n ];\n\n colors.forEach(color => {\n this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background);\n });\n this.styles = { ...this.styles };\n }\n\n connectedCallback() {\n this.sizeHandler();\n this.setColors();\n }\n\n /\n Callback for form association.\n /\n formAssociatedCallback(form: { ariaLabel: string }) {\n form.ariaLabel = this.label;\n }\n\n /\n Callback to restore the switch state from the form.\n /\n formStateRestoreCallback(state: { value: string; checked: boolean; indeterminate: boolean }) {\n this.value = state.value;\n this.checked = state.checked;\n this.indeterminate = state.indeterminate;\n this.internals.setFormValue(this.value);\n }\n\n /\n Callback to reset the switch state when the form is reset.\n /\n formResetCallback() {\n this.value = '';\n this.checked = false;\n this.indeterminate = false;\n this.internals.setValidity({});\n this.internals.setFormValue(this.value);\n }\n\n /\n Callback to update the switch's disabled state when the form's disabled state changes.\n /\n formDisabledCallback(disabled: boolean) {\n this.disabled = disabled;\n }\n\n handleClick = () => {\n if (this.disabled) return;\n\n this.indeterminate = false;\n this.checked = !this.checked;\n this.internals.setFormValue(this.value);\n this.onchange.emit({ value: this.value, checked: this.checked, indeterminate: this.indeterminate });\n };\n\n getClasses() {\n const classes = {};\n classes['container'] = true;\n classes['checked'] = this.checked;\n classes['disabled'] = this.disabled;\n classes[this.background] = true;\n classes['indeterminate'] = this.indeterminate;\n classes['position'] = this.position === 'right';\n classes[this.status] = true;\n\n return classes;\n }\n\n /\n Assigns color based on status and background theme.\n * @param defaultColor Default color.\n /\n @Watch('background')\n @Watch('iconColor')\n assignColor(type: 'icon' \| 'label' \| 'message') {\n if (this.disabled) return this.isDarkBackground() ? 'neutral-dark' : 'neutral-dark';\n\n const statusColors = {\n success: {\n icon: 'success-dark',\n label: this.isDarkBackground() ? 'success-lighter' : 'success-darker',\n message: this.isDarkBackground() ? 'success-base' : 'success-dark',\n },\n error: {\n icon: 'error-dark',\n label: this.isDarkBackground() ? 'error-lighter' : 'neutral-darker',\n message: this.isDarkBackground() ? 'error-base' : 'error-dark',\n },\n default: {\n icon: this.isDarkIconColor() ? 'neutral-black' : 'neutral-purewhite',\n label: this.isDarkBackground() ? 'neutral-white' : 'neutral-black',\n message: this.isDarkBackground() ? 'primary-lighter' : 'neutral-dark',\n },\n };\n\n return statusColors[this.status][type];\n }\n\n /\n Retrieves icon element based on checkbox state.\n /\n getIcon() {\n const iconName = this.indeterminate ? 'minus' : 'check';\n const iconColor = this.assignColor('icon');\n const iconSize = this.size === 'large' ? 20 : 'micro';\n\n return <cura-icon class=\"icon\" name={iconName} size={iconSize} color={iconColor}></cura-icon>;\n }\n\n render() {\n return (\n <Host role=\"checkbox\" aria-checked={this.checked} aria-disabled={this.disabled} aria-required={this.required} aria-invalid={this.status === 'error'}>\n <div class={this.getClasses()} style={this.styles} onClick={this.handleClick}>\n <div class=\"info\">\n <div class=\"label-wrapper\">\n <cura-label\n textOverflow={this.overflowLabel}\n class={`label${this.overflowLabel === 'single' ? ' textoverflow-single' : ''}`}\n weight=\"bold\"\n size={this.size === 'large' ? 'medium' : 'xsmall'}\n color={this.assignColor('label')}\n >\n {this.label}\n </cura-label>\n {this.required && (\n <cura-paragraph lineHeight=\"0%\" marginBlock=\"0\" color=\"error-base\">\n {' '}\n </cura-paragraph>\n )}\n </div>\n <cura-label textOverflow={this.overflowHelper} color={this.assignColor('message')} size=\"xsmall\" class=\"message\">\n <slot></slot>\n </cura-label>\n </div>\n <div class={'checkbox'} tabIndex={this.ontabindex}>\n <input\n type=\"checkbox\"\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n required={this.required}\n checked={this.checked}\n indeterminate={this.indeterminate}\n />\n {this.getIcon()}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"cura-checkbox.js","mappings":"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","names":["CuraCheckbox","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/forms/cura-checkbox/cura-checkbox.scss?tag=cura-checkbox&encapsulation=shadow","src/components/forms/cura-checkbox/cura-checkbox.tsx"],"sourcesContent":["@import '../../../scss/mixins/text.scss';\n\n:host {\n display: block;\n box-sizing: border-box;\n\n min-width: 0;\n}\n\n/* Container e Layout /\n.container {\n display: flex;\n align-items: center;\n flex-direction: row-reverse;\n justify-content: start;\n gap: var(--gap);\n\n cursor: pointer;\n}\n\n.position {\n &.container {\n flex-direction: row;\n }\n\n .label-wrapper {\n justify-content: end;\n }\n\n .message {\n text-align: right;\n }\n\n .label {\n order: 1;\n }\n}\n\n.info {\n display: flex;\n flex-direction: column;\n\n overflow: hidden;\n}\n\n.label.textoverflow-single {\n @include truncate-single();\n min-width: 0;\n max-width: 100%;\n}\n\n.label-wrapper {\n display: flex;\n justify-content: start;\n align-items: center;\n gap: 5px;\n}\n\n/ Control e Checkbox /\n.control {\n width: fit-content;\n cursor: pointer;\n position: relative;\n}\n\n.checkbox {\n appearance: none;\n border: 2px solid var(--neutral-base-neutral-medium);\n border-radius: 4px;\n background: var(--neutral-black-neutral-purewhite);\n flex: 1 0;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n cursor: pointer;\n box-sizing: border-box;\n width: var(--size);\n height: var(--size);\n flex: 0 0 var(--size);\n}\n\n.icon {\n position: absolute;\n display: flex;\n opacity: 0;\n transition: opacity 0.3s;\n}\n\n/ Estados de Foco /\n.checkbox:focus {\n border-color: var(--info-base) !important;\n}\n\n/ Estado Disabled /\n.disabled .checkbox {\n background: var(--neutral-black-neutral-white);\n border-color: var(--neutral-darker-neutral-base);\n cursor: not-allowed;\n\n &:hover {\n border-color: var(--neutral-darker-neutral-base) !important;\n }\n}\n\n.disabled.checked .checkbox,\n.disabled.indeterminate .checkbox {\n background: var(--neutral-black-neutral-white);\n border-color: var(--neutral-darker-neutral-base);\n\n &:hover {\n border-color: var(--neutral-base-neutral-white);\n background: var(--primary-base-neutral-white);\n }\n}\n\n.disabled .checkbox:focus {\n border-color: var(--neutral-darker-neutral-base) !important;\n}\n\n/ Estado Checked /\n.checked .checkbox {\n border-color: var(--color-dark);\n background: var(--color-base);\n\n &:hover {\n border-color: var(--color-base) !important;\n background: var(--color-light);\n }\n}\n\n/ Estado Indeterminate /\n.indeterminate .checkbox {\n border-color: var(--color-base);\n background: var(--color-light);\n\n &:hover {\n border-color: var(--color-dark) !important;\n background: var(--color-base);\n }\n}\n\n.checked .icon,\n.indeterminate .icon {\n opacity: 1;\n}\n\n/ Hover para não disabled, default, checked, indeterminate /\n:not(.disabled):not(.checked):not(.indeterminate) .checkbox:hover {\n border-color: var(--neutral-purewhite-neutral-dark);\n}\n\n/ Estado Success /\n\n.success.dark .checkbox {\n background: var(--neutral-black);\n}\n\n.success .checkbox {\n border-color: var(--success-base);\n background: var(--success-lighter);\n\n &:hover {\n border-color: var(--success-base) !important;\n }\n}\n\n.success.checked .checkbox {\n border-color: var(--success-dark-base);\n background: var(--success-base-lighter);\n\n &:hover {\n border-color: var(--success-dark-base);\n }\n}\n\n/ Estado Error /\n\n.error.dark .checkbox {\n background: var(--neutral-black);\n}\n\n.error .checkbox {\n border-color: var(--error-base);\n background: var(--error-lighter);\n\n &:hover {\n border-color: var(--error-base) !important;\n }\n}\n\n.error.checked .checkbox {\n border-color: var(--error-dark-base);\n background: var(--error-base-lighter);\n\n &:hover {\n border-color: var(--error-dark-base);\n }\n}\n\n/ Input /\ninput {\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n}\n","import { Component, Prop, Event, Element, h, Host, Watch, EventEmitter, State, AttachInternals } from '@stencil/core';\nimport { formsSizes } from '../cura-forms.definitions';\n\n@Component({\n tag: 'cura-checkbox',\n styleUrl: 'cura-checkbox.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class CuraCheckbox {\n /\n Reflects the checked state of the checkbox.\n * Mutable property allowing state change.\n /\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n /\n Reflects the indeterminate state of the checkbox.\n * Mutable property allowing state change.\n /\n @Prop({ reflect: true, mutable: true }) indeterminate: boolean = false;\n /\n Status of the checkbox.\n * Can be 'error', 'success', or 'default'.\n /\n @Prop({ reflect: true, mutable: true }) status: 'error' \| 'success' \| 'default' = 'default';\n /\n Reflects the disabled state of the checkbox.\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n /\n Reflects the required state of the checkbox.\n /\n @Prop({ reflect: true }) required: boolean = false;\n /\n Text label associated with the checkbox.\n /\n @Prop({ reflect: true }) label: string;\n /\n Specifies the tabindex of the checkbox.\n /\n @Prop({ reflect: true }) ontabindex: number = 0;\n /\n Position of the label relative to the checkbox.\n * Can be 'left' or 'right'.\n /\n @Prop({ reflect: true }) position: 'left' \| 'right' = 'left';\n /\n Value associated with the checkbox.\n /\n @Prop({ reflect: true }) value: string;\n /\n Name attribute of the checkbox.\n /\n @Prop({ reflect: true }) name: string;\n /\n Size of the checkbox.\n * Can be 'small', 'medium', or 'large'.\n /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n /\n Background theme of the checkbox.\n * Can be 'dark' or 'light'.\n /\n @Prop() background: 'dark' \| 'light' = 'light';\n /\n iconColor theme of the checkbox.\n * Can be 'dark' or 'light'.\n /\n @Prop() iconColor: 'dark' \| 'light' = 'dark';\n /\n Color theme of the checkbox.\n /\n @Prop() color = 'accent';\n\n /\n Controls how the label text should handle overflow.\n * - `'none'`: No overflow handling; the label displays normally.\n * - `'single'`: The label will be truncated with an ellipsis if it overflows a single line.\n * - `string`: Custom overflow handling mode.\n \n @default 'none'\n /\n @Prop({ reflect: true }) overflowLabel: 'none' \| 'single' \| string = 'none';\n\n /\n Controls how the helper text should handle overflow.\n * - `'none'`: No overflow handling; the label displays normally.\n * - `'single'`: The label will be truncated with an ellipsis if it overflows a single line.\n * - `string`: Custom overflow handling mode.\n \n @default 'none'\n /\n @Prop({ reflect: true }) overflowHelper: 'none' \| 'single' \| string = 'none';\n\n @State() styles = {};\n\n @Element() host: HTMLElement;\n\n @Event() onchange: EventEmitter<{ value: string; checked: boolean; indeterminate: boolean }>;\n\n @AttachInternals() internals: ElementInternals;\n\n isDarkBackground = () => this.background === 'dark';\n\n isDarkIconColor = () => this.iconColor === 'dark';\n\n @Watch('size')\n sizeHandler() {\n this.styles = {\n ...this.styles,\n '--size': `${formsSizes[this.size].size}px`,\n '--gap': `${formsSizes[this.size].gap}px`,\n };\n }\n\n /\n Watches changes in color and background properties to update styles.\n /\n @Watch('color')\n @Watch('background')\n setColors() {\n const colors = [\n { name: '--color-base', background: `${this.color}-base` },\n { name: '--color-lighter', background: `${this.color}-lighter` },\n { name: '--color-light', background: `${this.color}-light` },\n { name: '--color-dark', background: `${this.color}-dark` },\n { name: '--info-base', background: 'info-base' },\n { name: '--error-base', background: 'error-base' },\n { name: '--success-lighter', background: 'success-lighter' },\n { name: '--success-base', background: 'success-base' },\n { name: '--success-dark', background: 'success-dark' },\n { name: '--error-lighter', background: 'error-lighter' },\n { name: '--neutral-black', background: 'neutral-black' },\n { name: '--primary-base-neutral-white', background: this.isDarkBackground() ? 'primary-base' : 'neutral-white' },\n { name: '--neutral-base-neutral-medium', background: this.isDarkBackground() ? 'neutral-base' : 'neutral-medium' },\n { name: '--neutral-black-neutral-purewhite', background: this.isDarkBackground() ? 'neutral-black' : 'neutral-purewhite' },\n { name: '--neutral-black-neutral-white', background: this.isDarkBackground() ? 'neutral-black' : 'neutral-white' },\n { name: '--neutral-darker-neutral-base', background: this.isDarkBackground() ? 'neutral-darker' : 'neutral-base' },\n { name: '--neutral-base-neutral-base', background: this.isDarkBackground() ? 'primary-base' : 'neutral-base' },\n { name: '--neutral-purewhite-neutral-dark', background: this.isDarkBackground() ? 'neutral-purewhite' : 'neutral-dark' },\n { name: '--primary-base-neutral-medium', background: this.isDarkBackground() ? 'primary-base' : 'neutral-medium' },\n { name: '--success-base-lighter', background: this.isDarkBackground() ? 'success-base' : 'success-lighter' },\n { name: '--success-dark-base', background: this.isDarkBackground() ? 'success-dark' : 'success-base' },\n { name: '--error-base-lighter', background: this.isDarkBackground() ? 'error-base' : 'error-lighter' },\n { name: '--error-dark-base', background: this.isDarkBackground() ? 'error-dark' : 'error-base' },\n ];\n\n colors.forEach(color => {\n this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background);\n });\n this.styles = { ...this.styles };\n }\n\n connectedCallback() {\n this.sizeHandler();\n this.setColors();\n }\n\n /\n Callback for form association.\n /\n formAssociatedCallback(form: { ariaLabel: string }) {\n form.ariaLabel = this.label;\n }\n\n /\n Callback to restore the switch state from the form.\n /\n formStateRestoreCallback(state: { value: string; checked: boolean; indeterminate: boolean }) {\n this.value = state.value;\n this.checked = state.checked;\n this.indeterminate = state.indeterminate;\n this.internals.setFormValue(this.value);\n }\n\n /\n Callback to reset the switch state when the form is reset.\n /\n formResetCallback() {\n this.value = '';\n this.checked = false;\n this.indeterminate = false;\n this.internals.setValidity({});\n this.internals.setFormValue(this.value);\n }\n\n /\n Callback to update the switch's disabled state when the form's disabled state changes.\n /\n formDisabledCallback(disabled: boolean) {\n this.disabled = disabled;\n }\n\n handleClick = () => {\n if (this.disabled) return;\n\n this.indeterminate = false;\n this.checked = !this.checked;\n this.internals.setFormValue(this.value);\n this.onchange.emit({ value: this.value, checked: this.checked, indeterminate: this.indeterminate });\n };\n\n getClasses() {\n const classes = {};\n classes['container'] = true;\n classes['checked'] = this.checked;\n classes['disabled'] = this.disabled;\n classes[this.background] = true;\n classes['indeterminate'] = this.indeterminate;\n classes['position'] = this.position === 'right';\n classes[this.status] = true;\n\n return classes;\n }\n\n /\n Assigns color based on status and background theme.\n * @param defaultColor Default color.\n /\n @Watch('background')\n @Watch('iconColor')\n assignColor(type: 'icon' \| 'label' \| 'message') {\n if (this.disabled) return this.isDarkBackground() ? 'neutral-dark' : 'neutral-dark';\n\n const statusColors = {\n success: {\n icon: 'success-dark',\n label: this.isDarkBackground() ? 'success-lighter' : 'success-darker',\n message: this.isDarkBackground() ? 'success-base' : 'success-dark',\n },\n error: {\n icon: 'error-dark',\n label: this.isDarkBackground() ? 'error-lighter' : 'neutral-darker',\n message: this.isDarkBackground() ? 'error-base' : 'error-dark',\n },\n default: {\n icon: this.isDarkIconColor() ? 'neutral-black' : 'neutral-purewhite',\n label: this.isDarkBackground() ? 'neutral-white' : 'neutral-black',\n message: this.isDarkBackground() ? 'primary-lighter' : 'neutral-dark',\n },\n };\n\n return statusColors[this.status][type];\n }\n\n /\n Retrieves icon element based on checkbox state.\n /\n getIcon() {\n const iconName = this.indeterminate ? 'minus' : 'check';\n const iconColor = this.assignColor('icon');\n const iconSize = this.size === 'large' ? 20 : 'micro';\n\n return <cura-icon class=\"icon\" name={iconName} size={iconSize} color={iconColor}></cura-icon>;\n }\n\n render() {\n return (\n <Host role=\"checkbox\" aria-checked={this.checked} aria-disabled={this.disabled} aria-required={this.required} aria-invalid={this.status === 'error'}>\n <div class={this.getClasses()} style={this.styles} onClick={this.handleClick}>\n <div class=\"info\">\n <div class=\"label-wrapper\">\n <cura-label\n textOverflow={this.overflowLabel}\n class={`label${this.overflowLabel === 'single' ? ' textoverflow-single' : ''}`}\n weight=\"bold\"\n size={this.size === 'large' ? 'medium' : 'xsmall'}\n color={this.assignColor('label')}\n >\n {this.label}\n </cura-label>\n {this.required && (\n <cura-paragraph lineHeight=\"0%\" marginBlock=\"0\" color=\"error-base\">\n {' '}\n </cura-paragraph>\n )}\n </div>\n <cura-label textOverflow={this.overflowHelper} color={this.assignColor('message')} size=\"xsmall\" class=\"message\">\n <slot></slot>\n </cura-label>\n </div>\n <div class={'checkbox'} tabIndex={this.ontabindex}>\n <input\n type=\"checkbox\"\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n required={this.required}\n checked={this.checked}\n indeterminate={this.indeterminate}\n />\n {this.getIcon()}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1,20 +1,38 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H, h, d as Host } from './p-D1cPOZpG.js';
 const curaDisplayCss = ":host{display:block;font-size:var(--font-size-base)}:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-family:var(--font-family);font-size:3em;font-weight:var(--font-weight-bold);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0px}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:2.2857142857em;letter-spacing:-1.68px}: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-bold)}:host h1 ::slotted(a),:host h2 ::slotted(a),:host h3 ::slotted(a),:host h4 ::slotted(a),:host h5 ::slotted(a),:host h6 ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-underline-offset:10%;cursor:pointer}:host h1 ::slotted(u),:host h2 ::slotted(u),:host h3 ::slotted(u),:host h4 ::slotted(u),:host h5 ::slotted(u),:host h6 ::slotted(u){text-underline-offset:10%}:host h1 ::slotted(i),:host h1 ::slotted(em),:host h2 ::slotted(i),:host h2 ::slotted(em),:host h3 ::slotted(i),:host h3 ::slotted(em),:host h4 ::slotted(i),:host h4 ::slotted(em),:host h5 ::slotted(i),:host h5 ::slotted(em),:host h6 ::slotted(i),:host h6 ::slotted(em){font-style:italic;font-weight:var(--font-weight-medium)}:host h1 ::slotted(abbr),:host h2 ::slotted(abbr),:host h3 ::slotted(abbr),:host h4 ::slotted(abbr),:host h5 ::slotted(abbr),:host h6 ::slotted(abbr){color:var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}@media (min-width: 769px) and (max-width: 1920px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:3.429em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:2.8571428571em;letter-spacing:-1.92px}}@media (min-width: 1921px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:4.286em;line-height:calc(var(--line-height) + 5%)}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:3.5714285714em;letter-spacing:-1.2px}}";
-const CuraDisplayStyle0 = curaDisplayCss;
-const CuraDisplay$1 = /*@__PURE__*/ proxyCustomElement(class CuraDisplay extends HTMLElement {
+const CuraDisplay$1 = /*@__PURE__*/ proxyCustomElement(class CuraDisplay extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.theme = window.CuraAPI.theme;
+        /**
+         * Heading level for semantics. Will render the related HTML tag <h1>, <h2>, ...
+         * Values: 1(default) to 6.
+         */
         this.level = 1;
+        /**
+         * Display size.
+         * Values: 'large' (default) | 'small'.
+         */
         this.size = 'large';
+        /**
+        * Apply design system color to interactive elements like <a> and <abbr> inside the text.
+        * Values: Color from design system scheme. Default to 'accent-dark'.
+        */
         this.spotColor = 'accent-dark';
-        this.color = undefined;
+        /**
+         * CSS margin-block property values.
+         * Default to 1.25em
+         */
         this.marginBlock = '1.25em';
+        /**
+         * CSS line-height property values.
+         * Default to 140%
+         */
         this.lineHeight = '120%';
+        this.theme = window.CuraAPI.theme;
         this.styles = {};
     }
     handleChangeColor() {
@@ -74,7 +92,7 @@ const CuraDisplay$1 = /*@__PURE__*/ proxyCustomElement(class CuraDisplay extends
         "color": ["handleChangeColor"],
         "spotColor": ["handleChangeColor"]
     }; }
-    static get style() { return CuraDisplayStyle0; }
+    static get style() { return curaDisplayCss; }
 }, [1, "cura-display", {
         "level": [514],
         "size": [513],
@@ -105,5 +123,6 @@ const CuraDisplay = CuraDisplay$1;
 const defineCustomElement = defineCustomElement$1;
 export { CuraDisplay, defineCustomElement };
+//# sourceMappingURL=cura-display.js.map
 //# sourceMappingURL=cura-display.js.map

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

	@@ -1 +1 @@
1	- {"file":"cura-display.js","mappings":";;AAAA,MAAM,cAAc,GAAG,mvEAAmvE,~~CAAC;AAC3wE~~,~~0BAAe~~,~~cAAc;;MCMhBA~~,~~aAAW;;;;;QAqDtB~~,~~UAAK~~,~~GAAG~~,~~MAAM~~,~~CAAC~~,~~OAAO~~,~~CAAC~~,~~KAAK~~,~~CAAC~~;~~qBA/CyB~~,CAAC;~~oBAMN~~,OAAO;~~yBAMpC~~,aAAa~~;;2BAiBI~~,QAAQ;~~0BAMT~~,MAAM;~~sBAaxB~~,EAAE~~;;IA3BpB~~,iBAAiB;QACf,IAAI,CAAC,SAAS,EAAE,~~CAAC;KAClB;IA2BD~~,~~iBAAiB~~;QACf,IAAI,CAAC,iBAAiB,EAAE~~,CAAC~~;~~QACzB~~,IAAI,CAAC,SAAS,EAAE,~~CAAC;KAClB;IAED~~,~~iBAAiB~~;QACf,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE~~,CAAC~~;~~QAC7C~~,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE~~,CAAC~~;~~QAC/C~~,IAAI,CAAC,MAAM,GAAG;~~YACZ~~,eAAe,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC;YAChE,aAAa,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE;~~YACnD~~,oBAAoB,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI;~~YACvC~~,sBAAsB,EAAE,IAAI,CAAC,OAAO,CAAC~~,MAAM~~;~~SAC5C~~,~~CAAC;KACH;IAED~~,~~iBAAiB~~;QACf,OAAO;YACL,gBAAgB,EAAE,IAAI,CAAC,WAAW;YAClC,kBAAkB,EAAE,IAAI,CAAC,YAAY;YACrC,eAAe,EAAE,IAAI,CAAC~~,UAAU~~;~~SACjC~~,~~CAAC;KACH;IAED~~,~~SAAS~~;~~QACP~~,MAAM,SAAS,GAAG,IAAI,CAAC~~,KAAK~~;~~cACxB~~,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK~~,CAAC~~;~~cACtC~~,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE~~,CAAC~~;~~QAChC~~,IAAI,CAAC,MAAM,~~mCACN~~,IAAI,CAAC,MAAM,~~KACd~~,cAAc,EAAE,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAAC,EACzE,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,~~GAAG~~,IAAI,CAAC,SAAS,~~EAAE~~,CAAC,GAChE,~~CAAC;KACH;IAED~~,~~UAAU~~;;QACR,MAAM,OAAO,GAAG,EAAE~~,CAAC~~;~~QACnB~~,OAAO,CAAC,~~GAAG~~,~~MAAA~~,IAAI,CAAC,IAAI,~~0CAAE~~,WAAW,EAAE,~~EAAE~~,CAAC,GAAG,IAAI~~,CAAC~~;~~QAC9C~~,OAAO,OAAO,~~CAAC;KAChB;IAED~~,~~aAAa~~;~~QACX~~,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE~~,CAAC~~;~~QAClC~~,MAAM,IAAI,GAAG;YACX,GAAG,EAAE,~~UAAI~~,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,~~IAAE~~,~~eAAa~~,CAAK;YAC/D,GAAG,EAAE,~~UAAI~~,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,~~IAAE~~,~~eAAa~~,CAAK;YAC/D,GAAG,EAAE,~~UAAI~~,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,~~IAAE~~,~~eAAa~~,CAAK;YAC/D,GAAG,EAAE,~~UAAI~~,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,~~IAAE~~,~~eAAa~~,CAAK;YAC/D,GAAG,EAAE,~~UAAI~~,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,~~IAAE~~,~~eAAa~~,CAAK;YAC/D,GAAG,EAAE,~~UAAI~~,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,~~IAAE~~,~~eAAa~~,CAAK;YAC/D,SAAS,EAAE,~~UAAI~~,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,~~IAAE~~,~~eAAa~~,~~CAAK;SACtE~~,~~CAAC~~;~~QACF~~,OAAO,IAAI,CAAC,~~GAAG~~,IAAI,CAAC,KAAK,~~EAAE~~,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,~~CAAC;KACjD;IAED~~,~~MAAM~~;~~QACJ~~,QACE,~~EAAC~~,IAAI,~~qDAAC~~,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE,EAAE,IAAI,EAAC,SAAS,~~gBAAa~~,IAAI,CAAC,KAAK,~~IACxE~~,IAAI,CAAC,aAAa,EAAE,CACjB~~,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["CuraDisplay"],"sources":["src/components/text/cura-display/cura-display.scss?tag=cura-display&encapsulation=shadow","src/components/text/cura-display/cura-display.tsx"],"sourcesContent":["@import '../../../scss/mixins/responsive.scss';\n\n:host {\n display: block;\n font-size: var(--font-size-base);\n\n h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-family);\n font-size: 3em;\n font-weight: var(--font-weight-bold);\n color: var(--color-body);\n line-height: var(--line-height);\n margin-block: var(--margin-block);\n letter-spacing: 0px;\n\n &.small {\n font-size: 2.2857142857142856em;\n letter-spacing: -1.68px;\n }\n\n ::slotted(b), ::slotted(strong) {\n font-weight: var(--font-weight-bold);\n }\n\n ::slotted(a) {\n font-weight: var(--font-weight-bold);\n color: var(--color-link);\n text-underline-offset: 10%;\n cursor: pointer;\n }\n\n ::slotted(u) {\n text-underline-offset: 10%;\n }\n\n ::slotted(i), ::slotted(em) {\n font-style: italic;\n font-weight: var(--font-weight-medium);\n }\n\n ::slotted(abbr) {\n color: var(--color-link);\n text-decoration: underline dashed 1px var(--color-link);\n text-underline-offset: 10%;\n cursor: default;\n }\n }\n\n @include medium-large() {\n h1, h2, h3, h4, h5, h6 {\n font-size: 3.429em;\n\n &.small {\n font-size: 2.857142857142857em;\n letter-spacing: -1.92px;\n }\n }\n }\n\n @include xlarge-only() {\n h1, h2, h3, h4, h5, h6 {\n font-size: 4.286em;\n line-height: calc(var(--line-height) + 5%);\n\n &.small {\n font-size: 3.5714285714285716em;\n letter-spacing: -1.2px;\n }\n }\n }\n\n}\n","import { Component, Host, h, Element, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n tag: 'cura-display',\n styleUrl: 'cura-display.scss',\n shadow: true,\n})\nexport class CuraDisplay {\n\n /*\n Heading level for semantics. Will render the related HTML tag <h1>, <h2>, ...\n * Values: 1(default) to 6.\n /\n @Prop({reflect: true}) level: 1 \| 2 \| 3 \| 4 \| 5 \| 6 = 1;\n\n /\n Display size.\n * Values: 'large' (default) \| 'small'.\n /\n @Prop({reflect: true}) size: 'large' \| 'small' = 'large';\n\n /\n Apply design system color to interactive elements like <a> and <abbr> inside the text.\n * Values: Color from design system scheme. Default to 'accent-dark'.\n /\n @Prop() spotColor = 'accent-dark';\n\n /\n Text color.\n * Values: Color from design system scheme. Default to the font color from the theme.\n /\n @Prop() color: string;\n @Watch('color')\n @Watch('spotColor')\n handleChangeColor() {\n this.setColors();\n }\n\n /\n CSS margin-block property values.\n * Default to 1.25em\n /\n @Prop({reflect: true}) marginBlock = '1.25em';\n\n /\n CSS line-height property values.\n * Default to 140%\n /\n @Prop({reflect: true}) lineHeight = '120%';\n\n /\n Host element <cura-display>\n /\n @Element() host: HTMLElement;\n\n /\n Internal Props\n */\n weights: any;\n fontSizeBase: string;\n theme = window.CuraAPI.theme;\n @State() styles = {};\n\n connectedCallback() {\n this.setFontProperties();\n this.setColors();\n }\n\n setFontProperties() {\n this.weights = this.theme.fonts.getWeights();\n this.fontSizeBase = this.theme.fonts.getSize();\n this.styles = {\n '--font-family': window.CuraAPI.theme.fonts.getFamily('display'),\n '--font-size': window.CuraAPI.theme.fonts.getSize(),\n '--font-weight-bold': this.weights.bold,\n '--font-weight-medium': this.weights.medium\n };\n }\n\n hostCSSProperties() {\n return {\n '--margin-block': this.marginBlock,\n '--font-size-base': this.fontSizeBase,\n '--line-height': this.lineHeight\n };\n }\n\n setColors() {\n const fontColor = this.color\n ? this.theme.colors.getColor(this.color)\n : this.theme.fonts.getColor();\n this.styles = {\n ...this.styles,\n '--color-body': fontColor \|\| this.theme.colors.getColor('neutral-darker'),\n '--color-link': this.theme.colors.getColor(`${this.spotColor}`)\n };\n }\n\n getClasses() {\n const classes = {};\n classes[`${this.size?.toLowerCase()}`] = true;\n return classes;\n }\n\n getHeadingTag() {\n const classes = this.getClasses();\n const tags = {\n '1': <h1 style={this.styles} class={classes}><slot></slot></h1>,\n '2': <h2 style={this.styles} class={classes}><slot></slot></h2>,\n '3': <h3 style={this.styles} class={classes}><slot></slot></h3>,\n '4': <h4 style={this.styles} class={classes}><slot></slot></h4>,\n '5': <h5 style={this.styles} class={classes}><slot></slot></h5>,\n '6': <h6 style={this.styles} class={classes}><slot></slot></h6>,\n 'default': <h1 style={this.styles} class={classes}><slot></slot></h1>\n };\n return tags[`${this.level}`] \|\| tags['default'];\n }\n\n render() {\n return (\n <Host style={this.hostCSSProperties()} role=\"heading\" aria-level={this.level}>\n { this.getHeadingTag() }\n </Host>\n );\n }\n\n}\n"],"version":3}
1	+ {"file":"cura-display.js","mappings":"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","names":["CuraDisplay","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/text/cura-display/cura-display.scss?tag=cura-display&encapsulation=shadow","src/components/text/cura-display/cura-display.tsx"],"sourcesContent":["@import '../../../scss/mixins/responsive.scss';\n\n:host {\n display: block;\n font-size: var(--font-size-base);\n\n h1, h2, h3, h4, h5, h6 {\n font-family: var(--font-family);\n font-size: 3em;\n font-weight: var(--font-weight-bold);\n color: var(--color-body);\n line-height: var(--line-height);\n margin-block: var(--margin-block);\n letter-spacing: 0px;\n\n &.small {\n font-size: 2.2857142857142856em;\n letter-spacing: -1.68px;\n }\n\n ::slotted(b), ::slotted(strong) {\n font-weight: var(--font-weight-bold);\n }\n\n ::slotted(a) {\n font-weight: var(--font-weight-bold);\n color: var(--color-link);\n text-underline-offset: 10%;\n cursor: pointer;\n }\n\n ::slotted(u) {\n text-underline-offset: 10%;\n }\n\n ::slotted(i), ::slotted(em) {\n font-style: italic;\n font-weight: var(--font-weight-medium);\n }\n\n ::slotted(abbr) {\n color: var(--color-link);\n text-decoration: underline dashed 1px var(--color-link);\n text-underline-offset: 10%;\n cursor: default;\n }\n }\n\n @include medium-large() {\n h1, h2, h3, h4, h5, h6 {\n font-size: 3.429em;\n\n &.small {\n font-size: 2.857142857142857em;\n letter-spacing: -1.92px;\n }\n }\n }\n\n @include xlarge-only() {\n h1, h2, h3, h4, h5, h6 {\n font-size: 4.286em;\n line-height: calc(var(--line-height) + 5%);\n\n &.small {\n font-size: 3.5714285714285716em;\n letter-spacing: -1.2px;\n }\n }\n }\n\n}\n","import { Component, Host, h, Element, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n tag: 'cura-display',\n styleUrl: 'cura-display.scss',\n shadow: true,\n})\nexport class CuraDisplay {\n\n /*\n Heading level for semantics. Will render the related HTML tag <h1>, <h2>, ...\n * Values: 1(default) to 6.\n /\n @Prop({reflect: true}) level: 1 \| 2 \| 3 \| 4 \| 5 \| 6 = 1;\n\n /\n Display size.\n * Values: 'large' (default) \| 'small'.\n /\n @Prop({reflect: true}) size: 'large' \| 'small' = 'large';\n\n /\n Apply design system color to interactive elements like <a> and <abbr> inside the text.\n * Values: Color from design system scheme. Default to 'accent-dark'.\n /\n @Prop() spotColor = 'accent-dark';\n\n /\n Text color.\n * Values: Color from design system scheme. Default to the font color from the theme.\n /\n @Prop() color: string;\n @Watch('color')\n @Watch('spotColor')\n handleChangeColor() {\n this.setColors();\n }\n\n /\n CSS margin-block property values.\n * Default to 1.25em\n /\n @Prop({reflect: true}) marginBlock = '1.25em';\n\n /\n CSS line-height property values.\n * Default to 140%\n /\n @Prop({reflect: true}) lineHeight = '120%';\n\n /\n Host element <cura-display>\n /\n @Element() host: HTMLElement;\n\n /\n Internal Props\n */\n weights: any;\n fontSizeBase: string;\n theme = window.CuraAPI.theme;\n @State() styles = {};\n\n connectedCallback() {\n this.setFontProperties();\n this.setColors();\n }\n\n setFontProperties() {\n this.weights = this.theme.fonts.getWeights();\n this.fontSizeBase = this.theme.fonts.getSize();\n this.styles = {\n '--font-family': window.CuraAPI.theme.fonts.getFamily('display'),\n '--font-size': window.CuraAPI.theme.fonts.getSize(),\n '--font-weight-bold': this.weights.bold,\n '--font-weight-medium': this.weights.medium\n };\n }\n\n hostCSSProperties() {\n return {\n '--margin-block': this.marginBlock,\n '--font-size-base': this.fontSizeBase,\n '--line-height': this.lineHeight\n };\n }\n\n setColors() {\n const fontColor = this.color\n ? this.theme.colors.getColor(this.color)\n : this.theme.fonts.getColor();\n this.styles = {\n ...this.styles,\n '--color-body': fontColor \|\| this.theme.colors.getColor('neutral-darker'),\n '--color-link': this.theme.colors.getColor(`${this.spotColor}`)\n };\n }\n\n getClasses() {\n const classes = {};\n classes[`${this.size?.toLowerCase()}`] = true;\n return classes;\n }\n\n getHeadingTag() {\n const classes = this.getClasses();\n const tags = {\n '1': <h1 style={this.styles} class={classes}><slot></slot></h1>,\n '2': <h2 style={this.styles} class={classes}><slot></slot></h2>,\n '3': <h3 style={this.styles} class={classes}><slot></slot></h3>,\n '4': <h4 style={this.styles} class={classes}><slot></slot></h4>,\n '5': <h5 style={this.styles} class={classes}><slot></slot></h5>,\n '6': <h6 style={this.styles} class={classes}><slot></slot></h6>,\n 'default': <h1 style={this.styles} class={classes}><slot></slot></h1>\n };\n return tags[`${this.level}`] \|\| tags['default'];\n }\n\n render() {\n return (\n <Host style={this.hostCSSProperties()} role=\"heading\" aria-level={this.level}>\n { this.getHeadingTag() }\n </Host>\n );\n }\n\n}\n"],"version":3}

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

@@ -1,10 +1,9 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './cura-heading2.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-D1cPOZpG.js';
+import { d as defineCustomElement$2 } from './p-BHEafDKD.js';
 const curaDropdownSearchCategoryCss = ":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);padding:calc(var(--cura-spacing-base) * 3px) 0}:host(:last-child) .component-container{border-bottom:none !important}";
-const CuraDropdownSearchCategoryStyle0 = curaDropdownSearchCategoryCss;
-const CuraDropdownSearchCategory$1 = /*@__PURE__*/ proxyCustomElement(class CuraDropdownSearchCategory extends HTMLElement {
+const CuraDropdownSearchCategory$1 = /*@__PURE__*/ proxyCustomElement(class CuraDropdownSearchCategory extends H {
     constructor() {
         super();
         this.__registerHost();
@@ -20,7 +19,7 @@ const CuraDropdownSearchCategory$1 = /*@__PURE__*/ proxyCustomElement(class Cura
     render() {
         return (h(Host, { key: '511391a8c6c1c998b04e3093838173ae76549715' }, h("div", { key: '63da720bb3d2cc354ef5f1e9ceaf0f2f9c396f4e', class: "component-container", style: this.styles }, h("cura-heading", { key: 'ba003607e581d4abaf2e6d617f94e3174d04a4b3', size: 'xsmall', weight: 'bold', color: 'neutral-dark', marginBlock: '0', lineHeight: '1em' }, h("slot", { key: '80b14ff99b42a64082895db81b4dbe78cd7545a3' })))));
     }
-    static get style() { return CuraDropdownSearchCategoryStyle0; }
+    static get style() { return curaDropdownSearchCategoryCss; }
 }, [1, "cura-dropdown-search-category"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
@@ -45,5 +44,6 @@ const CuraDropdownSearchCategory = CuraDropdownSearchCategory$1;
 const defineCustomElement = defineCustomElement$1;
 export { CuraDropdownSearchCategory, defineCustomElement };
+//# sourceMappingURL=cura-dropdown-search-category.js.map
 //# sourceMappingURL=cura-dropdown-search-category.js.map

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

	@@ -1 +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/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}
1	+ {"file":"cura-dropdown-search-category.js","mappings":";;;AAAA,MAAM,6BAA6B,GAAG,mdAAmd;;MCO5eA,4BAA0B,iBAAAC,kBAAA,CAAA,MAAA,0BAAA,SAAAC,CAAA,CAAA;AALvC,IAAA,WAAA,GAAA;;;;AAOE,QAAA,IAAM,CAAA,MAAA,GAAG,EAAE;QACX,IAAA,CAAA,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK;AAmB7B;IAjBC,iBAAiB,GAAA;QACf,IAAI,CAAC,MAAM,GAAG;YACZ,iBAAiB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe;SAC9D;;IAGH,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAA,EACjD,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,EAAC,WAAW,EAAC,GAAG,EAAC,UAAU,EAAC,KAAK,EAAA,EAC7F,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACA,CACX,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraDropdownSearchCategory","__stencil_proxyCustomElement","HTMLElement"],"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 CHANGED Viewed

@@ -1,15 +1,14 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './cura-heading2.js';
+import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-D1cPOZpG.js';
+import { d as defineCustomElement$2 } from './p-BHEafDKD.js';
 const curaDropdownSearchNotFoundCss = ":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);border-bottom:none;cursor:default}:host .component-container cura-heading{--margin-block:0 !important;flex:1}";
-const CuraDropdownSearchNotFoundStyle0 = curaDropdownSearchNotFoundCss;
-const CuraDropdownSearchNotFound$1 = /*@__PURE__*/ proxyCustomElement(class CuraDropdownSearchNotFound extends HTMLElement {
+const CuraDropdownSearchNotFound$1 = /*@__PURE__*/ proxyCustomElement(class CuraDropdownSearchNotFound extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.actionclick = createEvent(this, "actionclick", 7);
+        this.actionclick = createEvent(this, "actionclick");
         this.handleClick = (ev) => {
             this.actionclick.emit();
             ev.preventDefault();
@@ -19,7 +18,7 @@ const CuraDropdownSearchNotFound$1 = /*@__PURE__*/ proxyCustomElement(class Cura
     render() {
         return (h(Host, { key: '899559f0e05394638cd9c6dd61897383453ed176' }, h("div", { key: '0b1ed35b82f1df7feac928ab84e08149a38a79a3', class: "component-container", onClick: this.handleClick }, h("cura-heading", { key: '49f423b01e6719790bf7f3bcda6f3239042c0c9f', size: "xsmall", weight: "bold", color: "error-dark" }, h("slot", { key: '4fbcfb5602729f92f84a22d003d5b2e66e481b6c' })))));
     }
-    static get style() { return CuraDropdownSearchNotFoundStyle0; }
+    static get style() { return curaDropdownSearchNotFoundCss; }
 }, [1, "cura-dropdown-search-not-found"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
@@ -44,5 +43,6 @@ const CuraDropdownSearchNotFound = CuraDropdownSearchNotFound$1;
 const defineCustomElement = defineCustomElement$1;
 export { CuraDropdownSearchNotFound, defineCustomElement };
+//# sourceMappingURL=cura-dropdown-search-not-found.js.map
 //# sourceMappingURL=cura-dropdown-search-not-found.js.map

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

	@@ -1 +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/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}
1	+ {"file":"cura-dropdown-search-not-found.js","mappings":";;;AAAA,MAAM,6BAA6B,GAAG,2cAA2c;;MCOpeA,4BAA0B,iBAAAC,kBAAA,CAAA,MAAA,0BAAA,SAAAC,CAAA,CAAA;AALvC,IAAA,WAAA,GAAA;;;;;AASE,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,EAAS,KAAI;AAC1B,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;YACvB,EAAE,CAAC,cAAc,EAAE;YACnB,EAAE,CAAC,eAAe,EAAE;AACtB,SAAC;AAaF;IAXC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAG,IAAI,CAAC,WAAW,EAAA,EACzD,CAAc,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY,EAAA,EAC1D,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACA,CACX,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraDropdownSearchNotFound","__stencil_proxyCustomElement","HTMLElement"],"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 CHANGED Viewed

@@ -1,22 +1,33 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-D1cPOZpG.js';
 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 {
+const CuraDropdownSearchOption$1 = /*@__PURE__*/ proxyCustomElement(class CuraDropdownSearchOption extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.actionclick = createEvent(this, "actionclick", 7);
-        this.selectoption = createEvent(this, "selectoption", 7);
-        this.styles = {};
-        this.theme = window.CuraAPI.theme;
-        this.value = undefined;
-        this.optionid = undefined;
+        this.actionclick = createEvent(this, "actionclick");
+        this.selectoption = createEvent(this, "selectoption");
+        /**
+         * Enable selection for this option.
+         * Default is true.
+         */
         this.selectable = true;
+        /**
+         * Selected state.
+         * This will be managed by the parent component.
+         * Default is false.
+         */
         this.selected = false;
+        /**
+         * Highlighted state.
+         * This will be managed by the parent component.
+         * Default is false.
+         */
         this.highlighted = false;
+        this.styles = {};
+        this.theme = window.CuraAPI.theme;
     }
     connectedCallback() {
         this.styles = {
@@ -51,7 +62,7 @@ const CuraDropdownSearchOption$1 = /*@__PURE__*/ proxyCustomElement(class CuraDr
     render() {
         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' })))));
     }
-    static get style() { return CuraDropdownSearchOptionStyle0; }
+    static get style() { return curaDropdownSearchOptionCss; }
 }, [1, "cura-dropdown-search-option", {
         "value": [1],
         "optionid": [1],
@@ -77,5 +88,6 @@ const CuraDropdownSearchOption = CuraDropdownSearchOption$1;
 const defineCustomElement = defineCustomElement$1;
 export { CuraDropdownSearchOption, defineCustomElement };
+//# sourceMappingURL=cura-dropdown-search-option.js.map
 //# sourceMappingURL=cura-dropdown-search-option.js.map

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

	@@ -1 +1 @@
1	- {"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}
1	+ {"file":"cura-dropdown-search-option.js","mappings":"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","names":["CuraDropdownSearchOption","__stencil_proxyCustomElement","HTMLElement"],"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}

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

@@ -1,9 +1,9 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as addBodyScrollLockClass, r as removeBodyScrollLockClass, c as checkMobile, d as defineCustomElement$4, b as checkIOS } from './cura-input-text2.js';
-import { d as defineCustomElement$6 } from './cura-button-transparent2.js';
-import { d as defineCustomElement$5 } from './cura-icon2.js';
-import { d as defineCustomElement$3 } from './cura-label2.js';
-import { d as defineCustomElement$2 } from './cura-loader-circle2.js';
+import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-D1cPOZpG.js';
+import { a as addBodyScrollLockClass, r as removeBodyScrollLockClass, c as checkMobile, b as checkIOS, d as defineCustomElement$4 } from './p-zz_zOPBZ.js';
+import { d as defineCustomElement$6 } from './p-BRDqwZ4N.js';
+import { d as defineCustomElement$5 } from './p-B5aO1chh.js';
+import { d as defineCustomElement$3 } from './p-DR1RHrEX.js';
+import { d as defineCustomElement$2 } from './p-Dqm2sAwv.js';
 class FixedElementScrollBehavior {
     constructor(hostElement, scrollableElement) {
@@ -59,19 +59,73 @@ class FixedElementScrollBehavior {
 }
 const curaDropdownSearchCss = ":host{display:block;box-sizing:border-box;position:relative}:host .component-controls{display:flex;align-items:center;justify-content:center;gap:calc(var(--cura-spacing-base) * 1px)}:host .component-controls #button-back{padding:0 0 0 calc(var(--cura-spacing-base) * 3px);width:max-content}:host .component-container{box-sizing:border-box;width:100%;position:relative;display:grid;grid-template-columns:1fr;grid-template-rows:min-content 1fr}:host .component-container.zoom{position:fixed;top:0;left:0;width:100vw;background:var(--purewhite);height:var(--height);z-index:9999;overscroll-behavior:contain}:host .component-container.zoom .component-controls{border-bottom:2px solid var(--primary);padding:calc(var(--cura-spacing-base) * 3px) 0}:host .component-container.zoom.error .component-controls{border-bottom:2px solid var(--error-dark);background-color:var(--error-lighter)}:host .component-container .dropdown-container{box-sizing:border-box;width:100%;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;padding:calc(var(--cura-spacing-base) * 3px);overscroll-behavior:contain}:host .component-container:not(.zoom) .dropdown-container{box-shadow:0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16));position:absolute;bottom:0;left:0;transform:translateY(100%);max-height:var(--max-height);background-color:var(--purewhite);border-radius:0px 0px calc(var(--cura-spacing-base) * 1px) calc(var(--cura-spacing-base) * 1px);border-bottom:2px solid var(--neutral-light);border-left:2px solid var(--neutral-light);border-right:2px solid var(--neutral-light);display:none;z-index:9997}:host .component-container:not(.zoom).dropdown-visible ::part(cura-input-field){border-radius:4px 4px 0px 0px}:host .component-container:not(.zoom).dropdown-visible ::part(cura-input-text-helper){height:0px;overflow:hidden;margin-top:0px}:host .component-container:not(.zoom).dropdown-visible .dropdown-container{display:block}";
-const CuraDropdownSearchStyle0 = curaDropdownSearchCss;
-const CuraDropdownSearch$1 = /*@__PURE__*/ proxyCustomElement(class CuraDropdownSearch extends HTMLElement {
+const CuraDropdownSearch$1 = /*@__PURE__*/ proxyCustomElement(class CuraDropdownSearch extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.termchange = createEvent(this, "termchange", 7);
-        this.optionselect = createEvent(this, "optionselect", 7);
+        this.termchange = createEvent(this, "termchange");
+        this.optionselect = createEvent(this, "optionselect");
+        /**
+         * Size of the dropdown search component
+         * Values: 'small', 'medium' or 'large' (default).
+         */
+        this.size = 'large';
+        /**
+         * Define component status.
+         * Values: 'error' or 'default'.
+         */
+        this.status = 'default';
+        /**
+         * Disabled state. Default: false.
+         */
+        this.disabled = false;
+        /**
+         * Field is required. Default: false.
+         */
+        this.required = false;
+        /**
+         * The placeholder text.
+         */
+        this.placeholder = '';
+        /**
+         * The label.
+         */
+        this.label = '';
+        /**
+         * Custom icon name. Default: search.
+         */
+        this.icon = 'search';
+        /**
+         * CSS max-height property for dropdown item.
+         * Can also be used by css property --max-height.
+         * Default: 400px
+         */
+        this.maxheight = '400px';
+        /**
+         * Readonly property value.
+         * Represents the term on the search input field.
+         */
+        this.value = '';
+        /**
+         * Delay in milliseconds to dispatch search events.
+         * Default: 400
+         */
+        this.searchdelay = 400;
+        /**
+         * Min chars to dispatch search events.
+         * Default: 3
+         */
+        this.searchminchars = 3;
+        this.styles = {};
+        this.zoomState = false;
+        this.isOnFocus = false;
         this.resizeTimeoutMs = 66;
         this.focusTimeoutMs = 500;
         this.blurTimeoutMs = 300;
         this.highlightedIndex = -1;
+        this.dropdownItems = [];
         this.dropdownSelectableItems = [];
         this.handleSlotChange = () => { this.getSlotElements(); };
         this.handleWindowResize = () => {
@@ -151,22 +205,6 @@ const CuraDropdownSearch$1 = /*@__PURE__*/ proxyCustomElement(class CuraDropdown
             ev.preventDefault();
             ev.stopPropagation();
         };
-        this.name = undefined;
-        this.size = 'large';
-        this.status = 'default';
-        this.disabled = false;
-        this.required = false;
-        this.placeholder = '';
-        this.label = '';
-        this.icon = 'search';
-        this.maxheight = '400px';
-        this.value = '';
-        this.searchdelay = 400;
-        this.searchminchars = 3;
-        this.styles = {};
-        this.zoomState = false;
-        this.isOnFocus = false;
-        this.dropdownItems = [];
     }
     /**
      * Set focus to input field.
@@ -338,7 +376,7 @@ const CuraDropdownSearch$1 = /*@__PURE__*/ proxyCustomElement(class CuraDropdown
         return (h(Host, { key: '06350dc474b86ca27d1f78559fc6296fbc3aa73e', style: this.getHostCSSProperties(), role: "search", "aria-label": this.label, "aria-required": this.required, "aria-disabled": this.disabled, "aria-expanded": this.zoomState }, h("div", { key: 'e5cc22f978f014b4fb5bd9d33c73154d19991ef3', class: this.getClasses(), style: this.styles }, h("div", { key: '2f0ccd3de2ab3dd3b5b93f5225c25c6dbec517c1', class: "component-controls" }, this.isMobile && this.zoomState ? (h("cura-button-transparent", { fontColor: "dark", onClick: () => this.handleBackClick(), iconName: "arrowLeft", size: "large", iconOnly: true, color: "primary", id: "button-back" })) : '', h("cura-input-text", { key: '9c98bf9e910d5503e93addc3d34ae9739bccf9ab', disabled: this.disabled, label: this.label, part: "cura-input-field", mode: this.zoomState ? 'transparent' : 'default', required: this.required, iconName: this.icon || 'search', value: this.value, status: this.status, onValueChange: (ev) => this.handleInputValueChange(ev), onInput: (ev) => this._preventEvent(ev), onFocus: () => this.handleFocus(), onClick: (ev) => this._preventEvent(ev), onBlur: () => this.handleBlur(), onFocusout: () => this.handleFocusout(), onInputClear: (ev) => this.handleInputClear(ev), placeholder: this.placeholder, size: this.size, onKeyDown: (ev) => this.handleKeyDown(ev) }, h("slot", { key: 'e6c0a8578436f1fa1392defb6fc7b0126bb3ae33', name: "helperText" }))), h("div", { key: '06c4fb438972a42558072600bf91af9b5c94a538', class: "dropdown-container", onMouseOver: () => this.handleDropdownMouseOver() }, h("slot", { key: 'c0a63a14785e15a6fcb555732f47efa94efec930', onSlotchange: () => this.handleSlotChange() })))));
     }
     get host() { return this; }
-    static get style() { return CuraDropdownSearchStyle0; }
+    static get style() { return curaDropdownSearchCss; }
 }, [1, "cura-dropdown-search", {
         "name": [513],
         "size": [513],
@@ -402,5 +440,6 @@ const CuraDropdownSearch = CuraDropdownSearch$1;
 const defineCustomElement = defineCustomElement$1;
 export { CuraDropdownSearch, defineCustomElement };
+//# sourceMappingURL=cura-dropdown-search.js.map
 //# sourceMappingURL=cura-dropdown-search.js.map