le-kit 0.1.14 → 0.1.15

package/dist/esm/le-dropdown-base.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"le-dropdown-base.entry.js","sources":["src/components/le-dropdown-base/le-dropdown-base.css?tag=le-dropdown-base&encapsulation=shadow","src/components/le-dropdown-base/le-dropdown-base.tsx"],"sourcesContent":["/**\n * le-dropdown-base component styles\n *\n * Internal component - minimal styling, meant to be customized\n * by wrapper components (le-select, le-combobox, etc.)\n */\n\n:host {\n  display: block;\n  --le-dropdown-list-padding: var(--le-spacing-1);\n  --le-dropdown-empty-padding: var(--le-spacing-4);\n  --le-dropdown-option-radius: var(--le-radius-md);\n  --le-dropdown-font-size: var(--le-font-size-sm);\n  --le-dropdown-option-padding: var(--le-spacing-1) var(--le-spacing-2);\n  --le-dropdown-group-padding: var(--le-spacing-2) var(--le-spacing-2) var(--le-spacing-1);\n  --le-dropdown-group-font-size: var(--le-font-size-xs);\n}\n\n:host([disabled]) {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n/* Dropdown list container */\nle-popover::part(content) {\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: var(--le-dropdown-list-padding, 0.25rem);\n}\n\n/* Empty state */\n.dropdown-empty {\n  padding: var(--le-dropdown-empty-padding);\n  text-align: center;\n  color: var(--le-color-text-secondary, #9ca3af);\n  font-size: var(--le-dropdown-font-size);\n}\n\n/* Group header */\n.dropdown-group-header {\n  padding: var(--le-dropdown-group-padding);\n  font-size: var(--le-dropdown-group-font-size);\n  font-weight: 700;\n  color: var(--le-color-text-secondary, #9ca3af);\n  letter-spacing: 0.05em;\n}\n\n/* Separator */\n.dropdown-separator {\n  height: 1px;\n  margin: var(--le-dropdown-separator-margin, 0.25rem 0);\n  background: var(--le-color-border, #e5e7eb);\n}\n\n/* Option item */\n.dropdown-option {\n  display: flex;\n  align-items: center;\n  gap: var(--le-dropdown-option-gap, 0.5rem);\n  padding: var(--le-dropdown-option-padding);\n  font-size: var(--le-dropdown-font-size, 0.875rem);\n  line-height: 1.4;\n  color: var(--le-color-text, #1f2937);\n  border: 1px solid transparent;\n  border-radius: var(--le-dropdown-option-radius, 0.25rem);\n  cursor: pointer;\n  user-select: none;\n  transition: background-color 0.1s ease;\n}\n\n.dropdown-option:hover,\n.dropdown-option.is-focused {\n  border-color: var(--le-color-border-hover, #d1d5db);\n}\n\n.dropdown-option.is-disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.dropdown-option.is-disabled:hover {\n  background: transparent;\n}\n\n/* Checkbox for multiselect */\n.option-checkbox {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1rem;\n  height: 1rem;\n  border: 2px solid var(--le-color-border, #d1d5db);\n  border-radius: 0.25rem;\n  background: var(--le-color-surface, #fff);\n  flex-shrink: 0;\n}\n\n.is-selected .option-checkbox {\n  background: var(--le-color-primary, #3b82f6);\n  border-color: var(--le-color-primary, #3b82f6);\n  color: white;\n}\n\n.option-checkbox svg {\n  width: 0.75rem;\n  height: 0.75rem;\n}\n\n/* Icons */\n.option-icon-start,\n.option-icon-end {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 1.25rem;\n  height: 1.25rem;\n}\n\n.option-icon-start img,\n.option-icon-end img {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n\n/* Content */\n.option-content {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.option-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.option-description {\n  font-size: 0.75rem;\n  color: var(--le-color-text-muted, #6b7280);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Check mark for single select */\n.option-check {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1rem;\n  height: 1rem;\n  color: var(--le-color-primary, #3b82f6);\n  flex-shrink: 0;\n}\n\n.option-check svg {\n  width: 1rem;\n  height: 1rem;\n}\n","import {\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Method,\n  Element,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport { LeOption, LeOptionValue, LeOptionSelectDetail } from '../../types/options';\nimport { generateId } from '../../utils/utils';\n\n/**\n * Internal dropdown base component that provides shared functionality\n * for select, combobox, and multiselect components.\n *\n * Wraps le-popover for positioning and provides:\n * - Option list rendering with groups\n * - Keyboard navigation (↑↓, Enter, Escape, Home/End)\n * - Option filtering support\n * - Single and multi-select modes\n *\n * @cmsInternal true\n * @cmsCategory System\n *\n * @slot trigger - The element that triggers the dropdown\n */\n@Component({\n  tag: 'le-dropdown-base',\n  styleUrl: 'le-dropdown-base.css',\n  shadow: true,\n})\nexport class LeDropdownBase {\n  @Element() el: HTMLElement;\n\n  /**\n   * The options to display in the dropdown.\n   */\n  @Prop() options: LeOption[] = [];\n\n  /**\n   * Current value(s) - single value or array for multiselect.\n   */\n  @Prop() value?: LeOptionValue | LeOptionValue[];\n\n  /**\n   * Whether multiple selection is allowed.\n   */\n  @Prop() multiple: boolean = false;\n\n  /**\n   * Whether the dropdown is open.\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Whether the dropdown is disabled.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Filter function for options.\n   * Return true to include the option.\n   */\n  @Prop() filterFn?: (option: LeOption, query: string) => boolean;\n\n  /**\n   * Current filter query string.\n   */\n  @Prop() filterQuery: string = '';\n\n  /**\n   * Placeholder text when no options match filter.\n   */\n  @Prop() emptyText: string = 'No options';\n\n  /**\n   * Whether to show checkboxes for multiselect mode.\n   */\n  @Prop() showCheckboxes: boolean = true;\n\n  /**\n   * Maximum height of the dropdown list.\n   */\n  @Prop() maxHeight: string = '300px';\n\n  /**\n   * Width of the dropdown. If not set, matches trigger width.\n   */\n  @Prop() width?: string;\n\n  /**\n   * Sets the dropdown to full width of the trigger.\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * Whether to close the dropdown when clicking outside.\n   * (used to support combobox with input focus)\n   */\n  @Prop() closeOnClickOutside: boolean = true;\n\n  /**\n   * Emitted when an option is selected.\n   */\n  @Event() leOptionSelect: EventEmitter<LeOptionSelectDetail>;\n\n  /**\n   * Emitted when the dropdown opens.\n   */\n  @Event() leDropdownOpen: EventEmitter<void>;\n\n  /**\n   * Emitted when the dropdown closes.\n   */\n  @Event() leDropdownClose: EventEmitter<void>;\n\n  @State() private focusedIndex: number = -1;\n  @State() private filteredOptions: LeOption[] = [];\n\n  private popoverEl?: HTMLLePopoverElement;\n  private listEl?: HTMLElement;\n  private triggerWidth: number = 0;\n\n  @Watch('options')\n  @Watch('filterQuery')\n  handleOptionsChange() {\n    this.updateFilteredOptions();\n  }\n\n  componentWillLoad() {\n    this.updateFilteredOptions();\n  }\n\n  private updateFilteredOptions() {\n    // Remember previously focused option\n    const focusedOption = this.filteredOptions[this.focusedIndex];\n\n    if (!this.filterQuery || !this.filterFn) {\n      this.filteredOptions = this.options;\n    } else {\n      this.filteredOptions = this.options.filter(opt => this.filterFn!(opt, this.filterQuery));\n    }\n\n    // try to maintain focus on same option if still present\n    if (focusedOption) {\n      const newIndex = this.filteredOptions.indexOf(focusedOption);\n      this.focusedIndex = newIndex >= 0 ? newIndex : this.getInitialFocusIndex();\n    } else {\n      this.focusedIndex = -1;\n    }\n  }\n\n  private getSelectableOptions(): LeOption[] {\n    return this.filteredOptions.filter(opt => !opt.disabled);\n  }\n\n  private isSelected(option: LeOption): boolean {\n    const optValue = option.value ?? option.label;\n    if (this.multiple && Array.isArray(this.value)) {\n      setTimeout(() => {\n        this.popoverEl?.updatePosition();\n      }, 50);\n      return this.value.includes(optValue);\n    }\n    return this.value === optValue;\n  }\n\n  private handleOptionClick(option: LeOption, e: MouseEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n\n    if (option.disabled) return;\n\n    this.leOptionSelect.emit({\n      value: option.value ?? option.label,\n      option,\n    });\n\n    // Close dropdown for single select\n    if (!this.multiple) {\n      this.hide();\n    }\n  }\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (!this.open) return;\n\n    const optionCount = this.filteredOptions.length;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        // check for the next non-disabled option and focus\n        let nextIndex = this.focusedIndex < optionCount - 1 ? this.focusedIndex + 1 : 0;\n        while (this.filteredOptions[nextIndex].disabled) {\n          nextIndex = ++nextIndex < optionCount ? nextIndex : 0;\n        }\n        this.focusedIndex = nextIndex;\n        this.scrollToFocused();\n        break;\n\n      case 'ArrowUp':\n        e.preventDefault();\n        // check for the previous non-disabled option and focus\n        let prevIndex = this.focusedIndex > 0 ? this.focusedIndex - 1 : optionCount - 1;\n        while (this.filteredOptions[prevIndex].disabled) {\n          prevIndex = --prevIndex >= 0 ? prevIndex : optionCount - 1;\n        }\n        this.focusedIndex = prevIndex;\n        this.scrollToFocused();\n        break;\n\n      case 'Home':\n        e.preventDefault();\n        // check for the first non-disabled option and focus\n        let firstIndex = 0;\n        while (this.filteredOptions[firstIndex].disabled) {\n          firstIndex++;\n          if (firstIndex >= optionCount) {\n            firstIndex = -1;\n            break;\n          }\n        }\n        this.focusedIndex = firstIndex;\n        this.scrollToFocused();\n        break;\n\n      case 'End':\n        e.preventDefault();\n        // check for the last non-disabled option and focus\n        let lastIndex = optionCount - 1;\n        while (this.filteredOptions[lastIndex].disabled) {\n          lastIndex--;\n          if (lastIndex < 0) {\n            lastIndex = -1;\n            break;\n          }\n        }\n        this.focusedIndex = lastIndex;\n        this.scrollToFocused();\n        break;\n\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        if (this.focusedIndex >= 0 && this.focusedIndex < optionCount) {\n          const option = this.filteredOptions[this.focusedIndex];\n          if (!option || option.disabled) return;\n          this.leOptionSelect.emit({\n            value: option.value ?? option.label,\n            option,\n          });\n          if (!this.multiple) {\n            this.hide();\n          }\n        }\n        break;\n\n      case 'Escape':\n        e.preventDefault();\n        this.hide();\n        break;\n\n      case 'Tab':\n        this.hide();\n        break;\n    }\n  };\n\n  private scrollToFocused() {\n    if (!this.listEl || this.focusedIndex < 0) return;\n\n    const focusedEl = this.listEl.querySelector(\n      `[data-index=\"${this.focusedIndex}\"]`,\n    ) as HTMLElement;\n    if (focusedEl) {\n      focusedEl.scrollIntoView({ block: 'nearest' });\n    }\n  }\n\n  private handlePopoverOpen = () => {\n    this.open = true;\n    this.focusedIndex = this.getInitialFocusIndex();\n    this.leDropdownOpen.emit();\n\n    // Add keyboard listener\n    document.addEventListener('keydown', this.handleKeyDown);\n  };\n\n  private handlePopoverClose = () => {\n    this.open = false;\n    this.focusedIndex = -1;\n    this.leDropdownClose.emit();\n\n    // Remove keyboard listener\n    document.removeEventListener('keydown', this.handleKeyDown);\n  };\n\n  private getInitialFocusIndex(): number {\n    // Focus on first selected option, or first option\n    const selectableOptions = this.getSelectableOptions();\n    const selectedIndex = selectableOptions.findIndex(opt => this.isSelected(opt));\n    return selectedIndex >= 0 ? selectedIndex : 0;\n  }\n\n  /**\n   * Opens the dropdown.\n   */\n  @Method()\n  async show() {\n    if (this.disabled) return;\n\n    // Capture trigger width for matching dropdown width\n    const trigger = this.el.querySelector('[slot=\"trigger\"]') as HTMLElement;\n    if (trigger) {\n      this.triggerWidth = trigger.offsetWidth;\n    }\n\n    await this.popoverEl?.show();\n  }\n\n  /**\n   * Closes the dropdown.\n   */\n  @Method()\n  async hide() {\n    await this.popoverEl?.hide();\n  }\n\n  /**\n   * Toggles the dropdown.\n   */\n  @Method()\n  async toggle() {\n    if (this.open) {\n      await this.hide();\n    } else {\n      await this.show();\n    }\n  }\n\n  private renderIcon(icon: string | undefined, className: string) {\n    if (!icon) return null;\n\n    if (icon.startsWith('http') || icon.startsWith('/')) {\n      return <img class={className} src={icon} alt=\"\" />;\n    }\n\n    return <span class={className}>{icon}</span>;\n  }\n\n  private renderOption(option: LeOption, index: number) {\n    const isSelected = this.isSelected(option);\n    const isFocused = index === this.focusedIndex;\n    const optionId = option.id || generateId();\n\n    return (\n      <div\n        class={{\n          'dropdown-option': true,\n          'is-selected': isSelected,\n          'is-focused': isFocused,\n          'is-disabled': !!option.disabled,\n        }}\n        role=\"option\"\n        id={optionId}\n        aria-selected={isSelected ? 'true' : 'false'}\n        aria-disabled={option.disabled ? 'true' : undefined}\n        data-index={index}\n        onClick={e => this.handleOptionClick(option, e)}\n        onMouseEnter={() => {\n          if (!option.disabled) {\n            this.focusedIndex = index;\n          }\n        }}\n      >\n        {this.renderIcon(option.iconStart, 'option-icon-start')}\n        <div class=\"option-content\">\n          <span class=\"option-label\">{option.label}</span>\n          {option.description && <span class=\"option-description\">{option.description}</span>}\n        </div>\n        {this.renderIcon(option.iconEnd, 'option-icon-end')}\n        {(!this.multiple || this.showCheckboxes) && isSelected && (\n          <span class=\"option-check\">\n            <svg viewBox=\"0 0 16 16\" fill=\"currentColor\">\n              <path d=\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\" />\n            </svg>\n          </span>\n        )}\n      </div>\n    );\n  }\n\n  private renderOptions() {\n    if (this.filteredOptions.length === 0) {\n      return <div class=\"dropdown-empty\">{this.emptyText}</div>;\n    }\n\n    // Group options if they have group property\n    const grouped = new Map<string, LeOption[]>();\n    const ungrouped: LeOption[] = [];\n\n    this.filteredOptions.forEach(opt => {\n      if (opt.group) {\n        const group = grouped.get(opt.group) || [];\n        group.push(opt);\n        grouped.set(opt.group, group);\n      } else {\n        ungrouped.push(opt);\n      }\n    });\n\n    // Build flat list with group headers for index tracking\n    let globalIndex = 0;\n    const elements: any[] = [];\n\n    // Render ungrouped options first\n    ungrouped.forEach(opt => {\n      if (opt.separator === 'before') {\n        elements.push(<div class=\"dropdown-separator\" role=\"separator\" />);\n      }\n      elements.push(this.renderOption(opt, globalIndex++));\n      if (opt.separator === 'after') {\n        elements.push(<div class=\"dropdown-separator\" role=\"separator\" />);\n      }\n    });\n\n    // Render grouped options\n    grouped.forEach((options, groupLabel) => {\n      elements.push(\n        <div class=\"dropdown-group-header\" role=\"presentation\">\n          {groupLabel}\n        </div>,\n      );\n      options.forEach(opt => {\n        elements.push(this.renderOption(opt, globalIndex++));\n      });\n    });\n\n    return elements;\n  }\n\n  render() {\n    const dropdownWidth = this.width || (this.triggerWidth ? `${this.triggerWidth}px` : undefined);\n\n    return (\n      <Host>\n        <le-popover\n          ref={el => (this.popoverEl = el)}\n          position=\"bottom\"\n          align=\"start\"\n          showClose={false}\n          closeOnClickOutside={this.closeOnClickOutside}\n          closeOnEscape={true}\n          offset={4}\n          width={dropdownWidth}\n          minWidth=\"150px\"\n          trigger-full-width={this.fullWidth}\n          onLePopoverOpen={this.handlePopoverOpen}\n          onLePopoverClose={this.handlePopoverClose}\n        >\n          <slot name=\"trigger\" slot=\"trigger\" />\n          <slot name=\"header\" />\n          <div\n            class=\"dropdown-list\"\n            role=\"listbox\"\n            aria-multiselectable={this.multiple ? 'true' : undefined}\n            ref={el => (this.listEl = el)}\n            style={{ maxHeight: this.maxHeight }}\n          >\n            {this.renderOptions()}\n          </div>\n        </le-popover>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/le-kit.js

@@ -0,0 +1,21 @@
+import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-DzgCnDLJ.js';
+export { s as setNonce } from './index-DzgCnDLJ.js';
+
+/*
+ Stencil Client Patch Browser v4.38.3 | MIT Licensed | https://stenciljs.com
+ */
+
+var patchBrowser = () => {
+  const importMeta = import.meta.url;
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await globalScripts();
+  return bootstrapLazy([["le-button_7",[[769,"le-button",{"mode":[1537],"variant":[1],"color":[1],"size":[1],"selected":[4],"fullWidth":[516,"full-width"],"iconOnly":[1,"icon-only"],"iconStart":[1,"icon-start"],"iconEnd":[1,"icon-end"],"disabled":[4],"type":[1],"href":[1],"target":[1],"align":[1]}],[769,"le-checkbox",{"checked":[1540],"disabled":[4],"name":[1],"value":[1],"externalId":[1,"external-id"]}],[769,"le-component",{"component":[1],"displayName":[1,"display-name"],"hostClass":[1,"host-class"],"hostStyle":[16],"adminMode":[32],"componentMeta":[32],"propertyValues":[32]}],[769,"le-popup",{"mode":[1537],"open":[1540],"type":[1],"popupTitle":[1,"popup-title"],"message":[1],"modal":[4],"position":[1],"confirmText":[1,"confirm-text"],"cancelText":[1,"cancel-text"],"placeholder":[1],"defaultValue":[1,"default-value"],"closeOnBackdrop":[4,"close-on-backdrop"],"inputValue":[32],"show":[64],"hide":[64]}],[769,"le-slot",{"type":[1],"name":[1],"label":[1],"description":[1],"allowedComponents":[1,"allowed-components"],"multiple":[4],"required":[4],"placeholder":[1],"tag":[1],"slotStyle":[1,"slot-style"],"adminMode":[32],"textValue":[32],"isValidHtml":[32],"availableComponents":[32],"pickerOpen":[32]}],[769,"le-string-input",{"inputRef":[16],"mode":[1537],"value":[1537],"name":[1],"type":[1],"label":[1],"iconStart":[1,"icon-start"],"iconEnd":[1,"icon-end"],"placeholder":[1],"hideDescription":[4,"hide-description"],"disabled":[4],"readonly":[4],"externalId":[1,"external-id"]}],[769,"le-popover",{"mode":[1537],"open":[1540],"position":[1],"align":[1],"popoverTitle":[1,"popover-title"],"showClose":[4,"show-close"],"closeOnClickOutside":[4,"close-on-click-outside"],"closeOnEscape":[4,"close-on-escape"],"offset":[2],"width":[1],"minWidth":[1,"min-width"],"maxWidth":[1,"max-width"],"triggerFullWidth":[4,"trigger-full-width"],"isPositioned":[32],"updatePosition":[64],"show":[64],"hide":[64],"toggle":[64]}]]],["le-multiselect",[[769,"le-multiselect",{"options":[1],"value":[1040],"placeholder":[1],"disabled":[516],"required":[4],"name":[1],"fullWidth":[516,"full-width"],"size":[513],"maxSelections":[2,"max-selections"],"showSelectAll":[1032,"show-select-all"],"searchable":[4],"emptyText":[1,"empty-text"],"open":[1540],"selectAllLabel":[32],"deselectAllLabel":[32],"selectedOptions":[32],"searchQuery":[32],"showDropdown":[64],"hideDropdown":[64],"clearSelection":[64]},null,{"value":["handleValueChange"],"options":["handleOptionsChange"],"showSelectAll":["handleShowSelectAllChange"]}]]],["le-combobox",[[769,"le-combobox",{"options":[1],"value":[1032],"placeholder":[1],"disabled":[516],"required":[4],"name":[1],"fullWidth":[516,"full-width"],"size":[513],"allowCustom":[4,"allow-custom"],"minSearchLength":[2,"min-search-length"],"emptyText":[1,"empty-text"],"open":[1540],"inputValue":[32],"selectedOption":[32],"showDropdown":[64],"hideDropdown":[64],"focusInput":[64]},[[8,"click","handleWindowClick"]],{"value":["handleValueChange"],"options":["handleOptionsChange"]}]]],["le-segmented-control",[[769,"le-segmented-control",{"options":[16],"value":[1032],"size":[1],"overflow":[1],"fullWidth":[4,"full-width"],"disabled":[4],"segmentConfigs":[32],"focusedIndex":[32],"isDeclarativeMode":[32]},[[0,"slotchange","handleSlotChange"]],{"options":["tabsChanged"]}]]],["le-select",[[769,"le-select",{"options":[1],"value":[1032],"placeholder":[1],"disabled":[516],"required":[4],"name":[1],"fullWidth":[4,"full-width"],"size":[513],"variant":[513],"searchable":[4],"emptyText":[1,"empty-text"],"open":[1540],"selectedOption":[32],"searchQuery":[32],"showDropdown":[64],"hideDropdown":[64]},null,{"value":["handleValueChange"],"options":["handleOptionsChange"]}]]],["le-tab-bar",[[769,"le-tab-bar",{"tabs":[16],"selected":[1032],"fullWidth":[4,"full-width"],"showLabels":[4,"show-labels"],"position":[1],"size":[1],"bordered":[4],"tabConfigs":[32],"isDeclarativeMode":[32],"focusedIndex":[32]},[[0,"slotchange","handleSlotChange"]],{"selected":["selectedChanged"],"tabs":["tabsChanged"]}]]],["le-tabs",[[769,"le-tabs",{"tabs":[16],"selected":[1032],"orientation":[1],"position":[1],"variant":[1],"fullWidth":[4,"full-width"],"size":[1],"wrap":[4],"overflow":[1],"tabConfigs":[32],"focusedIndex":[32],"isDeclarativeMode":[32]},[[0,"slotchange","handleSlotChange"]],{"selected":["selectedChanged"],"tabs":["tabsChanged"]}]]],["le-box",[[769,"le-box",{"grow":[2],"shrink":[2],"basis":[1],"width":[1],"height":[1],"minWidth":[1,"min-width"],"maxWidth":[1,"max-width"],"minHeight":[1,"min-height"],"maxHeight":[1,"max-height"],"background":[1],"borderRadius":[1,"border-radius"],"border":[1],"alignSelf":[1,"align-self"],"alignContent":[1,"align-content"],"justifyContent":[1,"justify-content"],"padding":[1],"order":[2],"displayFlex":[4,"display-flex"],"innerDirection":[1,"inner-direction"],"innerGap":[1,"inner-gap"]}]]],["le-card",[[769,"le-card",{"variant":[1],"interactive":[4]}]]],["le-number-input",[[769,"le-number-input",{"value":[1538],"name":[1],"label":[1],"placeholder":[1],"min":[2],"max":[2],"step":[2],"required":[4],"disabled":[4],"readonly":[4],"iconStart":[1,"icon-start"],"showSpinners":[4,"show-spinners"],"externalId":[1,"external-id"],"isValid":[32],"validationMessage":[32]},null,{"value":["valueChanged"]}]]],["le-stack",[[769,"le-stack",{"direction":[1],"gap":[1],"align":[1],"justify":[1],"wrap":[4],"alignContent":[1,"align-content"],"reverse":[4],"maxItems":[2,"max-items"],"fullWidth":[4,"full-width"],"fullHeight":[4,"full-height"],"padding":[1]}]]],["le-tab-panel",[[769,"le-tab-panel",{"label":[1],"value":[1],"iconStart":[1,"icon-start"],"iconEnd":[1,"icon-end"],"disabled":[4],"lazy":[4],"active":[32],"hasBeenActive":[32],"getValue":[64],"getTabConfig":[64],"setActive":[64]},null,{"active":["activeChanged"]}]]],["le-text",[[769,"le-text",{"variant":[1537],"align":[513],"color":[1],"truncate":[4],"maxLines":[2,"max-lines"],"adminMode":[32],"content":[32],"isFocused":[32],"selectionState":[32]},null,{"variant":["onVariantChange"]}]]],["le-round-progress",[[769,"le-round-progress",{"value":[2],"padding":[2],"paths":[1],"params":[32]},null,{"value":["updateValue"],"padding":["updatePadding"],"paths":["updateProgressBackgrounds"]}]]],["le-turntable",[[769,"le-turntable",{"center":[1],"value":[2]},[[9,"mousemove","handleMouseMove"],[9,"mouseup","handleMouseUp"],[9,"resize","handleWindowResize"]],{"value":["updateValue"]}]]],["le-tag",[[769,"le-tag",{"label":[1],"mode":[1537],"icon":[1],"dismissible":[4],"disabled":[516],"size":[513],"variant":[513]}]]],["le-tab",[[769,"le-tab",{"mode":[1537],"label":[1],"value":[1],"variant":[1],"position":[1],"size":[1],"focusable":[4],"selected":[4],"fullWidth":[516,"full-width"],"icon":[1],"showLabel":[4,"show-label"],"iconStart":[1,"icon-start"],"iconEnd":[1,"icon-end"],"disabled":[4],"href":[1],"target":[1],"align":[1],"getTabConfig":[64]}]]],["le-dropdown-base",[[769,"le-dropdown-base",{"options":[16],"value":[8],"multiple":[4],"open":[1540],"disabled":[516],"filterFn":[16],"filterQuery":[1,"filter-query"],"emptyText":[1,"empty-text"],"showCheckboxes":[4,"show-checkboxes"],"maxHeight":[1,"max-height"],"width":[1],"fullWidth":[4,"full-width"],"closeOnClickOutside":[4,"close-on-click-outside"],"focusedIndex":[32],"filteredOptions":[32],"show":[64],"hide":[64],"toggle":[64]},null,{"options":["handleOptionsChange"],"filterQuery":["handleOptionsChange"]}]]]], options);
+});
+//# sourceMappingURL=le-kit.js.map

package/dist/esm/le-multiselect.entry.js

@@ -0,0 +1,304 @@
+import { r as registerInstance, d as createEvent, c as getElement, h } from './index-DzgCnDLJ.js';
+
+const leMultiselectCss = ":host{display:inline-block;min-width:250px;--le-multiselect-min-height:0;--le-multiselect-padding:var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-2);--le-multiselect-border-color:var(--le-color-primary, #3b82f6)}:host([disabled]){opacity:0.5;pointer-events:none}.multiselect-trigger{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;width:100%;min-height:var(--le-multiselect-min-height);padding:var(--le-multiselect-padding);line-height:var(--le-line-height-tight);background:var(--le-multiselect-bg, var(--le-color-surface, #fff));border:1px solid color-mix(in srgb, var(--le-multiselect-border-color) 33%, transparent);border-radius:var(--le-multiselect-border-radius, 0.375rem);cursor:pointer;transition:border-color 0.15s ease, box-shadow 0.15s ease}.multiselect-trigger:hover:not(.is-disabled),:host(:focus-within) .multiselect-trigger:not(.is-disabled){border-color:var(--le-multiselect-border-color)}:host(:focus-within) .multiselect-trigger{outline:2px solid var(--le-color-focus);outline-offset:2px}:host([full-width]){width:100%}.multiselect-trigger.is-open{border-color:var(--le-color-primary, #3b82f6)}.multiselect-trigger.is-disabled{cursor:not-allowed;background:var(--le-color-surface-disabled, #f9fafb)}.multiselect-placeholder{color:color-mix(in srgb, var(--le-color-text-secondary) 66%, transparent)}.multiselect-tags{display:flex;flex-wrap:wrap;gap:0.25rem;flex:1;min-width:0}.multiselect-actions{display:flex;align-items:center;gap:0.25rem;flex-shrink:0}.multiselect-clear{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;background:transparent;color:var(--le-color-primary, #3b82f6);border:none;border-radius:0.25rem;cursor:pointer;opacity:0.6;transition:opacity 0.15s ease, background-color 0.15s ease}.multiselect-clear:hover{opacity:1;background:var(--le-color-surface-hover, #f3f4f6)}.multiselect-clear svg{width:0.875rem;height:0.875rem}.multiselect-arrow{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1rem;color:var(--le-color-primary, #3b82f6);transition:transform 0.2s ease}.multiselect-arrow svg{width:1rem;height:1rem}.multiselect-trigger.is-open .multiselect-arrow{transform:rotate(180deg)}.search-input::part(container):focus-within{outline:none !important}.search-input{--le-input-radius:var(--le-radius-md)}.multiselect-status{display:block;margin-top:0.25rem;font-size:0.75rem;color:var(--le-color-text-muted, #6b7280)}:host([size='small']) .multiselect-trigger{--le-multiselect-min-height:2rem;--le-multiselect-padding:0.25rem 0.375rem;--le-multiselect-font-size:0.75rem}:host([size='large']) .multiselect-trigger{--le-multiselect-min-height:3rem;--le-multiselect-padding:0.5rem 0.625rem;--le-multiselect-font-size:1rem}";
+
+const LeMultiselect = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.leChange = createEvent(this, "leChange");
+        this.leOpen = createEvent(this, "leOpen");
+        this.leClose = createEvent(this, "leClose");
+    }
+    get el() { return getElement(this); }
+    /**
+     * The options to display in the dropdown.
+     */
+    options = [];
+    /**
+     * The currently selected values.
+     */
+    value = [];
+    /**
+     * Placeholder text when no options are selected.
+     */
+    placeholder = 'Select options...';
+    /**
+     * Whether the multiselect is disabled.
+     */
+    disabled = false;
+    /**
+     * Whether selection is required.
+     */
+    required = false;
+    /**
+     * Name attribute for form submission.
+     */
+    name;
+    /**
+     * Whether the multiselect should take full width of its container.
+     */
+    fullWidth = false;
+    /**
+     * Size variant of the multiselect.
+     */
+    size = 'medium';
+    /**
+     * Maximum number of selections allowed.
+     */
+    maxSelections;
+    /**
+     * Labels for the "Select All" option.
+     */
+    selectAllLabel = 'Select All';
+    deselectAllLabel = 'Deselect All';
+    /**
+     * Whether to show a "Select All" option.
+     * Also accepts a string or array of strings to customize the label(s).
+     */
+    showSelectAll = false;
+    /**
+     * Whether the input is searchable.
+     */
+    searchable = false;
+    /**
+     * Text to show when no options match the search.
+     */
+    emptyText = 'No results found';
+    /**
+     * Whether the dropdown is currently open.
+     */
+    open = false;
+    /**
+     * Emitted when the selected values change.
+     */
+    leChange;
+    /**
+     * Emitted when the dropdown opens.
+     */
+    leOpen;
+    /**
+     * Emitted when the dropdown closes.
+     */
+    leClose;
+    selectedOptions = [];
+    searchQuery = '';
+    dropdownEl;
+    inputEl;
+    handleValueChange() {
+        this.updateSelectedOptions();
+    }
+    handleOptionsChange() {
+        this.updateSelectedOptions();
+    }
+    handleShowSelectAllChange(newValue) {
+        if (typeof newValue !== 'boolean' && typeof newValue !== 'string') {
+            this.showSelectAll = false;
+        }
+        else if (typeof newValue === 'boolean') {
+            this.showSelectAll = newValue;
+        }
+        else if (Array.isArray(newValue)) {
+            this.showSelectAll = true;
+            this.selectAllLabel = newValue[0];
+            this.deselectAllLabel = newValue[1] || newValue[0];
+        }
+        else if (typeof newValue === 'string') {
+            this.showSelectAll = true;
+            try {
+                const parsed = JSON.parse(newValue);
+                if (Array.isArray(parsed) && parsed.every(item => typeof item === 'string')) {
+                    this.selectAllLabel = parsed[0];
+                    this.deselectAllLabel = parsed[1] || parsed[0];
+                }
+                else {
+                    this.selectAllLabel = newValue;
+                    this.deselectAllLabel = newValue;
+                }
+            }
+            catch {
+                this.selectAllLabel = newValue;
+                this.deselectAllLabel = newValue;
+            }
+        }
+    }
+    componentWillLoad() {
+        this.updateSelectedOptions();
+        this.handleShowSelectAllChange(this.showSelectAll);
+    }
+    get parsedOptions() {
+        if (typeof this.options === 'string') {
+            try {
+                return JSON.parse(this.options);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.options;
+    }
+    get effectiveOptions() {
+        let options = [...this.parsedOptions];
+        // Add "Select All" option if enabled
+        if (this.showSelectAll && options.length > 0) {
+            const allSelected = this.selectedOptions.length === this.parsedOptions.filter(opt => !opt.disabled).length;
+            options = [
+                {
+                    label: allSelected ? this.deselectAllLabel : this.selectAllLabel,
+                    value: '__select_all__',
+                    iconStart: allSelected ? '✕' : '⇣',
+                },
+                ...options,
+            ];
+        }
+        return options;
+    }
+    updateSelectedOptions() {
+        const valueArray = Array.isArray(this.value) ? this.value : [];
+        this.selectedOptions = this.parsedOptions.filter(opt => valueArray.includes(opt.value ?? opt.label));
+    }
+    filterOption = (option, query) => {
+        if (!query)
+            return true;
+        // Always show "Select All" option
+        if (option.value === '__select_all__')
+            return true;
+        const searchLower = query.toLowerCase();
+        return (option.label.toLowerCase().includes(searchLower) ||
+            (option.description?.toLowerCase().includes(searchLower) ?? false));
+    };
+    handleOptionSelect = (e) => {
+        const { value } = e.detail;
+        const enabledOptions = this.parsedOptions.filter(opt => !opt.disabled);
+        if (enabledOptions.length === 0)
+            return;
+        // Handle "Select All" option
+        if (value === '__select_all__') {
+            if (this.selectedOptions.length === enabledOptions.length) {
+                // Deselect all
+                this.value = [];
+            }
+            else {
+                // Select all (respect maxSelections)
+                const selectableOptions = this.maxSelections
+                    ? enabledOptions.slice(0, this.maxSelections)
+                    : enabledOptions;
+                this.value = selectableOptions.map(opt => opt.value ?? opt.label);
+            }
+            this.emitChange();
+            return;
+        }
+        const isSelected = this.value.includes(value);
+        if (isSelected) {
+            // Remove from selection
+            this.value = this.value.filter(v => v !== value);
+            this.selectedOptions = this.selectedOptions.filter(opt => (opt.value ?? opt.label) !== value);
+        }
+        else {
+            // Add to selection (if not at max)
+            if (this.maxSelections && this.value.length >= this.maxSelections) {
+                return; // Don't add more
+            }
+            this.value = [...this.value, value];
+        }
+        this.emitChange();
+        // Clear search after szelection
+        this.searchQuery = '';
+    };
+    emitChange() {
+        this.leChange.emit({
+            values: this.value,
+            options: this.selectedOptions,
+        });
+    }
+    handleDropdownOpen = () => {
+        this.open = true;
+        this.leOpen.emit();
+        // Focus search input if searchable
+        if (this.searchable) {
+            setTimeout(() => {
+                this.inputEl?.focus();
+            }, 50);
+        }
+    };
+    handleDropdownClose = () => {
+        this.open = false;
+        this.searchQuery = '';
+        this.leClose.emit();
+    };
+    handleTriggerClick = () => {
+        if (!this.disabled) {
+            this.dropdownEl?.toggle();
+        }
+    };
+    handleTriggerKeyDown = (e) => {
+        if (this.disabled)
+            return;
+        if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            this.dropdownEl?.show();
+        }
+    };
+    handleTagDismiss = (option, e) => {
+        e.stopPropagation();
+        const value = option.value ?? option.label;
+        this.value = this.value.filter(v => v !== value);
+        this.selectedOptions = this.selectedOptions.filter(opt => opt !== option);
+        this.emitChange();
+    };
+    handleSearchInput = (e) => {
+        const target = e.target;
+        this.searchQuery = target.value;
+    };
+    handleClearAll = (e) => {
+        e.stopPropagation();
+        this.value = [];
+        this.selectedOptions = [];
+        this.emitChange();
+    };
+    /**
+     * Opens the dropdown.
+     */
+    async showDropdown() {
+        await this.dropdownEl?.show();
+    }
+    /**
+     * Closes the dropdown.
+     */
+    async hideDropdown() {
+        await this.dropdownEl?.hide();
+    }
+    /**
+     * Clears all selections.
+     */
+    async clearSelection() {
+        this.value = [];
+        this.selectedOptions = [];
+        this.emitChange();
+    }
+    renderTags() {
+        if (this.selectedOptions.length === 0) {
+            return h("span", { class: "multiselect-placeholder" }, this.placeholder);
+        }
+        return (h("div", { class: "multiselect-tags" }, this.selectedOptions.map(option => (h("le-tag", { key: option.value ?? option.label, label: option.label, icon: option.iconStart, size: this.size === 'large' ? 'medium' : 'small', dismissible: true, disabled: this.disabled, onLeDismiss: e => this.handleTagDismiss(option, e), mode: "default" })))));
+    }
+    render() {
+        const hasSelections = this.selectedOptions.length > 0;
+        const atMaxSelections = this.maxSelections && this.value.length >= this.maxSelections;
+        return (h("le-component", { key: '982102b3b4f499fdd3f91040be9b70f8601b3bf5', component: "le-multiselect" }, h("le-dropdown-base", { key: '4fdc8409dac2adbd188f0c019fd9fb730a41219c', ref: el => (this.dropdownEl = el), options: this.effectiveOptions, value: this.value, multiple: true, disabled: this.disabled, filterFn: this.searchable ? this.filterOption : undefined, filterQuery: this.searchQuery, emptyText: this.emptyText, showCheckboxes: true, fullWidth: this.fullWidth, onLeOptionSelect: this.handleOptionSelect, onLeDropdownOpen: this.handleDropdownOpen, onLeDropdownClose: this.handleDropdownClose }, h("div", { key: 'a633ff6c22827ef11ddc86950bcf5309ccf4b58e', slot: "trigger", class: {
+                'multiselect-trigger': true,
+                'has-selections': hasSelections,
+                'is-open': this.open,
+                'is-disabled': this.disabled,
+            }, tabIndex: this.disabled ? -1 : 0, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, this.renderTags(), h("div", { key: '7b872ae2a4bb5b89c63eb712b63878400d9a6a9d', class: "multiselect-actions" }, hasSelections && !this.disabled && (h("button", { key: 'a6beb75e3688f6b0329726e6a1016e94ebd5a1a3', type: "button", class: "multiselect-clear", onClick: this.handleClearAll, "aria-label": "Clear all", tabIndex: -1 }, h("svg", { key: '8f5fd2f3be9e94bac7b8c30384f10a3ba6d6272c', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: '241075a311ef66b150a2e3e566919cabb2054c00', d: "M4 4l8 8M12 4l-8 8" })))), h("span", { key: '780188efcf3e597d9b199ace46471d292e643a62', class: "multiselect-arrow" }, h("svg", { key: '3fc4b438b95525c8631fdf73dadad9f5ff5330e3', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: 'de1501fff8b39807f97f44994404a849eb71e745', d: "M4 6l4 4 4-4" }))))), this.searchable && this.open && (h("div", { key: 'c92d7e07f90fedc588a40da04ddef0940d8e2872', class: "multiselect-search", slot: "header" }, h("le-string-input", { key: 'a5425ef9d7cd8c1e13b895dc73d78f0e433431ad', mode: "default", inputRef: el => (this.inputEl = el), class: "search-input", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchInput })))), this.name &&
+            this.value.map(val => (h("input", { type: "hidden", name: this.name, value: val.toString(), key: val.toString() }))), atMaxSelections && (h("span", { key: 'b1d9b93267637d3d21dc3ad52bb3bbd99831f56f', class: "multiselect-status" }, "Maximum ", this.maxSelections, " selections"))));
+    }
+    static get watchers() { return {
+        "value": ["handleValueChange"],
+        "options": ["handleOptionsChange"],
+        "showSelectAll": ["handleShowSelectAllChange"]
+    }; }
+};
+LeMultiselect.style = leMultiselectCss;
+
+export { LeMultiselect as le_multiselect };
+//# sourceMappingURL=le-multiselect.entry.js.map

package/dist/esm/le-multiselect.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"le-multiselect.entry.js","sources":["src/components/le-multiselect/le-multiselect.css?tag=le-multiselect&encapsulation=shadow","src/components/le-multiselect/le-multiselect.tsx"],"sourcesContent":["/**\n * le-multiselect component styles\n *\n * CSS Custom Properties:\n * --le-multiselect-min-height\n * --le-multiselect-padding\n * --le-multiselect-font-size\n * --le-multiselect-border-radius\n * --le-multiselect-border-color\n * --le-multiselect-bg\n * --le-multiselect-color\n */\n\n:host {\n  display: inline-block;\n  min-width: 250px;\n\n  --le-multiselect-min-height: 0;\n  --le-multiselect-padding: var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-1) var(--le-spacing-2);\n  --le-multiselect-border-color: var(--le-color-primary, #3b82f6);\n}\n\n:host([disabled]) {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n/* Trigger wrapper */\n.multiselect-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.5rem;\n  width: 100%;\n  min-height: var(--le-multiselect-min-height);\n  padding: var(--le-multiselect-padding);\n  line-height: var(--le-line-height-tight);\n  background: var(--le-multiselect-bg, var(--le-color-surface, #fff));\n  border: 1px solid color-mix(in srgb, var(--le-multiselect-border-color) 33%, transparent);\n  border-radius: var(--le-multiselect-border-radius, 0.375rem);\n  cursor: pointer;\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n\n.multiselect-trigger:hover:not(.is-disabled),\n:host(:focus-within) .multiselect-trigger:not(.is-disabled) {\n  border-color: var(--le-multiselect-border-color);\n}\n\n:host(:focus-within) .multiselect-trigger {\n  outline: 2px solid var(--le-color-focus);\n  outline-offset: 2px;\n}\n:host([full-width]) {\n  width: 100%;\n}\n\n.multiselect-trigger.is-open {\n  border-color: var(--le-color-primary, #3b82f6);\n}\n\n.multiselect-trigger.is-disabled {\n  cursor: not-allowed;\n  background: var(--le-color-surface-disabled, #f9fafb);\n}\n\n/* Placeholder */\n.multiselect-placeholder {\n  color: color-mix(in srgb, var(--le-color-text-secondary) 66%, transparent);\n}\n\n/* Tags container */\n.multiselect-tags {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.25rem;\n  flex: 1;\n  min-width: 0;\n}\n\n/* Actions (clear + arrow) */\n.multiselect-actions {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n  flex-shrink: 0;\n}\n\n/* Clear button */\n.multiselect-clear {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  padding: 0;\n  background: transparent;\n  color: var(--le-color-primary, #3b82f6);\n  border: none;\n  border-radius: 0.25rem;\n  cursor: pointer;\n  opacity: 0.6;\n  transition: opacity 0.15s ease, background-color 0.15s ease;\n}\n\n.multiselect-clear:hover {\n  opacity: 1;\n  background: var(--le-color-surface-hover, #f3f4f6);\n}\n\n.multiselect-clear svg {\n  width: 0.875rem;\n  height: 0.875rem;\n}\n\n/* Arrow icon */\n.multiselect-arrow {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1rem;\n  color: var(--le-color-primary, #3b82f6);\n  transition: transform 0.2s ease;\n}\n\n.multiselect-arrow svg {\n  width: 1rem;\n  height: 1rem;\n}\n\n.multiselect-trigger.is-open .multiselect-arrow {\n  transform: rotate(180deg);\n}\n\n/* Search in dropdown */\n.search-input::part(container):focus-within {\n  outline: none !important;\n}\n.search-input {\n  --le-input-radius: var(--le-radius-md);\n}\n\n/* Status message */\n.multiselect-status {\n  display: block;\n  margin-top: 0.25rem;\n  font-size: 0.75rem;\n  color: var(--le-color-text-muted, #6b7280);\n}\n\n/* Size variants */\n:host([size='small']) .multiselect-trigger {\n  --le-multiselect-min-height: 2rem;\n  --le-multiselect-padding: 0.25rem 0.375rem;\n  --le-multiselect-font-size: 0.75rem;\n}\n\n:host([size='large']) .multiselect-trigger {\n  --le-multiselect-min-height: 3rem;\n  --le-multiselect-padding: 0.5rem 0.625rem;\n  --le-multiselect-font-size: 1rem;\n}\n","import {\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Method,\n  Element,\n  Watch,\n  h,\n} from '@stencil/core';\nimport {\n  LeOption,\n  LeOptionValue,\n  LeMultiOptionSelectDetail,\n  LeOptionSelectDetail,\n} from '../../types/options';\n\n/**\n * A multiselect component for selecting multiple options.\n *\n * Displays selected items as tags with optional search filtering.\n *\n * @cmsEditable true\n * @cmsCategory Form\n *\n * @example Basic multiselect\n * ```html\n * <le-multiselect\n *   placeholder=\"Select options...\"\n *   options='[{\"label\": \"Red\"}, {\"label\": \"Green\"}, {\"label\": \"Blue\"}]'\n * ></le-multiselect>\n * ```\n *\n * @example With max selections\n * ```html\n * <le-multiselect\n *   max-selections=\"3\"\n *   options='[{\"label\": \"Option 1\"}, {\"label\": \"Option 2\"}, {\"label\": \"Option 3\"}, {\"label\": \"Option 4\"}]'\n * ></le-multiselect>\n * ```\n *\n * @example With search\n * ```html\n * <le-multiselect\n *   searchable\n *   placeholder=\"Search and select...\"\n *   options='[{\"label\": \"Apple\"}, {\"label\": \"Banana\"}, {\"label\": \"Cherry\"}]'\n * ></le-multiselect>\n * ```\n */\n@Component({\n  tag: 'le-multiselect',\n  styleUrl: 'le-multiselect.css',\n  shadow: true,\n})\nexport class LeMultiselect {\n  @Element() el: HTMLElement;\n\n  /**\n   * The options to display in the dropdown.\n   */\n  @Prop() options: LeOption[] | string = [];\n\n  /**\n   * The currently selected values.\n   */\n  @Prop({ mutable: true }) value: LeOptionValue[] = [];\n\n  /**\n   * Placeholder text when no options are selected.\n   */\n  @Prop() placeholder: string = 'Select options...';\n\n  /**\n   * Whether the multiselect is disabled.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Whether selection is required.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Name attribute for form submission.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Whether the multiselect should take full width of its container.\n   */\n  @Prop({ reflect: true }) fullWidth: boolean = false;\n\n  /**\n   * Size variant of the multiselect.\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Maximum number of selections allowed.\n   */\n  @Prop() maxSelections?: number;\n\n  /**\n   * Labels for the \"Select All\" option.\n   */\n  @State() private selectAllLabel: string = 'Select All';\n  @State() private deselectAllLabel: string = 'Deselect All';\n\n  /**\n   * Whether to show a \"Select All\" option.\n   * Also accepts a string or array of strings to customize the label(s).\n   */\n  @Prop({ mutable: true }) showSelectAll: boolean | string | string[] = false;\n\n  /**\n   * Whether the input is searchable.\n   */\n  @Prop() searchable: boolean = false;\n\n  /**\n   * Text to show when no options match the search.\n   */\n  @Prop() emptyText: string = 'No results found';\n\n  /**\n   * Whether the dropdown is currently open.\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Emitted when the selected values change.\n   */\n  @Event() leChange: EventEmitter<LeMultiOptionSelectDetail>;\n\n  /**\n   * Emitted when the dropdown opens.\n   */\n  @Event() leOpen: EventEmitter<void>;\n\n  /**\n   * Emitted when the dropdown closes.\n   */\n  @Event() leClose: EventEmitter<void>;\n\n  @State() private selectedOptions: LeOption[] = [];\n  @State() private searchQuery: string = '';\n\n  private dropdownEl?: HTMLLeDropdownBaseElement;\n  private inputEl?: HTMLInputElement;\n\n  @Watch('value')\n  handleValueChange() {\n    this.updateSelectedOptions();\n  }\n\n  @Watch('options')\n  handleOptionsChange() {\n    this.updateSelectedOptions();\n  }\n\n  @Watch('showSelectAll')\n  handleShowSelectAllChange(newValue: boolean | string | string[]) {\n    if (typeof newValue !== 'boolean' && typeof newValue !== 'string') {\n      this.showSelectAll = false;\n    } else if (typeof newValue === 'boolean') {\n      this.showSelectAll = newValue;\n    } else if (Array.isArray(newValue)) {\n      this.showSelectAll = true;\n      this.selectAllLabel = newValue[0];\n      this.deselectAllLabel = newValue[1] || newValue[0];\n    } else if (typeof newValue === 'string') {\n      this.showSelectAll = true;\n      try {\n        const parsed = JSON.parse(newValue);\n        if (Array.isArray(parsed) && parsed.every(item => typeof item === 'string')) {\n          this.selectAllLabel = parsed[0];\n          this.deselectAllLabel = parsed[1] || parsed[0];\n        } else {\n          this.selectAllLabel = newValue;\n          this.deselectAllLabel = newValue;\n        }\n      } catch {\n        this.selectAllLabel = newValue;\n        this.deselectAllLabel = newValue;\n      }\n    }\n  }\n\n  componentWillLoad() {\n    this.updateSelectedOptions();\n    this.handleShowSelectAllChange(this.showSelectAll);\n  }\n\n  private get parsedOptions(): LeOption[] {\n    if (typeof this.options === 'string') {\n      try {\n        return JSON.parse(this.options);\n      } catch {\n        return [];\n      }\n    }\n    return this.options;\n  }\n\n  private get effectiveOptions(): LeOption[] {\n    let options = [...this.parsedOptions];\n\n    // Add \"Select All\" option if enabled\n    if (this.showSelectAll && options.length > 0) {\n      const allSelected =\n        this.selectedOptions.length === this.parsedOptions.filter(opt => !opt.disabled).length;\n      options = [\n        {\n          label: allSelected ? this.deselectAllLabel : this.selectAllLabel,\n          value: '__select_all__',\n          iconStart: allSelected ? '✕' : '⇣',\n        },\n        ...options,\n      ];\n    }\n\n    return options;\n  }\n\n  private updateSelectedOptions() {\n    const valueArray = Array.isArray(this.value) ? this.value : [];\n    this.selectedOptions = this.parsedOptions.filter(opt =>\n      valueArray.includes(opt.value ?? opt.label),\n    );\n  }\n\n  private filterOption = (option: LeOption, query: string): boolean => {\n    if (!query) return true;\n    // Always show \"Select All\" option\n    if (option.value === '__select_all__') return true;\n\n    const searchLower = query.toLowerCase();\n    return (\n      option.label.toLowerCase().includes(searchLower) ||\n      (option.description?.toLowerCase().includes(searchLower) ?? false)\n    );\n  };\n\n  private handleOptionSelect = (e: CustomEvent<LeOptionSelectDetail>) => {\n    const { value } = e.detail;\n\n    const enabledOptions = this.parsedOptions.filter(opt => !opt.disabled);\n    if (enabledOptions.length === 0) return;\n\n    // Handle \"Select All\" option\n    if (value === '__select_all__') {\n      if (this.selectedOptions.length === enabledOptions.length) {\n        // Deselect all\n        this.value = [];\n      } else {\n        // Select all (respect maxSelections)\n        const selectableOptions = this.maxSelections\n          ? enabledOptions.slice(0, this.maxSelections)\n          : enabledOptions;\n        this.value = selectableOptions.map(opt => opt.value ?? opt.label);\n      }\n      this.emitChange();\n      return;\n    }\n\n    const isSelected = this.value.includes(value);\n\n    if (isSelected) {\n      // Remove from selection\n      this.value = this.value.filter(v => v !== value);\n      this.selectedOptions = this.selectedOptions.filter(opt => (opt.value ?? opt.label) !== value);\n    } else {\n      // Add to selection (if not at max)\n      if (this.maxSelections && this.value.length >= this.maxSelections) {\n        return; // Don't add more\n      }\n      this.value = [...this.value, value];\n    }\n\n    this.emitChange();\n\n    // Clear search after szelection\n    this.searchQuery = '';\n  };\n\n  private emitChange() {\n    this.leChange.emit({\n      values: this.value,\n      options: this.selectedOptions,\n    });\n  }\n\n  private handleDropdownOpen = () => {\n    this.open = true;\n    this.leOpen.emit();\n\n    // Focus search input if searchable\n    if (this.searchable) {\n      setTimeout(() => {\n        this.inputEl?.focus();\n      }, 50);\n    }\n  };\n\n  private handleDropdownClose = () => {\n    this.open = false;\n    this.searchQuery = '';\n    this.leClose.emit();\n  };\n\n  private handleTriggerClick = () => {\n    if (!this.disabled) {\n      this.dropdownEl?.toggle();\n    }\n  };\n\n  private handleTriggerKeyDown = (e: KeyboardEvent) => {\n    if (this.disabled) return;\n\n    if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n      e.preventDefault();\n      this.dropdownEl?.show();\n    }\n  };\n\n  private handleTagDismiss = (option: LeOption, e: CustomEvent) => {\n    e.stopPropagation();\n    const value = option.value ?? option.label;\n    this.value = this.value.filter(v => v !== value);\n    this.selectedOptions = this.selectedOptions.filter(opt => opt !== option);\n    this.emitChange();\n  };\n\n  private handleSearchInput = (e: Event) => {\n    const target = e.target as HTMLInputElement;\n    this.searchQuery = target.value;\n  };\n\n  private handleClearAll = (e: MouseEvent) => {\n    e.stopPropagation();\n    this.value = [];\n    this.selectedOptions = [];\n    this.emitChange();\n  };\n\n  /**\n   * Opens the dropdown.\n   */\n  @Method()\n  async showDropdown() {\n    await this.dropdownEl?.show();\n  }\n\n  /**\n   * Closes the dropdown.\n   */\n  @Method()\n  async hideDropdown() {\n    await this.dropdownEl?.hide();\n  }\n\n  /**\n   * Clears all selections.\n   */\n  @Method()\n  async clearSelection() {\n    this.value = [];\n    this.selectedOptions = [];\n    this.emitChange();\n  }\n\n  private renderTags() {\n    if (this.selectedOptions.length === 0) {\n      return <span class=\"multiselect-placeholder\">{this.placeholder}</span>;\n    }\n\n    return (\n      <div class=\"multiselect-tags\">\n        {this.selectedOptions.map(option => (\n          <le-tag\n            key={option.value ?? option.label}\n            label={option.label}\n            icon={option.iconStart}\n            size={this.size === 'large' ? 'medium' : 'small'}\n            dismissible\n            disabled={this.disabled}\n            onLeDismiss={e => this.handleTagDismiss(option, e)}\n            mode=\"default\"\n          />\n        ))}\n      </div>\n    );\n  }\n\n  render() {\n    const hasSelections = this.selectedOptions.length > 0;\n    const atMaxSelections = this.maxSelections && this.value.length >= this.maxSelections;\n\n    return (\n      <le-component component=\"le-multiselect\">\n        <le-dropdown-base\n          ref={el => (this.dropdownEl = el)}\n          options={this.effectiveOptions}\n          value={this.value}\n          multiple={true}\n          disabled={this.disabled}\n          filterFn={this.searchable ? this.filterOption : undefined}\n          filterQuery={this.searchQuery}\n          emptyText={this.emptyText}\n          showCheckboxes={true}\n          fullWidth={this.fullWidth}\n          onLeOptionSelect={this.handleOptionSelect}\n          onLeDropdownOpen={this.handleDropdownOpen}\n          onLeDropdownClose={this.handleDropdownClose}\n        >\n          <div\n            slot=\"trigger\"\n            class={{\n              'multiselect-trigger': true,\n              'has-selections': hasSelections,\n              'is-open': this.open,\n              'is-disabled': this.disabled,\n            }}\n            tabIndex={this.disabled ? -1 : 0}\n            role=\"combobox\"\n            aria-haspopup=\"listbox\"\n            aria-expanded={this.open ? 'true' : 'false'}\n            aria-disabled={this.disabled ? 'true' : undefined}\n            onClick={this.handleTriggerClick}\n            onKeyDown={this.handleTriggerKeyDown}\n          >\n            {this.renderTags()}\n\n            <div class=\"multiselect-actions\">\n              {hasSelections && !this.disabled && (\n                <button\n                  type=\"button\"\n                  class=\"multiselect-clear\"\n                  onClick={this.handleClearAll}\n                  aria-label=\"Clear all\"\n                  tabIndex={-1}\n                >\n                  <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                    <path d=\"M4 4l8 8M12 4l-8 8\" />\n                  </svg>\n                </button>\n              )}\n              <span class=\"multiselect-arrow\">\n                <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                  <path d=\"M4 6l4 4 4-4\" />\n                </svg>\n              </span>\n            </div>\n          </div>\n\n          {/* Search input shown in dropdown header */}\n          {this.searchable && this.open && (\n            <div class=\"multiselect-search\" slot=\"header\">\n              <le-string-input\n                mode=\"default\"\n                inputRef={el => (this.inputEl = el)}\n                class=\"search-input\"\n                placeholder=\"Search...\"\n                value={this.searchQuery}\n                onInput={this.handleSearchInput}\n              />\n            </div>\n          )}\n        </le-dropdown-base>\n\n        {/* Hidden inputs for form submission */}\n        {this.name &&\n          this.value.map(val => (\n            <input type=\"hidden\" name={this.name} value={val.toString()} key={val.toString()} />\n          ))}\n\n        {/* Status message */}\n        {atMaxSelections && (\n          <span class=\"multiselect-status\">Maximum {this.maxSelections} selections</span>\n        )}\n      </le-component>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/{le-kit → esm}/le-number-input.entry.js

@@ -1,13 +1,13 @@
-import { r as registerInstance, m as createEvent, j as getElement, k as h } from './index-CAY3Hk_i.js';
-import { c as classnames } from './utils-cwSNy7ZS.js';
+import { r as registerInstance, d as createEvent, c as getElement, h } from './index-DzgCnDLJ.js';
+import { c as classnames } from './utils-Dp5xFMCl.js';
 
 const leNumberInputCss = ":host{display:block;--le-input-bg:var(--le-color-surface, #ffffff);--le-input-color:var(--le-color-text-primary, #333333);--le-input-border:var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);--le-input-radius:var(--le-radius-sm, 4px);--le-input-padding:2px 6px;--le-input-height:1.5rem;--le-input-label-color:var(--le-color-text-primary, #333333);--le-input-desc-color:var(--le-color-text-secondary, #666666);--le-input-placeholder-color:#999999;--le-input-border-error:2px solid var(--le-color-danger, #dc3545);--le-input-error-color:var(--le-color-danger, #dc3545)}.le-input-wrapper{display:flex;flex-direction:column;gap:2px}.le-input-label{display:block;font-size:0.9em;font-weight:500;color:var(--le-input-label-color);margin-bottom:2px}.le-input-container{position:relative;display:flex;align-items:center;background:var(--le-input-bg);border:var(--le-input-border);border-radius:var(--le-input-radius);transition:border-color 0.2s}.le-input-container:focus-within{outline:2px solid var(--le-color-focus);outline-offset:2px}.le-input-container.has-error{border:var(--le-input-border-error)}:host([disabled]) .le-input-container{opacity:0.6;background-color:rgba(0,0,0,0.05);cursor:not-allowed}input{flex:1;width:100%;height:calc(var(--le-input-height) - 2px);padding:var(--le-input-padding);border:none;background:transparent;color:var(--le-input-color);font-family:inherit;font-size:inherit;outline:none;text-align:right;-moz-appearance:textfield;}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input::placeholder{color:var(--le-input-placeholder-color)}.icon-start,.icon-end{display:flex;align-items:center;justify-content:center;padding:0 8px;color:var(--le-input-desc-color)}.le-input-controls{display:flex;flex-direction:column;border-left:1px solid var(--le-color-border, #cccccc);height:100%}.le-input-control-btn{--le-button-border-radius:0;--le-button-padding-x:0;--le-button-padding-y:0;--le-button-small-font-size:9.5px;--le-button-small-padding:0 0.2rem;--le-button-icon-aspect-ratio:2;display:flex;align-items:center;justify-content:center;height:50%;cursor:pointer;background:none;border:none;color:var(--le-input-desc-color);font-size:10px;line-height:1}.le-input-control-btn:hover{background-color:rgba(0,0,0,0.05);color:var(--le-color-primary, #007bff)}.le-input-control-btn:active{background-color:rgba(0,0,0,0.1)}.le-input-description{font-size:0.85em;color:var(--le-input-desc-color);margin-top:2px}.le-input-error{font-size:0.85em;color:var(--le-input-error-color);margin-top:2px}";
 
 const LeNumberInput = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.leChange = createEvent(this, "leChange", 7);
-        this.leInput = createEvent(this, "leInput", 7);
+        this.leChange = createEvent(this, "leChange");
+        this.leInput = createEvent(this, "leInput");
     }
     get el() { return getElement(this); }
     /**
@@ -188,7 +188,7 @@ const LeNumberInput = class {
         this.emitChange();
     };
     render() {
-        return (h("le-component", { key: '6af8d1fd4c89597f7da3be391cabccbb9d1f9800', component: "le-number-input", hostClass: classnames({ 'disabled': this.disabled }) }, h("div", { key: 'e4e0ad02f89b2eb8dd7649d2f2e70bc821cb2774', class: "le-input-wrapper" }, this.label && (h("label", { key: '30ad120d5571018ea9891340b5406f6939a1fe0e', class: "le-input-label", htmlFor: this.name }, this.label)), h("div", { key: '27b835ad1559a1ea4366c4b7c2b31d412e8b8ef7', class: classnames('le-input-container', { 'has-error': !this.isValid }) }, this.iconStart && (h("span", { key: '0164cbb985b900b4b3136061a2609987a2c06e9f', class: "icon-start" }, this.iconStart)), h("input", { key: '6d68b764f45d61b7dd4ffe435bd9e9da04c4d87a', id: this.name, type: "number", name: this.name, placeholder: this.placeholder, min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onKeyDown: this.handleKeyDown, onWheel: this.handleWheel }), this.showSpinners && (h("div", { key: '7ed04341c0c27a7d37afd4baf9698ea7776702f6', class: "le-input-controls" }, h("le-button", { key: '80c96f7cbee40efd2b79f33e8401a13f187092a6', mode: "default", variant: "clear", size: "small", "icon-only": true, class: "le-input-control-btn", onClick: this.increment, disabled: this.disabled || this.readonly || (this.max !== undefined && this.value >= this.max), tabindex: "-1" }, h("span", { key: 'd56b463073ce8174c668138179f1bbc16c700d9f', slot: "icon-only" }, "\u2191")), h("le-button", { key: '74e70e65d6668cc1cee7abfaf464a60a29efa3f9', mode: "default", variant: "clear", size: "small", "icon-only": true, class: "le-input-control-btn", onClick: this.decrement, disabled: this.disabled || this.readonly || (this.min !== undefined && this.value <= this.min), tabindex: "-1" }, h("span", { key: 'e2330cdf9f431b2c9f0953e42f71e897879d10fe', slot: "icon-only" }, "\u2193"))))), !this.isValid && h("div", { key: 'ba9bb8af8c4814b4316c1f0947c50a99fd24634c', class: "le-input-error" }, this.validationMessage), h("div", { key: '30e43ac088f995fe24ab47678ca70fe771b6f1ab', class: "le-input-description" }, h("le-slot", { key: '94f4bd21e32595470781eb6b004c9acbee72b81a', name: "description", type: "text", tag: "p", label: "Description" }, h("slot", { key: 'def94a79248d1887c5416ff95b2c625df85c68d0', name: "description" }))))));
+        return (h("le-component", { key: '7d39afd1052ccef592917d7495e18599f11d3406', component: "le-number-input", hostClass: classnames({ 'disabled': this.disabled }) }, h("div", { key: '1af0bdff2099c3bba4755cfe27fbee215ad2d047', class: "le-input-wrapper" }, this.label && (h("label", { key: 'c227db3239ae5a539c945447b44e021915f6d9e8', class: "le-input-label", htmlFor: this.name }, this.label)), h("div", { key: '4cfea6fab05a1af81dd560d81e79c3a868828605', class: classnames('le-input-container', { 'has-error': !this.isValid }) }, this.iconStart && (h("span", { key: 'bd42857961f70a49892398cd508ef0f53c4b6c70', class: "icon-start" }, this.iconStart)), h("input", { key: '53bc332a0a9f7119eb15b6cd73edeca040a8c868', id: this.name, type: "number", name: this.name, placeholder: this.placeholder, min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onKeyDown: this.handleKeyDown, onWheel: this.handleWheel }), this.showSpinners && (h("div", { key: 'f6d1ff990c38a45f09ad764523d46e7b4c78262f', class: "le-input-controls" }, h("le-button", { key: '2895f758ead72dae3699de4d5cd8e8fac4a36f9d', mode: "default", variant: "clear", size: "small", "icon-only": true, class: "le-input-control-btn", onClick: this.increment, disabled: this.disabled || this.readonly || (this.max !== undefined && this.value >= this.max), tabindex: "-1" }, h("span", { key: '56e1186d12cd13ef1867eb1ab63af58c89b45429', slot: "icon-only" }, "\u2191")), h("le-button", { key: '52511872cdd166da5ef5237db8af25722b639eb2', mode: "default", variant: "clear", size: "small", "icon-only": true, class: "le-input-control-btn", onClick: this.decrement, disabled: this.disabled || this.readonly || (this.min !== undefined && this.value <= this.min), tabindex: "-1" }, h("span", { key: '867153b5fde0c70ce426590b4ae3e8bedf53c29a', slot: "icon-only" }, "\u2193"))))), !this.isValid && h("div", { key: '5d7e522754e64fe2227485f637907977fb60ca6d', class: "le-input-error" }, this.validationMessage), h("div", { key: '7f175e902a0fdc4f1d2fe18832d25fe58b9f988d', class: "le-input-description" }, h("le-slot", { key: '32b9cfaa207de01d100f3f6542a6975117b1d26f', name: "description", type: "text", tag: "p", label: "Description" }, h("slot", { key: '2e56d9ce860162e431afde3d9df8d107f73c1343', name: "description" }))))));
     }
     static get watchers() { return {
         "value": ["valueChanged"]
@@ -197,4 +197,4 @@ const LeNumberInput = class {
 LeNumberInput.style = leNumberInputCss;
 
 export { LeNumberInput as le_number_input };
-//# sourceMappingURL=le-number-input.entry.esm.js.map
+//# sourceMappingURL=le-number-input.entry.js.map

package/dist/esm/le-number-input.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"le-number-input.entry.js","sources":["src/components/le-number-input/le-number-input.css?tag=le-number-input&encapsulation=shadow","src/components/le-number-input/le-number-input.tsx"],"sourcesContent":[":host {\n  display: block;\n  --le-input-bg: var(--le-color-surface, #ffffff);\n  --le-input-color: var(--le-color-text-primary, #333333);\n  --le-input-border: var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);\n  --le-input-radius: var(--le-radius-sm, 4px);\n  --le-input-padding: 2px 6px;\n  --le-input-height: 1.5rem;\n  --le-input-label-color: var(--le-color-text-primary, #333333);\n  --le-input-desc-color: var(--le-color-text-secondary, #666666);\n  --le-input-placeholder-color: #999999;\n  --le-input-border-error: 2px solid var(--le-color-danger, #dc3545);\n  --le-input-error-color: var(--le-color-danger, #dc3545);\n}\n\n.le-input-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.le-input-label {\n  display: block;\n  font-size: 0.9em;\n  font-weight: 500;\n  color: var(--le-input-label-color);\n  margin-bottom: 2px;\n}\n\n.le-input-container {\n  position: relative;\n  display: flex;\n  align-items: center;\n  background: var(--le-input-bg);\n  border: var(--le-input-border);\n  border-radius: var(--le-input-radius);\n  transition: border-color 0.2s;\n}\n\n.le-input-container:focus-within {\n  outline: 2px solid var(--le-color-focus);\n  outline-offset: 2px;\n}\n\n.le-input-container.has-error {\n  border: var(--le-input-border-error);\n}\n\n:host([disabled]) .le-input-container {\n  opacity: 0.6;\n  background-color: rgba(0,0,0,0.05);\n  cursor: not-allowed;\n}\n\ninput {\n  flex: 1;\n  width: 100%;\n  height: calc(var(--le-input-height) - 2px);\n  padding: var(--le-input-padding);\n  border: none;\n  background: transparent;\n  color: var(--le-input-color);\n  font-family: inherit;\n  font-size: inherit;\n  outline: none;\n  text-align: right; /* Aligned to end */\n  -moz-appearance: textfield; /* Remove default spinners in Firefox */\n}\n\n/* Remove default spinners in Chrome/Safari/Edge */\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\ninput::placeholder {\n  color: var(--le-input-placeholder-color);\n}\n\n.icon-start, .icon-end {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 8px;\n  color: var(--le-input-desc-color);\n}\n\n.le-input-controls {\n  display: flex;\n  flex-direction: column;\n  border-left: 1px solid var(--le-color-border, #cccccc);\n  height: 100%;\n}\n\n.le-input-control-btn {\n  --le-button-border-radius: 0;\n  --le-button-padding-x: 0;\n  --le-button-padding-y: 0;\n  --le-button-small-font-size: 9.5px;\n  --le-button-small-padding: 0 0.2rem;\n  --le-button-icon-aspect-ratio: 2;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 50%;\n  cursor: pointer;\n  background: none;\n  border: none;\n  color: var(--le-input-desc-color);\n  font-size: 10px;\n  line-height: 1;\n}\n\n.le-input-control-btn:hover {\n  background-color: rgba(0,0,0,0.05);\n  color: var(--le-color-primary, #007bff);\n}\n\n.le-input-control-btn:active {\n  background-color: rgba(0,0,0,0.1);\n}\n\n.le-input-description {\n  font-size: 0.85em;\n  color: var(--le-input-desc-color);\n  margin-top: 2px;\n}\n\n.le-input-error {\n  font-size: 0.85em;\n  color: var(--le-input-error-color);\n  margin-top: 2px;\n}\n","import { Component, Prop, Event, EventEmitter, State, h, Element, Watch } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A number input component with validation, keyboard controls, and custom spinners.\n *\n * @slot - The label text for the input\n * @slot description - Additional description text displayed below the input\n * @slot icon-start - Icon to display at the start of the input\n *\n * @cssprop --le-input-bg - Input background color\n * @cssprop --le-input-color - Input text color\n * @cssprop --le-input-border - Input border style\n * @cssprop --le-input-border-focus - Input border style when focused\n * @cssprop --le-input-border-error - Input border style when invalid\n * @cssprop --le-input-radius - Input border radius\n * @cssprop --le-input-padding - Input padding\n */\n@Component({\n  tag: 'le-number-input',\n  styleUrl: 'le-number-input.css',\n  shadow: true,\n})\nexport class LeNumberInput {\n  @Element() el: HTMLElement;\n\n  /**\n   * The value of the input\n   */\n  @Prop({ mutable: true, reflect: true }) value: number;\n\n  /**\n   * The name of the input\n   */\n  @Prop() name: string;\n\n  /**\n   * Label for the input\n   */\n  @Prop() label: string;\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * Minimum allowed value\n   */\n  @Prop() min?: number;\n\n  /**\n   * Maximum allowed value\n   */\n  @Prop() max?: number;\n\n  /**\n   * Step value for increment/decrement\n   */\n  @Prop() step: number = 1;\n\n  /**\n   * Whether the input is required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Whether the input is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the input is read-only\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * Icon for the start icon\n   */\n  @Prop() iconStart?: string;\n\n  /**\n   * Whether to show the spinner controls\n   */\n  @Prop() showSpinners: boolean = true;\n\n  /**\n   * External ID for linking with external systems\n   */\n  @Prop() externalId: string;\n\n  /**\n   * Internal validation state\n   */\n  @State() private isValid: boolean = true;\n  @State() private validationMessage: string = '';\n\n  /**\n   * Emitted when the value changes (on blur or Enter)\n   */\n  @Event() leChange: EventEmitter<{ value: number; name: string; externalId: string; isValid: boolean }>;\n\n  /**\n   * Emitted when the input value changes (on keystroke/spin)\n   */\n  @Event() leInput: EventEmitter<{ value: number; name: string; externalId: string; isValid: boolean }>;\n\n  @Watch('value')\n  valueChanged() {\n    this.validate();\n  }\n\n  private validate() {\n    if (this.required && (this.value === undefined || this.value === null || isNaN(this.value))) {\n      this.isValid = false;\n      this.validationMessage = 'This field is required';\n      return;\n    }\n\n    if (this.value !== undefined && this.value !== null && !isNaN(this.value)) {\n      if (this.min !== undefined && this.value < this.min) {\n        this.isValid = false;\n        this.validationMessage = `Value must be at least ${this.min}`;\n        return;\n      }\n      if (this.max !== undefined && this.value > this.max) {\n        this.isValid = false;\n        this.validationMessage = `Value must be at most ${this.max}`;\n        return;\n      }\n    }\n\n    this.isValid = true;\n    this.validationMessage = '';\n  }\n\n  private emitChange() {\n    this.leChange.emit({\n      value: this.value,\n      name: this.name,\n      externalId: this.externalId,\n      isValid: this.isValid\n    });\n  }\n\n  private emitInput() {\n    this.leInput.emit({\n      value: this.value,\n      name: this.name,\n      externalId: this.externalId,\n      isValid: this.isValid\n    });\n  }\n\n  private updateValue(newValue: number) {\n    if (this.disabled || this.readonly) return;\n    \n    // Round to avoid floating point errors\n    const precision = this.step.toString().split('.')[1]?.length || 0;\n    const rounded = parseFloat(newValue.toFixed(precision));\n    \n    this.value = rounded;\n    this.validate();\n    this.emitInput();\n  }\n\n  private handleInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement;\n    const val = parseFloat(input.value);\n    \n    if (input.value === '') {\n      this.value = undefined;\n    } else if (!isNaN(val)) {\n      this.value = val;\n    }\n    \n    this.validate();\n    this.emitInput();\n  };\n\n  private handleChange = () => {\n    this.validate();\n    this.emitChange();\n  };\n\n  private handleKeyDown = (ev: KeyboardEvent) => {\n    if (this.disabled || this.readonly) return;\n\n    let multiplier = 1;\n    if (ev.shiftKey) multiplier = 10;\n    if (ev.altKey) multiplier = 0.1;\n\n    const current = this.value || 0;\n\n    if (ev.key === 'ArrowUp') {\n      ev.preventDefault();\n      this.updateValue(current + (this.step * multiplier));\n    } else if (ev.key === 'ArrowDown') {\n      ev.preventDefault();\n      this.updateValue(current - (this.step * multiplier));\n    }\n  };\n\n  private handleWheel = (ev: WheelEvent) => {\n    if (this.disabled || this.readonly) return;\n    // Only handle if input is focused to prevent accidental scrolling\n    if (document.activeElement !== ev.target) return;\n\n    ev.preventDefault();\n    const current = this.value || 0;\n    \n    if (ev.deltaY < 0) {\n      this.updateValue(current + this.step);\n    } else {\n      this.updateValue(current - this.step);\n    }\n  };\n\n  private increment = (ev: Event) => {\n    ev.preventDefault(); // Prevent focus loss\n    const current = this.value || 0;\n    this.updateValue(current + this.step);\n    // Trigger change event for buttons as they are \"final\" actions usually\n    this.emitChange();\n  };\n\n  private decrement = (ev: Event) => {\n    ev.preventDefault();\n    const current = this.value || 0;\n    this.updateValue(current - this.step);\n    this.emitChange();\n  };\n\n  render() {\n    return (\n      <le-component component=\"le-number-input\" hostClass={classnames({ 'disabled': this.disabled })}>\n        <div class=\"le-input-wrapper\">\n          {this.label && (\n            <label class=\"le-input-label\" htmlFor={this.name}>{this.label}</label>\n          )}\n          \n          <div class={classnames('le-input-container', { 'has-error': !this.isValid })}>\n            {this.iconStart && (\n              <span class=\"icon-start\">{this.iconStart}</span>\n            )}\n            \n            <input\n              id={this.name}\n              type=\"number\"\n              name={this.name}\n              placeholder={this.placeholder}\n              min={this.min}\n              max={this.max}\n              step={this.step}\n              value={this.value}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              required={this.required}\n              onInput={this.handleInput}\n              onChange={this.handleChange}\n              onKeyDown={this.handleKeyDown}\n              onWheel={this.handleWheel}\n            />\n            \n            {this.showSpinners && (\n              <div class=\"le-input-controls\">\n                <le-button\n                  mode=\"default\"\n                  variant=\"clear\" \n                  size=\"small\"\n                  icon-only\n                  class=\"le-input-control-btn\" \n                  onClick={this.increment}\n                  disabled={this.disabled || this.readonly || (this.max !== undefined && this.value >= this.max)}\n                  tabindex=\"-1\"\n                >\n                  <span slot=\"icon-only\">↑</span>\n                </le-button>\n                <le-button\n                  mode=\"default\"\n                  variant=\"clear\" \n                  size=\"small\" \n                  icon-only \n                  class=\"le-input-control-btn\" \n                  onClick={this.decrement}\n                  disabled={this.disabled || this.readonly || (this.min !== undefined && this.value <= this.min)}\n                  tabindex=\"-1\"\n                >\n                  <span slot=\"icon-only\">↓</span>\n                </le-button>\n              </div>\n            )}\n          </div>\n\n          {!this.isValid && <div class=\"le-input-error\">{this.validationMessage}</div>}\n\n          <div class=\"le-input-description\">\n            <le-slot name=\"description\" type=\"text\" tag=\"p\" label=\"Description\">\n              <slot name=\"description\"></slot>\n            </le-slot>\n          </div>\n        </div>\n      </le-component>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,gBAAgB,GAAG,shFAAshF;;MCuBliF,aAAa,GAAA,MAAA;;;;;;;AAGxB;;AAEG;AACqC,IAAA,KAAK;AAE7C;;AAEG;AACK,IAAA,IAAI;AAEZ;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;AACK,IAAA,WAAW;AAEnB;;AAEG;AACK,IAAA,GAAG;AAEX;;AAEG;AACK,IAAA,GAAG;AAEX;;AAEG;IACK,IAAI,GAAW,CAAC;AAExB;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACK,IAAA,SAAS;AAEjB;;AAEG;IACK,YAAY,GAAY,IAAI;AAEpC;;AAEG;AACK,IAAA,UAAU;AAElB;;AAEG;IACc,OAAO,GAAY,IAAI;IACvB,iBAAiB,GAAW,EAAE;AAE/C;;AAEG;AACM,IAAA,QAAQ;AAEjB;;AAEG;AACM,IAAA,OAAO;IAGhB,YAAY,GAAA;QACV,IAAI,CAAC,QAAQ,EAAE;;IAGT,QAAQ,GAAA;QACd,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,IAAI,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE;AAC3F,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK;AACpB,YAAA,IAAI,CAAC,iBAAiB,GAAG,wBAAwB;YACjD;;QAGF,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;AACzE,YAAA,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE;AACnD,gBAAA,IAAI,CAAC,OAAO,GAAG,KAAK;gBACpB,IAAI,CAAC,iBAAiB,GAAG,CAAA,uBAAA,EAA0B,IAAI,CAAC,GAAG,EAAE;gBAC7D;;AAEF,YAAA,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE;AACnD,gBAAA,IAAI,CAAC,OAAO,GAAG,KAAK;gBACpB,IAAI,CAAC,iBAAiB,GAAG,CAAA,sBAAA,EAAyB,IAAI,CAAC,GAAG,EAAE;gBAC5D;;;AAIJ,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI;AACnB,QAAA,IAAI,CAAC,iBAAiB,GAAG,EAAE;;IAGrB,UAAU,GAAA;AAChB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;YACjB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,OAAO,EAAE,IAAI,CAAC;AACf,SAAA,CAAC;;IAGI,SAAS,GAAA;AACf,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;YAChB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,OAAO,EAAE,IAAI,CAAC;AACf,SAAA,CAAC;;AAGI,IAAA,WAAW,CAAC,QAAgB,EAAA;AAClC,QAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAAE;;QAGpC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,IAAI,CAAC;QACjE,MAAM,OAAO,GAAG,UAAU,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;AAEvD,QAAA,IAAI,CAAC,KAAK,GAAG,OAAO;QACpB,IAAI,CAAC,QAAQ,EAAE;QACf,IAAI,CAAC,SAAS,EAAE;;AAGV,IAAA,WAAW,GAAG,CAAC,EAAS,KAAI;AAClC,QAAA,MAAM,KAAK,GAAG,EAAE,CAAC,MAA0B;QAC3C,MAAM,GAAG,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC;AAEnC,QAAA,IAAI,KAAK,CAAC,KAAK,KAAK,EAAE,EAAE;AACtB,YAAA,IAAI,CAAC,KAAK,GAAG,SAAS;;AACjB,aAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;AACtB,YAAA,IAAI,CAAC,KAAK,GAAG,GAAG;;QAGlB,IAAI,CAAC,QAAQ,EAAE;QACf,IAAI,CAAC,SAAS,EAAE;AAClB,KAAC;IAEO,YAAY,GAAG,MAAK;QAC1B,IAAI,CAAC,QAAQ,EAAE;QACf,IAAI,CAAC,UAAU,EAAE;AACnB,KAAC;AAEO,IAAA,aAAa,GAAG,CAAC,EAAiB,KAAI;AAC5C,QAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAAE;QAEpC,IAAI,UAAU,GAAG,CAAC;QAClB,IAAI,EAAE,CAAC,QAAQ;YAAE,UAAU,GAAG,EAAE;QAChC,IAAI,EAAE,CAAC,MAAM;YAAE,UAAU,GAAG,GAAG;AAE/B,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;AAE/B,QAAA,IAAI,EAAE,CAAC,GAAG,KAAK,SAAS,EAAE;YACxB,EAAE,CAAC,cAAc,EAAE;AACnB,YAAA,IAAI,CAAC,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,GAAG,UAAU,CAAC,CAAC;;AAC/C,aAAA,IAAI,EAAE,CAAC,GAAG,KAAK,WAAW,EAAE;YACjC,EAAE,CAAC,cAAc,EAAE;AACnB,YAAA,IAAI,CAAC,WAAW,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,GAAG,UAAU,CAAC,CAAC;;AAExD,KAAC;AAEO,IAAA,WAAW,GAAG,CAAC,EAAc,KAAI;AACvC,QAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAAE;;AAEpC,QAAA,IAAI,QAAQ,CAAC,aAAa,KAAK,EAAE,CAAC,MAAM;YAAE;QAE1C,EAAE,CAAC,cAAc,EAAE;AACnB,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;AAE/B,QAAA,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,EAAE;YACjB,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;;aAChC;YACL,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;;AAEzC,KAAC;AAEO,IAAA,SAAS,GAAG,CAAC,EAAS,KAAI;AAChC,QAAA,EAAE,CAAC,cAAc,EAAE,CAAC;AACpB,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;QAC/B,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;;QAErC,IAAI,CAAC,UAAU,EAAE;AACnB,KAAC;AAEO,IAAA,SAAS,GAAG,CAAC,EAAS,KAAI;QAChC,EAAE,CAAC,cAAc,EAAE;AACnB,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;QAC/B,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;QACrC,IAAI,CAAC,UAAU,EAAE;AACnB,KAAC;IAED,MAAM,GAAA;QACJ,QACE,CAAc,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,SAAS,EAAC,iBAAiB,EAAC,SAAS,EAAE,UAAU,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAA,EAC5F,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC1B,IAAI,CAAC,KAAK,KACT,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAA,EAAG,IAAI,CAAC,KAAK,CAAS,CACvE,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,UAAU,CAAC,oBAAoB,EAAE,EAAE,WAAW,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,EAAA,EACzE,IAAI,CAAC,SAAS,KACb,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAE,EAAA,IAAI,CAAC,SAAS,CAAQ,CACjD,EAED,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,IAAI,CAAC,IAAI,EACb,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,CAAA,EAED,IAAI,CAAC,YAAY,KAChB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC5B,CACE,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EACd,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,OAAO,qBAEZ,KAAK,EAAC,sBAAsB,EAC5B,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,GAAG,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,CAAC,EAC9F,QAAQ,EAAC,IAAI,EAAA,EAEb,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,WAAW,EAAA,EAAA,QAAA,CAAS,CACrB,EACZ,CACE,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EACd,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,OAAO,qBAEZ,KAAK,EAAC,sBAAsB,EAC5B,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,GAAG,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,CAAC,EAC9F,QAAQ,EAAC,IAAI,EAAA,EAEb,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,WAAW,aAAS,CACrB,CACR,CACP,CACG,EAEL,CAAC,IAAI,CAAC,OAAO,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAE,EAAA,IAAI,CAAC,iBAAiB,CAAO,EAE5E,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,EAAC,GAAG,EAAC,KAAK,EAAC,aAAa,EAAA,EACjE,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EAAA,CAAQ,CACxB,CACN,CACF,CACO;;;;;;;;;;"}

package/dist/{core/esm → esm}/le-round-progress.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, j as getElement, k as h } from './index-SKsXnjWI.js';
+import { r as registerInstance, c as getElement, h } from './index-DzgCnDLJ.js';
 
 const leRoundProgressCss = ".round-progress--container{position:relative}.round-progress{position:absolute;top:0;left:0;right:0;bottom:0;display:block}.round-progress--progress{filter:drop-shadow(var(--progress-shadow))}.round-progress--circle{fill:none;stroke:var(--progress-color, #999);stroke-width:var(--progress-width, 4);stroke-linecap:var(--progress-linecap, round);animation:progress--circle 0.5s ease-out forwards;transition:stroke-dasharray 0.5s ease-out}@keyframes progress--circle{0%{stroke-dasharray:0 1000}}.round-progress--path{fill:none;stroke-linecap:round}";
 
@@ -90,7 +90,7 @@ const LeRoundProgress = class {
         return (h("svg", { viewBox: this.getViewBox(), class: "round-progress" }, paths));
     }
     render() {
-        return (h("div", { key: 'de00fb6044bc7499c6af118195ff8586acb00c17', class: "round-progress--container" }, this.getPaths(), h("svg", { key: 'c6750092889a484c92902c25e91ab902d9be2f8a', viewBox: this.getViewBox(), class: "round-progress round-progress--progress" }, h("path", { key: '7d6ed780e2b69708b1bc067876dce45c7c1427db', class: "round-progress--circle", "stroke-dasharray": this.getStrokeDashArray(), d: this.getPath() })), h("slot", { key: '66b2c27cdddb1454b123cd146e78220f99683e6f' })));
+        return (h("div", { key: '1dfe2147b5183f45f2e95e31d55228841de541d3', class: "round-progress--container" }, this.getPaths(), h("svg", { key: 'e16d774ff030122547b453ebd69d0bd01e916a25', viewBox: this.getViewBox(), class: "round-progress round-progress--progress" }, h("path", { key: 'd3db84e88a6e879f5a06b7592cdb234de9c0fdf1', class: "round-progress--circle", "stroke-dasharray": this.getStrokeDashArray(), d: this.getPath() })), h("slot", { key: '5cbe02ff0bc27a432e55f8331cfad00f2c404ded' })));
     }
     static get watchers() { return {
         "value": ["updateValue"],

package/dist/esm/le-round-progress.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"le-round-progress.entry.js","sources":["src/components/le-round-progress/le-round-progress.css?tag=le-round-progress&encapsulation=shadow","src/components/le-round-progress/le-round-progress.tsx"],"sourcesContent":[".round-progress--container {\n  position: relative;\n}\n\n.round-progress {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: block;\n}\n\n.round-progress--progress {\n  filter: drop-shadow(var(--progress-shadow));\n}\n\n.round-progress--circle {\n  fill: none;\n  stroke: var(--progress-color, #999);\n  stroke-width: var(--progress-width, 4);\n  stroke-linecap: var(--progress-linecap, round);\n  animation: progress--circle 0.5s ease-out forwards;\n  transition: stroke-dasharray 0.5s ease-out;\n}\n\n@keyframes progress--circle {\n  0% { stroke-dasharray: 0 1000; }\n}\n\n.round-progress--path {\n  fill: none;\n  stroke-linecap: round;\n}\n","import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'le-round-progress',\n  styleUrl: 'le-round-progress.css',\n  shadow: true,\n})\nexport class LeRoundProgress {\n  // host element\n  @Element() el: HTMLElement;\n\n  // progress value coming from an attribute\n  @Prop() value: number = 0;\n  @Watch('value')\n  updateValue(newValue: string) {\n    this.value = parseFloat(newValue);\n  }\n\n  // padding value coming from an attribute\n  @Prop() padding: number = 0;\n  @Watch('padding')\n  updatePadding(newValue: string) {\n    this.padding = parseFloat(newValue);\n    this.calcParams();\n  }\n\n  // the progress backgrounds can be as many as needed\n  // but it should be JSON format: double quotes and strict commas\n  @Prop() paths: string;\n  @Watch('paths')\n  updateProgressBackgrounds(newValue: string) {\n    this.progressPaths = JSON.parse(newValue);\n  }\n  progressPaths: any[];\n\n  @State() params: {\n    width: number;\n    diameter: number;\n    circumference: number;\n  };\n\n  /**\n   * Component lifecycles\n   *\n   * Before the component is loaded, we need to calculate and update params\n   * using the component size (width of the round progress)\n   * and progress width (max of )\n   */\n  componentWillLoad() {\n    if (typeof this.paths === 'string') {\n      this.updateProgressBackgrounds(this.paths);\n    }\n    this.calcParams();\n  }\n\n  calcParams() {\n    // get element width\n    const width = this.el.getBoundingClientRect().width;\n    const diameter = width - this.padding;\n    // calc circumference — we'll need it later to calc the stroke paths\n    const circumference = Math.PI * diameter;\n\n    this.params = { width, diameter, circumference };\n  }\n\n  /**\n   * Returns the viewPath attribute value for the SVG\n   * based on the width of the parent element\n   */\n  getViewBox() {\n    return '0 0 ' + this.params.width + ' ' + this.params.width;\n  }\n\n  /**\n   * Returns the circular path for the progress stroke\n   * and additional paths in the background\n   */\n  getPath() {\n    return (\n      'M' +\n      this.params.width / 2 +\n      ' ' +\n      (this.params.width - this.params.diameter) / 2 +\n      ' a ' +\n      this.params.diameter / 2 +\n      ' ' +\n      this.params.diameter / 2 +\n      ' 0 0 1 0 ' +\n      this.params.diameter +\n      ' a ' +\n      this.params.diameter / 2 +\n      ' ' +\n      this.params.diameter / 2 +\n      ' 0 0 1 0 -' +\n      this.params.diameter\n    );\n  }\n\n  getStrokeDashArray() {\n    return (this.value / 100) * this.params.circumference + ', ' + this.params.circumference;\n  }\n\n  getPaths() {\n    if (!this.progressPaths || !this.progressPaths.length) {\n      return null;\n    }\n    let paths = [];\n    this.progressPaths.forEach(bg => {\n      paths.push(<path class=\"round-progress--path\" d={this.getPath()} stroke={bg.color} stroke-width={bg.width} stroke-dasharray={bg.dasharray} stroke-linecap={bg.linecap} />);\n    });\n    return (\n      <svg viewBox={this.getViewBox()} class=\"round-progress\">\n        {paths}\n      </svg>\n    );\n  }\n\n  render() {\n    return (\n      <div class=\"round-progress--container\">\n        {this.getPaths()}\n        <svg viewBox={this.getViewBox()} class=\"round-progress round-progress--progress\">\n          <path class=\"round-progress--circle\" stroke-dasharray={this.getStrokeDashArray()} d={this.getPath()} />\n        </svg>\n        <slot />\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}