@rededor/cura 1.8.2-alpha.0 → 2.0.0-alpha.10

package/dist/collection/components/cura-alert/cura-alert.js

@@ -17,10 +17,11 @@ export class CuraAlert {
             { name: '--color-light', theme: `${this.type}-light` },
             { name: '--color-base', theme: `${this.type}-base` },
         ];
+        const updatedStyles = Object.assign({}, this.styles);
         colors.forEach(color => {
-            this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.theme);
+            updatedStyles[color.name] = window.CuraAPI.theme.colors.getColor(color.theme);
         });
-        this.styles = Object.assign({}, this.styles);
+        this.styles = updatedStyles;
     }
     connectedCallback() {
         this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
@@ -42,7 +43,7 @@ export class CuraAlert {
         return this.icon ? this.icon : iconMapping[this.type];
     }
     render() {
-        return (h(Host, { key: '2bb12a2c1f982aa328da2ba9fd80434459651735', role: "alert", "aria-live": "polite", "aria-atomic": "true", "aria-label": this.label }, h("div", { key: 'c3103080439a2d15dc530fd4d3e1945937da302a', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: '0465d437885134eefdc41cdfe74a43a83f9e5265', name: this.getNameIcon(), class: "icon-left", size: 16, color: `${this.type}-dark` }), h("div", { key: '15c7545a76db2032e6ee20b8f27b90199cc95020', class: "content" }, this.label ? (h("cura-heading", { class: "title", size: "xsmall", color: "neutral-black", weight: "bold", "margin-block": "1px 0" }, this.label)) : '', h("cura-paragraph", { key: 'af74fc113ffdca4cf4ce4f52133ab1ecfb94f002', class: "text", color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '5979eac43e2729097ec8d47c1f1b58a5834e4b02' })), h("slot", { key: 'c74a0bf68cb024a04c36392c6c3a2303bdd8e842', name: "actions" })), this.closeable ?
+        return (h(Host, { key: 'f64ddb202b9436f9bebd4316979ffc1ad8d2c711', role: "alert", "aria-live": "polite", "aria-atomic": "true", "aria-label": this.label }, h("div", { key: 'c1320f2a8007169776bf1d8b59301c9e070d97f3', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: '18b352ca24b9904624e10beadc8ef2a214ef3ee4', name: this.getNameIcon(), class: "icon-left", size: 16, color: `${this.type}-dark` }), h("div", { key: '4f025525470856227ff65b36c27c8dcffc73be99', class: "content" }, this.label ? (h("cura-heading", { class: "title", size: "xsmall", color: "neutral-black", weight: "bold", "margin-block": "1px 0" }, this.label)) : '', h("cura-paragraph", { key: 'b1dcbf2fc75c387a8e30b255b94a3439d6443548', class: "text", color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: 'd4473ba49462f93fe5b4c5b2729ca018c7cc322c' })), h("slot", { key: '2d3d5e549a600424c13ae2642845af40fb3c0894', name: "actions" })), this.closeable ?
             (h("cura-icon", { name: "close", size: 16, color: "error-dark", class: "icon-right", onClick: this.handleClose }))
             : '')));
     }

package/dist/collection/components/cura-alert/cura-alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-alert.js","sourceRoot":"","sources":["../../../src/components/cura-alert/cura-alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Prop, Host, h, State, Watch, Event, EventEmitter } from '@stencil/core';\n@Component({\n  tag: 'cura-alert',\n  styleUrl: 'cura-alert.scss',\n  shadow: true,\n})\nexport class CuraAlert {\n  @Element() host: HTMLElement;\n\n  @Prop() type: 'info' | 'success' | 'warning' | 'error' = 'info';\n  @Prop({ reflect: true }) floating = false;\n  @Prop({ reflect: true }) label: string;\n  @Prop({ reflect: true }) closeable = true;\n  @Prop({ reflect: true }) icon: string;\n\n  @State() styles = {};\n\n  @Event({ eventName: 'close' }) close: EventEmitter<void>;\n\n  @Watch('type')\n  setColors() {\n    const colors = [\n      { name: '--color-lighter', theme: `${this.type}-lighter` },\n      { name: '--neutral-black', theme: 'neutral-black' },\n      { name: '--color-light', theme: `${this.type}-light` },\n      { name: '--color-base', theme: `${this.type}-base` },\n    ];\n\n    colors.forEach(color => {\n      this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.theme);\n    });\n    this.styles = {...this.styles};\n  }\n\n  connectedCallback() {\n    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n    this.setColors();\n  }\n\n  getClasses() {\n    const classes = {};\n    classes['conteiner'] = true;\n    classes['floating'] = this.floating;\n    return classes;\n  }\n\n  getNameIcon() {\n    const iconMapping = {\n      info: 'infoCircle',\n      success: 'checkCircle',\n      warning: 'alertCircle',\n      error: 'alertTriangle',\n    };\n    return this.icon ? this.icon : iconMapping[this.type];\n  }\n\n  handleClose = () => {\n    this.close.emit();\n    this.host.remove();\n  };\n\n  render() {\n    return (\n      <Host role=\"alert\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        aria-label={this.label}>\n        <div class={this.getClasses()} style={this.styles}>\n          <cura-icon name={this.getNameIcon()} class=\"icon-left\" size={16} color={`${this.type}-dark`}></cura-icon>\n          <div class=\"content\">\n            { this.label ? (\n            <cura-heading class=\"title\" size=\"xsmall\" color=\"neutral-black\" weight=\"bold\" margin-block=\"1px 0\">\n              {this.label}\n            </cura-heading>\n            ) : ''}\n            <cura-paragraph class=\"text\" color={`${this.type}-darker`} size=\"xsmall\" marginBlock=\"0\" lineHeight=\"133.33%\">\n              <slot></slot>\n            </cura-paragraph>\n            <slot name=\"actions\"></slot>\n          </div>\n          { this.closeable ?\n          (<cura-icon name=\"close\" size={16} color=\"error-dark\" class=\"icon-right\" onClick={this.handleClose}></cura-icon>)\n          : '' }\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cura-alert.js","sourceRoot":"","sources":["../../../src/components/cura-alert/cura-alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Prop, Host, h, State, Watch, Event, EventEmitter } from '@stencil/core';\n@Component({\n  tag: 'cura-alert',\n  styleUrl: 'cura-alert.scss',\n  shadow: true,\n})\nexport class CuraAlert {\n  @Element() host: HTMLElement;\n\n  @Prop() type: 'info' | 'success' | 'warning' | 'error' = 'info';\n  @Prop({ reflect: true }) floating = false;\n  @Prop({ reflect: true }) label: string;\n  @Prop({ reflect: true }) closeable = true;\n  @Prop({ reflect: true }) icon: string;\n\n  @State() styles = {};\n\n  @Event({ eventName: 'close' }) close: EventEmitter<void>;\n\n  @Watch('type')\n  setColors() {\n    const colors = [\n      { name: '--color-lighter', theme: `${this.type}-lighter` },\n      { name: '--neutral-black', theme: 'neutral-black' },\n      { name: '--color-light', theme: `${this.type}-light` },\n      { name: '--color-base', theme: `${this.type}-base` },\n    ];\n\n    const updatedStyles = {\n      ...this.styles\n    }\n\n    colors.forEach(color => {\n      updatedStyles[color.name] = window.CuraAPI.theme.colors.getColor(color.theme);\n    });\n    \n    this.styles = updatedStyles;\n  }\n\n  connectedCallback() {\n    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n    this.setColors();\n  }\n\n  getClasses() {\n    const classes = {};\n    classes['conteiner'] = true;\n    classes['floating'] = this.floating;\n    return classes;\n  }\n\n  getNameIcon() {\n    const iconMapping = {\n      info: 'infoCircle',\n      success: 'checkCircle',\n      warning: 'alertCircle',\n      error: 'alertTriangle',\n    };\n    return this.icon ? this.icon : iconMapping[this.type];\n  }\n\n  handleClose = () => {\n    this.close.emit();\n    this.host.remove();\n  };\n\n  render() {\n    return (\n      <Host role=\"alert\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        aria-label={this.label}>\n        <div class={this.getClasses()} style={this.styles}>\n          <cura-icon name={this.getNameIcon()} class=\"icon-left\" size={16} color={`${this.type}-dark`}></cura-icon>\n          <div class=\"content\">\n            { this.label ? (\n            <cura-heading class=\"title\" size=\"xsmall\" color=\"neutral-black\" weight=\"bold\" margin-block=\"1px 0\">\n              {this.label}\n            </cura-heading>\n            ) : ''}\n            <cura-paragraph class=\"text\" color={`${this.type}-darker`} size=\"xsmall\" marginBlock=\"0\" lineHeight=\"133.33%\">\n              <slot></slot>\n            </cura-paragraph>\n            <slot name=\"actions\"></slot>\n          </div>\n          { this.closeable ?\n          (<cura-icon name=\"close\" size={16} color=\"error-dark\" class=\"icon-right\" onClick={this.handleClose}></cura-icon>)\n          : '' }\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cura-dropdown-search/cura-dropdown-search.css

@@ -84,7 +84,7 @@
 }
 :host .component-container.zoom {
   position: fixed;
-  top: 0;
+  top: var(--top-offset, 0);
   left: 0;
   width: 100vw;
   background: var(--purewhite);

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

@@ -72,6 +72,13 @@ export class CuraDropdownSearch {
                 this.setZoomHeight();
             }, this.resizeTimeoutMs);
         };
+        this.handleVisualViewportChange = () => {
+            if (!this.zoomState)
+                return;
+            if (this.viewportTimeout)
+                clearTimeout(this.viewportTimeout);
+            this.viewportTimeout = setTimeout(() => this.setZoomHeight(), this.resizeTimeoutMs);
+        };
         this.handleFocus = () => {
             if (this.focusTimeout)
                 clearTimeout(this.focusTimeout);
@@ -170,6 +177,10 @@ export class CuraDropdownSearch {
         this.styles['--font-weight-medium'] = this.weights.medium;
         window === null || window === void 0 ? void 0 : window.addEventListener('resize', this.handleWindowResize);
         window === null || window === void 0 ? void 0 : window.addEventListener('orientationchange', this.handleWindowResize);
+        if (window === null || window === void 0 ? void 0 : window.visualViewport) {
+            window.visualViewport.addEventListener('resize', this.handleVisualViewportChange);
+            window.visualViewport.addEventListener('scroll', this.handleVisualViewportChange);
+        }
         this.isMobile = checkMobile();
     }
     componentDidLoad() {
@@ -186,6 +197,10 @@ export class CuraDropdownSearch {
     removeAllListeners() {
         window === null || window === void 0 ? void 0 : window.removeEventListener('resize', this.handleWindowResize);
         window === null || window === void 0 ? void 0 : window.removeEventListener('orientationchange', this.handleWindowResize);
+        if (window === null || window === void 0 ? void 0 : window.visualViewport) {
+            window.visualViewport.removeEventListener('resize', this.handleVisualViewportChange);
+            window.visualViewport.removeEventListener('scroll', this.handleVisualViewportChange);
+        }
         this.host.removeEventListener('actionclick', this.handleOptionActionClick);
         this.host.removeEventListener('selectoption', this.handleSelectOption);
     }
@@ -231,7 +246,9 @@ export class CuraDropdownSearch {
             if (this.valueTimeout)
                 clearTimeout(this.valueTimeout);
             this.valueTimeout = setTimeout(() => {
-                this.termchange.emit(this.value === '' || this.value.length < this.searchminchars ? '' : this.value);
+                var _a;
+                const value = (_a = this.value) !== null && _a !== void 0 ? _a : '';
+                this.termchange.emit(value === '' || value.length < this.searchminchars ? '' : value);
             }, this.searchdelay || 300);
         }
     }
@@ -290,9 +307,14 @@ export class CuraDropdownSearch {
         setTimeout(() => { this.zoomState = false; }, 300);
     }
     setZoomHeight() {
-        var _a;
-        const h = window ? `${((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || window.innerHeight}px` : '100vh';
-        this.styles = Object.assign(Object.assign({}, this.styles), { '--height': h });
+        if (window === null || window === void 0 ? void 0 : window.visualViewport) {
+            const height = `${window.visualViewport.height}px`;
+            const topOffset = `${window.visualViewport.offsetTop}px`;
+            this.styles = Object.assign(Object.assign({}, this.styles), { '--height': height, '--top-offset': topOffset });
+            return;
+        }
+        const h = window ? `${window.innerHeight}px` : '100vh';
+        this.styles = Object.assign(Object.assign({}, this.styles), { '--height': h, '--top-offset': '0px' });
     }
     getClasses() {
         return {
@@ -309,7 +331,7 @@ export class CuraDropdownSearch {
         };
     }
     render() {
-        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() })))));
+        return (h(Host, { key: '7a312071ecc60fe462636ad7b32bcb82b5d5c1a2', style: this.getHostCSSProperties(), role: "search", "aria-label": this.label, "aria-required": this.required, "aria-disabled": this.disabled, "aria-expanded": this.zoomState }, h("div", { key: 'c4b906871b300013208649f8dcf9b27cf161daae', class: this.getClasses(), style: this.styles }, h("div", { key: '97d3d3ae67dc79f2d04456555388cce9aec36f7d', 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: '53aa07646542b9941804f7a7f0d66f8c340ce664', 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: 'fb206e8295b0139082b79cc747bfe8e424df33fa', name: "helperText" }))), h("div", { key: '8ab0ad70e667c4b01b2f7a31fc5df6056b170565', class: "dropdown-container", onMouseOver: () => this.handleDropdownMouseOver() }, h("slot", { key: 'dc3cda02f7a70d7229457d6c225a606ee2e03f52', onSlotchange: () => this.handleSlotChange() })))));
     }
     static get is() { return "cura-dropdown-search"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"cura-dropdown-search.js","sourceRoot":"","sources":["../../../src/components/cura-dropdown-search/cura-dropdown-search.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, State, Method, Event, EventEmitter } from '@stencil/core';\nimport { checkMobile, checkIOS } from '../../utils/utils';\nimport { FixedElementScrollBehavior } from '../../utils/FixedElementScrollBehavior';\n\n@Component({\n  tag: 'cura-dropdown-search',\n  styleUrl: 'cura-dropdown-search.scss',\n  shadow: true,\n})\nexport class CuraDropdownSearch {\n  @Element() host: HTMLElement;\n  /**\n   * Name of the field.\n   * Required.\n   */\n  @Prop({ reflect: true }) name!: string;\n  /**\n   * Size of the dropdown search component\n   * Values: 'small', 'medium' or 'large' (default).\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' | string = 'large';\n  /**\n   * Define component status.\n   * Values: 'error' or 'default'.\n   */\n  @Prop({ reflect: true, mutable: true }) status: 'error' | 'default' | string = 'default';\n  /**\n   * Disabled state. Default: false.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /**\n   * Field is required. Default: false.\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n  /**\n   * The placeholder text.\n   */\n  @Prop({ reflect: true }) placeholder: string = '';\n  /**\n   * The label.\n   */\n  @Prop({ reflect: true }) label: string = '';\n  /**\n   * Custom icon name. Default: search.\n   */\n  @Prop({ reflect: true }) icon: string = 'search';\n  /**\n   * CSS max-height property for dropdown item.\n   * Can also be used by css property --max-height.\n   * Default: 400px\n   */\n  @Prop({ reflect: true }) maxheight: string = '400px';\n  /**\n   * Readonly property value.\n   * Represents the term on the search input field.\n   */\n  @Prop({ mutable: true }) value: string = '';\n  /**\n   * Delay in milliseconds to dispatch search events.\n   * Default: 400\n   */\n  @Prop({ reflect: true }) searchdelay: number = 400;\n  /**\n   * Min chars to dispatch search events.\n   * Default: 3\n   */\n  @Prop({ reflect: true }) searchminchars: number = 3;\n\n  /**\n   * Set focus to input field.\n   */\n  @Method()\n  async setFocus() {\n    this.getInputElement().setFocus();\n  }\n  /**\n   * Select by optionid property of a selectable option component.\n   */\n  @Method()\n  async selectOption(optionid: string) {\n    this._selectOption(optionid);\n  }\n\n  @Event() termchange: EventEmitter<string>;\n  @Event() optionselect: EventEmitter<string>;\n\n  @State() styles = {};\n  @State() zoomState = false;\n  @State() isOnFocus: boolean = false;\n\n  scrollBehavior: FixedElementScrollBehavior;\n\n  weights: any;\n  breakpoints: any;\n  isMobile: boolean;\n\n  resizeTimeout: any;\n  resizeTimeoutMs = 66;\n  focusTimeout: any;\n  focusTimeoutMs = 500;\n  blurTimeout: any;\n  blurTimeoutMs = 300;\n  valueTimeout: any;\n\n  dropdownElement: HTMLDivElement;\n  selectedOptionElement: any;\n  highlightedElement: any;\n  highlightedIndex: number = -1;\n  @State() dropdownItems = [];\n  dropdownSelectableItems = [];\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.breakpoints = window.CuraAPI.theme.breakpoints.get();\n    this.styles['--info'] = window.CuraAPI.theme.colors.getColor('info-base');\n    this.styles['--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['--primary'] = window.CuraAPI.theme.colors.getColor('primary');\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    window?.addEventListener('resize', this.handleWindowResize);\n    window?.addEventListener('orientationchange', this.handleWindowResize);\n    this.isMobile = checkMobile();\n  }\n\n  componentDidLoad() {\n    this.dropdownElement = this.host.shadowRoot?.querySelector('.dropdown-container');\n    this.host.addEventListener('actionclick', this.handleOptionActionClick);\n    this.host.addEventListener('selectoption', this.handleSelectOption);\n    this.scrollBehavior = new FixedElementScrollBehavior(this.host, this.dropdownElement);\n    setTimeout(() => this.getSlotElements(), 10);\n  }\n\n  disconnectedCallback() {\n    this.removeAllListeners();\n  }\n\n  removeAllListeners() {\n    window?.removeEventListener('resize', this.handleWindowResize);\n    window?.removeEventListener('orientationchange', this.handleWindowResize);\n    this.host.removeEventListener('actionclick', this.handleOptionActionClick);\n    this.host.removeEventListener('selectoption', this.handleSelectOption);\n  }\n\n  handleSlotChange = () => { this.getSlotElements(); }\n\n  handleWindowResize = () => {\n    if (this.resizeTimeout) clearTimeout(this.resizeTimeout);\n    this.resizeTimeout = setTimeout(() => {\n      this.isMobile = checkMobile();\n      this.setZoomHeight();\n    }, this.resizeTimeoutMs);\n  }\n\n  handleFocus = () => {\n    if (this.focusTimeout) clearTimeout(this.focusTimeout);\n    this.focusTimeout = setTimeout(() => {\n      this.isOnFocus = true;\n      this.clearHighlight();\n      if (this.isMobile && !this.zoomState) this.enterZoom();\n      if (this.zoomState) this.setZoomHeight();\n      setTimeout(() => {\n          this.selectedOptionElement?.scrollIntoView({behavior: 'instant', block: 'nearest', inline: 'nearest'});\n      }, 10);\n    }, this.focusTimeoutMs);\n  }\n\n  handleBlur = () => {\n    if (this.blurTimeout) clearTimeout(this.blurTimeout);\n    this.blurTimeout = setTimeout(() => {\n      if (this.zoomState) {\n        const delay = checkIOS ? 500 : 100;\n        setTimeout(() => this.setZoomHeight(), delay);\n      }\n      this.isOnFocus = false;\n    }, this.blurTimeoutMs);\n  }\n\n  handleFocusout = () => {\n    if( this.zoomState ) this.setZoomHeight();\n  }\n\n  handleBackClick = () => { this.exitZoom(); }\n\n  handleOptionActionClick = (ev: CustomEvent) => {\n    this.getInputElement().setFocus();\n    this._preventEvent(ev);\n  }\n\n  handleInputClear = (ev: CustomEvent) => {\n    this.setValue('');\n    this.clearSelectedOptions();\n    this._preventEvent(ev);\n  }\n\n  handleSelectOption = (ev: CustomEvent) => {\n    this._selectOption(ev.detail);\n    this._preventEvent(ev);\n  }\n\n  handleInputValueChange = (ev: CustomEvent) => {\n    this.setValue(ev.detail);\n    if( this.selectedOptionElement && ev.detail !== this.selectedOptionElement.value) {\n      this.clearSelectedOptions();\n    }\n    this._preventEvent(ev);\n  }\n\n  handleDropdownMouseOver = () => {\n    if( this.highlightedElement || this.highlightedIndex >= 0 ) this.clearHighlight();\n  }\n\n  handleKeyDown = (ev: KeyboardEvent) => {\n    if( ev.key === 'ArrowDown' ) this.moveHighlight('next');\n    if( ev.key === 'ArrowUp' ) this.moveHighlight('prev');\n    if( ev.key === 'Enter' ) this.selectHighlight();\n  }\n\n  moveHighlight(direction: 'next' | 'prev') {\n    if (!this.dropdownSelectableItems.length) return;\n    let position = direction === 'next' ? this.highlightedIndex + 1 : this.highlightedIndex - 1;\n    if( position < 0) {\n      this.clearHighlight();\n      return;\n    }\n    const selectableItemsLastPosition = this.dropdownSelectableItems.length - 1;\n    if( position > selectableItemsLastPosition ) position = selectableItemsLastPosition;\n    if( this.highlightedElement ) this.highlightedElement.highlighted = false;\n    this.highlightedIndex = position;\n    this.highlightedElement = this.dropdownSelectableItems[position];\n    if( this.highlightedElement.selected ) {\n      this.moveHighlight(direction);\n      return;\n    }\n    this.highlightedElement.highlighted = true;\n    this.highlightedElement.scrollIntoView({behavior: 'instant', block: 'nearest', inline: 'nearest' });\n  }\n\n  clearHighlight() {\n    if( this.highlightedElement ) {\n      this.highlightedElement.highlighted = false;\n      this.highlightedElement = null;\n    }\n    this.highlightedIndex = -1;\n  }\n\n  selectHighlight() {\n    if( this.highlightedElement ) {\n      this._selectOption(this.highlightedElement.optionid);\n      this.clearHighlight();\n      this.getInputElement().blur();\n    }\n  }\n\n  setValue(value: string) {\n    if (this.value !== value) {\n      this.value = value;\n      if( this.valueTimeout) clearTimeout(this.valueTimeout);\n      this.valueTimeout = setTimeout(() => {\n        this.termchange.emit(this.value === '' || this.value.length < this.searchminchars ? '' : this.value);\n      }, this.searchdelay || 300);\n    }\n  }\n\n  _selectOption(optionid: string) {\n    if (!optionid) {\n      this.clearSelectedOptions();\n      this.setValue('');\n      return;\n    }\n    const optionElement = this.dropdownSelectableItems.find(option => option.optionid === optionid);\n    if( optionElement && !optionElement.selected ) {\n      this.clearSelectedOptions();\n      this.selectedOptionElement = optionElement;\n      this.selectedOptionElement.selected = true;\n      this.setValue(this.selectedOptionElement.value);\n      this.optionselect.emit(this.selectedOptionElement.optionid);\n      if (this.zoomState) setTimeout(() => this.exitZoom(), this.blurTimeoutMs);\n    }\n  }\n\n  clearSelectedOptions() {\n    this.dropdownSelectableItems.forEach(option => {\n      if( option.selected ) option.selected = false;\n    });\n    this.selectedOptionElement = null;\n  }\n\n  getSlotElements()  {\n    const elements = [];\n    const selectable = [];\n    let hasNotFound = false;\n    if( this.dropdownElement ) {\n      this.dropdownElement\n        .querySelector('slot')\n        .assignedElements()\n        .forEach(item => {\n          elements.push(item);\n          if( item.localName === 'cura-dropdown-search-option' && item[\"selectable\"] ) selectable.push(item);\n          if( item.localName === 'cura-dropdown-search-not-found' ) hasNotFound = true;\n        });\n    }\n    this.dropdownSelectableItems = selectable;\n    this.dropdownItems = elements;\n    this.status = hasNotFound ? 'error' : 'default';\n  }\n\n\n  enterZoom() {\n    this.scrollBehavior.disableScroll();\n    this.setZoomHeight();\n    this.zoomState = true;\n  }\n\n  exitZoom() {\n    this.scrollBehavior.enableScroll();\n    this.setZoomHeight();\n    setTimeout(() => { this.zoomState = false}, 300);\n  }\n\n  getInputElement = () => this.host.shadowRoot?.querySelector('cura-input-text');\n\n  setZoomHeight() {\n    const h = window ? `${window.visualViewport?.height || window.innerHeight}px` : '100vh';\n    this.styles = { ...this.styles, '--height': h };\n  }\n\n  getClasses() {\n    return {\n      \"component-container\": true,\n      \"mobile\": this.isMobile,\n      \"zoom\": this.zoomState,\n      \"dropdown-visible\": this.isOnFocus && (this.dropdownItems.length > 0 && !this.zoomState),\n      \"error\": this.status === 'error'\n    }\n  }\n\n  _preventEvent = (ev: Event) => {\n    ev.preventDefault();\n    ev.stopPropagation();\n  }\n\n  getHostCSSProperties() {\n    return {\n      '--max-height': this.maxheight || '400px'\n    };\n  }\n\n  render() {\n    return (\n      <Host style={ this.getHostCSSProperties() }\n        role=\"search\"\n        aria-label={ this.label }\n        aria-required={ this.required }\n        aria-disabled={ this.disabled }\n        aria-expanded={ this.zoomState }>\n        <div class={ this.getClasses() } style={ this.styles }>\n          <div class=\"component-controls\">\n            { this.isMobile && this.zoomState ? (\n              <cura-button-transparent\n                fontColor=\"dark\"\n                onClick={ () => this.handleBackClick() }\n                iconName=\"arrowLeft\"\n                size=\"large\"\n                iconOnly\n                color=\"primary\"\n                id=\"button-back\">\n              </cura-button-transparent>\n            ) : '' }\n            <cura-input-text\n              disabled={ this.disabled }\n              label={ this.label }\n              part=\"cura-input-field\"\n              mode={ this.zoomState ? 'transparent' : 'default' }\n              required={ this.required }\n              iconName={ this.icon || 'search' }\n              value={ this.value }\n              status={ this.status }\n              onValueChange={ (ev) => this.handleInputValueChange(ev) }\n              onInput={ (ev) => this._preventEvent(ev) }\n              onFocus={ () => this.handleFocus() }\n              onClick={ (ev) => this._preventEvent(ev) }\n              onBlur={ () => this.handleBlur() }\n              onFocusout={ () => this.handleFocusout() }\n              onInputClear={ (ev) => this.handleInputClear(ev) }\n              placeholder={ this.placeholder }\n              size={ this.size }\n              onKeyDown={ (ev) => this.handleKeyDown(ev) }\n            >\n              <slot name=\"helperText\"></slot>\n            </cura-input-text>\n          </div>\n          <div class=\"dropdown-container\" onMouseOver={ () => this.handleDropdownMouseOver() }>\n            <slot onSlotchange={ () => this.handleSlotChange() }></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cura-dropdown-search.js","sourceRoot":"","sources":["../../../src/components/cura-dropdown-search/cura-dropdown-search.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AACtG,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,0BAA0B,EAAE,MAAM,wCAAwC,CAAC;AAOpF,MAAM,OAAO,kBAAkB;IAL/B;QAYE;;;WAGG;QACsB,SAAI,GAA0C,OAAO,CAAC;QAC/E;;;WAGG;QACqC,WAAM,GAAiC,SAAS,CAAC;QACzF;;WAEG;QACsB,aAAQ,GAAY,KAAK,CAAC;QACnD;;WAEG;QACsB,aAAQ,GAAY,KAAK,CAAC;QACnD;;WAEG;QACsB,gBAAW,GAAW,EAAE,CAAC;QAClD;;WAEG;QACsB,UAAK,GAAW,EAAE,CAAC;QAC5C;;WAEG;QACsB,SAAI,GAAW,QAAQ,CAAC;QACjD;;;;WAIG;QACsB,cAAS,GAAW,OAAO,CAAC;QACrD;;;WAGG;QACsB,UAAK,GAAW,EAAE,CAAC;QAC5C;;;WAGG;QACsB,gBAAW,GAAW,GAAG,CAAC;QACnD;;;WAGG;QACsB,mBAAc,GAAW,CAAC,CAAC;QAoB3C,WAAM,GAAG,EAAE,CAAC;QACZ,cAAS,GAAG,KAAK,CAAC;QAClB,cAAS,GAAY,KAAK,CAAC;QASpC,oBAAe,GAAG,EAAE,CAAC;QAErB,mBAAc,GAAG,GAAG,CAAC;QAErB,kBAAa,GAAG,GAAG,CAAC;QAOpB,qBAAgB,GAAW,CAAC,CAAC,CAAC;QACrB,kBAAa,GAAG,EAAE,CAAC;QAC5B,4BAAuB,GAAG,EAAE,CAAC;QAgD7B,qBAAgB,GAAG,GAAG,EAAE,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,CAAA;QAEpD,uBAAkB,GAAG,GAAG,EAAE;YACxB,IAAI,IAAI,CAAC,aAAa;gBAAE,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YACzD,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC,GAAG,EAAE;gBACnC,IAAI,CAAC,QAAQ,GAAG,WAAW,EAAE,CAAC;gBAC9B,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAC3B,CAAC,CAAA;QAED,+BAA0B,GAAG,GAAG,EAAE;YAChC,IAAI,CAAC,IAAI,CAAC,SAAS;gBAAE,OAAO;YAC5B,IAAI,IAAI,CAAC,eAAe;gBAAE,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;YAC7D,IAAI,CAAC,eAAe,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QACtF,CAAC,CAAA;QAED,gBAAW,GAAG,GAAG,EAAE;YACjB,IAAI,IAAI,CAAC,YAAY;gBAAE,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YACvD,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC,GAAG,EAAE;gBAClC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;gBACtB,IAAI,CAAC,cAAc,EAAE,CAAC;gBACtB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,SAAS;oBAAE,IAAI,CAAC,SAAS,EAAE,CAAC;gBACvD,IAAI,IAAI,CAAC,SAAS;oBAAE,IAAI,CAAC,aAAa,EAAE,CAAC;gBACzC,UAAU,CAAC,GAAG,EAAE;;oBACZ,MAAA,IAAI,CAAC,qBAAqB,0CAAE,cAAc,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAC,CAAC,CAAC;gBAC3G,CAAC,EAAE,EAAE,CAAC,CAAC;YACT,CAAC,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QAC1B,CAAC,CAAA;QAED,eAAU,GAAG,GAAG,EAAE;YAChB,IAAI,IAAI,CAAC,WAAW;gBAAE,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACrD,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC,GAAG,EAAE;gBACjC,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;oBACnB,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;oBACnC,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,KAAK,CAAC,CAAC;gBAChD,CAAC;gBACD,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACzB,CAAC,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACzB,CAAC,CAAA;QAED,mBAAc,GAAG,GAAG,EAAE;YACpB,IAAI,IAAI,CAAC,SAAS;gBAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QAC5C,CAAC,CAAA;QAED,oBAAe,GAAG,GAAG,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAA;QAE5C,4BAAuB,GAAG,CAAC,EAAe,EAAE,EAAE;YAC5C,IAAI,CAAC,eAAe,EAAE,CAAC,QAAQ,EAAE,CAAC;YAClC,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;QACzB,CAAC,CAAA;QAED,qBAAgB,GAAG,CAAC,EAAe,EAAE,EAAE;YACrC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;YAClB,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC5B,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;QACzB,CAAC,CAAA;QAED,uBAAkB,GAAG,CAAC,EAAe,EAAE,EAAE;YACvC,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;YAC9B,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;QACzB,CAAC,CAAA;QAED,2BAAsB,GAAG,CAAC,EAAe,EAAE,EAAE;YAC3C,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;YACzB,IAAI,IAAI,CAAC,qBAAqB,IAAI,EAAE,CAAC,MAAM,KAAK,IAAI,CAAC,qBAAqB,CAAC,KAAK,EAAE,CAAC;gBACjF,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC9B,CAAC;YACD,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;QACzB,CAAC,CAAA;QAED,4BAAuB,GAAG,GAAG,EAAE;YAC7B,IAAI,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,gBAAgB,IAAI,CAAC;gBAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QACpF,CAAC,CAAA;QAED,kBAAa,GAAG,CAAC,EAAiB,EAAE,EAAE;YACpC,IAAI,EAAE,CAAC,GAAG,KAAK,WAAW;gBAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YACxD,IAAI,EAAE,CAAC,GAAG,KAAK,SAAS;gBAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YACtD,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO;gBAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QAClD,CAAC,CAAA;QAyGD,oBAAe,GAAG,GAAG,EAAE,WAAC,OAAA,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA,EAAA,CAAC;QAuB/E,kBAAa,GAAG,CAAC,EAAS,EAAE,EAAE;YAC5B,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,EAAE,CAAC,eAAe,EAAE,CAAC;QACvB,CAAC,CAAA;KA2DF;IAtWC;;OAEG;IAEH,KAAK,CAAC,QAAQ;QACZ,IAAI,CAAC,eAAe,EAAE,CAAC,QAAQ,EAAE,CAAC;IACpC,CAAC;IACD;;OAEG;IAEH,KAAK,CAAC,YAAY,CAAC,QAAgB;QACjC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC/B,CAAC;IA+BD,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;QACvD,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC;QAC1D,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;QAC1E,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAC;QACvF,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;QACvF,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;QACrF,IAAI,CAAC,MAAM,CAAC,wBAAwB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC;QACpG,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;QACjF,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;QACvF,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;QAC3E,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;QAClE,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;QACtE,IAAI,CAAC,MAAM,CAAC,sBAAsB,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;QAC1D,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAC5D,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,gBAAgB,CAAC,mBAAmB,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QACvE,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,cAAc,EAAE,CAAC;YAC3B,MAAM,CAAC,cAAc,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,0BAA0B,CAAC,CAAC;YAClF,MAAM,CAAC,cAAc,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,0BAA0B,CAAC,CAAC;QACpF,CAAC;QACD,IAAI,CAAC,QAAQ,GAAG,WAAW,EAAE,CAAC;IAChC,CAAC;IAED,gBAAgB;;QACd,IAAI,CAAC,eAAe,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,qBAAqB,CAAC,CAAC;QAClF,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;QACxE,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QACpE,IAAI,CAAC,cAAc,GAAG,IAAI,0BAA0B,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QACtF,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,EAAE,EAAE,CAAC,CAAC;IAC/C,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAED,kBAAkB;QAChB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAC/D,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,mBAAmB,CAAC,mBAAmB,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAC1E,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,cAAc,EAAE,CAAC;YAC3B,MAAM,CAAC,cAAc,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,0BAA0B,CAAC,CAAC;YACrF,MAAM,CAAC,cAAc,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,0BAA0B,CAAC,CAAC;QACvF,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;QAC3E,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,cAAc,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IACzE,CAAC;IAkFD,aAAa,CAAC,SAA0B;QACtC,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,MAAM;YAAE,OAAO;QACjD,IAAI,QAAQ,GAAG,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC;QAC5F,IAAI,QAAQ,GAAG,CAAC,EAAE,CAAC;YACjB,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,OAAO;QACT,CAAC;QACD,MAAM,2BAA2B,GAAG,IAAI,CAAC,uBAAuB,CAAC,MAAM,GAAG,CAAC,CAAC;QAC5E,IAAI,QAAQ,GAAG,2BAA2B;YAAG,QAAQ,GAAG,2BAA2B,CAAC;QACpF,IAAI,IAAI,CAAC,kBAAkB;YAAG,IAAI,CAAC,kBAAkB,CAAC,WAAW,GAAG,KAAK,CAAC;QAC1E,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;QACjC,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,uBAAuB,CAAC,QAAQ,CAAC,CAAC;QACjE,IAAI,IAAI,CAAC,kBAAkB,CAAC,QAAQ,EAAG,CAAC;YACtC,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;YAC9B,OAAO;QACT,CAAC;QACD,IAAI,CAAC,kBAAkB,CAAC,WAAW,GAAG,IAAI,CAAC;QAC3C,IAAI,CAAC,kBAAkB,CAAC,cAAc,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;IACtG,CAAC;IAED,cAAc;QACZ,IAAI,IAAI,CAAC,kBAAkB,EAAG,CAAC;YAC7B,IAAI,CAAC,kBAAkB,CAAC,WAAW,GAAG,KAAK,CAAC;YAC5C,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;QACjC,CAAC;QACD,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC;IAC7B,CAAC;IAED,eAAe;QACb,IAAI,IAAI,CAAC,kBAAkB,EAAG,CAAC;YAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;YACrD,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,IAAI,CAAC,eAAe,EAAE,CAAC,IAAI,EAAE,CAAC;QAChC,CAAC;IACH,CAAC;IAED,QAAQ,CAAC,KAAa;QACpB,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,EAAE,CAAC;YACzB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,IAAI,IAAI,CAAC,YAAY;gBAAE,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YACvD,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC,GAAG,EAAE;;gBAClC,MAAM,KAAK,GAAG,MAAA,IAAI,CAAC,KAAK,mCAAI,EAAE,CAAC;gBAC/B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,KAAK,EAAE,IAAI,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;YACxF,CAAC,EAAE,IAAI,CAAC,WAAW,IAAI,GAAG,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC;IAED,aAAa,CAAC,QAAgB;QAC5B,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC5B,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;YAClB,OAAO;QACT,CAAC;QACD,MAAM,aAAa,GAAG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC;QAChG,IAAI,aAAa,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAG,CAAC;YAC9C,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC5B,IAAI,CAAC,qBAAqB,GAAG,aAAa,CAAC;YAC3C,IAAI,CAAC,qBAAqB,CAAC,QAAQ,GAAG,IAAI,CAAC;YAC3C,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC;YAChD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,CAAC;YAC5D,IAAI,IAAI,CAAC,SAAS;gBAAE,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAC5E,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,uBAAuB,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;YAC5C,IAAI,MAAM,CAAC,QAAQ;gBAAG,MAAM,CAAC,QAAQ,GAAG,KAAK,CAAC;QAChD,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC;IACpC,CAAC;IAED,eAAe;QACb,MAAM,QAAQ,GAAG,EAAE,CAAC;QACpB,MAAM,UAAU,GAAG,EAAE,CAAC;QACtB,IAAI,WAAW,GAAG,KAAK,CAAC;QACxB,IAAI,IAAI,CAAC,eAAe,EAAG,CAAC;YAC1B,IAAI,CAAC,eAAe;iBACjB,aAAa,CAAC,MAAM,CAAC;iBACrB,gBAAgB,EAAE;iBAClB,OAAO,CAAC,IAAI,CAAC,EAAE;gBACd,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBACpB,IAAI,IAAI,CAAC,SAAS,KAAK,6BAA6B,IAAI,IAAI,CAAC,YAAY,CAAC;oBAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBACnG,IAAI,IAAI,CAAC,SAAS,KAAK,gCAAgC;oBAAG,WAAW,GAAG,IAAI,CAAC;YAC/E,CAAC,CAAC,CAAC;QACP,CAAC;QACD,IAAI,CAAC,uBAAuB,GAAG,UAAU,CAAC;QAC1C,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;QAC9B,IAAI,CAAC,MAAM,GAAG,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;IAClD,CAAC;IAGD,SAAS;QACP,IAAI,CAAC,cAAc,CAAC,aAAa,EAAE,CAAC;QACpC,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,cAAc,CAAC,YAAY,EAAE,CAAC;QACnC,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,UAAU,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS,GAAG,KAAK,CAAA,CAAA,CAAC,EAAE,GAAG,CAAC,CAAC;IACnD,CAAC;IAID,aAAa;QACX,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,cAAc,EAAE,CAAC;YAC3B,MAAM,MAAM,GAAG,GAAG,MAAM,CAAC,cAAc,CAAC,MAAM,IAAI,CAAC;YACnD,MAAM,SAAS,GAAG,GAAG,MAAM,CAAC,cAAc,CAAC,SAAS,IAAI,CAAC;YACzD,IAAI,CAAC,MAAM,mCAAQ,IAAI,CAAC,MAAM,KAAE,UAAU,EAAE,MAAM,EAAE,cAAc,EAAE,SAAS,GAAE,CAAC;YAChF,OAAO;QACT,CAAC;QACD,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,WAAW,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC;QACvD,IAAI,CAAC,MAAM,mCAAQ,IAAI,CAAC,MAAM,KAAE,UAAU,EAAE,CAAC,EAAE,cAAc,EAAE,KAAK,GAAE,CAAC;IACzE,CAAC;IAED,UAAU;QACR,OAAO;YACL,qBAAqB,EAAE,IAAI;YAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,SAAS;YACtB,kBAAkB,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;YACxF,OAAO,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO;SACjC,CAAA;IACH,CAAC;IAOD,oBAAoB;QAClB,OAAO;YACL,cAAc,EAAE,IAAI,CAAC,SAAS,IAAI,OAAO;SAC1C,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAG,IAAI,CAAC,oBAAoB,EAAE,EACvC,IAAI,EAAC,QAAQ,gBACA,IAAI,CAAC,KAAK,mBACP,IAAI,CAAC,QAAQ,mBACb,IAAI,CAAC,QAAQ,mBACb,IAAI,CAAC,SAAS;YAC9B,4DAAK,KAAK,EAAG,IAAI,CAAC,UAAU,EAAE,EAAG,KAAK,EAAG,IAAI,CAAC,MAAM;gBAClD,4DAAK,KAAK,EAAC,oBAAoB;oBAC3B,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAClC,+BACE,SAAS,EAAC,MAAM,EAChB,OAAO,EAAG,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,EACtC,QAAQ,EAAC,WAAW,EACpB,IAAI,EAAC,OAAO,EACZ,QAAQ,QACR,KAAK,EAAC,SAAS,EACf,EAAE,EAAC,aAAa,GACQ,CAC3B,CAAC,CAAC,CAAC,EAAE;oBACN,wEACE,QAAQ,EAAG,IAAI,CAAC,QAAQ,EACxB,KAAK,EAAG,IAAI,CAAC,KAAK,EAClB,IAAI,EAAC,kBAAkB,EACvB,IAAI,EAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EACjD,QAAQ,EAAG,IAAI,CAAC,QAAQ,EACxB,QAAQ,EAAG,IAAI,CAAC,IAAI,IAAI,QAAQ,EAChC,KAAK,EAAG,IAAI,CAAC,KAAK,EAClB,MAAM,EAAG,IAAI,CAAC,MAAM,EACpB,aAAa,EAAG,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,sBAAsB,CAAC,EAAE,CAAC,EACvD,OAAO,EAAG,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,EACxC,OAAO,EAAG,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,EAClC,OAAO,EAAG,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,EACxC,MAAM,EAAG,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,EAChC,UAAU,EAAG,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,EACxC,YAAY,EAAG,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,EAAE,CAAC,EAChD,WAAW,EAAG,IAAI,CAAC,WAAW,EAC9B,IAAI,EAAG,IAAI,CAAC,IAAI,EAChB,SAAS,EAAG,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC;wBAE1C,6DAAM,IAAI,EAAC,YAAY,GAAQ,CACf,CACd;gBACN,4DAAK,KAAK,EAAC,oBAAoB,EAAC,WAAW,EAAG,GAAG,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE;oBAChF,6DAAM,YAAY,EAAG,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAU,CACxD,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Element, State, Method, Event, EventEmitter } from '@stencil/core';\nimport { checkMobile, checkIOS } from '../../utils/utils';\nimport { FixedElementScrollBehavior } from '../../utils/FixedElementScrollBehavior';\n\n@Component({\n  tag: 'cura-dropdown-search',\n  styleUrl: 'cura-dropdown-search.scss',\n  shadow: true,\n})\nexport class CuraDropdownSearch {\n  @Element() host: HTMLElement;\n  /**\n   * Name of the field.\n   * Required.\n   */\n  @Prop({ reflect: true }) name!: string;\n  /**\n   * Size of the dropdown search component\n   * Values: 'small', 'medium' or 'large' (default).\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' | string = 'large';\n  /**\n   * Define component status.\n   * Values: 'error' or 'default'.\n   */\n  @Prop({ reflect: true, mutable: true }) status: 'error' | 'default' | string = 'default';\n  /**\n   * Disabled state. Default: false.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /**\n   * Field is required. Default: false.\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n  /**\n   * The placeholder text.\n   */\n  @Prop({ reflect: true }) placeholder: string = '';\n  /**\n   * The label.\n   */\n  @Prop({ reflect: true }) label: string = '';\n  /**\n   * Custom icon name. Default: search.\n   */\n  @Prop({ reflect: true }) icon: string = 'search';\n  /**\n   * CSS max-height property for dropdown item.\n   * Can also be used by css property --max-height.\n   * Default: 400px\n   */\n  @Prop({ reflect: true }) maxheight: string = '400px';\n  /**\n   * Readonly property value.\n   * Represents the term on the search input field.\n   */\n  @Prop({ mutable: true }) value: string = '';\n  /**\n   * Delay in milliseconds to dispatch search events.\n   * Default: 400\n   */\n  @Prop({ reflect: true }) searchdelay: number = 400;\n  /**\n   * Min chars to dispatch search events.\n   * Default: 3\n   */\n  @Prop({ reflect: true }) searchminchars: number = 3;\n\n  /**\n   * Set focus to input field.\n   */\n  @Method()\n  async setFocus() {\n    this.getInputElement().setFocus();\n  }\n  /**\n   * Select by optionid property of a selectable option component.\n   */\n  @Method()\n  async selectOption(optionid: string) {\n    this._selectOption(optionid);\n  }\n\n  @Event() termchange: EventEmitter<string>;\n  @Event() optionselect: EventEmitter<string>;\n\n  @State() styles = {};\n  @State() zoomState = false;\n  @State() isOnFocus: boolean = false;\n\n  scrollBehavior: FixedElementScrollBehavior;\n\n  weights: any;\n  breakpoints: any;\n  isMobile: boolean;\n\n  resizeTimeout: any;\n  resizeTimeoutMs = 66;\n  focusTimeout: any;\n  focusTimeoutMs = 500;\n  blurTimeout: any;\n  blurTimeoutMs = 300;\n  valueTimeout: any;\n  viewportTimeout: any;\n\n  dropdownElement: HTMLDivElement;\n  selectedOptionElement: any;\n  highlightedElement: any;\n  highlightedIndex: number = -1;\n  @State() dropdownItems = [];\n  dropdownSelectableItems = [];\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.breakpoints = window.CuraAPI.theme.breakpoints.get();\n    this.styles['--info'] = window.CuraAPI.theme.colors.getColor('info-base');\n    this.styles['--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['--primary'] = window.CuraAPI.theme.colors.getColor('primary');\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    window?.addEventListener('resize', this.handleWindowResize);\n    window?.addEventListener('orientationchange', this.handleWindowResize);\n    if (window?.visualViewport) {\n      window.visualViewport.addEventListener('resize', this.handleVisualViewportChange);\n      window.visualViewport.addEventListener('scroll', this.handleVisualViewportChange);\n    }\n    this.isMobile = checkMobile();\n  }\n\n  componentDidLoad() {\n    this.dropdownElement = this.host.shadowRoot?.querySelector('.dropdown-container');\n    this.host.addEventListener('actionclick', this.handleOptionActionClick);\n    this.host.addEventListener('selectoption', this.handleSelectOption);\n    this.scrollBehavior = new FixedElementScrollBehavior(this.host, this.dropdownElement);\n    setTimeout(() => this.getSlotElements(), 10);\n  }\n\n  disconnectedCallback() {\n    this.removeAllListeners();\n  }\n\n  removeAllListeners() {\n    window?.removeEventListener('resize', this.handleWindowResize);\n    window?.removeEventListener('orientationchange', this.handleWindowResize);\n    if (window?.visualViewport) {\n      window.visualViewport.removeEventListener('resize', this.handleVisualViewportChange);\n      window.visualViewport.removeEventListener('scroll', this.handleVisualViewportChange);\n    }\n    this.host.removeEventListener('actionclick', this.handleOptionActionClick);\n    this.host.removeEventListener('selectoption', this.handleSelectOption);\n  }\n\n  handleSlotChange = () => { this.getSlotElements(); }\n\n  handleWindowResize = () => {\n    if (this.resizeTimeout) clearTimeout(this.resizeTimeout);\n    this.resizeTimeout = setTimeout(() => {\n      this.isMobile = checkMobile();\n      this.setZoomHeight();\n    }, this.resizeTimeoutMs);\n  }\n\n  handleVisualViewportChange = () => {\n    if (!this.zoomState) return;\n    if (this.viewportTimeout) clearTimeout(this.viewportTimeout);\n    this.viewportTimeout = setTimeout(() => this.setZoomHeight(), this.resizeTimeoutMs);\n  }\n\n  handleFocus = () => {\n    if (this.focusTimeout) clearTimeout(this.focusTimeout);\n    this.focusTimeout = setTimeout(() => {\n      this.isOnFocus = true;\n      this.clearHighlight();\n      if (this.isMobile && !this.zoomState) this.enterZoom();\n      if (this.zoomState) this.setZoomHeight();\n      setTimeout(() => {\n          this.selectedOptionElement?.scrollIntoView({behavior: 'instant', block: 'nearest', inline: 'nearest'});\n      }, 10);\n    }, this.focusTimeoutMs);\n  }\n\n  handleBlur = () => {\n    if (this.blurTimeout) clearTimeout(this.blurTimeout);\n    this.blurTimeout = setTimeout(() => {\n      if (this.zoomState) {\n        const delay = checkIOS ? 500 : 100;\n        setTimeout(() => this.setZoomHeight(), delay);\n      }\n      this.isOnFocus = false;\n    }, this.blurTimeoutMs);\n  }\n\n  handleFocusout = () => {\n    if( this.zoomState ) this.setZoomHeight();\n  }\n\n  handleBackClick = () => { this.exitZoom(); }\n\n  handleOptionActionClick = (ev: CustomEvent) => {\n    this.getInputElement().setFocus();\n    this._preventEvent(ev);\n  }\n\n  handleInputClear = (ev: CustomEvent) => {\n    this.setValue('');\n    this.clearSelectedOptions();\n    this._preventEvent(ev);\n  }\n\n  handleSelectOption = (ev: CustomEvent) => {\n    this._selectOption(ev.detail);\n    this._preventEvent(ev);\n  }\n\n  handleInputValueChange = (ev: CustomEvent) => {\n    this.setValue(ev.detail);\n    if( this.selectedOptionElement && ev.detail !== this.selectedOptionElement.value) {\n      this.clearSelectedOptions();\n    }\n    this._preventEvent(ev);\n  }\n\n  handleDropdownMouseOver = () => {\n    if( this.highlightedElement || this.highlightedIndex >= 0 ) this.clearHighlight();\n  }\n\n  handleKeyDown = (ev: KeyboardEvent) => {\n    if( ev.key === 'ArrowDown' ) this.moveHighlight('next');\n    if( ev.key === 'ArrowUp' ) this.moveHighlight('prev');\n    if( ev.key === 'Enter' ) this.selectHighlight();\n  }\n\n  moveHighlight(direction: 'next' | 'prev') {\n    if (!this.dropdownSelectableItems.length) return;\n    let position = direction === 'next' ? this.highlightedIndex + 1 : this.highlightedIndex - 1;\n    if( position < 0) {\n      this.clearHighlight();\n      return;\n    }\n    const selectableItemsLastPosition = this.dropdownSelectableItems.length - 1;\n    if( position > selectableItemsLastPosition ) position = selectableItemsLastPosition;\n    if( this.highlightedElement ) this.highlightedElement.highlighted = false;\n    this.highlightedIndex = position;\n    this.highlightedElement = this.dropdownSelectableItems[position];\n    if( this.highlightedElement.selected ) {\n      this.moveHighlight(direction);\n      return;\n    }\n    this.highlightedElement.highlighted = true;\n    this.highlightedElement.scrollIntoView({behavior: 'instant', block: 'nearest', inline: 'nearest' });\n  }\n\n  clearHighlight() {\n    if( this.highlightedElement ) {\n      this.highlightedElement.highlighted = false;\n      this.highlightedElement = null;\n    }\n    this.highlightedIndex = -1;\n  }\n\n  selectHighlight() {\n    if( this.highlightedElement ) {\n      this._selectOption(this.highlightedElement.optionid);\n      this.clearHighlight();\n      this.getInputElement().blur();\n    }\n  }\n\n  setValue(value: string) {\n    if (this.value !== value) {\n      this.value = value;\n      if( this.valueTimeout) clearTimeout(this.valueTimeout);\n      this.valueTimeout = setTimeout(() => {\n        const value = this.value ?? '';\n        this.termchange.emit(value === '' || value.length < this.searchminchars ? '' : value);\n      }, this.searchdelay || 300);\n    }\n  }\n\n  _selectOption(optionid: string) {\n    if (!optionid) {\n      this.clearSelectedOptions();\n      this.setValue('');\n      return;\n    }\n    const optionElement = this.dropdownSelectableItems.find(option => option.optionid === optionid);\n    if( optionElement && !optionElement.selected ) {\n      this.clearSelectedOptions();\n      this.selectedOptionElement = optionElement;\n      this.selectedOptionElement.selected = true;\n      this.setValue(this.selectedOptionElement.value);\n      this.optionselect.emit(this.selectedOptionElement.optionid);\n      if (this.zoomState) setTimeout(() => this.exitZoom(), this.blurTimeoutMs);\n    }\n  }\n\n  clearSelectedOptions() {\n    this.dropdownSelectableItems.forEach(option => {\n      if( option.selected ) option.selected = false;\n    });\n    this.selectedOptionElement = null;\n  }\n\n  getSlotElements()  {\n    const elements = [];\n    const selectable = [];\n    let hasNotFound = false;\n    if( this.dropdownElement ) {\n      this.dropdownElement\n        .querySelector('slot')\n        .assignedElements()\n        .forEach(item => {\n          elements.push(item);\n          if( item.localName === 'cura-dropdown-search-option' && item[\"selectable\"] ) selectable.push(item);\n          if( item.localName === 'cura-dropdown-search-not-found' ) hasNotFound = true;\n        });\n    }\n    this.dropdownSelectableItems = selectable;\n    this.dropdownItems = elements;\n    this.status = hasNotFound ? 'error' : 'default';\n  }\n\n\n  enterZoom() {\n    this.scrollBehavior.disableScroll();\n    this.setZoomHeight();\n    this.zoomState = true;\n  }\n\n  exitZoom() {\n    this.scrollBehavior.enableScroll();\n    this.setZoomHeight();\n    setTimeout(() => { this.zoomState = false}, 300);\n  }\n\n  getInputElement = () => this.host.shadowRoot?.querySelector('cura-input-text');\n\n  setZoomHeight() {\n    if (window?.visualViewport) {\n      const height = `${window.visualViewport.height}px`;\n      const topOffset = `${window.visualViewport.offsetTop}px`;\n      this.styles = { ...this.styles, '--height': height, '--top-offset': topOffset };\n      return;\n    }\n    const h = window ? `${window.innerHeight}px` : '100vh';\n    this.styles = { ...this.styles, '--height': h, '--top-offset': '0px' };\n  }\n\n  getClasses() {\n    return {\n      \"component-container\": true,\n      \"mobile\": this.isMobile,\n      \"zoom\": this.zoomState,\n      \"dropdown-visible\": this.isOnFocus && (this.dropdownItems.length > 0 && !this.zoomState),\n      \"error\": this.status === 'error'\n    }\n  }\n\n  _preventEvent = (ev: Event) => {\n    ev.preventDefault();\n    ev.stopPropagation();\n  }\n\n  getHostCSSProperties() {\n    return {\n      '--max-height': this.maxheight || '400px'\n    };\n  }\n\n  render() {\n    return (\n      <Host style={ this.getHostCSSProperties() }\n        role=\"search\"\n        aria-label={ this.label }\n        aria-required={ this.required }\n        aria-disabled={ this.disabled }\n        aria-expanded={ this.zoomState }>\n        <div class={ this.getClasses() } style={ this.styles }>\n          <div class=\"component-controls\">\n            { this.isMobile && this.zoomState ? (\n              <cura-button-transparent\n                fontColor=\"dark\"\n                onClick={ () => this.handleBackClick() }\n                iconName=\"arrowLeft\"\n                size=\"large\"\n                iconOnly\n                color=\"primary\"\n                id=\"button-back\">\n              </cura-button-transparent>\n            ) : '' }\n            <cura-input-text\n              disabled={ this.disabled }\n              label={ this.label }\n              part=\"cura-input-field\"\n              mode={ this.zoomState ? 'transparent' : 'default' }\n              required={ this.required }\n              iconName={ this.icon || 'search' }\n              value={ this.value }\n              status={ this.status }\n              onValueChange={ (ev) => this.handleInputValueChange(ev) }\n              onInput={ (ev) => this._preventEvent(ev) }\n              onFocus={ () => this.handleFocus() }\n              onClick={ (ev) => this._preventEvent(ev) }\n              onBlur={ () => this.handleBlur() }\n              onFocusout={ () => this.handleFocusout() }\n              onInputClear={ (ev) => this.handleInputClear(ev) }\n              placeholder={ this.placeholder }\n              size={ this.size }\n              onKeyDown={ (ev) => this.handleKeyDown(ev) }\n            >\n              <slot name=\"helperText\"></slot>\n            </cura-input-text>\n          </div>\n          <div class=\"dropdown-container\" onMouseOver={ () => this.handleDropdownMouseOver() }>\n            <slot onSlotchange={ () => this.handleSlotChange() }></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cura-modal/cura-modal.js

@@ -36,6 +36,11 @@ export class CuraModal {
          * Default: Fechar
          */
         this.mobileCloseLabel = 'Fechar';
+        /**
+         * Controls whether the modal can be closed. When false, hides all close buttons and prevents closing via backdrop click or ESC key.
+         * Default: true
+         */
+        this.canClose = true;
         /**
          * Property zindex to control the z-index value of the component.
          * Default: 100
@@ -43,13 +48,16 @@ export class CuraModal {
         this.zindex = '100';
         this.styles = {};
         this.handleCloseOnEsc = (evt) => {
-            if (evt.key !== 'Escape' || !this.open) {
+            if (evt.key !== 'Escape' || !this.open || !this.canClose) {
                 return;
             }
             this.open = false;
             this.modalClose.emit();
         };
         this.handleClose = () => {
+            if (!this.canClose) {
+                return;
+            }
             this.modalClose.emit();
             this.open = false;
         };
@@ -91,7 +99,7 @@ export class CuraModal {
         window.addEventListener('keydown', this.handleCloseOnEsc);
     }
     render() {
-        return (h(Host, { key: '4ccdb55c36abada0f1a7c8f44b79603e3e3432cc', role: "dialog", "aria-modal": "true", style: { '--zIndex': this.zindex } }, h("div", { key: '1b7248b7549a903a7a9b08aa219f209e0f159d30', class: this.open ? 'modal container open' : 'modal container', style: this.styles }, h("div", { key: '6977bffb5232d6e45d217bf2db4f61748daf7ccf', class: this.open ? 'modal backdrop open' : 'modal backdrop', onClick: this.handleClose }), h("div", { key: '71f7c2cf8c56d4f0fdf443209e0f5e96e285e36e', class: "wrapper" }, h("div", { key: '80b99d594ee94b214318479e815194be75f3fea7', class: "close desktop" }, h("cura-button-transparent", { key: '9abea3d67b08611313ee28b44bf6775a37b9ab79', iconName: "close", color: "error", size: "small", onClick: this.handleClose, iconOnly: true })), h("slot", { key: '85364906c3b59f2ac7b95cd316babff55de10a0f' }), h("div", { key: 'a4106cee880560a7fdcb92b63f98feefbe8f283a', class: "close mobile", onClick: this.handleClose }, h("cura-button-transparent", { key: '794ab5cfdece8aa94ff85d37655a83c9df7a854a', color: "error", iconName: "close", size: "small" }, this.mobileCloseLabel))))));
+        return (h(Host, { key: 'a6f81dd34ff6bea8c00a6ea08ba2967d8b37890b', role: "dialog", "aria-modal": "true", style: { '--zIndex': this.zindex } }, h("div", { key: '87c8a89c0ae261fd6d8ed8259ed4a18b92a6bf55', class: this.open ? 'modal container open' : 'modal container', style: this.styles }, h("div", { key: '1377054aaf87f31e2f27a32b813f21a3227a0679', class: this.open ? 'modal backdrop open' : 'modal backdrop', onClick: this.canClose ? this.handleClose : undefined }), h("div", { key: 'b8764e38f17fc18f6390b1454f73adc5b0f28024', class: "wrapper" }, this.canClose && (h("div", { key: 'e3b741e2885d879368b041c0da3ffa8ff1f6b1c4', class: "close desktop" }, h("cura-button-transparent", { key: '5c85f8cb21415741e3af4ab8833b031597faed50', iconName: "close", color: "error", size: "small", onClick: this.handleClose, iconOnly: true }))), h("slot", { key: 'fd0b51474b2fc973ad1dd6b626f42726e0972afb' }), this.canClose && (h("div", { key: 'da7b3e03af84967a38f398cde77495d6baa8af35', class: "close mobile", onClick: this.handleClose }, h("cura-button-transparent", { key: 'd95e7ed4963e6ad678dca0b23e5fdfb609dc7f6f', color: "error", iconName: "close", size: "small" }, this.mobileCloseLabel)))))));
     }
     static get is() { return "cura-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -247,6 +255,26 @@ export class CuraModal {
                 "reflect": true,
                 "defaultValue": "'Fechar'"
             },
+            "canClose": {
+                "type": "boolean",
+                "attribute": "can-close",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls whether the modal can be closed. When false, hides all close buttons and prevents closing via backdrop click or ESC key.\nDefault: true"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "true"
+            },
             "zindex": {
                 "type": "string",
                 "attribute": "zindex",

package/dist/collection/components/cura-modal/cura-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-modal.js","sourceRoot":"","sources":["../../../src/components/cura-modal/cura-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-modal',\n  styleUrl: 'cura-modal.scss',\n  shadow: true,\n})\nexport class CuraModal {\n  /**\n   * Property open to control modal visibility.\n   * Default: false\n   */\n  @Prop({ mutable: true, reflect: true }) open?: boolean = false;\n  /**\n   * Property background to control modal backdrop color.\n   * Default: light\n   */\n  @Prop() background?: 'dark' | 'light' = 'light';\n  /**\n   * Property top to control modal top position.\n   * Default: 0px\n   */\n  @Prop() top?: number = 0;\n  /**\n   * Property bottom to control modal bottom position.\n   * Default: 0px\n   */\n  @Prop() bottom?: number = 0;\n  /**\n   * Property left to control modal left position.\n   * Default: 0px\n   */\n  @Prop() left?: number = 0;\n  /**\n   * Property right to control modal right position.\n   * Default: 0px\n   */\n  @Prop() right?: number = 0;\n  /**\n   * Defines the label for the close button when the modal is viewed on mobile.\n   * Default: Fechar\n   */\n  @Prop({ reflect: true }) mobileCloseLabel: string = 'Fechar';\n  /**\n   * Property zindex to control the z-index value of the component.\n   * Default: 100\n   */\n  @Prop({ reflect: true }) zindex: string = '100';\n  /**\n   * Event close to handle modal close.\n   */\n  @Event({ eventName: 'modalClose' }) modalClose: EventEmitter<void>;\n\n  @State() styles = {};\n\n  @Watch('background')\n  setColors() {\n    const backgroundTheme = {\n      dark: window.CuraAPI.theme.colors.getColor('neutral-black', 0.4),\n      light: window.CuraAPI.theme.colors.getColor('primary-darker', 0.8),\n    };\n\n    this.styles = {\n      ...this.styles,\n      '--background-color': backgroundTheme[this.background],\n    };\n  }\n\n  setOffset(name: string, value: number) {\n    this.styles = {\n      ...this.styles,\n      [`--${name}-offset`]: `${value}px`,\n    };\n  }\n\n  @Watch('top')\n  setTop() {\n    this.setOffset('top', this.top);\n  }\n\n  @Watch('bottom')\n  setBottom() {\n    this.setOffset('bottom', this.bottom);\n  }\n\n  @Watch('left')\n  setLeft() {\n    this.setOffset('left', this.left);\n  }\n\n  @Watch('right')\n  setRight() {\n    this.setOffset('right', this.right);\n  }\n\n  handleCloseOnEsc = (evt: KeyboardEvent) => {\n    if (evt.key !== 'Escape' || !this.open) {\n      return;\n    }\n\n    this.open = false;\n    this.modalClose.emit();\n  };\n\n  connectedCallback() {\n    this.styles = {\n      ...this.styles,\n      '--neutral-purewhite': window.CuraAPI.theme.colors.getColor('neutral-purewhite'),\n      '--neutral-light': window.CuraAPI.theme.colors.getColor('neutral-light'),\n      '--base-spacing': window.CuraAPI.theme.spacing.getSpacing(),\n    };\n    this.setColors();\n    this.setTop();\n    this.setBottom();\n    this.setLeft();\n    this.setRight();\n  }\n\n  private handleClose = () => {\n    this.modalClose.emit();\n    this.open = false;\n  };\n\n  disconnectedCallback() {\n    window.removeEventListener('keydown', this.handleCloseOnEsc);\n  }\n\n  componentDidLoad() {\n    window.addEventListener('keydown', this.handleCloseOnEsc);\n  }\n\n  render() {\n    return (\n      <Host role=\"dialog\" aria-modal=\"true\" style={{ '--zIndex': this.zindex }}>\n        <div class={this.open ? 'modal container open' : 'modal container'} style={this.styles}>\n          <div class={this.open ? 'modal backdrop open' : 'modal backdrop'} onClick={this.handleClose}></div>\n          <div class=\"wrapper\">\n            {/* Desktop button */}\n            <div class=\"close desktop\">\n              <cura-button-transparent iconName=\"close\" color=\"error\" size=\"small\" onClick={this.handleClose} iconOnly></cura-button-transparent>\n            </div>\n            <slot></slot>\n            {/* Mobile button */}\n            <div class=\"close mobile\" onClick={this.handleClose}>\n              <cura-button-transparent color=\"error\" iconName=\"close\" size=\"small\">\n                {this.mobileCloseLabel}\n              </cura-button-transparent>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cura-modal.js","sourceRoot":"","sources":["../../../src/components/cura-modal/cura-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-modal',\n  styleUrl: 'cura-modal.scss',\n  shadow: true,\n})\nexport class CuraModal {\n  /**\n   * Property open to control modal visibility.\n   * Default: false\n   */\n  @Prop({ mutable: true, reflect: true }) open?: boolean = false;\n  /**\n   * Property background to control modal backdrop color.\n   * Default: light\n   */\n  @Prop() background?: 'dark' | 'light' = 'light';\n  /**\n   * Property top to control modal top position.\n   * Default: 0px\n   */\n  @Prop() top?: number = 0;\n  /**\n   * Property bottom to control modal bottom position.\n   * Default: 0px\n   */\n  @Prop() bottom?: number = 0;\n  /**\n   * Property left to control modal left position.\n   * Default: 0px\n   */\n  @Prop() left?: number = 0;\n  /**\n   * Property right to control modal right position.\n   * Default: 0px\n   */\n  @Prop() right?: number = 0;\n  /**\n   * Defines the label for the close button when the modal is viewed on mobile.\n   * Default: Fechar\n   */\n  @Prop({ reflect: true }) mobileCloseLabel: string = 'Fechar';\n  /**\n   * Controls whether the modal can be closed. When false, hides all close buttons and prevents closing via backdrop click or ESC key.\n   * Default: true\n   */\n  @Prop({ reflect: true }) canClose: boolean = true;\n  /**\n   * Property zindex to control the z-index value of the component.\n   * Default: 100\n   */\n  @Prop({ reflect: true }) zindex: string = '100';\n  /**\n   * Event close to handle modal close.\n   */\n  @Event({ eventName: 'modalClose' }) modalClose: EventEmitter<void>;\n\n  @State() styles = {};\n\n  @Watch('background')\n  setColors() {\n    const backgroundTheme = {\n      dark: window.CuraAPI.theme.colors.getColor('neutral-black', 0.4),\n      light: window.CuraAPI.theme.colors.getColor('primary-darker', 0.8),\n    };\n\n    this.styles = {\n      ...this.styles,\n      '--background-color': backgroundTheme[this.background],\n    };\n  }\n\n  setOffset(name: string, value: number) {\n    this.styles = {\n      ...this.styles,\n      [`--${name}-offset`]: `${value}px`,\n    };\n  }\n\n  @Watch('top')\n  setTop() {\n    this.setOffset('top', this.top);\n  }\n\n  @Watch('bottom')\n  setBottom() {\n    this.setOffset('bottom', this.bottom);\n  }\n\n  @Watch('left')\n  setLeft() {\n    this.setOffset('left', this.left);\n  }\n\n  @Watch('right')\n  setRight() {\n    this.setOffset('right', this.right);\n  }\n\n  handleCloseOnEsc = (evt: KeyboardEvent) => {\n    if (evt.key !== 'Escape' || !this.open || !this.canClose) {\n      return;\n    }\n\n    this.open = false;\n    this.modalClose.emit();\n  };\n\n  connectedCallback() {\n    this.styles = {\n      ...this.styles,\n      '--neutral-purewhite': window.CuraAPI.theme.colors.getColor('neutral-purewhite'),\n      '--neutral-light': window.CuraAPI.theme.colors.getColor('neutral-light'),\n      '--base-spacing': window.CuraAPI.theme.spacing.getSpacing(),\n    };\n    this.setColors();\n    this.setTop();\n    this.setBottom();\n    this.setLeft();\n    this.setRight();\n  }\n\n  private handleClose = () => {\n    if (!this.canClose) {\n      return;\n    }\n    this.modalClose.emit();\n    this.open = false;\n  };\n\n  disconnectedCallback() {\n    window.removeEventListener('keydown', this.handleCloseOnEsc);\n  }\n\n  componentDidLoad() {\n    window.addEventListener('keydown', this.handleCloseOnEsc);\n  }\n\n  render() {\n    return (\n      <Host role=\"dialog\" aria-modal=\"true\" style={{ '--zIndex': this.zindex }}>\n        <div class={this.open ? 'modal container open' : 'modal container'} style={this.styles}>\n          <div class={this.open ? 'modal backdrop open' : 'modal backdrop'} onClick={this.canClose ? this.handleClose : undefined}></div>\n          <div class=\"wrapper\">\n            {/* Desktop button */}\n            {this.canClose && (\n              <div class=\"close desktop\">\n                <cura-button-transparent iconName=\"close\" color=\"error\" size=\"small\" onClick={this.handleClose} iconOnly></cura-button-transparent>\n              </div>\n            )}\n            <slot></slot>\n            {/* Mobile button */}\n            {this.canClose && (\n              <div class=\"close mobile\" onClick={this.handleClose}>\n                <cura-button-transparent color=\"error\" iconName=\"close\" size=\"small\">\n                  {this.mobileCloseLabel}\n                </cura-button-transparent>\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cura-modal/cura-modal.stories.js

@@ -15,6 +15,7 @@ const renderCuraModal = (args) => `
     <cura-modal
       open="${args.open}"
       mobile-close-label="${args.mobileCloseLabel}"
+      can-close="${args.canClose}"
       zindex="${args.zindex}"
       background="${args.background}"
       top="${args.top}"
@@ -65,6 +66,14 @@ export default {
                 category: 'Properties',
             },
         },
+        canClose: {
+            control: 'boolean',
+            description: 'Controla se o modal pode ser fechado. Quando false, oculta todos os botões de fechar e previne fechar via clique no backdrop ou tecla ESC.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: true },
+            },
+        },
         zindex: {
             control: { type: 'text' },
             description: 'Define um valor para o z-index.',
@@ -133,6 +142,7 @@ export const CuraModal = {
         left: 0,
         right: 0,
         mobileCloseLabel: 'Fechar',
+        canClose: true,
         zindex: '100',
     },
 };

package/dist/collection/components/cura-modal/cura-modal.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-modal.stories.js","sourceRoot":"","sources":["../../../src/components/cura-modal/cura-modal.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["const renderCuraModal = (args: any) => `\n  <div style=\"height: 500px\">\n    <cura-modal\n      open=\"${args.open}\"\n      mobile-close-label=\"${args.mobileCloseLabel}\"\n      zindex=\"${args.zindex}\"\n      background=\"${args.background}\"\n      top=\"${args.top}\"\n      bottom=\"${args.bottom}\"\n      left=\"${args.left}\"\n      right=\"${args.right}\"\n    >\n      ${args.content}\n    </cura-modal>\n  </div>\n`;\n\nexport default {\n  title: 'Componentes/Feedback/Modal',\n  tags: ['autodocs'],\n  render: ({ ...args }) => {\n    return renderCuraModal(args);\n  },\n  argTypes: {\n    open: {\n      control: 'boolean',\n      description: 'Define se o modal está aberto ou fechado.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: false },\n      },\n    },\n    background: {\n      control: { type: 'select' },\n      options: ['dark', 'light'],\n      description: 'Define a cor do background do modal.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'light' },\n      },\n    },\n    content: {\n      control: { type: 'text' },\n      description: 'Conteúdo do modal a ser exibido.',\n      table: {\n        category: 'Properties',\n      },\n    },\n    mobileCloseLabel: {\n      control: { type: 'text' },\n      description: 'Label utilizada no botão de fechar no mobile.',\n      table: {\n        category: 'Properties',\n      },\n    },\n    zindex: {\n      control: { type: 'text' },\n      description: 'Define um valor para o z-index.',\n      table: {\n        category: 'Properties',\n      },\n    },\n    top: {\n      control: { type: 'number' },\n      description: 'Define o deslocamento superior do modal.',\n      table: {\n        category: 'Offset',\n        defaultValue: { summary: '0px' },\n      },\n    },\n    bottom: {\n      control: { type: 'number' },\n      description: 'Define o deslocamento inferior do modal.',\n      table: {\n        category: 'Offset',\n        defaultValue: { summary: '0px' },\n      },\n    },\n    left: {\n      control: { type: 'number' },\n      description: 'Define o deslocamento esquerdo do modal.',\n      table: {\n        category: 'Offset',\n        defaultValue: { summary: '0px' },\n      },\n    },\n    right: {\n      control: { type: 'number' },\n      description: 'Define o deslocamento direito do modal.',\n      table: {\n        category: 'Offset',\n        defaultValue: { summary: '0px' },\n      },\n    },\n    close: {\n      action: 'close',\n      description: 'Evento customizado (via listener) disparado quando o componente é fechado.',\n      name: 'modalClose',\n      table: {\n        category: 'Events',\n      },\n    },\n  },\n};\n\nexport const CuraModal = {\n  args: {\n    background: 'light',\n    open: true,\n    content: `<div style=\"display:flex;\n      justify-content: center;\n      align-items: center;\n      align-self: stretch;\n      background-color:rgba(187, 107, 217, 0.4);\n      text-align: center;\n      height: 30px;\n      color: #9b51e0;\">\n      content area\n    </div>`,\n    top: 0,\n    bottom: 0,\n    left: 0,\n    right: 0,\n    mobileCloseLabel: 'Fechar',\n    zindex: '100',\n  },\n};\n"]}
+{"version":3,"file":"cura-modal.stories.js","sourceRoot":"","sources":["../../../src/components/cura-modal/cura-modal.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["const renderCuraModal = (args: any) => `\n  <div style=\"height: 500px\">\n    <cura-modal\n      open=\"${args.open}\"\n      mobile-close-label=\"${args.mobileCloseLabel}\"\n      can-close=\"${args.canClose}\"\n      zindex=\"${args.zindex}\"\n      background=\"${args.background}\"\n      top=\"${args.top}\"\n      bottom=\"${args.bottom}\"\n      left=\"${args.left}\"\n      right=\"${args.right}\"\n    >\n      ${args.content}\n    </cura-modal>\n  </div>\n`;\n\nexport default {\n  title: 'Componentes/Feedback/Modal',\n  tags: ['autodocs'],\n  render: ({ ...args }) => {\n    return renderCuraModal(args);\n  },\n  argTypes: {\n    open: {\n      control: 'boolean',\n      description: 'Define se o modal está aberto ou fechado.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: false },\n      },\n    },\n    background: {\n      control: { type: 'select' },\n      options: ['dark', 'light'],\n      description: 'Define a cor do background do modal.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'light' },\n      },\n    },\n    content: {\n      control: { type: 'text' },\n      description: 'Conteúdo do modal a ser exibido.',\n      table: {\n        category: 'Properties',\n      },\n    },\n    mobileCloseLabel: {\n      control: { type: 'text' },\n      description: 'Label utilizada no botão de fechar no mobile.',\n      table: {\n        category: 'Properties',\n      },\n    },\n    canClose: {\n      control: 'boolean',\n      description: 'Controla se o modal pode ser fechado. Quando false, oculta todos os botões de fechar e previne fechar via clique no backdrop ou tecla ESC.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: true },\n      },\n    },\n    zindex: {\n      control: { type: 'text' },\n      description: 'Define um valor para o z-index.',\n      table: {\n        category: 'Properties',\n      },\n    },\n    top: {\n      control: { type: 'number' },\n      description: 'Define o deslocamento superior do modal.',\n      table: {\n        category: 'Offset',\n        defaultValue: { summary: '0px' },\n      },\n    },\n    bottom: {\n      control: { type: 'number' },\n      description: 'Define o deslocamento inferior do modal.',\n      table: {\n        category: 'Offset',\n        defaultValue: { summary: '0px' },\n      },\n    },\n    left: {\n      control: { type: 'number' },\n      description: 'Define o deslocamento esquerdo do modal.',\n      table: {\n        category: 'Offset',\n        defaultValue: { summary: '0px' },\n      },\n    },\n    right: {\n      control: { type: 'number' },\n      description: 'Define o deslocamento direito do modal.',\n      table: {\n        category: 'Offset',\n        defaultValue: { summary: '0px' },\n      },\n    },\n    close: {\n      action: 'close',\n      description: 'Evento customizado (via listener) disparado quando o componente é fechado.',\n      name: 'modalClose',\n      table: {\n        category: 'Events',\n      },\n    },\n  },\n};\n\nexport const CuraModal = {\n  args: {\n    background: 'light',\n    open: true,\n    content: `<div style=\"display:flex;\n      justify-content: center;\n      align-items: center;\n      align-self: stretch;\n      background-color:rgba(187, 107, 217, 0.4);\n      text-align: center;\n      height: 30px;\n      color: #9b51e0;\">\n      content area\n    </div>`,\n    top: 0,\n    bottom: 0,\n    left: 0,\n    right: 0,\n    mobileCloseLabel: 'Fechar',\n    canClose: true,\n    zindex: '100',\n  },\n};\n"]}