@mhmo91/schmancy 0.9.15 → 0.9.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/custom-elements.json +57 -30
  2. package/dist/agent/schmancy.agent.js +178 -25
  3. package/dist/agent/schmancy.agent.js.map +1 -1
  4. package/dist/agent/schmancy.manifest.json +208 -12
  5. package/dist/autocomplete-CgWUCUU-.js.map +1 -1
  6. package/dist/autocomplete-EM0jE7X2.cjs.map +1 -1
  7. package/dist/button.cjs.map +1 -1
  8. package/dist/button.js.map +1 -1
  9. package/dist/checkbox-Br84TiCs.js.map +1 -1
  10. package/dist/checkbox-DtcFMgZL.cjs.map +1 -1
  11. package/dist/chips-BNYOweGm.js.map +1 -1
  12. package/dist/chips-DoCu5YQb.cjs.map +1 -1
  13. package/dist/extra-BUgyMgjl.cjs.map +1 -1
  14. package/dist/extra-HwbaUnCD.js.map +1 -1
  15. package/dist/form-rCZqoAoK.js.map +1 -1
  16. package/dist/form-wI58M85H.cjs.map +1 -1
  17. package/dist/handover/agent-runtime-followups.md +1 -1
  18. package/dist/handover/agent-runtime-v1.md +3 -3
  19. package/dist/input-BGNZlfL8.cjs.map +1 -1
  20. package/dist/input-Bc3bVISm.js.map +1 -1
  21. package/dist/input-chip-CiG61y-N.js.map +1 -1
  22. package/dist/input-chip-p24lkYtY.cjs.map +1 -1
  23. package/dist/radio-group-B72sYGnS.js.map +1 -1
  24. package/dist/radio-group-B7DuNxUq.cjs.map +1 -1
  25. package/dist/select-DFxoBgEf.cjs.map +1 -1
  26. package/dist/select-wFDKDLQI.js.map +1 -1
  27. package/dist/switch.cjs.map +1 -1
  28. package/dist/switch.js.map +1 -1
  29. package/dist/textarea-B2544vx9.cjs.map +1 -1
  30. package/dist/textarea-CS-KdSLz.js.map +1 -1
  31. package/package.json +1 -1
  32. package/src/autocomplete/autocomplete.ts +12 -1
  33. package/src/button/button.ts +6 -1
  34. package/src/button/icon-button.ts +7 -1
  35. package/src/checkbox/checkbox.ts +7 -1
  36. package/src/chips/chips.ts +14 -0
  37. package/src/chips/input-chip.ts +6 -6
  38. package/src/extra/countries/countries.ts +10 -0
  39. package/src/extra/timezone/timezone.ts +8 -1
  40. package/src/form/form.ts +9 -2
  41. package/src/input/input.ts +11 -4
  42. package/src/radio-group/radio-button.ts +10 -1
  43. package/src/radio-group/radio-group.ts +18 -0
  44. package/src/select/select.ts +12 -1
  45. package/src/switch/switch.ts +7 -4
  46. package/src/textarea/textarea.ts +9 -1
  47. package/types/src/autocomplete/autocomplete.d.ts +12 -1
  48. package/types/src/button/button.d.ts +6 -1
  49. package/types/src/button/icon-button.d.ts +7 -1
  50. package/types/src/checkbox/checkbox.d.ts +7 -1
  51. package/types/src/chips/chips.d.ts +14 -0
  52. package/types/src/chips/input-chip.d.ts +6 -6
  53. package/types/src/extra/countries/countries.d.ts +10 -0
  54. package/types/src/extra/timezone/timezone.d.ts +8 -1
  55. package/types/src/form/form.d.ts +9 -2
  56. package/types/src/input/input.d.ts +11 -4
  57. package/types/src/radio-group/radio-button.d.ts +10 -1
  58. package/types/src/radio-group/radio-group.d.ts +18 -0
  59. package/types/src/select/select.d.ts +12 -1
  60. package/types/src/switch/switch.d.ts +7 -4
  61. package/types/src/textarea/textarea.d.ts +9 -1
@@ -1 +1 @@
1
- {"version":3,"file":"input-chip-CiG61y-N.js","names":[],"sources":["../src/chips/input-chip.ts"],"sourcesContent":["import { TailwindElement } from '@mixins/tailwind.mixin'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { BehaviorSubject, combineLatest } from 'rxjs'\nimport { map, takeUntil, tap } from 'rxjs/operators'\n\n/**\n * Input chip component - represents user-provided information that can be removed.\n *\n * IMPORTANT: Per Material Design 3 specification, input chips do NOT have selected state.\n * They represent discrete pieces of user input (like entered tags, selections from lists, etc.)\n * that can only be removed, not toggled on/off.\n *\n * Use cases:\n * - Displaying selected recipients in an email\n * - Showing applied filters that can be removed\n * - Tags or keywords entered by the user\n * - Selected items from a multi-select dropdown\n *\n * @fires click - Optional click event on chip body (value)\n * @fires remove - Dispatched when remove button is clicked (value)\n *\n * @example\n * ```html\n * <schmancy-input-chip value=\"john@example.com\" avatar=\"/avatars/john.jpg\">\n * John Doe\n * </schmancy-input-chip>\n * ```\n */\n@customElement('schmancy-input-chip')\nexport class SchmancyInputChip extends TailwindElement(css`\n\t:host {\n\t\tdisplay: inline-block;\n\t\toutline: none;\n\t\tmin-width:fit-content\n\n\t}\n\n\t:host([disabled]) {\n\t\tpointer-events: none;\n\t}\n\n\tbutton {\n\t\tfont-family: inherit;\n\t}\n\n\t.avatar-img {\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\tobject-fit: cover;\n\t}\n\n\t/* Material Symbols font for icons */\n\t.material-symbols-outlined {\n\t\tfont-family: 'Material Symbols Outlined';\n\t\tfont-weight: normal;\n\t\tfont-style: normal;\n\t\tfont-size: 18px;\n\t\tline-height: 1;\n\t\tletter-spacing: normal;\n\t\ttext-transform: none;\n\t\tdisplay: inline-block;\n\t\twhite-space: nowrap;\n\t\tword-wrap: normal;\n\t\tdirection: ltr;\n\t\t-webkit-font-smoothing: antialiased;\n\t\ttext-rendering: optimizeLegibility;\n\t\t-moz-osx-font-smoothing: grayscale;\n\t\tfont-feature-settings: 'liga';\n\t\tvertical-align: middle;\n\t}\n\n\t.ripple {\n\t\tposition: absolute;\n\t\tborder-radius: 50%;\n\t\ttransform: scale(0);\n\t\tanimation: ripple 600ms linear;\n\t\tbackground-color: rgba(0, 0, 0, 0.08);\n\t\tpointer-events: none;\n\t}\n\n\t@keyframes ripple {\n\t\tto {\n\t\t\ttransform: scale(4);\n\t\t\topacity: 0;\n\t\t}\n\t}\n\n\t/* State layer for M3 hover/focus/pressed states */\n\t.state-layer {\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tborder-radius: inherit;\n\t\tpointer-events: none;\n\t\tbackground-color: currentColor;\n\t\topacity: 0;\n\t\ttransition: opacity 200ms ease;\n\t}\n\n\t:host(:not([disabled])) .chip-container:hover .state-layer {\n\t\topacity: 0.08;\n\t}\n\n\t:host(:not([disabled])) .chip-container:focus-visible .state-layer {\n\t\topacity: 0.1;\n\t}\n\n\t:host(:not([disabled])) .chip-container:active .state-layer {\n\t\topacity: 0.1;\n\t}\n`) {\n\t/** Value identifier for the chip */\n\t@property({ type: String, reflect: true })\n\tvalue: string = ''\n\n\t/** Optional icon name (Material Symbols) */\n\t@property({ type: String, reflect: true })\n\ticon: string = ''\n\n\t/** Optional avatar image URL */\n\t@property({ type: String, reflect: true })\n\tavatar: string = ''\n\n\t/** Whether to show remove button (default true for input chips) */\n\t@property({ type: Boolean, reflect: true })\n\tremovable: boolean = true\n\n\t/** Disable the chip */\n\t@property({ type: Boolean, reflect: true })\n\tdisabled: boolean = false\n\n\t/** Elevated style variant */\n\t@property({ type: Boolean, reflect: true })\n\televated: boolean = false\n\n\t// RxJS state streams\n\tprivate chipHover$ = new BehaviorSubject<boolean>(false)\n\tprivate removeHover$ = new BehaviorSubject<boolean>(false)\n\tprivate focused$ = new BehaviorSubject<boolean>(false)\n\tprivate pressed$ = new BehaviorSubject<boolean>(false)\n\n\t// UI state from combined streams\n\t@state() uiState = {\n\t\tchipHover: false,\n\t\tremoveHover: false,\n\t\tfocused: false,\n\t\tpressed: false\n\t}\n\n\t// Ripple effects\n\t@state() private ripples: Array<{ x: number; y: number; id: number }> = []\n\tprivate nextRippleId = 0\n\n\tconstructor() {\n\t\tsuper()\n\t\ttry {\n\t\t\tthis.internals = this.attachInternals()\n\t\t} catch {\n\t\t\tthis.internals = undefined\n\t\t}\n\t}\n\n\tprotected static shadowRootOptions = {\n\t\t...LitElement.shadowRootOptions,\n\t\tdelegatesFocus: true,\n\t}\n\n\tstatic formAssociated = true\n\tinternals: ElementInternals | undefined\n\tget form() {\n\t\treturn this.internals?.form\n\t}\n\n\tprotected updated(changed: Map<string, unknown>) {\n\t\tsuper.updated?.(changed)\n\t\tif (changed.has('value')) {\n\t\t\tthis.internals?.setFormValue(this.value || null)\n\t\t}\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// Combine all UI state streams\n\t\tcombineLatest([\n\t\t\tthis.chipHover$,\n\t\t\tthis.removeHover$,\n\t\t\tthis.focused$,\n\t\t\tthis.pressed$\n\t\t]).pipe(\n\t\t\tmap(([chipHover, removeHover, focused, pressed]) => ({\n\t\t\t\tchipHover,\n\t\t\t\tremoveHover,\n\t\t\t\tfocused,\n\t\t\t\tpressed\n\t\t\t})),\n\t\t\ttap(state => {\n\t\t\t\tthis.uiState = state\n\t\t\t}),\n\t\t\ttakeUntil(this.disconnecting)\n\t\t).subscribe()\n\t}\n\n\tprivate handleChipClick = (e: MouseEvent) => {\n\t\tif (this.disabled) return\n\n\t\t// Add ripple effect\n\t\tconst chip = this.shadowRoot?.querySelector('.chip-container') as HTMLElement\n\t\tif (chip) {\n\t\t\tconst rect = chip.getBoundingClientRect()\n\t\t\tconst x = e.clientX - rect.left\n\t\t\tconst y = e.clientY - rect.top\n\t\t\tconst id = this.nextRippleId++\n\n\t\t\tthis.ripples = [...this.ripples, { x, y, id }]\n\n\t\t\t// Remove ripple after animation\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.ripples = this.ripples.filter(r => r.id !== id)\n\t\t\t}, 600)\n\t\t}\n\n\t\t// Dispatch optional click event (for custom handling if needed)\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('click', {\n\t\t\t\tdetail: { value: this.value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t)\n\t}\n\n\tprivate handleRemove = (e: Event) => {\n\t\tif (this.disabled) return\n\n\t\te.stopPropagation()\n\n\t\t// Dispatch remove event\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('remove', {\n\t\t\t\tdetail: { value: this.value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t)\n\t}\n\n\tprivate handleKeyDown = (e: KeyboardEvent) => {\n\t\tif (this.disabled) return\n\n\t\t// Delete or Backspace removes the chip\n\t\tif ((e.key === 'Delete' || e.key === 'Backspace') && this.removable) {\n\t\t\te.preventDefault()\n\t\t\tthis.handleRemove(e)\n\t\t}\n\t\t// Enter can optionally trigger click\n\t\telse if (e.key === 'Enter') {\n\t\t\te.preventDefault()\n\t\t\tconst clickEvent = new MouseEvent('click', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcancelable: true,\n\t\t\t\tclientX: 0,\n\t\t\t\tclientY: 0\n\t\t\t})\n\t\t\tthis.handleChipClick(clickEvent)\n\t\t}\n\t}\n\n\tprivate handleFocus = () => {\n\t\tthis.focused$.next(true)\n\t}\n\n\tprivate handleBlur = () => {\n\t\tthis.focused$.next(false)\n\t}\n\n\tprotected render(): unknown {\n\t\tconst hasLeadingIcon = this.avatar || this.icon;\n\n\t\tconst chipClasses = {\n\t\t\t'chip-container': true,\n\t\t\t'inline-flex': true,\n\t\t\t'items-center': true,\n\t\t\t'gap-2': true,\n\t\t\t'h-8': true, // M3: 32px height\n\t\t\t'min-h-[32px]': true,\n\t\t\t'rounded-full': true,\n\t\t\t'cursor-default': true,\n\t\t\t'transition-all': true,\n\t\t\t'duration-200': true,\n\t\t\t'select-none': true,\n\t\t\t'text-sm': true, // M3: 14px Label Large\n\t\t\t'font-medium': true, // M3: 500 weight\n\t\t\t'relative': true,\n\t\t\t'overflow-hidden': true,\n\t\t\t'border': true,\n\n\t\t\t// M3 Padding: 8px with icon, 16px without (leading), 8px with trailing icon\n\t\t\t'pl-2': hasLeadingIcon, // 8px with avatar/icon\n\t\t\t'pl-4': !hasLeadingIcon, // 16px without\n\t\t\t'pr-2': this.removable, // 8px with remove button\n\t\t\t'pr-4': !this.removable, // 16px without\n\n\t\t\t// M3 Colors for input chips\n\t\t\t'bg-surface-containerLow': true,\n\t\t\t'text-surface-onVariant': true,\n\t\t\t'border-outline': true,\n\t\t\t'border-solid':true,\n\t\t\t// Input chips are flat (no elevation) per M3\n\n\t\t\t// Focus-visible state\n\t\t\t'focus-visible:outline': !this.disabled,\n\t\t\t'focus-visible:outline-2': !this.disabled,\n\t\t\t'focus-visible:outline-primary': !this.disabled,\n\t\t\t'focus-visible:outline-offset-2': !this.disabled,\n\n\t\t\t// Disabled state\n\t\t\t'opacity-38': this.disabled, // M3 disabled opacity\n\t\t\t'cursor-not-allowed': this.disabled\n\t\t}\n\n\t\tconst removeButtonClasses = {\n\t\t\t'size-[18px]': true, // M3: 18px icon size\n\t\t\t'flex': true,\n\t\t\t'items-center': true,\n\t\t\t'justify-center': true,\n\t\t\t'rounded-full': true,\n\t\t\t'transition-all': true,\n\t\t\t'duration-200': true,\n\t\t\t'cursor-pointer': !this.disabled,\n\t\t\t'-mr-1': true, // Adjust for visual balance\n\n\t\t\t// Hover state for remove button\n\t\t\t'hover:bg-surface-containerHighest': !this.disabled,\n\t\t\t'opacity-50': this.disabled\n\t\t}\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=${classMap(chipClasses)}\n\t\t\t\t@click=${this.handleChipClick}\n\t\t\t\t@keydown=${this.handleKeyDown}\n\t\t\t\t@mouseenter=${() => this.chipHover$.next(true)}\n\t\t\t\t@mouseleave=${() => this.chipHover$.next(false)}\n\t\t\t\t@mousedown=${() => this.pressed$.next(true)}\n\t\t\t\t@mouseup=${() => this.pressed$.next(false)}\n\t\t\t\t@focus=${this.handleFocus}\n\t\t\t\t@blur=${this.handleBlur}\n\t\t\t\trole=\"button\"\n\t\t\t\ttabindex=${this.disabled ? '-1' : '0'}\n\t\t\t\taria-disabled=${this.disabled}\n\t\t\t\taria-label=${this.value}\n\t\t\t>\n\t\t\t\t<!-- Avatar image (if provided) -->\n\t\t\t\t${this.avatar ? html`\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc=${this.avatar}\n\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\tclass=\"avatar-img rounded-full size-5\"\n\t\t\t\t\t/>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Icon (if provided and no avatar) -->\n\t\t\t\t${this.icon && !this.avatar ? html`\n\t\t\t\t\t<span class=\"material-symbols-outlined text-[18px] shrink-0\">\n\t\t\t\t\t\t${this.icon}\n\t\t\t\t\t</span>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Chip content -->\n\t\t\t\t<span class=\"text-sm font-medium leading-5\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</span>\n\n\t\t\t\t<!-- Remove button (shown by default for input chips) -->\n\t\t\t\t${this.removable ? html`\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=${classMap(removeButtonClasses)}\n\t\t\t\t\t\t@click=${this.handleRemove}\n\t\t\t\t\t\t@mouseenter=${() => this.removeHover$.next(true)}\n\t\t\t\t\t\t@mouseleave=${() => this.removeHover$.next(false)}\n\t\t\t\t\t\taria-label=\"Remove\"\n\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t?disabled=${this.disabled}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span class=\"material-symbols-outlined text-[18px]\">\n\t\t\t\t\t\t\tclose\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</button>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Ripple effects -->\n\t\t\t\t${this.ripples.map(ripple => html`\n\t\t\t\t\t<span\n\t\t\t\t\t\tclass=\"ripple\"\n\t\t\t\t\t\tstyle=\"left: ${ripple.x}px; top: ${ripple.y}px;\"\n\t\t\t\t\t></span>\n\t\t\t\t`)}\n\n\t\t\t\t<!-- State layer for M3 hover/focus/pressed states -->\n\t\t\t\t<div class=\"state-layer\"></div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-input-chip': SchmancyInputChip\n\t}\n}\n\nexport type InputChipClickEvent = { value: string }\nexport type InputChipRemoveEvent = { value: string }"],"mappings":"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"}
1
+ {"version":3,"file":"input-chip-CiG61y-N.js","names":[],"sources":["../src/chips/input-chip.ts"],"sourcesContent":["import { TailwindElement } from '@mixins/tailwind.mixin'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { BehaviorSubject, combineLatest } from 'rxjs'\nimport { map, takeUntil, tap } from 'rxjs/operators'\n\n/**\n * Input chip — displays user-provided information (tags, recipients, filters) that can be removed but not toggled.\n *\n * IMPORTANT: Per Material Design 3 specification, input chips do NOT have selected state.\n * They represent discrete pieces of user input (like entered tags, selections from lists, etc.)\n * that can only be removed, not toggled on/off.\n *\n * Use cases:\n * - Displaying selected recipients in an email\n * - Showing applied filters that can be removed\n * - Tags or keywords entered by the user\n * - Selected items from a multi-select dropdown\n *\n * @element schmancy-input-chip\n * @summary Removable pill that represents a single user input value. No selected state — use schmancy-chip (filter chip) for toggleable options.\n * @example\n * <schmancy-input-chip value=\"john@example.com\" avatar=\"/avatars/john.jpg\">\n * John Doe\n * </schmancy-input-chip>\n * @platform chip remove - No native equivalent. Composed of a labeled pill + close button. Degrades to a styled `<span>` with a trailing close `<button>` if the tag never registers.\n * @fires click - Optional click event on chip body (value)\n * @fires remove - Dispatched when remove button is clicked (value)\n */\n@customElement('schmancy-input-chip')\nexport class SchmancyInputChip extends TailwindElement(css`\n\t:host {\n\t\tdisplay: inline-block;\n\t\toutline: none;\n\t\tmin-width:fit-content\n\n\t}\n\n\t:host([disabled]) {\n\t\tpointer-events: none;\n\t}\n\n\tbutton {\n\t\tfont-family: inherit;\n\t}\n\n\t.avatar-img {\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\tobject-fit: cover;\n\t}\n\n\t/* Material Symbols font for icons */\n\t.material-symbols-outlined {\n\t\tfont-family: 'Material Symbols Outlined';\n\t\tfont-weight: normal;\n\t\tfont-style: normal;\n\t\tfont-size: 18px;\n\t\tline-height: 1;\n\t\tletter-spacing: normal;\n\t\ttext-transform: none;\n\t\tdisplay: inline-block;\n\t\twhite-space: nowrap;\n\t\tword-wrap: normal;\n\t\tdirection: ltr;\n\t\t-webkit-font-smoothing: antialiased;\n\t\ttext-rendering: optimizeLegibility;\n\t\t-moz-osx-font-smoothing: grayscale;\n\t\tfont-feature-settings: 'liga';\n\t\tvertical-align: middle;\n\t}\n\n\t.ripple {\n\t\tposition: absolute;\n\t\tborder-radius: 50%;\n\t\ttransform: scale(0);\n\t\tanimation: ripple 600ms linear;\n\t\tbackground-color: rgba(0, 0, 0, 0.08);\n\t\tpointer-events: none;\n\t}\n\n\t@keyframes ripple {\n\t\tto {\n\t\t\ttransform: scale(4);\n\t\t\topacity: 0;\n\t\t}\n\t}\n\n\t/* State layer for M3 hover/focus/pressed states */\n\t.state-layer {\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tborder-radius: inherit;\n\t\tpointer-events: none;\n\t\tbackground-color: currentColor;\n\t\topacity: 0;\n\t\ttransition: opacity 200ms ease;\n\t}\n\n\t:host(:not([disabled])) .chip-container:hover .state-layer {\n\t\topacity: 0.08;\n\t}\n\n\t:host(:not([disabled])) .chip-container:focus-visible .state-layer {\n\t\topacity: 0.1;\n\t}\n\n\t:host(:not([disabled])) .chip-container:active .state-layer {\n\t\topacity: 0.1;\n\t}\n`) {\n\t/** Value identifier for the chip */\n\t@property({ type: String, reflect: true })\n\tvalue: string = ''\n\n\t/** Optional icon name (Material Symbols) */\n\t@property({ type: String, reflect: true })\n\ticon: string = ''\n\n\t/** Optional avatar image URL */\n\t@property({ type: String, reflect: true })\n\tavatar: string = ''\n\n\t/** Whether to show remove button (default true for input chips) */\n\t@property({ type: Boolean, reflect: true })\n\tremovable: boolean = true\n\n\t/** Disable the chip */\n\t@property({ type: Boolean, reflect: true })\n\tdisabled: boolean = false\n\n\t/** Elevated style variant */\n\t@property({ type: Boolean, reflect: true })\n\televated: boolean = false\n\n\t// RxJS state streams\n\tprivate chipHover$ = new BehaviorSubject<boolean>(false)\n\tprivate removeHover$ = new BehaviorSubject<boolean>(false)\n\tprivate focused$ = new BehaviorSubject<boolean>(false)\n\tprivate pressed$ = new BehaviorSubject<boolean>(false)\n\n\t// UI state from combined streams\n\t@state() uiState = {\n\t\tchipHover: false,\n\t\tremoveHover: false,\n\t\tfocused: false,\n\t\tpressed: false\n\t}\n\n\t// Ripple effects\n\t@state() private ripples: Array<{ x: number; y: number; id: number }> = []\n\tprivate nextRippleId = 0\n\n\tconstructor() {\n\t\tsuper()\n\t\ttry {\n\t\t\tthis.internals = this.attachInternals()\n\t\t} catch {\n\t\t\tthis.internals = undefined\n\t\t}\n\t}\n\n\tprotected static shadowRootOptions = {\n\t\t...LitElement.shadowRootOptions,\n\t\tdelegatesFocus: true,\n\t}\n\n\tstatic formAssociated = true\n\tinternals: ElementInternals | undefined\n\tget form() {\n\t\treturn this.internals?.form\n\t}\n\n\tprotected updated(changed: Map<string, unknown>) {\n\t\tsuper.updated?.(changed)\n\t\tif (changed.has('value')) {\n\t\t\tthis.internals?.setFormValue(this.value || null)\n\t\t}\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// Combine all UI state streams\n\t\tcombineLatest([\n\t\t\tthis.chipHover$,\n\t\t\tthis.removeHover$,\n\t\t\tthis.focused$,\n\t\t\tthis.pressed$\n\t\t]).pipe(\n\t\t\tmap(([chipHover, removeHover, focused, pressed]) => ({\n\t\t\t\tchipHover,\n\t\t\t\tremoveHover,\n\t\t\t\tfocused,\n\t\t\t\tpressed\n\t\t\t})),\n\t\t\ttap(state => {\n\t\t\t\tthis.uiState = state\n\t\t\t}),\n\t\t\ttakeUntil(this.disconnecting)\n\t\t).subscribe()\n\t}\n\n\tprivate handleChipClick = (e: MouseEvent) => {\n\t\tif (this.disabled) return\n\n\t\t// Add ripple effect\n\t\tconst chip = this.shadowRoot?.querySelector('.chip-container') as HTMLElement\n\t\tif (chip) {\n\t\t\tconst rect = chip.getBoundingClientRect()\n\t\t\tconst x = e.clientX - rect.left\n\t\t\tconst y = e.clientY - rect.top\n\t\t\tconst id = this.nextRippleId++\n\n\t\t\tthis.ripples = [...this.ripples, { x, y, id }]\n\n\t\t\t// Remove ripple after animation\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.ripples = this.ripples.filter(r => r.id !== id)\n\t\t\t}, 600)\n\t\t}\n\n\t\t// Dispatch optional click event (for custom handling if needed)\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('click', {\n\t\t\t\tdetail: { value: this.value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t)\n\t}\n\n\tprivate handleRemove = (e: Event) => {\n\t\tif (this.disabled) return\n\n\t\te.stopPropagation()\n\n\t\t// Dispatch remove event\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('remove', {\n\t\t\t\tdetail: { value: this.value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t)\n\t}\n\n\tprivate handleKeyDown = (e: KeyboardEvent) => {\n\t\tif (this.disabled) return\n\n\t\t// Delete or Backspace removes the chip\n\t\tif ((e.key === 'Delete' || e.key === 'Backspace') && this.removable) {\n\t\t\te.preventDefault()\n\t\t\tthis.handleRemove(e)\n\t\t}\n\t\t// Enter can optionally trigger click\n\t\telse if (e.key === 'Enter') {\n\t\t\te.preventDefault()\n\t\t\tconst clickEvent = new MouseEvent('click', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcancelable: true,\n\t\t\t\tclientX: 0,\n\t\t\t\tclientY: 0\n\t\t\t})\n\t\t\tthis.handleChipClick(clickEvent)\n\t\t}\n\t}\n\n\tprivate handleFocus = () => {\n\t\tthis.focused$.next(true)\n\t}\n\n\tprivate handleBlur = () => {\n\t\tthis.focused$.next(false)\n\t}\n\n\tprotected render(): unknown {\n\t\tconst hasLeadingIcon = this.avatar || this.icon;\n\n\t\tconst chipClasses = {\n\t\t\t'chip-container': true,\n\t\t\t'inline-flex': true,\n\t\t\t'items-center': true,\n\t\t\t'gap-2': true,\n\t\t\t'h-8': true, // M3: 32px height\n\t\t\t'min-h-[32px]': true,\n\t\t\t'rounded-full': true,\n\t\t\t'cursor-default': true,\n\t\t\t'transition-all': true,\n\t\t\t'duration-200': true,\n\t\t\t'select-none': true,\n\t\t\t'text-sm': true, // M3: 14px Label Large\n\t\t\t'font-medium': true, // M3: 500 weight\n\t\t\t'relative': true,\n\t\t\t'overflow-hidden': true,\n\t\t\t'border': true,\n\n\t\t\t// M3 Padding: 8px with icon, 16px without (leading), 8px with trailing icon\n\t\t\t'pl-2': hasLeadingIcon, // 8px with avatar/icon\n\t\t\t'pl-4': !hasLeadingIcon, // 16px without\n\t\t\t'pr-2': this.removable, // 8px with remove button\n\t\t\t'pr-4': !this.removable, // 16px without\n\n\t\t\t// M3 Colors for input chips\n\t\t\t'bg-surface-containerLow': true,\n\t\t\t'text-surface-onVariant': true,\n\t\t\t'border-outline': true,\n\t\t\t'border-solid':true,\n\t\t\t// Input chips are flat (no elevation) per M3\n\n\t\t\t// Focus-visible state\n\t\t\t'focus-visible:outline': !this.disabled,\n\t\t\t'focus-visible:outline-2': !this.disabled,\n\t\t\t'focus-visible:outline-primary': !this.disabled,\n\t\t\t'focus-visible:outline-offset-2': !this.disabled,\n\n\t\t\t// Disabled state\n\t\t\t'opacity-38': this.disabled, // M3 disabled opacity\n\t\t\t'cursor-not-allowed': this.disabled\n\t\t}\n\n\t\tconst removeButtonClasses = {\n\t\t\t'size-[18px]': true, // M3: 18px icon size\n\t\t\t'flex': true,\n\t\t\t'items-center': true,\n\t\t\t'justify-center': true,\n\t\t\t'rounded-full': true,\n\t\t\t'transition-all': true,\n\t\t\t'duration-200': true,\n\t\t\t'cursor-pointer': !this.disabled,\n\t\t\t'-mr-1': true, // Adjust for visual balance\n\n\t\t\t// Hover state for remove button\n\t\t\t'hover:bg-surface-containerHighest': !this.disabled,\n\t\t\t'opacity-50': this.disabled\n\t\t}\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=${classMap(chipClasses)}\n\t\t\t\t@click=${this.handleChipClick}\n\t\t\t\t@keydown=${this.handleKeyDown}\n\t\t\t\t@mouseenter=${() => this.chipHover$.next(true)}\n\t\t\t\t@mouseleave=${() => this.chipHover$.next(false)}\n\t\t\t\t@mousedown=${() => this.pressed$.next(true)}\n\t\t\t\t@mouseup=${() => this.pressed$.next(false)}\n\t\t\t\t@focus=${this.handleFocus}\n\t\t\t\t@blur=${this.handleBlur}\n\t\t\t\trole=\"button\"\n\t\t\t\ttabindex=${this.disabled ? '-1' : '0'}\n\t\t\t\taria-disabled=${this.disabled}\n\t\t\t\taria-label=${this.value}\n\t\t\t>\n\t\t\t\t<!-- Avatar image (if provided) -->\n\t\t\t\t${this.avatar ? html`\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc=${this.avatar}\n\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\tclass=\"avatar-img rounded-full size-5\"\n\t\t\t\t\t/>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Icon (if provided and no avatar) -->\n\t\t\t\t${this.icon && !this.avatar ? html`\n\t\t\t\t\t<span class=\"material-symbols-outlined text-[18px] shrink-0\">\n\t\t\t\t\t\t${this.icon}\n\t\t\t\t\t</span>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Chip content -->\n\t\t\t\t<span class=\"text-sm font-medium leading-5\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</span>\n\n\t\t\t\t<!-- Remove button (shown by default for input chips) -->\n\t\t\t\t${this.removable ? html`\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=${classMap(removeButtonClasses)}\n\t\t\t\t\t\t@click=${this.handleRemove}\n\t\t\t\t\t\t@mouseenter=${() => this.removeHover$.next(true)}\n\t\t\t\t\t\t@mouseleave=${() => this.removeHover$.next(false)}\n\t\t\t\t\t\taria-label=\"Remove\"\n\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t?disabled=${this.disabled}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span class=\"material-symbols-outlined text-[18px]\">\n\t\t\t\t\t\t\tclose\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</button>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Ripple effects -->\n\t\t\t\t${this.ripples.map(ripple => html`\n\t\t\t\t\t<span\n\t\t\t\t\t\tclass=\"ripple\"\n\t\t\t\t\t\tstyle=\"left: ${ripple.x}px; top: ${ripple.y}px;\"\n\t\t\t\t\t></span>\n\t\t\t\t`)}\n\n\t\t\t\t<!-- State layer for M3 hover/focus/pressed states -->\n\t\t\t\t<div class=\"state-layer\"></div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-input-chip': SchmancyInputChip\n\t}\n}\n\nexport type InputChipClickEvent = { value: string }\nexport type InputChipRemoveEvent = { value: string }"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"input-chip-p24lkYtY.cjs","names":[],"sources":["../src/chips/input-chip.ts"],"sourcesContent":["import { TailwindElement } from '@mixins/tailwind.mixin'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { BehaviorSubject, combineLatest } from 'rxjs'\nimport { map, takeUntil, tap } from 'rxjs/operators'\n\n/**\n * Input chip component - represents user-provided information that can be removed.\n *\n * IMPORTANT: Per Material Design 3 specification, input chips do NOT have selected state.\n * They represent discrete pieces of user input (like entered tags, selections from lists, etc.)\n * that can only be removed, not toggled on/off.\n *\n * Use cases:\n * - Displaying selected recipients in an email\n * - Showing applied filters that can be removed\n * - Tags or keywords entered by the user\n * - Selected items from a multi-select dropdown\n *\n * @fires click - Optional click event on chip body (value)\n * @fires remove - Dispatched when remove button is clicked (value)\n *\n * @example\n * ```html\n * <schmancy-input-chip value=\"john@example.com\" avatar=\"/avatars/john.jpg\">\n * John Doe\n * </schmancy-input-chip>\n * ```\n */\n@customElement('schmancy-input-chip')\nexport class SchmancyInputChip extends TailwindElement(css`\n\t:host {\n\t\tdisplay: inline-block;\n\t\toutline: none;\n\t\tmin-width:fit-content\n\n\t}\n\n\t:host([disabled]) {\n\t\tpointer-events: none;\n\t}\n\n\tbutton {\n\t\tfont-family: inherit;\n\t}\n\n\t.avatar-img {\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\tobject-fit: cover;\n\t}\n\n\t/* Material Symbols font for icons */\n\t.material-symbols-outlined {\n\t\tfont-family: 'Material Symbols Outlined';\n\t\tfont-weight: normal;\n\t\tfont-style: normal;\n\t\tfont-size: 18px;\n\t\tline-height: 1;\n\t\tletter-spacing: normal;\n\t\ttext-transform: none;\n\t\tdisplay: inline-block;\n\t\twhite-space: nowrap;\n\t\tword-wrap: normal;\n\t\tdirection: ltr;\n\t\t-webkit-font-smoothing: antialiased;\n\t\ttext-rendering: optimizeLegibility;\n\t\t-moz-osx-font-smoothing: grayscale;\n\t\tfont-feature-settings: 'liga';\n\t\tvertical-align: middle;\n\t}\n\n\t.ripple {\n\t\tposition: absolute;\n\t\tborder-radius: 50%;\n\t\ttransform: scale(0);\n\t\tanimation: ripple 600ms linear;\n\t\tbackground-color: rgba(0, 0, 0, 0.08);\n\t\tpointer-events: none;\n\t}\n\n\t@keyframes ripple {\n\t\tto {\n\t\t\ttransform: scale(4);\n\t\t\topacity: 0;\n\t\t}\n\t}\n\n\t/* State layer for M3 hover/focus/pressed states */\n\t.state-layer {\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tborder-radius: inherit;\n\t\tpointer-events: none;\n\t\tbackground-color: currentColor;\n\t\topacity: 0;\n\t\ttransition: opacity 200ms ease;\n\t}\n\n\t:host(:not([disabled])) .chip-container:hover .state-layer {\n\t\topacity: 0.08;\n\t}\n\n\t:host(:not([disabled])) .chip-container:focus-visible .state-layer {\n\t\topacity: 0.1;\n\t}\n\n\t:host(:not([disabled])) .chip-container:active .state-layer {\n\t\topacity: 0.1;\n\t}\n`) {\n\t/** Value identifier for the chip */\n\t@property({ type: String, reflect: true })\n\tvalue: string = ''\n\n\t/** Optional icon name (Material Symbols) */\n\t@property({ type: String, reflect: true })\n\ticon: string = ''\n\n\t/** Optional avatar image URL */\n\t@property({ type: String, reflect: true })\n\tavatar: string = ''\n\n\t/** Whether to show remove button (default true for input chips) */\n\t@property({ type: Boolean, reflect: true })\n\tremovable: boolean = true\n\n\t/** Disable the chip */\n\t@property({ type: Boolean, reflect: true })\n\tdisabled: boolean = false\n\n\t/** Elevated style variant */\n\t@property({ type: Boolean, reflect: true })\n\televated: boolean = false\n\n\t// RxJS state streams\n\tprivate chipHover$ = new BehaviorSubject<boolean>(false)\n\tprivate removeHover$ = new BehaviorSubject<boolean>(false)\n\tprivate focused$ = new BehaviorSubject<boolean>(false)\n\tprivate pressed$ = new BehaviorSubject<boolean>(false)\n\n\t// UI state from combined streams\n\t@state() uiState = {\n\t\tchipHover: false,\n\t\tremoveHover: false,\n\t\tfocused: false,\n\t\tpressed: false\n\t}\n\n\t// Ripple effects\n\t@state() private ripples: Array<{ x: number; y: number; id: number }> = []\n\tprivate nextRippleId = 0\n\n\tconstructor() {\n\t\tsuper()\n\t\ttry {\n\t\t\tthis.internals = this.attachInternals()\n\t\t} catch {\n\t\t\tthis.internals = undefined\n\t\t}\n\t}\n\n\tprotected static shadowRootOptions = {\n\t\t...LitElement.shadowRootOptions,\n\t\tdelegatesFocus: true,\n\t}\n\n\tstatic formAssociated = true\n\tinternals: ElementInternals | undefined\n\tget form() {\n\t\treturn this.internals?.form\n\t}\n\n\tprotected updated(changed: Map<string, unknown>) {\n\t\tsuper.updated?.(changed)\n\t\tif (changed.has('value')) {\n\t\t\tthis.internals?.setFormValue(this.value || null)\n\t\t}\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// Combine all UI state streams\n\t\tcombineLatest([\n\t\t\tthis.chipHover$,\n\t\t\tthis.removeHover$,\n\t\t\tthis.focused$,\n\t\t\tthis.pressed$\n\t\t]).pipe(\n\t\t\tmap(([chipHover, removeHover, focused, pressed]) => ({\n\t\t\t\tchipHover,\n\t\t\t\tremoveHover,\n\t\t\t\tfocused,\n\t\t\t\tpressed\n\t\t\t})),\n\t\t\ttap(state => {\n\t\t\t\tthis.uiState = state\n\t\t\t}),\n\t\t\ttakeUntil(this.disconnecting)\n\t\t).subscribe()\n\t}\n\n\tprivate handleChipClick = (e: MouseEvent) => {\n\t\tif (this.disabled) return\n\n\t\t// Add ripple effect\n\t\tconst chip = this.shadowRoot?.querySelector('.chip-container') as HTMLElement\n\t\tif (chip) {\n\t\t\tconst rect = chip.getBoundingClientRect()\n\t\t\tconst x = e.clientX - rect.left\n\t\t\tconst y = e.clientY - rect.top\n\t\t\tconst id = this.nextRippleId++\n\n\t\t\tthis.ripples = [...this.ripples, { x, y, id }]\n\n\t\t\t// Remove ripple after animation\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.ripples = this.ripples.filter(r => r.id !== id)\n\t\t\t}, 600)\n\t\t}\n\n\t\t// Dispatch optional click event (for custom handling if needed)\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('click', {\n\t\t\t\tdetail: { value: this.value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t)\n\t}\n\n\tprivate handleRemove = (e: Event) => {\n\t\tif (this.disabled) return\n\n\t\te.stopPropagation()\n\n\t\t// Dispatch remove event\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('remove', {\n\t\t\t\tdetail: { value: this.value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t)\n\t}\n\n\tprivate handleKeyDown = (e: KeyboardEvent) => {\n\t\tif (this.disabled) return\n\n\t\t// Delete or Backspace removes the chip\n\t\tif ((e.key === 'Delete' || e.key === 'Backspace') && this.removable) {\n\t\t\te.preventDefault()\n\t\t\tthis.handleRemove(e)\n\t\t}\n\t\t// Enter can optionally trigger click\n\t\telse if (e.key === 'Enter') {\n\t\t\te.preventDefault()\n\t\t\tconst clickEvent = new MouseEvent('click', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcancelable: true,\n\t\t\t\tclientX: 0,\n\t\t\t\tclientY: 0\n\t\t\t})\n\t\t\tthis.handleChipClick(clickEvent)\n\t\t}\n\t}\n\n\tprivate handleFocus = () => {\n\t\tthis.focused$.next(true)\n\t}\n\n\tprivate handleBlur = () => {\n\t\tthis.focused$.next(false)\n\t}\n\n\tprotected render(): unknown {\n\t\tconst hasLeadingIcon = this.avatar || this.icon;\n\n\t\tconst chipClasses = {\n\t\t\t'chip-container': true,\n\t\t\t'inline-flex': true,\n\t\t\t'items-center': true,\n\t\t\t'gap-2': true,\n\t\t\t'h-8': true, // M3: 32px height\n\t\t\t'min-h-[32px]': true,\n\t\t\t'rounded-full': true,\n\t\t\t'cursor-default': true,\n\t\t\t'transition-all': true,\n\t\t\t'duration-200': true,\n\t\t\t'select-none': true,\n\t\t\t'text-sm': true, // M3: 14px Label Large\n\t\t\t'font-medium': true, // M3: 500 weight\n\t\t\t'relative': true,\n\t\t\t'overflow-hidden': true,\n\t\t\t'border': true,\n\n\t\t\t// M3 Padding: 8px with icon, 16px without (leading), 8px with trailing icon\n\t\t\t'pl-2': hasLeadingIcon, // 8px with avatar/icon\n\t\t\t'pl-4': !hasLeadingIcon, // 16px without\n\t\t\t'pr-2': this.removable, // 8px with remove button\n\t\t\t'pr-4': !this.removable, // 16px without\n\n\t\t\t// M3 Colors for input chips\n\t\t\t'bg-surface-containerLow': true,\n\t\t\t'text-surface-onVariant': true,\n\t\t\t'border-outline': true,\n\t\t\t'border-solid':true,\n\t\t\t// Input chips are flat (no elevation) per M3\n\n\t\t\t// Focus-visible state\n\t\t\t'focus-visible:outline': !this.disabled,\n\t\t\t'focus-visible:outline-2': !this.disabled,\n\t\t\t'focus-visible:outline-primary': !this.disabled,\n\t\t\t'focus-visible:outline-offset-2': !this.disabled,\n\n\t\t\t// Disabled state\n\t\t\t'opacity-38': this.disabled, // M3 disabled opacity\n\t\t\t'cursor-not-allowed': this.disabled\n\t\t}\n\n\t\tconst removeButtonClasses = {\n\t\t\t'size-[18px]': true, // M3: 18px icon size\n\t\t\t'flex': true,\n\t\t\t'items-center': true,\n\t\t\t'justify-center': true,\n\t\t\t'rounded-full': true,\n\t\t\t'transition-all': true,\n\t\t\t'duration-200': true,\n\t\t\t'cursor-pointer': !this.disabled,\n\t\t\t'-mr-1': true, // Adjust for visual balance\n\n\t\t\t// Hover state for remove button\n\t\t\t'hover:bg-surface-containerHighest': !this.disabled,\n\t\t\t'opacity-50': this.disabled\n\t\t}\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=${classMap(chipClasses)}\n\t\t\t\t@click=${this.handleChipClick}\n\t\t\t\t@keydown=${this.handleKeyDown}\n\t\t\t\t@mouseenter=${() => this.chipHover$.next(true)}\n\t\t\t\t@mouseleave=${() => this.chipHover$.next(false)}\n\t\t\t\t@mousedown=${() => this.pressed$.next(true)}\n\t\t\t\t@mouseup=${() => this.pressed$.next(false)}\n\t\t\t\t@focus=${this.handleFocus}\n\t\t\t\t@blur=${this.handleBlur}\n\t\t\t\trole=\"button\"\n\t\t\t\ttabindex=${this.disabled ? '-1' : '0'}\n\t\t\t\taria-disabled=${this.disabled}\n\t\t\t\taria-label=${this.value}\n\t\t\t>\n\t\t\t\t<!-- Avatar image (if provided) -->\n\t\t\t\t${this.avatar ? html`\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc=${this.avatar}\n\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\tclass=\"avatar-img rounded-full size-5\"\n\t\t\t\t\t/>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Icon (if provided and no avatar) -->\n\t\t\t\t${this.icon && !this.avatar ? html`\n\t\t\t\t\t<span class=\"material-symbols-outlined text-[18px] shrink-0\">\n\t\t\t\t\t\t${this.icon}\n\t\t\t\t\t</span>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Chip content -->\n\t\t\t\t<span class=\"text-sm font-medium leading-5\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</span>\n\n\t\t\t\t<!-- Remove button (shown by default for input chips) -->\n\t\t\t\t${this.removable ? html`\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=${classMap(removeButtonClasses)}\n\t\t\t\t\t\t@click=${this.handleRemove}\n\t\t\t\t\t\t@mouseenter=${() => this.removeHover$.next(true)}\n\t\t\t\t\t\t@mouseleave=${() => this.removeHover$.next(false)}\n\t\t\t\t\t\taria-label=\"Remove\"\n\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t?disabled=${this.disabled}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span class=\"material-symbols-outlined text-[18px]\">\n\t\t\t\t\t\t\tclose\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</button>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Ripple effects -->\n\t\t\t\t${this.ripples.map(ripple => html`\n\t\t\t\t\t<span\n\t\t\t\t\t\tclass=\"ripple\"\n\t\t\t\t\t\tstyle=\"left: ${ripple.x}px; top: ${ripple.y}px;\"\n\t\t\t\t\t></span>\n\t\t\t\t`)}\n\n\t\t\t\t<!-- State layer for M3 hover/focus/pressed states -->\n\t\t\t\t<div class=\"state-layer\"></div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-input-chip': SchmancyInputChip\n\t}\n}\n\nexport type InputChipClickEvent = { value: string }\nexport type InputChipRemoveEvent = { value: string }"],"mappings":"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"}
1
+ {"version":3,"file":"input-chip-p24lkYtY.cjs","names":[],"sources":["../src/chips/input-chip.ts"],"sourcesContent":["import { TailwindElement } from '@mixins/tailwind.mixin'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { BehaviorSubject, combineLatest } from 'rxjs'\nimport { map, takeUntil, tap } from 'rxjs/operators'\n\n/**\n * Input chip — displays user-provided information (tags, recipients, filters) that can be removed but not toggled.\n *\n * IMPORTANT: Per Material Design 3 specification, input chips do NOT have selected state.\n * They represent discrete pieces of user input (like entered tags, selections from lists, etc.)\n * that can only be removed, not toggled on/off.\n *\n * Use cases:\n * - Displaying selected recipients in an email\n * - Showing applied filters that can be removed\n * - Tags or keywords entered by the user\n * - Selected items from a multi-select dropdown\n *\n * @element schmancy-input-chip\n * @summary Removable pill that represents a single user input value. No selected state — use schmancy-chip (filter chip) for toggleable options.\n * @example\n * <schmancy-input-chip value=\"john@example.com\" avatar=\"/avatars/john.jpg\">\n * John Doe\n * </schmancy-input-chip>\n * @platform chip remove - No native equivalent. Composed of a labeled pill + close button. Degrades to a styled `<span>` with a trailing close `<button>` if the tag never registers.\n * @fires click - Optional click event on chip body (value)\n * @fires remove - Dispatched when remove button is clicked (value)\n */\n@customElement('schmancy-input-chip')\nexport class SchmancyInputChip extends TailwindElement(css`\n\t:host {\n\t\tdisplay: inline-block;\n\t\toutline: none;\n\t\tmin-width:fit-content\n\n\t}\n\n\t:host([disabled]) {\n\t\tpointer-events: none;\n\t}\n\n\tbutton {\n\t\tfont-family: inherit;\n\t}\n\n\t.avatar-img {\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\tobject-fit: cover;\n\t}\n\n\t/* Material Symbols font for icons */\n\t.material-symbols-outlined {\n\t\tfont-family: 'Material Symbols Outlined';\n\t\tfont-weight: normal;\n\t\tfont-style: normal;\n\t\tfont-size: 18px;\n\t\tline-height: 1;\n\t\tletter-spacing: normal;\n\t\ttext-transform: none;\n\t\tdisplay: inline-block;\n\t\twhite-space: nowrap;\n\t\tword-wrap: normal;\n\t\tdirection: ltr;\n\t\t-webkit-font-smoothing: antialiased;\n\t\ttext-rendering: optimizeLegibility;\n\t\t-moz-osx-font-smoothing: grayscale;\n\t\tfont-feature-settings: 'liga';\n\t\tvertical-align: middle;\n\t}\n\n\t.ripple {\n\t\tposition: absolute;\n\t\tborder-radius: 50%;\n\t\ttransform: scale(0);\n\t\tanimation: ripple 600ms linear;\n\t\tbackground-color: rgba(0, 0, 0, 0.08);\n\t\tpointer-events: none;\n\t}\n\n\t@keyframes ripple {\n\t\tto {\n\t\t\ttransform: scale(4);\n\t\t\topacity: 0;\n\t\t}\n\t}\n\n\t/* State layer for M3 hover/focus/pressed states */\n\t.state-layer {\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tborder-radius: inherit;\n\t\tpointer-events: none;\n\t\tbackground-color: currentColor;\n\t\topacity: 0;\n\t\ttransition: opacity 200ms ease;\n\t}\n\n\t:host(:not([disabled])) .chip-container:hover .state-layer {\n\t\topacity: 0.08;\n\t}\n\n\t:host(:not([disabled])) .chip-container:focus-visible .state-layer {\n\t\topacity: 0.1;\n\t}\n\n\t:host(:not([disabled])) .chip-container:active .state-layer {\n\t\topacity: 0.1;\n\t}\n`) {\n\t/** Value identifier for the chip */\n\t@property({ type: String, reflect: true })\n\tvalue: string = ''\n\n\t/** Optional icon name (Material Symbols) */\n\t@property({ type: String, reflect: true })\n\ticon: string = ''\n\n\t/** Optional avatar image URL */\n\t@property({ type: String, reflect: true })\n\tavatar: string = ''\n\n\t/** Whether to show remove button (default true for input chips) */\n\t@property({ type: Boolean, reflect: true })\n\tremovable: boolean = true\n\n\t/** Disable the chip */\n\t@property({ type: Boolean, reflect: true })\n\tdisabled: boolean = false\n\n\t/** Elevated style variant */\n\t@property({ type: Boolean, reflect: true })\n\televated: boolean = false\n\n\t// RxJS state streams\n\tprivate chipHover$ = new BehaviorSubject<boolean>(false)\n\tprivate removeHover$ = new BehaviorSubject<boolean>(false)\n\tprivate focused$ = new BehaviorSubject<boolean>(false)\n\tprivate pressed$ = new BehaviorSubject<boolean>(false)\n\n\t// UI state from combined streams\n\t@state() uiState = {\n\t\tchipHover: false,\n\t\tremoveHover: false,\n\t\tfocused: false,\n\t\tpressed: false\n\t}\n\n\t// Ripple effects\n\t@state() private ripples: Array<{ x: number; y: number; id: number }> = []\n\tprivate nextRippleId = 0\n\n\tconstructor() {\n\t\tsuper()\n\t\ttry {\n\t\t\tthis.internals = this.attachInternals()\n\t\t} catch {\n\t\t\tthis.internals = undefined\n\t\t}\n\t}\n\n\tprotected static shadowRootOptions = {\n\t\t...LitElement.shadowRootOptions,\n\t\tdelegatesFocus: true,\n\t}\n\n\tstatic formAssociated = true\n\tinternals: ElementInternals | undefined\n\tget form() {\n\t\treturn this.internals?.form\n\t}\n\n\tprotected updated(changed: Map<string, unknown>) {\n\t\tsuper.updated?.(changed)\n\t\tif (changed.has('value')) {\n\t\t\tthis.internals?.setFormValue(this.value || null)\n\t\t}\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// Combine all UI state streams\n\t\tcombineLatest([\n\t\t\tthis.chipHover$,\n\t\t\tthis.removeHover$,\n\t\t\tthis.focused$,\n\t\t\tthis.pressed$\n\t\t]).pipe(\n\t\t\tmap(([chipHover, removeHover, focused, pressed]) => ({\n\t\t\t\tchipHover,\n\t\t\t\tremoveHover,\n\t\t\t\tfocused,\n\t\t\t\tpressed\n\t\t\t})),\n\t\t\ttap(state => {\n\t\t\t\tthis.uiState = state\n\t\t\t}),\n\t\t\ttakeUntil(this.disconnecting)\n\t\t).subscribe()\n\t}\n\n\tprivate handleChipClick = (e: MouseEvent) => {\n\t\tif (this.disabled) return\n\n\t\t// Add ripple effect\n\t\tconst chip = this.shadowRoot?.querySelector('.chip-container') as HTMLElement\n\t\tif (chip) {\n\t\t\tconst rect = chip.getBoundingClientRect()\n\t\t\tconst x = e.clientX - rect.left\n\t\t\tconst y = e.clientY - rect.top\n\t\t\tconst id = this.nextRippleId++\n\n\t\t\tthis.ripples = [...this.ripples, { x, y, id }]\n\n\t\t\t// Remove ripple after animation\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.ripples = this.ripples.filter(r => r.id !== id)\n\t\t\t}, 600)\n\t\t}\n\n\t\t// Dispatch optional click event (for custom handling if needed)\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('click', {\n\t\t\t\tdetail: { value: this.value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t)\n\t}\n\n\tprivate handleRemove = (e: Event) => {\n\t\tif (this.disabled) return\n\n\t\te.stopPropagation()\n\n\t\t// Dispatch remove event\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('remove', {\n\t\t\t\tdetail: { value: this.value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t)\n\t}\n\n\tprivate handleKeyDown = (e: KeyboardEvent) => {\n\t\tif (this.disabled) return\n\n\t\t// Delete or Backspace removes the chip\n\t\tif ((e.key === 'Delete' || e.key === 'Backspace') && this.removable) {\n\t\t\te.preventDefault()\n\t\t\tthis.handleRemove(e)\n\t\t}\n\t\t// Enter can optionally trigger click\n\t\telse if (e.key === 'Enter') {\n\t\t\te.preventDefault()\n\t\t\tconst clickEvent = new MouseEvent('click', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcancelable: true,\n\t\t\t\tclientX: 0,\n\t\t\t\tclientY: 0\n\t\t\t})\n\t\t\tthis.handleChipClick(clickEvent)\n\t\t}\n\t}\n\n\tprivate handleFocus = () => {\n\t\tthis.focused$.next(true)\n\t}\n\n\tprivate handleBlur = () => {\n\t\tthis.focused$.next(false)\n\t}\n\n\tprotected render(): unknown {\n\t\tconst hasLeadingIcon = this.avatar || this.icon;\n\n\t\tconst chipClasses = {\n\t\t\t'chip-container': true,\n\t\t\t'inline-flex': true,\n\t\t\t'items-center': true,\n\t\t\t'gap-2': true,\n\t\t\t'h-8': true, // M3: 32px height\n\t\t\t'min-h-[32px]': true,\n\t\t\t'rounded-full': true,\n\t\t\t'cursor-default': true,\n\t\t\t'transition-all': true,\n\t\t\t'duration-200': true,\n\t\t\t'select-none': true,\n\t\t\t'text-sm': true, // M3: 14px Label Large\n\t\t\t'font-medium': true, // M3: 500 weight\n\t\t\t'relative': true,\n\t\t\t'overflow-hidden': true,\n\t\t\t'border': true,\n\n\t\t\t// M3 Padding: 8px with icon, 16px without (leading), 8px with trailing icon\n\t\t\t'pl-2': hasLeadingIcon, // 8px with avatar/icon\n\t\t\t'pl-4': !hasLeadingIcon, // 16px without\n\t\t\t'pr-2': this.removable, // 8px with remove button\n\t\t\t'pr-4': !this.removable, // 16px without\n\n\t\t\t// M3 Colors for input chips\n\t\t\t'bg-surface-containerLow': true,\n\t\t\t'text-surface-onVariant': true,\n\t\t\t'border-outline': true,\n\t\t\t'border-solid':true,\n\t\t\t// Input chips are flat (no elevation) per M3\n\n\t\t\t// Focus-visible state\n\t\t\t'focus-visible:outline': !this.disabled,\n\t\t\t'focus-visible:outline-2': !this.disabled,\n\t\t\t'focus-visible:outline-primary': !this.disabled,\n\t\t\t'focus-visible:outline-offset-2': !this.disabled,\n\n\t\t\t// Disabled state\n\t\t\t'opacity-38': this.disabled, // M3 disabled opacity\n\t\t\t'cursor-not-allowed': this.disabled\n\t\t}\n\n\t\tconst removeButtonClasses = {\n\t\t\t'size-[18px]': true, // M3: 18px icon size\n\t\t\t'flex': true,\n\t\t\t'items-center': true,\n\t\t\t'justify-center': true,\n\t\t\t'rounded-full': true,\n\t\t\t'transition-all': true,\n\t\t\t'duration-200': true,\n\t\t\t'cursor-pointer': !this.disabled,\n\t\t\t'-mr-1': true, // Adjust for visual balance\n\n\t\t\t// Hover state for remove button\n\t\t\t'hover:bg-surface-containerHighest': !this.disabled,\n\t\t\t'opacity-50': this.disabled\n\t\t}\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=${classMap(chipClasses)}\n\t\t\t\t@click=${this.handleChipClick}\n\t\t\t\t@keydown=${this.handleKeyDown}\n\t\t\t\t@mouseenter=${() => this.chipHover$.next(true)}\n\t\t\t\t@mouseleave=${() => this.chipHover$.next(false)}\n\t\t\t\t@mousedown=${() => this.pressed$.next(true)}\n\t\t\t\t@mouseup=${() => this.pressed$.next(false)}\n\t\t\t\t@focus=${this.handleFocus}\n\t\t\t\t@blur=${this.handleBlur}\n\t\t\t\trole=\"button\"\n\t\t\t\ttabindex=${this.disabled ? '-1' : '0'}\n\t\t\t\taria-disabled=${this.disabled}\n\t\t\t\taria-label=${this.value}\n\t\t\t>\n\t\t\t\t<!-- Avatar image (if provided) -->\n\t\t\t\t${this.avatar ? html`\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc=${this.avatar}\n\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\tclass=\"avatar-img rounded-full size-5\"\n\t\t\t\t\t/>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Icon (if provided and no avatar) -->\n\t\t\t\t${this.icon && !this.avatar ? html`\n\t\t\t\t\t<span class=\"material-symbols-outlined text-[18px] shrink-0\">\n\t\t\t\t\t\t${this.icon}\n\t\t\t\t\t</span>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Chip content -->\n\t\t\t\t<span class=\"text-sm font-medium leading-5\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</span>\n\n\t\t\t\t<!-- Remove button (shown by default for input chips) -->\n\t\t\t\t${this.removable ? html`\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=${classMap(removeButtonClasses)}\n\t\t\t\t\t\t@click=${this.handleRemove}\n\t\t\t\t\t\t@mouseenter=${() => this.removeHover$.next(true)}\n\t\t\t\t\t\t@mouseleave=${() => this.removeHover$.next(false)}\n\t\t\t\t\t\taria-label=\"Remove\"\n\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t?disabled=${this.disabled}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span class=\"material-symbols-outlined text-[18px]\">\n\t\t\t\t\t\t\tclose\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</button>\n\t\t\t\t` : ''}\n\n\t\t\t\t<!-- Ripple effects -->\n\t\t\t\t${this.ripples.map(ripple => html`\n\t\t\t\t\t<span\n\t\t\t\t\t\tclass=\"ripple\"\n\t\t\t\t\t\tstyle=\"left: ${ripple.x}px; top: ${ripple.y}px;\"\n\t\t\t\t\t></span>\n\t\t\t\t`)}\n\n\t\t\t\t<!-- State layer for M3 hover/focus/pressed states -->\n\t\t\t\t<div class=\"state-layer\"></div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-input-chip': SchmancyInputChip\n\t}\n}\n\nexport type InputChipClickEvent = { value: string }\nexport type InputChipRemoveEvent = { value: string }"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"radio-group-B72sYGnS.js","names":[],"sources":["../src/radio-group/radio-group.scss?inline","../src/radio-group/radio-group.ts","../src/radio-group/radio-button.ts"],"sourcesContent":[":host {\n\tdisplay: inherit;\n\tposition: inherit;\n}\n","import { html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { Subject, fromEvent, takeUntil } from 'rxjs'\nimport style from './radio-group.scss?inline'\nimport { TailwindElement } from '@mixins/index'\nimport { when } from 'lit/directives/when.js'\nimport { FormFieldMixin } from '../../mixins/formField.mixin'\n\nexport type SchmancyRadioGroupOption = {\n\tlabel: string\n\tvalue: string\n}\nexport type SchmancyRadioGroupChangeEvent = CustomEvent<{\n\tvalue: string\n}>\n@customElement('schmancy-radio-group')\nexport class RadioGroup extends FormFieldMixin(TailwindElement(style)) {\n\t@property({ type: String }) override label = ''\n\t@property({ type: String }) override name = ''\n\t@property({ type: String }) override value = ''\n\t@property({ type: Array }) options: SchmancyRadioGroupOption[] = []\n\t@property({ type: Boolean }) override required: boolean = false\n\tprivate selection$ = new Subject<string>()\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\tthis.selection$.pipe(takeUntil(this.disconnecting)).subscribe(value => {\n\t\t\tthis.value = value\n\t\t\tthis.emitChange({ value })\n\t\t\t// Update all child radio buttons\n\t\t\tthis.updateChildRadioButtons()\n\t\t})\n\n\t\t// Listen for radio button clicks from children\n\t\tfromEvent<CustomEvent>(this, 'radio-button-click')\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe((e: CustomEvent) => {\n\t\t\t\tthis.selection$.next(e.detail.value)\n\t\t\t})\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\t// Subscriptions are automatically cleaned up via takeUntil(this.disconnecting)\n\t\tthis.selection$?.complete()\n\t}\n\t\n\tprivate handleSelection(value: string) {\n\t\tthis.selection$.next(value)\n\t}\n\t\n\tprivate updateChildRadioButtons() {\n\t\t// Update child radio buttons checked state\n\t\tconst radioButtons = this.querySelectorAll('schmancy-radio-button')\n\t\tradioButtons.forEach(button => {\n\t\t\tconst buttonValue = button.getAttribute('value')\n\t\t\tif (buttonValue === this.value) {\n\t\t\t\tbutton.setAttribute('checked', '')\n\t\t\t} else {\n\t\t\t\tbutton.removeAttribute('checked')\n\t\t\t}\n\t\t})\n\t}\n\t\n\t// For backwards compatibility with direct option setting\n\tupdated(changedProperties: Map<string, any>) {\n\t\tsuper.updated(changedProperties)\n\t\tif (changedProperties.has('value')) {\n\t\t\tthis.updateChildRadioButtons()\n\t\t}\n\t}\n\n\trender() {\n\t\t// Check if we have any slotted radio buttons\n\t\tconst hasSlottedContent = this.childElementCount > 0\n\t\t\n\t\treturn html`\n\t\t\t<div class=\"grid gap-4\">\n\t\t\t\t${when(this.label, () => html` <label class=\"text-base font-semibold text-surface-on\">${this.label}</label> `)}\n\t\t\t\t\n\t\t\t\t${hasSlottedContent ? \n\t\t\t\t\thtml`<slot></slot>` :\n\t\t\t\t\tthis.options?.map(option => html`\n\t\t\t\t\t\t<div class=\"flex items-center\">\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t.required=${this.required}\n\t\t\t\t\t\t\t\tid=${option.value}\n\t\t\t\t\t\t\t\tclass=\"h-4 w-4 border-outline text-primary-default focus:ring-primary-default\"\n\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\tname=${this.name}\n\t\t\t\t\t\t\t\t.value=${option.value}\n\t\t\t\t\t\t\t\t.checked=${option.value === this.value}\n\t\t\t\t\t\t\t\t@change=${() => this.handleSelection(option.value)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<label for=${option.value} class=\"ml-3 block text-sm font-medium leading-6 text-surface-on\">\n\t\t\t\t\t\t\t\t${option.label || option.value}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t`)\n\t\t\t\t}\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-radio-group': RadioGroup\n\t}\n}\n","import { TailwindElement } from '@mixins/index'\nimport { html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { FormFieldMixin } from '../../mixins/formField.mixin'\nimport { fromEvent, takeUntil } from 'rxjs'\n\n/**\n * Radio button component for use within radio groups.\n *\n * @prop {string} name - Name attribute for grouping radio buttons\n * @prop {string} value - Value of this radio button\n * @prop {boolean} checked - Whether the radio button is selected\n * @prop {boolean} disabled - Whether the radio button is disabled\n */\n@customElement('schmancy-radio-button')\nexport class RadioButton extends FormFieldMixin(TailwindElement()) {\n\t@property({ type: String }) override value = ''\n\t@property({ type: Boolean, reflect: true }) checked = false\n\t@property({ type: Boolean }) override disabled = false\n\t@property({ type: String }) override name = ''\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\t// Listen for click events\n\t\tfromEvent<MouseEvent>(this, 'click')\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe(this.handleClick)\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\t// Event listeners are automatically cleaned up via takeUntil(this.disconnecting)\n\t}\n\n\tprivate handleClick() {\n\t\tif (this.disabled) return\n\n\t\t// Find parent radio-group if exists\n\t\tconst radioGroup = this.closest('schmancy-radio-group')\n\t\tif (radioGroup) {\n\t\t\t// Let the radio-group handle the change\n\t\t\tconst event = new CustomEvent('radio-button-click', {\n\t\t\t\tdetail: { value: this.value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t\tthis.dispatchEvent(event)\n\t\t} else {\n\t\t\t// Standalone usage\n\t\t\tthis.checked = true\n\t\t\tthis.emitChange({ value: this.value })\n\t\t}\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<label class=\"relative flex items-start cursor-pointer\">\n\t\t\t\t<div class=\"flex items-center h-6\">\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tclass=\"h-4 w-4 text-primary-default focus:ring-primary-container border-outline\"\n\t\t\t\t\t\t.value=${this.value}\n\t\t\t\t\t\t.checked=${this.checked}\n\t\t\t\t\t\t.disabled=${this.disabled}\n\t\t\t\t\t\t.name=${this.name}\n\t\t\t\t\t\t@change=${() => {}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t<slot name=\"label\"></slot>\n\t\t\t\t</div>\n\t\t\t</label>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-radio-button': RadioButton\n\t}\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"radio-group-B72sYGnS.js","names":[],"sources":["../src/radio-group/radio-group.scss?inline","../src/radio-group/radio-group.ts","../src/radio-group/radio-button.ts"],"sourcesContent":[":host {\n\tdisplay: inherit;\n\tposition: inherit;\n}\n","import { html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { Subject, fromEvent, takeUntil } from 'rxjs'\nimport style from './radio-group.scss?inline'\nimport { TailwindElement } from '@mixins/index'\nimport { when } from 'lit/directives/when.js'\nimport { FormFieldMixin } from '../../mixins/formField.mixin'\n\nexport type SchmancyRadioGroupOption = {\n\tlabel: string\n\tvalue: string\n}\nexport type SchmancyRadioGroupChangeEvent = CustomEvent<{\n\tvalue: string\n}>\n/**\n * Radio-button group — single-select from a static list of mutually-exclusive options. Form-associated.\n *\n * @element schmancy-radio-group\n * @summary Use for 2–5 mutually-exclusive options where all should stay visible (\"Shipping: standard / express / overnight\"). Prefer schmancy-select when the list grows.\n * @example\n * <schmancy-radio-group\n * name=\"shipping\"\n * label=\"Shipping\"\n * .options=${[\n * { label: 'Standard (5 days)', value: 'standard' },\n * { label: 'Express (2 days)', value: 'express' },\n * { label: 'Overnight', value: 'overnight' },\n * ]}\n * ></schmancy-radio-group>\n * @platform radiogroup change - Renders schmancy-radio-button children. Degrades to a fieldset with native `<input type=\"radio\" name=\"…\">` siblings if the tag never registers.\n * @fires change - `SchmancyRadioGroupChangeEvent` with the selected `value`.\n */\n@customElement('schmancy-radio-group')\nexport class RadioGroup extends FormFieldMixin(TailwindElement(style)) {\n\t@property({ type: String }) override label = ''\n\t@property({ type: String }) override name = ''\n\t@property({ type: String }) override value = ''\n\t@property({ type: Array }) options: SchmancyRadioGroupOption[] = []\n\t@property({ type: Boolean }) override required: boolean = false\n\tprivate selection$ = new Subject<string>()\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\tthis.selection$.pipe(takeUntil(this.disconnecting)).subscribe(value => {\n\t\t\tthis.value = value\n\t\t\tthis.emitChange({ value })\n\t\t\t// Update all child radio buttons\n\t\t\tthis.updateChildRadioButtons()\n\t\t})\n\n\t\t// Listen for radio button clicks from children\n\t\tfromEvent<CustomEvent>(this, 'radio-button-click')\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe((e: CustomEvent) => {\n\t\t\t\tthis.selection$.next(e.detail.value)\n\t\t\t})\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\t// Subscriptions are automatically cleaned up via takeUntil(this.disconnecting)\n\t\tthis.selection$?.complete()\n\t}\n\t\n\tprivate handleSelection(value: string) {\n\t\tthis.selection$.next(value)\n\t}\n\t\n\tprivate updateChildRadioButtons() {\n\t\t// Update child radio buttons checked state\n\t\tconst radioButtons = this.querySelectorAll('schmancy-radio-button')\n\t\tradioButtons.forEach(button => {\n\t\t\tconst buttonValue = button.getAttribute('value')\n\t\t\tif (buttonValue === this.value) {\n\t\t\t\tbutton.setAttribute('checked', '')\n\t\t\t} else {\n\t\t\t\tbutton.removeAttribute('checked')\n\t\t\t}\n\t\t})\n\t}\n\t\n\t// For backwards compatibility with direct option setting\n\tupdated(changedProperties: Map<string, any>) {\n\t\tsuper.updated(changedProperties)\n\t\tif (changedProperties.has('value')) {\n\t\t\tthis.updateChildRadioButtons()\n\t\t}\n\t}\n\n\trender() {\n\t\t// Check if we have any slotted radio buttons\n\t\tconst hasSlottedContent = this.childElementCount > 0\n\t\t\n\t\treturn html`\n\t\t\t<div class=\"grid gap-4\">\n\t\t\t\t${when(this.label, () => html` <label class=\"text-base font-semibold text-surface-on\">${this.label}</label> `)}\n\t\t\t\t\n\t\t\t\t${hasSlottedContent ? \n\t\t\t\t\thtml`<slot></slot>` :\n\t\t\t\t\tthis.options?.map(option => html`\n\t\t\t\t\t\t<div class=\"flex items-center\">\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t.required=${this.required}\n\t\t\t\t\t\t\t\tid=${option.value}\n\t\t\t\t\t\t\t\tclass=\"h-4 w-4 border-outline text-primary-default focus:ring-primary-default\"\n\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\tname=${this.name}\n\t\t\t\t\t\t\t\t.value=${option.value}\n\t\t\t\t\t\t\t\t.checked=${option.value === this.value}\n\t\t\t\t\t\t\t\t@change=${() => this.handleSelection(option.value)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<label for=${option.value} class=\"ml-3 block text-sm font-medium leading-6 text-surface-on\">\n\t\t\t\t\t\t\t\t${option.label || option.value}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t`)\n\t\t\t\t}\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-radio-group': RadioGroup\n\t}\n}\n","import { TailwindElement } from '@mixins/index'\nimport { html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { FormFieldMixin } from '../../mixins/formField.mixin'\nimport { fromEvent, takeUntil } from 'rxjs'\n\n/**\n * Single radio button — always rendered as a child of `<schmancy-radio-group>`, never standalone.\n *\n * @element schmancy-radio-button\n * @summary Low-level primitive. Use schmancy-radio-group and pass `.options` for the common path; only instantiate schmancy-radio-button directly when you need per-button custom rendering.\n * @example\n * <schmancy-radio-group name=\"plan\">\n * <schmancy-radio-button value=\"free\">Free</schmancy-radio-button>\n * <schmancy-radio-button value=\"pro\" checked>Pro</schmancy-radio-button>\n * </schmancy-radio-group>\n * @platform radio change - Schmancy-skinned `<input type=\"radio\">` semantics. Degrades to native radio if the tag never registers.\n *\n * @prop {string} name - Name attribute for grouping radio buttons\n * @prop {string} value - Value of this radio button\n * @prop {boolean} checked - Whether the radio button is selected\n * @prop {boolean} disabled - Whether the radio button is disabled\n */\n@customElement('schmancy-radio-button')\nexport class RadioButton extends FormFieldMixin(TailwindElement()) {\n\t@property({ type: String }) override value = ''\n\t@property({ type: Boolean, reflect: true }) checked = false\n\t@property({ type: Boolean }) override disabled = false\n\t@property({ type: String }) override name = ''\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\t// Listen for click events\n\t\tfromEvent<MouseEvent>(this, 'click')\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe(this.handleClick)\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\t// Event listeners are automatically cleaned up via takeUntil(this.disconnecting)\n\t}\n\n\tprivate handleClick() {\n\t\tif (this.disabled) return\n\n\t\t// Find parent radio-group if exists\n\t\tconst radioGroup = this.closest('schmancy-radio-group')\n\t\tif (radioGroup) {\n\t\t\t// Let the radio-group handle the change\n\t\t\tconst event = new CustomEvent('radio-button-click', {\n\t\t\t\tdetail: { value: this.value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t\tthis.dispatchEvent(event)\n\t\t} else {\n\t\t\t// Standalone usage\n\t\t\tthis.checked = true\n\t\t\tthis.emitChange({ value: this.value })\n\t\t}\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<label class=\"relative flex items-start cursor-pointer\">\n\t\t\t\t<div class=\"flex items-center h-6\">\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tclass=\"h-4 w-4 text-primary-default focus:ring-primary-container border-outline\"\n\t\t\t\t\t\t.value=${this.value}\n\t\t\t\t\t\t.checked=${this.checked}\n\t\t\t\t\t\t.disabled=${this.disabled}\n\t\t\t\t\t\t.name=${this.name}\n\t\t\t\t\t\t@change=${() => {}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t<slot name=\"label\"></slot>\n\t\t\t\t</div>\n\t\t\t</label>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-radio-button': RadioButton\n\t}\n}\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"radio-group-B7DuNxUq.cjs","names":[],"sources":["../src/radio-group/radio-group.scss?inline","../src/radio-group/radio-group.ts","../src/radio-group/radio-button.ts"],"sourcesContent":[":host {\n\tdisplay: inherit;\n\tposition: inherit;\n}\n","import { html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { Subject, fromEvent, takeUntil } from 'rxjs'\nimport style from './radio-group.scss?inline'\nimport { TailwindElement } from '@mixins/index'\nimport { when } from 'lit/directives/when.js'\nimport { FormFieldMixin } from '../../mixins/formField.mixin'\n\nexport type SchmancyRadioGroupOption = {\n\tlabel: string\n\tvalue: string\n}\nexport type SchmancyRadioGroupChangeEvent = CustomEvent<{\n\tvalue: string\n}>\n@customElement('schmancy-radio-group')\nexport class RadioGroup extends FormFieldMixin(TailwindElement(style)) {\n\t@property({ type: String }) override label = ''\n\t@property({ type: String }) override name = ''\n\t@property({ type: String }) override value = ''\n\t@property({ type: Array }) options: SchmancyRadioGroupOption[] = []\n\t@property({ type: Boolean }) override required: boolean = false\n\tprivate selection$ = new Subject<string>()\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\tthis.selection$.pipe(takeUntil(this.disconnecting)).subscribe(value => {\n\t\t\tthis.value = value\n\t\t\tthis.emitChange({ value })\n\t\t\t// Update all child radio buttons\n\t\t\tthis.updateChildRadioButtons()\n\t\t})\n\n\t\t// Listen for radio button clicks from children\n\t\tfromEvent<CustomEvent>(this, 'radio-button-click')\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe((e: CustomEvent) => {\n\t\t\t\tthis.selection$.next(e.detail.value)\n\t\t\t})\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\t// Subscriptions are automatically cleaned up via takeUntil(this.disconnecting)\n\t\tthis.selection$?.complete()\n\t}\n\t\n\tprivate handleSelection(value: string) {\n\t\tthis.selection$.next(value)\n\t}\n\t\n\tprivate updateChildRadioButtons() {\n\t\t// Update child radio buttons checked state\n\t\tconst radioButtons = this.querySelectorAll('schmancy-radio-button')\n\t\tradioButtons.forEach(button => {\n\t\t\tconst buttonValue = button.getAttribute('value')\n\t\t\tif (buttonValue === this.value) {\n\t\t\t\tbutton.setAttribute('checked', '')\n\t\t\t} else {\n\t\t\t\tbutton.removeAttribute('checked')\n\t\t\t}\n\t\t})\n\t}\n\t\n\t// For backwards compatibility with direct option setting\n\tupdated(changedProperties: Map<string, any>) {\n\t\tsuper.updated(changedProperties)\n\t\tif (changedProperties.has('value')) {\n\t\t\tthis.updateChildRadioButtons()\n\t\t}\n\t}\n\n\trender() {\n\t\t// Check if we have any slotted radio buttons\n\t\tconst hasSlottedContent = this.childElementCount > 0\n\t\t\n\t\treturn html`\n\t\t\t<div class=\"grid gap-4\">\n\t\t\t\t${when(this.label, () => html` <label class=\"text-base font-semibold text-surface-on\">${this.label}</label> `)}\n\t\t\t\t\n\t\t\t\t${hasSlottedContent ? \n\t\t\t\t\thtml`<slot></slot>` :\n\t\t\t\t\tthis.options?.map(option => html`\n\t\t\t\t\t\t<div class=\"flex items-center\">\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t.required=${this.required}\n\t\t\t\t\t\t\t\tid=${option.value}\n\t\t\t\t\t\t\t\tclass=\"h-4 w-4 border-outline text-primary-default focus:ring-primary-default\"\n\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\tname=${this.name}\n\t\t\t\t\t\t\t\t.value=${option.value}\n\t\t\t\t\t\t\t\t.checked=${option.value === this.value}\n\t\t\t\t\t\t\t\t@change=${() => this.handleSelection(option.value)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<label for=${option.value} class=\"ml-3 block text-sm font-medium leading-6 text-surface-on\">\n\t\t\t\t\t\t\t\t${option.label || option.value}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t`)\n\t\t\t\t}\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-radio-group': RadioGroup\n\t}\n}\n","import { TailwindElement } from '@mixins/index'\nimport { html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { FormFieldMixin } from '../../mixins/formField.mixin'\nimport { fromEvent, takeUntil } from 'rxjs'\n\n/**\n * Radio button component for use within radio groups.\n *\n * @prop {string} name - Name attribute for grouping radio buttons\n * @prop {string} value - Value of this radio button\n * @prop {boolean} checked - Whether the radio button is selected\n * @prop {boolean} disabled - Whether the radio button is disabled\n */\n@customElement('schmancy-radio-button')\nexport class RadioButton extends FormFieldMixin(TailwindElement()) {\n\t@property({ type: String }) override value = ''\n\t@property({ type: Boolean, reflect: true }) checked = false\n\t@property({ type: Boolean }) override disabled = false\n\t@property({ type: String }) override name = ''\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\t// Listen for click events\n\t\tfromEvent<MouseEvent>(this, 'click')\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe(this.handleClick)\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\t// Event listeners are automatically cleaned up via takeUntil(this.disconnecting)\n\t}\n\n\tprivate handleClick() {\n\t\tif (this.disabled) return\n\n\t\t// Find parent radio-group if exists\n\t\tconst radioGroup = this.closest('schmancy-radio-group')\n\t\tif (radioGroup) {\n\t\t\t// Let the radio-group handle the change\n\t\t\tconst event = new CustomEvent('radio-button-click', {\n\t\t\t\tdetail: { value: this.value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t\tthis.dispatchEvent(event)\n\t\t} else {\n\t\t\t// Standalone usage\n\t\t\tthis.checked = true\n\t\t\tthis.emitChange({ value: this.value })\n\t\t}\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<label class=\"relative flex items-start cursor-pointer\">\n\t\t\t\t<div class=\"flex items-center h-6\">\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tclass=\"h-4 w-4 text-primary-default focus:ring-primary-container border-outline\"\n\t\t\t\t\t\t.value=${this.value}\n\t\t\t\t\t\t.checked=${this.checked}\n\t\t\t\t\t\t.disabled=${this.disabled}\n\t\t\t\t\t\t.name=${this.name}\n\t\t\t\t\t\t@change=${() => {}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t<slot name=\"label\"></slot>\n\t\t\t\t</div>\n\t\t\t</label>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-radio-button': RadioButton\n\t}\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"radio-group-B7DuNxUq.cjs","names":[],"sources":["../src/radio-group/radio-group.scss?inline","../src/radio-group/radio-group.ts","../src/radio-group/radio-button.ts"],"sourcesContent":[":host {\n\tdisplay: inherit;\n\tposition: inherit;\n}\n","import { html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { Subject, fromEvent, takeUntil } from 'rxjs'\nimport style from './radio-group.scss?inline'\nimport { TailwindElement } from '@mixins/index'\nimport { when } from 'lit/directives/when.js'\nimport { FormFieldMixin } from '../../mixins/formField.mixin'\n\nexport type SchmancyRadioGroupOption = {\n\tlabel: string\n\tvalue: string\n}\nexport type SchmancyRadioGroupChangeEvent = CustomEvent<{\n\tvalue: string\n}>\n/**\n * Radio-button group — single-select from a static list of mutually-exclusive options. Form-associated.\n *\n * @element schmancy-radio-group\n * @summary Use for 2–5 mutually-exclusive options where all should stay visible (\"Shipping: standard / express / overnight\"). Prefer schmancy-select when the list grows.\n * @example\n * <schmancy-radio-group\n * name=\"shipping\"\n * label=\"Shipping\"\n * .options=${[\n * { label: 'Standard (5 days)', value: 'standard' },\n * { label: 'Express (2 days)', value: 'express' },\n * { label: 'Overnight', value: 'overnight' },\n * ]}\n * ></schmancy-radio-group>\n * @platform radiogroup change - Renders schmancy-radio-button children. Degrades to a fieldset with native `<input type=\"radio\" name=\"…\">` siblings if the tag never registers.\n * @fires change - `SchmancyRadioGroupChangeEvent` with the selected `value`.\n */\n@customElement('schmancy-radio-group')\nexport class RadioGroup extends FormFieldMixin(TailwindElement(style)) {\n\t@property({ type: String }) override label = ''\n\t@property({ type: String }) override name = ''\n\t@property({ type: String }) override value = ''\n\t@property({ type: Array }) options: SchmancyRadioGroupOption[] = []\n\t@property({ type: Boolean }) override required: boolean = false\n\tprivate selection$ = new Subject<string>()\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\tthis.selection$.pipe(takeUntil(this.disconnecting)).subscribe(value => {\n\t\t\tthis.value = value\n\t\t\tthis.emitChange({ value })\n\t\t\t// Update all child radio buttons\n\t\t\tthis.updateChildRadioButtons()\n\t\t})\n\n\t\t// Listen for radio button clicks from children\n\t\tfromEvent<CustomEvent>(this, 'radio-button-click')\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe((e: CustomEvent) => {\n\t\t\t\tthis.selection$.next(e.detail.value)\n\t\t\t})\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\t// Subscriptions are automatically cleaned up via takeUntil(this.disconnecting)\n\t\tthis.selection$?.complete()\n\t}\n\t\n\tprivate handleSelection(value: string) {\n\t\tthis.selection$.next(value)\n\t}\n\t\n\tprivate updateChildRadioButtons() {\n\t\t// Update child radio buttons checked state\n\t\tconst radioButtons = this.querySelectorAll('schmancy-radio-button')\n\t\tradioButtons.forEach(button => {\n\t\t\tconst buttonValue = button.getAttribute('value')\n\t\t\tif (buttonValue === this.value) {\n\t\t\t\tbutton.setAttribute('checked', '')\n\t\t\t} else {\n\t\t\t\tbutton.removeAttribute('checked')\n\t\t\t}\n\t\t})\n\t}\n\t\n\t// For backwards compatibility with direct option setting\n\tupdated(changedProperties: Map<string, any>) {\n\t\tsuper.updated(changedProperties)\n\t\tif (changedProperties.has('value')) {\n\t\t\tthis.updateChildRadioButtons()\n\t\t}\n\t}\n\n\trender() {\n\t\t// Check if we have any slotted radio buttons\n\t\tconst hasSlottedContent = this.childElementCount > 0\n\t\t\n\t\treturn html`\n\t\t\t<div class=\"grid gap-4\">\n\t\t\t\t${when(this.label, () => html` <label class=\"text-base font-semibold text-surface-on\">${this.label}</label> `)}\n\t\t\t\t\n\t\t\t\t${hasSlottedContent ? \n\t\t\t\t\thtml`<slot></slot>` :\n\t\t\t\t\tthis.options?.map(option => html`\n\t\t\t\t\t\t<div class=\"flex items-center\">\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t.required=${this.required}\n\t\t\t\t\t\t\t\tid=${option.value}\n\t\t\t\t\t\t\t\tclass=\"h-4 w-4 border-outline text-primary-default focus:ring-primary-default\"\n\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\tname=${this.name}\n\t\t\t\t\t\t\t\t.value=${option.value}\n\t\t\t\t\t\t\t\t.checked=${option.value === this.value}\n\t\t\t\t\t\t\t\t@change=${() => this.handleSelection(option.value)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<label for=${option.value} class=\"ml-3 block text-sm font-medium leading-6 text-surface-on\">\n\t\t\t\t\t\t\t\t${option.label || option.value}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t`)\n\t\t\t\t}\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-radio-group': RadioGroup\n\t}\n}\n","import { TailwindElement } from '@mixins/index'\nimport { html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { FormFieldMixin } from '../../mixins/formField.mixin'\nimport { fromEvent, takeUntil } from 'rxjs'\n\n/**\n * Single radio button — always rendered as a child of `<schmancy-radio-group>`, never standalone.\n *\n * @element schmancy-radio-button\n * @summary Low-level primitive. Use schmancy-radio-group and pass `.options` for the common path; only instantiate schmancy-radio-button directly when you need per-button custom rendering.\n * @example\n * <schmancy-radio-group name=\"plan\">\n * <schmancy-radio-button value=\"free\">Free</schmancy-radio-button>\n * <schmancy-radio-button value=\"pro\" checked>Pro</schmancy-radio-button>\n * </schmancy-radio-group>\n * @platform radio change - Schmancy-skinned `<input type=\"radio\">` semantics. Degrades to native radio if the tag never registers.\n *\n * @prop {string} name - Name attribute for grouping radio buttons\n * @prop {string} value - Value of this radio button\n * @prop {boolean} checked - Whether the radio button is selected\n * @prop {boolean} disabled - Whether the radio button is disabled\n */\n@customElement('schmancy-radio-button')\nexport class RadioButton extends FormFieldMixin(TailwindElement()) {\n\t@property({ type: String }) override value = ''\n\t@property({ type: Boolean, reflect: true }) checked = false\n\t@property({ type: Boolean }) override disabled = false\n\t@property({ type: String }) override name = ''\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\t// Listen for click events\n\t\tfromEvent<MouseEvent>(this, 'click')\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe(this.handleClick)\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\t// Event listeners are automatically cleaned up via takeUntil(this.disconnecting)\n\t}\n\n\tprivate handleClick() {\n\t\tif (this.disabled) return\n\n\t\t// Find parent radio-group if exists\n\t\tconst radioGroup = this.closest('schmancy-radio-group')\n\t\tif (radioGroup) {\n\t\t\t// Let the radio-group handle the change\n\t\t\tconst event = new CustomEvent('radio-button-click', {\n\t\t\t\tdetail: { value: this.value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t\tthis.dispatchEvent(event)\n\t\t} else {\n\t\t\t// Standalone usage\n\t\t\tthis.checked = true\n\t\t\tthis.emitChange({ value: this.value })\n\t\t}\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<label class=\"relative flex items-start cursor-pointer\">\n\t\t\t\t<div class=\"flex items-center h-6\">\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tclass=\"h-4 w-4 text-primary-default focus:ring-primary-container border-outline\"\n\t\t\t\t\t\t.value=${this.value}\n\t\t\t\t\t\t.checked=${this.checked}\n\t\t\t\t\t\t.disabled=${this.disabled}\n\t\t\t\t\t\t.name=${this.name}\n\t\t\t\t\t\t@change=${() => {}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t<slot name=\"label\"></slot>\n\t\t\t\t</div>\n\t\t\t</label>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-radio-button': RadioButton\n\t}\n}\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"select-DFxoBgEf.cjs","names":[],"sources":["../src/select/select.ts"],"sourcesContent":["import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'\nimport { $LitElement } from '@mixins/index'\nimport { color } from '@schmancy/directives'\nimport SchmancyInput from '@schmancy/input/input'\nimport SchmancyOption from '@schmancy/option/option'\nimport { SchmancyTheme } from '@schmancy/theme/theme.interface'\nimport { css, html, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { BehaviorSubject, combineLatest, fromEvent, Subject, takeUntil } from 'rxjs'\nimport { tap, withLatestFrom } from 'rxjs/operators'\n\nexport type SchmancySelectChangeEvent = CustomEvent<{\n\tvalue: string | string[]\n}>\n\n/**\n * Select dropdown component with single and multi-select support.\n *\n * @prop {string} name - Name attribute for form submission\n * @prop {string} label - Label text displayed above the select\n * @prop {string} placeholder - Placeholder text when no value is selected\n * @prop {boolean} required - Whether the field is required\n * @prop {boolean} multi - Enable multi-select mode\n * @prop {string} value - Selected value (single select mode)\n * @prop {string[]} values - Selected values (multi-select mode)\n */\n@customElement('schmancy-select')\nexport class SchmancySelect extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t}\n\n\t[role='listbox'] {\n\t\toverflow-y: auto;\n\t\toutline: none;\n\t}\n`) {\n\t// Form association setup\n\tstatic formAssociated = true\n\tprivate internals?: ElementInternals\n\n\t// API\n\t@property({ type: String }) name: string | undefined\n\t@property({ type: Boolean, reflect: true }) required = false\n\t@property({ type: Boolean, reflect: true }) disabled = false\n\t@property({ type: String }) placeholder = ''\n\t@property({ type: String, reflect: true })\n\tget value() {\n\t\treturn this.multi\n\t\t\t? this._selectedValues$.value // Return array for multi-select\n\t\t\t: this._selectedValue$.value // Return string for single-select\n\t}\n\tset value(val: string | string[]) {\n\t\tif (this.multi) {\n\t\t\tconst values = Array.isArray(val)\n\t\t\t\t? val\n\t\t\t\t: val ? String(val).split(',').map(v => v.trim()).filter(Boolean) : []\n\t\t\tthis._selectedValues$.next(values)\n\t\t} else {\n\t\t\tthis._selectedValue$.next(val == null ? '' : String(val))\n\t\t}\n\t}\n\n\t// Values property for multi-select mode\n\t@property({ type: Array })\n\tget values() {\n\t\treturn [...this._selectedValues$.value]\n\t}\n\tset values(vals: string[]) {\n\t\tthis._selectedValues$.next(Array.isArray(vals) ? [...vals] : [])\n\t}\n\n\t@property({ type: Boolean }) multi = false\n\t@property({ type: String }) label = ''\n\t@property({ type: String }) hint = ''\n\t@property({ type: String }) validateOn: 'always' | 'touched' | 'dirty' | 'submitted' = 'touched'\n\t// M3 aligned sizes: 24dp (xxs) → 32dp (xs) → 40dp (sm) → 48dp (md) → 56dp (lg)\n\t@property({ type: String }) size: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' = 'md'\n\n\t// Internal states\n\t@state() private isOpen = false\n\t@state() private valueLabel = ''\n\t@state() private isValid = true\n\t@property({ type: String }) validationMessage = ''\n\n\t// Store the initial/default value for reset behavior\n\t@state() private defaultValue: string | string[] = ''\n\n\t@query('ul') private ul!: HTMLUListElement\n\t@query('sch-input') private inputRef!: SchmancyInput\n\t@queryAssignedElements({ flatten: true }) private options!: SchmancyOption[]\n\tprivate cleanupPositioner?: () => void\n\n\t// Reactive state management\n\tprivate _options$ = new BehaviorSubject<SchmancyOption[]>([])\n\tprivate _selectedValue$ = new BehaviorSubject<string>('')\n\tprivate _selectedValues$ = new BehaviorSubject<string[]>([])\n\tprivate _optionSelect$ = new Subject<SchmancyOption>()\n\t@state() _userInteracted = false\n\t@state() private _touched = false\n\t@state() private _dirty = false\n\t@state() private _submitted = false\n\n\t// Reference to current focused option (for keyboard navigation)\n\t@state() private _focusedOptionId = ''\n\n\t// Form event handlers\n\tprivate formSubmitHandler = () => {\n\t\tthis._submitted = true\n\t\tthis.checkValidity()\n\t}\n\n\tprivate formResetHandler = () => {\n\t\tthis.reset()\n\t}\n\n\tconstructor() {\n\t\tsuper()\n\t\t// Initialize ElementInternals for form association\n\t\ttry {\n\t\t\tthis.internals = this.attachInternals()\n\t\t} catch (e) {\n\t\t\tconsole.warn('FormAssociated elements not supported in this browser', e)\n\t\t}\n\t}\n\n\tget form() {\n\t\treturn this.internals?.form\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\tif (!this.id) {\n\t\t\tthis.id = `schmancy-select-${Math.random().toString(36).substring(2, 9)}`\n\t\t}\n\n\t\t// Store initial value for reset\n\t\tthis.defaultValue = this.value\n\n\t\t// Add keyboard handling to host element\n\t\tfromEvent<KeyboardEvent>(this, 'keydown').pipe(takeUntil(this.disconnecting)).subscribe(this.handleKeyDown)\n\n\t\t// Setup reactive pipelines\n\t\tthis._setupReactivePipelines()\n\n\t\t// Listen for form submission events to mark field as submitted\n\t\tif (this.internals?.form) {\n\t\t\tfromEvent(this.internals.form, 'submit')\n\t\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t\t.subscribe(this.formSubmitHandler)\n\n\t\t\t// Listen for form reset\n\t\t\tfromEvent(this.internals.form, 'reset')\n\t\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t\t.subscribe(this.formResetHandler)\n\t\t}\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\tthis.cleanupPositioner?.()\n\t\t// Form event listeners are automatically cleaned up via takeUntil(this.disconnecting)\n\t}\n\n\tfirstUpdated() {\n\t\tthis.syncSelection()\n\t\tthis.setupOptionsAccessibility()\n\n\t\t// Initially hide any validation errors until user interacts\n\t\tif (this.inputRef) {\n\t\t\tthis.inputRef.error = false\n\t\t}\n\t}\n\n\tupdated(changedProps: PropertyValues) {\n\t\tsuper.updated(changedProps)\n\n\t\tif (changedProps.has('value')) {\n\t\t\t// Update form value when component value changes\n\t\t\tconst formValue = this.multi\n\t\t\t\t? this._selectedValues$.value.join(',')\n\t\t\t\t: this._selectedValue$.value\n\t\t\tthis.internals?.setFormValue(formValue)\n\n\t\t\t// Mark as dirty if value changes from initial value\n\t\t\tif (this.hasUpdated) {\n\t\t\t\tthis._dirty = true\n\t\t\t}\n\n\t\t\t// Check validity based on validation strategy\n\t\t\tif (this.hasUpdated) {\n\t\t\t\tthis.checkValidity()\n\t\t\t}\n\t\t}\n\n\t\t// When open state changes, setup or cleanup the dropdown positioner\n\t\tif (changedProps.has('isOpen')) {\n\t\t\tif (this.isOpen) {\n\t\t\t\tthis.positionDropdown()\n\t\t\t} else {\n\t\t\t\tthis.cleanupPositioner?.()\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Determines if validation errors should be shown based on current state\n\t * and validation strategy\n\t */\n\tprivate shouldShowValidation(forceValidation = false): boolean {\n\t\tif (forceValidation) return true\n\n\t\tswitch (this.validateOn) {\n\t\t\tcase 'always':\n\t\t\t\treturn true\n\t\t\tcase 'touched':\n\t\t\t\treturn this._touched\n\t\t\tcase 'dirty':\n\t\t\t\treturn this._dirty\n\t\t\tcase 'submitted':\n\t\t\t\treturn this._submitted\n\t\t\tdefault:\n\t\t\t\treturn this._touched\n\t\t}\n\t}\n\n\tprivate syncSelection() {\n\t\tif (this.multi) {\n\t\t\t// Read directly from the BehaviorSubject to avoid string conversion issues\n\t\t\tconst selectedValues = this._selectedValues$.value\n\t\t\tthis.options?.forEach(o => (o.selected = selectedValues.includes(o.value))) // Update option selected state\n\t\t\tthis.valueLabel =\n\t\t\t\tselectedValues.length > 0\n\t\t\t\t\t? this.options\n\t\t\t\t\t\t\t?.filter(o => selectedValues.includes(o.value))\n\t\t\t\t\t\t\t.map(o => o.label || o.textContent || '')\n\t\t\t\t\t\t\t.join(', ') || this.placeholder\n\t\t\t\t\t: this.placeholder\n\t\t} else {\n\t\t\t// Single select - read from BehaviorSubject\n\t\t\tconst currentValue = this._selectedValue$.value\n\t\t\tthis.options?.forEach(o => {\n\t\t\t\t// Set selected property on each option based on matching value\n\t\t\t\to.selected = o.value === currentValue\n\t\t\t})\n\t\t\tconst selectedOption = this.options?.find(o => o.value === currentValue)\n\t\t\tthis.valueLabel = selectedOption ? (selectedOption.label || selectedOption.textContent || '') : this.placeholder\n\t\t}\n\t}\n\n\tprivate setupOptionsAccessibility() {\n\t\tthis.options?.forEach((option, index) => {\n\t\t\toption.setAttribute('role', 'option')\n\t\t\tif (!option.id) {\n\t\t\t\toption.id = `${this.id}-option-${index}`\n\t\t\t}\n\n\t\t\t// Set tabindex to -1 so they're focusable programmatically but not in the tab order\n\t\t\toption.tabIndex = -1\n\n\t\t\toption.setAttribute(\n\t\t\t\t'aria-selected',\n\t\t\t\tString(this.multi ? this._selectedValues$.value.includes(option.value) : option.value === this._selectedValue$.value),\n\t\t\t)\n\t\t})\n\t}\n\n\tprivate async positionDropdown() {\n\t\tconst reference = this.renderRoot.querySelector('.trigger') as HTMLElement\n\t\tif (!reference || !this.ul) return\n\n\t\tthis.cleanupPositioner = autoUpdate(reference, this.ul, async () => {\n\t\t\t// Get viewport dimensions\n\t\t\tconst viewportHeight = window.innerHeight\n\t\t\tconst triggerRect = reference.getBoundingClientRect()\n\n\t\t\t// Calculate available space below and above\n\t\t\tconst spaceBelow = viewportHeight - triggerRect.bottom\n\t\t\tconst spaceAbove = triggerRect.top\n\n\t\t\t// Calculate max height - use 75% of the largest available space, but at least 150px\n\t\t\tconst maxHeight = Math.max(Math.max(spaceBelow, spaceAbove) * 0.75, 150)\n\n\t\t\t// Determine if we should flip\n\t\t\tconst shouldFlip = spaceBelow < 200 && spaceAbove > spaceBelow\n\n\t\t\t// Apply max height\n\t\t\tthis.ul.style.maxHeight = `${maxHeight}px`\n\n\t\t\tconst { x, y } = await computePosition(reference, this.ul, {\n\t\t\t\tplacement: shouldFlip ? 'top-start' : 'bottom-start',\n\t\t\t\tmiddleware: [offset(5), flip(), shift({ padding: 5 })],\n\t\t\t})\n\n\t\t\tObject.assign(this.ul.style, {\n\t\t\t\tleft: `${x}px`,\n\t\t\t\ttop: `${y}px`,\n\t\t\t\tposition: 'absolute',\n\t\t\t\twidth: `${reference.offsetWidth}px`, // Match the width of the trigger\n\t\t\t})\n\t\t})\n\t}\n\n\tprivate handleKeyDown = (e: KeyboardEvent) => {\n\t\t// Don't handle keyboard events when disabled\n\t\tif (this.disabled) {\n\t\t\treturn\n\t\t}\n\n\t\tif (!this.isOpen) {\n\t\t\tif (['Enter', ' ', 'ArrowDown'].includes(e.key)) {\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.openDropdown(false)\n\t\t\t}\n\t\t\treturn\n\t\t}\n\n\t\t// Find current focused option\n\t\tconst options = Array.from(this.options || [])\n\t\tconst current = options.findIndex(o => o.id === this._focusedOptionId) ?? -1\n\n\t\tswitch (e.key) {\n\t\t\tcase 'Escape':\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.closeDropdown()\n\t\t\t\tbreak\n\t\t\tcase 'ArrowDown':\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.focusOption(options, Math.min(current + 1, options.length - 1))\n\t\t\t\tbreak\n\t\t\tcase 'ArrowUp':\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.focusOption(options, Math.max(current - 1, 0))\n\t\t\t\tbreak\n\t\t\tcase 'Home':\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.focusOption(options, 0)\n\t\t\t\tbreak\n\t\t\tcase 'End':\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.focusOption(options, options.length - 1)\n\t\t\t\tbreak\n\t\t\tcase 'Enter':\n\t\t\tcase ' ':\n\t\t\t\te.preventDefault()\n\t\t\t\tif (this._focusedOptionId) {\n\t\t\t\t\tconst focusedOption = options.find(opt => opt.id === this._focusedOptionId)\n\t\t\t\t\tif (focusedOption) {\n\t\t\t\t\t\tthis.handleOptionSelect(focusedOption.value)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t\tcase 'Tab':\n\t\t\t\tthis.closeDropdown()\n\t\t\t\tbreak\n\t\t}\n\t}\n\n\tprivate focusOption(options: SchmancyOption[], index: number) {\n\t\tconst option = options[index]\n\t\tif (option) {\n\t\t\toption.focus()\n\t\t\tthis._focusedOptionId = option.id\n\n\t\t\t// Update aria-activedescendant on the combobox\n\t\t\tconst combobox = this.renderRoot.querySelector('.trigger')\n\t\t\tif (combobox) {\n\t\t\t\tcombobox.setAttribute('aria-activedescendant', option.id)\n\t\t\t}\n\n\t\t\t// Ensure option is visible in the scrollable area\n\t\t\tif (this.ul && option.offsetTop !== undefined) {\n\t\t\t\t// Get position info\n\t\t\t\tconst optionTop = option.offsetTop\n\t\t\t\tconst optionHeight = option.offsetHeight\n\t\t\t\tconst scrollTop = this.ul.scrollTop\n\t\t\t\tconst ulHeight = this.ul.clientHeight\n\n\t\t\t\t// Scroll into view if needed\n\t\t\t\tif (optionTop < scrollTop) {\n\t\t\t\t\tthis.ul.scrollTop = optionTop\n\t\t\t\t} else if (optionTop + optionHeight > scrollTop + ulHeight) {\n\t\t\t\t\tthis.ul.scrollTop = optionTop + optionHeight - ulHeight\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate async openDropdown(report = false) {\n\t\t// Don't open if disabled\n\t\tif (this.disabled) {\n\t\t\treturn\n\t\t}\n\n\t\t// Don't mark as touched on opening - we'll do that on closing\n\t\t// so errors only show after interaction is complete\n\n\t\tthis.isOpen = true\n\t\tawait this.updateComplete\n\n\t\t// Focus first or selected option\n\t\tconst options = Array.from(this.options || [])\n\t\tconst selectedIndex = this.multi ? 0 : options.findIndex(o => o.value === this._selectedValue$.value)\n\n\t\tthis.focusOption(options, Math.max(selectedIndex, 0))\n\n\t\t// Don't automatically validate when opening\n\t\t// Only validate if explicitly requested (like from a form submission)\n\t\tif (report) this.reportValidity()\n\t}\n\n\tprivate closeDropdown() {\n\t\t// Only mark as touched if the user actually interacted with the component\n\t\t// and made a selection or explicitly closed it without selecting\n\t\tif (this._userInteracted) {\n\t\t\tthis._touched = true\n\t\t}\n\n\t\tthis.isOpen = false\n\t\tthis._focusedOptionId = ''\n\n\t\t// Update combobox to remove aria-activedescendant\n\t\tconst combobox = this.renderRoot.querySelector<HTMLElement>('.trigger')\n\t\tif (combobox) {\n\t\t\tcombobox.removeAttribute('aria-activedescendant')\n\t\t\tcombobox?.focus()\n\t\t}\n\n\t\t// Only check validity when closing if the user has actually interacted\n\t\t// with the component and validation should be shown\n\t\tif (this._userInteracted && this.shouldShowValidation()) {\n\t\t\tthis.checkValidity()\n\t\t}\n\t}\n\n\tprivate _setupReactivePipelines() {\n\t\t// Listen for option-select events from child options\n\t\tfromEvent<CustomEvent>(this, 'option-select')\n\t\t\t.pipe(\n\t\t\t\ttap((e) => {\n\t\t\t\t\te.stopPropagation() // Prevent event from bubbling further\n\t\t\t\t\tconst option = this.options.find(o => o.value === e.detail.value)\n\t\t\t\t\tif (option) {\n\t\t\t\t\t\tthis._optionSelect$.next(option)\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting)\n\t\t\t)\n\t\t\t.subscribe()\n\n\t\t// Handle option selection through reactive pipeline\n\t\tthis._optionSelect$\n\t\t\t.pipe(\n\t\t\t\twithLatestFrom(this._selectedValue$, this._selectedValues$),\n\t\t\t\ttap(([option, _, currentValues]) => {\n\t\t\t\t\tthis._userInteracted = true\n\t\t\t\t\tthis._touched = true\n\t\t\t\t\tthis._dirty = true\n\n\t\t\t\t\tif (this.multi) {\n\t\t\t\t\t\tconst index = currentValues.indexOf(option.value)\n\t\t\t\t\t\tconst newValues = index > -1\n\t\t\t\t\t\t\t? [...currentValues.slice(0, index), ...currentValues.slice(index + 1)]\n\t\t\t\t\t\t\t: [...currentValues, option.value]\n\t\t\t\t\t\tthis._selectedValues$.next(newValues)\n\n\t\t\t\t\t\t// Update form value\n\t\t\t\t\t\tthis.internals?.setFormValue(newValues.join(','))\n\n\t\t\t\t\t\t// Update display label\n\t\t\t\t\t\tthis.valueLabel = newValues.length > 0\n\t\t\t\t\t\t\t? this.options\n\t\t\t\t\t\t\t\t\t.filter(o => newValues.includes(o.value))\n\t\t\t\t\t\t\t\t\t.map(o => o.label || o.textContent || '')\n\t\t\t\t\t\t\t\t\t.join(', ')\n\t\t\t\t\t\t\t: this.placeholder\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// Single select\n\t\t\t\t\t\tthis._selectedValue$.next(option.value)\n\n\t\t\t\t\t\t// Update form value\n\t\t\t\t\t\tthis.internals?.setFormValue(option.value)\n\n\t\t\t\t\t\tthis.valueLabel = option.label || option.textContent || this.placeholder\n\t\t\t\t\t\tthis.closeDropdown()\n\t\t\t\t\t}\n\n\t\t\t\t\t// Update the option's accessibility state\n\t\t\t\t\tthis.setupOptionsAccessibility()\n\n\t\t\t\t\t// Dispatch change event\n\t\t\t\t\tthis._fireChangeEvent()\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting)\n\t\t\t)\n\t\t\t.subscribe()\n\n\t\t// Options management pipeline - bind pointerdown events exactly like autocomplete\n\t\tthis._options$\n\t\t\t.pipe(\n\t\t\t\ttap((options) => {\n\t\t\t\t\toptions.forEach((option, index) => {\n\t\t\t\t\t\toption.setAttribute('role', 'option')\n\t\t\t\t\t\toption.tabIndex = -1\n\t\t\t\t\t\tif (!option.id) {\n\t\t\t\t\t\t\toption.id = `${this.id}-option-${index}`\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// Use data-event-bound to prevent duplicate bindings\n\t\t\t\t\t\tif (!option.hasAttribute('data-event-bound')) {\n\t\t\t\t\t\t\t// Use click event instead of pointerdown for better mobile UX\n\t\t\t\t\t\t\t// This allows users to scroll through options without immediately selecting\n\t\t\t\t\t\t\tfromEvent(option, 'click').pipe(\n\t\t\t\t\t\t\t\ttap(e => {\n\t\t\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t\ttakeUntil(this.disconnecting)\n\t\t\t\t\t\t\t).subscribe(() => this._optionSelect$.next(option))\n\t\t\t\t\t\t\toption.setAttribute('data-event-bound', 'true')\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting)\n\t\t\t)\n\t\t\t.subscribe()\n\n\t\t// Selection sync pipeline - sync selected states with value changes\n\t\tcombineLatest([this._selectedValue$, this._selectedValues$, this._options$])\n\t\t\t.pipe(\n\t\t\t\ttap(([singleValue, multiValues, options]) => {\n\t\t\t\t\tif (options.length === 0) return\n\n\t\t\t\t\tif (this.multi) {\n\t\t\t\t\t\toptions.forEach(option => {\n\t\t\t\t\t\t\toption.selected = multiValues.includes(option.value)\n\t\t\t\t\t\t})\n\t\t\t\t\t} else {\n\t\t\t\t\t\toptions.forEach(option => {\n\t\t\t\t\t\t\toption.selected = option.value === singleValue\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting)\n\t\t\t)\n\t\t\t.subscribe()\n\t}\n\n\tprivate handleOptionSelect(value: string) {\n\t\t// This method is now called from keyboard navigation only\n\t\tconst option = this.options.find(o => o.value === value)\n\t\tif (option) {\n\t\t\tthis._optionSelect$.next(option)\n\t\t}\n\t}\n\n\tprivate _fireChangeEvent() {\n\t\t// Get the current value based on multi/single mode\n\t\tconst value = this.multi ? this._selectedValues$.value : this._selectedValue$.value\n\n\t\t// Dispatch only one change event with the value in detail\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent<SchmancySelectChangeEvent['detail']>('change', {\n\t\t\t\tdetail: { value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\n\t\t// Then check validity (only show error if validation should be shown)\n\t\tthis.checkValidity()\n\t}\n\n\tpublic checkValidity(): boolean {\n\t\t// Disabled fields are always valid\n\t\tif (this.disabled) {\n\t\t\treturn true\n\t\t}\n\n\t\t// Determine if the select is empty based on whether it's multi-select or single-select\n\t\tconst isEmpty = this.multi\n\t\t\t? this._selectedValues$.value.length === 0\n\t\t\t: !this._selectedValue$.value\n\n\t\t// Check if the value is valid (not empty when required)\n\t\tconst isValid = !(this.required && isEmpty)\n\n\t\t// Set the validity state\n\t\tthis.isValid = isValid\n\n\t\tif (!this.isValid) {\n\t\t\tthis.validationMessage = 'Please select an option.'\n\t\t\tthis.internals?.setValidity({ valueMissing: true }, 'Please select an option.', this.inputRef)\n\t\t} else {\n\t\t\t// Clear validation message\n\t\t\tthis.validationMessage = ''\n\t\t\tthis.internals?.setValidity({})\n\t\t}\n\n\t\t// Update the input component to reflect our validation state\n\t\tif (this.inputRef && this.hasUpdated) {\n\t\t\tconst showError = !this.isValid && this.shouldShowValidation()\n\t\t\tthis.inputRef.error = showError\n\t\t\tthis.inputRef.hint = showError ? this.validationMessage : this.hint\n\t\t}\n\n\t\treturn this.isValid\n\t}\n\n\tpublic reportValidity(): boolean {\n\t\t// Force validation display regardless of validation strategy\n\t\tconst valid = this.checkValidity()\n\n\t\t// Force the input to show validation errors\n\t\tif (this.inputRef) {\n\t\t\t// Set the input's error state\n\t\t\tthis.inputRef.error = !valid\n\t\t\tthis.inputRef.hint = !valid ? this.validationMessage : this.hint\n\n\t\t\t// If invalid and not already open, automatically open the dropdown to show options\n\t\t\tif (!valid && !this.isOpen) {\n\t\t\t\t// Open the dropdown but don't mark as user interaction yet\n\t\t\t\t// This helps users immediately see available options when validation fails\n\t\t\t\tthis.openDropdown(false)\n\t\t\t}\n\n\t\t\t// Only call reportValidity on the input if invalid to show the native popup\n\t\t\tif (!valid) {\n\t\t\t\tthis.inputRef.reportValidity()\n\t\t\t}\n\t\t}\n\n\t\treturn valid\n\t}\n\n\tpublic setCustomValidity(message: string) {\n\t\tthis.validationMessage = message\n\t\tif (message) {\n\t\t\tthis.isValid = false\n\t\t\tthis.internals?.setValidity({ customError: true }, message, this.inputRef)\n\t\t} else {\n\t\t\tthis.isValid = true\n\t\t\tthis.internals?.setValidity({})\n\t\t}\n\n\t\t// Update input if needed\n\t\tif (this.inputRef && this.shouldShowValidation()) {\n\t\t\tthis.inputRef.error = !this.isValid\n\t\t\tthis.inputRef.hint = !this.isValid ? this.validationMessage : this.hint\n\t\t}\n\t}\n\n\tpublic reset() {\n\t\t// Reset to initial value\n\t\tthis.value = this.defaultValue\n\t\tthis.valueLabel = this.placeholder\n\t\tthis.isValid = true\n\t\tthis.validationMessage = ''\n\t\tthis._touched = false\n\t\tthis._dirty = false\n\t\tthis._submitted = false\n\t\tthis._userInteracted = false\n\t\tthis.internals?.setValidity({})\n\n\t\tif (this.inputRef) {\n\t\t\tthis.inputRef.error = false\n\t\t\tthis.inputRef.hint = this.hint\n\t\t}\n\t}\n\n\trender(): TemplateResult {\n\t\t// Determine if we should show errors based on the validation strategy and interaction\n\t\t// Never show errors on initial render or if the dropdown is open\n\t\tconst showErrors = !this.isValid && this.shouldShowValidation() && !this.isOpen\n\n\t\t// Add caret icon based on open state\n\t\tconst caretIcon = this.isOpen\n\t\t\t? html`<span class=\"absolute right-3 top-1/2 transform -translate-y-1/2\">▲</span>`\n\t\t\t: html`<span class=\"absolute right-3 top-1/2 transform -translate-y-1/2\">▼</span>`\n\n\t\treturn html`\n\t\t\t<div class=\"relative ${this.disabled ? 'opacity-60 cursor-not-allowed' : ''}\">\n\t\t\t\t<sch-input\n\t\t\t\t\t.name=${this.name}\n\t\t\t\t\ttabIndex=${this.disabled ? '-1' : '0'}\n\t\t\t\t\tclass=\"trigger\"\n\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t\taria-expanded=${this.isOpen}\n\t\t\t\t\taria-controls=\"options\"\n\t\t\t\t\taria-autocomplete=\"none\"\n\t\t\t\t\taria-required=${this.required}\n\t\t\t\t\taria-activedescendant=${this._focusedOptionId || undefined}\n\t\t\t\t\taria-disabled=${this.disabled}\n\t\t\t\t\t.label=${this.label}\n\t\t\t\t\t.placeholder=${this.placeholder}\n\t\t\t\t\t.value=${this.valueLabel}\n\t\t\t\t\t.required=${this.required}\n\t\t\t\t\t.disabled=${this.disabled}\n\t\t\t\t\t.hint=${showErrors ? this.validationMessage : this.hint}\n\t\t\t\t\t.error=${showErrors}\n\t\t\t\t\t.validateOn=${this.validateOn}\n\t\t\t\t\t.size=${this.size}\n\t\t\t\t\treadonly\n\t\t\t\t\tclickable\n\t\t\t\t\t@click=${(e: MouseEvent) => {\n\t\t\t\t\t\t// Don't process clicks if disabled\n\t\t\t\t\t\tif (this.disabled) {\n\t\t\t\t\t\t\te.preventDefault()\n\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\treturn\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// On first click, don't count this as user interaction yet\n\t\t\t\t\t\tif (!this.isOpen) {\n\t\t\t\t\t\t\t// Open without triggering validation - we'll validate when they close\n\t\t\t\t\t\t\tthis.openDropdown(false)\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t// Mark as interacted when they close the dropdown\n\t\t\t\t\t\t\tthis._userInteracted = true\n\t\t\t\t\t\t\tthis.closeDropdown()\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t${caretIcon}\n\t\t\t\t</sch-input>\n\n\t\t\t\t<!-- Overlay for capturing clicks outside when dropdown is open -->\n\t\t\t\t${this.isOpen\n\t\t\t\t\t? html` <div class=\"fixed inset-0 z-10\" @click=${this.closeDropdown} tabindex=\"-1\" aria-hidden=\"true\"></div> `\n\t\t\t\t\t: ''}\n\n\t\t\t\t<ul\n\t\t\t\t\tid=\"options\"\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\taria-multiselectable=${this.multi}\n\t\t\t\t\tclass=${classMap({\n\t\t\t\t\t\t'absolute min-w-full w-full z-20 mt-1 rounded-md shadow-lg': true,\n\t\t\t\t\t\thidden: !this.isOpen,\n\t\t\t\t\t})}\n\t\t\t\t\t${color({\n\t\t\t\t\t\tbgColor: SchmancyTheme.sys.color.surface.low,\n\t\t\t\t\t\tcolor: SchmancyTheme.sys.color.surface.on,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t<slot\n\t\t\t\t\t\t@slotchange=${() => {\n\t\t\t\t\t\t\tthis._options$.next(this.options)\n\t\t\t\t\t\t\t// Sync selection state when options re-render\n\t\t\t\t\t\t\tthis.syncSelection()\n\t\t\t\t\t\t}}\n\t\t\t\t\t></slot>\n\t\t\t\t</ul>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\n// Don't export 'select' here as it conflicts with the store's select decorator\n// export const select = SchmancySelect\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-select': SchmancySelect\n\t}\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"select-DFxoBgEf.cjs","names":[],"sources":["../src/select/select.ts"],"sourcesContent":["import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'\nimport { $LitElement } from '@mixins/index'\nimport { color } from '@schmancy/directives'\nimport SchmancyInput from '@schmancy/input/input'\nimport SchmancyOption from '@schmancy/option/option'\nimport { SchmancyTheme } from '@schmancy/theme/theme.interface'\nimport { css, html, PropertyValues, TemplateResult } from 'lit'\nimport { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { BehaviorSubject, combineLatest, fromEvent, Subject, takeUntil } from 'rxjs'\nimport { tap, withLatestFrom } from 'rxjs/operators'\n\nexport type SchmancySelectChangeEvent = CustomEvent<{\n\tvalue: string | string[]\n}>\n\n/**\n * Dropdown selector — single or multi-select from a list of `<schmancy-option>` children. Form-associated.\n *\n * @element schmancy-select\n * @summary Material Design dropdown with type-to-filter, keyboard nav, single or multi-select. Options are declared as `<schmancy-option>` children; value / values props sync with selection.\n * @example\n * <schmancy-select name=\"priority\" label=\"Priority\" value=\"medium\">\n * <schmancy-option value=\"low\">Low</schmancy-option>\n * <schmancy-option value=\"medium\">Medium</schmancy-option>\n * <schmancy-option value=\"high\">High</schmancy-option>\n * </schmancy-select>\n * @platform select change - Floating-UI-positioned listbox. Degrades to native `<select>` styled via Tailwind if the tag never registers, though multi-select UX is lost.\n * @fires change - `SchmancySelectChangeEvent` with `{ value }` (single) or `{ value: string[] }` (multi).\n *\n * @prop {string} name - Name attribute for form submission\n * @prop {string} label - Label text displayed above the select\n * @prop {string} placeholder - Placeholder text when no value is selected\n * @prop {boolean} required - Whether the field is required\n * @prop {boolean} multi - Enable multi-select mode\n * @prop {string} value - Selected value (single select mode)\n * @prop {string[]} values - Selected values (multi-select mode)\n */\n@customElement('schmancy-select')\nexport class SchmancySelect extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t}\n\n\t[role='listbox'] {\n\t\toverflow-y: auto;\n\t\toutline: none;\n\t}\n`) {\n\t// Form association setup\n\tstatic formAssociated = true\n\tprivate internals?: ElementInternals\n\n\t// API\n\t@property({ type: String }) name: string | undefined\n\t@property({ type: Boolean, reflect: true }) required = false\n\t@property({ type: Boolean, reflect: true }) disabled = false\n\t@property({ type: String }) placeholder = ''\n\t@property({ type: String, reflect: true })\n\tget value() {\n\t\treturn this.multi\n\t\t\t? this._selectedValues$.value // Return array for multi-select\n\t\t\t: this._selectedValue$.value // Return string for single-select\n\t}\n\tset value(val: string | string[]) {\n\t\tif (this.multi) {\n\t\t\tconst values = Array.isArray(val)\n\t\t\t\t? val\n\t\t\t\t: val ? String(val).split(',').map(v => v.trim()).filter(Boolean) : []\n\t\t\tthis._selectedValues$.next(values)\n\t\t} else {\n\t\t\tthis._selectedValue$.next(val == null ? '' : String(val))\n\t\t}\n\t}\n\n\t// Values property for multi-select mode\n\t@property({ type: Array })\n\tget values() {\n\t\treturn [...this._selectedValues$.value]\n\t}\n\tset values(vals: string[]) {\n\t\tthis._selectedValues$.next(Array.isArray(vals) ? [...vals] : [])\n\t}\n\n\t@property({ type: Boolean }) multi = false\n\t@property({ type: String }) label = ''\n\t@property({ type: String }) hint = ''\n\t@property({ type: String }) validateOn: 'always' | 'touched' | 'dirty' | 'submitted' = 'touched'\n\t// M3 aligned sizes: 24dp (xxs) → 32dp (xs) → 40dp (sm) → 48dp (md) → 56dp (lg)\n\t@property({ type: String }) size: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' = 'md'\n\n\t// Internal states\n\t@state() private isOpen = false\n\t@state() private valueLabel = ''\n\t@state() private isValid = true\n\t@property({ type: String }) validationMessage = ''\n\n\t// Store the initial/default value for reset behavior\n\t@state() private defaultValue: string | string[] = ''\n\n\t@query('ul') private ul!: HTMLUListElement\n\t@query('sch-input') private inputRef!: SchmancyInput\n\t@queryAssignedElements({ flatten: true }) private options!: SchmancyOption[]\n\tprivate cleanupPositioner?: () => void\n\n\t// Reactive state management\n\tprivate _options$ = new BehaviorSubject<SchmancyOption[]>([])\n\tprivate _selectedValue$ = new BehaviorSubject<string>('')\n\tprivate _selectedValues$ = new BehaviorSubject<string[]>([])\n\tprivate _optionSelect$ = new Subject<SchmancyOption>()\n\t@state() _userInteracted = false\n\t@state() private _touched = false\n\t@state() private _dirty = false\n\t@state() private _submitted = false\n\n\t// Reference to current focused option (for keyboard navigation)\n\t@state() private _focusedOptionId = ''\n\n\t// Form event handlers\n\tprivate formSubmitHandler = () => {\n\t\tthis._submitted = true\n\t\tthis.checkValidity()\n\t}\n\n\tprivate formResetHandler = () => {\n\t\tthis.reset()\n\t}\n\n\tconstructor() {\n\t\tsuper()\n\t\t// Initialize ElementInternals for form association\n\t\ttry {\n\t\t\tthis.internals = this.attachInternals()\n\t\t} catch (e) {\n\t\t\tconsole.warn('FormAssociated elements not supported in this browser', e)\n\t\t}\n\t}\n\n\tget form() {\n\t\treturn this.internals?.form\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\tif (!this.id) {\n\t\t\tthis.id = `schmancy-select-${Math.random().toString(36).substring(2, 9)}`\n\t\t}\n\n\t\t// Store initial value for reset\n\t\tthis.defaultValue = this.value\n\n\t\t// Add keyboard handling to host element\n\t\tfromEvent<KeyboardEvent>(this, 'keydown').pipe(takeUntil(this.disconnecting)).subscribe(this.handleKeyDown)\n\n\t\t// Setup reactive pipelines\n\t\tthis._setupReactivePipelines()\n\n\t\t// Listen for form submission events to mark field as submitted\n\t\tif (this.internals?.form) {\n\t\t\tfromEvent(this.internals.form, 'submit')\n\t\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t\t.subscribe(this.formSubmitHandler)\n\n\t\t\t// Listen for form reset\n\t\t\tfromEvent(this.internals.form, 'reset')\n\t\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t\t.subscribe(this.formResetHandler)\n\t\t}\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\tthis.cleanupPositioner?.()\n\t\t// Form event listeners are automatically cleaned up via takeUntil(this.disconnecting)\n\t}\n\n\tfirstUpdated() {\n\t\tthis.syncSelection()\n\t\tthis.setupOptionsAccessibility()\n\n\t\t// Initially hide any validation errors until user interacts\n\t\tif (this.inputRef) {\n\t\t\tthis.inputRef.error = false\n\t\t}\n\t}\n\n\tupdated(changedProps: PropertyValues) {\n\t\tsuper.updated(changedProps)\n\n\t\tif (changedProps.has('value')) {\n\t\t\t// Update form value when component value changes\n\t\t\tconst formValue = this.multi\n\t\t\t\t? this._selectedValues$.value.join(',')\n\t\t\t\t: this._selectedValue$.value\n\t\t\tthis.internals?.setFormValue(formValue)\n\n\t\t\t// Mark as dirty if value changes from initial value\n\t\t\tif (this.hasUpdated) {\n\t\t\t\tthis._dirty = true\n\t\t\t}\n\n\t\t\t// Check validity based on validation strategy\n\t\t\tif (this.hasUpdated) {\n\t\t\t\tthis.checkValidity()\n\t\t\t}\n\t\t}\n\n\t\t// When open state changes, setup or cleanup the dropdown positioner\n\t\tif (changedProps.has('isOpen')) {\n\t\t\tif (this.isOpen) {\n\t\t\t\tthis.positionDropdown()\n\t\t\t} else {\n\t\t\t\tthis.cleanupPositioner?.()\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Determines if validation errors should be shown based on current state\n\t * and validation strategy\n\t */\n\tprivate shouldShowValidation(forceValidation = false): boolean {\n\t\tif (forceValidation) return true\n\n\t\tswitch (this.validateOn) {\n\t\t\tcase 'always':\n\t\t\t\treturn true\n\t\t\tcase 'touched':\n\t\t\t\treturn this._touched\n\t\t\tcase 'dirty':\n\t\t\t\treturn this._dirty\n\t\t\tcase 'submitted':\n\t\t\t\treturn this._submitted\n\t\t\tdefault:\n\t\t\t\treturn this._touched\n\t\t}\n\t}\n\n\tprivate syncSelection() {\n\t\tif (this.multi) {\n\t\t\t// Read directly from the BehaviorSubject to avoid string conversion issues\n\t\t\tconst selectedValues = this._selectedValues$.value\n\t\t\tthis.options?.forEach(o => (o.selected = selectedValues.includes(o.value))) // Update option selected state\n\t\t\tthis.valueLabel =\n\t\t\t\tselectedValues.length > 0\n\t\t\t\t\t? this.options\n\t\t\t\t\t\t\t?.filter(o => selectedValues.includes(o.value))\n\t\t\t\t\t\t\t.map(o => o.label || o.textContent || '')\n\t\t\t\t\t\t\t.join(', ') || this.placeholder\n\t\t\t\t\t: this.placeholder\n\t\t} else {\n\t\t\t// Single select - read from BehaviorSubject\n\t\t\tconst currentValue = this._selectedValue$.value\n\t\t\tthis.options?.forEach(o => {\n\t\t\t\t// Set selected property on each option based on matching value\n\t\t\t\to.selected = o.value === currentValue\n\t\t\t})\n\t\t\tconst selectedOption = this.options?.find(o => o.value === currentValue)\n\t\t\tthis.valueLabel = selectedOption ? (selectedOption.label || selectedOption.textContent || '') : this.placeholder\n\t\t}\n\t}\n\n\tprivate setupOptionsAccessibility() {\n\t\tthis.options?.forEach((option, index) => {\n\t\t\toption.setAttribute('role', 'option')\n\t\t\tif (!option.id) {\n\t\t\t\toption.id = `${this.id}-option-${index}`\n\t\t\t}\n\n\t\t\t// Set tabindex to -1 so they're focusable programmatically but not in the tab order\n\t\t\toption.tabIndex = -1\n\n\t\t\toption.setAttribute(\n\t\t\t\t'aria-selected',\n\t\t\t\tString(this.multi ? this._selectedValues$.value.includes(option.value) : option.value === this._selectedValue$.value),\n\t\t\t)\n\t\t})\n\t}\n\n\tprivate async positionDropdown() {\n\t\tconst reference = this.renderRoot.querySelector('.trigger') as HTMLElement\n\t\tif (!reference || !this.ul) return\n\n\t\tthis.cleanupPositioner = autoUpdate(reference, this.ul, async () => {\n\t\t\t// Get viewport dimensions\n\t\t\tconst viewportHeight = window.innerHeight\n\t\t\tconst triggerRect = reference.getBoundingClientRect()\n\n\t\t\t// Calculate available space below and above\n\t\t\tconst spaceBelow = viewportHeight - triggerRect.bottom\n\t\t\tconst spaceAbove = triggerRect.top\n\n\t\t\t// Calculate max height - use 75% of the largest available space, but at least 150px\n\t\t\tconst maxHeight = Math.max(Math.max(spaceBelow, spaceAbove) * 0.75, 150)\n\n\t\t\t// Determine if we should flip\n\t\t\tconst shouldFlip = spaceBelow < 200 && spaceAbove > spaceBelow\n\n\t\t\t// Apply max height\n\t\t\tthis.ul.style.maxHeight = `${maxHeight}px`\n\n\t\t\tconst { x, y } = await computePosition(reference, this.ul, {\n\t\t\t\tplacement: shouldFlip ? 'top-start' : 'bottom-start',\n\t\t\t\tmiddleware: [offset(5), flip(), shift({ padding: 5 })],\n\t\t\t})\n\n\t\t\tObject.assign(this.ul.style, {\n\t\t\t\tleft: `${x}px`,\n\t\t\t\ttop: `${y}px`,\n\t\t\t\tposition: 'absolute',\n\t\t\t\twidth: `${reference.offsetWidth}px`, // Match the width of the trigger\n\t\t\t})\n\t\t})\n\t}\n\n\tprivate handleKeyDown = (e: KeyboardEvent) => {\n\t\t// Don't handle keyboard events when disabled\n\t\tif (this.disabled) {\n\t\t\treturn\n\t\t}\n\n\t\tif (!this.isOpen) {\n\t\t\tif (['Enter', ' ', 'ArrowDown'].includes(e.key)) {\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.openDropdown(false)\n\t\t\t}\n\t\t\treturn\n\t\t}\n\n\t\t// Find current focused option\n\t\tconst options = Array.from(this.options || [])\n\t\tconst current = options.findIndex(o => o.id === this._focusedOptionId) ?? -1\n\n\t\tswitch (e.key) {\n\t\t\tcase 'Escape':\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.closeDropdown()\n\t\t\t\tbreak\n\t\t\tcase 'ArrowDown':\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.focusOption(options, Math.min(current + 1, options.length - 1))\n\t\t\t\tbreak\n\t\t\tcase 'ArrowUp':\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.focusOption(options, Math.max(current - 1, 0))\n\t\t\t\tbreak\n\t\t\tcase 'Home':\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.focusOption(options, 0)\n\t\t\t\tbreak\n\t\t\tcase 'End':\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.focusOption(options, options.length - 1)\n\t\t\t\tbreak\n\t\t\tcase 'Enter':\n\t\t\tcase ' ':\n\t\t\t\te.preventDefault()\n\t\t\t\tif (this._focusedOptionId) {\n\t\t\t\t\tconst focusedOption = options.find(opt => opt.id === this._focusedOptionId)\n\t\t\t\t\tif (focusedOption) {\n\t\t\t\t\t\tthis.handleOptionSelect(focusedOption.value)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t\tcase 'Tab':\n\t\t\t\tthis.closeDropdown()\n\t\t\t\tbreak\n\t\t}\n\t}\n\n\tprivate focusOption(options: SchmancyOption[], index: number) {\n\t\tconst option = options[index]\n\t\tif (option) {\n\t\t\toption.focus()\n\t\t\tthis._focusedOptionId = option.id\n\n\t\t\t// Update aria-activedescendant on the combobox\n\t\t\tconst combobox = this.renderRoot.querySelector('.trigger')\n\t\t\tif (combobox) {\n\t\t\t\tcombobox.setAttribute('aria-activedescendant', option.id)\n\t\t\t}\n\n\t\t\t// Ensure option is visible in the scrollable area\n\t\t\tif (this.ul && option.offsetTop !== undefined) {\n\t\t\t\t// Get position info\n\t\t\t\tconst optionTop = option.offsetTop\n\t\t\t\tconst optionHeight = option.offsetHeight\n\t\t\t\tconst scrollTop = this.ul.scrollTop\n\t\t\t\tconst ulHeight = this.ul.clientHeight\n\n\t\t\t\t// Scroll into view if needed\n\t\t\t\tif (optionTop < scrollTop) {\n\t\t\t\t\tthis.ul.scrollTop = optionTop\n\t\t\t\t} else if (optionTop + optionHeight > scrollTop + ulHeight) {\n\t\t\t\t\tthis.ul.scrollTop = optionTop + optionHeight - ulHeight\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate async openDropdown(report = false) {\n\t\t// Don't open if disabled\n\t\tif (this.disabled) {\n\t\t\treturn\n\t\t}\n\n\t\t// Don't mark as touched on opening - we'll do that on closing\n\t\t// so errors only show after interaction is complete\n\n\t\tthis.isOpen = true\n\t\tawait this.updateComplete\n\n\t\t// Focus first or selected option\n\t\tconst options = Array.from(this.options || [])\n\t\tconst selectedIndex = this.multi ? 0 : options.findIndex(o => o.value === this._selectedValue$.value)\n\n\t\tthis.focusOption(options, Math.max(selectedIndex, 0))\n\n\t\t// Don't automatically validate when opening\n\t\t// Only validate if explicitly requested (like from a form submission)\n\t\tif (report) this.reportValidity()\n\t}\n\n\tprivate closeDropdown() {\n\t\t// Only mark as touched if the user actually interacted with the component\n\t\t// and made a selection or explicitly closed it without selecting\n\t\tif (this._userInteracted) {\n\t\t\tthis._touched = true\n\t\t}\n\n\t\tthis.isOpen = false\n\t\tthis._focusedOptionId = ''\n\n\t\t// Update combobox to remove aria-activedescendant\n\t\tconst combobox = this.renderRoot.querySelector<HTMLElement>('.trigger')\n\t\tif (combobox) {\n\t\t\tcombobox.removeAttribute('aria-activedescendant')\n\t\t\tcombobox?.focus()\n\t\t}\n\n\t\t// Only check validity when closing if the user has actually interacted\n\t\t// with the component and validation should be shown\n\t\tif (this._userInteracted && this.shouldShowValidation()) {\n\t\t\tthis.checkValidity()\n\t\t}\n\t}\n\n\tprivate _setupReactivePipelines() {\n\t\t// Listen for option-select events from child options\n\t\tfromEvent<CustomEvent>(this, 'option-select')\n\t\t\t.pipe(\n\t\t\t\ttap((e) => {\n\t\t\t\t\te.stopPropagation() // Prevent event from bubbling further\n\t\t\t\t\tconst option = this.options.find(o => o.value === e.detail.value)\n\t\t\t\t\tif (option) {\n\t\t\t\t\t\tthis._optionSelect$.next(option)\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting)\n\t\t\t)\n\t\t\t.subscribe()\n\n\t\t// Handle option selection through reactive pipeline\n\t\tthis._optionSelect$\n\t\t\t.pipe(\n\t\t\t\twithLatestFrom(this._selectedValue$, this._selectedValues$),\n\t\t\t\ttap(([option, _, currentValues]) => {\n\t\t\t\t\tthis._userInteracted = true\n\t\t\t\t\tthis._touched = true\n\t\t\t\t\tthis._dirty = true\n\n\t\t\t\t\tif (this.multi) {\n\t\t\t\t\t\tconst index = currentValues.indexOf(option.value)\n\t\t\t\t\t\tconst newValues = index > -1\n\t\t\t\t\t\t\t? [...currentValues.slice(0, index), ...currentValues.slice(index + 1)]\n\t\t\t\t\t\t\t: [...currentValues, option.value]\n\t\t\t\t\t\tthis._selectedValues$.next(newValues)\n\n\t\t\t\t\t\t// Update form value\n\t\t\t\t\t\tthis.internals?.setFormValue(newValues.join(','))\n\n\t\t\t\t\t\t// Update display label\n\t\t\t\t\t\tthis.valueLabel = newValues.length > 0\n\t\t\t\t\t\t\t? this.options\n\t\t\t\t\t\t\t\t\t.filter(o => newValues.includes(o.value))\n\t\t\t\t\t\t\t\t\t.map(o => o.label || o.textContent || '')\n\t\t\t\t\t\t\t\t\t.join(', ')\n\t\t\t\t\t\t\t: this.placeholder\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// Single select\n\t\t\t\t\t\tthis._selectedValue$.next(option.value)\n\n\t\t\t\t\t\t// Update form value\n\t\t\t\t\t\tthis.internals?.setFormValue(option.value)\n\n\t\t\t\t\t\tthis.valueLabel = option.label || option.textContent || this.placeholder\n\t\t\t\t\t\tthis.closeDropdown()\n\t\t\t\t\t}\n\n\t\t\t\t\t// Update the option's accessibility state\n\t\t\t\t\tthis.setupOptionsAccessibility()\n\n\t\t\t\t\t// Dispatch change event\n\t\t\t\t\tthis._fireChangeEvent()\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting)\n\t\t\t)\n\t\t\t.subscribe()\n\n\t\t// Options management pipeline - bind pointerdown events exactly like autocomplete\n\t\tthis._options$\n\t\t\t.pipe(\n\t\t\t\ttap((options) => {\n\t\t\t\t\toptions.forEach((option, index) => {\n\t\t\t\t\t\toption.setAttribute('role', 'option')\n\t\t\t\t\t\toption.tabIndex = -1\n\t\t\t\t\t\tif (!option.id) {\n\t\t\t\t\t\t\toption.id = `${this.id}-option-${index}`\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// Use data-event-bound to prevent duplicate bindings\n\t\t\t\t\t\tif (!option.hasAttribute('data-event-bound')) {\n\t\t\t\t\t\t\t// Use click event instead of pointerdown for better mobile UX\n\t\t\t\t\t\t\t// This allows users to scroll through options without immediately selecting\n\t\t\t\t\t\t\tfromEvent(option, 'click').pipe(\n\t\t\t\t\t\t\t\ttap(e => {\n\t\t\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t\ttakeUntil(this.disconnecting)\n\t\t\t\t\t\t\t).subscribe(() => this._optionSelect$.next(option))\n\t\t\t\t\t\t\toption.setAttribute('data-event-bound', 'true')\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting)\n\t\t\t)\n\t\t\t.subscribe()\n\n\t\t// Selection sync pipeline - sync selected states with value changes\n\t\tcombineLatest([this._selectedValue$, this._selectedValues$, this._options$])\n\t\t\t.pipe(\n\t\t\t\ttap(([singleValue, multiValues, options]) => {\n\t\t\t\t\tif (options.length === 0) return\n\n\t\t\t\t\tif (this.multi) {\n\t\t\t\t\t\toptions.forEach(option => {\n\t\t\t\t\t\t\toption.selected = multiValues.includes(option.value)\n\t\t\t\t\t\t})\n\t\t\t\t\t} else {\n\t\t\t\t\t\toptions.forEach(option => {\n\t\t\t\t\t\t\toption.selected = option.value === singleValue\n\t\t\t\t\t\t})\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting)\n\t\t\t)\n\t\t\t.subscribe()\n\t}\n\n\tprivate handleOptionSelect(value: string) {\n\t\t// This method is now called from keyboard navigation only\n\t\tconst option = this.options.find(o => o.value === value)\n\t\tif (option) {\n\t\t\tthis._optionSelect$.next(option)\n\t\t}\n\t}\n\n\tprivate _fireChangeEvent() {\n\t\t// Get the current value based on multi/single mode\n\t\tconst value = this.multi ? this._selectedValues$.value : this._selectedValue$.value\n\n\t\t// Dispatch only one change event with the value in detail\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent<SchmancySelectChangeEvent['detail']>('change', {\n\t\t\t\tdetail: { value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\n\t\t// Then check validity (only show error if validation should be shown)\n\t\tthis.checkValidity()\n\t}\n\n\tpublic checkValidity(): boolean {\n\t\t// Disabled fields are always valid\n\t\tif (this.disabled) {\n\t\t\treturn true\n\t\t}\n\n\t\t// Determine if the select is empty based on whether it's multi-select or single-select\n\t\tconst isEmpty = this.multi\n\t\t\t? this._selectedValues$.value.length === 0\n\t\t\t: !this._selectedValue$.value\n\n\t\t// Check if the value is valid (not empty when required)\n\t\tconst isValid = !(this.required && isEmpty)\n\n\t\t// Set the validity state\n\t\tthis.isValid = isValid\n\n\t\tif (!this.isValid) {\n\t\t\tthis.validationMessage = 'Please select an option.'\n\t\t\tthis.internals?.setValidity({ valueMissing: true }, 'Please select an option.', this.inputRef)\n\t\t} else {\n\t\t\t// Clear validation message\n\t\t\tthis.validationMessage = ''\n\t\t\tthis.internals?.setValidity({})\n\t\t}\n\n\t\t// Update the input component to reflect our validation state\n\t\tif (this.inputRef && this.hasUpdated) {\n\t\t\tconst showError = !this.isValid && this.shouldShowValidation()\n\t\t\tthis.inputRef.error = showError\n\t\t\tthis.inputRef.hint = showError ? this.validationMessage : this.hint\n\t\t}\n\n\t\treturn this.isValid\n\t}\n\n\tpublic reportValidity(): boolean {\n\t\t// Force validation display regardless of validation strategy\n\t\tconst valid = this.checkValidity()\n\n\t\t// Force the input to show validation errors\n\t\tif (this.inputRef) {\n\t\t\t// Set the input's error state\n\t\t\tthis.inputRef.error = !valid\n\t\t\tthis.inputRef.hint = !valid ? this.validationMessage : this.hint\n\n\t\t\t// If invalid and not already open, automatically open the dropdown to show options\n\t\t\tif (!valid && !this.isOpen) {\n\t\t\t\t// Open the dropdown but don't mark as user interaction yet\n\t\t\t\t// This helps users immediately see available options when validation fails\n\t\t\t\tthis.openDropdown(false)\n\t\t\t}\n\n\t\t\t// Only call reportValidity on the input if invalid to show the native popup\n\t\t\tif (!valid) {\n\t\t\t\tthis.inputRef.reportValidity()\n\t\t\t}\n\t\t}\n\n\t\treturn valid\n\t}\n\n\tpublic setCustomValidity(message: string) {\n\t\tthis.validationMessage = message\n\t\tif (message) {\n\t\t\tthis.isValid = false\n\t\t\tthis.internals?.setValidity({ customError: true }, message, this.inputRef)\n\t\t} else {\n\t\t\tthis.isValid = true\n\t\t\tthis.internals?.setValidity({})\n\t\t}\n\n\t\t// Update input if needed\n\t\tif (this.inputRef && this.shouldShowValidation()) {\n\t\t\tthis.inputRef.error = !this.isValid\n\t\t\tthis.inputRef.hint = !this.isValid ? this.validationMessage : this.hint\n\t\t}\n\t}\n\n\tpublic reset() {\n\t\t// Reset to initial value\n\t\tthis.value = this.defaultValue\n\t\tthis.valueLabel = this.placeholder\n\t\tthis.isValid = true\n\t\tthis.validationMessage = ''\n\t\tthis._touched = false\n\t\tthis._dirty = false\n\t\tthis._submitted = false\n\t\tthis._userInteracted = false\n\t\tthis.internals?.setValidity({})\n\n\t\tif (this.inputRef) {\n\t\t\tthis.inputRef.error = false\n\t\t\tthis.inputRef.hint = this.hint\n\t\t}\n\t}\n\n\trender(): TemplateResult {\n\t\t// Determine if we should show errors based on the validation strategy and interaction\n\t\t// Never show errors on initial render or if the dropdown is open\n\t\tconst showErrors = !this.isValid && this.shouldShowValidation() && !this.isOpen\n\n\t\t// Add caret icon based on open state\n\t\tconst caretIcon = this.isOpen\n\t\t\t? html`<span class=\"absolute right-3 top-1/2 transform -translate-y-1/2\">▲</span>`\n\t\t\t: html`<span class=\"absolute right-3 top-1/2 transform -translate-y-1/2\">▼</span>`\n\n\t\treturn html`\n\t\t\t<div class=\"relative ${this.disabled ? 'opacity-60 cursor-not-allowed' : ''}\">\n\t\t\t\t<sch-input\n\t\t\t\t\t.name=${this.name}\n\t\t\t\t\ttabIndex=${this.disabled ? '-1' : '0'}\n\t\t\t\t\tclass=\"trigger\"\n\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t\taria-expanded=${this.isOpen}\n\t\t\t\t\taria-controls=\"options\"\n\t\t\t\t\taria-autocomplete=\"none\"\n\t\t\t\t\taria-required=${this.required}\n\t\t\t\t\taria-activedescendant=${this._focusedOptionId || undefined}\n\t\t\t\t\taria-disabled=${this.disabled}\n\t\t\t\t\t.label=${this.label}\n\t\t\t\t\t.placeholder=${this.placeholder}\n\t\t\t\t\t.value=${this.valueLabel}\n\t\t\t\t\t.required=${this.required}\n\t\t\t\t\t.disabled=${this.disabled}\n\t\t\t\t\t.hint=${showErrors ? this.validationMessage : this.hint}\n\t\t\t\t\t.error=${showErrors}\n\t\t\t\t\t.validateOn=${this.validateOn}\n\t\t\t\t\t.size=${this.size}\n\t\t\t\t\treadonly\n\t\t\t\t\tclickable\n\t\t\t\t\t@click=${(e: MouseEvent) => {\n\t\t\t\t\t\t// Don't process clicks if disabled\n\t\t\t\t\t\tif (this.disabled) {\n\t\t\t\t\t\t\te.preventDefault()\n\t\t\t\t\t\t\te.stopPropagation()\n\t\t\t\t\t\t\treturn\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// On first click, don't count this as user interaction yet\n\t\t\t\t\t\tif (!this.isOpen) {\n\t\t\t\t\t\t\t// Open without triggering validation - we'll validate when they close\n\t\t\t\t\t\t\tthis.openDropdown(false)\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t// Mark as interacted when they close the dropdown\n\t\t\t\t\t\t\tthis._userInteracted = true\n\t\t\t\t\t\t\tthis.closeDropdown()\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t${caretIcon}\n\t\t\t\t</sch-input>\n\n\t\t\t\t<!-- Overlay for capturing clicks outside when dropdown is open -->\n\t\t\t\t${this.isOpen\n\t\t\t\t\t? html` <div class=\"fixed inset-0 z-10\" @click=${this.closeDropdown} tabindex=\"-1\" aria-hidden=\"true\"></div> `\n\t\t\t\t\t: ''}\n\n\t\t\t\t<ul\n\t\t\t\t\tid=\"options\"\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\taria-multiselectable=${this.multi}\n\t\t\t\t\tclass=${classMap({\n\t\t\t\t\t\t'absolute min-w-full w-full z-20 mt-1 rounded-md shadow-lg': true,\n\t\t\t\t\t\thidden: !this.isOpen,\n\t\t\t\t\t})}\n\t\t\t\t\t${color({\n\t\t\t\t\t\tbgColor: SchmancyTheme.sys.color.surface.low,\n\t\t\t\t\t\tcolor: SchmancyTheme.sys.color.surface.on,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t<slot\n\t\t\t\t\t\t@slotchange=${() => {\n\t\t\t\t\t\t\tthis._options$.next(this.options)\n\t\t\t\t\t\t\t// Sync selection state when options re-render\n\t\t\t\t\t\t\tthis.syncSelection()\n\t\t\t\t\t\t}}\n\t\t\t\t\t></slot>\n\t\t\t\t</ul>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\n// Don't export 'select' here as it conflicts with the store's select decorator\n// export const select = SchmancySelect\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-select': SchmancySelect\n\t}\n}\n"],"mappings":"yYAuCO,IAAA,EAAA,cAA6B,EAAA,EAAY,EAAA,GAAG;;;;;;;;;;+BAY1B,EAQxB,IAAA,OACI,CACH,OAAO,KAAK,MACT,KAAK,iBAAiB,MACtB,KAAK,gBAAgB,MAEzB,IAAA,MAAU,EAAA,CACT,GAAI,KAAK,MAAO,CACf,IAAM,EAAS,MAAM,QAAQ,EAAA,CAC1B,EACA,EAAM,OAAO,EAAA,CAAK,MAAM,IAAA,CAAK,IAAI,GAAK,EAAE,MAAA,CAAA,CAAQ,OAAO,QAAA,CAAW,EAAA,CACrE,KAAK,iBAAiB,KAAK,EAAA,MAE3B,KAAK,gBAAgB,KAAK,GAAO,KAAO,GAAK,OAAO,EAAA,CAAA,CAKtD,IAAA,QACI,CACH,MAAO,CAAA,GAAI,KAAK,iBAAiB,MAAA,CAElC,IAAA,OAAW,EAAA,CACV,KAAK,iBAAiB,KAAK,MAAM,QAAQ,EAAA,CAAQ,CAAA,GAAI,EAAA,CAAQ,EAAA,CAAA,CA+C9D,aAAA,CACC,OAAA,CAAA,KAAA,SAAA,CA1EsD,EAAA,KAAA,SAAA,CACA,EAAA,KAAA,YACb,GAAA,KAAA,MAAA,CA2BL,EAAA,KAAA,MACD,GAAA,KAAA,KACD,GAAA,KAAA,WACoD,UAAA,KAAA,KAEjB,KAAA,KAAA,OAAA,CAG5C,EAAA,KAAA,WACI,GAAA,KAAA,QAAA,CACH,EAAA,KAAA,kBACqB,GAAA,KAAA,aAGG,GAAA,KAAA,UAQ/B,IAAI,EAAA,gBAAkC,EAAA,CAAA,CAAA,KAAA,gBAChC,IAAI,EAAA,gBAAwB,GAAA,CAAA,KAAA,iBAC3B,IAAI,EAAA,gBAA0B,EAAA,CAAA,CAAA,KAAA,eAChC,IAAI,EAAA,QAAA,KAAA,gBAAA,CACF,EAAA,KAAA,SAAA,CACC,EAAA,KAAA,OAAA,CACF,EAAA,KAAA,WAAA,CACI,EAAA,KAAA,iBAGM,GAAA,KAAA,sBAAA,CAInC,KAAK,WAAA,CAAa,EAClB,KAAK,eAAA,EAAA,KAAA,qBAAA,CAIL,KAAK,OAAA,EAAA,KAAA,cA8LmB,GAAA,CAExB,GAAI,KAAK,SACR,OAGD,GAAA,CAAK,KAAK,OAKT,OAAA,KAJI,CAAC,QAAS,IAAK,YAAA,CAAa,SAAS,EAAE,IAAA,GAC1C,EAAE,gBAAA,CACF,KAAK,aAAA,CAAa,EAAA,GAMpB,IAAM,EAAU,MAAM,KAAK,KAAK,SAAW,EAAA,CAAA,CACrC,EAAU,EAAQ,UAAU,GAAK,EAAE,KAAO,KAAK,iBAAA,EAAA,GAErD,OAAQ,EAAE,IAAV,CACC,IAAK,SACJ,EAAE,gBAAA,CACF,KAAK,eAAA,CACL,MACD,IAAK,YACJ,EAAE,gBAAA,CACF,KAAK,YAAY,EAAS,KAAK,IAAI,EAAU,EAAG,EAAQ,OAAS,EAAA,CAAA,CACjE,MACD,IAAK,UACJ,EAAE,gBAAA,CACF,KAAK,YAAY,EAAS,KAAK,IAAI,EAAU,EAAG,EAAA,CAAA,CAChD,MACD,IAAK,OACJ,EAAE,gBAAA,CACF,KAAK,YAAY,EAAS,EAAA,CAC1B,MACD,IAAK,MACJ,EAAE,gBAAA,CACF,KAAK,YAAY,EAAS,EAAQ,OAAS,EAAA,CAC3C,MACD,IAAK,QACL,IAAK,IAEJ,GADA,EAAE,gBAAA,CACE,KAAK,iBAAkB,CAC1B,IAAM,EAAgB,EAAQ,KAAK,GAAO,EAAI,KAAO,KAAK,iBAAA,CACtD,GACH,KAAK,mBAAmB,EAAc,MAAA,CAGxC,MACD,IAAK,MACJ,KAAK,eAAA,GA1OP,GAAA,CACC,KAAK,UAAY,KAAK,iBAAA,MACd,GAKV,IAAA,MAAI,CACH,OAAO,KAAK,WAAW,KAGxB,mBAAA,CACC,MAAM,mBAAA,CACD,AACJ,KAAK,KAAK,mBAAmB,KAAK,QAAA,CAAS,SAAS,GAAA,CAAI,UAAU,EAAG,EAAA,GAItE,KAAK,aAAe,KAAK,OAGzB,EAAA,EAAA,WAAyB,KAAM,UAAA,CAAW,MAAA,EAAA,EAAA,WAAe,KAAK,cAAA,CAAA,CAAgB,UAAU,KAAK,cAAA,CAG7F,KAAK,yBAAA,CAGD,KAAK,WAAW,QACnB,EAAA,EAAA,WAAU,KAAK,UAAU,KAAM,SAAA,CAC7B,MAAA,EAAA,EAAA,WAAe,KAAK,cAAA,CAAA,CACpB,UAAU,KAAK,kBAAA,EAGjB,EAAA,EAAA,WAAU,KAAK,UAAU,KAAM,QAAA,CAC7B,MAAA,EAAA,EAAA,WAAe,KAAK,cAAA,CAAA,CACpB,UAAU,KAAK,iBAAA,EAInB,sBAAA,CACC,MAAM,sBAAA,CACN,KAAK,qBAAA,CAIN,cAAA,CACC,KAAK,eAAA,CACL,KAAK,2BAAA,CAGD,KAAK,WACR,KAAK,SAAS,MAAA,CAAQ,GAIxB,QAAQ,EAAA,CAGP,GAFA,MAAM,QAAQ,EAAA,CAEV,EAAa,IAAI,QAAA,CAAU,CAE9B,IAAM,EAAY,KAAK,MACpB,KAAK,iBAAiB,MAAM,KAAK,IAAA,CACjC,KAAK,gBAAgB,MACxB,KAAK,WAAW,aAAa,EAAA,CAGzB,KAAK,aACR,KAAK,OAAA,CAAS,GAIX,KAAK,YACR,KAAK,eAAA,CAKH,EAAa,IAAI,SAAA,GAChB,KAAK,OACR,KAAK,kBAAA,CAEL,KAAK,qBAAA,EASR,qBAA6B,EAAA,CAAkB,EAAA,CAC9C,GAAI,EAAiB,MAAA,CAAO,EAE5B,OAAQ,KAAK,WAAb,CACC,IAAK,SACJ,MAAA,CAAO,EACR,IAAK,UAML,QACC,OAAO,KAAK,SALb,IAAK,QACJ,OAAO,KAAK,OACb,IAAK,YACJ,OAAO,KAAK,YAMf,eAAA,CACC,GAAI,KAAK,MAAO,CAEf,IAAM,EAAiB,KAAK,iBAAiB,MAC7C,KAAK,SAAS,QAAQ,GAAM,EAAE,SAAW,EAAe,SAAS,EAAE,MAAA,CAAA,CACnE,KAAK,WACJ,EAAe,OAAS,GACrB,KAAK,SACH,OAAO,GAAK,EAAe,SAAS,EAAE,MAAA,CAAA,CACvC,IAAI,GAAK,EAAE,OAAS,EAAE,aAAe,GAAA,CACrC,KAAK,KAAA,EACN,KAAK,gBACH,CAEN,IAAM,EAAe,KAAK,gBAAgB,MAC1C,KAAK,SAAS,QAAQ,GAAA,CAErB,EAAE,SAAW,EAAE,QAAU,GAAA,CAE1B,IAAM,EAAiB,KAAK,SAAS,KAAK,GAAK,EAAE,QAAU,EAAA,CAC3D,KAAK,WAAa,EAAkB,EAAe,OAAS,EAAe,aAAe,GAAM,KAAK,aAIvG,2BAAA,CACC,KAAK,SAAS,SAAS,EAAQ,IAAA,CAC9B,EAAO,aAAa,OAAQ,SAAA,CACvB,AACJ,EAAO,KAAK,GAAG,KAAK,GAAA,UAAa,IAIlC,EAAO,SAAA,GAEP,EAAO,aACN,gBACA,OAAO,KAAK,MAAQ,KAAK,iBAAiB,MAAM,SAAS,EAAO,MAAA,CAAS,EAAO,QAAU,KAAK,gBAAgB,MAAA,CAAA,EAAA,CAKlH,MAAA,kBAAc,CACb,IAAM,EAAY,KAAK,WAAW,cAAc,WAAA,CAC3C,GAAc,KAAK,KAExB,KAAK,mBAAA,EAAA,EAAA,YAA+B,EAAW,KAAK,GAAI,SAAA,CAEvD,IAAM,EAAiB,OAAO,YACxB,EAAc,EAAU,uBAAA,CAGxB,EAAa,EAAiB,EAAY,OAC1C,EAAa,EAAY,IAGzB,EAAY,KAAK,IAAuC,IAAnC,KAAK,IAAI,EAAY,EAAA,CAAoB,IAAA,CAG9D,EAAa,EAAa,KAAO,EAAa,EAGpD,KAAK,GAAG,MAAM,UAAY,GAAG,EAAA,IAE7B,GAAA,CAAM,EAAE,EAAA,EAAG,GAAA,MAAM,EAAA,EAAA,iBAAsB,EAAW,KAAK,GAAI,CAC1D,UAAW,EAAa,YAAc,eACtC,WAAY,EAAA,EAAA,EAAA,QAAQ,EAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,EAAA,OAAkB,CAAE,QAAS,EAAA,CAAA,CAAA,CAAA,CAAA,CAGlD,OAAO,OAAO,KAAK,GAAG,MAAO,CAC5B,KAAM,GAAG,EAAA,IACT,IAAK,GAAG,EAAA,IACR,SAAU,WACV,MAAO,GAAG,EAAU,YAAA,IAAA,CAAA,EAAA,EA4DvB,YAAoB,EAA2B,EAAA,CAC9C,IAAM,EAAS,EAAQ,GACvB,GAAI,EAAQ,CACX,EAAO,OAAA,CACP,KAAK,iBAAmB,EAAO,GAG/B,IAAM,EAAW,KAAK,WAAW,cAAc,WAAA,CAM/C,GALI,GACH,EAAS,aAAa,wBAAyB,EAAO,GAAA,CAInD,KAAK,IAAM,EAAO,YAAb,IAA2B,GAAW,CAE9C,IAAM,EAAY,EAAO,UACnB,EAAe,EAAO,aACtB,EAAY,KAAK,GAAG,UACpB,EAAW,KAAK,GAAG,aAGrB,EAAY,EACf,KAAK,GAAG,UAAY,EACV,EAAY,EAAe,EAAY,IACjD,KAAK,GAAG,UAAY,EAAY,EAAe,KAMnD,MAAA,aAA2B,EAAA,CAAS,EAAA,CAEnC,GAAI,KAAK,SACR,OAMD,KAAK,OAAA,CAAS,EAAA,MACR,KAAK,eAGX,IAAM,EAAU,MAAM,KAAK,KAAK,SAAW,EAAA,CAAA,CACrC,EAAgB,KAAK,MAAQ,EAAI,EAAQ,UAAU,GAAK,EAAE,QAAU,KAAK,gBAAgB,MAAA,CAE/F,KAAK,YAAY,EAAS,KAAK,IAAI,EAAe,EAAA,CAAA,CAI9C,GAAQ,KAAK,gBAAA,CAGlB,eAAA,CAGK,KAAK,kBACR,KAAK,SAAA,CAAW,GAGjB,KAAK,OAAA,CAAS,EACd,KAAK,iBAAmB,GAGxB,IAAM,EAAW,KAAK,WAAW,cAA2B,WAAA,CACxD,IACH,EAAS,gBAAgB,wBAAA,CACzB,GAAU,OAAA,EAKP,KAAK,iBAAmB,KAAK,sBAAA,EAChC,KAAK,eAAA,CAIP,yBAAA,EAEC,EAAA,EAAA,WAAuB,KAAM,gBAAA,CAC3B,MAAA,EAAA,EAAA,KACK,GAAA,CACJ,EAAE,iBAAA,CACF,IAAM,EAAS,KAAK,QAAQ,KAAK,GAAK,EAAE,QAAU,EAAE,OAAO,MAAA,CACvD,GACH,KAAK,eAAe,KAAK,EAAA,EAAA,EAEzB,EAAA,EAAA,WACQ,KAAK,cAAA,CAAA,CAEf,WAAA,CAGF,KAAK,eACH,MAAA,EAAA,EAAA,gBACe,KAAK,gBAAiB,KAAK,iBAAA,EAAiB,EAAA,EAAA,MAAA,CACrD,EAAQ,EAAG,KAAA,CAKhB,GAJA,KAAK,gBAAA,CAAkB,EACvB,KAAK,SAAA,CAAW,EAChB,KAAK,OAAA,CAAS,EAEV,KAAK,MAAO,CACf,IAAM,EAAQ,EAAc,QAAQ,EAAO,MAAA,CACrC,EAAY,EAAA,GACf,CAAA,GAAI,EAAc,MAAM,EAAG,EAAA,CAAA,GAAW,EAAc,MAAM,EAAQ,EAAA,CAAA,CAClE,CAAA,GAAI,EAAe,EAAO,MAAA,CAC7B,KAAK,iBAAiB,KAAK,EAAA,CAG3B,KAAK,WAAW,aAAa,EAAU,KAAK,IAAA,CAAA,CAG5C,KAAK,WAAa,EAAU,OAAS,EAClC,KAAK,QACJ,OAAO,GAAK,EAAU,SAAS,EAAE,MAAA,CAAA,CACjC,IAAI,GAAK,EAAE,OAAS,EAAE,aAAe,GAAA,CACrC,KAAK,KAAA,CACN,KAAK,iBAGR,KAAK,gBAAgB,KAAK,EAAO,MAAA,CAGjC,KAAK,WAAW,aAAa,EAAO,MAAA,CAEpC,KAAK,WAAa,EAAO,OAAS,EAAO,aAAe,KAAK,YAC7D,KAAK,eAAA,CAIN,KAAK,2BAAA,CAGL,KAAK,kBAAA,EAAA,EACJ,EAAA,EAAA,WACQ,KAAK,cAAA,CAAA,CAEf,WAAA,CAGF,KAAK,UACH,MAAA,EAAA,EAAA,KACK,GAAA,CACJ,EAAQ,SAAS,EAAQ,IAAA,CACxB,EAAO,aAAa,OAAQ,SAAA,CAC5B,EAAO,SAAA,GACF,AACJ,EAAO,KAAK,GAAG,KAAK,GAAA,UAAa,IAG7B,EAAO,aAAa,mBAAA,IAGxB,EAAA,EAAA,WAAU,EAAQ,QAAA,CAAS,MAAA,EAAA,EAAA,KACtB,GAAA,CACH,EAAE,iBAAA,EAAA,EACD,EAAA,EAAA,WACQ,KAAK,cAAA,CAAA,CACd,cAAgB,KAAK,eAAe,KAAK,EAAA,CAAA,CAC3C,EAAO,aAAa,mBAAoB,OAAA,GAAA,EAAA,EAGzC,EAAA,EAAA,WACQ,KAAK,cAAA,CAAA,CAEf,WAAA,EAGF,EAAA,EAAA,eAAc,CAAC,KAAK,gBAAiB,KAAK,iBAAkB,KAAK,UAAA,CAAA,CAC/D,MAAA,EAAA,EAAA,MAAA,CACM,EAAa,EAAa,KAAA,CAC3B,EAAQ,SAAW,IAEnB,KAAK,MACR,EAAQ,QAAQ,GAAA,CACf,EAAO,SAAW,EAAY,SAAS,EAAO,MAAA,EAAA,CAG/C,EAAQ,QAAQ,GAAA,CACf,EAAO,SAAW,EAAO,QAAU,GAAA,GAAA,EAGpC,EAAA,EAAA,WACQ,KAAK,cAAA,CAAA,CAEf,WAAA,CAGH,mBAA2B,EAAA,CAE1B,IAAM,EAAS,KAAK,QAAQ,KAAK,GAAK,EAAE,QAAU,EAAA,CAC9C,GACH,KAAK,eAAe,KAAK,EAAA,CAI3B,kBAAA,CAEC,IAAM,EAAQ,KAAK,MAAQ,KAAK,iBAAiB,MAAQ,KAAK,gBAAgB,MAG9E,KAAK,cACJ,IAAI,YAAiD,SAAU,CAC9D,OAAQ,CAAE,MAAA,EAAA,CACV,QAAA,CAAS,EACT,SAAA,CAAU,EAAA,CAAA,CAAA,CAKZ,KAAK,eAAA,CAGN,eAAA,CAEC,GAAI,KAAK,SACR,MAAA,CAAO,EAIR,IAAM,EAAU,KAAK,MAClB,KAAK,iBAAiB,MAAM,SAAW,EAAX,CAC3B,KAAK,gBAAgB,MAGnB,EAAA,EAAY,KAAK,UAAY,GAenC,GAZA,KAAK,QAAU,EAEV,KAAK,SAKT,KAAK,kBAAoB,GACzB,KAAK,WAAW,YAAY,EAAA,CAAA,GAL5B,KAAK,kBAAoB,2BACzB,KAAK,WAAW,YAAY,CAAE,aAAA,CAAc,EAAA,CAAQ,2BAA4B,KAAK,SAAA,EAQlF,KAAK,UAAY,KAAK,WAAY,CACrC,IAAM,EAAA,CAAa,KAAK,SAAW,KAAK,sBAAA,CACxC,KAAK,SAAS,MAAQ,EACtB,KAAK,SAAS,KAAO,EAAY,KAAK,kBAAoB,KAAK,KAGhE,OAAO,KAAK,QAGb,gBAAA,CAEC,IAAM,EAAQ,KAAK,eAAA,CAqBnB,OAlBI,KAAK,WAER,KAAK,SAAS,MAAA,CAAS,EACvB,KAAK,SAAS,KAAQ,EAAiC,KAAK,KAA9B,KAAK,kBAG9B,GAAU,KAAK,QAGnB,KAAK,aAAA,CAAa,EAAA,CAId,GACJ,KAAK,SAAS,gBAAA,EAIT,EAGR,kBAAyB,EAAA,CACxB,KAAK,kBAAoB,EACrB,GACH,KAAK,QAAA,CAAU,EACf,KAAK,WAAW,YAAY,CAAE,YAAA,CAAa,EAAA,CAAQ,EAAS,KAAK,SAAA,GAEjE,KAAK,QAAA,CAAU,EACf,KAAK,WAAW,YAAY,EAAA,CAAA,EAIzB,KAAK,UAAY,KAAK,sBAAA,GACzB,KAAK,SAAS,MAAA,CAAS,KAAK,QAC5B,KAAK,SAAS,KAAQ,KAAK,QAAmC,KAAK,KAA9B,KAAK,mBAI5C,OAAA,CAEC,KAAK,MAAQ,KAAK,aAClB,KAAK,WAAa,KAAK,YACvB,KAAK,QAAA,CAAU,EACf,KAAK,kBAAoB,GACzB,KAAK,SAAA,CAAW,EAChB,KAAK,OAAA,CAAS,EACd,KAAK,WAAA,CAAa,EAClB,KAAK,gBAAA,CAAkB,EACvB,KAAK,WAAW,YAAY,EAAA,CAAA,CAExB,KAAK,WACR,KAAK,SAAS,MAAA,CAAQ,EACtB,KAAK,SAAS,KAAO,KAAK,MAI5B,QAAA,CAGC,IAAM,EAAA,CAAc,KAAK,SAAW,KAAK,sBAAA,EAAA,CAA2B,KAAK,OAGnE,EAAY,KAAK,OACpB,EAAA,IAAI,6EACJ,EAAA,IAAI,6EAEP,MAAO,GAAA,IAAI;0BACa,KAAK,SAAW,gCAAkC,GAAA;;aAE/D,KAAK,KAAA;gBACF,KAAK,SAAW,KAAO,IAAA;;;;qBAIlB,KAAK,OAAA;;;qBAGL,KAAK,SAAA;6BACG,KAAK,kBAAA,IAAoB,GAAA;qBACjC,KAAK,SAAA;cACZ,KAAK,MAAA;oBACC,KAAK,YAAA;cACX,KAAK,WAAA;iBACF,KAAK,SAAA;iBACL,KAAK,SAAA;aACT,EAAa,KAAK,kBAAoB,KAAK,KAAA;cAC1C,EAAA;mBACK,KAAK,WAAA;aACX,KAAK,KAAA;;;cAGH,GAAA,CAET,GAAI,KAAK,SAGR,OAFA,EAAE,gBAAA,CAAA,KACF,EAAE,iBAAA,CAKE,KAAK,QAKT,KAAK,gBAAA,CAAkB,EACvB,KAAK,eAAA,EAJL,KAAK,aAAA,CAAa,EAAA,EAAA;;OAQlB,EAAA;;;;MAID,KAAK,OACJ,EAAA,IAAI,2CAA2C,KAAK,cAAA,2CACpD,GAAA;;;;;4BAKqB,KAAK,MAAA;4BACX,CAChB,4DAAA,CAA6D,EAC7D,OAAA,CAAS,KAAK,OAAA,CAAA,CAAA;OAEb,EAAA,MAAM,CACP,QAAS,EAAA,EAAc,IAAI,MAAM,QAAQ,IACzC,MAAO,EAAA,EAAc,IAAI,MAAM,QAAQ,GAAA,CAAA,CAAA;;;yBAKtC,KAAK,UAAU,KAAK,KAAK,QAAA,CAEzB,KAAK,eAAA,EAAA;;;;0BAjsBD,CAAE,KAAM,OAAA,CAAA,CAAA,CAAS,EAAA,UAAA,OAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UACjB,CAAE,KAAM,QAAS,QAAA,CAAS,EAAA,CAAA,CAAA,CAAO,EAAA,UAAA,WAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UACjC,CAAE,KAAM,QAAS,QAAA,CAAS,EAAA,CAAA,CAAA,CAAO,EAAA,UAAA,WAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UACjC,CAAE,KAAM,OAAA,CAAA,CAAA,CAAS,EAAA,UAAA,cAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UACjB,CAAE,KAAM,OAAQ,QAAA,CAAS,EAAA,CAAA,CAAA,CAAO,EAAA,UAAA,QAAA,KAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAkBhC,CAAE,KAAM,MAAA,CAAA,CAAA,CAAQ,EAAA,UAAA,SAAA,KAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAQhB,CAAE,KAAM,QAAA,CAAA,CAAA,CAAU,EAAA,UAAA,QAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAClB,CAAE,KAAM,OAAA,CAAA,CAAA,CAAS,EAAA,UAAA,QAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UACjB,CAAE,KAAM,OAAA,CAAA,CAAA,CAAS,EAAA,UAAA,OAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UACjB,CAAE,KAAM,OAAA,CAAA,CAAA,CAAS,EAAA,UAAA,aAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAEjB,CAAE,KAAM,OAAA,CAAA,CAAA,CAAS,EAAA,UAAA,OAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,QAAA,CAAA,CAGnB,EAAA,UAAA,SAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,QAAA,CAAA,CACA,EAAA,UAAA,aAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,QAAA,CAAA,CACA,EAAA,UAAA,UAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UACE,CAAE,KAAM,OAAA,CAAA,CAAA,CAAS,EAAA,UAAA,oBAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,QAAA,CAAA,CAGnB,EAAA,UAAA,eAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,OAED,KAAA,CAAA,CAAK,EAAA,UAAA,KAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,OACL,YAAA,CAAA,CAAY,EAAA,UAAA,WAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,uBACI,CAAE,QAAA,CAAS,EAAA,CAAA,CAAA,CAAO,EAAA,UAAA,UAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,QAAA,CAAA,CAQjC,EAAA,UAAA,kBAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,QAAA,CAAA,CACA,EAAA,UAAA,WAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,QAAA,CAAA,CACA,EAAA,UAAA,SAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,QAAA,CAAA,CACA,EAAA,UAAA,aAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,QAAA,CAAA,CAGA,EAAA,UAAA,mBAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,eA/EM,kBAAA,CAAA,CAAkB,EAAA,CAAA,OAAA,eAAA,QAAA,IAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,GAAA,CAAA"}