npm - @rededor/cura - Versions diffs - 1.0.0 → 1.1.0 - Mend

@rededor/cura 1.0.0 → 1.1.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 (165) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"cura-dropdown-search.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-dropdown-search/cura-dropdown-search.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, State, Event, EventEmitter, Element, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'cura-dropdown-search',\n styleUrl: 'cura-dropdown-search.scss',\n shadow: true,\n})\nexport class CuraDropdownSearch {\n /*\n Define the status of the dropdown search.\n /\n @Prop({ reflect: true }) status: 'error' \| 'default' = 'default';\n\n /\n Whether the select component is disabled.\n * Reflects as an attribute in the DOM.\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n The name of the dropdown search component.\n /\n @Prop({ reflect: true }) name: string;\n\n /\n Indicates if the dropdown search is required.\n /\n @Prop({ reflect: true, mutable: true }) required: boolean = false;\n\n /\n Indicates if the dropdown search is selected.\n /\n @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n\n /\n The value of the dropdown search.\n /\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n /\n The placeholder text for the dropdown search.\n /\n @Prop({ reflect: true, mutable: true }) placeholder: string = '';\n\n /\n The label for the dropdown search.\n /\n @Prop({ reflect: true, mutable: true }) label: string = '';\n\n /\n Custom icon name. Default: search.\n /\n @Prop({reflect: true}) iconName = 'search';\n\n /\n CSS max-height property for dropdown item.\n * Default to 630px\n /\n @Prop({reflect: true}) dropdownMaxHeight = '630px';\n\n /\n Reference to the host element.\n /\n @Element() host: HTMLElement;\n\n /\n Indicates if the overlay is visible.\n /\n @State() overlayVisible: boolean = false;\n\n /\n Event emitted when the value changes.\n /\n @Event() valueChanged: EventEmitter<string>;\n\n /\n Indicates if the dropdown is open.\n /\n @State() isDropdownOpen: boolean = false;\n\n /\n Styles for the component.\n\n /\n @State() styles = {};\n\n /\n Indicates if the component is being viewed on a mobile device.\n /\n @State() isMobile: boolean = window.innerWidth < 768;\n\n /\n The mode of the dropdown search.\n /\n @State() mode: 'default' \| 'transparent' = 'default';\n\n @Event() onselect: EventEmitter;\n\n @State() inputTextRef!: HTMLCuraInputTextElement;\n\n /\n Indicates if the input is on blur.\n /\n @State() isOnBlurInput: boolean = true;\n\n /\n The index of the currently hovered option.\n /\n @State() hoveredIndex: number = -1;\n\n /\n The options for the dropdown search.\n * @type {HTMLCuraDropdownSearchOptionElement[]}\n */\n\n weights;\n\n private overlayElement: HTMLDivElement \| null = null;\n\n @State() options: HTMLCuraDropdownSearchOptionElement[] = [];\n\n connectedCallback() {\n this.weights = window.CuraAPI.theme.fonts.getWeights();\n this.styles['--info-base'] = window.CuraAPI.theme.colors.getColor('info-base');\n this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor('neutral-purewhite');\n this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor('neutral-light');\n this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor('neutral-dark');\n this.styles['--neutral-black-shadow'] = window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16);\n this.styles['--error-dark'] = window.CuraAPI.theme.colors.getColor('error-dark');\n this.styles['--error-lighter'] = window.CuraAPI.theme.colors.getColor('error-lighter');\n this.styles['--breakpoints'] = window.CuraAPI.theme.breakpoints.get();\n this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n this.styles['--font-weight-medium'] = this.weights.medium;\n }\n\n @Watch('value')\n onValueChange(newValue: string) {\n this.updateSelectedOption(newValue);\n this.valueChanged.emit(newValue);\n }\n\n componentWillLoad() {\n this.updateSelectedOption(this.value);\n }\n\n componentDidRender() {\n if (this.isDropdownOpen && this.isMobile) {\n this.showOverlay();\n } else {\n this.removeOverlay();\n }\n }\n componentDidLoad() {\n window.addEventListener('resize', this.handleResize);\n }\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.handleResize);\n }\n\n private showOverlay() {\n if (!this.overlayElement) {\n this.overlayElement = document.createElement('div');\n this.overlayElement.className = 'dropdown-overlay';\n this.overlayElement.style.position = 'fixed';\n this.overlayElement.style.top = '0';\n this.overlayElement.style.left = '0';\n this.overlayElement.style.width = '100%';\n this.overlayElement.style.height = '100%';\n this.overlayElement.style.zIndex = '9999';\n this.overlayElement.style.backgroundColor = 'white';\n document.body.appendChild(this.overlayElement);\n }\n }\n\n private removeOverlay() {\n if (this.overlayElement && this.overlayElement.parentNode === document.body) {\n document.body.removeChild(this.overlayElement);\n this.overlayElement = null;\n }\n }\n\n private handleSlotChange = () => {\n this.options = Array.from(this.host.querySelectorAll('cura-dropdown-search-option'));\n this.addClickListenersToOptions();\n this.updateHoveredIndex();\n };\n\n private addClickListenersToOptions() {\n this.options.forEach((option, index) => {\n option.addEventListener('optionSelected', () => this.onSelectedOption(index));\n });\n }\n\n private updateSelectedOption(value: string) {\n const selectedOptionIndex = this.options.findIndex(option => option.getAttribute('value') === value);\n this.hoveredIndex = selectedOptionIndex;\n this.updateOptionAttribute('hovered', this.hoveredIndex);\n this.updateOptionAttribute('selected', this.hoveredIndex);\n\n this.scrollIntoView();\n }\n\n private handleInputChange = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.value = input.value;\n this.onValueChange(this.value);\n // this.valueChanged.emit(this.value);\n };\n\n private onSelectedOption(index: number) {\n const selectedOption = this.options[index];\n if(selectedOption.selectable) {\n const selectedValue = selectedOption.getAttribute('value') \|\| selectedOption.textContent;\n\n this.value = selectedValue \|\| '';\n this.updateSelectedOption(this.value);\n\n this.isDropdownOpen = false;\n this.isOnBlurInput = true;\n this.removeOverlay();\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n this.moveHighlight(1);\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n this.moveHighlight(-1);\n } else if (event.key === 'Enter') {\n event.preventDefault();\n if (this.hoveredIndex > -1) {\n this.handleOnBlur();\n this.onSelectedOption(this.hoveredIndex);\n }\n }\n };\n\n private moveHighlight(direction: number) {\n const visibleOptions = this.options;\n const newIndex = (this.hoveredIndex + direction + visibleOptions.length) % visibleOptions.length;\n this.hoveredIndex = newIndex;\n this.updateOptionAttribute('hovered', this.hoveredIndex);\n this.scrollIntoView();\n }\n\n private updateOptionAttribute(attribute: string, indexToUpdate: number) {\n this.options.forEach((option, index) => {\n (option as any)[attribute] = index === indexToUpdate;\n });\n }\n\n private updateHoveredIndex() {\n const visibleOptions = this.options;\n const currentValue = this.value;\n this.hoveredIndex = visibleOptions.findIndex(option => option.getAttribute('value') === currentValue);\n }\n\n private scrollIntoView() {\n const container = this.host.shadowRoot?.querySelector('.dropdown-search-list');\n const hoveredOption = this.options[this.hoveredIndex];\n\n if (container && hoveredOption) {\n const optionRect = hoveredOption.getBoundingClientRect();\n const containerRect = container.getBoundingClientRect();\n\n if (optionRect.bottom > containerRect.bottom) {\n container.scrollTop += optionRect.bottom - containerRect.bottom;\n }\n\n if (optionRect.top < containerRect.top) {\n container.scrollTop -= containerRect.top - optionRect.top;\n }\n }\n }\n\n private handleResize = () => {\n this.isMobile = window.innerWidth < 768;\n if (this.isDropdownOpen) {\n if (this.isMobile) {\n this.showOverlay();\n } else {\n this.removeOverlay();\n }\n }\n };\n\n handleOnBlur() {\n if (this.isOnBlurInput === true) {\n setTimeout(() => {\n this.isDropdownOpen = false;\n this.removeOverlay();\n }, 200);\n }\n }\n getClasses() {\n return {\n 'dropdown-input-search': true,\n 'dropdown-open': this.isDropdownOpen,\n disabled: this.disabled,\n [this.status]: true,\n };\n }\n\n getDropdownClasses() {\n return {\n 'dropdown-search-list': true,\n 'visible': this.options.length && this.isDropdownOpen ? true : false\n };\n }\n\n hostCSSProperties() {\n return {\n '--dropdown-max-height': this.dropdownMaxHeight,\n };\n }\n\n render() {\n const isMobileDropdown = this.isMobile && this.isDropdownOpen;\n return (\n <Host style={this.hostCSSProperties()} class=\"dropdown-overlay\">\n <div class={`dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`} style={this.styles}>\n <div class={this.getClasses()}>\n {this.isMobile && this.isDropdownOpen && (\n <cura-button-transparent\n fontColor=\"dark\"\n onClick={() => (this.isMobile = false)}\n iconName=\"arrowLeft\"\n size=\"medium\"\n iconOnly\n color=\"primary\"\n ></cura-button-transparent>\n )}\n <cura-input-text\n disabled={this.disabled}\n label={this.label}\n part=\"cura-input-field\"\n mode={isMobileDropdown ? 'transparent' : 'default'}\n required={this.required}\n hideErrorIcon={this.status === 'error'}\n iconName={this.iconName \|\| 'search'}\n value={this.value}\n status={this.status}\n onValueChange={e => this.onValueChange(e.target.value as string)}\n onInput={e => this.handleInputChange(e)}\n onFocus={() => (this.isDropdownOpen = true)}\n onClick={() => (window.innerWidth < 768 ? (this.isMobile = true) : null)}\n onBlur={() => {\n this.handleOnBlur();\n }}\n placeholder={this.placeholder}\n size=\"large\"\n onKeyDown={this.handleKeyDown}\n >\n <slot name=\"helperText\"></slot>\n </cura-input-text>\n </div>\n <div id=\"dropdown-search-list\" class={this.getDropdownClasses()}>\n <slot name=\"dropdown-search-option\" onSlotchange={this.handleSlotChange}></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"cura-dropdown-search.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-dropdown-search/cura-dropdown-search.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, State, Event, EventEmitter, Element, Watch, h } from '@stencil/core';\n\n@Component({\n tag: 'cura-dropdown-search',\n styleUrl: 'cura-dropdown-search.scss',\n shadow: true,\n})\nexport class CuraDropdownSearch {\n /*\n Size of the dropdown search mode default: 'small', 'medium', or 'large' (default: 'large')\n /\n @Prop({ reflect: true, mutable: true }) size: 'small' \| 'medium' \| 'large' = 'large';\n\n /\n Define the status of the dropdown search.\n /\n @Prop({ reflect: true }) status: 'error' \| 'default' = 'default';\n\n /\n Whether the select component is disabled.\n * Reflects as an attribute in the DOM.\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n The name of the dropdown search component.\n /\n @Prop({ reflect: true }) name: string;\n\n /\n Indicates if the dropdown search is required.\n /\n @Prop({ reflect: true, mutable: true }) required: boolean = false;\n\n /\n Indicates if the dropdown search is selected.\n /\n @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n\n /\n The value of the dropdown search.\n /\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n /\n The placeholder text for the dropdown search.\n /\n @Prop({ reflect: true, mutable: true }) placeholder: string = '';\n\n /\n The label for the dropdown search.\n /\n @Prop({ reflect: true, mutable: true }) label: string = '';\n\n /\n Custom icon name. Default: search.\n /\n @Prop({ reflect: true }) iconName = 'search';\n\n /\n CSS max-height property for dropdown item.\n * Default to 630px\n /\n @Prop({ reflect: true }) dropdownMaxHeight = '630px';\n\n /\n Reference to the host element.\n /\n @Element() host: HTMLElement;\n\n /\n Indicates if the overlay is visible.\n /\n @State() overlayVisible: boolean = false;\n\n /\n Event emitted when the value changes.\n /\n @Event() valueChanged: EventEmitter<string>;\n\n /\n Indicates if the dropdown is open.\n /\n @State() isDropdownOpen: boolean = false;\n\n /\n Styles for the component.\n\n /\n @State() styles = {};\n\n /\n Indicates if the component is being viewed on a mobile device.\n /\n @State() isMobile: boolean = window.innerWidth < 768;\n\n /\n The mode of the dropdown search.\n /\n @State() mode: 'default' \| 'transparent' = 'default';\n\n @Event() onselect: EventEmitter;\n\n @State() inputTextRef!: HTMLCuraInputTextElement;\n\n /\n Indicates if the input is on blur.\n /\n @State() isOnBlurInput: boolean = true;\n\n /\n The index of the currently hovered option.\n /\n @State() hoveredIndex: number = -1;\n\n /\n The options for the dropdown search.\n * @type {HTMLCuraDropdownSearchOptionElement[]}\n */\n\n weights;\n\n private overlayElement: HTMLDivElement \| null = null;\n\n @State() options: HTMLCuraDropdownSearchOptionElement[] = [];\n\n connectedCallback() {\n this.weights = window.CuraAPI.theme.fonts.getWeights();\n this.styles['--info-base'] = window.CuraAPI.theme.colors.getColor('info-base');\n this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor('neutral-purewhite');\n this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor('neutral-light');\n this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor('neutral-dark');\n this.styles['--neutral-black-shadow'] = window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16);\n this.styles['--error-dark'] = window.CuraAPI.theme.colors.getColor('error-dark');\n this.styles['--error-lighter'] = window.CuraAPI.theme.colors.getColor('error-lighter');\n this.styles['--breakpoints'] = window.CuraAPI.theme.breakpoints.get();\n this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n this.styles['--font-weight-medium'] = this.weights.medium;\n }\n\n @Watch('value')\n onValueChange(newValue: string) {\n this.updateSelectedOption(newValue);\n this.valueChanged.emit(newValue);\n }\n\n componentWillLoad() {\n this.updateSelectedOption(this.value);\n }\n\n componentDidRender() {\n if (this.isDropdownOpen && this.isMobile) {\n this.showOverlay();\n } else {\n this.removeOverlay();\n }\n }\n componentDidLoad() {\n window.addEventListener('resize', this.handleResize);\n }\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.handleResize);\n }\n\n private showOverlay() {\n if (!this.overlayElement) {\n this.overlayElement = document.createElement('div');\n this.overlayElement.className = 'dropdown-overlay';\n this.overlayElement.style.position = 'fixed';\n this.overlayElement.style.top = '0';\n this.overlayElement.style.left = '0';\n this.overlayElement.style.width = '100%';\n this.overlayElement.style.height = '100%';\n this.overlayElement.style.zIndex = '9999';\n this.overlayElement.style.backgroundColor = 'white';\n document.body.appendChild(this.overlayElement);\n }\n }\n\n private removeOverlay() {\n if (this.overlayElement && this.overlayElement.parentNode === document.body) {\n document.body.removeChild(this.overlayElement);\n this.overlayElement = null;\n }\n }\n\n private handleSlotChange = () => {\n this.options = Array.from(this.host.querySelectorAll('cura-dropdown-search-option'));\n this.addClickListenersToOptions();\n this.updateHoveredIndex();\n };\n\n private addClickListenersToOptions() {\n this.options.forEach((option, index) => {\n option.addEventListener('optionSelected', () => this.onSelectedOption(index));\n });\n }\n\n private updateSelectedOption(value: string) {\n const selectedOptionIndex = this.options.findIndex(option => option.getAttribute('value') === value);\n this.hoveredIndex = selectedOptionIndex;\n this.updateOptionAttribute('hovered', this.hoveredIndex);\n this.updateOptionAttribute('selected', this.hoveredIndex);\n\n this.scrollIntoView();\n }\n\n private handleInputChange = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.value = input.value;\n this.onValueChange(this.value);\n // this.valueChanged.emit(this.value);\n };\n\n private onSelectedOption(index: number) {\n const selectedOption = this.options[index];\n if (selectedOption.selectable) {\n const selectedValue = selectedOption.getAttribute('value') \|\| selectedOption.textContent;\n\n this.value = selectedValue \|\| '';\n this.updateSelectedOption(this.value);\n\n this.isDropdownOpen = false;\n this.isOnBlurInput = true;\n this.removeOverlay();\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n this.moveHighlight(1);\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n this.moveHighlight(-1);\n } else if (event.key === 'Enter') {\n event.preventDefault();\n if (this.hoveredIndex > -1) {\n this.handleOnBlur();\n this.onSelectedOption(this.hoveredIndex);\n }\n }\n };\n\n private moveHighlight(direction: number) {\n const visibleOptions = this.options;\n const newIndex = (this.hoveredIndex + direction + visibleOptions.length) % visibleOptions.length;\n this.hoveredIndex = newIndex;\n this.updateOptionAttribute('hovered', this.hoveredIndex);\n this.scrollIntoView();\n }\n\n private updateOptionAttribute(attribute: string, indexToUpdate: number) {\n this.options.forEach((option, index) => {\n (option as any)[attribute] = index === indexToUpdate;\n });\n }\n\n private updateHoveredIndex() {\n const visibleOptions = this.options;\n const currentValue = this.value;\n this.hoveredIndex = visibleOptions.findIndex(option => option.getAttribute('value') === currentValue);\n }\n\n private scrollIntoView() {\n const container = this.host.shadowRoot?.querySelector('.dropdown-search-list');\n const hoveredOption = this.options[this.hoveredIndex];\n\n if (container && hoveredOption) {\n const optionRect = hoveredOption.getBoundingClientRect();\n const containerRect = container.getBoundingClientRect();\n\n if (optionRect.bottom > containerRect.bottom) {\n container.scrollTop += optionRect.bottom - containerRect.bottom;\n }\n\n if (optionRect.top < containerRect.top) {\n container.scrollTop -= containerRect.top - optionRect.top;\n }\n }\n }\n\n private handleResize = () => {\n this.isMobile = window.innerWidth < 768;\n if (this.isDropdownOpen) {\n if (this.isMobile) {\n this.showOverlay();\n } else {\n this.removeOverlay();\n }\n }\n };\n\n handleOnBlur() {\n if (this.isOnBlurInput === true) {\n setTimeout(() => {\n this.isDropdownOpen = false;\n this.removeOverlay();\n }, 200);\n }\n }\n getClasses() {\n return {\n 'dropdown-input-search': true,\n 'dropdown-open': this.isDropdownOpen,\n 'disabled': this.disabled,\n [this.status]: true,\n };\n }\n\n getDropdownClasses() {\n return {\n 'dropdown-search-list': true,\n 'visible': this.options.length && this.isDropdownOpen ? true : false,\n };\n }\n\n hostCSSProperties() {\n return {\n '--dropdown-max-height': this.dropdownMaxHeight,\n };\n }\n\n render() {\n const isMobileDropdown = this.isMobile && this.isDropdownOpen;\n return (\n <Host style={this.hostCSSProperties()} class=\"dropdown-overlay\">\n <div class={`dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`} style={this.styles}>\n <div class={this.getClasses()}>\n {this.isMobile && this.isDropdownOpen && (\n <cura-button-transparent\n fontColor=\"dark\"\n onClick={() => (this.isMobile = false)}\n iconName=\"arrowLeft\"\n size=\"medium\"\n iconOnly\n color=\"primary\"\n ></cura-button-transparent>\n )}\n <cura-input-text\n disabled={this.disabled}\n label={this.label}\n part=\"cura-input-field\"\n mode={isMobileDropdown ? 'transparent' : 'default'}\n required={this.required}\n hideErrorIcon={this.status === 'error'}\n iconName={this.iconName \|\| 'search'}\n value={this.value}\n status={this.status}\n onValueChange={e => this.onValueChange(e.target.value as string)}\n onInput={e => this.handleInputChange(e)}\n onFocus={() => (this.isDropdownOpen = true)}\n onClick={() => (window.innerWidth < 768 ? (this.isMobile = true) : null)}\n onBlur={() => {\n this.handleOnBlur();\n }}\n placeholder={this.placeholder}\n size={this.size}\n onKeyDown={this.handleKeyDown}\n >\n <slot name=\"helperText\"></slot>\n </cura-input-text>\n </div>\n <div id=\"dropdown-search-list\" class={this.getDropdownClasses()}>\n <slot name=\"dropdown-search-option\" onSlotchange={this.handleSlotChange}></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

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

@@ -3,6 +3,7 @@ const storybookUrl = `${window.location.origin}`;
 const renderCuraDropdownSearch = (args) => {
     return `<cura-dropdown-search
     style="height: 400px;"
+    size="${args.size}"
     status="${args.status}"
     name="${args.name}"
     icon-name="${args.iconName}"
@@ -10,8 +11,10 @@ const renderCuraDropdownSearch = (args) => {
     selected="${args.selected}"
     value="${args.value}"
     placeholder="${args.placeholder}"
-    label="${args.label}"${args.dropdownMaxHeight && args.dropdownMaxHeight !== '630px' ? `
-    dropdown-max-height="${args.dropdownMaxHeight}"` : ''}>
+    label="${args.label}"${args.dropdownMaxHeight && args.dropdownMaxHeight !== '630px'
+        ? `
+    dropdown-max-height="${args.dropdownMaxHeight}"`
+        : ''}>
     ${args.helperText ? `<span slot="helperText">${args.helperText}</span>` : ''}
     <cura-dropdown-search-option-title>Mais Buscados</cura-dropdown-search-option-title>
     ${args.options
@@ -67,14 +70,23 @@ export default {
                 category: 'Properties',
             },
         },
+        size: {
+            control: { type: 'inline-radio' },
+            options: ['small', 'medium', 'large'],
+            description: "Tamanho do componente. Pode ser 'small', 'medium' ou 'large'.",
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'large' },
+            },
+        },
         iconName: {
             control: { type: 'select' },
             options: ['', ...iconNames],
             description: 'Nome do ícone no iconset a ser utilizado.',
             table: {
-                category: 'Icons'
+                category: 'Icons',
             },
-            name: 'icon-name'
+            name: 'icon-name',
         },
         required: {
             control: 'boolean',
@@ -114,7 +126,7 @@ export default {
                 category: 'Properties',
                 defaultValue: { summary: '630px' },
             },
-            name: 'dropdown-max-height'
+            name: 'dropdown-max-height',
         },
         helperText: {
             control: 'text',
@@ -142,6 +154,7 @@ export default {
 };
 export const DropdownSearch = {
     args: {
+        size: 'large',
         status: 'default',
         name: 'cura-dropdown',
         iconName: '',
@@ -164,7 +177,7 @@ export const DropdownSearch = {
                 content: `Not Selectable Dora Martins de Souza
         <cura-paragraph color="neutral-dark" margin-block="0" size="xsmall">Ortopedista Cirúrgico</cura-paragraph>`,
                 action: '',
-                selectable: false
+                selectable: false,
             },
             {
                 value: 'Copa D’Or - Centro Cardiológico',

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

	@@ -1 +1 @@
1	- {"version":3,"file":"cura-dropdown-search.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-dropdown-search/cura-dropdown-search.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import iconNames from '../../../assets/icons/iconset-default-list';\n\nconst storybookUrl = `${window.location.origin}`;\nconst renderCuraDropdownSearch = (args: any) => {\n return `<cura-dropdown-search\n style=\"height: 400px;\"\n status=\"${args.status}\"\n name=\"${args.name}\"\n icon-name=\"${args.iconName}\"\n required=\"${args.required}\"\n selected=\"${args.selected}\"\n value=\"${args.value}\"\n placeholder=\"${args.placeholder}\"\n label=\"${args.label}\"${args.dropdownMaxHeight && args.dropdownMaxHeight !== '630px' ? `\n dropdown-max-height=\"${args.dropdownMaxHeight}\"` : ''}>\n ${args.helperText ? `<span slot=\"helperText\">${args.helperText}</span>` : ''}\n <cura-dropdown-search-option-title>Mais Buscados</cura-dropdown-search-option-title>\n ${args.options\n .map(\n option => `<cura-dropdown-search-option value=\"${option.value}\"${option.selectable === false ? ` selectable=\"false\"` : ''}>\n ${option.image ? ` <div slot=\"image\">${option.image}</div>` : ''}\n ${option.content}\n ${\n option.action\n ? ` <div slot=\"action\">\n ${option.action}\n </div>`\n : ''\n }\n </cura-dropdown-search-option>\n `,\n )\n .join('')}\n </cura-dropdown-search>`;\n};\n\nexport default {\n title: 'Componentes/DropdownSearch/DropDownSearch',\n tags: ['autodocs'],\n parameters: {\n docs: {\n description: {\n component: `<cura-paragraph size=\"small\">\n\n O \\`cura-dropdown-search\\` é um componente para busca rápida entre opções, com suporte a ícones, avatares, e ações customizáveis. Ele é responsivo e seu layout é ajustado dependendo do tamanho da tela.\n <br/><br/>\n\n Em dispositivos móveis, o componente abre em modo full-screen, facilitando a navegação e seleção de opções. Você pode visualizar esse comportamento abrindo o story dele\n [aqui](${storybookUrl}/?path=/story/componentes-dropdownsearch-dropdownsearch--dropdown-search) e ajustando o tamanho da sua tela.\n\n </cura-paragraph>`,\n },\n },\n },\n render: args => {\n return renderCuraDropdownSearch(args);\n },\n argTypes: {\n status: {\n control: { type: 'inline-radio' },\n options: ['default', 'error'],\n description: 'Status do dropdown.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'default' },\n },\n },\n name: {\n control: 'text',\n description: 'Nome do dropdown.',\n required: false,\n table: {\n category: 'Properties',\n },\n },\n iconName: {\n control: { type: 'select' },\n options: ['', ...iconNames],\n description: 'Nome do ícone no iconset a ser utilizado.',\n table: {\n category: 'Icons'\n },\n name: 'icon-name'\n },\n required: {\n control: 'boolean',\n description: 'Define se o campo é obrigatório.',\n table: {\n category: 'Properties',\n defaultValue: { summary: false },\n },\n },\n value: {\n control: 'text',\n description: 'Valor atual do campo de busca.',\n table: {\n category: 'Properties',\n },\n },\n placeholder: {\n control: 'text',\n description: 'Texto do placeholder.',\n required: false,\n table: {\n category: 'Properties',\n },\n },\n label: {\n control: 'text',\n description: 'Texto da label do input.',\n required: false,\n table: {\n category: 'Properties',\n },\n },\n dropdownMaxHeight: {\n control: 'text',\n description: 'Altura máxima para o dropdown.',\n table: {\n category: 'Properties',\n defaultValue: { summary: '630px' },\n },\n name: 'dropdown-max-height'\n },\n helperText: {\n control: 'text',\n description: 'Texto de ajuda para o dropdown.',\n table: {\n category: 'Slots',\n },\n },\n oninput: {\n control: 'none',\n description: 'Evento via Listener quando o estado do value do dropdown é alterado',\n table: {\n category: 'Events',\n },\n },\n options: {\n control: { type: 'object' },\n description: 'Um slot name=dropdown-search-option para herdar as opções do dropdown. Pensado para usar o componente `<cura-dropdown-search-option>`',\n table: {\n category: 'Slots',\n defaultValue: { summary: [] },\n },\n },\n },\n};\n\nexport const DropdownSearch = {\n args: {\n status: 'default',\n name: 'cura-dropdown',\n iconName: '',\n required: false,\n value: '',\n placeholder: 'Faça a sua busca',\n label: 'Busca',\n dropdownMaxHeight: '630px',\n helperText: 'Digite o que você deseja buscar.',\n options: [\n {\n value: 'Clinica Médica Geral',\n image: '<cura-icon size=\"24\" name=\"medical\"></cura-icon>',\n content: 'Clinica Médica Geral',\n action: `<cura-button-transparent font-color=\"dark\" color='primary' icon-name='delete' size='small' icon-only={true}></cura-button-transparent>`,\n },\n {\n value: 'Dora Martins de Souza',\n image: '<cura-avatar size=\"32\" imageSrc=\"\"></cura-avatar>',\n content: `Not Selectable Dora Martins de Souza\n <cura-paragraph color=\"neutral-dark\" margin-block=\"0\" size=\"xsmall\">Ortopedista Cirúrgico</cura-paragraph>`,\n action: '',\n selectable: false\n },\n {\n value: 'Copa D’Or - Centro Cardiológico',\n image: `\n <div slot=\"image\">\n <div\n style=\"\n display: flex;\n align-content: center;\n align-items: center;\n justify-content: center;\n text-align: center;\n letter-spacing: 0.72px;\n width: 32px;\n height: 32px;\n border-radius: 4px;\n background-color: #E9E9E9;\n \"\n >\n <cura-label size=\"xsmall\" margin-block=\"0\" lineHeight=\"0\" color=\"neutral-black\" weight=\"bold\">\n 1 <br />\n KM\n </cura-label>\n </div>\n </div>\n `,\n content: `<div style=\"line-height='0';\">\n Copa D’Or - Centro Cardiológico\n <cura-paragraph color=\"neutral-dark\" margin-block=\"0\" size=\"xsmall\">\n Rua Siqueira Campos, 93 Copacabana, Rio de Janeiro\n </cura-paragraph>\n </div>`,\n action: '',\n },\n ],\n },\n};\n"]}
1	+ {"version":3,"file":"cura-dropdown-search.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-dropdown-search/cura-dropdown-search.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import iconNames from '../../../assets/icons/iconset-default-list';\n\nconst storybookUrl = `${window.location.origin}`;\nconst renderCuraDropdownSearch = (args: any) => {\n return `<cura-dropdown-search\n style=\"height: 400px;\"\n size=\"${args.size}\"\n status=\"${args.status}\"\n name=\"${args.name}\"\n icon-name=\"${args.iconName}\"\n required=\"${args.required}\"\n selected=\"${args.selected}\"\n value=\"${args.value}\"\n placeholder=\"${args.placeholder}\"\n label=\"${args.label}\"${\n args.dropdownMaxHeight && args.dropdownMaxHeight !== '630px'\n ? `\n dropdown-max-height=\"${args.dropdownMaxHeight}\"`\n : ''\n }>\n ${args.helperText ? `<span slot=\"helperText\">${args.helperText}</span>` : ''}\n <cura-dropdown-search-option-title>Mais Buscados</cura-dropdown-search-option-title>\n ${args.options\n .map(\n option => `<cura-dropdown-search-option value=\"${option.value}\"${option.selectable === false ? ` selectable=\"false\"` : ''}>\n ${option.image ? ` <div slot=\"image\">${option.image}</div>` : ''}\n ${option.content}\n ${\n option.action\n ? ` <div slot=\"action\">\n ${option.action}\n </div>`\n : ''\n }\n </cura-dropdown-search-option>\n `,\n )\n .join('')}\n </cura-dropdown-search>`;\n};\n\nexport default {\n title: 'Componentes/DropdownSearch/DropDownSearch',\n tags: ['autodocs'],\n parameters: {\n docs: {\n description: {\n component: `<cura-paragraph size=\"small\">\n\n O \\`cura-dropdown-search\\` é um componente para busca rápida entre opções, com suporte a ícones, avatares, e ações customizáveis. Ele é responsivo e seu layout é ajustado dependendo do tamanho da tela.\n <br/><br/>\n\n Em dispositivos móveis, o componente abre em modo full-screen, facilitando a navegação e seleção de opções. Você pode visualizar esse comportamento abrindo o story dele\n [aqui](${storybookUrl}/?path=/story/componentes-dropdownsearch-dropdownsearch--dropdown-search) e ajustando o tamanho da sua tela.\n\n </cura-paragraph>`,\n },\n },\n },\n render: args => {\n return renderCuraDropdownSearch(args);\n },\n argTypes: {\n status: {\n control: { type: 'inline-radio' },\n options: ['default', 'error'],\n description: 'Status do dropdown.',\n table: {\n category: 'Properties',\n defaultValue: { summary: 'default' },\n },\n },\n name: {\n control: 'text',\n description: 'Nome do dropdown.',\n required: false,\n table: {\n category: 'Properties',\n },\n },\n size: {\n control: { type: 'inline-radio' },\n options: ['small', 'medium', 'large'],\n description: \"Tamanho do componente. Pode ser 'small', 'medium' ou 'large'.\",\n table: {\n category: 'Properties',\n defaultValue: { summary: 'large' },\n },\n },\n iconName: {\n control: { type: 'select' },\n options: ['', ...iconNames],\n description: 'Nome do ícone no iconset a ser utilizado.',\n table: {\n category: 'Icons',\n },\n name: 'icon-name',\n },\n required: {\n control: 'boolean',\n description: 'Define se o campo é obrigatório.',\n table: {\n category: 'Properties',\n defaultValue: { summary: false },\n },\n },\n value: {\n control: 'text',\n description: 'Valor atual do campo de busca.',\n table: {\n category: 'Properties',\n },\n },\n placeholder: {\n control: 'text',\n description: 'Texto do placeholder.',\n required: false,\n table: {\n category: 'Properties',\n },\n },\n label: {\n control: 'text',\n description: 'Texto da label do input.',\n required: false,\n table: {\n category: 'Properties',\n },\n },\n dropdownMaxHeight: {\n control: 'text',\n description: 'Altura máxima para o dropdown.',\n table: {\n category: 'Properties',\n defaultValue: { summary: '630px' },\n },\n name: 'dropdown-max-height',\n },\n helperText: {\n control: 'text',\n description: 'Texto de ajuda para o dropdown.',\n table: {\n category: 'Slots',\n },\n },\n oninput: {\n control: 'none',\n description: 'Evento via Listener quando o estado do value do dropdown é alterado',\n table: {\n category: 'Events',\n },\n },\n options: {\n control: { type: 'object' },\n description: 'Um slot name=dropdown-search-option para herdar as opções do dropdown. Pensado para usar o componente `<cura-dropdown-search-option>`',\n table: {\n category: 'Slots',\n defaultValue: { summary: [] },\n },\n },\n },\n};\n\nexport const DropdownSearch = {\n args: {\n size: 'large',\n status: 'default',\n name: 'cura-dropdown',\n iconName: '',\n required: false,\n value: '',\n placeholder: 'Faça a sua busca',\n label: 'Busca',\n dropdownMaxHeight: '630px',\n helperText: 'Digite o que você deseja buscar.',\n options: [\n {\n value: 'Clinica Médica Geral',\n image: '<cura-icon size=\"24\" name=\"medical\"></cura-icon>',\n content: 'Clinica Médica Geral',\n action: `<cura-button-transparent font-color=\"dark\" color='primary' icon-name='delete' size='small' icon-only={true}></cura-button-transparent>`,\n },\n {\n value: 'Dora Martins de Souza',\n image: '<cura-avatar size=\"32\" imageSrc=\"\"></cura-avatar>',\n content: `Not Selectable Dora Martins de Souza\n <cura-paragraph color=\"neutral-dark\" margin-block=\"0\" size=\"xsmall\">Ortopedista Cirúrgico</cura-paragraph>`,\n action: '',\n selectable: false,\n },\n {\n value: 'Copa D’Or - Centro Cardiológico',\n image: `\n <div slot=\"image\">\n <div\n style=\"\n display: flex;\n align-content: center;\n align-items: center;\n justify-content: center;\n text-align: center;\n letter-spacing: 0.72px;\n width: 32px;\n height: 32px;\n border-radius: 4px;\n background-color: #E9E9E9;\n \"\n >\n <cura-label size=\"xsmall\" margin-block=\"0\" lineHeight=\"0\" color=\"neutral-black\" weight=\"bold\">\n 1 <br />\n KM\n </cura-label>\n </div>\n </div>\n `,\n content: `<div style=\"line-height='0';\">\n Copa D’Or - Centro Cardiológico\n <cura-paragraph color=\"neutral-dark\" margin-block=\"0\" size=\"xsmall\">\n Rua Siqueira Campos, 93 Copacabana, Rio de Janeiro\n </cura-paragraph>\n </div>`,\n action: '',\n },\n ],\n },\n};\n"]}

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

@@ -59,6 +59,7 @@
 }
 .wrapper .cura-input-field input {
   padding: 0px 12px 0px 8px;
+  cursor: pointer;
 }
 .wrapper .cura-input-field.open {
   border-radius: 4px 4px 0 0 !important;

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

@@ -73,6 +73,7 @@ export class CuraSelect {
         this.status = 'default';
         this.disabled = false;
         this.required = false;
+        this.searchBehavior = false;
         this.isHovered = false;
         this.isFocused = false;
         this.isOpen = false;
@@ -87,7 +88,7 @@ export class CuraSelect {
      * Filters the options based on the current input value.
      */
     filterOptions(newText) {
-        if (!this.isOpen) {
+        if (!this.isOpen || !this.searchBehavior) {
             return;
         }
         this.options.forEach(option => {
@@ -264,13 +265,13 @@ export class CuraSelect {
         return (h("cura-icon", { class: 'feedback-icon', name: icon, iconset: 'default', size: this.size === 'large' ? 20 : 16, color: this.getColor('icon'), style: this.styles }));
     }
     render() {
-        return (h(Host, { key: 'bc202c6de926da5642421b91b1f38abfda496c83', style: this.styles }, h("div", { key: 'e80bc20071f9ba3c2e385d5c87c1ef6ffd5d9bd9', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (h("cura-label", { key: 'e090559a5ed7d0c6cdb9603e6b715dbfa54d383e', class: 'label', weight: 'bold', size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && h("span", { key: 'da3b3a38328a81b4c7d43cedf392f6a35ca5cad5', class: 'required' }, "* "))), h("div", { key: '48e6d57d80b140d8dd51dd079c0ce7f39d7a9a96', class: {
+        return (h(Host, { key: 'f6447e417389cc714eeee6ace4cf8493c1f8eac6', style: this.styles }, h("div", { key: 'e12e26480be1c5c3065f2934268936075283a162', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (h("cura-label", { key: 'bbcf482d764f67371f736d74317059cb6ef9155a', class: 'label', weight: 'bold', size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && h("span", { key: 'b38876233f76c11037dfa4f2e0847acfce9c855c', class: 'required' }, "* "))), h("div", { key: '1b56deba7ad5b7d263ffbf9f5e666a882efa30bf', class: {
                 'cura-input-field': true,
                 'open': this.isOpen
-            } }, this.renderIcon(), h("input", { key: 'd9c1fc1d7cd068aa4f52f002924f7caaa11c099b', type: "text", autocomplete: 'off', onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyNavigation, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error'), onInput: this.handleInputChange, style: this.styles, placeholder: this.placeholder, disabled: this.disabled, required: this.required, value: this.textInput }), h("cura-icon", { key: '3099bd0ffc0f758e39815db70f7c79c55d97190e', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: 'default' })), h("cura-label", { key: 'e82da158d25d0cad7102d5ed13698f0f741cd6ea', class: "helper-text", size: 'xsmall', color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, h("slot", { key: '71ab712009bc6a61f189da5a082330eed9e89d33' })), this.isOpen && (h("div", { key: '4a6f38f3798ea894936554c0b4191b45dc5172eb', class: {
+            } }, this.renderIcon(), h("input", { key: 'dba0c9ed720cdde8679b05df09b8957b15651df2', type: "text", autocomplete: 'off', onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyNavigation, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error'), onInput: this.handleInputChange, style: this.styles, placeholder: this.placeholder, disabled: this.disabled, required: this.required, value: this.textInput, readonly: this.searchBehavior ? null : true }), h("cura-icon", { key: 'b6a6dda0bfe4a66d80bf3cff1630456495614c17', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: 'default' })), h("cura-label", { key: '8bcb1e2903e00926b7f99b44a3f179160a8f10da', class: "helper-text", size: 'xsmall', color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, h("slot", { key: '65c9ebcedaaad1131ba14962da9240ff8784c4f6' })), this.isOpen && (h("div", { key: 'e25fd607d58aa8ff812c9b41a242867bc0d3ecf7', class: {
                 'menu': true,
                 'open': this.isOpen
-            } }, h("slot", { key: '8db3420024df6aa85f0e8265c6f88c9bb4a8811f', name: 'option' }))))));
+            } }, h("slot", { key: '59eed2c893fa1201950611e234a137bf8a5dc7d4', name: 'option' }))))));
     }
     static get is() { return "cura-select"; }
     static get encapsulation() { return "shadow"; }
@@ -430,6 +431,24 @@ export class CuraSelect {
                 "attribute": "required",
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "searchBehavior": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable / Disable search at options by term.\nDefault: false"
+                },
+                "attribute": "search-behavior",
+                "reflect": true,
+                "defaultValue": "false"
             }
         };
     }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"cura-select.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-select/cura-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, State, h, Event, EventEmitter, AttachInternals, Watch } from '@stencil/core';\n\n@Component({\n tag: 'cura-select',\n styleUrl: 'cura-select.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class CuraSelect {\n /*\n The label text for the select component.\n * Reflects as an attribute in the DOM.\n /\n @Prop({ reflect: true }) label: string = '';\n\n /\n Placeholder text for the input field.\n * Reflects as an attribute in the DOM.\n /\n @Prop({ reflect: true }) placeholder: string = '';\n\n /\n Current value of the select component.\n * Reflects as an attribute in the DOM and is mutable.\n /\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n /\n Display mode of the select component.\n * Can be 'default' or 'transparent'.\n /\n @Prop({ reflect: true }) mode: 'default' \| 'transparent' = 'default';\n\n /\n Size of the select component.\n * Can be 'small', 'medium', or 'large'.\n /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n Status of the select component.\n * Can be 'success', 'error', or 'default'.\n /\n @Prop({ reflect: true, mutable: true }) status: 'success' \| 'error' \| 'default' = 'default';\n\n /\n Whether the select component is disabled.\n * Reflects as an attribute in the DOM.\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n Whether the select component is required.\n * Reflects as an attribute in the DOM.\n /\n @Prop({ reflect: true }) required: boolean = false;\n\n /\n Internal state: Whether the input is hovered.\n * Default: false\n /\n @State() isHovered: boolean = false;\n\n /\n Internal state: Whether the input is focused.\n * Default: false\n /\n @State() isFocused: boolean = false;\n\n /\n Internal state: Whether the dropdown menu is open.\n * Default: false\n /\n @State() isOpen: boolean = false;\n\n /\n Internal state: Collection of options for the select component.\n /\n @State() options: NodeListOf<HTMLCuraSelectOptionElement>;\n\n\n @State() activeIndex = -1\n\n @Watch('activeIndex')\n updateOptionHighlights(newActiveINdex: number) {\n this.options.forEach((option, index) => (option as any).active = index === newActiveINdex);\n }\n\n @State() textInput = ''\n\n @Watch('textInput')\n /\n Filters the options based on the current input value.\n /\n filterOptions(newText) {\n if (!this.isOpen) {\n return\n }\n \n this.options.forEach(option => {\n const optionValue = option.textContent?.toLowerCase() \|\| '';\n const isVisible = optionValue.includes(newText.toLocaleLowerCase())\n option.style.display = isVisible ? 'block' : 'none';\n });\n }\n\n /\n Reference to the host element of the component.\n /\n @Element() host: HTMLElement;\n\n /\n Event emitted when an option is selected.\n /\n @Event() selected: EventEmitter;\n\n /\n MutationObserver to watch changes in the component.\n /\n mutationObserver: MutationObserver;\n\n /\n Styles to be applied to the component.\n /\n styles = {};\n\n /\n Theme object containing font and color information.\n /\n theme = window.CuraAPI.theme;\n\n @AttachInternals() internals: ElementInternals;\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 }) {\n this.textInput = state.value;\n this.updateSelectedOption();\n }\n\n /\n Callback to reset the switch state when the form is reset.\n /\n formResetCallback() {\n this.textInput = '';\n this.clearSelectedAttributes()\n this.internals.setFormValue('');\n this.internals.setValidity({});\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 /\n Lifecycle method called before the component is rendered.\n * Initializes the options for the select component.\n /\n componentWillLoad() {\n this.initializeOptions();\n }\n /\n Lifecycle method called after the component is rendered.\n * Initializes select-related functionality.\n /\n componentDidLoad() {\n this.setupMutationObserver();\n }\n /\n Lifecycle method called when the component is connected to the DOM.\n * Applies styles based on the theme.\n /\n connectedCallback() {\n this.applyStyles();\n }\n /\n Lifecycle method called when the component is disconnected from the DOM.\n * Disconnects the MutationObserver if it exists.\n /\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n }\n\n initializeOptions() {\n this.options = this.host.querySelectorAll<HTMLCuraSelectOptionElement>('cura-select-option');\n this.options.forEach(option => {\n option.setAttribute('size', this.size);\n\n const isSelected = this.value === option.value\n option.setAttribute('selected', JSON.stringify(isSelected));\n\n if (isSelected) {\n this.value = option.value\n this.internals.setFormValue(option.value)\n }\n });\n\n this.textInput = Array.from(this.options).find(option => option.value === this.value)?.textContent \|\| this.textInput\n }\n /\n Applies styles to the component based on the theme.\n /\n applyStyles() {\n const { fonts, colors } = this.theme;\n const fontWeights = fonts.getWeights();\n\n this.styles = {\n ...this.styles,\n '--font-weight-medium': fontWeights.medium,\n '--font-weight-bold': fontWeights.bold,\n '--font-weight-regular': fontWeights.regular,\n '--font-color': fonts.getColor(),\n '--font-family': fonts.getFamily(),\n '--font-size': fonts.getSize(),\n };\n\n const colorKeys = [\n 'primary-base', 'neutral-purewhite', 'neutral-white', 'neutral-black', 'neutral-medium', 'neutral-light',\n 'neutral-base', 'neutral-dark', 'success-dark', 'success-darker', 'success-lighter',\n 'error-lighter', 'error-dark', 'error-darker', 'error-base', 'info-base'\n ];\n\n colorKeys.forEach(key => {\n this.styles[`--${key}`] = colors.getColor(key);\n });\n }\n /\n Sets up a MutationObserver to watch for changes in the component.\n /\n setupMutationObserver() {\n this.mutationObserver = new MutationObserver(this.handleMutations);\n this.mutationObserver.observe(this.host, { attributes: true, subtree: true, attributeFilter: ['selected', 'value'] });\n }\n /\n Handles mutations observed by the MutationObserver.\n * Updates the selected option or filters options based on the mutation type.\n /\n handleMutations = (mutations: MutationRecord[]) => {\n mutations.forEach(mutation => {\n if (mutation.type === 'attributes') {\n if (mutation.attributeName === 'selected') this.updateSelectedOption();\n }\n });\n };\n /\n Handles the selection of an option.\n /\n onOptiselected = (event: Event) => {\n const selectedOption = event.target as HTMLElement;\n this.clearSelectedAttributes();\n selectedOption.setAttribute('selected', 'true');\n };\n\n @Watch('value') \n handleValueChange(newValue: string) {\n this.clearSelectedAttributes(); \n\n const selectedOption = this.host.querySelector(`cura-select-option[value=\"${newValue}\"]`); \n\n if(!selectedOption) {\n return\n }\n\n selectedOption.setAttribute('selected', 'true');\n }\n\n updateSelectedOption() {\n const selectedOptionElement = this.host.querySelector<HTMLCuraSelectOptionElement>('cura-select-option[selected]');\n\n if (!selectedOptionElement) {\n return\n }\n\n this.value = selectedOptionElement.value\n this.internals.setFormValue(this.value)\n\n if (this.textInput !== selectedOptionElement.textContent) {\n this.textInput = selectedOptionElement.textContent ;\n this.isOpen = false;\n this.selected.emit(selectedOptionElement.value);\n }\n }\n\n /\n Clears the 'selected' attribute from all options.\n /\n clearSelectedAttributes() {\n this.options.forEach(option => option.removeAttribute('selected'));\n }\n\n handleKeyNavigation = (event: KeyboardEvent) => {\n const { code: keyCode } = event\n \n if (!this.isOpen && keyCode === 'ArrowDown') {\n this.isOpen = true\n this.activeIndex = 0\n\n return\n }\n\n if (keyCode === 'ArrowDown') {\n event.preventDefault();\n this.updateActiveIndex(1);\n }\n\n if (keyCode === 'ArrowUp') {\n event.preventDefault();\n this.updateActiveIndex(-1);\n }\n\n if (keyCode === 'Enter' \|\| keyCode === 'Space') {\n this.options[this.activeIndex]?.click();\n }\n\n if (keyCode === 'Escape') {\n this.isOpen = false\n }\n }\n\n updateActiveIndex(direction: number) {\n if (this.options.length === 0) return;\n this.activeIndex = (this.activeIndex + direction + this.options.length) % this.options.length;\n }\n\n handleInputChange = (e: Event) => {\n this.textInput = (e.target as HTMLInputElement).value;\n this.isOpen = this.textInput.length > 0;\n this.internals.setFormValue(this.textInput);\n };\n\n\n getClasses() {\n return {\n wrapper: true,\n label: !!this.label,\n disabled: this.disabled,\n transparent: this.mode === 'transparent',\n [this.size.toLowerCase()]: true,\n [this.status.toLowerCase()]: true,\n };\n }\n\n /\n Determines the color based on the item type and component state.\n /\n getColor(item: 'label' \| 'text' \| 'icon') {\n if (this.disabled) return 'neutral-medium';\n\n const isStatusDefault = this.status === 'default';\n const isHoveredOrFocused = this.isFocused \|\| this.isHovered;\n\n if (item === 'label') {\n if (!isStatusDefault \|\| isHoveredOrFocused) return 'neutral-black';\n return 'neutral-dark';\n }\n\n if (isHoveredOrFocused && isStatusDefault) return 'neutral-black';\n if (this.status === 'success') return 'success-dark';\n if (this.status === 'error') return 'error-dark';\n\n return 'neutral-dark';\n }\n\n /\n Renders the icon based on the component's status.\n /\n renderIcon() {\n if (this.status === 'default') return null;\n const icon = { success: 'checkCircle', error: 'alertCircle' }[this.status];\n return (\n <cura-icon\n class='feedback-icon'\n name={icon}\n iconset='default'\n size={this.size === 'large' ? 20 : 16}\n color={this.getColor('icon')}\n style={this.styles}\n />\n );\n }\n\n handleClick = (event: MouseEvent) => {\n if (this.disabled) return event.preventDefault();\n const target = event.target as HTMLElement;\n\n if (target.tagName === 'CURA-SELECT-OPTION') return this.onOptiselected(event);\n this.isOpen = !this.isOpen;\n };\n\n\n render() {\n return (\n <Host style={this.styles}>\n <div\n class={this.getClasses()}\n onMouseEnter={() => (this.isHovered = true)}\n onMouseLeave={() => (this.isHovered = false)}\n onClick={this.handleClick}\n >\n {this.label && (\n <cura-label\n class='label'\n weight='bold'\n size={this.size === 'large' ? 'small' : 'xsmall'}\n color={this.getColor('label')}\n >\n {this.label} {this.required && <span class='required'> </span>}\n </cura-label>\n )}\n\n <div class={{\n 'cura-input-field': true,\n 'open': this.isOpen\n }}>\n {this.renderIcon()}\n <input\n type=\"text\"\n autocomplete='off'\n onFocus={() => (this.isFocused = true)}\n onBlur={() => (this.isFocused = false)}\n onKeyDown={this.handleKeyNavigation}\n aria-required={String(this.required)}\n aria-disabled={String(this.disabled)}\n aria-invalid={String(this.status === 'error')}\n onInput={this.handleInputChange}\n style={this.styles}\n placeholder={this.placeholder}\n disabled={this.disabled}\n required={this.required}\n value={this.textInput}\n />\n <cura-icon\n name={this.isOpen ? 'up' : 'down'}\n class=\"up-down-icon\"\n color={this.disabled ? 'neutral-dark' : 'primary-base'}\n size={16}\n iconset='default'\n />\n </div>\n <cura-label\n class=\"helper-text\"\n size='xsmall'\n color={this.getColor('text')}\n weight={this.mode === 'transparent' ? 'bold' : 'regular'} >\n <slot></slot>\n </cura-label>\n {this.isOpen && (\n <div class={{\n 'menu': true,\n 'open': this.isOpen\n }}>\n <slot name='option'></slot>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"cura-select.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-select/cura-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, State, h, Event, EventEmitter, AttachInternals, Watch } from '@stencil/core';\n\n@Component({\n tag: 'cura-select',\n styleUrl: 'cura-select.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class CuraSelect {\n /*\n The label text for the select component.\n * Reflects as an attribute in the DOM.\n /\n @Prop({ reflect: true }) label: string = '';\n\n /\n Placeholder text for the input field.\n * Reflects as an attribute in the DOM.\n /\n @Prop({ reflect: true }) placeholder: string = '';\n\n /\n Current value of the select component.\n * Reflects as an attribute in the DOM and is mutable.\n /\n @Prop({ reflect: true, mutable: true }) value: string = '';\n\n /\n Display mode of the select component.\n * Can be 'default' or 'transparent'.\n /\n @Prop({ reflect: true }) mode: 'default' \| 'transparent' = 'default';\n\n /\n Size of the select component.\n * Can be 'small', 'medium', or 'large'.\n /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /\n Status of the select component.\n * Can be 'success', 'error', or 'default'.\n /\n @Prop({ reflect: true, mutable: true }) status: 'success' \| 'error' \| 'default' = 'default';\n\n /\n Whether the select component is disabled.\n * Reflects as an attribute in the DOM.\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n Whether the select component is required.\n * Reflects as an attribute in the DOM.\n /\n @Prop({ reflect: true }) required: boolean = false;\n\n /\n Enable / Disable search at options by term.\n * Default: false\n /\n @Prop({ reflect: true}) searchBehavior: boolean = false;\n\n /\n Internal state: Whether the input is hovered.\n * Default: false\n /\n @State() isHovered: boolean = false;\n\n /\n Internal state: Whether the input is focused.\n * Default: false\n /\n @State() isFocused: boolean = false;\n\n /\n Internal state: Whether the dropdown menu is open.\n * Default: false\n /\n @State() isOpen: boolean = false;\n\n /\n Internal state: Collection of options for the select component.\n /\n @State() options: NodeListOf<HTMLCuraSelectOptionElement>;\n\n\n @State() activeIndex = -1\n\n @Watch('activeIndex')\n updateOptionHighlights(newActiveINdex: number) {\n this.options.forEach((option, index) => (option as any).active = index === newActiveINdex);\n }\n\n @State() textInput = ''\n\n @Watch('textInput')\n /\n Filters the options based on the current input value.\n /\n filterOptions(newText) {\n if (!this.isOpen \|\| !this.searchBehavior) {\n return\n }\n\n this.options.forEach(option => {\n const optionValue = option.textContent?.toLowerCase() \|\| '';\n const isVisible = optionValue.includes(newText.toLocaleLowerCase())\n option.style.display = isVisible ? 'block' : 'none';\n });\n }\n\n /\n Reference to the host element of the component.\n /\n @Element() host: HTMLElement;\n\n /\n Event emitted when an option is selected.\n /\n @Event() selected: EventEmitter;\n\n /\n MutationObserver to watch changes in the component.\n /\n mutationObserver: MutationObserver;\n\n /\n Styles to be applied to the component.\n /\n styles = {};\n\n /\n Theme object containing font and color information.\n /\n theme = window.CuraAPI.theme;\n\n @AttachInternals() internals: ElementInternals;\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 }) {\n this.textInput = state.value;\n this.updateSelectedOption();\n }\n\n /\n Callback to reset the switch state when the form is reset.\n /\n formResetCallback() {\n this.textInput = '';\n this.clearSelectedAttributes()\n this.internals.setFormValue('');\n this.internals.setValidity({});\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 /\n Lifecycle method called before the component is rendered.\n * Initializes the options for the select component.\n /\n componentWillLoad() {\n this.initializeOptions();\n }\n /\n Lifecycle method called after the component is rendered.\n * Initializes select-related functionality.\n /\n componentDidLoad() {\n this.setupMutationObserver();\n }\n /\n Lifecycle method called when the component is connected to the DOM.\n * Applies styles based on the theme.\n /\n connectedCallback() {\n this.applyStyles();\n }\n /\n Lifecycle method called when the component is disconnected from the DOM.\n * Disconnects the MutationObserver if it exists.\n /\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n }\n\n initializeOptions() {\n this.options = this.host.querySelectorAll<HTMLCuraSelectOptionElement>('cura-select-option');\n this.options.forEach(option => {\n option.setAttribute('size', this.size);\n\n const isSelected = this.value === option.value\n option.setAttribute('selected', JSON.stringify(isSelected));\n\n if (isSelected) {\n this.value = option.value\n this.internals.setFormValue(option.value)\n }\n });\n\n this.textInput = Array.from(this.options).find(option => option.value === this.value)?.textContent \|\| this.textInput\n }\n /\n Applies styles to the component based on the theme.\n /\n applyStyles() {\n const { fonts, colors } = this.theme;\n const fontWeights = fonts.getWeights();\n\n this.styles = {\n ...this.styles,\n '--font-weight-medium': fontWeights.medium,\n '--font-weight-bold': fontWeights.bold,\n '--font-weight-regular': fontWeights.regular,\n '--font-color': fonts.getColor(),\n '--font-family': fonts.getFamily(),\n '--font-size': fonts.getSize(),\n };\n\n const colorKeys = [\n 'primary-base', 'neutral-purewhite', 'neutral-white', 'neutral-black', 'neutral-medium', 'neutral-light',\n 'neutral-base', 'neutral-dark', 'success-dark', 'success-darker', 'success-lighter',\n 'error-lighter', 'error-dark', 'error-darker', 'error-base', 'info-base'\n ];\n\n colorKeys.forEach(key => {\n this.styles[`--${key}`] = colors.getColor(key);\n });\n }\n /\n Sets up a MutationObserver to watch for changes in the component.\n /\n setupMutationObserver() {\n this.mutationObserver = new MutationObserver(this.handleMutations);\n this.mutationObserver.observe(this.host, { attributes: true, subtree: true, attributeFilter: ['selected', 'value'] });\n }\n /\n Handles mutations observed by the MutationObserver.\n * Updates the selected option or filters options based on the mutation type.\n /\n handleMutations = (mutations: MutationRecord[]) => {\n mutations.forEach(mutation => {\n if (mutation.type === 'attributes') {\n if (mutation.attributeName === 'selected') this.updateSelectedOption();\n }\n });\n };\n /\n Handles the selection of an option.\n /\n onOptiselected = (event: Event) => {\n const selectedOption = event.target as HTMLElement;\n this.clearSelectedAttributes();\n selectedOption.setAttribute('selected', 'true');\n };\n\n @Watch('value')\n handleValueChange(newValue: string) {\n this.clearSelectedAttributes();\n\n const selectedOption = this.host.querySelector(`cura-select-option[value=\"${newValue}\"]`);\n\n if(!selectedOption) {\n return\n }\n\n selectedOption.setAttribute('selected', 'true');\n }\n\n updateSelectedOption() {\n const selectedOptionElement = this.host.querySelector<HTMLCuraSelectOptionElement>('cura-select-option[selected]');\n\n if (!selectedOptionElement) {\n return\n }\n\n this.value = selectedOptionElement.value\n this.internals.setFormValue(this.value)\n\n if (this.textInput !== selectedOptionElement.textContent) {\n this.textInput = selectedOptionElement.textContent ;\n this.isOpen = false;\n this.selected.emit(selectedOptionElement.value);\n }\n }\n\n /\n Clears the 'selected' attribute from all options.\n /\n clearSelectedAttributes() {\n this.options.forEach(option => option.removeAttribute('selected'));\n }\n\n handleKeyNavigation = (event: KeyboardEvent) => {\n const { code: keyCode } = event\n\n if (!this.isOpen && keyCode === 'ArrowDown') {\n this.isOpen = true\n this.activeIndex = 0\n\n return\n }\n\n if (keyCode === 'ArrowDown') {\n event.preventDefault();\n this.updateActiveIndex(1);\n }\n\n if (keyCode === 'ArrowUp') {\n event.preventDefault();\n this.updateActiveIndex(-1);\n }\n\n if (keyCode === 'Enter' \|\| keyCode === 'Space') {\n this.options[this.activeIndex]?.click();\n }\n\n if (keyCode === 'Escape') {\n this.isOpen = false\n }\n }\n\n updateActiveIndex(direction: number) {\n if (this.options.length === 0) return;\n this.activeIndex = (this.activeIndex + direction + this.options.length) % this.options.length;\n }\n\n handleInputChange = (e: Event) => {\n this.textInput = (e.target as HTMLInputElement).value;\n this.isOpen = this.textInput.length > 0;\n this.internals.setFormValue(this.textInput);\n };\n\n\n getClasses() {\n return {\n wrapper: true,\n label: !!this.label,\n disabled: this.disabled,\n transparent: this.mode === 'transparent',\n [this.size.toLowerCase()]: true,\n [this.status.toLowerCase()]: true,\n };\n }\n\n /\n Determines the color based on the item type and component state.\n /\n getColor(item: 'label' \| 'text' \| 'icon') {\n if (this.disabled) return 'neutral-medium';\n\n const isStatusDefault = this.status === 'default';\n const isHoveredOrFocused = this.isFocused \|\| this.isHovered;\n\n if (item === 'label') {\n if (!isStatusDefault \|\| isHoveredOrFocused) return 'neutral-black';\n return 'neutral-dark';\n }\n\n if (isHoveredOrFocused && isStatusDefault) return 'neutral-black';\n if (this.status === 'success') return 'success-dark';\n if (this.status === 'error') return 'error-dark';\n\n return 'neutral-dark';\n }\n\n /\n Renders the icon based on the component's status.\n /\n renderIcon() {\n if (this.status === 'default') return null;\n const icon = { success: 'checkCircle', error: 'alertCircle' }[this.status];\n return (\n <cura-icon\n class='feedback-icon'\n name={icon}\n iconset='default'\n size={this.size === 'large' ? 20 : 16}\n color={this.getColor('icon')}\n style={this.styles}\n />\n );\n }\n\n handleClick = (event: MouseEvent) => {\n if (this.disabled) return event.preventDefault();\n const target = event.target as HTMLElement;\n\n if (target.tagName === 'CURA-SELECT-OPTION') return this.onOptiselected(event);\n this.isOpen = !this.isOpen;\n };\n\n\n render() {\n return (\n <Host style={this.styles}>\n <div\n class={this.getClasses()}\n onMouseEnter={() => (this.isHovered = true)}\n onMouseLeave={() => (this.isHovered = false)}\n onClick={this.handleClick}\n >\n {this.label && (\n <cura-label\n class='label'\n weight='bold'\n size={this.size === 'large' ? 'small' : 'xsmall'}\n color={this.getColor('label')}\n >\n {this.label} {this.required && <span class='required'> </span>}\n </cura-label>\n )}\n\n <div class={{\n 'cura-input-field': true,\n 'open': this.isOpen\n }}>\n {this.renderIcon()}\n <input\n type=\"text\"\n autocomplete='off'\n onFocus={() => (this.isFocused = true)}\n onBlur={() => (this.isFocused = false)}\n onKeyDown={this.handleKeyNavigation}\n aria-required={String(this.required)}\n aria-disabled={String(this.disabled)}\n aria-invalid={String(this.status === 'error')}\n onInput={this.handleInputChange}\n style={this.styles}\n placeholder={this.placeholder}\n disabled={this.disabled}\n required={this.required}\n value={this.textInput}\n readonly={this.searchBehavior ? null : true}\n />\n <cura-icon\n name={this.isOpen ? 'up' : 'down'}\n class=\"up-down-icon\"\n color={this.disabled ? 'neutral-dark' : 'primary-base'}\n size={16}\n iconset='default'\n />\n </div>\n <cura-label\n class=\"helper-text\"\n size='xsmall'\n color={this.getColor('text')}\n weight={this.mode === 'transparent' ? 'bold' : 'regular'} >\n <slot></slot>\n </cura-label>\n {this.isOpen && (\n <div class={{\n 'menu': true,\n 'open': this.isOpen\n }}>\n <slot name='option'></slot>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}

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

@@ -9,7 +9,8 @@ const renderCuraSelect = (args) => {
   size="${args.size}"` : ''}${args.status ? `
   status="${args.status}"` : ''}${args.disabled ? `
   disabled` : ''}${args.required ? `
-  required` : ''}>
+  required` : ''}${args.searchBehavior ? `
+  search-behavior="${args.searchBehavior}"` : ''}>
   ${args.helperText}
   ${optionsMarkup}
 </cura-select>`;
@@ -96,6 +97,14 @@ export default {
                 defaultValue: { summary: 'false' },
             },
         },
+        searchBehavior: {
+            control: 'boolean',
+            description: 'Habilita o modo de digitação e busca nas opções a partir do termo.',
+            table: {
+                category: 'states',
+                defaultValue: { summary: 'false' },
+            }
+        },
         helperText: {
             name: 'content',
             control: 'text',
@@ -138,6 +147,7 @@ export const CuraSelect = {
         status: 'default',
         disabled: false,
         required: false,
+        searchBehavior: false,
         helperText: 'Texto de ajuda'
     },
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"cura-select.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-select/cura-select.stories.tsx"],"names":[],"mappings":"AAAA,MAAM,gBAAgB,GAAG,CAAC,IAAI,EAAE,EAAE;IAChC,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAC9C,8BAA8B,MAAM,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,uBAAuB,CACnF,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAEX,MAAM,KAAK,GAAG,eAAe,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;WACjC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;iBAClC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;mBAC7C,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;WACjD,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;UAClC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;UAChC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;YAChC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;WACvC,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;WACxB,CAAC,CAAC,CAAC,EAAE;~~IACZ~~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","sourcesContent":["const renderCuraSelect = (args) => {\n const optionsMarkup = args.options.map(option =>\n `<cura-select-option value=\"${option.value}\">${option.label}</cura-select-option>`\n ).join('');\n\n const block = `<cura-select${args.label ? `\n label=\"${args.label}\"` : ''}${args.placeholder ? `\n placeholder=\"${args.placeholder}\"` : ''}${args.defaultValue ? `\n default-value=\"${args.defaultValue}\"` : ''}${args.value ? `\n value=\"${args.value}\"` : ''}${args.mode ? `\n mode=\"${args.mode}\"` : ''}${args.size ? `\n size=\"${args.size}\"` : ''}${args.status ? `\n status=\"${args.status}\"` : ''}${args.disabled ? `\n disabled` : ''}${args.required ? `\n required` : ''}>\n ${args.helperText}\n ${optionsMarkup}\n</cura-select>`;\n\n return `<div style=\"height: 200px; padding: 20px;\">${block}</div>`;\n};\n\n\n\nexport default {\n title: 'Componentes/Forms/Select',\n component: 'cura-select',\n tags: ['autodocs'],\n render: (args) => renderCuraSelect(args),\n argTypes: {\n label: {\n control: 'text',\n description: 'Texto do rótulo para o componente select.',\n table: {\n category: 'Propriedades',\n defaultValue: { summary: '' },\n },\n },\n placeholder: {\n control: 'text',\n description: 'Texto de espaço reservado para o campo de entrada.',\n table: {\n category: 'Propriedades',\n defaultValue: { summary: '' },\n },\n },\n defaultValue: {\n control: 'text',\n description: 'Valor padrão para o componente select.',\n table: {\n category: 'Propriedades',\n defaultValue: { summary: '' },\n },\n },\n value: {\n control: 'text',\n description: 'Valor atual do componente select. Ao inicar a busca o mesmo se refere ao option relacionado',\n table: {\n category: 'Propriedades',\n defaultValue: { summary: '' },\n },\n },\n mode: {\n control: { type: 'inline-radio' },\n options: ['default', 'transparent'],\n description: \"Modo de exibição do componente select. Pode ser 'default' ou 'transparent'.\",\n table: {\n category: 'Propriedades',\n defaultValue: { summary: 'default' },\n },\n },\n size: {\n control: { type: 'inline-radio' },\n options: ['small', 'medium', 'large'],\n description: \"Tamanho do componente select. Pode ser 'small', 'medium' ou 'large'.\",\n table: {\n category: 'Propriedades',\n defaultValue: { summary: 'medium' },\n },\n },\n status: {\n control: { type: 'inline-radio' },\n options: ['default', 'success', 'error'],\n description: \"Status do componente select. Pode ser 'success', 'error' ou 'default'.\",\n table: {\n category: 'Propriedades',\n defaultValue: { summary: 'default' },\n },\n },\n disabled: {\n control: 'boolean',\n description: 'Indica se o componente select está desabilitado.',\n table: {\n category: 'states',\n defaultValue: { summary: 'false' },\n },\n },\n required: {\n control: 'boolean',\n description: 'Indica se o componente select é obrigatório.',\n table: {\n category: 'states',\n defaultValue: { summary: 'false' },\n },\n },\n helperText: {\n name: 'content',\n control: 'text',\n description: 'Define o texto de ajuda do input, renderizado dentro do slot num elemento <cura-label>. Aceita tags HTML.',\n table: {\n category: 'Slots',\n defaultValue: { summary: '' },\n },\n },\n onselect: {\n description: 'Emite um evento via Listener quando um valor é selecionado. { value: string , selected: boolean }',\n table: {\n category: 'Evento',\n defaultValue: { summary: '' },\n },\n },\n options: {\n control: 'array',\n description: 'Lista de opções definido pela aplicação para cura-select-option.',\n table: {\n category: 'aplication',\n defaultValue: { summary: '[]' },\n },\n },\n },\n};\n\nexport const CuraSelect = {\n args: {\n options: [\n { value: '1', label: 'Opção 1' },\n { value: '2', label: 'Escolha 2' },\n { value: '3', label: 'Exemplo 3' },\n ],\n label: 'Escolha uma opção',\n placeholder: 'Selecione...',\n defaultValue: '',\n value: '',\n mode: 'default',\n size: 'medium',\n status: 'default',\n disabled: false,\n required: false,\n helperText: 'Texto de ajuda'\n },\n};\n"]}
1	+ {"version":3,"file":"cura-select.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-select/cura-select.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["const renderCuraSelect = (args) => {\n const optionsMarkup = args.options.map(option =>\n `<cura-select-option value=\"${option.value}\">${option.label}</cura-select-option>`\n ).join('');\n\n const block = `<cura-select${args.label ? `\n label=\"${args.label}\"` : ''}${args.placeholder ? `\n placeholder=\"${args.placeholder}\"` : ''}${args.defaultValue ? `\n default-value=\"${args.defaultValue}\"` : ''}${args.value ? `\n value=\"${args.value}\"` : ''}${args.mode ? `\n mode=\"${args.mode}\"` : ''}${args.size ? `\n size=\"${args.size}\"` : ''}${args.status ? `\n status=\"${args.status}\"` : ''}${args.disabled ? `\n disabled` : ''}${args.required ? `\n required` : ''}${args.searchBehavior ? `\n search-behavior=\"${args.searchBehavior}\"` : ''}>\n ${args.helperText}\n ${optionsMarkup}\n</cura-select>`;\n\n return `<div style=\"height: 200px; padding: 20px;\">${block}</div>`;\n};\n\n\n\nexport default {\n title: 'Componentes/Forms/Select',\n component: 'cura-select',\n tags: ['autodocs'],\n render: (args) => renderCuraSelect(args),\n argTypes: {\n label: {\n control: 'text',\n description: 'Texto do rótulo para o componente select.',\n table: {\n category: 'Propriedades',\n defaultValue: { summary: '' },\n },\n },\n placeholder: {\n control: 'text',\n description: 'Texto de espaço reservado para o campo de entrada.',\n table: {\n category: 'Propriedades',\n defaultValue: { summary: '' },\n },\n },\n defaultValue: {\n control: 'text',\n description: 'Valor padrão para o componente select.',\n table: {\n category: 'Propriedades',\n defaultValue: { summary: '' },\n },\n },\n value: {\n control: 'text',\n description: 'Valor atual do componente select. Ao inicar a busca o mesmo se refere ao option relacionado',\n table: {\n category: 'Propriedades',\n defaultValue: { summary: '' },\n },\n },\n mode: {\n control: { type: 'inline-radio' },\n options: ['default', 'transparent'],\n description: \"Modo de exibição do componente select. Pode ser 'default' ou 'transparent'.\",\n table: {\n category: 'Propriedades',\n defaultValue: { summary: 'default' },\n },\n },\n size: {\n control: { type: 'inline-radio' },\n options: ['small', 'medium', 'large'],\n description: \"Tamanho do componente select. Pode ser 'small', 'medium' ou 'large'.\",\n table: {\n category: 'Propriedades',\n defaultValue: { summary: 'medium' },\n },\n },\n status: {\n control: { type: 'inline-radio' },\n options: ['default', 'success', 'error'],\n description: \"Status do componente select. Pode ser 'success', 'error' ou 'default'.\",\n table: {\n category: 'Propriedades',\n defaultValue: { summary: 'default' },\n },\n },\n disabled: {\n control: 'boolean',\n description: 'Indica se o componente select está desabilitado.',\n table: {\n category: 'states',\n defaultValue: { summary: 'false' },\n },\n },\n required: {\n control: 'boolean',\n description: 'Indica se o componente select é obrigatório.',\n table: {\n category: 'states',\n defaultValue: { summary: 'false' },\n },\n },\n searchBehavior: {\n control: 'boolean',\n description: 'Habilita o modo de digitação e busca nas opções a partir do termo.',\n table: {\n category: 'states',\n defaultValue: { summary: 'false' },\n }\n },\n helperText: {\n name: 'content',\n control: 'text',\n description: 'Define o texto de ajuda do input, renderizado dentro do slot num elemento <cura-label>. Aceita tags HTML.',\n table: {\n category: 'Slots',\n defaultValue: { summary: '' },\n },\n },\n onselect: {\n description: 'Emite um evento via Listener quando um valor é selecionado. { value: string , selected: boolean }',\n table: {\n category: 'Evento',\n defaultValue: { summary: '' },\n },\n },\n options: {\n control: 'array',\n description: 'Lista de opções definido pela aplicação para cura-select-option.',\n table: {\n category: 'aplication',\n defaultValue: { summary: '[]' },\n },\n },\n },\n};\n\nexport const CuraSelect = {\n args: {\n options: [\n { value: '1', label: 'Opção 1' },\n { value: '2', label: 'Escolha 2' },\n { value: '3', label: 'Exemplo 3' },\n ],\n label: 'Escolha uma opção',\n placeholder: 'Selecione...',\n defaultValue: '',\n value: '',\n mode: 'default',\n size: 'medium',\n status: 'default',\n disabled: false,\n required: false,\n searchBehavior: false,\n helperText: 'Texto de ajuda'\n },\n};\n"]}

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

@@ -97,7 +97,9 @@
 :host ::slotted(b), :host ::slotted(strong) {
   font-weight: var(--font-weight-bold);
 }
-:host ::slotted(a) {
+:host ::slotted(a),
+:host ::slotted(span a),
+:host ::slotted(a:-webkit-any-link), :host p a {
   font-weight: var(--font-weight-medium);
   color: var(--color-link);
   text-underline-offset: 10%;

package/dist/collection/stories/blocks/index.js ADDED Viewed

@@ -0,0 +1,85 @@
+import { useOf } from "@storybook/blocks";
+import { CuraHeading, CuraParagraph, CuraAlert } from "../../../../component-lib-react/dist/index.js";
+import { Source, Unstyled } from '@storybook/blocks';
+import Markdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+const MarkdownSbUnstyled = {
+  p(props) {
+    const {children} = props;
+    return <span>{children}</span>
+  }
+}
+export const Block = ({options}, key) => {
+  switch(options.type) {
+    case 'subtitle': {
+      return (
+        <Unstyled>
+          <CuraHeading size="small" level="2" weight="bold" key={key}>{options.content}</CuraHeading>
+        </Unstyled>
+      )
+    }
+    case 'text': {
+      return (
+        <Unstyled>
+          <CuraParagraph key={key}>
+            <Markdown rehypePlugins={[rehypeRaw]} components={MarkdownSbUnstyled}>{ options.content }</Markdown>
+          </CuraParagraph>
+        </Unstyled>
+      )
+    }
+    case 'alert': {
+      return (
+        <Unstyled>
+          <CuraAlert key={key} closeable="false" floating="false" label={options.title} type={options.mode} style={{maxWidth: "640px", marginBlock: "2rem"}}>
+            <Markdown rehypePlugins={[rehypeRaw]} components={MarkdownSbUnstyled}>{ options.content }</Markdown>
+          </CuraAlert>
+        </Unstyled>
+      )
+    }
+    case 'code': {
+      return (
+        <Source language={options.lang} code={options.content} key={key}/>
+      )
+    }
+    case 'list': {
+      const listItems = options.items.map((item, i) => {
+        return (
+          <li key={`${key}-${i}`}>
+             <Markdown rehypePlugins={[rehypeRaw]} components={MarkdownSbUnstyled}>{ item }</Markdown>
+          </li>
+        )
+      });
+      return options.listType === 'ol'
+        ? ( <ol key={key}>{ listItems }</ol> )
+        : ( <ul key={key}>{ listItems }</ul> );
+    }
+  }
+  console.log(options);
+}
+export const Sections = (docsJson) => {
+  const resolveOf = useOf(docsJson.sections || 'component', ['component']);
+  const sections = resolveOf.component;
+  return (
+    sections.map(section => {
+      return (
+        <section key={section.id} id={section.id}>
+          <Unstyled>
+            <CuraHeading size="large" weight="bold">{section.title}</CuraHeading>
+          </Unstyled>
+          {
+            section.blocks.map((block, i) => {
+              const key = `${section.id}${i}`;
+              return (
+                <Block options={block} key={key}/>
+              )
+            })
+          }
+        </section>
+      )
+    })
+  );
+}