@fusion.dev/helix-core 0.143.0 → 0.144.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +9098 -3887
- package/dist/controllers/aria-forward-controller/aria-forward-controller.d.ts +10 -0
- package/dist/controllers/aria-forward-controller/aria-forward-controller.js +5 -0
- package/dist/controllers/chart-pointer-controller/chart-pointer-controller.d.ts +89 -0
- package/dist/controllers/chart-pointer-controller/chart-pointer-controller.js +102 -1
- package/dist/controllers/chart-pointer-controller/reading-step.d.ts +57 -0
- package/dist/controllers/chart-pointer-controller/reading-step.js +45 -0
- package/dist/controllers/copy-controller/copy-controller.d.ts +11 -6
- package/dist/controllers/copy-controller/copy-controller.js +11 -9
- package/dist/controllers/delay-controller/delay-controller.d.ts +50 -0
- package/dist/controllers/delay-controller/delay-controller.js +54 -0
- package/dist/controllers/focus-scope-controller/focus-scope-controller.d.ts +56 -0
- package/dist/controllers/focus-scope-controller/focus-scope-controller.js +71 -0
- package/dist/controllers/open-phase-controller/open-phase-controller.d.ts +49 -0
- package/dist/controllers/open-phase-controller/open-phase-controller.js +41 -0
- package/dist/controllers/source-controller/source-controller.d.ts +16 -0
- package/dist/controllers/source-controller/source-controller.js +44 -1
- package/dist/controllers/status-controller/status-controller.d.ts +47 -0
- package/dist/controllers/status-controller/status-controller.js +34 -0
- package/dist/controllers/swipe-controller/swipe-controller.d.ts +61 -0
- package/dist/controllers/swipe-controller/swipe-controller.js +106 -0
- package/dist/events/events.d.ts +35 -0
- package/dist/events/events.js +12 -0
- package/dist/index.d.ts +28 -8
- package/dist/index.js +27 -7
- package/dist/mixins/mixin-chart-source/mixin-chart-source.d.ts +7 -2
- package/dist/mixins/mixin-chart-source/mixin-chart-source.js +5 -1
- package/dist/mixins/mixin-controller-checked/mixin-controller-checked.d.ts +10 -0
- package/dist/mixins/mixin-controller-checked/mixin-controller-checked.js +9 -0
- package/dist/mixins/mixin-dismissible/mixin-dismissible.d.ts +2 -0
- package/dist/mixins/mixin-dismissible/mixin-dismissible.js +7 -3
- package/dist/mixins/mixin-field/mixin-field.d.ts +2 -0
- package/dist/mixins/mixin-field/mixin-field.js +8 -0
- package/dist/mixins/mixin-picker-editing/mixin-picker-editing.d.ts +16 -6
- package/dist/mixins/mixin-picker-editing/mixin-picker-editing.js +19 -1
- package/dist/mixins/mixin-picker-field/mixin-picker-field.d.ts +5 -4
- package/dist/mixins/mixin-picker-field/mixin-picker-field.js +12 -1
- package/dist/mixins/mixin-segmented-field/mixin-segmented-field.d.ts +67 -0
- package/dist/mixins/mixin-segmented-field/mixin-segmented-field.js +243 -0
- package/dist/utils/arrow/arrow.d.ts +15 -0
- package/dist/utils/arrow/arrow.js +2 -0
- package/dist/utils/audit-name/audit-name.d.ts +28 -0
- package/dist/utils/audit-name/audit-name.js +95 -0
- package/dist/utils/calendar/calendar.d.ts +117 -0
- package/dist/utils/calendar/calendar.js +96 -0
- package/dist/utils/chord/chord.d.ts +43 -0
- package/dist/utils/chord/chord.js +53 -0
- package/dist/utils/clock/clock.d.ts +87 -0
- package/dist/utils/clock/clock.js +68 -0
- package/dist/utils/color-name/color-name.d.ts +28 -0
- package/dist/utils/color-name/color-name.js +150 -0
- package/dist/utils/count-label/count-label.d.ts +13 -0
- package/dist/utils/count-label/count-label.js +5 -0
- package/dist/utils/css-color/css-color.d.ts +12 -0
- package/dist/utils/css-color/css-color.js +2 -2
- package/dist/utils/date-segments/date-segments.d.ts +122 -0
- package/dist/utils/date-segments/date-segments.js +206 -0
- package/dist/utils/draw-dismiss/draw-dismiss.d.ts +30 -0
- package/dist/utils/draw-dismiss/draw-dismiss.js +16 -0
- package/dist/utils/draw-tooltip/draw-tooltip.d.ts +15 -21
- package/dist/utils/draw-tooltip/draw-tooltip.js +11 -5
- package/dist/utils/draw-tooltip/spoken-reading.d.ts +10 -0
- package/dist/utils/draw-tooltip/spoken-reading.js +10 -0
- package/dist/utils/follow-link/follow-link.d.ts +46 -0
- package/dist/utils/follow-link/follow-link.js +37 -0
- package/dist/utils/heading-in/heading-in.d.ts +19 -0
- package/dist/utils/heading-in/heading-in.js +14 -0
- package/dist/utils/number-format/number-format.d.ts +23 -0
- package/dist/utils/number-format/number-format.js +55 -0
- package/dist/utils/platform/platform.d.ts +23 -0
- package/dist/utils/platform/platform.js +11 -0
- package/dist/utils/read-color/read-color.d.ts +14 -0
- package/dist/utils/read-color/read-color.js +13 -0
- package/dist/utils/read-series/read-series.d.ts +6 -0
- package/dist/utils/read-series/read-series.js +1 -0
- package/dist/utils/reflect-elements/reflect-elements.d.ts +37 -0
- package/dist/utils/reflect-elements/reflect-elements.js +40 -0
- package/dist/utils/relative-time/relative-time.d.ts +13 -1
- package/dist/utils/relative-time/relative-time.js +7 -4
- package/dist/utils/report-runtime/report-runtime.d.ts +2 -0
- package/dist/utils/roving-stop/roving-stop.d.ts +20 -0
- package/dist/utils/roving-stop/roving-stop.js +3 -0
- package/dist/utils/swipe/swipe.d.ts +63 -0
- package/dist/utils/swipe/swipe.js +48 -0
- package/dist/utils/tab-stops/tab-stops.d.ts +16 -0
- package/dist/utils/tab-stops/tab-stops.js +22 -0
- package/dist/utils/value-as/value-as.d.ts +20 -0
- package/dist/utils/value-as/value-as.js +16 -0
- package/dist/utils/write-time/write-time.d.ts +11 -1
- package/dist/utils/write-time/write-time.js +7 -7
- package/dist/utils/written-list/written-list.d.ts +18 -0
- package/dist/utils/written-list/written-list.js +8 -0
- package/dist/version.d.ts +1 -1
- package/dist/version.js +1 -1
- package/package.json +4 -4
package/dist/index.d.ts
CHANGED
|
@@ -4,25 +4,30 @@ export { ChartPointerController, type ChartPointerHost, } from './controllers/ch
|
|
|
4
4
|
export { CommandController, type CommandOptions, HelixFallbackCommandEvent, supportsInvokers, } from './controllers/command-controller/command-controller.js';
|
|
5
5
|
export { CopyController, type CopyOptions, } from './controllers/copy-controller/copy-controller.js';
|
|
6
6
|
export { activeCue, adoptTrack, type Caption, CueController, captionsAmong, captionTracks, showCaption, } from './controllers/cue-controller/cue-controller.js';
|
|
7
|
+
export { DelayController, type DelayOptions, } from './controllers/delay-controller/delay-controller.js';
|
|
7
8
|
export { DisabledCascadeController, type DisabledCascadeOptions, } from './controllers/disabled-cascade-controller/disabled-cascade-controller.js';
|
|
8
9
|
export { DismissController, type DismissOptions, } from './controllers/dismiss-controller/dismiss-controller.js';
|
|
9
10
|
export { DrilldownController, type DrilldownOptions, } from './controllers/drilldown-controller/drilldown-controller.js';
|
|
10
11
|
export { FloatingController, type FloatingOptions, type Placement, type Side, } from './controllers/floating-controller/floating-controller.js';
|
|
12
|
+
export { controlsIn, FocusScopeController, type FocusScopeOptions, } from './controllers/focus-scope-controller/focus-scope-controller.js';
|
|
11
13
|
export { FullscreenController } from './controllers/fullscreen-controller/fullscreen-controller.js';
|
|
12
14
|
export { HostClickController } from './controllers/host-click-controller/host-click-controller.js';
|
|
13
15
|
export { IdleController } from './controllers/idle-controller/idle-controller.js';
|
|
14
16
|
export { IndicatorController, type IndicatorOptions, } from './controllers/indicator-controller/indicator-controller.js';
|
|
15
17
|
export { KeyboardNavigationController, type KeyboardNavigationOptions, type NavigableItem, Typeahead, typesCharacter, } from './controllers/keyboard-navigation-controller/keyboard-navigation-controller.js';
|
|
16
18
|
export { MediaSessionController, type SessionHandlers, SKIP_SECONDS, } from './controllers/media-session-controller/media-session-controller.js';
|
|
19
|
+
export { animationsSettled, type OpenPhase, OpenPhaseController, type OpenPhaseOptions, } from './controllers/open-phase-controller/open-phase-controller.js';
|
|
17
20
|
export { MAX_FRAME_STEP, PaintGateController, type PaintGateOptions, } from './controllers/paint-gate-controller/paint-gate-controller.js';
|
|
18
21
|
export { PlacementController } from './controllers/placement-controller/placement-controller.js';
|
|
19
22
|
export { PopoverController, type PopoverOptions, } from './controllers/popover-controller/popover-controller.js';
|
|
20
23
|
export { RemotePlaybackController, type RemoteReport, } from './controllers/remote-playback-controller/remote-playback-controller.js';
|
|
21
24
|
export { SourceController, type SourceHost, } from './controllers/source-controller/source-controller.js';
|
|
25
|
+
export { drawStatus, type SayOptions, StatusController, } from './controllers/status-controller/status-controller.js';
|
|
26
|
+
export { SwipeController, type SwipeOptions, } from './controllers/swipe-controller/swipe-controller.js';
|
|
22
27
|
export { type TokenColor, TokenColorController, } from './controllers/token-color-controller/token-color-controller.js';
|
|
23
28
|
export { type Rendered, VirtualizeController, type VirtualizeOptions, type Window as VirtualizeWindow, } from './controllers/virtualize-controller/virtualize-controller.js';
|
|
24
29
|
export { eventsForTag, registerElementEvents } from './events/element-events.js';
|
|
25
|
-
export { type CanvasView, type CaretDetail, type ChangeDetail, type CompleteDetail, type ConnectDetail, type ConsoleDetail, type CopyDetail, type CreateDetail, type DismissDetail, type FacetDetail, type FilterDetail, type GraphFilterDetail, type GraphLayoutDetail, type GraphPartChangeDetail, type GraphSignalDetail, HelixActivateEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPinEvent, HelixPreviousEvent, HelixReadEvent, HelixReconnectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixTourAskEvent, type MapClusterDetail, type MapPanDetail, type MapPartChangeDetail, type MapRotateDetail, type MapTiltDetail, type MapZoomDetail, type MoveDetail, type NavigateDetail, type OpenDetail, type ReadDetail, type ReconnectDetail, type RelabelDetail, type RemoveDetail, type ResizeDetail, type ScrolledDetail, type SelectDetail, type SendDetail, type ShortcutDetail, type SkipDetail, type SortDetail, type ToggleDetail, type ViewportPanDetail, type ViewportZoomDetail, } from './events/events.js';
|
|
30
|
+
export { type CanvasView, type CaretDetail, type ChangeDetail, type CompleteDetail, type ConnectDetail, type ConsoleDetail, type CopyDetail, type CreateDetail, type DismissDetail, type FacetDetail, type FilterDetail, type GraphFilterDetail, type GraphLayoutDetail, type GraphPartChangeDetail, type GraphSignalDetail, HelixActivateEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPinEvent, HelixPreviousEvent, HelixReadEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixTourAskEvent, type MapClusterDetail, type MapPanDetail, type MapPartChangeDetail, type MapRotateDetail, type MapTiltDetail, type MapZoomDetail, type MoveDetail, type NavigateDetail, type OpenDetail, type ReadDetail, type ReconnectDetail, type Refusal, type RefusedFile, type RejectDetail, type RelabelDetail, type RemoveDetail, type ResizeDetail, type ScrolledDetail, type SelectDetail, type SendDetail, type ShortcutDetail, type SkipDetail, type SortDetail, type ToggleDetail, type ViewportPanDetail, type ViewportZoomDetail, } from './events/events.js';
|
|
26
31
|
export { HelixElement, whenHydrated } from './helix-element/helix-element.js';
|
|
27
32
|
export { HelixFormElement } from './helix-form-element/helix-form-element.js';
|
|
28
33
|
export { MixinChartSource, type MixinChartSourceInterface, PALETTE, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesNames, } from './mixins/mixin-chart-source/mixin-chart-source.js';
|
|
@@ -35,22 +40,32 @@ export { type DismissibleElement, MixinDismissible, } from './mixins/mixin-dismi
|
|
|
35
40
|
export { MixinField, type MixinFieldInterface } from './mixins/mixin-field/mixin-field.js';
|
|
36
41
|
export { MixinPickerEditing, type MixinPickerEditingInterface, } from './mixins/mixin-picker-editing/mixin-picker-editing.js';
|
|
37
42
|
export { MixinPickerField, type MixinPickerFieldInterface, } from './mixins/mixin-picker-field/mixin-picker-field.js';
|
|
43
|
+
export { MixinSegmentedField, type MixinSegmentedFieldInterface, } from './mixins/mixin-segmented-field/mixin-segmented-field.js';
|
|
38
44
|
export { MixinSelectableItem, type MixinSelectableItemInterface, } from './mixins/mixin-selectable-item/mixin-selectable-item.js';
|
|
39
45
|
export { MixinTokens, type MixinTokensInterface } from './mixins/mixin-tokens/mixin-tokens.js';
|
|
40
46
|
export { MixinViewport, type ViewportControlsPlacement, type ViewportElement, type ViewportGestureLabels, type ViewportGestureMode, type ViewportGestures, type ViewportWay, } from './mixins/mixin-viewport/mixin-viewport.js';
|
|
41
47
|
export { anchorElement } from './utils/anchor-element/anchor-element.js';
|
|
48
|
+
export { arrowReach, sideOf } from './utils/arrow/arrow.js';
|
|
49
|
+
export { addDays, addMonths, type Barring, barredBy, type CalendarView, localToday, monthOf, monthOut, type PeriodCell, type PeriodPage, periodCells, periodKey, periodMove, sameMonth, weekStartOf, YEARS_SHOWN, yearOut, yearPageOf, } from './utils/calendar/calendar.js';
|
|
42
50
|
export { capturePointer } from './utils/capture-pointer/capture-pointer.js';
|
|
51
|
+
export { ariaChord, type ChordPress, chordParts, matchesChord, printableChord, } from './utils/chord/chord.js';
|
|
52
|
+
export { clockLocale, dayPeriod, type HourCycle, isTwelveHour, nearestTime, offeredTimes, type TimeFault, type TimeRules, timeBarred, timeFault, wheelParts, wholeHour, } from './utils/clock/clock.js';
|
|
43
53
|
export { closestInstance } from './utils/closest-instance/closest-instance.js';
|
|
54
|
+
export { type ColorWords, colorName, hueName } from './utils/color-name/color-name.js';
|
|
55
|
+
export { countLabel } from './utils/count-label/count-label.js';
|
|
44
56
|
export { createSheet } from './utils/create-sheet/create-sheet.js';
|
|
45
|
-
export { type Color, type ColorFormat, formatColor, parseColor, toCss, } from './utils/css-color/css-color.js';
|
|
57
|
+
export { type Color, type ColorFormat, formatColor, parseColor, toCss, toHsl, toRgb, } from './utils/css-color/css-color.js';
|
|
46
58
|
export { customElement, definedTags, duplicateRegistrations, } from './utils/custom-element/custom-element.js';
|
|
59
|
+
export { type DrawDismissOptions, drawDismiss, drawDismissGlyph, } from './utils/draw-dismiss/draw-dismiss.js';
|
|
47
60
|
export { type DrawIconOptions, drawIcon } from './utils/draw-icon/draw-icon.js';
|
|
48
61
|
export { CHART_PLOT, drawTooltip } from './utils/draw-tooltip/draw-tooltip.js';
|
|
49
62
|
export { elapsedTime } from './utils/elapsed-time/elapsed-time.js';
|
|
50
63
|
export { type ElementByIdOptions, elementById, searchableById, } from './utils/element-by-id/element-by-id.js';
|
|
51
64
|
export { fillTemplate } from './utils/fill-template/fill-template.js';
|
|
52
65
|
export { deepActiveElement, deepContains, focusableElements, } from './utils/focusable-elements/focusable-elements.js';
|
|
66
|
+
export { afterLinkFollowed, followLink, type LinkModifiers, type LinkTarget, } from './utils/follow-link/follow-link.js';
|
|
53
67
|
export { formatNumbers } from './utils/format-numbers/format-numbers.js';
|
|
68
|
+
export { headingIn, headingsIn } from './utils/heading-in/heading-in.js';
|
|
54
69
|
export { type HostAria, hostAria } from './utils/host-aria/host-aria.js';
|
|
55
70
|
export { type DisableableItem, forgetDisabled, inheritDisabled, } from './utils/inherit-disabled/inherit-disabled.js';
|
|
56
71
|
export { inlineStep } from './utils/inline-step/inline-step.js';
|
|
@@ -59,10 +74,13 @@ export { keyClaimed } from './utils/key-claimed/key-claimed.js';
|
|
|
59
74
|
export { type Curve, linePath, type Point } from './utils/line-path/line-path.js';
|
|
60
75
|
export { markRegion, type RegionOptions } from './utils/mark-region/mark-region.js';
|
|
61
76
|
export { copiesOf, type MediaCopy, sameCopies, } from './utils/media-copy/media-copy.js';
|
|
77
|
+
export { formatNumber, parseNumber } from './utils/number-format/number-format.js';
|
|
62
78
|
export { onUnlessFalse } from './utils/on-unless-false/on-unless-false.js';
|
|
63
|
-
export {
|
|
64
|
-
export {
|
|
65
|
-
export { type
|
|
79
|
+
export { appleTouch, onApple, type Platform } from './utils/platform/platform.js';
|
|
80
|
+
export { type ColorBytes, readColor, rgbOf } from './utils/read-color/read-color.js';
|
|
81
|
+
export { byRow, type Row, type RowCell, readRows, readSeries, type Series, type SeriesPoint, seriesKey, unbroken, } from './utils/read-series/read-series.js';
|
|
82
|
+
export { type ElementsProperty, linkDescription, reflectElements, unlinkDescription, } from './utils/reflect-elements/reflect-elements.js';
|
|
83
|
+
export { type Relative, type RelativeOptions, relativeTime, } from './utils/relative-time/relative-time.js';
|
|
66
84
|
export { measuring, RENDER_SLOT, reportRender } from './utils/report-render/report-render.js';
|
|
67
85
|
export { RUNTIME_LOG, RUNTIME_SLOT, type RuntimeEvent, type RuntimeKind, reportRuntime, } from './utils/report-runtime/report-runtime.js';
|
|
68
86
|
export { noteVersion, reportUsage, USAGE_SLOT, VERSIONS_SLOT, } from './utils/report-usage/report-usage.js';
|
|
@@ -70,6 +88,7 @@ export { reportValues } from './utils/report-values/report-values.js';
|
|
|
70
88
|
export { type ChangeRequestOptions, requestChange, } from './utils/request-change/request-change.js';
|
|
71
89
|
export { type ActivatableItem, resolveActiveItem, } from './utils/resolve-active-item/resolve-active-item.js';
|
|
72
90
|
export { holdCaret, restoreValue } from './utils/restore-value/restore-value.js';
|
|
91
|
+
export { type RovingOptions, rovingStop } from './utils/roving-stop/roving-stop.js';
|
|
73
92
|
export { extent, linear, type Scale } from './utils/scale/scale.js';
|
|
74
93
|
export { ticks } from './utils/scale/ticks.js';
|
|
75
94
|
export { type ScrollItemOptions, scrollItemIntoView, } from './utils/scroll-item-into-view/scroll-item-into-view.js';
|
|
@@ -77,11 +96,12 @@ export { lockScroll, scrollHolders, unlockScroll } from './utils/scroll-lock/scr
|
|
|
77
96
|
export { slotFilled } from './utils/slot-filled/slot-filled.js';
|
|
78
97
|
export { slottedWords } from './utils/slotted-words/slotted-words.js';
|
|
79
98
|
export { splitValues } from './utils/split-values/split-values.js';
|
|
99
|
+
export { edgeOffset, FLING, parseSnapPoints, type SwipeAxis, type SwipeEdge, type SwipeRelease, settleSwipe, snapTravel, swipeAxis, swipeEdge, swipeStep, towardEdge, } from './utils/swipe/swipe.js';
|
|
80
100
|
export { tellDisclosure } from './utils/tell-disclosure/tell-disclosure.js';
|
|
81
101
|
export { subscribe } from './utils/ticker/ticker.js';
|
|
82
102
|
export { type HelixStatusTone, TONE_MARKS, type ToneMark, toneMark, } from './utils/tone-marks/tone-marks.js';
|
|
83
|
-
export { dateAsValue, isDateValue, isTimeValue, minutesAsValue, numberAsValue, timeAsValue, valueAsDate, valueAsMinutes, valueAsNumber, valueAsTime, } from './utils/value-as/value-as.js';
|
|
103
|
+
export { dateAsValue, isClockValue, isDateValue, isTimeValue, minutesAsValue, numberAsValue, secondsAsValue, timeAsValue, valueAsDate, valueAsMinutes, valueAsNumber, valueAsSeconds, valueAsTime, } from './utils/value-as/value-as.js';
|
|
84
104
|
export { watchTheme } from './utils/watch-theme/watch-theme.js';
|
|
85
|
-
export { writeTime } from './utils/write-time/write-time.js';
|
|
86
|
-
export { writtenList, writtenNumbers } from './utils/written-list/written-list.js';
|
|
105
|
+
export { writeClock, writeTime } from './utils/write-time/write-time.js';
|
|
106
|
+
export { commaList, toggleValue, writtenList, writtenNumbers, } from './utils/written-list/written-list.js';
|
|
87
107
|
export { VERSION } from './version.js';
|
package/dist/index.js
CHANGED
|
@@ -4,25 +4,30 @@ export { ChartPointerController, } from './controllers/chart-pointer-controller/
|
|
|
4
4
|
export { CommandController, HelixFallbackCommandEvent, supportsInvokers, } from './controllers/command-controller/command-controller.js';
|
|
5
5
|
export { CopyController, } from './controllers/copy-controller/copy-controller.js';
|
|
6
6
|
export { activeCue, adoptTrack, CueController, captionsAmong, captionTracks, showCaption, } from './controllers/cue-controller/cue-controller.js';
|
|
7
|
+
export { DelayController, } from './controllers/delay-controller/delay-controller.js';
|
|
7
8
|
export { DisabledCascadeController, } from './controllers/disabled-cascade-controller/disabled-cascade-controller.js';
|
|
8
9
|
export { DismissController, } from './controllers/dismiss-controller/dismiss-controller.js';
|
|
9
10
|
export { DrilldownController, } from './controllers/drilldown-controller/drilldown-controller.js';
|
|
10
11
|
export { FloatingController, } from './controllers/floating-controller/floating-controller.js';
|
|
12
|
+
export { controlsIn, FocusScopeController, } from './controllers/focus-scope-controller/focus-scope-controller.js';
|
|
11
13
|
export { FullscreenController } from './controllers/fullscreen-controller/fullscreen-controller.js';
|
|
12
14
|
export { HostClickController } from './controllers/host-click-controller/host-click-controller.js';
|
|
13
15
|
export { IdleController } from './controllers/idle-controller/idle-controller.js';
|
|
14
16
|
export { IndicatorController, } from './controllers/indicator-controller/indicator-controller.js';
|
|
15
17
|
export { KeyboardNavigationController, Typeahead, typesCharacter, } from './controllers/keyboard-navigation-controller/keyboard-navigation-controller.js';
|
|
16
18
|
export { MediaSessionController, SKIP_SECONDS, } from './controllers/media-session-controller/media-session-controller.js';
|
|
19
|
+
export { animationsSettled, OpenPhaseController, } from './controllers/open-phase-controller/open-phase-controller.js';
|
|
17
20
|
export { MAX_FRAME_STEP, PaintGateController, } from './controllers/paint-gate-controller/paint-gate-controller.js';
|
|
18
21
|
export { PlacementController } from './controllers/placement-controller/placement-controller.js';
|
|
19
22
|
export { PopoverController, } from './controllers/popover-controller/popover-controller.js';
|
|
20
23
|
export { RemotePlaybackController, } from './controllers/remote-playback-controller/remote-playback-controller.js';
|
|
21
24
|
export { SourceController, } from './controllers/source-controller/source-controller.js';
|
|
25
|
+
export { drawStatus, StatusController, } from './controllers/status-controller/status-controller.js';
|
|
26
|
+
export { SwipeController, } from './controllers/swipe-controller/swipe-controller.js';
|
|
22
27
|
export { TokenColorController, } from './controllers/token-color-controller/token-color-controller.js';
|
|
23
28
|
export { VirtualizeController, } from './controllers/virtualize-controller/virtualize-controller.js';
|
|
24
29
|
export { eventsForTag, registerElementEvents } from './events/element-events.js';
|
|
25
|
-
export { HelixActivateEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPinEvent, HelixPreviousEvent, HelixReadEvent, HelixReconnectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixTourAskEvent, } from './events/events.js';
|
|
30
|
+
export { HelixActivateEvent, HelixBeforeActivateEvent, HelixBeforeChangeEvent, HelixBeforeCloseEvent, HelixBeforeCollapseEvent, HelixBeforeEditEvent, HelixBeforeMoveEvent, HelixBeforeOpenEvent, HelixBeforePanelResizeEvent, HelixBeforePinEvent, HelixBeforeReconnectEvent, HelixBeforeRelabelEvent, HelixBeforeResizeEvent, HelixBeforeSplitEvent, HelixBeforeToggleEvent, HelixCanvasEditEvent, HelixCanvasPanEvent, HelixCanvasViewEvent, HelixCanvasZoomEvent, HelixCaretEvent, HelixCollapseEvent, HelixCompleteEvent, HelixConnectEvent, HelixConsoleEvent, HelixCopyEvent, HelixCreateEvent, HelixDismissEvent, HelixFacetEvent, HelixFilterEvent, HelixFilteredEvent, HelixGraphFilterEvent, HelixGraphLayoutEvent, HelixGraphPanEvent, HelixGraphPartChangeEvent, HelixGraphReadyEvent, HelixGraphSignalEvent, HelixGraphZoomEvent, HelixHistoryEvent, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapReadyEvent, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, HelixMoveEvent, HelixNavigateEvent, HelixNextEvent, HelixPinEvent, HelixPreviousEvent, HelixReadEvent, HelixReconnectEvent, HelixRejectEvent, HelixRelabelEvent, HelixRemoveEvent, HelixReorderEvent, HelixReorderedEvent, HelixResizedEvent, HelixResizeEvent, HelixSampleEndEvent, HelixSampleStartEvent, HelixScrolledEvent, HelixSelectEvent, HelixSelectedEvent, HelixSendEvent, HelixShortcutEvent, HelixSortEvent, HelixSortedEvent, HelixTourAskEvent, } from './events/events.js';
|
|
26
31
|
export { HelixElement, whenHydrated } from './helix-element/helix-element.js';
|
|
27
32
|
export { HelixFormElement } from './helix-form-element/helix-form-element.js';
|
|
28
33
|
export { MixinChartSource, PALETTE, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesNames, } from './mixins/mixin-chart-source/mixin-chart-source.js';
|
|
@@ -35,22 +40,32 @@ export { MixinDismissible, } from './mixins/mixin-dismissible/mixin-dismissible.
|
|
|
35
40
|
export { MixinField } from './mixins/mixin-field/mixin-field.js';
|
|
36
41
|
export { MixinPickerEditing, } from './mixins/mixin-picker-editing/mixin-picker-editing.js';
|
|
37
42
|
export { MixinPickerField, } from './mixins/mixin-picker-field/mixin-picker-field.js';
|
|
43
|
+
export { MixinSegmentedField, } from './mixins/mixin-segmented-field/mixin-segmented-field.js';
|
|
38
44
|
export { MixinSelectableItem, } from './mixins/mixin-selectable-item/mixin-selectable-item.js';
|
|
39
45
|
export { MixinTokens } from './mixins/mixin-tokens/mixin-tokens.js';
|
|
40
46
|
export { MixinViewport, } from './mixins/mixin-viewport/mixin-viewport.js';
|
|
41
47
|
export { anchorElement } from './utils/anchor-element/anchor-element.js';
|
|
48
|
+
export { arrowReach, sideOf } from './utils/arrow/arrow.js';
|
|
49
|
+
export { addDays, addMonths, barredBy, localToday, monthOf, monthOut, periodCells, periodKey, periodMove, sameMonth, weekStartOf, YEARS_SHOWN, yearOut, yearPageOf, } from './utils/calendar/calendar.js';
|
|
42
50
|
export { capturePointer } from './utils/capture-pointer/capture-pointer.js';
|
|
51
|
+
export { ariaChord, chordParts, matchesChord, printableChord, } from './utils/chord/chord.js';
|
|
52
|
+
export { clockLocale, dayPeriod, isTwelveHour, nearestTime, offeredTimes, timeBarred, timeFault, wheelParts, wholeHour, } from './utils/clock/clock.js';
|
|
43
53
|
export { closestInstance } from './utils/closest-instance/closest-instance.js';
|
|
54
|
+
export { colorName, hueName } from './utils/color-name/color-name.js';
|
|
55
|
+
export { countLabel } from './utils/count-label/count-label.js';
|
|
44
56
|
export { createSheet } from './utils/create-sheet/create-sheet.js';
|
|
45
|
-
export { formatColor, parseColor, toCss, } from './utils/css-color/css-color.js';
|
|
57
|
+
export { formatColor, parseColor, toCss, toHsl, toRgb, } from './utils/css-color/css-color.js';
|
|
46
58
|
export { customElement, definedTags, duplicateRegistrations, } from './utils/custom-element/custom-element.js';
|
|
59
|
+
export { drawDismiss, drawDismissGlyph, } from './utils/draw-dismiss/draw-dismiss.js';
|
|
47
60
|
export { drawIcon } from './utils/draw-icon/draw-icon.js';
|
|
48
61
|
export { CHART_PLOT, drawTooltip } from './utils/draw-tooltip/draw-tooltip.js';
|
|
49
62
|
export { elapsedTime } from './utils/elapsed-time/elapsed-time.js';
|
|
50
63
|
export { elementById, searchableById, } from './utils/element-by-id/element-by-id.js';
|
|
51
64
|
export { fillTemplate } from './utils/fill-template/fill-template.js';
|
|
52
65
|
export { deepActiveElement, deepContains, focusableElements, } from './utils/focusable-elements/focusable-elements.js';
|
|
66
|
+
export { afterLinkFollowed, followLink, } from './utils/follow-link/follow-link.js';
|
|
53
67
|
export { formatNumbers } from './utils/format-numbers/format-numbers.js';
|
|
68
|
+
export { headingIn, headingsIn } from './utils/heading-in/heading-in.js';
|
|
54
69
|
export { hostAria } from './utils/host-aria/host-aria.js';
|
|
55
70
|
export { forgetDisabled, inheritDisabled, } from './utils/inherit-disabled/inherit-disabled.js';
|
|
56
71
|
export { inlineStep } from './utils/inline-step/inline-step.js';
|
|
@@ -59,9 +74,12 @@ export { keyClaimed } from './utils/key-claimed/key-claimed.js';
|
|
|
59
74
|
export { linePath } from './utils/line-path/line-path.js';
|
|
60
75
|
export { markRegion } from './utils/mark-region/mark-region.js';
|
|
61
76
|
export { copiesOf, sameCopies, } from './utils/media-copy/media-copy.js';
|
|
77
|
+
export { formatNumber, parseNumber } from './utils/number-format/number-format.js';
|
|
62
78
|
export { onUnlessFalse } from './utils/on-unless-false/on-unless-false.js';
|
|
63
|
-
export {
|
|
64
|
-
export {
|
|
79
|
+
export { appleTouch, onApple } from './utils/platform/platform.js';
|
|
80
|
+
export { readColor, rgbOf } from './utils/read-color/read-color.js';
|
|
81
|
+
export { byRow, readRows, readSeries, seriesKey, unbroken, } from './utils/read-series/read-series.js';
|
|
82
|
+
export { linkDescription, reflectElements, unlinkDescription, } from './utils/reflect-elements/reflect-elements.js';
|
|
65
83
|
export { relativeTime, } from './utils/relative-time/relative-time.js';
|
|
66
84
|
export { measuring, RENDER_SLOT, reportRender } from './utils/report-render/report-render.js';
|
|
67
85
|
export { RUNTIME_LOG, RUNTIME_SLOT, reportRuntime, } from './utils/report-runtime/report-runtime.js';
|
|
@@ -70,6 +88,7 @@ export { reportValues } from './utils/report-values/report-values.js';
|
|
|
70
88
|
export { requestChange, } from './utils/request-change/request-change.js';
|
|
71
89
|
export { resolveActiveItem, } from './utils/resolve-active-item/resolve-active-item.js';
|
|
72
90
|
export { holdCaret, restoreValue } from './utils/restore-value/restore-value.js';
|
|
91
|
+
export { rovingStop } from './utils/roving-stop/roving-stop.js';
|
|
73
92
|
export { extent, linear } from './utils/scale/scale.js';
|
|
74
93
|
export { ticks } from './utils/scale/ticks.js';
|
|
75
94
|
export { scrollItemIntoView, } from './utils/scroll-item-into-view/scroll-item-into-view.js';
|
|
@@ -77,11 +96,12 @@ export { lockScroll, scrollHolders, unlockScroll } from './utils/scroll-lock/scr
|
|
|
77
96
|
export { slotFilled } from './utils/slot-filled/slot-filled.js';
|
|
78
97
|
export { slottedWords } from './utils/slotted-words/slotted-words.js';
|
|
79
98
|
export { splitValues } from './utils/split-values/split-values.js';
|
|
99
|
+
export { edgeOffset, FLING, parseSnapPoints, settleSwipe, snapTravel, swipeAxis, swipeEdge, swipeStep, towardEdge, } from './utils/swipe/swipe.js';
|
|
80
100
|
export { tellDisclosure } from './utils/tell-disclosure/tell-disclosure.js';
|
|
81
101
|
export { subscribe } from './utils/ticker/ticker.js';
|
|
82
102
|
export { TONE_MARKS, toneMark, } from './utils/tone-marks/tone-marks.js';
|
|
83
|
-
export { dateAsValue, isDateValue, isTimeValue, minutesAsValue, numberAsValue, timeAsValue, valueAsDate, valueAsMinutes, valueAsNumber, valueAsTime, } from './utils/value-as/value-as.js';
|
|
103
|
+
export { dateAsValue, isClockValue, isDateValue, isTimeValue, minutesAsValue, numberAsValue, secondsAsValue, timeAsValue, valueAsDate, valueAsMinutes, valueAsNumber, valueAsSeconds, valueAsTime, } from './utils/value-as/value-as.js';
|
|
84
104
|
export { watchTheme } from './utils/watch-theme/watch-theme.js';
|
|
85
|
-
export { writeTime } from './utils/write-time/write-time.js';
|
|
86
|
-
export { writtenList, writtenNumbers } from './utils/written-list/written-list.js';
|
|
105
|
+
export { writeClock, writeTime } from './utils/write-time/write-time.js';
|
|
106
|
+
export { commaList, toggleValue, writtenList, writtenNumbers, } from './utils/written-list/written-list.js';
|
|
87
107
|
export { VERSION } from './version.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ChartPointerController } from '../../controllers/chart-pointer-controller/chart-pointer-controller.js';
|
|
2
2
|
import type { HelixElement } from '../../helix-element/helix-element.js';
|
|
3
|
-
import type
|
|
3
|
+
import { type Row, type Series } from '../../utils/read-series/read-series.js';
|
|
4
4
|
type Constructor<T> = new (...args: any[]) => T;
|
|
5
5
|
/**
|
|
6
6
|
* How many colors the series palette has, and so where it starts over.
|
|
@@ -45,7 +45,7 @@ export declare const PLOT_HEIGHT = 100;
|
|
|
45
45
|
* nothing to read off the page that says why.
|
|
46
46
|
*
|
|
47
47
|
* `writtenList` is the split, and carries the argument for accepting a comma.
|
|
48
|
-
* What this adds is
|
|
48
|
+
* What this adds is `seriesKey`, the headings being matched
|
|
49
49
|
* case-insensitively.
|
|
50
50
|
*/
|
|
51
51
|
export declare const seriesNames: (list: string | undefined) => string[];
|
|
@@ -158,6 +158,11 @@ export declare class MixinChartSourceInterface {
|
|
|
158
158
|
* when no series was read from that column.
|
|
159
159
|
*/
|
|
160
160
|
seriesOf(cell: number): number | undefined;
|
|
161
|
+
/**
|
|
162
|
+
* Whether the series of this name is drawn, which it is unless a legend
|
|
163
|
+
* reading the same table hid it.
|
|
164
|
+
*/
|
|
165
|
+
showsSeries(name: string): boolean;
|
|
161
166
|
/**
|
|
162
167
|
* The number of readings, which the pointer position maps onto.
|
|
163
168
|
*/
|
|
@@ -7,12 +7,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
7
7
|
import { property } from 'lit/decorators.js';
|
|
8
8
|
import { ChartPointerController } from '../../controllers/chart-pointer-controller/chart-pointer-controller.js';
|
|
9
9
|
import { SourceController } from '../../controllers/source-controller/source-controller.js';
|
|
10
|
+
import { seriesKey } from '../../utils/read-series/read-series.js';
|
|
10
11
|
import { writtenList } from '../../utils/written-list/written-list.js';
|
|
11
12
|
export const PALETTE = 24;
|
|
12
13
|
export const seriesIndex = (depth) => (depth % PALETTE) + 1;
|
|
13
14
|
export const PLOT_WIDTH = 100;
|
|
14
15
|
export const PLOT_HEIGHT = 100;
|
|
15
|
-
export const seriesNames = (list) => writtenList(list).map(
|
|
16
|
+
export const seriesNames = (list) => writtenList(list).map(seriesKey);
|
|
16
17
|
export const MixinChartSource = (Base) => {
|
|
17
18
|
class ChartSourceElement extends Base {
|
|
18
19
|
constructor() {
|
|
@@ -47,6 +48,9 @@ export const MixinChartSource = (Base) => {
|
|
|
47
48
|
const depth = this.plottedColumns.indexOf(cell);
|
|
48
49
|
return depth < 0 ? undefined : seriesIndex(depth);
|
|
49
50
|
}
|
|
51
|
+
showsSeries(name) {
|
|
52
|
+
return !this.source.hidden.has(seriesKey(name));
|
|
53
|
+
}
|
|
50
54
|
get readings() {
|
|
51
55
|
return this.sourceRows.length;
|
|
52
56
|
}
|
|
@@ -20,6 +20,16 @@ export declare class MixinControllerCheckedInterface {
|
|
|
20
20
|
* Whether the control starts checked. A form reset returns it to this state.
|
|
21
21
|
*/
|
|
22
22
|
defaultChecked: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Whether a reader can see and focus the control and cannot change it. A
|
|
25
|
+
* read-only control still submits its value.
|
|
26
|
+
*/
|
|
27
|
+
readOnly: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Refuses a press on the inner control while the control is read-only,
|
|
30
|
+
* bound to its `click`.
|
|
31
|
+
*/
|
|
32
|
+
protected readonly holdReadOnly: (event: Event) => void;
|
|
23
33
|
/**
|
|
24
34
|
* Requests a change to `checked`, and returns whether it was applied.
|
|
25
35
|
*
|
|
@@ -13,6 +13,12 @@ export const MixinControllerChecked = (Base) => {
|
|
|
13
13
|
super(...arguments);
|
|
14
14
|
this.defaultChecked = false;
|
|
15
15
|
this.checkedState = undefined;
|
|
16
|
+
this.readOnly = false;
|
|
17
|
+
this.holdReadOnly = (event) => {
|
|
18
|
+
if (this.readOnly) {
|
|
19
|
+
event.preventDefault();
|
|
20
|
+
}
|
|
21
|
+
};
|
|
16
22
|
}
|
|
17
23
|
get checked() {
|
|
18
24
|
return this.checkedState ?? this.defaultChecked;
|
|
@@ -63,5 +69,8 @@ export const MixinControllerChecked = (Base) => {
|
|
|
63
69
|
__decorate([
|
|
64
70
|
property({ attribute: 'default-checked', type: Boolean })
|
|
65
71
|
], CheckedElement.prototype, "defaultChecked", void 0);
|
|
72
|
+
__decorate([
|
|
73
|
+
property({ attribute: 'readonly', reflect: true, type: Boolean })
|
|
74
|
+
], CheckedElement.prototype, "readOnly", void 0);
|
|
66
75
|
return CheckedElement;
|
|
67
76
|
};
|
|
@@ -13,6 +13,8 @@ export declare class DismissibleElement {
|
|
|
13
13
|
dismiss(): boolean;
|
|
14
14
|
/** The event, built but not dispatched, for a caller that owns the timing. */
|
|
15
15
|
protected dismissEvent(): HelixDismissEvent;
|
|
16
|
+
/** Where focus lands when a neighbor that held it is removed: the dismiss control. */
|
|
17
|
+
protected get returnFocusTo(): HTMLElement | null;
|
|
16
18
|
}
|
|
17
19
|
/**
|
|
18
20
|
* Grafts `dismissible`, its label, and the event that says so.
|
|
@@ -21,6 +21,9 @@ export const MixinDismissible = (Base) => {
|
|
|
21
21
|
.join('');
|
|
22
22
|
return new HelixDismissEvent({ label: own.trim() });
|
|
23
23
|
}
|
|
24
|
+
get returnFocusTo() {
|
|
25
|
+
return this.shadowRoot?.querySelector('[part~="dismiss"]') ?? null;
|
|
26
|
+
}
|
|
24
27
|
dismiss() {
|
|
25
28
|
const neighbors = deepContains(this, deepActiveElement()) ? this.neighbors() : [];
|
|
26
29
|
const event = this.dismissEvent();
|
|
@@ -53,11 +56,12 @@ export const MixinDismissible = (Base) => {
|
|
|
53
56
|
return;
|
|
54
57
|
}
|
|
55
58
|
for (const neighbor of neighbors) {
|
|
56
|
-
const control = neighbor.isConnected &&
|
|
57
|
-
neighbor.shadowRoot?.querySelector('[part~="dismiss"]');
|
|
59
|
+
const control = neighbor.isConnected && neighbor.returnFocusTo;
|
|
58
60
|
if (control) {
|
|
59
61
|
control.focus();
|
|
60
|
-
|
|
62
|
+
if (deepContains(neighbor, deepActiveElement())) {
|
|
63
|
+
return;
|
|
64
|
+
}
|
|
61
65
|
}
|
|
62
66
|
}
|
|
63
67
|
};
|
|
@@ -20,6 +20,8 @@ export declare class MixinFieldInterface {
|
|
|
20
20
|
protected labelId: string;
|
|
21
21
|
/** Whether a label is drawn at all, in either shape. */
|
|
22
22
|
protected get labeled(): boolean;
|
|
23
|
+
/** The element in the shadow root a reader lands on and hears the name of. */
|
|
24
|
+
protected get namedControl(): HTMLElement | null;
|
|
23
25
|
/**
|
|
24
26
|
* Help text shown under the control. A validation message replaces it.
|
|
25
27
|
*
|
|
@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
6
6
|
};
|
|
7
7
|
import { html, nothing } from 'lit';
|
|
8
8
|
import { property, state } from 'lit/decorators.js';
|
|
9
|
+
import { auditName } from '../../utils/audit-name/audit-name.js';
|
|
9
10
|
import { hostAria } from '../../utils/host-aria/host-aria.js';
|
|
10
11
|
const HINT_ID = 'helix-hint';
|
|
11
12
|
const FEEDBACK_ID = 'helix-feedback';
|
|
@@ -36,6 +37,11 @@ export const MixinField = (Base) => {
|
|
|
36
37
|
this.touched = false;
|
|
37
38
|
this.shownFeedback = '';
|
|
38
39
|
}
|
|
40
|
+
get namedControl() {
|
|
41
|
+
return (this.renderRoot?.querySelector(`#${this.controlId}`) ??
|
|
42
|
+
this.renderRoot?.querySelector('input, button, select, textarea') ??
|
|
43
|
+
null);
|
|
44
|
+
}
|
|
39
45
|
get labeled() {
|
|
40
46
|
return (this.label !== '' ||
|
|
41
47
|
Boolean(this.getAttribute('aria-label')) ||
|
|
@@ -160,6 +166,8 @@ export const MixinField = (Base) => {
|
|
|
160
166
|
this.addEventListener('invalid', touch);
|
|
161
167
|
this.addEventListener('change', touch);
|
|
162
168
|
this.renderRoot.addEventListener('slotchange', this.noteSlotted);
|
|
169
|
+
auditName(this, () => this.namedControl, 'Give it a `label`, an `aria-label`, words in its label, or a `<label for>` that names it.', () => this.labeled ||
|
|
170
|
+
[...this.children].some((child) => child.slot === 'label' && (child.textContent ?? '').trim() !== ''));
|
|
163
171
|
}
|
|
164
172
|
}
|
|
165
173
|
__decorate([
|
|
@@ -19,7 +19,10 @@ export declare class MixinPickerEditingInterface {
|
|
|
19
19
|
protected editing: boolean;
|
|
20
20
|
/** The caret has left, so the field renders again. */
|
|
21
21
|
protected readonly handleBlur: () => void;
|
|
22
|
-
/**
|
|
22
|
+
/**
|
|
23
|
+
* A press that focuses the field opens the picker, and only from outside the
|
|
24
|
+
* element. Focus that arrives by Tab or from a script opens nothing.
|
|
25
|
+
*/
|
|
23
26
|
protected readonly handleFocus: (event: FocusEvent) => void;
|
|
24
27
|
/**
|
|
25
28
|
* Whether the value is locked. A read-only control still submits its value.
|
|
@@ -37,8 +40,8 @@ export declare class MixinPickerEditingInterface {
|
|
|
37
40
|
requestOpen(next: boolean): boolean;
|
|
38
41
|
}
|
|
39
42
|
/**
|
|
40
|
-
* Grafts the typing half of a picker field: it opens
|
|
41
|
-
* value while the caret is in it, and refuses while read-only.
|
|
43
|
+
* Grafts the typing half of a picker field: a press into it opens the picker,
|
|
44
|
+
* it holds the value while the caret is in it, and it refuses while read-only.
|
|
42
45
|
*
|
|
43
46
|
* **Over `MixinPickerField` and not part of it, because Color Input takes the
|
|
44
47
|
* one and not the other.** Date Input and Time Input show a rendering while
|
|
@@ -46,9 +49,16 @@ export declare class MixinPickerEditingInterface {
|
|
|
46
49
|
* while somebody is, because `Intl` formats and does not parse and a document
|
|
47
50
|
* being edited must not be a rendering of something else. That split needs to
|
|
48
51
|
* know when the caret is in the field, which is `editing`; and a reader who
|
|
49
|
-
*
|
|
50
|
-
* neither: `#ff0000` is what is typed and what is shown, and a reader who
|
|
51
|
-
* the hex pastes it and never opens anything.
|
|
52
|
+
* presses into such a field is choosing, so the press opens the picker. A color
|
|
53
|
+
* has neither: `#ff0000` is what is typed and what is shown, and a reader who
|
|
54
|
+
* has the hex pastes it and never opens anything.
|
|
55
|
+
*
|
|
56
|
+
* **Tab into the field opens nothing.** It did, and a reader moving through a
|
|
57
|
+
* form with a screen reader heard a dialog appear at every date and every
|
|
58
|
+
* time they passed. React Aria's DatePicker opens on its button alone and the
|
|
59
|
+
* APG date picker combobox opens on its button or Down; here the trigger and
|
|
60
|
+
* ArrowDown open it from the keyboard, and a press into the text opens it for
|
|
61
|
+
* a pointer, which is where the reader has already shown what they came for. `readOnly` comes along here for
|
|
52
62
|
* the two that take this mixin; Color Input declares its own, the same
|
|
53
63
|
* property refusing the same two requests.
|
|
54
64
|
*/
|
|
@@ -14,10 +14,16 @@ export const MixinPickerEditing = (Base) => {
|
|
|
14
14
|
this.handleBlur = () => {
|
|
15
15
|
this.editing = false;
|
|
16
16
|
};
|
|
17
|
+
this.pressing = false;
|
|
18
|
+
this.handlePress = (event) => {
|
|
19
|
+
this.pressing = event.type === 'pointerdown' && event.composedPath()[0] === this.control;
|
|
20
|
+
};
|
|
17
21
|
this.handleFocus = (event) => {
|
|
18
22
|
this.editing = !this.returning;
|
|
23
|
+
const pressed = this.pressing;
|
|
24
|
+
this.pressing = false;
|
|
19
25
|
const from = event.relatedTarget;
|
|
20
|
-
if (this.open || this.isDisabled || this.returning) {
|
|
26
|
+
if (!pressed || this.open || this.isDisabled || this.returning) {
|
|
21
27
|
return;
|
|
22
28
|
}
|
|
23
29
|
if (from instanceof Node && this.renderRoot?.contains?.(from)) {
|
|
@@ -38,6 +44,18 @@ export const MixinPickerEditing = (Base) => {
|
|
|
38
44
|
}
|
|
39
45
|
return super.requestOpen(next);
|
|
40
46
|
}
|
|
47
|
+
connectedCallback() {
|
|
48
|
+
super.connectedCallback();
|
|
49
|
+
this.addEventListener('pointerdown', this.handlePress);
|
|
50
|
+
this.addEventListener('pointercancel', this.handlePress);
|
|
51
|
+
this.addEventListener('click', this.handlePress);
|
|
52
|
+
}
|
|
53
|
+
disconnectedCallback() {
|
|
54
|
+
super.disconnectedCallback();
|
|
55
|
+
this.removeEventListener('pointerdown', this.handlePress);
|
|
56
|
+
this.removeEventListener('pointercancel', this.handlePress);
|
|
57
|
+
this.removeEventListener('click', this.handlePress);
|
|
58
|
+
}
|
|
41
59
|
}
|
|
42
60
|
__decorate([
|
|
43
61
|
property({ attribute: 'readonly', reflect: true, type: Boolean })
|
|
@@ -125,10 +125,11 @@ export declare class MixinPickerFieldInterface {
|
|
|
125
125
|
* same way, and for the same reason: a mixin reads a part out of whatever host
|
|
126
126
|
* applies it.
|
|
127
127
|
*
|
|
128
|
-
* **Opening on
|
|
129
|
-
* are `MixinPickerEditing`'s, because Color Input takes
|
|
130
|
-
* and last: a hex is pasted and read at a glance, so its
|
|
131
|
-
* nor opens
|
|
128
|
+
* **Opening on a press into the text, `readOnly` and the idle rendering are
|
|
129
|
+
* not here.** They are `MixinPickerEditing`'s, because Color Input takes
|
|
130
|
+
* neither of the first and last: a hex is pasted and read at a glance, so its
|
|
131
|
+
* field neither renders nor opens when pressed. Color Input declares its own
|
|
132
|
+
* `readOnly`.
|
|
132
133
|
*
|
|
133
134
|
* **Three things the two typed families share stay with them.** `renderTrigger`
|
|
134
135
|
* differs only by its icon and would still be the wrong thing to lift: a part a
|
|
@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
7
7
|
import { property } from 'lit/decorators.js';
|
|
8
8
|
import { PopoverController } from '../../controllers/popover-controller/popover-controller.js';
|
|
9
9
|
import { reportValues } from '../../utils/report-values/report-values.js';
|
|
10
|
+
import { tabStops } from '../../utils/tab-stops/tab-stops.js';
|
|
10
11
|
export const MixinPickerField = (Base) => {
|
|
11
12
|
class PickerFieldElement extends Base {
|
|
12
13
|
constructor() {
|
|
@@ -51,13 +52,23 @@ export const MixinPickerField = (Base) => {
|
|
|
51
52
|
};
|
|
52
53
|
this.handleSurfaceKeydown = (event) => {
|
|
53
54
|
const surface = this.partNamed('surface');
|
|
54
|
-
if (event.key !== 'Escape' ||
|
|
55
|
+
if ((event.key !== 'Escape' && event.key !== 'Tab') ||
|
|
55
56
|
!this.open ||
|
|
56
57
|
event.defaultPrevented ||
|
|
57
58
|
!surface ||
|
|
58
59
|
!event.composedPath().includes(surface)) {
|
|
59
60
|
return;
|
|
60
61
|
}
|
|
62
|
+
if (event.key === 'Tab') {
|
|
63
|
+
const stops = tabStops(surface);
|
|
64
|
+
const at = event.composedPath()[0];
|
|
65
|
+
const edge = event.shiftKey ? stops[0] : stops.at(-1);
|
|
66
|
+
if (edge !== undefined && at === edge) {
|
|
67
|
+
event.preventDefault();
|
|
68
|
+
(event.shiftKey ? stops.at(-1) : stops[0])?.focus();
|
|
69
|
+
}
|
|
70
|
+
return;
|
|
71
|
+
}
|
|
61
72
|
event.stopPropagation();
|
|
62
73
|
event.preventDefault();
|
|
63
74
|
this.requestOpen(false);
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { type TemplateResult } from 'lit';
|
|
2
|
+
import type { HelixFormElement } from '../../helix-form-element/helix-form-element.js';
|
|
3
|
+
import { type SegmentedKind, type SegmentOptions } from '../../utils/date-segments/date-segments.js';
|
|
4
|
+
import type { MixinControllerOpenInterface } from '../mixin-controller-open/mixin-controller-open.js';
|
|
5
|
+
import type { MixinControllerValueInterface } from '../mixin-controller-value/mixin-controller-value.js';
|
|
6
|
+
import type { MixinFieldInterface } from '../mixin-field/mixin-field.js';
|
|
7
|
+
import type { MixinPickerFieldInterface } from '../mixin-picker-field/mixin-picker-field.js';
|
|
8
|
+
type Constructor<T> = new (...args: any[]) => T;
|
|
9
|
+
/** What this is applied over: a picker field, which `MixinPickerField` makes. */
|
|
10
|
+
type SegmentedBase = HelixFormElement & MixinControllerOpenInterface & MixinControllerValueInterface & MixinFieldInterface & MixinPickerFieldInterface;
|
|
11
|
+
/**
|
|
12
|
+
* The public surface `MixinSegmentedField` adds.
|
|
13
|
+
*
|
|
14
|
+
* Declared separately because TypeScript cannot emit declarations for an
|
|
15
|
+
* anonymous class that has private members (TS4094).
|
|
16
|
+
*/
|
|
17
|
+
export declare class MixinSegmentedFieldInterface {
|
|
18
|
+
/** What a screen reader hears for a segment with nothing in it. */
|
|
19
|
+
emptySegmentLabel: string;
|
|
20
|
+
/**
|
|
21
|
+
* Whether the field is a row of segments, one for each part of the date or
|
|
22
|
+
* time, in place of a line of text.
|
|
23
|
+
*/
|
|
24
|
+
segmented: boolean;
|
|
25
|
+
/** Whether the segments are drawn: `segmented`, where the family can hold them. */
|
|
26
|
+
protected get segmentsShown(): boolean;
|
|
27
|
+
/** The row of segments, the group a description is carried to, or `null` while none is drawn. */
|
|
28
|
+
protected get segmentGroup(): HTMLElement | null;
|
|
29
|
+
/** Whether this family can show segments in its current shape. */
|
|
30
|
+
protected get segmentable(): boolean;
|
|
31
|
+
/** A date or a time. */
|
|
32
|
+
protected get segmentedKind(): SegmentedKind;
|
|
33
|
+
/** The locale the segments are laid out and named in. */
|
|
34
|
+
protected get segmentLocale(): string;
|
|
35
|
+
/** The clock and the seconds a time is laid out with. */
|
|
36
|
+
protected get segmentOptions(): SegmentOptions;
|
|
37
|
+
/** The row of segments, in the locale's order, with what it writes between them. */
|
|
38
|
+
protected renderSegments(): TemplateResult;
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Grafts the segmented field React Aria's DateField and TimeField are, and Web
|
|
42
|
+
* Awesome's time input has, onto a picker field: one `spinbutton` for each part
|
|
43
|
+
* of the date or the time, in the order the locale writes them.
|
|
44
|
+
*
|
|
45
|
+
* **Typing into a text field asks the reader to know the format.** Date Input
|
|
46
|
+
* and Time Input read ISO, `2026-08-04` and `14:30`, because `Intl` formats and
|
|
47
|
+
* does not parse, and a reader in Germany who types `4.8.2026` is refused. A
|
|
48
|
+
* segment needs no format: the month is a month, set with digits or the arrow
|
|
49
|
+
* keys, and the layout puts it where the locale does, so the field reads
|
|
50
|
+
* `04.08.2026` in German and `08/04/2026` in English with nothing to parse.
|
|
51
|
+
*
|
|
52
|
+
* **What a segment does with a key**, which is React Aria's: digits fill it and
|
|
53
|
+
* move on once it cannot take another, Up and Down step it and wrap, Home and
|
|
54
|
+
* End go to its ends, Backspace and Delete empty it, Left and Right move between
|
|
55
|
+
* segments along the line of text, and Alt+Down opens the picker. Each segment
|
|
56
|
+
* is a tab stop, as each is in React Aria.
|
|
57
|
+
*
|
|
58
|
+
* **The value is whole or empty.** A date with no year is no date, so the value
|
|
59
|
+
* stays empty while any segment is, and the field reports `badInput` as a
|
|
60
|
+
* native date input does with a half-typed date. The arithmetic is
|
|
61
|
+
* `date-segments`, so this draws and listens and nothing else.
|
|
62
|
+
*
|
|
63
|
+
* **Opt-in, with `segmented`**, because the text field is what every example and
|
|
64
|
+
* every form already holds, and a row of segments draws differently.
|
|
65
|
+
*/
|
|
66
|
+
export declare const MixinSegmentedField: <T extends Constructor<SegmentedBase>>(Base: T) => Constructor<MixinSegmentedFieldInterface> & T;
|
|
67
|
+
export {};
|