@helixui/library 1.1.1 → 1.1.2
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.
- package/custom-elements.json +487 -485
- package/dist/components/hx-alert/hx-alert.d.ts +10 -7
- package/dist/components/hx-alert/hx-alert.d.ts.map +1 -1
- package/dist/components/hx-alert/index.js +1 -1
- package/dist/components/hx-data-table/hx-data-table.d.ts +5 -13
- package/dist/components/hx-data-table/hx-data-table.d.ts.map +1 -1
- package/dist/components/hx-data-table/index.js +1 -1
- package/dist/components/hx-date-picker/hx-date-picker.d.ts +30 -10
- package/dist/components/hx-date-picker/hx-date-picker.d.ts.map +1 -1
- package/dist/components/hx-date-picker/index.js +1 -1
- package/dist/components/hx-number-input/hx-number-input.d.ts +15 -4
- package/dist/components/hx-number-input/hx-number-input.d.ts.map +1 -1
- package/dist/components/hx-number-input/index.js +1 -1
- package/dist/components/hx-pagination/hx-pagination.d.ts +18 -12
- package/dist/components/hx-pagination/hx-pagination.d.ts.map +1 -1
- package/dist/components/hx-pagination/index.js +1 -1
- package/dist/components/hx-split-panel/hx-split-panel.d.ts +13 -9
- package/dist/components/hx-split-panel/hx-split-panel.d.ts.map +1 -1
- package/dist/components/hx-split-panel/index.js +1 -1
- package/dist/index.js +6 -6
- package/dist/shared/{hx-alert-K5F8KeqI.js → hx-alert-CSxCF2rr.js} +38 -33
- package/dist/shared/hx-alert-CSxCF2rr.js.map +1 -0
- package/dist/shared/{hx-data-table-DujB9hSE.js → hx-data-table-BWvd5NNx.js} +107 -116
- package/dist/shared/hx-data-table-BWvd5NNx.js.map +1 -0
- package/dist/shared/{hx-date-picker-C8d2HtRV.js → hx-date-picker-6voxxxNE.js} +82 -79
- package/dist/shared/hx-date-picker-6voxxxNE.js.map +1 -0
- package/dist/shared/{hx-number-input-CAAibZ8X.js → hx-number-input-CIpL2BEh.js} +38 -35
- package/dist/shared/hx-number-input-CIpL2BEh.js.map +1 -0
- package/dist/shared/{hx-pagination-DBs-vmSv.js → hx-pagination-Blt-fFqV.js} +47 -50
- package/dist/shared/hx-pagination-Blt-fFqV.js.map +1 -0
- package/dist/shared/{hx-split-panel-BPMWKPGu.js → hx-split-panel-CV_Kr4EK.js} +16 -19
- package/dist/shared/hx-split-panel-CV_Kr4EK.js.map +1 -0
- package/package.json +1 -1
- package/dist/shared/hx-alert-K5F8KeqI.js.map +0 -1
- package/dist/shared/hx-data-table-DujB9hSE.js.map +0 -1
- package/dist/shared/hx-date-picker-C8d2HtRV.js.map +0 -1
- package/dist/shared/hx-number-input-CAAibZ8X.js.map +0 -1
- package/dist/shared/hx-pagination-DBs-vmSv.js.map +0 -1
- package/dist/shared/hx-split-panel-BPMWKPGu.js.map +0 -1
|
@@ -2,7 +2,7 @@ import { css as c, LitElement as u, nothing as d, html as p } from "lit";
|
|
|
2
2
|
import { property as r, customElement as v } from "lit/decorators.js";
|
|
3
3
|
import { styleMap as f } from "lit/directives/style-map.js";
|
|
4
4
|
import { tokenStyles as b } from "@helixui/tokens/lit";
|
|
5
|
-
const
|
|
5
|
+
const _ = c`
|
|
6
6
|
:host {
|
|
7
7
|
display: flex;
|
|
8
8
|
--_divider-size: var(--hx-split-panel-divider-size, 4px);
|
|
@@ -168,14 +168,14 @@ const x = c`
|
|
|
168
168
|
}
|
|
169
169
|
}
|
|
170
170
|
`;
|
|
171
|
-
var
|
|
171
|
+
var x = Object.defineProperty, g = Object.getOwnPropertyDescriptor, o = (t, i, n, a) => {
|
|
172
172
|
for (var s = a > 1 ? void 0 : a ? g(i, n) : i, l = t.length - 1, h; l >= 0; l--)
|
|
173
173
|
(h = t[l]) && (s = (a ? h(i, n, s) : h(s)) || s);
|
|
174
|
-
return a && s &&
|
|
174
|
+
return a && s && x(i, n, s), s;
|
|
175
175
|
};
|
|
176
176
|
let e = class extends u {
|
|
177
177
|
constructor() {
|
|
178
|
-
super(...arguments), this.position = 50, this.orientation = "horizontal", this.min = 0, this.max = 100, this.snap = [], this.disabled = !1, this.collapsible = !1, this.collapsed = null, this.
|
|
178
|
+
super(...arguments), this.position = 50, this.orientation = "horizontal", this.min = 0, this.max = 100, this.snap = [], this.disabled = !1, this.collapsible = !1, this.collapsed = null, this.resizeLabel = "Resize panels", this.collapseStartLabel = "Collapse start panel", this.collapseEndLabel = "Collapse end panel", this._dragging = !1, this._dragStart = 0, this._positionAtDragStart = 0, this._positionBeforeCollapse = 50, this._cachedContainerWidth = 0, this._cachedContainerHeight = 0, this._onPointerDown = (t) => {
|
|
179
179
|
if (this.disabled) return;
|
|
180
180
|
t.currentTarget.setPointerCapture(t.pointerId), this._dragging = !0, this._dragStart = this.orientation === "horizontal" ? t.clientX : t.clientY, this._positionAtDragStart = this.position, this._cachedContainerWidth = this.offsetWidth, this._cachedContainerHeight = this.offsetHeight, t.preventDefault();
|
|
181
181
|
}, this._onPointerMove = (t) => {
|
|
@@ -272,7 +272,7 @@ let e = class extends u {
|
|
|
272
272
|
part="divider"
|
|
273
273
|
class="divider"
|
|
274
274
|
role="separator"
|
|
275
|
-
aria-label=${this.
|
|
275
|
+
aria-label=${this.resizeLabel}
|
|
276
276
|
aria-orientation=${this.orientation === "horizontal" ? "vertical" : "horizontal"}
|
|
277
277
|
aria-valuenow=${this.position}
|
|
278
278
|
aria-valuemin=${this.min}
|
|
@@ -288,7 +288,7 @@ let e = class extends u {
|
|
|
288
288
|
<button
|
|
289
289
|
type="button"
|
|
290
290
|
class="collapse-btn"
|
|
291
|
-
aria-label=${this.
|
|
291
|
+
aria-label=${`Expand ${this.collapsed} panel`}
|
|
292
292
|
@click=${this._expand}
|
|
293
293
|
>
|
|
294
294
|
${this.collapsed === "start" ? "▶" : "◀"}
|
|
@@ -297,7 +297,7 @@ let e = class extends u {
|
|
|
297
297
|
<button
|
|
298
298
|
type="button"
|
|
299
299
|
class="collapse-btn"
|
|
300
|
-
aria-label=${this.
|
|
300
|
+
aria-label=${this.collapseStartLabel}
|
|
301
301
|
@click=${this._collapseStart}
|
|
302
302
|
>
|
|
303
303
|
◀
|
|
@@ -305,7 +305,7 @@ let e = class extends u {
|
|
|
305
305
|
<button
|
|
306
306
|
type="button"
|
|
307
307
|
class="collapse-btn"
|
|
308
|
-
aria-label=${this.
|
|
308
|
+
aria-label=${this.collapseEndLabel}
|
|
309
309
|
@click=${this._collapseEnd}
|
|
310
310
|
>
|
|
311
311
|
▶
|
|
@@ -318,7 +318,7 @@ let e = class extends u {
|
|
|
318
318
|
`;
|
|
319
319
|
}
|
|
320
320
|
};
|
|
321
|
-
e.styles = [b,
|
|
321
|
+
e.styles = [b, _];
|
|
322
322
|
o([
|
|
323
323
|
r({ type: Number, reflect: !0 })
|
|
324
324
|
], e.prototype, "position", 2);
|
|
@@ -363,21 +363,18 @@ o([
|
|
|
363
363
|
r({ type: String, reflect: !0 })
|
|
364
364
|
], e.prototype, "collapsed", 2);
|
|
365
365
|
o([
|
|
366
|
-
r({
|
|
367
|
-
], e.prototype, "
|
|
366
|
+
r({ attribute: "resize-label" })
|
|
367
|
+
], e.prototype, "resizeLabel", 2);
|
|
368
368
|
o([
|
|
369
|
-
r({
|
|
370
|
-
], e.prototype, "
|
|
369
|
+
r({ attribute: "collapse-start-label" })
|
|
370
|
+
], e.prototype, "collapseStartLabel", 2);
|
|
371
371
|
o([
|
|
372
|
-
r({
|
|
373
|
-
], e.prototype, "
|
|
374
|
-
o([
|
|
375
|
-
r({ attribute: !1 })
|
|
376
|
-
], e.prototype, "labelExpand", 2);
|
|
372
|
+
r({ attribute: "collapse-end-label" })
|
|
373
|
+
], e.prototype, "collapseEndLabel", 2);
|
|
377
374
|
e = o([
|
|
378
375
|
v("hx-split-panel")
|
|
379
376
|
], e);
|
|
380
377
|
export {
|
|
381
378
|
e as H
|
|
382
379
|
};
|
|
383
|
-
//# sourceMappingURL=hx-split-panel-
|
|
380
|
+
//# sourceMappingURL=hx-split-panel-CV_Kr4EK.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"hx-split-panel-CV_Kr4EK.js","sources":["../../src/components/hx-split-panel/hx-split-panel.styles.ts","../../src/components/hx-split-panel/hx-split-panel.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixSplitPanelStyles = css`\n :host {\n display: flex;\n --_divider-size: var(--hx-split-panel-divider-size, 4px);\n --_divider-color: var(--hx-split-panel-divider-color, var(--hx-color-neutral-200));\n --_divider-hover-color: var(--hx-split-panel-divider-hover-color, var(--hx-color-primary-500));\n overflow: hidden;\n }\n\n :host([orientation='horizontal']) {\n flex-direction: row;\n width: 100%;\n height: 100%;\n }\n\n :host([orientation='vertical']) {\n flex-direction: column;\n width: 100%;\n height: 100%;\n }\n\n .panel {\n overflow: auto;\n min-width: 0;\n min-height: 0;\n }\n\n .panel--start {\n flex-shrink: 0;\n }\n\n .panel--end {\n flex: 1;\n }\n\n :host([orientation='horizontal']) .panel--start {\n height: 100%;\n }\n\n :host([orientation='vertical']) .panel--start {\n width: 100%;\n }\n\n /* ─── Divider Track (flex child wrapper) ─── */\n\n .divider-track {\n flex-shrink: 0;\n position: relative;\n overflow: visible;\n display: flex;\n align-items: stretch;\n }\n\n :host([orientation='horizontal']) .divider-track {\n width: var(--_divider-size);\n height: 100%;\n }\n\n :host([orientation='vertical']) .divider-track {\n width: 100%;\n height: var(--_divider-size);\n }\n\n /* ─── Divider (separator role — no interactive children) ─── */\n\n .divider {\n flex: 1;\n background-color: var(--_divider-color);\n cursor: col-resize;\n transition: background-color var(--hx-transition-fast, 150ms ease);\n touch-action: none;\n user-select: none;\n -webkit-user-select: none;\n outline: none;\n }\n\n :host([orientation='horizontal']) .divider {\n cursor: col-resize;\n }\n\n :host([orientation='vertical']) .divider {\n cursor: row-resize;\n }\n\n .divider:hover,\n .divider:focus-visible {\n background-color: var(--_divider-hover-color);\n }\n\n .divider:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(\n --hx-split-panel-focus-ring-color,\n var(--hx-focus-ring-color, var(--hx-color-primary-500))\n );\n outline-offset: var(--hx-focus-ring-offset, 2px);\n box-shadow: 0 0 0 4px color-mix(in srgb, var(--_divider-hover-color) 30%, transparent);\n }\n\n :host([disabled]) .divider {\n cursor: default;\n pointer-events: none;\n }\n\n :host([disabled]) .divider:hover,\n :host([disabled]) .divider:focus-visible {\n background-color: var(--_divider-color);\n outline: none;\n box-shadow: none;\n }\n\n /* ─── Collapse Controls (siblings of separator, not children) ─── */\n\n .collapse-controls {\n position: absolute;\n top: 50%;\n inset-inline-start: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n z-index: 2;\n pointer-events: auto;\n }\n\n :host([orientation='vertical']) .collapse-controls {\n flex-direction: row;\n }\n\n .collapse-btn {\n background: var(--_divider-hover-color);\n border: 2px solid var(--hx-color-neutral-0);\n color: var(--hx-color-neutral-0);\n width: 20px;\n height: 20px;\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 8px;\n padding: 0;\n line-height: 1;\n flex-shrink: 0;\n }\n\n .collapse-btn:hover {\n filter: brightness(1.1);\n }\n\n .collapse-btn:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(\n --hx-split-panel-focus-ring-color,\n var(--hx-focus-ring-color, var(--hx-color-primary-500))\n );\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .divider {\n transition: none;\n }\n }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixSplitPanelStyles } from './hx-split-panel.styles.js';\n\n/**\n * A resizable two-pane layout with a draggable divider.\n *\n * @summary Resizable split panel with start and end panes.\n *\n * @tag hx-split-panel\n *\n * @slot start - The first (start) panel content.\n * @slot end - The second (end) panel content.\n *\n * @csspart start - The start panel container.\n * @csspart divider - The draggable divider element.\n * @csspart end - The end panel container.\n *\n * @fires hx-reposition - Fired when the divider is moved. Detail: `{ position: number }`.\n *\n * @cssprop [--hx-split-panel-divider-size=4px] - Width (horizontal) or height (vertical) of the divider.\n * @cssprop [--hx-split-panel-divider-color=var(--hx-color-neutral-200)] - Default divider color.\n * @cssprop [--hx-split-panel-divider-hover-color=var(--hx-color-primary-500)] - Divider color on hover/focus.\n *\n * @example Drupal Twig usage:\n * ```twig\n * <hx-split-panel\n * position=\"50\"\n * orientation=\"horizontal\"\n * min=\"10\"\n * max=\"90\"\n * collapsible\n * >\n * <div slot=\"start\">{{ start_content }}</div>\n * <div slot=\"end\">{{ end_content }}</div>\n * </hx-split-panel>\n *\n * Attribute-settable: position, position-in-pixels, orientation, disabled, min, max, collapsible, collapsed\n * JS-only (complex types): snap (use .snap=${[25, 50, 75]} in Lit templates,\n * or snap=\"[25,50,75]\" as JSON string in Twig)\n * ```\n */\n@customElement('hx-split-panel')\nexport class HelixSplitPanel extends LitElement {\n static override styles = [tokenStyles, helixSplitPanelStyles];\n\n /**\n * Position of the divider as a percentage (0–100) of the start panel.\n * @attr position\n */\n @property({ type: Number, reflect: true })\n position = 50;\n\n /**\n * Position of the divider in pixels (alternative to `position`).\n * When set, takes precedence over `position` until the host is measured.\n * @attr position-in-pixels\n */\n @property({ type: Number, attribute: 'position-in-pixels' })\n positionInPixels: number | undefined;\n\n /**\n * Orientation of the split.\n * @attr orientation\n */\n @property({ type: String, reflect: true })\n orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n /**\n * Minimum position as a percentage (0–100). Prevents full collapse of start panel.\n * @attr min\n */\n @property({ type: Number, reflect: true })\n min = 0;\n\n /**\n * Maximum position as a percentage (0–100). Prevents full expansion of start panel.\n * @attr max\n */\n @property({ type: Number, reflect: true })\n max = 100;\n\n /**\n * Snap points as an array of percentages. The divider snaps to the\n * nearest point within a 5% threshold.\n * Accepts JSON array string in HTML: snap=\"[25, 50, 75]\"\n * @attr snap\n */\n @property({\n attribute: 'snap',\n converter: {\n fromAttribute(value: string | null): number[] {\n if (!value) return [];\n try {\n const parsed = JSON.parse(value) as unknown;\n if (Array.isArray(parsed)) return (parsed as unknown[]).map(Number);\n return [];\n } catch {\n return value\n .split(',')\n .map((s) => Number(s.trim()))\n .filter((n) => !isNaN(n));\n }\n },\n toAttribute(value: number[]): string {\n return JSON.stringify(value);\n },\n },\n })\n snap: number[] = [];\n\n /**\n * When true, the divider cannot be dragged.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * When true, collapse/expand buttons appear on the divider.\n * @attr collapsible\n */\n @property({ type: Boolean, reflect: true })\n collapsible = false;\n\n /**\n * Which panel is collapsed: 'start', 'end', or null (not collapsed).\n * @attr collapsed\n */\n @property({ type: String, reflect: true })\n collapsed: 'start' | 'end' | null = null;\n\n /**\n * Accessible label for the divider separator element.\n * @attr resize-label\n */\n @property({ attribute: 'resize-label' })\n resizeLabel = 'Resize panels';\n\n /**\n * Accessible label for the button that collapses the start panel.\n * @attr collapse-start-label\n */\n @property({ attribute: 'collapse-start-label' })\n collapseStartLabel = 'Collapse start panel';\n\n /**\n * Accessible label for the button that collapses the end panel.\n * @attr collapse-end-label\n */\n @property({ attribute: 'collapse-end-label' })\n collapseEndLabel = 'Collapse end panel';\n\n /**\n * Whether the user is currently dragging the divider.\n * @internal\n */\n private _dragging = false;\n /**\n * The pointer coordinate (clientX or clientY) at the start of a drag gesture.\n * @internal\n */\n private _dragStart = 0;\n /**\n * The divider position percentage at the moment a drag gesture begins, used to compute deltas.\n * @internal\n */\n private _positionAtDragStart = 0;\n /**\n * The position saved before a collapse occurs, restored when the panel is expanded.\n * @internal\n */\n private _positionBeforeCollapse = 50;\n /**\n * Cached container width measured once at drag start to avoid layout thrash on every pointermove.\n * @internal\n */\n private _cachedContainerWidth = 0;\n /**\n * Cached container height measured once at drag start to avoid layout thrash on every pointermove.\n * @internal\n */\n private _cachedContainerHeight = 0;\n\n /** @internal */\n private _clamp(value: number): number {\n return Math.min(this.max, Math.max(this.min, value));\n }\n\n /** @internal */\n private _snapToPoint(value: number): number {\n if (!this.snap.length) return value;\n const threshold = 5;\n for (const point of this.snap) {\n if (Math.abs(value - point) <= threshold) return point;\n }\n return value;\n }\n\n /** @internal */\n private _setPosition(percent: number): void {\n const clamped = this._clamp(this._snapToPoint(percent));\n if (clamped === this.position) return;\n this.position = clamped;\n this.dispatchEvent(\n new CustomEvent<{ position: number }>('hx-reposition', {\n detail: { position: this.position },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n /** @internal */\n private _getHostSize(): number {\n if (this.orientation === 'horizontal') {\n return this.offsetWidth;\n }\n return this.offsetHeight;\n }\n\n /**\n * Initiates a drag gesture when the divider receives a pointerdown event.\n * @internal\n */\n private _onPointerDown = (e: PointerEvent): void => {\n if (this.disabled) return;\n const divider = e.currentTarget as HTMLElement;\n divider.setPointerCapture(e.pointerId);\n this._dragging = true;\n this._dragStart = this.orientation === 'horizontal' ? e.clientX : e.clientY;\n this._positionAtDragStart = this.position;\n // Cache container dimensions once at drag start to avoid forced layout on every pointermove\n this._cachedContainerWidth = this.offsetWidth;\n this._cachedContainerHeight = this.offsetHeight;\n e.preventDefault();\n };\n\n /**\n * Updates the divider position during an active drag gesture.\n * @internal\n */\n private _onPointerMove = (e: PointerEvent): void => {\n if (!this._dragging) return;\n const current = this.orientation === 'horizontal' ? e.clientX : e.clientY;\n const delta = current - this._dragStart;\n const hostSize =\n this.orientation === 'horizontal' ? this._cachedContainerWidth : this._cachedContainerHeight;\n if (hostSize === 0) return;\n const deltaPercent = (delta / hostSize) * 100;\n this._setPosition(this._positionAtDragStart + deltaPercent);\n };\n\n /**\n * Ends the drag gesture when the pointer is released.\n * @internal\n */\n private _onPointerUp = (): void => {\n this._dragging = false;\n this._cachedContainerWidth = 0;\n this._cachedContainerHeight = 0;\n };\n\n /**\n * Handles keyboard navigation on the divider — arrow keys adjust position, Home/End jump to min/max.\n * @internal\n */\n private _onKeyDown = (e: KeyboardEvent): void => {\n if (this.disabled) return;\n switch (e.key) {\n case 'ArrowLeft':\n case 'ArrowUp':\n e.preventDefault();\n this._setPosition(this.position - 1);\n break;\n case 'ArrowRight':\n case 'ArrowDown':\n e.preventDefault();\n this._setPosition(this.position + 1);\n break;\n case 'PageUp':\n e.preventDefault();\n this._setPosition(this.position + 10);\n break;\n case 'PageDown':\n e.preventDefault();\n this._setPosition(this.position - 10);\n break;\n case 'Home':\n e.preventDefault();\n this._setPosition(this.min);\n break;\n case 'End':\n e.preventDefault();\n this._setPosition(this.max);\n break;\n }\n };\n\n /**\n * Collapses the start panel by setting `collapsed` to `'start'`.\n * @internal\n */\n private _collapseStart = (): void => {\n this.collapsed = 'start';\n };\n\n /**\n * Collapses the end panel by setting `collapsed` to `'end'`.\n * @internal\n */\n private _collapseEnd = (): void => {\n this.collapsed = 'end';\n };\n\n /**\n * Expands a collapsed panel by resetting `collapsed` to null.\n * @internal\n */\n private _expand = (): void => {\n this.collapsed = null;\n };\n\n protected override willUpdate(changedProperties: PropertyValues<this>): void {\n super.willUpdate(changedProperties);\n if (!changedProperties.has('collapsed')) return;\n\n const prev = changedProperties.get('collapsed');\n\n if (this.collapsed === 'start') {\n // Save restore point when transitioning from non-collapsed state (or initial render)\n if (prev === null || prev === undefined) this._positionBeforeCollapse = this.position;\n this._setPosition(this.min);\n } else if (this.collapsed === 'end') {\n if (prev === null || prev === undefined) this._positionBeforeCollapse = this.position;\n this._setPosition(this.max);\n } else if (this.collapsed === null && prev !== null && prev !== undefined) {\n // Only expand when transitioning from an explicitly collapsed state (not first render)\n this._setPosition(this._positionBeforeCollapse);\n }\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n if (this.positionInPixels !== undefined) {\n // Convert pixel position to percentage after first paint\n requestAnimationFrame(() => {\n if (this.positionInPixels !== undefined) {\n const hostSize = this._getHostSize();\n if (hostSize > 0) {\n this._setPosition((this.positionInPixels / hostSize) * 100);\n }\n }\n });\n }\n }\n\n /** @internal */\n private _startPanelStyleMap(): Record<string, string> {\n if (this.orientation === 'horizontal') {\n return { width: `${this.position}%` };\n }\n return { height: `${this.position}%` };\n }\n\n override render() {\n return html`\n <div part=\"start\" class=\"panel panel--start\" style=${styleMap(this._startPanelStyleMap())}>\n <slot name=\"start\"></slot>\n </div>\n <div class=\"divider-track\">\n <div\n part=\"divider\"\n class=\"divider\"\n role=\"separator\"\n aria-label=${this.resizeLabel}\n aria-orientation=${this.orientation === 'horizontal' ? 'vertical' : 'horizontal'}\n aria-valuenow=${this.position}\n aria-valuemin=${this.min}\n aria-valuemax=${this.max}\n aria-disabled=${this.disabled ? 'true' : nothing}\n tabindex=${this.disabled ? '-1' : '0'}\n @pointerdown=${this._onPointerDown}\n @pointermove=${this._onPointerMove}\n @pointerup=${this._onPointerUp}\n @keydown=${this._onKeyDown}\n ></div>\n ${this.collapsible\n ? this.collapsed\n ? html`<div class=\"collapse-controls\">\n <button\n type=\"button\"\n class=\"collapse-btn\"\n aria-label=${`Expand ${this.collapsed} panel`}\n @click=${this._expand}\n >\n ${this.collapsed === 'start' ? '▶' : '◀'}\n </button>\n </div>`\n : html`<div class=\"collapse-controls\">\n <button\n type=\"button\"\n class=\"collapse-btn\"\n aria-label=${this.collapseStartLabel}\n @click=${this._collapseStart}\n >\n ◀\n </button>\n <button\n type=\"button\"\n class=\"collapse-btn\"\n aria-label=${this.collapseEndLabel}\n @click=${this._collapseEnd}\n >\n ▶\n </button>\n </div>`\n : nothing}\n </div>\n <div part=\"end\" class=\"panel panel--end\">\n <slot name=\"end\"></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-split-panel': HelixSplitPanel;\n }\n}\n"],"names":["helixSplitPanelStyles","css","HelixSplitPanel","LitElement","e","delta","hostSize","deltaPercent","value","threshold","point","percent","clamped","changedProperties","prev","html","styleMap","nothing","tokenStyles","__decorateClass","property","parsed","s","n","customElement"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-alert-K5F8KeqI.js","sources":["../../src/components/hx-alert/hx-alert.styles.ts","../../src/components/hx-alert/hx-alert.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixAlertStyles = css`\n :host {\n display: block;\n }\n\n :host(:not([open])) {\n display: none;\n }\n\n /* ─── Screen-reader-only announcement region ─── */\n /* Always present in DOM so AT registers it before content is injected. */\n /* Visually hidden via clip-path technique (superior to display:none which */\n /* removes the element from the AT tree entirely). */\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n * {\n box-sizing: border-box;\n }\n\n /* ─── Alert Container ─── */\n\n .alert {\n display: flex;\n align-items: flex-start;\n gap: var(--hx-alert-gap, var(--hx-space-3, 0.75rem));\n padding: var(--hx-alert-padding, var(--hx-space-4, 1rem));\n border: var(--hx-alert-border-width, var(--hx-border-width-thin, 1px)) solid\n var(--hx-alert-border-color, var(--hx-color-info-200, #b3d9ef));\n border-radius: var(--hx-alert-border-radius, var(--hx-border-radius-md, 0.375rem));\n background-color: var(--hx-alert-bg, var(--hx-color-info-50, #e8f4fd));\n color: var(--hx-alert-color, var(--hx-color-info-800, #1a3a4a));\n font-family: var(--hx-alert-font-family, var(--hx-font-family-sans, sans-serif));\n font-size: var(--hx-font-size-sm, 0.875rem);\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n /* ─── Accent Variant (left border stripe) ─── */\n /* Removes full border and replaces with a left-side accent stripe. */\n /* Common healthcare/enterprise dashboard pattern for dense information UIs. */\n\n .alert--accent {\n border-width: 0;\n border-left: var(--hx-alert-accent-width, 4px) solid\n var(--hx-alert-border-color, var(--hx-color-info-200, #b3d9ef));\n border-radius: 0;\n }\n\n /* ─── Severity Label (WCAG 1.4.1) ─── */\n /* Visually hidden — provides a non-color cue for screen readers and users */\n /* who cannot distinguish variants by color alone (e.g. color-blind users). */\n /* Always present regardless of showIcon so severity is never color-only. */\n\n .alert__severity-label {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n /* ─── Icon ─── */\n\n .alert__icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--hx-alert-icon-color, var(--hx-color-info-500, #3b82f6));\n }\n\n .alert__icon svg {\n width: var(--hx-space-5, 1.25rem);\n height: var(--hx-space-5, 1.25rem);\n fill: currentColor;\n }\n\n /* ─── Title ─── */\n\n .alert__title {\n display: none;\n font-weight: var(--hx-font-weight-semibold, 600);\n margin-bottom: var(--hx-space-1, 0.25rem);\n }\n\n .alert__title--visible {\n display: block;\n }\n\n /* ─── Message ─── */\n\n .alert__message {\n flex: 1;\n min-width: 0;\n }\n\n /* ─── Actions ─── */\n /* Hidden by default; shown via JS slotchange detection to avoid invisible */\n /* margin-top spacing when no actions are slotted. */\n\n .alert__actions {\n display: none;\n align-items: center;\n gap: var(--hx-space-2, 0.5rem);\n margin-top: var(--hx-space-2, 0.5rem);\n }\n\n .alert__actions--visible {\n display: flex;\n }\n\n /* ─── Close Button ─── */\n /* Minimum 44px touch target per WCAG 2.5.8 (Target Size Minimum, AA) and */\n /* Apple HIG / Google Material guidelines. Uses absolute px units to ensure */\n /* the target size is independent of the consumer's base font size. */\n\n .alert__close-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n min-width: var(--hx-touch-target-size, 44px);\n min-height: var(--hx-touch-target-size, 44px);\n margin-left: auto;\n padding: 0;\n border: none;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n background: transparent;\n color: var(--hx-alert-color, var(--hx-color-info-800, #1a3a4a));\n cursor: pointer;\n font-size: var(--hx-font-size-md, 1rem);\n line-height: 1;\n transition:\n background-color var(--hx-transition-fast, 150ms ease),\n opacity var(--hx-transition-fast, 150ms ease);\n opacity: 0.7;\n }\n\n .alert__close-button:hover {\n opacity: 1;\n /* color-mix() is supported in Chrome 111+, Firefox 113+, Safari 16.2+. */\n /* Falls back to transparent (no hover background) in older environments. */\n background-color: color-mix(in srgb, currentColor 10%, transparent);\n }\n\n .alert__close-button:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);\n outline-offset: var(--hx-focus-ring-offset, 2px);\n opacity: 1;\n }\n\n .alert__close-button svg {\n width: var(--hx-space-4, 1rem);\n height: var(--hx-space-4, 1rem);\n fill: currentColor;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .alert__close-button {\n transition: none;\n }\n }\n\n /* ─── Variant: info ─── */\n\n :host([variant='info']) .alert,\n :host(:not([variant])) .alert {\n --hx-alert-bg: var(--hx-color-info-50, #e8f4fd);\n --hx-alert-border-color: var(--hx-color-info-200, #b3d9ef);\n --hx-alert-color: var(--hx-color-info-800, #1a3a4a);\n --hx-alert-icon-color: var(--hx-color-info-500, #3b82f6);\n }\n\n /* ─── Variant: success ─── */\n\n :host([variant='success']) .alert {\n --hx-alert-bg: var(--hx-color-success-50, #ecfdf5);\n --hx-alert-border-color: var(--hx-color-success-200, #a7f3d0);\n --hx-alert-color: var(--hx-color-success-800, #065f46);\n --hx-alert-icon-color: var(--hx-color-success-500, #10b981);\n }\n\n /* ─── Variant: warning ─── */\n\n :host([variant='warning']) .alert {\n --hx-alert-bg: var(--hx-color-warning-50, #fffbeb);\n --hx-alert-border-color: var(--hx-color-warning-200, #fde68a);\n --hx-alert-color: var(--hx-color-warning-800, #92400e);\n --hx-alert-icon-color: var(--hx-color-warning-500, #f59e0b);\n }\n\n /* ─── Variant: error ─── */\n\n :host([variant='error']) .alert {\n --hx-alert-bg: var(--hx-color-error-50, #fef2f2);\n --hx-alert-border-color: var(--hx-color-error-200, #fecaca);\n --hx-alert-color: var(--hx-color-error-800, #991b1b);\n --hx-alert-icon-color: var(--hx-color-error-500, #ef4444);\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixAlertStyles } from './hx-alert.styles.js';\n\n/** Alert variant determines visual styling and ARIA semantics. */\nexport type AlertVariant = 'info' | 'success' | 'warning' | 'error';\n\n/**\n * A feedback component for communicating status messages, warnings, and errors.\n * Critical for healthcare patient safety alerts.\n *\n * @summary Feedback alert for status messages with variant-based styling and ARIA live regions.\n *\n * @tag hx-alert\n *\n * @slot - Default slot for alert message content.\n * @slot title - Optional title/headline for the alert.\n * @slot icon - Custom icon to override the default variant icon.\n * @slot actions - Action buttons rendered within the alert.\n *\n * @attr {string} heading - Text used to build the close button's contextual aria-label\n * (e.g., \"Close Low blood pressure alert\"). When absent the label falls back to \"Close alert\".\n *\n * @fires {CustomEvent<{reason: string}>} hx-close - Dispatched when the user dismisses the alert.\n * @fires {CustomEvent} hx-after-close - Dispatched after the alert is dismissed.\n *\n * @csspart alert - The outer alert container.\n * @csspart title - The title/headline container.\n * @csspart icon - The icon container.\n * @csspart message - The message content area.\n * @csspart close-button - The dismiss button (only rendered when dismissible).\n * @csspart actions - The actions container.\n *\n * @cssprop [--hx-alert-bg=var(--hx-color-info-50)] - Alert background color.\n * @cssprop [--hx-alert-color=var(--hx-color-info-800)] - Alert text color.\n * @cssprop [--hx-alert-border-color=var(--hx-color-info-200)] - Alert border color.\n * @cssprop [--hx-alert-border-radius=var(--hx-border-radius-md)] - Alert border radius.\n * @cssprop [--hx-alert-border-width=var(--hx-border-width-thin)] - Alert border width.\n * @cssprop [--hx-alert-padding=var(--hx-space-4)] - Alert padding.\n * @cssprop [--hx-alert-gap=var(--hx-space-3)] - Gap between alert elements.\n * @cssprop [--hx-alert-icon-color=var(--hx-color-info-500)] - Alert icon color.\n * @cssprop [--hx-alert-font-family=var(--hx-font-family-sans)] - Alert font family.\n * @cssprop [--hx-touch-target-size=44px] - Minimum touch target size for the close button.\n * @cssprop [--hx-alert-accent-width=4px] - Width of the left border accent stripe.\n */\n@customElement('hx-alert')\nexport class HelixAlert extends LitElement {\n static override styles = [tokenStyles, helixAlertStyles];\n\n // ─── Properties ───\n\n /**\n * Visual variant of the alert that determines colors and ARIA semantics.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: AlertVariant = 'info';\n\n /**\n * Whether the alert can be dismissed by the user.\n * @attr dismissible\n */\n @property({ type: Boolean, reflect: true })\n dismissible = false;\n\n /**\n * Optional heading text that provides context for the close button's accessible label.\n * When provided, the close button is announced as \"Close [heading] alert\".\n * When absent, the close button falls back to \"Close alert\".\n * @attr heading\n */\n @property({ type: String })\n heading = '';\n\n /**\n * Whether the alert is visible. Add the `open` attribute to show the alert.\n * @attr open\n */\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /**\n * Whether to show the default variant icon. Add `show-icon` attribute to display the icon.\n * @attr show-icon\n */\n @property({ type: Boolean, reflect: true, attribute: 'show-icon' })\n showIcon = false;\n\n /**\n * When true, applies a left border accent stripe instead of a full border.\n * Common healthcare/enterprise dashboard pattern for visual distinction of alert types.\n * @attr accent\n */\n @property({ type: Boolean, reflect: true })\n accent = false;\n\n /**\n * CSS selector for the element to return focus to after the alert is dismissed.\n * When set, the component will find and focus the matching element after dismissal.\n * If not set, focus management is the caller's responsibility via the hx-after-close event.\n * @attr return-focus-to\n */\n @property({ type: String, attribute: 'return-focus-to' })\n returnFocusTo: string | null = null;\n\n /**\n * Map of severity variant labels prepended to screen-reader announcements.\n * Override to provide localized severity prefixes.\n */\n @property({ attribute: false })\n severityLabels: Partial<Record<string, string>> = {\n info: 'Info:',\n success: 'Success:',\n warning: 'Warning:',\n error: 'Error:',\n };\n\n /** Accessible label for the dismiss button. Override for localized text. */\n @property({ type: String, attribute: 'close-label' })\n closeLabel = 'Close alert';\n\n // ─── State ───\n\n /** @internal */\n @state()\n private _hasActions = false;\n\n /** @internal */\n @state()\n private _hasTitle = false;\n\n // ─── Private Handler References ───\n\n /** @internal */\n private _actionsSlotChangeHandler: (() => void) | null = null;\n /** @internal */\n private _titleSlotChangeHandler: (() => void) | null = null;\n\n // ─── Private Helpers ───\n\n /** Returns true when the variant requires assertive announcement. */\n /** @internal */\n private get _isAssertive(): boolean {\n return this.variant === 'error';\n }\n\n /**\n * Returns the appropriate ARIA role based on variant.\n * role=\"alert\" implies aria-live=\"assertive\"; role=\"status\" implies aria-live=\"polite\".\n * We do NOT set aria-live explicitly to avoid double-announcements in JAWS.\n */\n /** @internal */\n private get _role(): string {\n return this._isAssertive ? 'alert' : 'status';\n }\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Apply ARIA role to the host element for reliable screen reader support across\n // Shadow DOM boundaries. Placing role on a shadow-internal element has inconsistent\n // AT support in JAWS+Chrome and VoiceOver+Safari combinations (particularly pre-2024).\n this.setAttribute('role', this._role);\n if (!this.open) {\n this.setAttribute('aria-hidden', 'true');\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n const actionsSlot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"actions\"]');\n if (actionsSlot && this._actionsSlotChangeHandler) {\n actionsSlot.removeEventListener('slotchange', this._actionsSlotChangeHandler);\n }\n const titleSlot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"title\"]');\n if (titleSlot && this._titleSlotChangeHandler) {\n titleSlot.removeEventListener('slotchange', this._titleSlotChangeHandler);\n }\n }\n\n override firstUpdated(): void {\n // Track actions slot content to avoid invisible spacing when no actions are slotted.\n const actionsSlot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"actions\"]');\n if (actionsSlot) {\n this._actionsSlotChangeHandler = () => {\n this._hasActions = actionsSlot.assignedNodes({ flatten: true }).length > 0;\n };\n actionsSlot.addEventListener('slotchange', this._actionsSlotChangeHandler);\n }\n\n // Track title slot content so the title container doesn't create dead space when empty.\n const titleSlot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"title\"]');\n if (titleSlot) {\n this._titleSlotChangeHandler = () => {\n this._hasTitle = titleSlot.assignedNodes({ flatten: true }).length > 0;\n };\n titleSlot.addEventListener('slotchange', this._titleSlotChangeHandler);\n }\n }\n\n protected override updated(changedProperties: Map<PropertyKey, unknown>): void {\n super.updated(changedProperties);\n if (changedProperties.has('variant')) {\n // Keep host ARIA role in sync with variant (assertive vs. polite).\n this.setAttribute('role', this._role);\n }\n if (changedProperties.has('open')) {\n // Manage aria-hidden in addition to display:none for reliable AT exclusion.\n // When open transitions from false→true, removing aria-hidden signals to AT\n // that the live region content should be announced.\n if (this.open) {\n this.removeAttribute('aria-hidden');\n // Trigger announcement via the sr-only polite live region for ATs (JAWS+Chrome,\n // NVDA) that do not re-announce existing content when aria-hidden is merely removed.\n // We inject text after a microtask so the DOM has settled and the live region\n // is registered by the AT before content arrives.\n const previousOpen = changedProperties.get('open');\n if (previousOpen === false) {\n Promise.resolve().then(() => {\n const announcer = this.renderRoot.querySelector<HTMLElement>('.sr-only');\n if (announcer) {\n announcer.textContent = '';\n // Second microtask ensures the clear is processed before re-injection,\n // guaranteeing the AT sees a content change rather than no-op.\n Promise.resolve().then(() => {\n const prefix = this.severityLabels[this.variant] ?? '';\n const message = this.textContent?.trim() ?? '';\n announcer.textContent = prefix ? `${prefix} ${message}` : message;\n });\n }\n });\n }\n } else {\n this.setAttribute('aria-hidden', 'true');\n // Clear the announcer when hidden so stale text is not re-read on next open.\n const announcer = this.renderRoot.querySelector<HTMLElement>('.sr-only');\n if (announcer) {\n announcer.textContent = '';\n }\n }\n }\n }\n\n // ─── Default Icons ───\n\n /** @internal */\n private _renderInfoIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n <path\n d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm.75 4.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM9.25 9a.75.75 0 011.5 0v4a.75.75 0 01-1.5 0V9z\"\n />\n </svg>`;\n }\n\n /** @internal */\n private _renderSuccessIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n <path\n d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm3.03 6.28a.75.75 0 00-1.06-1.06L9 10.19 7.78 8.97a.75.75 0 00-1.06 1.06l1.75 1.75a.75.75 0 001.06 0l3.5-3.5z\"\n />\n </svg>`;\n }\n\n /** @internal */\n private _renderWarningIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n <path\n d=\"M8.49 2.92a1.75 1.75 0 013.02 0l6.25 10.83A1.75 1.75 0 0116.25 16H3.75a1.75 1.75 0 01-1.51-2.25L8.49 2.92zM10 7a.75.75 0 01.75.75v3a.75.75 0 01-1.5 0v-3A.75.75 0 0110 7zm0 7.5a.75.75 0 100-1.5.75.75 0 000 1.5z\"\n />\n </svg>`;\n }\n\n /** @internal */\n private _renderErrorIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n <path\n d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm-1.72 5.22a.75.75 0 011.06 0L10 7.94l.66-.72a.75.75 0 111.06 1.06L11.06 9l.66.72a.75.75 0 11-1.06 1.06L10 10.06l-.66.72a.75.75 0 01-1.06-1.06L8.94 9l-.66-.72a.75.75 0 010-1.06z\"\n />\n </svg>`;\n }\n\n /** @internal */\n private _renderDefaultIcon() {\n switch (this.variant) {\n case 'success':\n return this._renderSuccessIcon();\n case 'warning':\n return this._renderWarningIcon();\n case 'error':\n return this._renderErrorIcon();\n case 'info':\n default:\n return this._renderInfoIcon();\n }\n }\n\n /** @internal */\n private _renderCloseIcon() {\n return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n <path\n d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"\n />\n </svg>`;\n }\n\n // ─── Event Handling ───\n\n /** @internal */\n private _handleDismiss(): void {\n this.open = false;\n\n /**\n * Dispatched when the user dismisses the alert.\n * @event hx-close\n */\n this.dispatchEvent(\n new CustomEvent<{ reason: string }>('hx-close', {\n bubbles: true,\n composed: true,\n detail: { reason: 'user' },\n }),\n );\n\n /**\n * Dispatched after the alert is dismissed.\n * @event hx-after-close\n */\n this.dispatchEvent(\n new CustomEvent<void>('hx-after-close', {\n bubbles: true,\n composed: true,\n }),\n );\n\n // Return focus to a designated element if specified via returnFocusTo.\n if (this.returnFocusTo) {\n const target = document.querySelector(this.returnFocusTo);\n if (target instanceof HTMLElement) {\n target.focus();\n }\n }\n }\n\n // ─── Render ───\n\n override render() {\n const classes = {\n alert: true,\n [`alert--${this.variant}`]: true,\n 'alert--accent': this.accent,\n };\n\n // WCAG 1.4.1: Always render a visually-hidden severity label so the variant\n // is never conveyed by color alone, regardless of whether showIcon is set.\n const severityLabel = this.severityLabels[this.variant] ?? '';\n\n return html`\n <div\n class=\"sr-only\"\n aria-live=${this._isAssertive ? 'assertive' : 'polite'}\n aria-atomic=\"true\"\n ></div>\n <div part=\"alert\" class=${classMap(classes)}>\n <span class=\"alert__severity-label\">${severityLabel}</span>\n ${this.showIcon\n ? html`\n <div part=\"icon\" class=\"alert__icon\">\n <slot name=\"icon\">${this._renderDefaultIcon()}</slot>\n </div>\n `\n : nothing}\n\n <div part=\"message\" class=\"alert__message\">\n <div part=\"title\" class=\"alert__title ${this._hasTitle ? 'alert__title--visible' : ''}\">\n <slot name=\"title\"></slot>\n </div>\n <slot></slot>\n <div\n part=\"actions\"\n class=\"alert__actions ${this._hasActions ? 'alert__actions--visible' : ''}\"\n >\n <slot name=\"actions\"></slot>\n </div>\n </div>\n\n ${this.dismissible\n ? html`\n <button\n part=\"close-button\"\n class=\"alert__close-button\"\n aria-label=${this.closeLabel}\n @click=${this._handleDismiss}\n >\n ${this._renderCloseIcon()}\n </button>\n `\n : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-alert': HelixAlert;\n }\n}\n\nexport type { HelixAlert as HxAlert };\n"],"names":["helixAlertStyles","css","HelixAlert","LitElement","actionsSlot","titleSlot","changedProperties","announcer","prefix","message","_a","html","target","classes","severityLabel","classMap","nothing","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-data-table-DujB9hSE.js","sources":["../../src/components/hx-data-table/hx-data-table.styles.ts","../../src/components/hx-data-table/hx-data-table.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixDataTableStyles = css`\n :host {\n display: block;\n overflow-x: auto;\n font-family: var(--hx-font-family-sans, sans-serif);\n font-size: var(--hx-font-size-sm, 0.875rem);\n }\n\n /* ─── Scroll Wrapper ─── */\n\n .table-wrapper {\n min-width: 0;\n width: 100%;\n }\n\n /* ─── Table ─── */\n\n table {\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n min-width: var(--hx-data-table-min-width, 600px);\n }\n\n /* ─── Head ─── */\n\n thead {\n background-color: var(--hx-data-table-header-bg, var(--hx-color-neutral-50, #f8fafc));\n }\n\n :host([sticky-header]) thead th {\n position: sticky;\n top: 0;\n z-index: 1;\n background-color: var(--hx-data-table-header-bg, var(--hx-color-neutral-50, #f8fafc));\n }\n\n /* ─── Cells ─── */\n\n th,\n td {\n padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);\n text-align: start;\n border-bottom: var(--hx-border-width-thin, 1px) solid\n var(--hx-data-table-border-color, var(--hx-color-neutral-200, #e2e8f0));\n vertical-align: middle;\n }\n\n th {\n font-weight: var(--hx-font-weight-semibold, 600);\n color: var(--hx-data-table-header-color, var(--hx-color-neutral-700, #334155));\n white-space: nowrap;\n }\n\n td {\n color: var(--hx-data-table-cell-color, var(--hx-color-neutral-900, #0f172a));\n }\n\n /* ─── Checkbox Column ─── */\n\n th.col-checkbox,\n td.col-checkbox {\n /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */\n width: var(--hx-touch-target-min, 2.75rem);\n min-width: var(--hx-touch-target-min, 2.75rem);\n padding-inline-end: var(--hx-space-2, 0.5rem);\n }\n\n th.col-checkbox {\n text-align: center;\n }\n\n td.col-checkbox {\n text-align: center;\n }\n\n /* ─── Sort Button ─── */\n\n .sort-btn {\n display: inline-flex;\n align-items: center;\n gap: var(--hx-space-1, 0.25rem);\n background: none;\n border: none;\n padding: 0;\n font: inherit;\n font-weight: inherit;\n color: inherit;\n cursor: pointer;\n white-space: nowrap;\n }\n\n .sort-btn:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n border-radius: var(--hx-border-radius-sm, 2px);\n }\n\n /* ─── Sort Icon ─── */\n\n .sort-icon {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n width: 1em;\n height: 1em;\n opacity: 0.4;\n transition:\n opacity var(--hx-transition-fast, 150ms ease),\n transform var(--hx-transition-fast, 150ms ease);\n }\n\n .sort-icon--active {\n opacity: 1;\n color: var(--hx-color-primary-500, #2563eb);\n }\n\n .sort-icon--desc {\n transform: rotate(180deg);\n }\n\n /* ─── Row States ─── */\n\n tbody tr {\n transition: background-color var(--hx-transition-fast, 150ms ease);\n }\n\n tbody tr:hover {\n background-color: var(--hx-data-table-row-hover-bg, var(--hx-color-neutral-50, #f8fafc));\n }\n\n tbody tr[aria-selected='true'] {\n background-color: var(--hx-data-table-row-selected-bg, var(--hx-color-primary-50, #eff6ff));\n }\n\n /* ─── Checkbox Input ─── */\n\n input[type='checkbox'] {\n width: var(--hx-size-4, 1rem);\n height: var(--hx-size-4, 1rem);\n cursor: pointer;\n accent-color: var(--hx-color-primary-500, #2563eb);\n }\n\n /* ─── Loading Skeleton ─── */\n\n .skeleton-cell {\n display: block;\n height: 1em;\n border-radius: var(--hx-border-radius-sm, 2px);\n background: linear-gradient(\n 90deg,\n var(--hx-color-neutral-200, #e2e8f0) 25%,\n var(--hx-color-neutral-100, #f1f5f9) 50%,\n var(--hx-color-neutral-200, #e2e8f0) 75%\n );\n background-size: 200% 100%;\n animation: hx-shimmer 1.5s infinite;\n }\n\n @keyframes hx-shimmer {\n 0% {\n background-position: 200% 0;\n }\n 100% {\n background-position: -200% 0;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .skeleton-cell {\n animation: none;\n opacity: 0.6;\n }\n\n .sort-icon {\n transition: none;\n }\n\n tbody tr {\n transition: none;\n }\n }\n\n /* ─── Cell Focus ─── */\n\n td:focus-visible,\n th:focus-visible,\n [part~='td']:focus-visible,\n [part~='th']:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));\n outline-offset: var(--hx-focus-ring-offset, -2px);\n border-radius: var(--hx-border-radius-sm, 2px);\n }\n\n /* ─── Empty State ─── */\n\n .empty-cell {\n text-align: center;\n color: var(--hx-data-table-empty-color, var(--hx-color-neutral-600, #475569));\n padding: var(--hx-space-8, 2rem) var(--hx-space-4, 1rem);\n }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixDataTableStyles } from './hx-data-table.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * Column definition for `hx-data-table`.\n */\nexport interface HxDataTableColumn {\n key: string;\n label: string;\n sortable?: boolean;\n width?: string;\n}\n\n/**\n * Sort state exported for TypeScript consumers and CEM event types.\n */\nexport interface HxDataTableSortState {\n key: string;\n direction: 'asc' | 'desc';\n}\n\n/**\n * An enterprise data table with sorting, row selection, and keyboard navigation.\n *\n * @summary Enterprise data table with sorting, selection, and responsive scroll.\n *\n * @tag hx-data-table\n *\n * @slot toolbar - Content rendered above the table (e.g., search, actions).\n * @slot empty - Custom empty-state content rendered when `rows` is empty and not loading.\n * @slot loading - Custom loading content rendered when `loading` is true.\n *\n * @fires {CustomEvent<HxDataTableSortState>} hx-sort - Dispatched when a sortable column header is clicked.\n * @fires {CustomEvent<{selectedRows: Record<string, unknown>[]}>} hx-select - Dispatched when row selection changes.\n * @fires {CustomEvent<{row: Record<string, unknown>, index: number}>} hx-row-click - Dispatched when a data row is clicked.\n *\n * @csspart table - The `<table>` element.\n * @csspart thead - The `<thead>` element.\n * @csspart tbody - The `<tbody>` element.\n * @csspart tr - Each `<tr>` element.\n * @csspart th - Each `<th>` element.\n * @csspart td - Each `<td>` element.\n * @csspart sort-icon - The sort indicator icon `<span>` inside sortable headers.\n * @csspart checkbox - Each `<input type=\"checkbox\">` element.\n *\n * @cssprop [--hx-data-table-header-bg=var(--hx-color-neutral-50)] - Header background color.\n * @cssprop [--hx-data-table-header-color=var(--hx-color-neutral-700)] - Header text color.\n * @cssprop [--hx-data-table-cell-color=var(--hx-color-neutral-900)] - Cell text color.\n * @cssprop [--hx-data-table-border-color=var(--hx-color-neutral-200)] - Row border color.\n * @cssprop [--hx-data-table-row-hover-bg=var(--hx-color-neutral-50)] - Row hover background.\n * @cssprop [--hx-data-table-row-selected-bg=var(--hx-color-primary-50)] - Selected row background.\n * @cssprop [--hx-data-table-empty-color=var(--hx-color-neutral-600)] - Empty state text color.\n * @cssprop [--hx-data-table-min-width=600px] - Minimum table width before horizontal scrolling.\n */\n@customElement('hx-data-table')\nexport class HelixDataTable extends LitElement {\n static override styles = [tokenStyles, helixDataTableStyles];\n\n // ─── Public Properties ───\n\n /**\n * Column definitions. Each item: `{ key, label, sortable?, width? }`.\n * Can be set as a JS array or a JSON string (e.g., from a Drupal Twig attribute).\n * @attr columns\n */\n @property({ type: Array })\n columns: HxDataTableColumn[] = [];\n\n /**\n * Row data. Each item is a plain object keyed by column `key` values.\n * Can be set as a JS array or a JSON string (e.g., from a Drupal Twig attribute).\n * @attr rows\n */\n @property({ type: Array })\n rows: Record<string, unknown>[] = [];\n\n /**\n * When true, renders a checkbox column for row selection.\n * @attr selectable\n */\n @property({ type: Boolean, reflect: true })\n selectable = false;\n\n /**\n * The column key currently used for sorting.\n * @attr sort-key\n */\n @property({ type: String, attribute: 'sort-key' })\n sortKey = '';\n\n /**\n * Current sort direction.\n * @attr sort-direction\n */\n @property({ type: String, attribute: 'sort-direction' })\n sortDirection: 'asc' | 'desc' = 'asc';\n\n /**\n * When true, renders a loading skeleton and sets `aria-busy=\"true\"` on the host.\n * @attr loading\n */\n @property({ type: Boolean, reflect: true })\n loading = false;\n\n /**\n * Text displayed in the default empty state when `rows` is empty and not loading.\n * @attr empty-label\n */\n @property({ type: String, attribute: 'empty-label' })\n emptyLabel = 'No data';\n\n /**\n * Accessible name for the table. Exposed via `aria-label` on the `<table>` element.\n * Required when the table has columns — a missing label is a WCAG 4.1.2 violation.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n /**\n * When true, the header row is sticky (position: sticky; top: 0).\n * @attr sticky-header\n */\n @property({ type: Boolean, reflect: true, attribute: 'sticky-header' })\n stickyHeader = false;\n\n /** Accessible label for the \"select all rows\" checkbox. */\n @property({ type: String, attribute: 'label-select-all' })\n labelSelectAll = 'Select all rows';\n\n /**\n * Generates the accessible label for column sort buttons.\n * @param col - column label\n * @param dir - current sort direction\n */\n @property({ attribute: false })\n labelSortBy: (col: string, dir: 'asc' | 'desc' | null) => string = (col, dir) =>\n dir\n ? `Sort by ${col}, currently sorted ${dir === 'asc' ? 'ascending' : 'descending'}`\n : `Sort by ${col}`;\n\n /**\n * Generates the accessible label for row selection checkboxes.\n * @param index - 1-based row index\n */\n @property({ attribute: false })\n labelSelectRow: (index: number) => string = (index) => `Select row ${index}`;\n\n /**\n * Current page (1-based). Set to 0 or leave at default (0) to disable pagination.\n * @attr page\n */\n @property({ type: Number })\n page = 1;\n\n /**\n * Number of rows per page. Set to 0 to disable pagination (show all rows).\n * @attr page-size\n */\n @property({ type: Number, attribute: 'page-size' })\n pageSize = 0;\n\n // ─── Internal State ───\n\n /** @internal */\n @state()\n private _selectedRows: Set<number> = new Set();\n\n // ─── Lifecycle ───\n\n override willUpdate(changed: PropertyValues<this>): void {\n // Coerce JSON strings to arrays — this is the Drupal/Twig integration path.\n // Lit does not JSON-parse array attributes automatically, so we do it here.\n // Note: Lit's defaultConverter returns null (not a string) when JSON.parse fails for\n // type: Array — so we guard against both string and any non-array value.\n if (changed.has('columns')) {\n const rawColumns: unknown = this.columns;\n if (typeof rawColumns === 'string') {\n try {\n this.columns = JSON.parse(rawColumns) as HxDataTableColumn[];\n } catch {\n this.columns = [];\n }\n } else if (!Array.isArray(this.columns)) {\n this.columns = [];\n }\n }\n if (changed.has('rows')) {\n const rawRows: unknown = this.rows;\n if (typeof rawRows === 'string') {\n try {\n this.rows = JSON.parse(rawRows) as Record<string, unknown>[];\n } catch {\n this.rows = [];\n }\n } else if (!Array.isArray(this.rows)) {\n this.rows = [];\n }\n }\n // Only warn when rows actually changes to avoid noise on every property update.\n if (changed.has('rows') && this.rows.length > 500) {\n devWarn(\n 'hx-data-table',\n 'Rendering more than 500 rows may impact performance. Consider server-side pagination.',\n );\n }\n // WCAG 4.1.2: data tables must have an accessible name so screen readers can identify them.\n if (\n (changed.has('label') || changed.has('columns')) &&\n this.columns.length > 0 &&\n !this.label\n ) {\n devWarn(\n 'hx-data-table',\n 'No accessible name provided. Set the `label` attribute so screen readers can identify this table (WCAG 4.1.2).',\n );\n }\n }\n\n // ─── Event Handlers ───\n\n /** @internal */\n private _handleSort(key: string): void {\n const direction =\n this.sortKey === key ? (this.sortDirection === 'asc' ? 'desc' : 'asc') : 'asc';\n this.sortKey = key;\n this.sortDirection = direction;\n this.dispatchEvent(\n new CustomEvent<HxDataTableSortState>('hx-sort', {\n bubbles: true,\n composed: true,\n detail: { key, direction },\n }),\n );\n }\n\n /** @internal */\n private _handleRowClick(row: Record<string, unknown>, index: number): void {\n this.dispatchEvent(\n new CustomEvent<{ row: Record<string, unknown>; index: number }>('hx-row-click', {\n bubbles: true,\n composed: true,\n detail: { row, index },\n }),\n );\n }\n\n /** @internal */\n private _handleSelect(index: number, checked: boolean): void {\n const next = new Set(this._selectedRows);\n if (checked) {\n next.add(index);\n } else {\n next.delete(index);\n }\n this._selectedRows = next;\n this._dispatchSelect();\n }\n\n /** @internal */\n private _handleSelectAll(checked: boolean): void {\n this._selectedRows = checked ? new Set(this.rows.map((_, i) => i)) : new Set<number>();\n this._dispatchSelect();\n }\n\n /** @internal */\n private _dispatchSelect(): void {\n this.dispatchEvent(\n new CustomEvent<{ selectedRows: Record<string, unknown>[] }>('hx-select', {\n bubbles: true,\n composed: true,\n detail: {\n selectedRows: [...this._selectedRows].flatMap((i) => {\n const row = this.rows[i];\n return row !== undefined ? [row] : [];\n }),\n },\n }),\n );\n }\n\n // ─── Keyboard Navigation ───\n\n /** @internal */\n private _handleKeydown(e: KeyboardEvent): void {\n if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', ' '].includes(e.key))\n return;\n\n const root = this.shadowRoot;\n if (!root) return;\n\n const cells = Array.from(root.querySelectorAll<HTMLElement>('[part~=\"td\"],[part~=\"th\"]'));\n\n // When focus is inside a child element (e.g., the sort <button> inside a <th>),\n // shadowRoot.activeElement returns the child, not the cell. Walk up to find the cell.\n let focused = root.activeElement as HTMLElement | null;\n if (!focused) return;\n\n if (cells.indexOf(focused) === -1) {\n let ancestor = focused.parentElement;\n while (ancestor) {\n if (cells.includes(ancestor as HTMLElement)) {\n focused = ancestor as HTMLElement;\n break;\n }\n ancestor = ancestor.parentElement;\n }\n }\n\n const colCount = this.columns.length + (this.selectable ? 1 : 0);\n const idx = cells.indexOf(focused);\n if (idx === -1) return;\n\n let target: HTMLElement | null = null;\n\n if (e.key === 'ArrowRight' && idx + 1 < cells.length) {\n target = cells[idx + 1] ?? null;\n } else if (e.key === 'ArrowLeft' && idx - 1 >= 0) {\n target = cells[idx - 1] ?? null;\n } else if (e.key === 'ArrowDown' && idx + colCount < cells.length) {\n target = cells[idx + colCount] ?? null;\n } else if (e.key === 'ArrowUp' && idx - colCount >= 0) {\n target = cells[idx - colCount] ?? null;\n } else if (e.key === 'Home') {\n // First cell of the current row\n const rowStart = idx - (idx % colCount);\n target = cells[rowStart] ?? null;\n } else if (e.key === 'End') {\n // Last cell of the current row\n const rowEnd = Math.min(idx - (idx % colCount) + colCount - 1, cells.length - 1);\n target = cells[rowEnd] ?? null;\n } else if (e.key === ' ' && focused.getAttribute('part')?.includes('td')) {\n // Toggle selection on Space in a data row\n const rowIdx = Number(focused.dataset['rowIndex']);\n if (this.selectable && !isNaN(rowIdx)) {\n e.preventDefault();\n this._handleSelect(rowIdx, !this._selectedRows.has(rowIdx));\n }\n return;\n }\n\n if (target) {\n e.preventDefault();\n target.setAttribute('tabindex', '0');\n target.focus();\n focused.setAttribute('tabindex', '-1');\n }\n }\n\n // ─── Render Helpers ───\n\n /** @internal */\n private _renderSortIcon(key: string) {\n const isActive = this.sortKey === key;\n const iconClass = [\n 'sort-icon',\n isActive ? 'sort-icon--active' : '',\n isActive && this.sortDirection === 'desc' ? 'sort-icon--desc' : '',\n ]\n .filter(Boolean)\n .join(' ');\n\n return html`\n <span part=\"sort-icon\" class=${iconClass} aria-hidden=\"true\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n width=\"16\"\n height=\"16\"\n >\n <path d=\"M8 3L5 7h6L8 3zM8 13l3-4H5l3 4z\" fill-rule=\"evenodd\" />\n </svg>\n </span>\n `;\n }\n\n /** @internal */\n private _renderHeaderRow() {\n return html`\n <tr part=\"tr\">\n ${this.selectable\n ? html`\n <th part=\"th\" class=\"col-checkbox\" tabindex=\"0\">\n <input\n type=\"checkbox\"\n part=\"checkbox\"\n aria-label=${this.labelSelectAll}\n .indeterminate=${this._selectedRows.size > 0 &&\n this._selectedRows.size < this.rows.length}\n .checked=${this._selectedRows.size === this.rows.length && this.rows.length > 0}\n @change=${(e: Event) =>\n this._handleSelectAll((e.target as HTMLInputElement).checked)}\n />\n </th>\n `\n : nothing}\n ${this.columns.map(\n (col) => html`\n <th\n part=\"th\"\n tabindex=\"0\"\n style=${col.width ? `width: ${col.width}` : ''}\n aria-sort=${col.sortable\n ? this.sortKey === col.key\n ? this.sortDirection === 'asc'\n ? 'ascending'\n : 'descending'\n : 'none'\n : nothing}\n >\n ${col.sortable\n ? html`\n <button\n class=\"sort-btn\"\n @click=${() => this._handleSort(col.key)}\n aria-label=${this.labelSortBy(\n col.label,\n this.sortKey === col.key ? this.sortDirection : null,\n )}\n >\n ${col.label} ${this._renderSortIcon(col.key)}\n </button>\n `\n : col.label}\n </th>\n `,\n )}\n </tr>\n `;\n }\n\n /** @internal */\n private _renderSkeletonRows() {\n return Array.from(\n { length: 3 },\n (_) => html`\n <tr part=\"tr\" aria-hidden=\"true\">\n ${this.selectable\n ? html`<td part=\"td\" class=\"col-checkbox\">\n <span class=\"skeleton-cell\" style=\"width:1rem;margin:auto\"></span>\n </td>`\n : nothing}\n ${this.columns.map(\n () => html`\n <td part=\"td\">\n <span class=\"skeleton-cell\"></span>\n </td>\n `,\n )}\n </tr>\n `,\n );\n }\n\n /** @internal */\n private _renderEmptyRow() {\n const colSpan = this.columns.length + (this.selectable ? 1 : 0);\n return html`\n <tr part=\"tr\">\n <td part=\"td\" colspan=${colSpan} class=\"empty-cell\">\n <slot name=\"empty\">${this.emptyLabel}</slot>\n </td>\n </tr>\n `;\n }\n\n /** @internal */\n private _renderDataRows() {\n let displayRows = this.rows;\n\n // Client-side pagination when pageSize > 0\n if (this.pageSize > 0) {\n const start = (this.page - 1) * this.pageSize;\n displayRows = this.rows.slice(start, start + this.pageSize);\n }\n\n return repeat(\n displayRows,\n (_row, pageIndex) => {\n const globalIndex =\n this.pageSize > 0 ? (this.page - 1) * this.pageSize + pageIndex : pageIndex;\n return globalIndex;\n },\n (row, pageIndex) => {\n // The global row index for selection and events\n const globalIndex =\n this.pageSize > 0 ? (this.page - 1) * this.pageSize + pageIndex : pageIndex;\n return html`\n <tr\n part=\"tr\"\n aria-selected=${this.selectable ? String(this._selectedRows.has(globalIndex)) : nothing}\n @click=${() => this._handleRowClick(row, globalIndex)}\n >\n ${this.selectable\n ? html`\n <td part=\"td\" class=\"col-checkbox\" tabindex=\"-1\" data-row-index=${globalIndex}>\n <input\n type=\"checkbox\"\n part=\"checkbox\"\n aria-label=${this.labelSelectRow(globalIndex + 1)}\n .checked=${this._selectedRows.has(globalIndex)}\n @click=${(e: Event) => e.stopPropagation()}\n @change=${(e: Event) =>\n this._handleSelect(globalIndex, (e.target as HTMLInputElement).checked)}\n />\n </td>\n `\n : nothing}\n ${this.columns.map(\n (col) => html`\n <td part=\"td\" tabindex=\"-1\" data-row-index=${globalIndex}>\n ${row[col.key] != null ? String(row[col.key]) : ''}\n </td>\n `,\n )}\n </tr>\n `;\n },\n );\n }\n\n // ─── Render ───\n\n override render() {\n return html`\n <slot name=\"toolbar\"></slot>\n <div class=\"table-wrapper\">\n <table\n part=\"table\"\n role=\"grid\"\n aria-label=${this.label.trim() || 'Table'}\n aria-busy=${this.loading ? 'true' : nothing}\n @keydown=${this._handleKeydown}\n >\n <thead part=\"thead\">\n ${this._renderHeaderRow()}\n </thead>\n <tbody part=\"tbody\">\n ${this.loading\n ? html`<slot name=\"loading\">${this._renderSkeletonRows()}</slot>`\n : this.rows.length === 0\n ? this._renderEmptyRow()\n : this._renderDataRows()}\n </tbody>\n </table>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-data-table': HelixDataTable;\n }\n}\n"],"names":["helixDataTableStyles","css","HelixDataTable","LitElement","col","dir","index","changed","rawColumns","rawRows","key","direction","row","checked","next","_","i","e","root","cells","focused","ancestor","colCount","idx","target","rowStart","rowEnd","_a","rowIdx","isActive","iconClass","html","nothing","colSpan","displayRows","start","repeat","_row","pageIndex","globalIndex","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-date-picker-C8d2HtRV.js","sources":["../../src/components/hx-date-picker/hx-date-picker.styles.ts","../../src/components/hx-date-picker/hx-date-picker.ts"],"sourcesContent":["import { css } from 'lit';\n\n// prettier-ignore\nexport const helixDatePickerStyles = css`:host{display:block;position:relative}:host([disabled]){opacity:var(--hx-opacity-disabled, .5);pointer-events:none}*{box-sizing:border-box}.field{display:flex;flex-direction:column;gap:var(--hx-space-1, .25rem);font-family:var(--hx-date-picker-font-family, var(--hx-font-family-sans, sans-serif));position:relative}.field__label-wrapper{display:contents}.field__label{display:flex;align-items:baseline;gap:var(--hx-space-1, .25rem);font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-medium, 500);color:var(--hx-date-picker-label-color, var(--hx-color-neutral-700, #343a40));line-height:var(--hx-line-height-normal, 1.5)}.field__required-marker{color:var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c));font-weight:var(--hx-font-weight-bold, 700)}.field__input-wrapper{display:flex;align-items:stretch;border:var(--hx-border-width-thin, 1px) solid var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #ced4da));border-radius:var(--hx-date-picker-border-radius, var(--hx-border-radius-md, .375rem));background-color:var(--hx-date-picker-bg, var(--hx-color-neutral-0, #ffffff));transition:border-color var(--hx-transition-fast, .15s ease),box-shadow var(--hx-transition-fast, .15s ease);overflow:hidden}.field__input-wrapper:focus-within{border-color:var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #2563eb));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #2563eb)) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}.field--error .field__input-wrapper{border-color:var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc3545))}.field--error .field__input-wrapper:focus-within{border-color:var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc3545));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc3545)) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}.field__input{flex:1;border:none;outline:none;background:transparent;padding:var(--hx-space-2, .5rem) var(--hx-space-3, .75rem);font-family:inherit;font-size:var(--hx-font-size-md, 1rem);color:var(--hx-date-picker-color, var(--hx-color-neutral-800, #212529));line-height:var(--hx-line-height-normal, 1.5);min-height:var(--hx-size-10, 2.5rem);width:100%;cursor:default}.field__input::placeholder{color:var(--hx-color-neutral-400, #adb5bd)}.field__input:disabled{cursor:not-allowed}.field__trigger{display:flex;align-items:center;justify-content:center;padding:0 var(--hx-space-3, .75rem);border:none;border-left:var(--hx-border-width-thin, 1px) solid var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #ced4da));background:transparent;color:var(--hx-date-picker-trigger-color, var(--hx-color-neutral-500, #6c757d));cursor:pointer;flex-shrink:0;transition:color var(--hx-transition-fast, .15s ease);outline:none}.field__trigger:focus-visible{color:var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #2563eb));background-color:color-mix(in srgb,var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #2563eb)) 8%,transparent)}.field__trigger:hover:not(:disabled){color:var(--hx-date-picker-trigger-hover-color, var(--hx-color-neutral-700, #343a40));background-color:color-mix(in srgb,var(--hx-color-neutral-900, #212529) 4%,transparent)}.field__trigger:disabled{cursor:not-allowed}.calendar{position:absolute;top:calc(100% + var(--hx-space-1, .25rem));left:0;z-index:var(--hx-z-index-dropdown, 1000);min-width:var(--hx-date-picker-calendar-min-width, 18rem);background-color:var(--hx-date-picker-calendar-bg, var(--hx-color-neutral-0, #ffffff));border:var(--hx-border-width-thin, 1px) solid var(--hx-date-picker-calendar-border-color, var(--hx-color-neutral-200, #e9ecef));border-radius:var(--hx-date-picker-calendar-border-radius, var(--hx-border-radius-lg, .5rem));box-shadow:var( --hx-date-picker-calendar-shadow, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1) );padding:var(--hx-space-3, .75rem);outline:none}@media(prefers-reduced-motion:no-preference){.calendar{animation:calendar-appear var(--hx-transition-fast, .15s ease) forwards}}@keyframes calendar-appear{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}.calendar__nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--hx-space-3, .75rem)}:is(.calendar__nav-btn,.calendar__day,.calendar__day-cell,.calendar__weekday){display:flex;align-items:center;justify-content:center}:is(.calendar__nav-btn,.calendar__day){width:var(--hx-touch-target-min, 2.75rem);height:var(--hx-touch-target-min, 2.75rem);border:none;border-radius:var(--hx-border-radius-sm, .25rem);background:transparent;cursor:pointer;outline:none;transition:background-color var(--hx-transition-fast, .15s ease),color var(--hx-transition-fast, .15s ease)}.calendar__nav-btn{color:var(--hx-color-neutral-600, #495057);font-size:var(--hx-font-size-lg, 1.125rem);line-height:1}.calendar__nav-btn:hover{background-color:var(--hx-color-neutral-100, #f8f9fa);color:var(--hx-color-neutral-900, #212529)}:is(.calendar__nav-btn,.calendar__day):focus-visible{box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, #2563eb));z-index:1}.calendar__nav-btn:disabled{opacity:var(--hx-opacity-disabled, .4);cursor:not-allowed;pointer-events:none}.calendar__month-label{font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-semibold, 600);color:var(--hx-color-neutral-800, #212529);flex:1;text-align:center}.calendar__grid{display:flex;flex-direction:column;gap:var(--hx-space-1, .25rem)}.calendar__row{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--hx-space-1, .25rem)}.calendar__weekday{height:var(--hx-size-8, 2rem);font-size:var(--hx-font-size-xs, .75rem);font-weight:var(--hx-font-weight-semibold, 600);color:var(--hx-color-neutral-500, #6c757d);text-transform:uppercase;letter-spacing:.05em}.calendar__day{color:var(--hx-color-neutral-800, #212529);font-size:var(--hx-font-size-sm, .875rem);font-family:inherit;position:relative}.calendar__day:hover:not(.calendar__day--disabled):not(.calendar__day--selected){background-color:var(--hx-color-neutral-100, #f8f9fa);color:var(--hx-color-neutral-900, #212529)}.calendar__day--selected{background-color:var(--hx-date-picker-selected-bg, var(--hx-color-primary-500, #2563eb));color:var(--hx-date-picker-selected-color, var(--hx-color-neutral-0, #ffffff));font-weight:var(--hx-font-weight-semibold, 600)}.calendar__day--selected:hover{background-color:var(--hx-date-picker-selected-hover-bg, var(--hx-color-primary-600, #1d4ed8))}.calendar__day--today:not(.calendar__day--selected){font-weight:var(--hx-font-weight-bold, 700);color:var(--hx-date-picker-today-color, var(--hx-color-primary-600, #1d4ed8))}.calendar__day--today:not(.calendar__day--selected):after{content:\"\";position:absolute;bottom:.2rem;left:50%;transform:translate(-50%);width:.25rem;height:.25rem;border-radius:50%;background-color:currentColor}.calendar__day--disabled{opacity:var(--hx-opacity-disabled, .4);cursor:not-allowed;pointer-events:none}.calendar__live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.field__help-text,.field__error{font-size:var(--hx-font-size-xs, .75rem);line-height:var(--hx-line-height-normal, 1.5)}.field__help-text{color:var(--hx-color-neutral-500, #6c757d)}.field__error{color:var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c))}@media(prefers-reduced-motion:reduce){.field__input-wrapper,.field__trigger,.calendar__nav-btn,.calendar__day{transition:none}}@media(forced-colors:active){.field__input-wrapper{border:1px solid ButtonText}.field__input-wrapper:focus-within{outline:2px solid Highlight;outline-offset:1px;box-shadow:none}:is(.calendar__day:focus-visible,.calendar__nav-btn:focus-visible){outline:2px solid Highlight;box-shadow:none}.calendar__day--selected{background-color:Highlight;color:HighlightText;border:1px solid Highlight}.calendar__day--today:not(.calendar__day--selected){border:2px solid LinkText}.calendar__day--today:not(.calendar__day--selected):after{display:none}.calendar__day--disabled{color:GrayText}.field--error .field__input-wrapper{border-color:LinkText}}`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixDatePickerStyles } from './hx-date-picker.styles.js';\n\nlet _instanceCounter = 0;\n\n/**\n * Date picker component for selecting dates with keyboard-accessible calendar popup.\n *\n * @summary Form-associated date picker with calendar popup and WCAG 2.1 AA accessibility.\n *\n * @tag hx-date-picker\n *\n * @slot label - Custom label content (overrides the label property).\n * @slot help-text - Custom help text content (overrides the helpText property).\n * @slot error - Custom error content (overrides the error property).\n *\n * @fires {CustomEvent<{value: string, date: Date | null}>} hx-change - Emitted when the selected date changes.\n *\n * @csspart field - The outer field container.\n * @csspart label - The label element.\n * @csspart input-wrapper - The wrapper around input and trigger.\n * @csspart input - The readonly text input displaying the formatted date.\n * @csspart trigger - The calendar icon button.\n * @csspart calendar - The calendar popup dialog.\n * @csspart month-nav - The month navigation header.\n * @csspart day - An individual day button in the calendar grid.\n * @csspart help-text - The help text container.\n * @csspart error - The error message container.\n *\n * @cssprop [--hx-date-picker-bg=var(--hx-color-neutral-0)] - Input background color.\n * @cssprop [--hx-date-picker-color=var(--hx-color-neutral-800)] - Input text color.\n * @cssprop [--hx-date-picker-border-color=var(--hx-color-neutral-300)] - Border color.\n * @cssprop [--hx-date-picker-border-radius=var(--hx-border-radius-md)] - Border radius.\n * @cssprop [--hx-date-picker-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-date-picker-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-date-picker-error-color=var(--hx-color-error-500)] - Error state color.\n * @cssprop [--hx-date-picker-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-date-picker-trigger-color=var(--hx-color-neutral-500)] - Trigger icon color.\n * @cssprop [--hx-date-picker-calendar-bg=var(--hx-color-neutral-0)] - Calendar background color.\n * @cssprop [--hx-date-picker-calendar-border-color=var(--hx-color-neutral-200)] - Calendar border color.\n * @cssprop [--hx-date-picker-calendar-min-width=18rem] - Calendar minimum width.\n * @cssprop [--hx-date-picker-selected-bg=var(--hx-color-primary-500)] - Selected day background.\n * @cssprop [--hx-date-picker-selected-color=var(--hx-color-neutral-0)] - Selected day text color.\n * @cssprop [--hx-date-picker-today-color=var(--hx-color-primary-600)] - Today indicator color.\n * @cssprop [--hx-date-picker-calendar-shadow=0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1)] - Calendar popup box shadow.\n */\n@customElement('hx-date-picker')\nexport class HelixDatePicker extends LitElement {\n static override styles = [tokenStyles, helixDatePickerStyles];\n\n // ─── Form Association ───\n\n /**\n * Marks this component as form-associated for native form participation.\n * @internal\n */\n static formAssociated = true;\n\n /**\n * ElementInternals instance for form association.\n * @internal\n */\n private _internals: ElementInternals;\n\n constructor() {\n super();\n /** @internal */\n this._internals = this.attachInternals();\n }\n\n // ─── Properties ───\n\n /**\n * The name of the field, used for form submission.\n * @attr name\n */\n @property({ type: String })\n name = '';\n\n /**\n * The current value as an ISO 8601 date string (e.g. 2026-03-04).\n * @attr value\n */\n @property({ type: String })\n value = '';\n\n /**\n * The minimum selectable date as an ISO 8601 string.\n * @attr min\n */\n @property({ type: String })\n min = '';\n\n /**\n * The maximum selectable date as an ISO 8601 string.\n * @attr max\n */\n @property({ type: String })\n max = '';\n\n /**\n * The visible label text.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n /**\n * Whether the field is required for form submission.\n * @attr required\n */\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /**\n * Whether the field is disabled.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Error message to display. When set, the field enters an error state.\n * @attr error\n */\n @property({ type: String })\n error = '';\n\n /**\n * Help text displayed below the field for guidance.\n * @attr help-text\n */\n @property({ type: String, attribute: 'help-text' })\n helpText = '';\n\n /**\n * Display format hint shown as placeholder (e.g. MM/DD/YYYY).\n * @attr format\n */\n @property({ type: String })\n format = 'MM/DD/YYYY';\n\n /**\n * Locale string used for formatting the display value.\n * @attr locale\n */\n @property({ type: String })\n locale = 'en-US';\n\n /** Accessible label for the calendar grid/dialog. */\n @property({ type: String, attribute: 'label-choose-date' })\n labelChooseDate = 'Choose a date';\n\n /** Accessible label for the \"previous month\" button. */\n @property({ type: String, attribute: 'label-prev-month' })\n labelPrevMonth = 'Previous month';\n\n /** Accessible label for the \"next month\" button. */\n @property({ type: String, attribute: 'label-next-month' })\n labelNextMonth = 'Next month';\n\n /** Accessible label for the calendar trigger button when calendar is closed. */\n @property({ type: String, attribute: 'label-open-calendar' })\n labelOpenCalendar = 'Open calendar';\n\n /** Accessible label for the calendar trigger button when calendar is open. */\n @property({ type: String, attribute: 'label-close-calendar' })\n labelCloseCalendar = 'Close calendar';\n\n // ─── Internal State ───\n\n /**\n * Tracks whether the calendar popup is currently visible.\n * @internal\n */\n @state() private _isOpen = false;\n /**\n * The year currently displayed in the calendar view.\n * @internal\n */\n @state() private _viewYear: number = new Date().getFullYear();\n /**\n * The month (0-indexed) currently displayed in the calendar view.\n * @internal\n */\n @state() private _viewMonth: number = new Date().getMonth();\n /**\n * The day number currently focused within the calendar grid, or null when the calendar is closed.\n * @internal\n */\n @state() private _focusedDay: number | null = null;\n /**\n * The message announced to screen readers when the calendar month changes.\n * @internal\n */\n @state() private _liveMessage = '';\n\n // ─── Internal References ───\n\n /**\n * Reference to the readonly text input element displaying the formatted date.\n * @internal\n */\n @query('.field__input')\n private _input: HTMLInputElement | undefined;\n\n /**\n * Reference to the calendar icon button that opens and closes the popup.\n * @internal\n */\n @query('.field__trigger')\n private _trigger: HTMLButtonElement | undefined;\n\n /**\n * Reference to the calendar popup dialog element.\n * @internal\n */\n @query('.calendar')\n private _calendar: HTMLElement | undefined;\n\n // ─── Unique IDs ───\n\n /**\n * Unique base ID for this component instance, used to generate all child element IDs.\n * @internal\n */\n private _id = `hx-date-picker-${++_instanceCounter}`;\n /**\n * Unique ID for the text input element, used for label association.\n * @internal\n */\n private _inputId = `${this._id}-input`;\n /**\n * Unique ID for the help text element, used for aria-describedby association.\n * @internal\n */\n private _helpTextId = `${this._id}-help`;\n /**\n * Unique ID for the error message element, used for aria-describedby association.\n * @internal\n */\n private _errorId = `${this._id}-error`;\n /**\n * Unique ID for the calendar popup dialog element, used for aria-controls association.\n * @internal\n */\n private _calendarId = `${this._id}-calendar`;\n /**\n * Unique ID for the ARIA live region element that announces month navigation changes.\n * @internal\n */\n private _liveRegionId = `${this._id}-live`;\n\n // ─── Slot Tracking ───\n\n /**\n * Whether the label slot has any assigned elements, used to switch between slotted and property-based label rendering.\n * @internal\n */\n private _hasLabelSlot = false;\n /**\n * Whether the error slot has any assigned elements, used to switch between slotted and property-based error rendering.\n * @internal\n */\n private _hasErrorSlot = false;\n\n /** @internal */\n private _handleLabelSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasLabelSlot = slot.assignedElements().length > 0;\n if (this._hasLabelSlot) {\n const slottedLabel = slot.assignedElements()[0];\n if (slottedLabel && !slottedLabel.id) {\n slottedLabel.id = `${this._inputId}-slotted-label`;\n }\n }\n this.requestUpdate();\n }\n\n /** @internal */\n private _handleErrorSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasErrorSlot = slot.assignedElements().length > 0;\n this.requestUpdate();\n }\n\n // ─── Bound Handler References ───\n\n /**\n * Bound reference to the outside-click handler, stored so the same function reference can be removed from document listeners.\n * @internal\n */\n private _boundHandleOutsideClick: (e: MouseEvent) => void = () => undefined;\n /**\n * Bound reference to the document keydown handler, stored so the same function reference can be removed from document listeners.\n * @internal\n */\n private _boundHandleDocumentKeydown: (e: KeyboardEvent) => void = () => undefined;\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n this._boundHandleOutsideClick = this._handleOutsideClick.bind(this);\n this._boundHandleDocumentKeydown = this._handleDocumentKeydown.bind(this);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n document.removeEventListener('click', this._boundHandleOutsideClick);\n document.removeEventListener('keydown', this._boundHandleDocumentKeydown);\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n\n if (changedProperties.has('value')) {\n this._internals.setFormValue(this.value);\n this._updateValidity();\n }\n\n if ((changedProperties as Map<PropertyKey, unknown>).has('_isOpen')) {\n if (this._isOpen) {\n // Sync view to the currently selected date when opening.\n const selected = this._parseISODate(this.value);\n if (selected) {\n this._viewYear = selected.getFullYear();\n this._viewMonth = selected.getMonth();\n }\n document.addEventListener('click', this._boundHandleOutsideClick);\n document.addEventListener('keydown', this._boundHandleDocumentKeydown);\n // Focus the calendar after it renders.\n this.updateComplete.then(() => {\n this._focusActiveDay();\n });\n } else {\n document.removeEventListener('click', this._boundHandleOutsideClick);\n document.removeEventListener('keydown', this._boundHandleDocumentKeydown);\n this._focusedDay = null;\n }\n }\n\n if (\n (changedProperties as Map<PropertyKey, unknown>).has('_viewMonth') ||\n (changedProperties as Map<PropertyKey, unknown>).has('_viewYear')\n ) {\n if (this._isOpen) {\n const monthName = this._getMonthName(this._viewMonth);\n this._liveMessage = `${monthName} ${this._viewYear}`;\n this.updateComplete.then(() => {\n this._focusActiveDay();\n });\n }\n }\n }\n\n /** @internal */\n private _handleOutsideClick(e: MouseEvent): void {\n const path = e.composedPath();\n if (!path.includes(this)) {\n this._closeCalendar();\n }\n }\n\n /** @internal */\n private _handleDocumentKeydown(e: KeyboardEvent): void {\n if (e.key === 'Escape' && this._isOpen) {\n this._closeCalendar();\n }\n }\n\n // ─── Form Integration ───\n\n /** The form element associated with this component, or null if not in a form. */\n get form(): HTMLFormElement | null {\n return this._internals.form;\n }\n\n /** The current validation message, or an empty string if the field is valid. */\n get validationMessage(): string {\n return this._internals.validationMessage;\n }\n\n /** The current validity state of the field. */\n get validity(): ValidityState {\n return this._internals.validity;\n }\n\n checkValidity(): boolean {\n return this._internals.checkValidity();\n }\n\n reportValidity(): boolean {\n return this._internals.reportValidity();\n }\n\n /** @internal */\n private _updateValidity(): void {\n if (this.required && !this.value) {\n this._internals.setValidity(\n { valueMissing: true },\n this.error || 'This field is required.',\n this._input,\n );\n } else {\n this._internals.setValidity({});\n }\n }\n\n formResetCallback(): void {\n this.value = '';\n this._internals.setFormValue(null);\n this._isOpen = false;\n }\n\n formStateRestoreCallback(\n state: string | File | FormData | null,\n _mode: 'restore' | 'autocomplete',\n ): void {\n if (typeof state === 'string') {\n this.value = state;\n }\n }\n\n /** Called when a parent fieldset is disabled/enabled. */\n formDisabledCallback(disabled: boolean): void {\n this.disabled = disabled;\n }\n\n // ─── Public Methods ───\n\n override focus(options?: FocusOptions): void {\n this._trigger?.focus(options);\n }\n\n // ─── Date Utilities ───\n\n /** @internal */\n private _parseISODate(iso: string): Date | null {\n if (!iso) return null;\n const d = new Date(iso + 'T00:00:00');\n return isNaN(d.getTime()) ? null : d;\n }\n\n /** @internal */\n private _toISO(date: Date): string {\n const y = date.getFullYear();\n const m = String(date.getMonth() + 1).padStart(2, '0');\n const d = String(date.getDate()).padStart(2, '0');\n return `${y}-${m}-${d}`;\n }\n\n /** @internal */\n private _formatForDisplay(iso: string): string {\n const date = this._parseISODate(iso);\n if (!date) return '';\n return date.toLocaleDateString(this.locale, {\n year: 'numeric',\n month: '2-digit',\n day: '2-digit',\n });\n }\n\n /** @internal */\n private _isDateDisabled(date: Date): boolean {\n const iso = this._toISO(date);\n if (this.min && iso < this.min) return true;\n if (this.max && iso > this.max) return true;\n return false;\n }\n\n /** @internal */\n private _isSameDay(a: Date, b: Date): boolean {\n return (\n a.getFullYear() === b.getFullYear() &&\n a.getMonth() === b.getMonth() &&\n a.getDate() === b.getDate()\n );\n }\n\n /** @internal */\n private _isToday(date: Date): boolean {\n return this._isSameDay(date, new Date());\n }\n\n /** @internal */\n private _getMonthName(month: number): string {\n return new Date(2000, month, 1).toLocaleDateString(this.locale, { month: 'long' });\n }\n\n /** @internal */\n private _getDayName(dayIndex: number): string {\n // dayIndex: 0=Sun, 1=Mon, ...\n return new Date(2000, 0, 2 + dayIndex).toLocaleDateString(this.locale, {\n weekday: 'short',\n });\n }\n\n // ─── Calendar Grid ───\n\n /**\n * Returns an array of Date objects (or null for padding cells) representing\n * the 6-week grid for the current view month.\n */\n /** @internal */\n private _getDaysInGrid(): (Date | null)[] {\n const firstOfMonth = new Date(this._viewYear, this._viewMonth, 1);\n const leadingBlanks = firstOfMonth.getDay(); // 0=Sun\n const daysInMonth = new Date(this._viewYear, this._viewMonth + 1, 0).getDate();\n\n const cells: (Date | null)[] = [];\n\n // Leading blank cells for days before the 1st\n for (let i = 0; i < leadingBlanks; i++) {\n cells.push(null);\n }\n\n // Days of current month\n for (let d = 1; d <= daysInMonth; d++) {\n cells.push(new Date(this._viewYear, this._viewMonth, d));\n }\n\n // Trailing blank cells to complete a full 7-column row\n const remainder = cells.length % 7;\n if (remainder !== 0) {\n for (let i = 0; i < 7 - remainder; i++) {\n cells.push(null);\n }\n }\n\n return cells;\n }\n\n // ─── Calendar Open/Close ───\n\n /** @internal */\n private _openCalendar(): void {\n if (this.disabled) return;\n this._isOpen = true;\n }\n\n /** @internal */\n private _closeCalendar(): void {\n this._isOpen = false;\n // Return focus to trigger after calendar closes.\n this.updateComplete.then(() => {\n this._trigger?.focus();\n });\n }\n\n /** @internal */\n private _toggleCalendar(): void {\n if (this._isOpen) {\n this._closeCalendar();\n } else {\n this._openCalendar();\n }\n }\n\n // ─── Focus Management ───\n\n /** @internal */\n private _focusActiveDay(): void {\n if (!this._calendar) return;\n\n const selectedISO = this.value;\n const selected = this._parseISODate(selectedISO);\n\n // Try to focus: selected day > today (if in view) > first enabled day\n let targetDay: number | null = null;\n\n if (\n selected &&\n selected.getFullYear() === this._viewYear &&\n selected.getMonth() === this._viewMonth\n ) {\n targetDay = selected.getDate();\n } else {\n const today = new Date();\n if (today.getFullYear() === this._viewYear && today.getMonth() === this._viewMonth) {\n const todayDate = new Date(this._viewYear, this._viewMonth, today.getDate());\n if (!this._isDateDisabled(todayDate)) {\n targetDay = today.getDate();\n }\n }\n }\n\n if (targetDay === null) {\n // Find first enabled day in the month\n const daysInMonth = new Date(this._viewYear, this._viewMonth + 1, 0).getDate();\n for (let d = 1; d <= daysInMonth; d++) {\n const date = new Date(this._viewYear, this._viewMonth, d);\n if (!this._isDateDisabled(date)) {\n targetDay = d;\n break;\n }\n }\n }\n\n if (targetDay !== null) {\n this._focusedDay = targetDay;\n this.updateComplete.then(() => {\n const btn = this._calendar?.querySelector<HTMLButtonElement>(`[data-day=\"${targetDay}\"]`);\n btn?.focus();\n });\n }\n }\n\n // ─── Month Navigation ───\n\n /** @internal */\n private _prevMonth(): void {\n if (this._viewMonth === 0) {\n this._viewMonth = 11;\n this._viewYear = this._viewYear - 1;\n } else {\n this._viewMonth = this._viewMonth - 1;\n }\n }\n\n /** @internal */\n private _nextMonth(): void {\n if (this._viewMonth === 11) {\n this._viewMonth = 0;\n this._viewYear = this._viewYear + 1;\n } else {\n this._viewMonth = this._viewMonth + 1;\n }\n }\n\n // ─── Day Selection ───\n\n /** @internal */\n private _selectDay(date: Date): void {\n if (this._isDateDisabled(date)) return;\n\n const iso = this._toISO(date);\n this.value = iso;\n this._internals.setFormValue(iso);\n this._updateValidity();\n\n this.dispatchEvent(\n new CustomEvent<{ value: string; date: Date }>('hx-change', {\n bubbles: true,\n composed: true,\n detail: { value: iso, date },\n }),\n );\n\n this._closeCalendar();\n }\n\n // ─── Calendar Keyboard Navigation ───\n\n /** @internal */\n private _handleCalendarKeydown(e: KeyboardEvent): void {\n const { key } = e;\n\n if (key === 'Tab') {\n this._handleCalendarTab(e);\n return;\n }\n\n // Explicit Escape handler on the calendar container provides a reliable\n // exit path even when the document-level handler does not fire (e.g. when\n // the event is stopped by a descendant or the shadow boundary interferes).\n if (key === 'Escape') {\n e.stopPropagation();\n this._closeCalendar();\n return;\n }\n\n if (\n key !== 'ArrowLeft' &&\n key !== 'ArrowRight' &&\n key !== 'ArrowUp' &&\n key !== 'ArrowDown' &&\n key !== 'Enter' &&\n key !== ' ' &&\n key !== 'Home' &&\n key !== 'End' &&\n key !== 'PageUp' &&\n key !== 'PageDown'\n ) {\n return;\n }\n\n e.preventDefault();\n\n const currentFocused = this._focusedDay ?? 1;\n const daysInMonth = new Date(this._viewYear, this._viewMonth + 1, 0).getDate();\n\n if (key === 'Enter' || key === ' ') {\n const date = new Date(this._viewYear, this._viewMonth, currentFocused);\n if (!this._isDateDisabled(date)) {\n this._selectDay(date);\n }\n return;\n }\n\n if (key === 'PageUp') {\n this._prevMonth();\n return;\n }\n\n if (key === 'PageDown') {\n this._nextMonth();\n return;\n }\n\n if (key === 'Home') {\n // Move to start of current week (Sunday)\n const currentDate = new Date(this._viewYear, this._viewMonth, currentFocused);\n const dayOfWeek = currentDate.getDay();\n const newDay = currentFocused - dayOfWeek;\n if (newDay >= 1) {\n this._focusedDay = newDay;\n this.updateComplete.then(() => {\n this._calendar?.querySelector<HTMLButtonElement>(`[data-day=\"${newDay}\"]`)?.focus();\n });\n }\n return;\n }\n\n if (key === 'End') {\n // Move to end of current week (Saturday)\n const currentDate = new Date(this._viewYear, this._viewMonth, currentFocused);\n const dayOfWeek = currentDate.getDay();\n const daysToSaturday = 6 - dayOfWeek;\n const newDay = currentFocused + daysToSaturday;\n if (newDay <= daysInMonth) {\n this._focusedDay = newDay;\n this.updateComplete.then(() => {\n this._calendar?.querySelector<HTMLButtonElement>(`[data-day=\"${newDay}\"]`)?.focus();\n });\n }\n return;\n }\n\n let newDay = currentFocused;\n\n if (key === 'ArrowLeft') newDay = currentFocused - 1;\n if (key === 'ArrowRight') newDay = currentFocused + 1;\n if (key === 'ArrowUp') newDay = currentFocused - 7;\n if (key === 'ArrowDown') newDay = currentFocused + 7;\n\n if (newDay < 1) {\n // Wrap to previous month\n this._prevMonth();\n const prevDaysInMonth = new Date(this._viewYear, this._viewMonth + 1, 0).getDate();\n this._focusedDay = prevDaysInMonth + newDay;\n this.updateComplete.then(() => {\n const day = this._focusedDay;\n this._calendar?.querySelector<HTMLButtonElement>(`[data-day=\"${day}\"]`)?.focus();\n });\n return;\n }\n\n if (newDay > daysInMonth) {\n // Wrap to next month\n const overflow = newDay - daysInMonth;\n this._nextMonth();\n this._focusedDay = overflow;\n this.updateComplete.then(() => {\n const day = this._focusedDay;\n this._calendar?.querySelector<HTMLButtonElement>(`[data-day=\"${day}\"]`)?.focus();\n });\n return;\n }\n\n this._focusedDay = newDay;\n this.updateComplete.then(() => {\n this._calendar?.querySelector<HTMLButtonElement>(`[data-day=\"${newDay}\"]`)?.focus();\n });\n }\n\n // ─── Navigation Boundary Checks ───\n\n /** @internal */\n private _isPrevMonthDisabled(): boolean {\n if (!this.min) return false;\n const firstOfCurrentView = new Date(this._viewYear, this._viewMonth, 1);\n const minDate = this._parseISODate(this.min);\n if (!minDate) return false;\n return firstOfCurrentView <= minDate;\n }\n\n /** @internal */\n private _isNextMonthDisabled(): boolean {\n if (!this.max) return false;\n const lastOfCurrentView = new Date(this._viewYear, this._viewMonth + 1, 0);\n const maxDate = this._parseISODate(this.max);\n if (!maxDate) return false;\n return lastOfCurrentView >= maxDate;\n }\n\n // ─── Focus Trap ───\n\n /** @internal */\n private _handleCalendarTab(e: KeyboardEvent): void {\n if (e.key !== 'Tab' || !this._isOpen) return;\n\n const focusableEls = this._calendar?.querySelectorAll<HTMLElement>(\n 'button:not([disabled]), [tabindex=\"0\"]',\n );\n if (!focusableEls || focusableEls.length === 0) return;\n\n const first = focusableEls[0];\n const last = focusableEls[focusableEls.length - 1];\n\n // In shadow DOM, document.activeElement returns the host element, not the\n // focused inner element. Use shadowRoot.activeElement exclusively so the\n // comparison is accurate and the trap cannot malfunction and strand users.\n const shadowActive = this.shadowRoot?.activeElement;\n\n if (e.shiftKey) {\n if (shadowActive === first) {\n e.preventDefault();\n last?.focus();\n }\n } else {\n if (shadowActive === last) {\n e.preventDefault();\n first?.focus();\n }\n }\n }\n\n // ─── Render Helpers ───\n\n /** @internal */\n private _renderWeekdayHeaders() {\n const headers = Array.from(\n { length: 7 },\n (_, i) =>\n html`<div class=\"calendar__weekday\" role=\"columnheader\" aria-label=${this._getDayName(i)}>\n ${this._getDayName(i).slice(0, 2)}\n </div>`,\n );\n return html`<div class=\"calendar__row\" role=\"row\">${headers}</div>`;\n }\n\n /** @internal */\n private _renderDayGrid() {\n const cells = this._getDaysInGrid();\n const selectedDate = this._parseISODate(this.value);\n\n const rows: ReturnType<typeof html>[] = [];\n\n for (let rowStart = 0; rowStart < cells.length; rowStart += 7) {\n const rowCells = cells.slice(rowStart, rowStart + 7).map((date) => {\n if (date === null) {\n return html`<div class=\"calendar__day-cell\" role=\"gridcell\" aria-hidden=\"true\"></div>`;\n }\n\n const isSelected = selectedDate ? this._isSameDay(date, selectedDate) : false;\n const isToday = this._isToday(date);\n const isDisabled = this._isDateDisabled(date);\n const isFocused = this._focusedDay === date.getDate();\n const dayNumber = date.getDate();\n\n const ariaLabel = date.toLocaleDateString(this.locale, {\n weekday: 'long',\n year: 'numeric',\n month: 'long',\n day: 'numeric',\n });\n\n const dayClasses = {\n calendar__day: true,\n 'calendar__day--selected': isSelected,\n 'calendar__day--today': isToday,\n 'calendar__day--disabled': isDisabled,\n };\n\n return html`<div class=\"calendar__day-cell\">\n <button\n part=\"day\"\n class=${classMap(dayClasses)}\n type=\"button\"\n role=\"gridcell\"\n data-day=${dayNumber}\n aria-label=${ariaLabel}\n aria-selected=${isSelected ? 'true' : nothing}\n aria-disabled=${isDisabled ? 'true' : nothing}\n aria-current=${isToday ? 'date' : nothing}\n tabindex=${isFocused ? '0' : '-1'}\n ?disabled=${isDisabled}\n @click=${() => {\n this._selectDay(date);\n }}\n >\n ${dayNumber}\n </button>\n </div>`;\n });\n\n rows.push(html`<div class=\"calendar__row\" role=\"row\">${rowCells}</div>`);\n }\n\n return rows;\n }\n\n // ─── Render ───\n\n override render() {\n const hasError = !!this.error || this._hasErrorSlot;\n const displayValue = this._formatForDisplay(this.value);\n const monthName = this._getMonthName(this._viewMonth);\n\n const fieldClasses = {\n field: true,\n 'field--error': hasError,\n 'field--disabled': this.disabled,\n 'field--required': this.required,\n };\n\n const describedBy =\n [hasError ? this._errorId : null, this.helpText ? this._helpTextId : null]\n .filter(Boolean)\n .join(' ') || undefined;\n\n return html`\n <div part=\"field\" class=${classMap(fieldClasses)}>\n <!-- Label -->\n <div class=\"field__label-wrapper\">\n <slot name=\"label\" @slotchange=${this._handleLabelSlotChange}>\n ${this.label\n ? html`\n <label part=\"label\" class=\"field__label\" for=${this._inputId}>\n ${this.label}\n ${this.required\n ? html`<span class=\"field__required-marker\" aria-hidden=\"true\">*</span>`\n : nothing}\n </label>\n `\n : nothing}\n </slot>\n </div>\n\n <!-- Input + Trigger -->\n <div part=\"input-wrapper\" class=\"field__input-wrapper\">\n <input\n part=\"input\"\n class=\"field__input\"\n id=${this._inputId}\n type=\"text\"\n readonly\n .value=${displayValue}\n placeholder=${ifDefined(this.format || undefined)}\n ?disabled=${this.disabled}\n aria-labelledby=${ifDefined(\n this._hasLabelSlot ? `${this._inputId}-slotted-label` : undefined,\n )}\n aria-invalid=${hasError ? 'true' : nothing}\n aria-describedby=${ifDefined(describedBy)}\n aria-required=${this.required ? 'true' : nothing}\n aria-haspopup=\"dialog\"\n @click=${this._openCalendar}\n />\n <button\n part=\"trigger\"\n class=\"field__trigger\"\n type=\"button\"\n aria-label=${this._isOpen ? this.labelCloseCalendar : this.labelOpenCalendar}\n aria-haspopup=\"dialog\"\n aria-expanded=${this._isOpen ? 'true' : nothing}\n aria-controls=${this._calendarId}\n ?disabled=${this.disabled}\n @click=${this._toggleCalendar}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect>\n <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\n <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\n <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\n </svg>\n </button>\n </div>\n\n <!-- Calendar Popup -->\n ${this._isOpen\n ? html`\n <div\n part=\"calendar\"\n class=\"calendar\"\n id=${this._calendarId}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label=${this.labelChooseDate}\n @keydown=${this._handleCalendarKeydown}\n >\n <!-- Screen reader live region -->\n <div\n id=${this._liveRegionId}\n class=\"calendar__live-region\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n >\n ${this._liveMessage}\n </div>\n\n <!-- Month Navigation -->\n <div part=\"month-nav\" class=\"calendar__nav\">\n <button\n class=\"calendar__nav-btn\"\n type=\"button\"\n aria-label=${this.labelPrevMonth}\n ?disabled=${this._isPrevMonthDisabled()}\n @click=${this._prevMonth}\n >\n ‹\n </button>\n <span class=\"calendar__month-label\" aria-hidden=\"true\">\n ${monthName} ${this._viewYear}\n </span>\n <button\n class=\"calendar__nav-btn\"\n type=\"button\"\n aria-label=${this.labelNextMonth}\n ?disabled=${this._isNextMonthDisabled()}\n @click=${this._nextMonth}\n >\n ›\n </button>\n </div>\n\n <!-- Day Grid -->\n <div class=\"calendar__grid\" role=\"grid\" aria-label=\"${monthName} ${this._viewYear}\">\n ${this._renderWeekdayHeaders()} ${this._renderDayGrid()}\n </div>\n </div>\n `\n : nothing}\n\n <!-- Error -->\n <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>\n ${this.error\n ? html`\n <div part=\"error\" class=\"field__error\" id=${this._errorId} role=\"alert\">\n ${this.error}\n </div>\n `\n : nothing}\n </slot>\n\n <!-- Help Text -->\n ${this.helpText && !hasError\n ? html`\n <div part=\"help-text\" class=\"field__help-text\" id=${this._helpTextId}>\n <slot name=\"help-text\">${this.helpText}</slot>\n </div>\n `\n : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-date-picker': HelixDatePicker;\n }\n}\n"],"names":["helixDatePickerStyles","css","_instanceCounter","HelixDatePicker","LitElement","e","slot","slottedLabel","changedProperties","selected","monthName","state","_mode","disabled","options","_a","iso","d","date","y","m","a","b","month","dayIndex","leadingBlanks","daysInMonth","cells","remainder","selectedISO","targetDay","today","todayDate","btn","key","currentFocused","dayOfWeek","newDay","_b","daysToSaturday","prevDaysInMonth","day","overflow","firstOfCurrentView","minDate","lastOfCurrentView","maxDate","focusableEls","first","last","shadowActive","headers","_","i","html","selectedDate","rows","rowStart","rowCells","isSelected","isToday","isDisabled","isFocused","dayNumber","ariaLabel","classMap","nothing","hasError","displayValue","fieldClasses","describedBy","ifDefined","tokenStyles","__decorateClass","property","query","customElement"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"hx-number-input-CAAibZ8X.js","sources":["../../src/components/hx-number-input/hx-number-input.styles.ts","../../src/components/hx-number-input/hx-number-input.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixNumberInputStyles = css`\n :host {\n display: block;\n }\n\n :host([disabled]) {\n opacity: var(--hx-opacity-disabled);\n pointer-events: none;\n }\n\n * {\n box-sizing: border-box;\n }\n\n .field {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-1);\n font-family: var(--hx-number-input-font-family, var(--hx-font-family-sans));\n }\n\n /* ─── Label ─── */\n\n .field__label-wrapper {\n display: contents;\n }\n\n .field__label {\n display: flex;\n align-items: baseline;\n gap: var(--hx-space-1);\n font-size: var(--hx-font-size-sm);\n font-weight: var(--hx-font-weight-medium);\n color: var(--hx-number-input-label-color, var(--hx-color-neutral-700));\n line-height: var(--hx-line-height-normal);\n }\n\n .field__required-marker {\n color: var(--hx-number-input-error-color, var(--hx-color-error-text, #b91c1c));\n font-weight: var(--hx-font-weight-bold);\n }\n\n /* ─── Input Wrapper ─── */\n\n .field__input-wrapper {\n display: flex;\n align-items: stretch;\n border: var(--hx-border-width-thin) solid\n var(--hx-number-input-border-color, var(--hx-color-neutral-300));\n border-radius: var(--hx-number-input-border-radius, var(--hx-border-radius-md));\n background-color: var(--hx-number-input-bg, var(--hx-color-neutral-0));\n transition:\n border-color var(--hx-transition-fast),\n box-shadow var(--hx-transition-fast);\n overflow: hidden;\n }\n\n .field__input-wrapper:focus-within {\n border-color: var(--hx-number-input-focus-ring-color, var(--hx-focus-ring-color));\n /* Fallback for Safari < 16.2 (no color-mix support) */\n box-shadow: 0 0 0 var(--hx-focus-ring-width)\n var(--hx-number-input-focus-ring-color, var(--hx-focus-ring-color));\n box-shadow: 0 0 0 var(--hx-focus-ring-width)\n color-mix(\n in srgb,\n var(--hx-number-input-focus-ring-color, var(--hx-focus-ring-color))\n calc(var(--hx-focus-ring-opacity) * 100%),\n transparent\n );\n }\n\n /* ─── Error State ─── */\n\n .field--error .field__input-wrapper {\n border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626));\n }\n\n .field--error .field__input-wrapper:focus-within {\n border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626));\n /* Fallback for Safari < 16.2 (no color-mix support) */\n box-shadow: 0 0 0 var(--hx-focus-ring-width)\n var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626));\n box-shadow: 0 0 0 var(--hx-focus-ring-width)\n color-mix(\n in srgb,\n var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626))\n calc(var(--hx-focus-ring-opacity) * 100%),\n transparent\n );\n }\n\n /* ─── Slots (Prefix / Suffix) ─── */\n\n .field__prefix,\n .field__suffix {\n display: flex;\n align-items: center;\n padding: 0 var(--hx-space-3);\n color: var(--hx-color-neutral-500);\n flex-shrink: 0;\n }\n\n /* ─── Native Input ─── */\n\n .field__input {\n flex: 1;\n border: none;\n outline: none;\n background: transparent;\n font-family: inherit;\n color: var(--hx-number-input-color, var(--hx-color-neutral-800));\n line-height: var(--hx-line-height-normal);\n width: 100%;\n /* Size: md (default) */\n padding: var(--hx-space-2) var(--hx-space-3);\n font-size: var(--hx-font-size-md);\n min-height: var(--hx-size-10);\n }\n\n .field__input::placeholder {\n color: var(--hx-color-neutral-400);\n }\n\n .field__input:disabled {\n cursor: not-allowed;\n }\n\n /* ─── Hide native browser spinners ─── */\n\n .field__input[type='number']::-webkit-inner-spin-button,\n .field__input[type='number']::-webkit-outer-spin-button {\n display: none;\n }\n\n .field__input[type='number'] {\n appearance: textfield;\n }\n\n /* ─── Size Variants ─── */\n\n .field--sm .field__input {\n padding: var(--hx-space-1) var(--hx-space-2);\n font-size: var(--hx-font-size-sm);\n min-height: var(--hx-size-8);\n }\n\n .field--lg .field__input {\n padding: var(--hx-space-3) var(--hx-space-4);\n font-size: var(--hx-font-size-lg);\n min-height: var(--hx-size-12);\n }\n\n /* ─── Stepper ─── */\n\n .field__stepper {\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n border-left: var(--hx-border-width-thin) solid\n var(--hx-number-input-border-color, var(--hx-color-neutral-300));\n }\n\n .field__stepper-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border: none;\n cursor: pointer;\n color: var(--hx-color-neutral-600);\n padding: 0;\n flex: 1;\n min-width: var(--hx-size-8);\n line-height: 1;\n transition: background-color var(--hx-transition-fast);\n user-select: none;\n -webkit-user-select: none;\n }\n\n .field__stepper-btn:not(:last-child) {\n border-bottom: var(--hx-border-width-thin) solid\n var(--hx-number-input-border-color, var(--hx-color-neutral-300));\n }\n\n .field__stepper-btn:hover:not(:disabled) {\n background-color: var(--hx-color-neutral-50);\n color: var(--hx-color-neutral-800);\n }\n\n /* Suppress focus ring for mouse/touch focus; keep for keyboard and programmatic focus */\n .field__stepper-btn:focus:not(:focus-visible) {\n outline: none;\n }\n\n .field__stepper-btn:focus-visible {\n outline: var(--hx-focus-ring-width) solid\n var(--hx-number-input-focus-ring-color, var(--hx-focus-ring-color));\n outline-offset: -2px;\n }\n\n .field__stepper-btn:disabled {\n opacity: var(--hx-opacity-disabled);\n cursor: not-allowed;\n }\n\n .field__stepper-btn svg {\n pointer-events: none;\n width: 0.75rem;\n height: 0.75rem;\n }\n\n /* Size sm adjustments for stepper */\n .field--sm .field__stepper-btn {\n min-width: var(--hx-size-6);\n }\n\n /* Size lg adjustments for stepper */\n .field--lg .field__stepper-btn {\n min-width: var(--hx-size-10);\n }\n\n /* ─── Help Text & Error Messages ─── */\n\n .field__help-text {\n font-size: var(--hx-font-size-xs);\n color: var(--hx-color-neutral-500);\n line-height: var(--hx-line-height-normal);\n }\n\n .field__error {\n font-size: var(--hx-font-size-xs);\n color: var(--hx-number-input-error-color, var(--hx-color-error-text, #b91c1c));\n line-height: var(--hx-line-height-normal);\n }\n\n /* ─── Reduced Motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .field__input-wrapper {\n transition: none;\n }\n\n .field__stepper-btn {\n transition: none;\n }\n }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixNumberInputStyles } from './hx-number-input.styles.js';\n\n// Module-level counter for stable, SSR-safe IDs (avoids Math.random() hydration mismatch)\nlet _hxNumberInputIdCounter = 0;\n\n/**\n * A numeric input component with stepper controls, label, validation, and\n * full form association. Designed for healthcare data-entry contexts where\n * precise numeric values (dosage, age, measurements) must be captured safely.\n *\n * @summary Form-associated numeric input with stepper buttons, bounds checking,\n * label, error, and help text.\n *\n * @tag hx-number-input\n *\n * @slot label - Custom label content (overrides the label property). Use for Drupal Form API rendered labels.\n * @slot help-text - Custom help text content (overrides the helpText property).\n * @slot error - Custom error content (overrides the error property). Use for Drupal Form API rendered errors.\n * @slot prefix - Content rendered before the input (e.g., a unit icon).\n * @slot suffix - Content rendered after the input and before the stepper buttons (e.g., a unit label).\n *\n * @fires {CustomEvent<{value: number | null}>} hx-input - Dispatched on every keystroke as the user types.\n * @fires {CustomEvent<{value: number | null}>} hx-change - Dispatched when the input loses focus after its value changed.\n *\n * @csspart field - The outer field container.\n * @csspart label - The label element.\n * @csspart input-wrapper - The wrapper around prefix, input, suffix, and stepper.\n * @csspart input - The native input element.\n * @csspart help-text - The help text container.\n * @csspart error-message - The error message container.\n * @csspart stepper - The stepper button group container.\n * @csspart increment - The increment (+) button.\n * @csspart decrement - The decrement (-) button.\n *\n * @cssprop [--hx-number-input-bg=var(--hx-color-neutral-0)] - Input background color.\n * @cssprop [--hx-number-input-color=var(--hx-color-neutral-800)] - Input text color.\n * @cssprop [--hx-number-input-border-color=var(--hx-color-neutral-300)] - Input border color.\n * @cssprop [--hx-number-input-border-radius=var(--hx-border-radius-md)] - Input border radius.\n * @cssprop [--hx-number-input-error-color=var(--hx-color-error-500)] - Error state color.\n * @cssprop [--hx-number-input-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-number-input-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-number-input-font-family=var(--hx-font-family-sans)] - Font family.\n */\n@customElement('hx-number-input')\nexport class HelixNumberInput extends LitElement {\n static override styles = [tokenStyles, helixNumberInputStyles];\n\n // ─── Form Association ───\n\n static formAssociated = true;\n\n /** @internal */\n private _internals: ElementInternals;\n\n constructor() {\n super();\n /** @internal */\n this._internals = this.attachInternals();\n }\n\n // ─── Properties ───\n\n /**\n * The name of the input, used for form submission.\n * @attr name\n */\n @property({ type: String })\n name = '';\n\n /**\n * The current numeric value of the input. Null when the field is empty.\n * @attr value\n */\n @property({\n type: Number,\n converter: {\n fromAttribute: (attr: string | null): number | null => {\n if (attr === null || attr === '') return null;\n const n = Number(attr);\n return isNaN(n) ? null : n;\n },\n toAttribute: (val: number | null): string | null => (val === null ? null : String(val)),\n },\n })\n value: number | null = null;\n\n /**\n * Whether the input is required for form submission.\n * @attr required\n */\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /**\n * Whether the input is disabled.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Whether the input is read-only.\n * @attr readonly\n */\n @property({ type: Boolean, reflect: true })\n readonly = false;\n\n /**\n * Minimum allowed value. When reached, the decrement button is disabled.\n * @attr min\n */\n @property({ type: Number })\n min: number | undefined = undefined;\n\n /**\n * Maximum allowed value. When reached, the increment button is disabled.\n * @attr max\n */\n @property({ type: Number })\n max: number | undefined = undefined;\n\n /**\n * The amount to increment or decrement on each step action.\n * @attr step\n */\n @property({ type: Number })\n step = 1;\n\n /**\n * The visible label text for the input.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n /**\n * Error message to display. When set, the input enters an error state.\n * @attr error\n */\n @property({ type: String })\n error = '';\n\n /**\n * Help text displayed below the input for guidance.\n * @attr help-text\n */\n @property({ type: String, attribute: 'help-text' })\n helpText = '';\n\n /**\n * Size variant controlling input padding and font size.\n * @attr hx-size\n */\n @property({ type: String, attribute: 'hx-size' })\n size: 'sm' | 'md' | 'lg' = 'md';\n\n /**\n * When set, hides the +/- stepper buttons.\n * @attr no-stepper\n */\n @property({ type: Boolean, attribute: 'no-stepper' })\n noStepper = false;\n\n /** Accessible label for the increment button. */\n @property({ type: String, attribute: 'label-increment' })\n labelIncrement = 'Increment';\n\n /** Accessible label for the decrement button. */\n @property({ type: String, attribute: 'label-decrement' })\n labelDecrement = 'Decrement';\n\n // ─── Internal References ───\n\n /** @internal */\n @query('.field__input')\n declare private _input: HTMLInputElement | null;\n\n // ─── Internal State ───\n\n /** @internal */\n @state() private _hasLabelSlot = false;\n /** @internal */\n @state() private _hasErrorSlot = false;\n /** @internal */\n @state() private _hasHelpSlot = false;\n\n /** The value captured at first render, used by formResetCallback. */\n /** @internal */\n private _defaultValue: number | null = null;\n\n /** Timer ID for the long-press initial delay. */\n /** @internal */\n private _longPressTimer: ReturnType<typeof setTimeout> | null = null;\n\n /** Interval ID for the long-press rapid-repeat phase. */\n /** @internal */\n private _repeatInterval: ReturnType<typeof setInterval> | null = null;\n\n // ─── Stable IDs ───\n\n /** @internal */\n private readonly _inputId = `hx-number-input-${++_hxNumberInputIdCounter}`;\n /** @internal */\n private readonly _helpTextId = `${this._inputId}-help`;\n /** @internal */\n private readonly _errorId = `${this._inputId}-error`;\n\n // ─── Slot Tracking ───\n\n /** @internal */\n private _handleLabelSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasLabelSlot = slot.assignedElements().length > 0;\n if (this._hasLabelSlot) {\n const slottedLabel = slot.assignedElements()[0];\n if (slottedLabel && !slottedLabel.id) {\n slottedLabel.id = `${this._inputId}-slotted-label`;\n }\n }\n }\n\n /** @internal */\n private _handleErrorSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n const assigned = slot.assignedElements();\n this._hasErrorSlot = assigned.length > 0;\n if (this._hasErrorSlot && assigned[0]) {\n if (!assigned[0].id) assigned[0].id = this._errorId;\n }\n }\n\n /** @internal */\n private _handleHelpSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasHelpSlot = slot.assignedElements().length > 0;\n }\n\n // ─── Lifecycle ───\n\n override firstUpdated(): void {\n this._defaultValue = this.value;\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._clearLongPress();\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n if (\n changedProperties.has('value') ||\n changedProperties.has('required') ||\n changedProperties.has('min') ||\n changedProperties.has('max') ||\n changedProperties.has('step')\n ) {\n this._syncFormValue();\n this._updateValidity();\n }\n }\n\n // ─── Form Integration ───\n\n /** Returns the associated form element, if any. */\n get form(): HTMLFormElement | null {\n return this._internals.form;\n }\n\n /** Returns the validation message. */\n get validationMessage(): string {\n return this._internals.validationMessage;\n }\n\n /** Returns the ValidityState object. */\n get validity(): ValidityState {\n return this._internals.validity;\n }\n\n /** Checks whether the input satisfies its constraints. */\n checkValidity(): boolean {\n return this._internals.checkValidity();\n }\n\n /** Reports validity and shows the browser's constraint validation UI. */\n reportValidity(): boolean {\n return this._internals.reportValidity();\n }\n\n /** @internal */\n private _syncFormValue(): void {\n this._internals.setFormValue(this.value !== null ? String(this.value) : null);\n }\n\n /** @internal */\n private _updateValidity(): void {\n if (this.required && this.value === null) {\n this._internals.setValidity(\n { valueMissing: true },\n this.error || 'This field is required.',\n this._input ?? undefined,\n );\n return;\n }\n\n if (this.value !== null && this.min !== undefined && this.value < this.min) {\n this._internals.setValidity(\n { rangeUnderflow: true },\n `Value must be at least ${this.min}.`,\n this._input ?? undefined,\n );\n return;\n }\n\n if (this.value !== null && this.max !== undefined && this.value > this.max) {\n this._internals.setValidity(\n { rangeOverflow: true },\n `Value must be at most ${this.max}.`,\n this._input ?? undefined,\n );\n return;\n }\n\n if (this.value !== null && this.step && this.step !== 0) {\n const step = this._finite(this.step) ?? 1;\n const base = this._finite(this.min) ?? 0;\n const remainder = Math.abs((this.value - base) % step);\n const epsilon = 1e-9;\n if (remainder > epsilon && Math.abs(remainder - step) > epsilon) {\n this._internals.setValidity(\n { stepMismatch: true },\n `Value must be a multiple of ${step}.`,\n this._input ?? undefined,\n );\n return;\n }\n }\n\n this._internals.setValidity({});\n }\n\n /** Called by the form when it resets. */\n formResetCallback(): void {\n this.value = this._defaultValue;\n this._internals.setFormValue(this.value !== null ? String(this.value) : null);\n }\n\n /** Called when the form restores state (e.g., back/forward navigation). */\n formStateRestoreCallback(\n state: string | File | FormData | null,\n _mode: 'restore' | 'autocomplete',\n ): void {\n if (typeof state === 'string') {\n const parsed = Number(state);\n this.value = isNaN(parsed) ? null : parsed;\n }\n }\n\n /** Called when a parent fieldset is disabled/enabled. */\n formDisabledCallback(disabled: boolean): void {\n this.disabled = disabled;\n }\n\n // ─── Value Parsing ───\n\n /** @internal */\n private _finite(value: number | undefined): number | undefined {\n return Number.isFinite(value) ? value : undefined;\n }\n\n /** @internal */\n private _parseInput(raw: string): number | null {\n if (raw === '' || raw === null) return null;\n const parsed = parseFloat(raw);\n return isNaN(parsed) ? null : parsed;\n }\n\n /** @internal */\n private _clamp(v: number): number {\n let result = v;\n const min = this._finite(this.min);\n const max = this._finite(this.max);\n if (min !== undefined) result = Math.max(min, result);\n if (max !== undefined) result = Math.min(max, result);\n return result;\n }\n\n // ─── Stepper Helpers ───\n\n /** @internal */\n private get _atMin(): boolean {\n return this.value !== null && this.min !== undefined && this.value <= this.min;\n }\n\n /** @internal */\n private get _atMax(): boolean {\n return this.value !== null && this.max !== undefined && this.value >= this.max;\n }\n\n /** @internal */\n private _applyStep(delta: number): void {\n if (this.disabled || this.readonly) return;\n\n const current = this.value ?? 0;\n const step = this._finite(this.step) ?? 1;\n const next = this._clamp(parseFloat((current + delta * step).toFixed(10)));\n\n if (next === this.value) return;\n this.value = next;\n\n this.dispatchEvent(\n new CustomEvent<{ value: number | null }>('hx-change', {\n bubbles: true,\n composed: true,\n detail: { value: this.value },\n }),\n );\n }\n\n // ─── Long-press ───\n\n /** @internal */\n private _clearLongPress(): void {\n if (this._longPressTimer !== null) {\n clearTimeout(this._longPressTimer);\n this._longPressTimer = null;\n }\n if (this._repeatInterval !== null) {\n clearInterval(this._repeatInterval);\n this._repeatInterval = null;\n }\n }\n\n /** @internal */\n private _startLongPress(delta: number): void {\n this._applyStep(delta);\n this._longPressTimer = setTimeout(() => {\n this._repeatInterval = setInterval(() => {\n this._applyStep(delta);\n }, 100);\n }, 400);\n }\n\n /** @internal */\n private _handleStepperPointerDown(e: PointerEvent, delta: number): void {\n if (this.disabled || this.readonly) return;\n e.preventDefault();\n this._startLongPress(delta);\n }\n\n /** @internal */\n private _handleStepperPointerUp(): void {\n this._clearLongPress();\n }\n\n // ─── Keyboard ───\n\n /** @internal */\n private _handleKeyDown(e: KeyboardEvent): void {\n if (this.disabled || this.readonly) return;\n if (e.key === 'ArrowUp') {\n e.preventDefault();\n this._applyStep(1);\n } else if (e.key === 'ArrowDown') {\n e.preventDefault();\n this._applyStep(-1);\n }\n }\n\n // ─── Input Events ───\n\n /** @internal */\n private _handleInput(e: Event): void {\n const target = e.target as HTMLInputElement;\n this.value = this._parseInput(target.value);\n this._syncFormValue();\n\n this.dispatchEvent(\n new CustomEvent<{ value: number | null }>('hx-input', {\n bubbles: true,\n composed: true,\n detail: { value: this.value },\n }),\n );\n }\n\n /** @internal */\n private _handleChange(e: Event): void {\n const target = e.target as HTMLInputElement;\n const parsed = this._parseInput(target.value);\n this.value = parsed !== null ? this._clamp(parsed) : null;\n this._syncFormValue();\n this._updateValidity();\n\n this.dispatchEvent(\n new CustomEvent<{ value: number | null }>('hx-change', {\n bubbles: true,\n composed: true,\n detail: { value: this.value },\n }),\n );\n }\n\n // ─── Public Methods ───\n\n /** Moves focus to the input element. */\n override focus(options?: FocusOptions): void {\n this._input?.focus(options);\n }\n\n /** Selects all text in the input. */\n select(): void {\n this._input?.select();\n }\n\n // ─── Render Helpers ───\n\n /** @internal */\n private _renderIncrementIcon() {\n return html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 12 12\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <path d=\"M6 1v10M1 6h10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n </svg>`;\n }\n\n /** @internal */\n private _renderDecrementIcon() {\n return html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 12 12\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <path d=\"M1 6h10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n </svg>`;\n }\n\n // ─── Render ───\n\n override render() {\n const hasError = !!this.error || this._hasErrorSlot;\n\n const fieldClasses = {\n field: true,\n 'field--error': hasError,\n 'field--disabled': this.disabled,\n 'field--required': this.required,\n 'field--sm': this.size === 'sm',\n 'field--md': this.size === 'md',\n 'field--lg': this.size === 'lg',\n };\n\n const describedBy =\n [\n hasError ? this._errorId : null,\n !hasError && (this.helpText || this._hasHelpSlot) ? this._helpTextId : null,\n ]\n .filter(Boolean)\n .join(' ') || undefined;\n\n const displayValue = this.value !== null ? String(this.value) : '';\n\n return html`\n <div part=\"field\" class=${classMap(fieldClasses)}>\n <div class=\"field__label-wrapper\">\n <slot name=\"label\" @slotchange=${this._handleLabelSlotChange}>\n ${this.label\n ? html`\n <label part=\"label\" class=\"field__label\" for=${this._inputId}>\n ${this.label}\n ${this.required\n ? html`<span class=\"field__required-marker\" aria-hidden=\"true\">*</span>`\n : nothing}\n </label>\n `\n : nothing}\n </slot>\n </div>\n\n <div part=\"input-wrapper\" class=\"field__input-wrapper\">\n <span class=\"field__prefix\">\n <slot name=\"prefix\"></slot>\n </span>\n\n <input\n part=\"input\"\n class=\"field__input\"\n id=${this._inputId}\n type=\"number\"\n .value=${live(displayValue)}\n min=${ifDefined(this.min)}\n max=${ifDefined(this.max)}\n step=${this.step}\n ?required=${this.required}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n name=${ifDefined(this.name || undefined)}\n aria-labelledby=${ifDefined(\n this._hasLabelSlot ? `${this._inputId}-slotted-label` : undefined,\n )}\n aria-invalid=${hasError ? 'true' : nothing}\n aria-describedby=${ifDefined(describedBy)}\n aria-valuenow=${ifDefined(this.value !== null ? this.value : undefined)}\n aria-valuemin=${ifDefined(this.min)}\n aria-valuemax=${ifDefined(this.max)}\n @input=${this._handleInput}\n @change=${this._handleChange}\n @keydown=${this._handleKeyDown}\n />\n\n <span class=\"field__suffix\">\n <slot name=\"suffix\"></slot>\n </span>\n\n ${this.noStepper\n ? nothing\n : html`\n <div part=\"stepper\" class=\"field__stepper\">\n <button\n part=\"increment\"\n class=\"field__stepper-btn\"\n type=\"button\"\n aria-label=${this.labelIncrement}\n ?disabled=${this.disabled || this.readonly || this._atMax}\n tabindex=\"-1\"\n @pointerdown=${(e: PointerEvent) => this._handleStepperPointerDown(e, 1)}\n @pointerup=${this._handleStepperPointerUp}\n @pointerleave=${this._handleStepperPointerUp}\n @pointercancel=${this._handleStepperPointerUp}\n >\n ${this._renderIncrementIcon()}\n </button>\n <button\n part=\"decrement\"\n class=\"field__stepper-btn\"\n type=\"button\"\n aria-label=${this.labelDecrement}\n ?disabled=${this.disabled || this.readonly || this._atMin}\n tabindex=\"-1\"\n @pointerdown=${(e: PointerEvent) => this._handleStepperPointerDown(e, -1)}\n @pointerup=${this._handleStepperPointerUp}\n @pointerleave=${this._handleStepperPointerUp}\n @pointercancel=${this._handleStepperPointerUp}\n >\n ${this._renderDecrementIcon()}\n </button>\n </div>\n `}\n </div>\n\n <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>\n ${this.error\n ? html`\n <div part=\"error-message\" class=\"field__error\" id=${this._errorId} role=\"alert\">\n ${this.error}\n </div>\n `\n : nothing}\n </slot>\n\n <div\n part=\"help-text\"\n class=\"field__help-text\"\n id=${this._helpTextId}\n ?hidden=${hasError || (!this.helpText && !this._hasHelpSlot)}\n >\n <slot name=\"help-text\" @slotchange=${this._handleHelpSlotChange}>${this.helpText}</slot>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-number-input': HelixNumberInput;\n }\n}\n"],"names":["helixNumberInputStyles","css","_hxNumberInputIdCounter","HelixNumberInput","LitElement","slot","slottedLabel","assigned","changedProperties","step","base","remainder","epsilon","state","_mode","parsed","disabled","value","raw","v","result","min","max","delta","current","next","target","options","_a","html","hasError","fieldClasses","describedBy","displayValue","classMap","nothing","live","ifDefined","e","tokenStyles","__decorateClass","property","attr","n","val","query","customElement"],"mappings":";;;;;;AAEO,MAAMA,IAAyBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACOtC,IAAIC,IAA0B,GAyCjBC,IAAN,cAA+BC,EAAW;AAAA,EAU/C,cAAc;AACZ,UAAA,GAYF,KAAA,OAAO,IAiBP,KAAA,QAAuB,MAOvB,KAAA,WAAW,IAOX,KAAA,WAAW,IAOX,KAAA,WAAW,IAOX,KAAA,MAA0B,QAO1B,KAAA,MAA0B,QAO1B,KAAA,OAAO,GAOP,KAAA,QAAQ,IAOR,KAAA,QAAQ,IAOR,KAAA,WAAW,IAOX,KAAA,OAA2B,MAO3B,KAAA,YAAY,IAIZ,KAAA,iBAAiB,aAIjB,KAAA,iBAAiB,aAWR,KAAQ,gBAAgB,IAExB,KAAQ,gBAAgB,IAExB,KAAQ,eAAe,IAIhC,KAAQ,gBAA+B,MAIvC,KAAQ,kBAAwD,MAIhE,KAAQ,kBAAyD,MAKjE,KAAiB,WAAW,mBAAmB,EAAEF,CAAuB,IAExE,KAAiB,cAAc,GAAG,KAAK,QAAQ,SAE/C,KAAiB,WAAW,GAAG,KAAK,QAAQ,UApJ1C,KAAK,aAAa,KAAK,gBAAA;AAAA,EACzB;AAAA;AAAA;AAAA,EAwJQ,uBAAuB,GAAgB;AAC7C,UAAMG,IAAO,EAAE;AAEf,QADA,KAAK,gBAAgBA,EAAK,iBAAA,EAAmB,SAAS,GAClD,KAAK,eAAe;AACtB,YAAMC,IAAeD,EAAK,iBAAA,EAAmB,CAAC;AAC9C,MAAIC,KAAgB,CAACA,EAAa,OAChCA,EAAa,KAAK,GAAG,KAAK,QAAQ;AAAA,IAEtC;AAAA,EACF;AAAA;AAAA,EAGQ,uBAAuB,GAAgB;AAE7C,UAAMC,IADO,EAAE,OACO,iBAAA;AACtB,SAAK,gBAAgBA,EAAS,SAAS,GACnC,KAAK,iBAAiBA,EAAS,CAAC,MAC7BA,EAAS,CAAC,EAAE,OAAIA,EAAS,CAAC,EAAE,KAAK,KAAK;AAAA,EAE/C;AAAA;AAAA,EAGQ,sBAAsB,GAAgB;AAC5C,UAAMF,IAAO,EAAE;AACf,SAAK,eAAeA,EAAK,iBAAA,EAAmB,SAAS;AAAA,EACvD;AAAA;AAAA,EAIS,eAAqB;AAC5B,SAAK,gBAAgB,KAAK;AAAA,EAC5B;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GACN,KAAK,gBAAA;AAAA,EACP;AAAA,EAES,QAAQG,GAA+C;AAC9D,UAAM,QAAQA,CAAiB,IAE7BA,EAAkB,IAAI,OAAO,KAC7BA,EAAkB,IAAI,UAAU,KAChCA,EAAkB,IAAI,KAAK,KAC3BA,EAAkB,IAAI,KAAK,KAC3BA,EAAkB,IAAI,MAAM,OAE5B,KAAK,eAAA,GACL,KAAK,gBAAA;AAAA,EAET;AAAA;AAAA;AAAA,EAKA,IAAI,OAA+B;AACjC,WAAO,KAAK,WAAW;AAAA,EACzB;AAAA;AAAA,EAGA,IAAI,oBAA4B;AAC9B,WAAO,KAAK,WAAW;AAAA,EACzB;AAAA;AAAA,EAGA,IAAI,WAA0B;AAC5B,WAAO,KAAK,WAAW;AAAA,EACzB;AAAA;AAAA,EAGA,gBAAyB;AACvB,WAAO,KAAK,WAAW,cAAA;AAAA,EACzB;AAAA;AAAA,EAGA,iBAA0B;AACxB,WAAO,KAAK,WAAW,eAAA;AAAA,EACzB;AAAA;AAAA,EAGQ,iBAAuB;AAC7B,SAAK,WAAW,aAAa,KAAK,UAAU,OAAO,OAAO,KAAK,KAAK,IAAI,IAAI;AAAA,EAC9E;AAAA;AAAA,EAGQ,kBAAwB;AAC9B,QAAI,KAAK,YAAY,KAAK,UAAU,MAAM;AACxC,WAAK,WAAW;AAAA,QACd,EAAE,cAAc,GAAA;AAAA,QAChB,KAAK,SAAS;AAAA,QACd,KAAK,UAAU;AAAA,MAAA;AAEjB;AAAA,IACF;AAEA,QAAI,KAAK,UAAU,QAAQ,KAAK,QAAQ,UAAa,KAAK,QAAQ,KAAK,KAAK;AAC1E,WAAK,WAAW;AAAA,QACd,EAAE,gBAAgB,GAAA;AAAA,QAClB,0BAA0B,KAAK,GAAG;AAAA,QAClC,KAAK,UAAU;AAAA,MAAA;AAEjB;AAAA,IACF;AAEA,QAAI,KAAK,UAAU,QAAQ,KAAK,QAAQ,UAAa,KAAK,QAAQ,KAAK,KAAK;AAC1E,WAAK,WAAW;AAAA,QACd,EAAE,eAAe,GAAA;AAAA,QACjB,yBAAyB,KAAK,GAAG;AAAA,QACjC,KAAK,UAAU;AAAA,MAAA;AAEjB;AAAA,IACF;AAEA,QAAI,KAAK,UAAU,QAAQ,KAAK,QAAQ,KAAK,SAAS,GAAG;AACvD,YAAMC,IAAO,KAAK,QAAQ,KAAK,IAAI,KAAK,GAClCC,IAAO,KAAK,QAAQ,KAAK,GAAG,KAAK,GACjCC,IAAY,KAAK,KAAK,KAAK,QAAQD,KAAQD,CAAI,GAC/CG,IAAU;AAChB,UAAID,IAAYC,KAAW,KAAK,IAAID,IAAYF,CAAI,IAAIG,GAAS;AAC/D,aAAK,WAAW;AAAA,UACd,EAAE,cAAc,GAAA;AAAA,UAChB,+BAA+BH,CAAI;AAAA,UACnC,KAAK,UAAU;AAAA,QAAA;AAEjB;AAAA,MACF;AAAA,IACF;AAEA,SAAK,WAAW,YAAY,EAAE;AAAA,EAChC;AAAA;AAAA,EAGA,oBAA0B;AACxB,SAAK,QAAQ,KAAK,eAClB,KAAK,WAAW,aAAa,KAAK,UAAU,OAAO,OAAO,KAAK,KAAK,IAAI,IAAI;AAAA,EAC9E;AAAA;AAAA,EAGA,yBACEI,GACAC,GACM;AACN,QAAI,OAAOD,KAAU,UAAU;AAC7B,YAAME,IAAS,OAAOF,CAAK;AAC3B,WAAK,QAAQ,MAAME,CAAM,IAAI,OAAOA;AAAA,IACtC;AAAA,EACF;AAAA;AAAA,EAGA,qBAAqBC,GAAyB;AAC5C,SAAK,WAAWA;AAAA,EAClB;AAAA;AAAA;AAAA,EAKQ,QAAQC,GAA+C;AAC7D,WAAO,OAAO,SAASA,CAAK,IAAIA,IAAQ;AAAA,EAC1C;AAAA;AAAA,EAGQ,YAAYC,GAA4B;AAC9C,QAAIA,MAAQ,MAAMA,MAAQ,KAAM,QAAO;AACvC,UAAMH,IAAS,WAAWG,CAAG;AAC7B,WAAO,MAAMH,CAAM,IAAI,OAAOA;AAAA,EAChC;AAAA;AAAA,EAGQ,OAAOI,GAAmB;AAChC,QAAIC,IAASD;AACb,UAAME,IAAM,KAAK,QAAQ,KAAK,GAAG,GAC3BC,IAAM,KAAK,QAAQ,KAAK,GAAG;AACjC,WAAID,MAAQ,WAAWD,IAAS,KAAK,IAAIC,GAAKD,CAAM,IAChDE,MAAQ,WAAWF,IAAS,KAAK,IAAIE,GAAKF,CAAM,IAC7CA;AAAA,EACT;AAAA;AAAA;AAAA,EAKA,IAAY,SAAkB;AAC5B,WAAO,KAAK,UAAU,QAAQ,KAAK,QAAQ,UAAa,KAAK,SAAS,KAAK;AAAA,EAC7E;AAAA;AAAA,EAGA,IAAY,SAAkB;AAC5B,WAAO,KAAK,UAAU,QAAQ,KAAK,QAAQ,UAAa,KAAK,SAAS,KAAK;AAAA,EAC7E;AAAA;AAAA,EAGQ,WAAWG,GAAqB;AACtC,QAAI,KAAK,YAAY,KAAK,SAAU;AAEpC,UAAMC,IAAU,KAAK,SAAS,GACxBf,IAAO,KAAK,QAAQ,KAAK,IAAI,KAAK,GAClCgB,IAAO,KAAK,OAAO,YAAYD,IAAUD,IAAQd,GAAM,QAAQ,EAAE,CAAC,CAAC;AAEzE,IAAIgB,MAAS,KAAK,UAClB,KAAK,QAAQA,GAEb,KAAK;AAAA,MACH,IAAI,YAAsC,aAAa;AAAA,QACrD,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,OAAO,KAAK,MAAA;AAAA,MAAM,CAC7B;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA;AAAA,EAKQ,kBAAwB;AAC9B,IAAI,KAAK,oBAAoB,SAC3B,aAAa,KAAK,eAAe,GACjC,KAAK,kBAAkB,OAErB,KAAK,oBAAoB,SAC3B,cAAc,KAAK,eAAe,GAClC,KAAK,kBAAkB;AAAA,EAE3B;AAAA;AAAA,EAGQ,gBAAgBF,GAAqB;AAC3C,SAAK,WAAWA,CAAK,GACrB,KAAK,kBAAkB,WAAW,MAAM;AACtC,WAAK,kBAAkB,YAAY,MAAM;AACvC,aAAK,WAAWA,CAAK;AAAA,MACvB,GAAG,GAAG;AAAA,IACR,GAAG,GAAG;AAAA,EACR;AAAA;AAAA,EAGQ,0BAA0B,GAAiBA,GAAqB;AACtE,IAAI,KAAK,YAAY,KAAK,aAC1B,EAAE,eAAA,GACF,KAAK,gBAAgBA,CAAK;AAAA,EAC5B;AAAA;AAAA,EAGQ,0BAAgC;AACtC,SAAK,gBAAA;AAAA,EACP;AAAA;AAAA;AAAA,EAKQ,eAAe,GAAwB;AAC7C,IAAI,KAAK,YAAY,KAAK,aACtB,EAAE,QAAQ,aACZ,EAAE,eAAA,GACF,KAAK,WAAW,CAAC,KACR,EAAE,QAAQ,gBACnB,EAAE,eAAA,GACF,KAAK,WAAW,EAAE;AAAA,EAEtB;AAAA;AAAA;AAAA,EAKQ,aAAa,GAAgB;AACnC,UAAMG,IAAS,EAAE;AACjB,SAAK,QAAQ,KAAK,YAAYA,EAAO,KAAK,GAC1C,KAAK,eAAA,GAEL,KAAK;AAAA,MACH,IAAI,YAAsC,YAAY;AAAA,QACpD,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,OAAO,KAAK,MAAA;AAAA,MAAM,CAC7B;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA,EAGQ,cAAc,GAAgB;AACpC,UAAMA,IAAS,EAAE,QACXX,IAAS,KAAK,YAAYW,EAAO,KAAK;AAC5C,SAAK,QAAQX,MAAW,OAAO,KAAK,OAAOA,CAAM,IAAI,MACrD,KAAK,eAAA,GACL,KAAK,gBAAA,GAEL,KAAK;AAAA,MACH,IAAI,YAAsC,aAAa;AAAA,QACrD,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,OAAO,KAAK,MAAA;AAAA,MAAM,CAC7B;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA;AAAA,EAKS,MAAMY,GAA8B;;AAC3C,KAAAC,IAAA,KAAK,WAAL,QAAAA,EAAa,MAAMD;AAAA,EACrB;AAAA;AAAA,EAGA,SAAe;;AACb,KAAAC,IAAA,KAAK,WAAL,QAAAA,EAAa;AAAA,EACf;AAAA;AAAA;AAAA,EAKQ,uBAAuB;AAC7B,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQT;AAAA;AAAA,EAGQ,uBAAuB;AAC7B,WAAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQT;AAAA;AAAA,EAIS,SAAS;AAChB,UAAMC,IAAW,CAAC,CAAC,KAAK,SAAS,KAAK,eAEhCC,IAAe;AAAA,MACnB,OAAO;AAAA,MACP,gBAAgBD;AAAA,MAChB,mBAAmB,KAAK;AAAA,MACxB,mBAAmB,KAAK;AAAA,MACxB,aAAa,KAAK,SAAS;AAAA,MAC3B,aAAa,KAAK,SAAS;AAAA,MAC3B,aAAa,KAAK,SAAS;AAAA,IAAA,GAGvBE,IACJ;AAAA,MACEF,IAAW,KAAK,WAAW;AAAA,MAC3B,CAACA,MAAa,KAAK,YAAY,KAAK,gBAAgB,KAAK,cAAc;AAAA,IAAA,EAEtE,OAAO,OAAO,EACd,KAAK,GAAG,KAAK,QAEZG,IAAe,KAAK,UAAU,OAAO,OAAO,KAAK,KAAK,IAAI;AAEhE,WAAOJ;AAAA,gCACqBK,EAASH,CAAY,CAAC;AAAA;AAAA,2CAEX,KAAK,sBAAsB;AAAA,cACxD,KAAK,QACHF;AAAA,iEACiD,KAAK,QAAQ;AAAA,sBACxD,KAAK,KAAK;AAAA,sBACV,KAAK,WACHA,sEACAM,CAAO;AAAA;AAAA,oBAGfA,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAYN,KAAK,QAAQ;AAAA;AAAA,qBAETC,EAAKH,CAAY,CAAC;AAAA,kBACrBI,EAAU,KAAK,GAAG,CAAC;AAAA,kBACnBA,EAAU,KAAK,GAAG,CAAC;AAAA,mBAClB,KAAK,IAAI;AAAA,wBACJ,KAAK,QAAQ;AAAA,wBACb,KAAK,QAAQ;AAAA,wBACb,KAAK,QAAQ;AAAA,mBAClBA,EAAU,KAAK,QAAQ,MAAS,CAAC;AAAA,8BACtBA;AAAA,MAChB,KAAK,gBAAgB,GAAG,KAAK,QAAQ,mBAAmB;AAAA,IAAA,CACzD;AAAA,2BACcP,IAAW,SAASK,CAAO;AAAA,+BACvBE,EAAUL,CAAW,CAAC;AAAA,4BACzBK,EAAU,KAAK,UAAU,OAAO,KAAK,QAAQ,MAAS,CAAC;AAAA,4BACvDA,EAAU,KAAK,GAAG,CAAC;AAAA,4BACnBA,EAAU,KAAK,GAAG,CAAC;AAAA,qBAC1B,KAAK,YAAY;AAAA,sBAChB,KAAK,aAAa;AAAA,uBACjB,KAAK,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAO9B,KAAK,YACHF,IACAN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCAMmB,KAAK,cAAc;AAAA,gCACpB,KAAK,YAAY,KAAK,YAAY,KAAK,MAAM;AAAA;AAAA,mCAE1C,CAACS,MAAoB,KAAK,0BAA0BA,GAAG,CAAC,CAAC;AAAA,iCAC3D,KAAK,uBAAuB;AAAA,oCACzB,KAAK,uBAAuB;AAAA,qCAC3B,KAAK,uBAAuB;AAAA;AAAA,sBAE3C,KAAK,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCAMhB,KAAK,cAAc;AAAA,gCACpB,KAAK,YAAY,KAAK,YAAY,KAAK,MAAM;AAAA;AAAA,mCAE1C,CAACA,MAAoB,KAAK,0BAA0BA,GAAG,EAAE,CAAC;AAAA,iCAC5D,KAAK,uBAAuB;AAAA,oCACzB,KAAK,uBAAuB;AAAA,qCAC3B,KAAK,uBAAuB;AAAA;AAAA,sBAE3C,KAAK,sBAAsB;AAAA;AAAA;AAAA,eAGlC;AAAA;AAAA;AAAA,yCAG0B,KAAK,sBAAsB;AAAA,YACxD,KAAK,QACHT;AAAA,oEACsD,KAAK,QAAQ;AAAA,oBAC7D,KAAK,KAAK;AAAA;AAAA,kBAGhBM,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAMN,KAAK,WAAW;AAAA,oBACXL,KAAa,CAAC,KAAK,YAAY,CAAC,KAAK,YAAa;AAAA;AAAA,+CAEvB,KAAK,qBAAqB,IAAI,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,EAIxF;AACF;AAvnBa3B,EACK,SAAS,CAACoC,GAAavC,CAAsB;AADlDG,EAKJ,iBAAiB;AAkBxBqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAtBftC,EAuBX,WAAA,QAAA,CAAA;AAiBAqC,EAAA;AAAA,EAXCC,EAAS;AAAA,IACR,MAAM;AAAA,IACN,WAAW;AAAA,MACT,eAAe,CAACC,MAAuC;AACrD,YAAIA,MAAS,QAAQA,MAAS,GAAI,QAAO;AACzC,cAAMC,IAAI,OAAOD,CAAI;AACrB,eAAO,MAAMC,CAAC,IAAI,OAAOA;AAAA,MAC3B;AAAA,MACA,aAAa,CAACC,MAAuCA,MAAQ,OAAO,OAAO,OAAOA,CAAG;AAAA,IAAA;AAAA,EACvF,CACD;AAAA,GAvCUzC,EAwCX,WAAA,SAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA9C/BtC,EA+CX,WAAA,YAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GArD/BtC,EAsDX,WAAA,YAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA5D/BtC,EA6DX,WAAA,YAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnEftC,EAoEX,WAAA,OAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1EftC,EA2EX,WAAA,OAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjFftC,EAkFX,WAAA,QAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAxFftC,EAyFX,WAAA,SAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA/FftC,EAgGX,WAAA,SAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,aAAa;AAAA,GAtGvCtC,EAuGX,WAAA,YAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,WAAW;AAAA,GA7GrCtC,EA8GX,WAAA,QAAA,CAAA;AAOAqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,WAAW,cAAc;AAAA,GApHzCtC,EAqHX,WAAA,aAAA,CAAA;AAIAqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,mBAAmB;AAAA,GAxH7CtC,EAyHX,WAAA,kBAAA,CAAA;AAIAqC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,mBAAmB;AAAA,GA5H7CtC,EA6HX,WAAA,kBAAA,CAAA;AAMgBqC,EAAA;AAAA,EADfK,EAAM,eAAe;AAAA,GAlIX1C,EAmIK,WAAA,UAAA,CAAA;AAKCqC,EAAA;AAAA,EAAhB3B,EAAA;AAAM,GAxIIV,EAwIM,WAAA,iBAAA,CAAA;AAEAqC,EAAA;AAAA,EAAhB3B,EAAA;AAAM,GA1IIV,EA0IM,WAAA,iBAAA,CAAA;AAEAqC,EAAA;AAAA,EAAhB3B,EAAA;AAAM,GA5IIV,EA4IM,WAAA,gBAAA,CAAA;AA5INA,IAANqC,EAAA;AAAA,EADNM,EAAc,iBAAiB;AAAA,GACnB3C,CAAA;"}
|