@ixfx/components 0.6.2 → 0.7.1
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/bundle/index.d.ts +1918 -835
- package/bundle/index.d.ts.map +1 -1
- package/bundle/index.js +22137 -16840
- package/bundle/index.js.map +1 -1
- package/bundle/style.css +1 -1
- package/dist/ac-text.d.ts +1 -1
- package/dist/ac-text.js +3 -2
- package/dist/ac-text.js.map +1 -1
- package/dist/{ac-token-BAa6ke09.d.ts → ac-token--_vCHXWw.d.ts} +2 -2
- package/dist/{ac-token-BAa6ke09.d.ts.map → ac-token--_vCHXWw.d.ts.map} +1 -1
- package/dist/ac-token.d.ts +1 -1
- package/dist/ac-token.js +3 -2
- package/dist/ac-token.js.map +1 -1
- package/dist/{button-Bn0BuLpO.js → button-DsFbV4XD.js} +5 -4
- package/dist/button-DsFbV4XD.js.map +1 -0
- package/dist/button.d.ts.map +1 -1
- package/dist/button.js +1 -1
- package/dist/checkbox.js +1 -1
- package/dist/{colour-picker-0stHB90J.js → colour-picker-Ddsk-7E_.js} +4 -3
- package/dist/{colour-picker-0stHB90J.js.map → colour-picker-Ddsk-7E_.js.map} +1 -1
- package/dist/colour-picker.js +1 -1
- package/dist/crumbs.d.ts +1 -1
- package/dist/crumbs.js +4 -2
- package/dist/crumbs.js.map +1 -1
- package/dist/data-display.js +1 -1
- package/dist/{data-grid-C8qIo1-u.d.ts → data-grid-Bh4YrQGK.d.ts} +2 -2
- package/dist/{data-grid-C8qIo1-u.d.ts.map → data-grid-Bh4YrQGK.d.ts.map} +1 -1
- package/dist/data-grid.d.ts +1 -1
- package/dist/data-grid.js +4 -2
- package/dist/data-grid.js.map +1 -1
- package/dist/{defaults-BCiDhZbF.js → defaults-BJwDsMH4.js} +27 -20
- package/dist/defaults-BJwDsMH4.js.map +1 -0
- package/dist/editable-label-rzXkjf1H.d.ts +75 -0
- package/dist/editable-label-rzXkjf1H.d.ts.map +1 -0
- package/dist/editable-label.d.ts +2 -75
- package/dist/editable-label.js +2 -1
- package/dist/editable-label.js.map +1 -1
- package/dist/{fallbacks-DEE1nCTt.js → fallbacks-DNI9xt0F.js} +2 -2
- package/dist/{fallbacks-DEE1nCTt.js.map → fallbacks-DNI9xt0F.js.map} +1 -1
- package/dist/{grouped-item-lister-_pMDwIo1.d.ts → grouped-item-lister-DnWB-eFT.d.ts} +2 -2
- package/dist/{grouped-item-lister-_pMDwIo1.d.ts.map → grouped-item-lister-DnWB-eFT.d.ts.map} +1 -1
- package/dist/grouped-item-lister.d.ts +1 -1
- package/dist/{hex-editor-Bk6rxhfg.js → hex-editor-BiRfwTz1.js} +2 -2
- package/dist/{hex-editor-Bk6rxhfg.js.map → hex-editor-BiRfwTz1.js.map} +1 -1
- package/dist/hex.js +1 -1
- package/dist/{icon-DpA9x2Ve.d.ts → icon-CDGprSdE.d.ts} +1 -12
- package/dist/icon-CDGprSdE.d.ts.map +1 -0
- package/dist/{icons-Bm2ByQ3s.js → icon-DcEEGQa_.js} +38 -12
- package/dist/icon-DcEEGQa_.js.map +1 -0
- package/dist/icons.d.ts +3 -3
- package/dist/icons.js +9 -3
- package/dist/icons.js.map +1 -0
- package/dist/{index-CKtLhgYj.d.ts → index-9AhaHIT2.d.ts} +3 -3
- package/dist/{index-CKtLhgYj.d.ts.map → index-9AhaHIT2.d.ts.map} +1 -1
- package/dist/index-CG2vIgPv.d.ts +101 -0
- package/dist/index-CG2vIgPv.d.ts.map +1 -0
- package/dist/{index-BtGFYfaK.d.ts → index-CS9yM8L-.d.ts} +14 -4
- package/dist/index-CS9yM8L-.d.ts.map +1 -0
- package/dist/index.d.ts +861 -71
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4257 -931
- package/dist/index.js.map +1 -1
- package/dist/interaction-D5XdKzbR.js +2 -0
- package/dist/labelled-radial-input.js +2 -1
- package/dist/labelled-radial-input.js.map +1 -1
- package/dist/labelled-slider-input-DzigjMwP.js +808 -0
- package/dist/labelled-slider-input-DzigjMwP.js.map +1 -0
- package/dist/labelled-slider-input.d.ts +2 -0
- package/dist/labelled-slider-input.js +2 -0
- package/dist/{types-DlVNJez_.d.ts → list-selection-types-DSuRNWpx.d.ts} +10 -2
- package/dist/list-selection-types-DSuRNWpx.d.ts.map +1 -0
- package/dist/menu-CXDFJxNm.js +825 -0
- package/dist/menu-CXDFJxNm.js.map +1 -0
- package/dist/{menu-item-Bs2MYyHq.d.ts → menu-item-CZi9vy5O.d.ts} +4 -2
- package/dist/menu-item-CZi9vy5O.d.ts.map +1 -0
- package/dist/menu-item-D2S4i8u1.js +809 -0
- package/dist/menu-item-D2S4i8u1.js.map +1 -0
- package/dist/menu.d.ts +2 -2
- package/dist/menu.js +2 -1
- package/dist/miller.d.ts +1 -1
- package/dist/miller.js +3 -2
- package/dist/miller.js.map +1 -1
- package/dist/narrowed-text.js +4 -2
- package/dist/narrowed-text.js.map +1 -1
- package/dist/notification-pill-DyZydXoZ.d.ts.map +1 -1
- package/dist/notifier.js +4 -3
- package/dist/notifier.js.map +1 -1
- package/dist/panel.d.ts +13 -13
- package/dist/panel.d.ts.map +1 -1
- package/dist/panel.js +37 -253
- package/dist/panel.js.map +1 -1
- package/dist/plots.js +1 -1
- package/dist/polar-pad.js +1 -1
- package/dist/{radial-input-Dk8Wydp5.js → radial-input-Dp5qz0ly.js} +2 -2
- package/dist/{radial-input-Dk8Wydp5.js.map → radial-input-Dp5qz0ly.js.map} +1 -1
- package/dist/radial-input.js +1 -1
- package/dist/range-input.js +1 -1
- package/dist/range.js +1 -1
- package/dist/registry-BEtb8_wB.js +46 -0
- package/dist/registry-BEtb8_wB.js.map +1 -0
- package/dist/select-horiz.js +3 -2
- package/dist/select-horiz.js.map +1 -1
- package/dist/{slider-input-XppH3vcy.d.ts → slider-input-BfRUW2ZB.d.ts} +16 -3
- package/dist/slider-input-BfRUW2ZB.d.ts.map +1 -0
- package/dist/{slider-input-CT4gcF-o.js → slider-input-De4eoT11.js} +382 -67
- package/dist/slider-input-De4eoT11.js.map +1 -0
- package/dist/slider-input.d.ts +1 -1
- package/dist/slider-input.js +1 -1
- package/dist/snackbar.js +1 -1
- package/dist/split-layout-BFSbUZQv.js +969 -0
- package/dist/split-layout-BFSbUZQv.js.map +1 -0
- package/dist/split-layout-JK3xWVX2.d.ts +179 -0
- package/dist/split-layout-JK3xWVX2.d.ts.map +1 -0
- package/dist/split-layout.d.ts +2 -60
- package/dist/split-layout.js +1 -617
- package/dist/style.css +1 -1
- package/dist/swipe.js +1 -1
- package/dist/{tab-list-D_1cYhB_.d.ts → tab-list-CGyPt07Z.d.ts} +10 -2
- package/dist/tab-list-CGyPt07Z.d.ts.map +1 -0
- package/dist/tabs.d.ts +1 -1
- package/dist/tabs.js +128 -27
- package/dist/tabs.js.map +1 -1
- package/dist/{tickled-controller-BtevrRLV.d.ts → tickled-controller-CRzdIEjJ.d.ts} +7 -1
- package/dist/tickled-controller-CRzdIEjJ.d.ts.map +1 -0
- package/dist/{tickled-controller-DkAU-0qL.js → tickled-controller-h9GmJ_bU.js} +8 -2
- package/dist/tickled-controller-h9GmJ_bU.js.map +1 -0
- package/dist/titlebar-Bj5pfdw_.d.ts +50 -0
- package/dist/titlebar-Bj5pfdw_.d.ts.map +1 -0
- package/dist/titlebar.d.ts +2 -0
- package/dist/titlebar.js +324 -0
- package/dist/titlebar.js.map +1 -0
- package/dist/tooltip-BlvBUQxx.d.ts.map +1 -1
- package/dist/{tree-BO6BXI2b.js → tree-Ch4W8qXQ.js} +4 -3
- package/dist/{tree-BO6BXI2b.js.map → tree-Ch4W8qXQ.js.map} +1 -1
- package/dist/tree.d.ts +1 -1
- package/dist/tree.js +1 -1
- package/dist/vertical-list-ClnqTkF3.js +814 -0
- package/dist/vertical-list-ClnqTkF3.js.map +1 -0
- package/dist/vertical-list.d.ts +8 -9
- package/dist/vertical-list.d.ts.map +1 -1
- package/dist/vertical-list.js +1 -736
- package/dist/{xy-axis-B6yMjckW.js → xy-axis-DWizs0bt.js} +109 -3
- package/dist/xy-axis-DWizs0bt.js.map +1 -0
- package/dist/xy-pad.js +1 -1
- package/docs-user/README.md +5 -0
- package/docs-user/detail-list.md +398 -0
- package/docs-user/dock.md +461 -0
- package/docs-user/icons.md +4 -0
- package/docs-user/index.json +28 -3
- package/docs-user/labelled-slider-input.md +198 -0
- package/docs-user/llms.txt +6 -1
- package/docs-user/panel.md +20 -1
- package/docs-user/slider-input.md +55 -15
- package/docs-user/split-layout.md +136 -170
- package/docs-user/tabs.md +54 -0
- package/docs-user/titlebar.md +102 -0
- package/docs-user/toolbar.md +95 -22
- package/docs-user/twosplit-layout.md +254 -0
- package/docs-user/user-catalog.md +8 -1
- package/docs-user/user-theming.md +109 -0
- package/llms.txt +6 -1
- package/package.json +1 -2
- package/dist/button-Bn0BuLpO.js.map +0 -1
- package/dist/defaults-BCiDhZbF.js.map +0 -1
- package/dist/editable-label.d.ts.map +0 -1
- package/dist/icon-DpA9x2Ve.d.ts.map +0 -1
- package/dist/icons-Bm2ByQ3s.js.map +0 -1
- package/dist/index-BtGFYfaK.d.ts.map +0 -1
- package/dist/menu-DIfU70AA.js +0 -1609
- package/dist/menu-DIfU70AA.js.map +0 -1
- package/dist/menu-item-Bs2MYyHq.d.ts.map +0 -1
- package/dist/slider-input-CT4gcF-o.js.map +0 -1
- package/dist/slider-input-XppH3vcy.d.ts.map +0 -1
- package/dist/split-layout.d.ts.map +0 -1
- package/dist/split-layout.js.map +0 -1
- package/dist/tab-list-D_1cYhB_.d.ts.map +0 -1
- package/dist/tickled-controller-BtevrRLV.d.ts.map +0 -1
- package/dist/tickled-controller-DkAU-0qL.js.map +0 -1
- package/dist/types-DlVNJez_.d.ts.map +0 -1
- package/dist/vertical-list.js.map +0 -1
- package/dist/xy-axis-B6yMjckW.js.map +0 -1
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import { CSSResult, LitElement, PropertyValues } from "lit";
|
|
2
|
+
//#region src/editable-label/editable-label.d.ts
|
|
3
|
+
type EditableMode = `label` | `editor`;
|
|
4
|
+
type EntryMode = `free` | `text` | `number` | `percent`;
|
|
5
|
+
type DisplayTextLogic = `hidden` | `show` | `override` | `transient`;
|
|
6
|
+
type EditableLabelChangeDetail = {
|
|
7
|
+
readonly value: string;
|
|
8
|
+
};
|
|
9
|
+
type EditableLabelChangeEvent = CustomEvent<EditableLabelChangeDetail>;
|
|
10
|
+
declare class EditableLabel extends LitElement {
|
|
11
|
+
mode: EditableMode;
|
|
12
|
+
entryMode: EntryMode;
|
|
13
|
+
value: string;
|
|
14
|
+
disabled: boolean;
|
|
15
|
+
placeholder: string;
|
|
16
|
+
/** Override displayed text. Bypasses formatter and value. When editing, shows raw value. */
|
|
17
|
+
displayText?: string;
|
|
18
|
+
/**
|
|
19
|
+
* Controls when displayText is shown:
|
|
20
|
+
* - 'hidden' (default): never use displayText
|
|
21
|
+
* - 'show': show displayText instead of formatted value, but hide while editing; revert after disappearDelay
|
|
22
|
+
* - 'override': always show displayText, even when editing
|
|
23
|
+
* - 'transient': show displayText by default, switch to formatted value after appearDelay on hover/interaction; revert after disappearDelay
|
|
24
|
+
*/
|
|
25
|
+
displayTextLogic: DisplayTextLogic;
|
|
26
|
+
/** Delay before showing value in transient mode (ms). Default: 50 */
|
|
27
|
+
appearDelay: number;
|
|
28
|
+
/** Delay before reverting to displayText after editing ends (ms). Default: 1000 */
|
|
29
|
+
disappearDelay: number;
|
|
30
|
+
/** Override commit validation. Return true to accept, false to reject (reverts). */
|
|
31
|
+
validator?: (value: string) => boolean;
|
|
32
|
+
/** Transform the committed value for display. Does not affect the stored value. */
|
|
33
|
+
formatter?: (value: string) => string;
|
|
34
|
+
protected _editing: boolean;
|
|
35
|
+
protected get _contentEl(): HTMLElement | undefined;
|
|
36
|
+
/** Snapshot of value taken when editing begins; restored on cancel. */
|
|
37
|
+
protected _prevValue: string;
|
|
38
|
+
connectedCallback(): void;
|
|
39
|
+
disconnectedCallback(): void;
|
|
40
|
+
protected _hovering: boolean;
|
|
41
|
+
protected _transientShowingValue: boolean;
|
|
42
|
+
protected _transientTimer: number | undefined;
|
|
43
|
+
protected _showModeWaitingToHide: boolean;
|
|
44
|
+
protected _clearTransientTimer(): void;
|
|
45
|
+
private _onMouseEnter;
|
|
46
|
+
private _onMouseLeave;
|
|
47
|
+
protected _startTransientRevertTimer(): void;
|
|
48
|
+
protected _requestDisplayUpdate(): void;
|
|
49
|
+
/** Called by subclasses when user interacts (drag, keyboard, etc) to temporarily show value in transient mode */
|
|
50
|
+
protected _onUserInteraction(): void;
|
|
51
|
+
protected _handleClick: () => void;
|
|
52
|
+
protected _handleFocus: () => void;
|
|
53
|
+
protected _handleBlur: () => void;
|
|
54
|
+
protected _handleKeydown: (e: KeyboardEvent) => void;
|
|
55
|
+
protected _handleBeforeInput: (e: InputEvent) => void;
|
|
56
|
+
protected _handleInput: () => void;
|
|
57
|
+
protected _beginEdit(): void;
|
|
58
|
+
protected _tryCommit(): void;
|
|
59
|
+
protected _cancelEdit(): void;
|
|
60
|
+
protected _getDisplayText(): string;
|
|
61
|
+
protected _shouldUseDisplayText(): boolean;
|
|
62
|
+
protected _isAllowedInput(char: string): boolean;
|
|
63
|
+
private _defaultValidator;
|
|
64
|
+
render(): import("lit").TemplateResult<1>;
|
|
65
|
+
updated(changed: PropertyValues): void;
|
|
66
|
+
static styles: CSSResult[];
|
|
67
|
+
}
|
|
68
|
+
declare global {
|
|
69
|
+
interface HTMLElementTagNameMap {
|
|
70
|
+
'ixfx-editable-label': EditableLabel;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
//#endregion
|
|
74
|
+
export { EditableMode as a, EditableLabelChangeEvent as i, EditableLabel as n, EntryMode as o, EditableLabelChangeDetail as r, DisplayTextLogic as t };
|
|
75
|
+
//# sourceMappingURL=editable-label-rzXkjf1H.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"editable-label-rzXkjf1H.d.ts","names":[],"sources":["../src/editable-label/editable-label.ts"],"mappings":";;KAoCY;KACA;KACA;KAEA;WACD;;KAEC,2BAA2B,YAAY;cAGtC,sBAAsB;EACJ,MAAM;EACmB,WAAW;EACpC;EACe;EAChC;;EAG6B;;;;;;;;EASM,kBAAkB;;EAGV;;EAGG;;EAG1B,aAAa;;EAGb,aAAa;YAE1B;gBAEL,cAAc;;YAKlB;EAED;EAMA;YAQC;YACA;YACA;YACA;YAEA;UAOF;UAWA;YAOE;YAUA;;YAUA;YAWA;YAMA;YAMA;YAKA,iBAAkB,GAAG;YAgBrB,qBAAsB,GAAG;YAQzB;YAeA;YAMA;YAsBA;YAMA;YAcA;YAoBA,gBAAgB;UASlB;EAWC,wBAAM;EAgBN,QAAQ,SAAS;SA0BV,QAAQ;;QA8FlB;YACI;IACR,uBAAuB"}
|
package/dist/editable-label.d.ts
CHANGED
|
@@ -1,75 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
type EditableMode = `label` | `editor`;
|
|
4
|
-
type EntryMode = `free` | `text` | `number` | `percent`;
|
|
5
|
-
type DisplayTextLogic = `hidden` | `show` | `override` | `transient`;
|
|
6
|
-
type EditableLabelChangeDetail = {
|
|
7
|
-
readonly value: string;
|
|
8
|
-
};
|
|
9
|
-
type EditableLabelChangeEvent = CustomEvent<EditableLabelChangeDetail>;
|
|
10
|
-
declare class EditableLabel extends LitElement {
|
|
11
|
-
mode: EditableMode;
|
|
12
|
-
entryMode: EntryMode;
|
|
13
|
-
value: string;
|
|
14
|
-
disabled: boolean;
|
|
15
|
-
placeholder: string;
|
|
16
|
-
/** Override displayed text. Bypasses formatter and value. When editing, shows raw value. */
|
|
17
|
-
displayText?: string;
|
|
18
|
-
/**
|
|
19
|
-
* Controls when displayText is shown:
|
|
20
|
-
* - 'hidden' (default): never use displayText
|
|
21
|
-
* - 'show': show displayText instead of formatted value, but hide while editing; revert after disappearDelay
|
|
22
|
-
* - 'override': always show displayText, even when editing
|
|
23
|
-
* - 'transient': show displayText by default, switch to formatted value after appearDelay on hover/interaction; revert after disappearDelay
|
|
24
|
-
*/
|
|
25
|
-
displayTextLogic: DisplayTextLogic;
|
|
26
|
-
/** Delay before showing value in transient mode (ms). Default: 50 */
|
|
27
|
-
appearDelay: number;
|
|
28
|
-
/** Delay before reverting to displayText after editing ends (ms). Default: 1000 */
|
|
29
|
-
disappearDelay: number;
|
|
30
|
-
/** Override commit validation. Return true to accept, false to reject (reverts). */
|
|
31
|
-
validator?: (value: string) => boolean;
|
|
32
|
-
/** Transform the committed value for display. Does not affect the stored value. */
|
|
33
|
-
formatter?: (value: string) => string;
|
|
34
|
-
protected _editing: boolean;
|
|
35
|
-
protected get _contentEl(): HTMLElement | undefined;
|
|
36
|
-
/** Snapshot of value taken when editing begins; restored on cancel. */
|
|
37
|
-
protected _prevValue: string;
|
|
38
|
-
connectedCallback(): void;
|
|
39
|
-
disconnectedCallback(): void;
|
|
40
|
-
protected _hovering: boolean;
|
|
41
|
-
protected _transientShowingValue: boolean;
|
|
42
|
-
protected _transientTimer: number | undefined;
|
|
43
|
-
protected _showModeWaitingToHide: boolean;
|
|
44
|
-
protected _clearTransientTimer(): void;
|
|
45
|
-
private _onMouseEnter;
|
|
46
|
-
private _onMouseLeave;
|
|
47
|
-
protected _startTransientRevertTimer(): void;
|
|
48
|
-
protected _requestDisplayUpdate(): void;
|
|
49
|
-
/** Called by subclasses when user interacts (drag, keyboard, etc) to temporarily show value in transient mode */
|
|
50
|
-
protected _onUserInteraction(): void;
|
|
51
|
-
protected _handleClick: () => void;
|
|
52
|
-
protected _handleFocus: () => void;
|
|
53
|
-
protected _handleBlur: () => void;
|
|
54
|
-
protected _handleKeydown: (e: KeyboardEvent) => void;
|
|
55
|
-
protected _handleBeforeInput: (e: InputEvent) => void;
|
|
56
|
-
protected _handleInput: () => void;
|
|
57
|
-
protected _beginEdit(): void;
|
|
58
|
-
protected _tryCommit(): void;
|
|
59
|
-
protected _cancelEdit(): void;
|
|
60
|
-
protected _getDisplayText(): string;
|
|
61
|
-
protected _shouldUseDisplayText(): boolean;
|
|
62
|
-
protected _isAllowedInput(char: string): boolean;
|
|
63
|
-
private _defaultValidator;
|
|
64
|
-
render(): import("lit").TemplateResult<1>;
|
|
65
|
-
updated(changed: PropertyValues): void;
|
|
66
|
-
static styles: CSSResult[];
|
|
67
|
-
}
|
|
68
|
-
declare global {
|
|
69
|
-
interface HTMLElementTagNameMap {
|
|
70
|
-
'ixfx-editable-label': EditableLabel;
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
//#endregion
|
|
74
|
-
export { DisplayTextLogic, EditableLabel, EditableLabelChangeDetail, EditableLabelChangeEvent, EditableMode, EntryMode };
|
|
75
|
-
//# sourceMappingURL=editable-label.d.ts.map
|
|
1
|
+
import { a as EditableMode, i as EditableLabelChangeEvent, n as EditableLabel, o as EntryMode, r as EditableLabelChangeDetail, t as DisplayTextLogic } from "./editable-label-rzXkjf1H.js";
|
|
2
|
+
export { DisplayTextLogic, EditableLabel, EditableLabelChangeDetail, EditableLabelChangeEvent, EditableMode, EntryMode };
|
package/dist/editable-label.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { t as themeFallbacks } from "./fallbacks-
|
|
1
|
+
import { t as themeFallbacks } from "./fallbacks-DNI9xt0F.js";
|
|
2
2
|
import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
|
|
3
3
|
import { LitElement, css, html, nothing } from "lit";
|
|
4
4
|
import { property, state } from "lit/decorators.js";
|
|
@@ -201,6 +201,7 @@ let EditableLabel = class EditableLabel extends LitElement {
|
|
|
201
201
|
_selectAll(el);
|
|
202
202
|
}
|
|
203
203
|
}
|
|
204
|
+
if (changed.has(`displayTextLogic`) || changed.has(`displayText`) || changed.has(`formatter`) || changed.has(`value`)) this._requestDisplayUpdate();
|
|
204
205
|
}
|
|
205
206
|
static {
|
|
206
207
|
this.styles = [themeFallbacks, css`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"editable-label.js","names":["customElement"],"sources":["../src/editable-label/editable-label.ts"],"sourcesContent":["/**\n * <ixfx-editable-label> — inline editable text label.\n *\n * Two display modes:\n * label (default) — renders as plain text until clicked, then becomes an editable box.\n * editor — always renders as an editable box; becomes active on focus/click.\n *\n * Entry modes (filter characters as typed):\n * free (default) — no restrictions\n * text — alphabetical characters and spaces only\n * number — digits, decimal point, minus sign\n * percent — digits, decimal point, percent sign\n *\n * Properties (not attributes):\n * validator (value: string) => boolean — override commit validation; default uses entry-mode rules\n * formatter (value: string) => string — transform committed value for display\n *\n * Events:\n * input — CustomEvent<{ value: string }>, bubbles + composed; fired as value changes during editing\n * change — CustomEvent<{ value: string }>, bubbles + composed; fired when value is committed\n *\n * CSS variables:\n * --label-font-size defaults to var(--text-m, 12px)\n * --label-font-family defaults to var(--font-family, system-ui, sans-serif)\n * --label-color defaults to var(--surface-2-text)\n * --label-muted-color placeholder colour, defaults to var(--surface-muted-text)\n * --label-padding defaults to var(--space-xs, 3px) var(--space-s, 4px)\n * --label-radius defaults to var(--radius-s, 3px)\n * --label-align text alignment: left | center (default) | right\n */\nimport type { CSSResult, PropertyValues } from 'lit';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\nexport type EditableMode = `label` | `editor`;\nexport type EntryMode = `free` | `text` | `number` | `percent`;\nexport type DisplayTextLogic = `hidden` | `show` | `override` | `transient`;\n\nexport type EditableLabelChangeDetail = {\n readonly value: string;\n};\nexport type EditableLabelChangeEvent = CustomEvent<EditableLabelChangeDetail>;\n\n@customElement(`ixfx-editable-label`)\nexport class EditableLabel extends LitElement {\n @property({ reflect: true }) mode: EditableMode = `label`;\n @property({ attribute: `entry-mode`, reflect: true }) entryMode: EntryMode = `free`;\n @property({ reflect: true }) value = ``;\n @property({ type: Boolean, reflect: true }) disabled = false;\n @property() placeholder = ``;\n\n /** Override displayed text. Bypasses formatter and value. When editing, shows raw value. */\n @property({ attribute: `display-text` }) displayText?: string;\n\n /**\n * Controls when displayText is shown:\n * - 'hidden' (default): never use displayText\n * - 'show': show displayText instead of formatted value, but hide while editing; revert after disappearDelay\n * - 'override': always show displayText, even when editing\n * - 'transient': show displayText by default, switch to formatted value after appearDelay on hover/interaction; revert after disappearDelay\n */\n @property({ attribute: `display-text-logic` }) displayTextLogic: DisplayTextLogic = `hidden`;\n\n /** Delay before showing value in transient mode (ms). Default: 50 */\n @property({ type: Number, attribute: `appear-delay` }) appearDelay = 50;\n\n /** Delay before reverting to displayText after editing ends (ms). Default: 1000 */\n @property({ type: Number, attribute: `disappear-delay` }) disappearDelay = 1000;\n\n /** Override commit validation. Return true to accept, false to reject (reverts). */\n @property({ attribute: false }) validator?: (value: string) => boolean;\n\n /** Transform the committed value for display. Does not affect the stored value. */\n @property({ attribute: false }) formatter?: (value: string) => string;\n\n @state() protected _editing = false;\n\n protected get _contentEl(): HTMLElement | undefined {\n return this.renderRoot?.querySelector<HTMLElement>(`.content`) ?? undefined;\n }\n\n /** Snapshot of value taken when editing begins; restored on cancel. */\n protected _prevValue = ``;\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener(`mouseenter`, this._onMouseEnter);\n this.addEventListener(`mouseleave`, this._onMouseLeave);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener(`mouseenter`, this._onMouseEnter);\n this.removeEventListener(`mouseleave`, this._onMouseLeave);\n this._clearTransientTimer();\n }\n\n // ── Transient display state ─────────────────────────────────────────────────\n protected _hovering = false;\n protected _transientShowingValue = false;\n protected _transientTimer: number | undefined = undefined;\n protected _showModeWaitingToHide = false;\n\n protected _clearTransientTimer(): void {\n if (this._transientTimer !== undefined) {\n clearTimeout(this._transientTimer);\n this._transientTimer = undefined;\n }\n }\n\n private _onMouseEnter = (): void => {\n if (this.displayTextLogic !== `transient`)\n return;\n this._hovering = true;\n this._clearTransientTimer();\n this._transientTimer = window.setTimeout(() => {\n this._transientShowingValue = true;\n this._requestDisplayUpdate();\n }, this.appearDelay);\n };\n\n private _onMouseLeave = (): void => {\n if (this.displayTextLogic !== `transient`)\n return;\n this._hovering = false;\n this._startTransientRevertTimer();\n };\n\n protected _startTransientRevertTimer(): void {\n this._clearTransientTimer();\n this._transientTimer = window.setTimeout(() => {\n if (!this._hovering && this.displayTextLogic === `transient`) {\n this._transientShowingValue = false;\n this._requestDisplayUpdate();\n }\n }, this.disappearDelay);\n }\n\n protected _requestDisplayUpdate(): void {\n if (!this._editing) {\n const el = this._contentEl;\n if (el) {\n el.textContent = this._getDisplayText();\n }\n }\n }\n\n /** Called by subclasses when user interacts (drag, keyboard, etc) to temporarily show value in transient mode */\n protected _onUserInteraction(): void {\n if (this.displayTextLogic !== `transient`)\n return;\n this._clearTransientTimer();\n this._transientTimer = window.setTimeout(() => {\n this._transientShowingValue = true;\n this._startTransientRevertTimer();\n this._requestDisplayUpdate();\n }, this.appearDelay);\n };\n\n protected _handleClick = (): void => {\n if (this.mode === `label` && !this.disabled && !this._editing) {\n this._beginEdit();\n }\n };\n\n protected _handleFocus = (): void => {\n if (this.mode === `editor` && !this.disabled && !this._editing) {\n this._beginEdit();\n }\n };\n\n protected _handleBlur = (): void => {\n if (this._editing)\n this._tryCommit();\n };\n\n protected _handleKeydown = (e: KeyboardEvent): void => {\n if (!this._editing)\n return;\n if (e.key === `Enter`) {\n e.preventDefault();\n this._tryCommit();\n if (this.mode === `editor`)\n this._contentEl?.blur();\n } else if (e.key === `Escape`) {\n e.preventDefault();\n this._cancelEdit();\n if (this.mode === `editor`)\n this._contentEl?.blur();\n }\n };\n\n protected _handleBeforeInput = (e: InputEvent): void => {\n if (e.inputType !== `insertText` || !e.data)\n return;\n if (!this._isAllowedInput(e.data)) {\n e.preventDefault();\n }\n };\n\n protected _handleInput = (): void => {\n if (!this._editing)\n return;\n\n const raw = this._contentEl?.textContent?.trim() ?? ``;\n\n this.dispatchEvent(new CustomEvent<EditableLabelChangeDetail>(`input`, {\n detail: { value: raw },\n bubbles: true,\n composed: true,\n }));\n };\n\n // ── Core logic ───────────────────────────────────────────────────────────\n\n protected _beginEdit(): void {\n this._prevValue = this.value;\n this._editing = true;\n this.removeAttribute(`invalid`);\n }\n\n protected _tryCommit(): void {\n let raw = this._contentEl?.textContent?.trim() ?? ``;\n if (this.entryMode === `percent`)\n raw = raw.replaceAll(`%`, ``).trim();\n const validate = this.validator ?? this._defaultValidator.bind(this);\n if (validate(raw)) {\n this.removeAttribute(`invalid`);\n const prev = this.value;\n this.value = raw;\n this._editing = false;\n if (raw !== prev) {\n this.dispatchEvent(new CustomEvent<EditableLabelChangeDetail>(`change`, {\n detail: { value: raw },\n bubbles: true,\n composed: true,\n }));\n }\n } else {\n this._cancelEdit();\n }\n }\n\n protected _cancelEdit(): void {\n this.value = this._prevValue;\n this._editing = false;\n this.removeAttribute(`invalid`);\n }\n\n protected _getDisplayText(): string {\n const useDisplayText = this._shouldUseDisplayText();\n if (useDisplayText && this.displayText !== undefined && this.displayText !== ``) {\n return this.displayText;\n }\n if (!this.value)\n return ``;\n if (this.formatter)\n return this.formatter(this.value);\n if (this.entryMode === `percent`)\n return `${this.value}%`;\n return this.value;\n }\n\n protected _shouldUseDisplayText(): boolean {\n if (this.displayTextLogic === `hidden`)\n return false;\n if (this.displayTextLogic === `override`)\n return true;\n if (this.displayTextLogic === `show`) {\n if (this._editing)\n return false;\n return this._showModeWaitingToHide;\n }\n if (this.displayTextLogic === `transient`) {\n if (this._editing)\n return false;\n if (this._transientShowingValue)\n return false;\n return true;\n }\n return false;\n }\n\n protected _isAllowedInput(char: string): boolean {\n switch (this.entryMode) {\n case `text`: return /^[a-z\\s]$/i.test(char);\n case `number`: return /^[\\d.\\-]$/.test(char);\n case `percent`: return /^[\\d.%]$/.test(char);\n default: return true;\n }\n }\n\n private _defaultValidator(value: string): boolean {\n switch (this.entryMode) {\n case `text`: return /^[a-z\\s]*$/i.test(value);\n case `number`: return value === `` || /^-?\\d*(?:\\.\\d*)?$/.test(value);\n case `percent`: return value === `` || /^\\d*(?:\\.\\d*)?$/.test(value);\n default: return true;\n } // asdf\n }\n\n // ── Render ───────────────────────────────────────────────────────────────\n\n override render() {\n const isEditor = this.mode === `editor`;\n return html`<div\n class=\"content\"\n contenteditable=${this._editing ? `plaintext-only` : `false`}\n data-placeholder=${this.placeholder}\n tabindex=${isEditor && !this._editing ? `0` : nothing}\n @click=${this._handleClick}\n @focus=${this._handleFocus}\n @blur=${this._handleBlur}\n @keydown=${this._handleKeydown}\n @beforeinput=${this._handleBeforeInput}\n @input=${this._handleInput}\n >${this._editing ? nothing : this._getDisplayText()}</div>`;\n }\n\n override updated(changed: PropertyValues): void {\n super.updated(changed);\n if (changed.has(`_editing`) && this._editing) {\n const el = this._contentEl;\n if (el) {\n el.textContent = this.value;\n el.focus();\n _selectAll(el);\n }\n }\n }\n\n // ── Styles ───────────────────────────────────────────────────────────────\n\n static override styles: CSSResult[] = [themeFallbacks, css`\n :host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n --_font-size: var(--label-font-size, var(--text-m, 12px));\n --_font-family: var(--label-font-family, var(--font-family, system-ui, sans-serif));\n --_color: var(--label-color, var(--surface-2-text));\n --_muted: var(--label-muted-color, var(--surface-muted-text, oklch(55% 0.02 240)));\n --_padding: var(--label-padding, var(--space-xs, 3px) var(--space-s, 4px));\n --_radius: var(--label-radius, var(--radius-s, 3px));\n --_align: var(--label-align, center);\n --_min-width: var(--label-min-width, 1ch);\n }\n\n .content {\n box-sizing: border-box;\n width: 100%;\n text-align: var(--_align);\n outline: none;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: var(--_min-width);\n font-family: var(--_font-family);\n font-size: var(--_font-size);\n color: var(--_color);\n padding: var(--_padding);\n border: 1px solid transparent;\n border-radius: var(--_radius);\n cursor: pointer;\n transition:\n background var(--transition, 0.15s ease-out),\n border-color var(--transition, 0.15s ease-out);\n }\n\n /* Remove overflow clipping while editing so the cursor is never hidden */\n .content[contenteditable=\"plaintext-only\"] {\n overflow: visible;\n text-overflow: clip;\n }\n\n /* ── Label mode ── */\n :host([mode=\"label\"]) .content {\n background: transparent;\n }\n\n :host([mode=\"label\"]) .content[contenteditable=\"plaintext-only\"] {\n background: var(--surface-4, oklch(22% 0.02 240));\n border: var(--border, 1px solid oklch(25% 0.02 240));\n cursor: text;\n }\n\n /* ── Editor mode — always shows box ── */\n :host([mode=\"editor\"]) .content {\n background: var(--surface-4, oklch(22% 0.02 240));\n border: var(--border, 1px solid oklch(25% 0.02 240));\n }\n\n :host([mode=\"editor\"]) .content[contenteditable=\"plaintext-only\"] {\n border-color: var(--accent, oklch(60% 0.15 140));\n cursor: text;\n }\n\n /* ── Placeholder ── */\n .content:empty::before {\n content: attr(data-placeholder);\n color: var(--_muted);\n pointer-events: none;\n }\n\n /* ── Invalid ── */\n :host([invalid]) .content {\n border-color: var(--error, oklch(60% 0.15 20));\n }\n\n /* ── Disabled ── */\n :host([disabled]) .content {\n opacity: var(--disabled-opacity, 0.5);\n cursor: not-allowed;\n pointer-events: none;\n }\n `];\n}\n\nfunction _selectAll(el: HTMLElement): void {\n const range = document.createRange();\n range.selectNodeContents(el);\n const sel = window.getSelection();\n sel?.removeAllRanges();\n sel?.addRange(range);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ixfx-editable-label': EditableLabel;\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"editable-label.js","names":["customElement"],"sources":["../src/editable-label/editable-label.ts"],"sourcesContent":["/**\n * <ixfx-editable-label> — inline editable text label.\n *\n * Two display modes:\n * label (default) — renders as plain text until clicked, then becomes an editable box.\n * editor — always renders as an editable box; becomes active on focus/click.\n *\n * Entry modes (filter characters as typed):\n * free (default) — no restrictions\n * text — alphabetical characters and spaces only\n * number — digits, decimal point, minus sign\n * percent — digits, decimal point, percent sign\n *\n * Properties (not attributes):\n * validator (value: string) => boolean — override commit validation; default uses entry-mode rules\n * formatter (value: string) => string — transform committed value for display\n *\n * Events:\n * input — CustomEvent<{ value: string }>, bubbles + composed; fired as value changes during editing\n * change — CustomEvent<{ value: string }>, bubbles + composed; fired when value is committed\n *\n * CSS variables:\n * --label-font-size defaults to var(--text-m, 12px)\n * --label-font-family defaults to var(--font-family, system-ui, sans-serif)\n * --label-color defaults to var(--surface-2-text)\n * --label-muted-color placeholder colour, defaults to var(--surface-muted-text)\n * --label-padding defaults to var(--space-xs, 3px) var(--space-s, 4px)\n * --label-radius defaults to var(--radius-s, 3px)\n * --label-align text alignment: left | center (default) | right\n */\nimport type { CSSResult, PropertyValues } from 'lit';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\nexport type EditableMode = `label` | `editor`;\nexport type EntryMode = `free` | `text` | `number` | `percent`;\nexport type DisplayTextLogic = `hidden` | `show` | `override` | `transient`;\n\nexport type EditableLabelChangeDetail = {\n readonly value: string;\n};\nexport type EditableLabelChangeEvent = CustomEvent<EditableLabelChangeDetail>;\n\n@customElement(`ixfx-editable-label`)\nexport class EditableLabel extends LitElement {\n @property({ reflect: true }) mode: EditableMode = `label`;\n @property({ attribute: `entry-mode`, reflect: true }) entryMode: EntryMode = `free`;\n @property({ reflect: true }) value = ``;\n @property({ type: Boolean, reflect: true }) disabled = false;\n @property() placeholder = ``;\n\n /** Override displayed text. Bypasses formatter and value. When editing, shows raw value. */\n @property({ attribute: `display-text` }) displayText?: string;\n\n /**\n * Controls when displayText is shown:\n * - 'hidden' (default): never use displayText\n * - 'show': show displayText instead of formatted value, but hide while editing; revert after disappearDelay\n * - 'override': always show displayText, even when editing\n * - 'transient': show displayText by default, switch to formatted value after appearDelay on hover/interaction; revert after disappearDelay\n */\n @property({ attribute: `display-text-logic` }) displayTextLogic: DisplayTextLogic = `hidden`;\n\n /** Delay before showing value in transient mode (ms). Default: 50 */\n @property({ type: Number, attribute: `appear-delay` }) appearDelay = 50;\n\n /** Delay before reverting to displayText after editing ends (ms). Default: 1000 */\n @property({ type: Number, attribute: `disappear-delay` }) disappearDelay = 1000;\n\n /** Override commit validation. Return true to accept, false to reject (reverts). */\n @property({ attribute: false }) validator?: (value: string) => boolean;\n\n /** Transform the committed value for display. Does not affect the stored value. */\n @property({ attribute: false }) formatter?: (value: string) => string;\n\n @state() protected _editing = false;\n\n protected get _contentEl(): HTMLElement | undefined {\n return this.renderRoot?.querySelector<HTMLElement>(`.content`) ?? undefined;\n }\n\n /** Snapshot of value taken when editing begins; restored on cancel. */\n protected _prevValue = ``;\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener(`mouseenter`, this._onMouseEnter);\n this.addEventListener(`mouseleave`, this._onMouseLeave);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener(`mouseenter`, this._onMouseEnter);\n this.removeEventListener(`mouseleave`, this._onMouseLeave);\n this._clearTransientTimer();\n }\n\n // ── Transient display state ─────────────────────────────────────────────────\n protected _hovering = false;\n protected _transientShowingValue = false;\n protected _transientTimer: number | undefined = undefined;\n protected _showModeWaitingToHide = false;\n\n protected _clearTransientTimer(): void {\n if (this._transientTimer !== undefined) {\n clearTimeout(this._transientTimer);\n this._transientTimer = undefined;\n }\n }\n\n private _onMouseEnter = (): void => {\n if (this.displayTextLogic !== `transient`)\n return;\n this._hovering = true;\n this._clearTransientTimer();\n this._transientTimer = window.setTimeout(() => {\n this._transientShowingValue = true;\n this._requestDisplayUpdate();\n }, this.appearDelay);\n };\n\n private _onMouseLeave = (): void => {\n if (this.displayTextLogic !== `transient`)\n return;\n this._hovering = false;\n this._startTransientRevertTimer();\n };\n\n protected _startTransientRevertTimer(): void {\n this._clearTransientTimer();\n this._transientTimer = window.setTimeout(() => {\n if (!this._hovering && this.displayTextLogic === `transient`) {\n this._transientShowingValue = false;\n this._requestDisplayUpdate();\n }\n }, this.disappearDelay);\n }\n\n protected _requestDisplayUpdate(): void {\n if (!this._editing) {\n const el = this._contentEl;\n if (el) {\n el.textContent = this._getDisplayText();\n }\n }\n }\n\n /** Called by subclasses when user interacts (drag, keyboard, etc) to temporarily show value in transient mode */\n protected _onUserInteraction(): void {\n if (this.displayTextLogic !== `transient`)\n return;\n this._clearTransientTimer();\n this._transientTimer = window.setTimeout(() => {\n this._transientShowingValue = true;\n this._startTransientRevertTimer();\n this._requestDisplayUpdate();\n }, this.appearDelay);\n };\n\n protected _handleClick = (): void => {\n if (this.mode === `label` && !this.disabled && !this._editing) {\n this._beginEdit();\n }\n };\n\n protected _handleFocus = (): void => {\n if (this.mode === `editor` && !this.disabled && !this._editing) {\n this._beginEdit();\n }\n };\n\n protected _handleBlur = (): void => {\n if (this._editing)\n this._tryCommit();\n };\n\n protected _handleKeydown = (e: KeyboardEvent): void => {\n if (!this._editing)\n return;\n if (e.key === `Enter`) {\n e.preventDefault();\n this._tryCommit();\n if (this.mode === `editor`)\n this._contentEl?.blur();\n } else if (e.key === `Escape`) {\n e.preventDefault();\n this._cancelEdit();\n if (this.mode === `editor`)\n this._contentEl?.blur();\n }\n };\n\n protected _handleBeforeInput = (e: InputEvent): void => {\n if (e.inputType !== `insertText` || !e.data)\n return;\n if (!this._isAllowedInput(e.data)) {\n e.preventDefault();\n }\n };\n\n protected _handleInput = (): void => {\n if (!this._editing)\n return;\n\n const raw = this._contentEl?.textContent?.trim() ?? ``;\n\n this.dispatchEvent(new CustomEvent<EditableLabelChangeDetail>(`input`, {\n detail: { value: raw },\n bubbles: true,\n composed: true,\n }));\n };\n\n // ── Core logic ───────────────────────────────────────────────────────────\n\n protected _beginEdit(): void {\n this._prevValue = this.value;\n this._editing = true;\n this.removeAttribute(`invalid`);\n }\n\n protected _tryCommit(): void {\n let raw = this._contentEl?.textContent?.trim() ?? ``;\n if (this.entryMode === `percent`)\n raw = raw.replaceAll(`%`, ``).trim();\n const validate = this.validator ?? this._defaultValidator.bind(this);\n if (validate(raw)) {\n this.removeAttribute(`invalid`);\n const prev = this.value;\n this.value = raw;\n this._editing = false;\n if (raw !== prev) {\n this.dispatchEvent(new CustomEvent<EditableLabelChangeDetail>(`change`, {\n detail: { value: raw },\n bubbles: true,\n composed: true,\n }));\n }\n } else {\n this._cancelEdit();\n }\n }\n\n protected _cancelEdit(): void {\n this.value = this._prevValue;\n this._editing = false;\n this.removeAttribute(`invalid`);\n }\n\n protected _getDisplayText(): string {\n const useDisplayText = this._shouldUseDisplayText();\n if (useDisplayText && this.displayText !== undefined && this.displayText !== ``) {\n return this.displayText;\n }\n if (!this.value)\n return ``;\n if (this.formatter)\n return this.formatter(this.value);\n if (this.entryMode === `percent`)\n return `${this.value}%`;\n return this.value;\n }\n\n protected _shouldUseDisplayText(): boolean {\n if (this.displayTextLogic === `hidden`)\n return false;\n if (this.displayTextLogic === `override`)\n return true;\n if (this.displayTextLogic === `show`) {\n if (this._editing)\n return false;\n return this._showModeWaitingToHide;\n }\n if (this.displayTextLogic === `transient`) {\n if (this._editing)\n return false;\n if (this._transientShowingValue)\n return false;\n return true;\n }\n return false;\n }\n\n protected _isAllowedInput(char: string): boolean {\n switch (this.entryMode) {\n case `text`: return /^[a-z\\s]$/i.test(char);\n case `number`: return /^[\\d.\\-]$/.test(char);\n case `percent`: return /^[\\d.%]$/.test(char);\n default: return true;\n }\n }\n\n private _defaultValidator(value: string): boolean {\n switch (this.entryMode) {\n case `text`: return /^[a-z\\s]*$/i.test(value);\n case `number`: return value === `` || /^-?\\d*(?:\\.\\d*)?$/.test(value);\n case `percent`: return value === `` || /^\\d*(?:\\.\\d*)?$/.test(value);\n default: return true;\n } // asdf\n }\n\n // ── Render ───────────────────────────────────────────────────────────────\n\n override render() {\n const isEditor = this.mode === `editor`;\n return html`<div\n class=\"content\"\n contenteditable=${this._editing ? `plaintext-only` : `false`}\n data-placeholder=${this.placeholder}\n tabindex=${isEditor && !this._editing ? `0` : nothing}\n @click=${this._handleClick}\n @focus=${this._handleFocus}\n @blur=${this._handleBlur}\n @keydown=${this._handleKeydown}\n @beforeinput=${this._handleBeforeInput}\n @input=${this._handleInput}\n >${this._editing ? nothing : this._getDisplayText()}</div>`;\n }\n\n override updated(changed: PropertyValues): void {\n super.updated(changed);\n if (changed.has(`_editing`) && this._editing) {\n const el = this._contentEl;\n if (el) {\n el.textContent = this.value;\n el.focus();\n _selectAll(el);\n }\n }\n // The text content is managed imperatively (see _requestDisplayUpdate), so\n // a re-render alone does not refresh it. Refresh when display-affecting\n // properties change — e.g. a labelled wrapper toggling displayTextLogic\n // while its slider is dragged. _requestDisplayUpdate() no-ops while editing.\n if (\n changed.has(`displayTextLogic`)\n || changed.has(`displayText`)\n || changed.has(`formatter`)\n || changed.has(`value`)\n ) {\n this._requestDisplayUpdate();\n }\n }\n\n // ── Styles ───────────────────────────────────────────────────────────────\n\n static override styles: CSSResult[] = [themeFallbacks, css`\n :host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n --_font-size: var(--label-font-size, var(--text-m, 12px));\n --_font-family: var(--label-font-family, var(--font-family, system-ui, sans-serif));\n --_color: var(--label-color, var(--surface-2-text));\n --_muted: var(--label-muted-color, var(--surface-muted-text, oklch(55% 0.02 240)));\n --_padding: var(--label-padding, var(--space-xs, 3px) var(--space-s, 4px));\n --_radius: var(--label-radius, var(--radius-s, 3px));\n --_align: var(--label-align, center);\n --_min-width: var(--label-min-width, 1ch);\n }\n\n .content {\n box-sizing: border-box;\n width: 100%;\n text-align: var(--_align);\n outline: none;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: var(--_min-width);\n font-family: var(--_font-family);\n font-size: var(--_font-size);\n color: var(--_color);\n padding: var(--_padding);\n border: 1px solid transparent;\n border-radius: var(--_radius);\n cursor: pointer;\n transition:\n background var(--transition, 0.15s ease-out),\n border-color var(--transition, 0.15s ease-out);\n }\n\n /* Remove overflow clipping while editing so the cursor is never hidden */\n .content[contenteditable=\"plaintext-only\"] {\n overflow: visible;\n text-overflow: clip;\n }\n\n /* ── Label mode ── */\n :host([mode=\"label\"]) .content {\n background: transparent;\n }\n\n :host([mode=\"label\"]) .content[contenteditable=\"plaintext-only\"] {\n background: var(--surface-4, oklch(22% 0.02 240));\n border: var(--border, 1px solid oklch(25% 0.02 240));\n cursor: text;\n }\n\n /* ── Editor mode — always shows box ── */\n :host([mode=\"editor\"]) .content {\n background: var(--surface-4, oklch(22% 0.02 240));\n border: var(--border, 1px solid oklch(25% 0.02 240));\n }\n\n :host([mode=\"editor\"]) .content[contenteditable=\"plaintext-only\"] {\n border-color: var(--accent, oklch(60% 0.15 140));\n cursor: text;\n }\n\n /* ── Placeholder ── */\n .content:empty::before {\n content: attr(data-placeholder);\n color: var(--_muted);\n pointer-events: none;\n }\n\n /* ── Invalid ── */\n :host([invalid]) .content {\n border-color: var(--error, oklch(60% 0.15 20));\n }\n\n /* ── Disabled ── */\n :host([disabled]) .content {\n opacity: var(--disabled-opacity, 0.5);\n cursor: not-allowed;\n pointer-events: none;\n }\n `];\n}\n\nfunction _selectAll(el: HTMLElement): void {\n const range = document.createRange();\n range.selectNodeContents(el);\n const sel = window.getSelection();\n sel?.removeAllRanges();\n sel?.addRange(range);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ixfx-editable-label': EditableLabel;\n }\n}\n"],"mappings":"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"}
|
|
@@ -245,7 +245,7 @@ const _themeFallbacksCss = css`
|
|
|
245
245
|
@property --text-xs {
|
|
246
246
|
syntax: '<length>';
|
|
247
247
|
inherits: true;
|
|
248
|
-
initial-value:
|
|
248
|
+
initial-value: 9px;
|
|
249
249
|
}
|
|
250
250
|
@property --text-s {
|
|
251
251
|
syntax: '<length>';
|
|
@@ -403,4 +403,4 @@ const themeFallbacks = css``;
|
|
|
403
403
|
//#endregion
|
|
404
404
|
export { themeFallbacks as t };
|
|
405
405
|
|
|
406
|
-
//# sourceMappingURL=fallbacks-
|
|
406
|
+
//# sourceMappingURL=fallbacks-DNI9xt0F.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fallbacks-DEE1nCTt.js","names":[],"sources":["../src/styles/fallbacks.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * Default fallback values for theme CSS variables.\n *\n * Uses `@property` to register each variable with an initial value that acts\n * as a fallback. This means:\n * - If the theme CSS (`src/style.css`) is loaded, its `:root` values cascade\n * in and override these defaults.\n * - If no theme CSS is loaded, these initial values ensure components still\n * have visible backgrounds, text colours, etc.\n *\n * `@property` registration is document-global — it is not scoped per shadow\n * root — so this is registered exactly once (via `_registerThemeFallbacksOnce`\n * below) rather than adopted into every component's shadow-root stylesheet.\n * Registering the same `@property` rule repeatedly across many shadow roots\n * causes Chrome to log \"Ignored @property rule\" for every repeat.\n */\nconst _themeFallbacksCss = css`\n @property --surface-0 {\n syntax: '<color>';\n inherits: true;\n initial-value: oklch(5% 0.02 240);\n }\n @property --surface-1 {\n syntax: '<color>';\n inherits: true;\n initial-value: oklch(8% 0.02 240);\n }\n @property --surface-2 {\n syntax: '<color>';\n inherits: true;\n initial-value: oklch(12% 0.02 240);\n }\n @property --surface-2-text {\n syntax: '<color>';\n inherits: true;\n initial-value: #fff;\n }\n @property --surface-3 {\n syntax: '<color>';\n inherits: true;\n initial-value: oklch(15% 0.02 240);\n }\n @property --surface-3-text {\n syntax: '<color>';\n inherits: true;\n initial-value: oklch(75% 0.02 240);\n }\n @property --surface-4 {\n syntax: '<color>';\n inherits: true;\n initial-value: oklch(22% 0.02 240);\n }\n @property --surface-4-text {\n syntax: '<color>';\n inherits: true;\n initial-value: #fff;\n }\n @property --surface-5 {\n syntax: '<color>';\n inherits: true;\n initial-value: oklch(19% 0.02 240);\n }\n @property --surface-5-text {\n syntax: '<color>';\n inherits: true;\n initial-value: #fff;\n }\n @property --surface-6 {\n syntax: '<color>';\n inherits: true;\n initial-value: oklch(35% 0.02 240);\n }\n @property --surface-6-text {\n syntax: '<color>';\n inherits: true;\n initial-value: #fff;\n }\n @property --surface-muted-text {\n syntax: '<color>';\n inherits: true;\n initial-value: oklch(55% 0.02 240);\n }\n @property --content {\n syntax: '<color>';\n inherits: true;\n initial-value: oklch(10% 0.01 240);\n }\n @property --content-text {\n syntax: '<color>';\n inherits: true;\n initial-value: #fff;\n }\n @property --accent {\n syntax: '<color>';\n inherits: true;\n initial-value: oklch(60% 0.15 140);\n }\n @property --accent-text {\n syntax: '<color>';\n inherits: true;\n initial-value: #fff;\n }\n @property --error {\n syntax: '<color>';\n inherits: true;\n initial-value: oklch(60% 0.15 20);\n }\n @property --error-text {\n syntax: '<color>';\n inherits: true;\n initial-value: #fff;\n }\n @property --border {\n syntax: '*';\n inherits: true;\n initial-value: 1px solid oklch(25% 0.02 240);\n }\n @property --border-subtle {\n syntax: '*';\n inherits: true;\n initial-value: 1px solid oklch(18% 0.02 240);\n }\n @property --disabled-opacity {\n syntax: '<number>';\n inherits: true;\n initial-value: 0.5;\n }\n @property --transition {\n syntax: '<time>';\n inherits: true;\n initial-value: 0.15s;\n }\n @property --prominence-idle-opacity {\n syntax: '<number>';\n inherits: true;\n initial-value: 0.6;\n }\n @property --prominence-idle-saturate {\n syntax: '<number>';\n inherits: true;\n initial-value: 0.4;\n }\n @property --prominence-tickled-opacity {\n syntax: '<number>';\n inherits: true;\n initial-value: 0.85;\n }\n @property --prominence-tickled-saturate {\n syntax: '<number>';\n inherits: true;\n initial-value: 0.8;\n }\n @property --prominence-disabled-opacity {\n syntax: '<number>';\n inherits: true;\n initial-value: 0.3;\n }\n @property --prominence-disabled-saturate {\n syntax: '<number>';\n inherits: true;\n initial-value: 0.1;\n }\n @property --crumb-item-bg {\n syntax: '<color>';\n inherits: true;\n initial-value: transparent;\n }\n @property --crumb-item-bg-tickled {\n syntax: '<color>';\n inherits: true;\n initial-value: var(--surface-5);\n }\n @property --crumb-item-text-tickled {\n syntax: '<color>';\n inherits: true;\n initial-value: inherit;\n }\n @property --crumb-item-border {\n syntax: '*';\n inherits: true;\n initial-value: 1px solid transparent;\n }\n @property --crumb-item-border-tickled {\n syntax: '<color>';\n inherits: true;\n initial-value: var(--accent);\n }\n @property --crumb-item-padding {\n syntax: '*';\n inherits: true;\n initial-value: var(--space-xs);\n }\n @property --crumb-item-border-radius {\n syntax: '<length>';\n inherits: true;\n initial-value: var(--radius-m);\n }\n @property --crumb-item-gap {\n syntax: '<length>';\n inherits: true;\n initial-value: var(--space-xs);\n }\n @property --crumb-separator {\n syntax: '<color>';\n inherits: true;\n initial-value: var(--surface-muted-text);\n }\n @property --crumb-truncate-min-width {\n syntax: '<length>';\n inherits: true;\n initial-value: 5ch;\n }\n @property --space-xs {\n syntax: '<length>';\n inherits: true;\n initial-value: 3px;\n }\n @property --space-s {\n syntax: '<length>';\n inherits: true;\n initial-value: 4px;\n }\n @property --space-m {\n syntax: '<length>';\n inherits: true;\n initial-value: 8px;\n }\n @property --space-l {\n syntax: '<length>';\n inherits: true;\n initial-value: 12px;\n }\n @property --space-xl {\n syntax: '<length>';\n inherits: true;\n initial-value: 16px;\n }\n @property --space-2xl {\n syntax: '<length>';\n inherits: true;\n initial-value: 20px;\n }\n @property --text-xs {\n syntax: '<length>';\n inherits: true;\n initial-value: 10px;\n }\n @property --text-s {\n syntax: '<length>';\n inherits: true;\n initial-value: 11px;\n }\n @property --text-m {\n syntax: '<length>';\n inherits: true;\n initial-value: 12px;\n }\n @property --text-l {\n syntax: '<length>';\n inherits: true;\n initial-value: 13px;\n }\n @property --text-xl {\n syntax: '<length>';\n inherits: true;\n initial-value: 16px;\n }\n @property --text-2xl {\n syntax: '<length>';\n inherits: true;\n initial-value: 20px;\n }\n @property --font-weight-bold {\n syntax: '<number>';\n inherits: true;\n initial-value: 600;\n }\n @property --radius-s {\n syntax: '<length>';\n inherits: true;\n initial-value: 3px;\n }\n @property --radius-m {\n syntax: '<length>';\n inherits: true;\n initial-value: 4px;\n }\n @property --radius-l {\n syntax: '<length>';\n inherits: true;\n initial-value: 6px;\n }\n @property --radius-xl {\n syntax: '<length>';\n inherits: true;\n initial-value: 8px;\n }\n @property --shadow-m {\n syntax: '*';\n inherits: true;\n initial-value: 0 4px 12px rgba(0, 0, 0, 0.3);\n }\n @property --shadow-l {\n syntax: '*';\n inherits: true;\n initial-value: 0 4px 24px rgba(0, 0, 0, 0.5);\n }\n @property --item-bg {\n syntax: '<color>';\n inherits: true;\n initial-value: transparent;\n }\n @property --item-bg-tickled {\n syntax: '<color>';\n inherits: true;\n initial-value: oklch(19% 0.02 240);\n }\n @property --item-bg-selected {\n syntax: '<color>';\n inherits: true;\n initial-value: oklch(60% 0.15 140);\n }\n @property --item-bg-selected-tickled {\n syntax: '<color>';\n inherits: true;\n initial-value: color-mix(in oklch, oklch(60% 0.15 140) 80%, oklch(0% 0 0));\n }\n @property --item-text-tickled {\n syntax: '<color>';\n inherits: true;\n initial-value: #fff;\n }\n @property --item-text-selected {\n syntax: '<color>';\n inherits: true;\n initial-value: #fff;\n }\n @property --item-border {\n syntax: '*';\n inherits: true;\n initial-value: 1px solid oklch(19% 0.02 240);\n }\n @property --item-border-tickled {\n syntax: '*';\n inherits: true;\n initial-value: 1px solid color-mix(in oklch, oklch(60% 0.15 140) 40%, transparent);\n }\n @property --item-border-selected {\n syntax: '*';\n inherits: true;\n initial-value: 1px dashed oklch(60% 0.15 140);\n }\n @property --item-border-active {\n syntax: '*';\n inherits: true;\n initial-value: 2px solid oklch(60% 0.15 140);\n }\n @property --item-border-dragged {\n syntax: '*';\n inherits: true;\n initial-value: 2px dotted color-mix(in oklch, oklch(60% 0.15 140) 80%, transparent);\n }\n @property --item-border-disabled {\n syntax: '*';\n inherits: true;\n initial-value: 1px solid oklch(22% 0.02 240);\n }\n @property --item-padding {\n syntax: '*';\n inherits: true;\n initial-value: 4px 8px;\n }\n @property --item-border-radius {\n syntax: '<length>';\n inherits: true;\n initial-value: 4px;\n }\n @property --item-icon-spacing {\n syntax: '<length>';\n inherits: true;\n initial-value: 4px;\n }\n`;\n\nlet _themeFallbacksRegistered = false;\n\nfunction _registerThemeFallbacksOnce(): void {\n if (_themeFallbacksRegistered || typeof document === `undefined`)\n return;\n _themeFallbacksRegistered = true;\n const styleEl = document.createElement(`style`);\n styleEl.textContent = _themeFallbacksCss.cssText;\n document.head.append(styleEl);\n}\n\n_registerThemeFallbacksOnce();\n\n/**\n * Spread this into any component whose styles reference theme variables.\n * It is an empty stylesheet — the actual `@property` rules are registered\n * once at the document level as a side effect of importing this module — so\n * this exists only to keep the familiar `static styles = [themeFallbacks, ...]`\n * pattern working across all consuming components.\n */\nexport const themeFallbacks = css``;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,MAAM,qBAAqB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgX9B,IAAI,4BAA4B;AAEhC,SAAS,8BAAoC;CAC3C,IAAI,6BAA6B,OAAO,aAAa,aACnD;CACF,4BAA4B;CAC5B,MAAM,UAAU,SAAS,cAAc,OAAO;CAC9C,QAAQ,cAAc,mBAAmB;CACzC,SAAS,KAAK,OAAO,OAAO;AAC9B;AAEA,4BAA4B;;;;;;;;AAS5B,MAAa,iBAAiB,GAAG"}
|
|
1
|
+
{"version":3,"file":"fallbacks-DNI9xt0F.js","names":[],"sources":["../src/styles/fallbacks.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * Default fallback values for theme CSS variables.\n *\n * Uses `@property` to register each variable with an initial value that acts\n * as a fallback. This means:\n * - If the theme CSS (`src/style.css`) is loaded, its `:root` values cascade\n * in and override these defaults.\n * - If no theme CSS is loaded, these initial values ensure components still\n * have visible backgrounds, text colours, etc.\n *\n * `@property` registration is document-global — it is not scoped per shadow\n * root — so this is registered exactly once (via `_registerThemeFallbacksOnce`\n * below) rather than adopted into every component's shadow-root stylesheet.\n * Registering the same `@property` rule repeatedly across many shadow roots\n * causes Chrome to log \"Ignored @property rule\" for every repeat.\n */\nconst _themeFallbacksCss = css`\n @property --surface-0 {\n syntax: '<color>';\n inherits: true;\n initial-value: oklch(5% 0.02 240);\n }\n @property --surface-1 {\n syntax: '<color>';\n inherits: true;\n initial-value: oklch(8% 0.02 240);\n }\n @property --surface-2 {\n syntax: '<color>';\n inherits: true;\n initial-value: oklch(12% 0.02 240);\n }\n @property --surface-2-text {\n syntax: '<color>';\n inherits: true;\n initial-value: #fff;\n }\n @property --surface-3 {\n syntax: '<color>';\n inherits: true;\n initial-value: oklch(15% 0.02 240);\n }\n @property --surface-3-text {\n syntax: '<color>';\n inherits: true;\n initial-value: oklch(75% 0.02 240);\n }\n @property --surface-4 {\n syntax: '<color>';\n inherits: true;\n initial-value: oklch(22% 0.02 240);\n }\n @property --surface-4-text {\n syntax: '<color>';\n inherits: true;\n initial-value: #fff;\n }\n @property --surface-5 {\n syntax: '<color>';\n inherits: true;\n initial-value: oklch(19% 0.02 240);\n }\n @property --surface-5-text {\n syntax: '<color>';\n inherits: true;\n initial-value: #fff;\n }\n @property --surface-6 {\n syntax: '<color>';\n inherits: true;\n initial-value: oklch(35% 0.02 240);\n }\n @property --surface-6-text {\n syntax: '<color>';\n inherits: true;\n initial-value: #fff;\n }\n @property --surface-muted-text {\n syntax: '<color>';\n inherits: true;\n initial-value: oklch(55% 0.02 240);\n }\n @property --content {\n syntax: '<color>';\n inherits: true;\n initial-value: oklch(10% 0.01 240);\n }\n @property --content-text {\n syntax: '<color>';\n inherits: true;\n initial-value: #fff;\n }\n @property --accent {\n syntax: '<color>';\n inherits: true;\n initial-value: oklch(60% 0.15 140);\n }\n @property --accent-text {\n syntax: '<color>';\n inherits: true;\n initial-value: #fff;\n }\n @property --error {\n syntax: '<color>';\n inherits: true;\n initial-value: oklch(60% 0.15 20);\n }\n @property --error-text {\n syntax: '<color>';\n inherits: true;\n initial-value: #fff;\n }\n @property --border {\n syntax: '*';\n inherits: true;\n initial-value: 1px solid oklch(25% 0.02 240);\n }\n @property --border-subtle {\n syntax: '*';\n inherits: true;\n initial-value: 1px solid oklch(18% 0.02 240);\n }\n @property --disabled-opacity {\n syntax: '<number>';\n inherits: true;\n initial-value: 0.5;\n }\n @property --transition {\n syntax: '<time>';\n inherits: true;\n initial-value: 0.15s;\n }\n @property --prominence-idle-opacity {\n syntax: '<number>';\n inherits: true;\n initial-value: 0.6;\n }\n @property --prominence-idle-saturate {\n syntax: '<number>';\n inherits: true;\n initial-value: 0.4;\n }\n @property --prominence-tickled-opacity {\n syntax: '<number>';\n inherits: true;\n initial-value: 0.85;\n }\n @property --prominence-tickled-saturate {\n syntax: '<number>';\n inherits: true;\n initial-value: 0.8;\n }\n @property --prominence-disabled-opacity {\n syntax: '<number>';\n inherits: true;\n initial-value: 0.3;\n }\n @property --prominence-disabled-saturate {\n syntax: '<number>';\n inherits: true;\n initial-value: 0.1;\n }\n @property --crumb-item-bg {\n syntax: '<color>';\n inherits: true;\n initial-value: transparent;\n }\n @property --crumb-item-bg-tickled {\n syntax: '<color>';\n inherits: true;\n initial-value: var(--surface-5);\n }\n @property --crumb-item-text-tickled {\n syntax: '<color>';\n inherits: true;\n initial-value: inherit;\n }\n @property --crumb-item-border {\n syntax: '*';\n inherits: true;\n initial-value: 1px solid transparent;\n }\n @property --crumb-item-border-tickled {\n syntax: '<color>';\n inherits: true;\n initial-value: var(--accent);\n }\n @property --crumb-item-padding {\n syntax: '*';\n inherits: true;\n initial-value: var(--space-xs);\n }\n @property --crumb-item-border-radius {\n syntax: '<length>';\n inherits: true;\n initial-value: var(--radius-m);\n }\n @property --crumb-item-gap {\n syntax: '<length>';\n inherits: true;\n initial-value: var(--space-xs);\n }\n @property --crumb-separator {\n syntax: '<color>';\n inherits: true;\n initial-value: var(--surface-muted-text);\n }\n @property --crumb-truncate-min-width {\n syntax: '<length>';\n inherits: true;\n initial-value: 5ch;\n }\n @property --space-xs {\n syntax: '<length>';\n inherits: true;\n initial-value: 3px;\n }\n @property --space-s {\n syntax: '<length>';\n inherits: true;\n initial-value: 4px;\n }\n @property --space-m {\n syntax: '<length>';\n inherits: true;\n initial-value: 8px;\n }\n @property --space-l {\n syntax: '<length>';\n inherits: true;\n initial-value: 12px;\n }\n @property --space-xl {\n syntax: '<length>';\n inherits: true;\n initial-value: 16px;\n }\n @property --space-2xl {\n syntax: '<length>';\n inherits: true;\n initial-value: 20px;\n }\n @property --text-xs {\n syntax: '<length>';\n inherits: true;\n initial-value: 9px;\n }\n @property --text-s {\n syntax: '<length>';\n inherits: true;\n initial-value: 11px;\n }\n @property --text-m {\n syntax: '<length>';\n inherits: true;\n initial-value: 12px;\n }\n @property --text-l {\n syntax: '<length>';\n inherits: true;\n initial-value: 13px;\n }\n @property --text-xl {\n syntax: '<length>';\n inherits: true;\n initial-value: 16px;\n }\n @property --text-2xl {\n syntax: '<length>';\n inherits: true;\n initial-value: 20px;\n }\n @property --font-weight-bold {\n syntax: '<number>';\n inherits: true;\n initial-value: 600;\n }\n @property --radius-s {\n syntax: '<length>';\n inherits: true;\n initial-value: 3px;\n }\n @property --radius-m {\n syntax: '<length>';\n inherits: true;\n initial-value: 4px;\n }\n @property --radius-l {\n syntax: '<length>';\n inherits: true;\n initial-value: 6px;\n }\n @property --radius-xl {\n syntax: '<length>';\n inherits: true;\n initial-value: 8px;\n }\n @property --shadow-m {\n syntax: '*';\n inherits: true;\n initial-value: 0 4px 12px rgba(0, 0, 0, 0.3);\n }\n @property --shadow-l {\n syntax: '*';\n inherits: true;\n initial-value: 0 4px 24px rgba(0, 0, 0, 0.5);\n }\n @property --item-bg {\n syntax: '<color>';\n inherits: true;\n initial-value: transparent;\n }\n @property --item-bg-tickled {\n syntax: '<color>';\n inherits: true;\n initial-value: oklch(19% 0.02 240);\n }\n @property --item-bg-selected {\n syntax: '<color>';\n inherits: true;\n initial-value: oklch(60% 0.15 140);\n }\n @property --item-bg-selected-tickled {\n syntax: '<color>';\n inherits: true;\n initial-value: color-mix(in oklch, oklch(60% 0.15 140) 80%, oklch(0% 0 0));\n }\n @property --item-text-tickled {\n syntax: '<color>';\n inherits: true;\n initial-value: #fff;\n }\n @property --item-text-selected {\n syntax: '<color>';\n inherits: true;\n initial-value: #fff;\n }\n @property --item-border {\n syntax: '*';\n inherits: true;\n initial-value: 1px solid oklch(19% 0.02 240);\n }\n @property --item-border-tickled {\n syntax: '*';\n inherits: true;\n initial-value: 1px solid color-mix(in oklch, oklch(60% 0.15 140) 40%, transparent);\n }\n @property --item-border-selected {\n syntax: '*';\n inherits: true;\n initial-value: 1px dashed oklch(60% 0.15 140);\n }\n @property --item-border-active {\n syntax: '*';\n inherits: true;\n initial-value: 2px solid oklch(60% 0.15 140);\n }\n @property --item-border-dragged {\n syntax: '*';\n inherits: true;\n initial-value: 2px dotted color-mix(in oklch, oklch(60% 0.15 140) 80%, transparent);\n }\n @property --item-border-disabled {\n syntax: '*';\n inherits: true;\n initial-value: 1px solid oklch(22% 0.02 240);\n }\n @property --item-padding {\n syntax: '*';\n inherits: true;\n initial-value: 4px 8px;\n }\n @property --item-border-radius {\n syntax: '<length>';\n inherits: true;\n initial-value: 4px;\n }\n @property --item-icon-spacing {\n syntax: '<length>';\n inherits: true;\n initial-value: 4px;\n }\n`;\n\nlet _themeFallbacksRegistered = false;\n\nfunction _registerThemeFallbacksOnce(): void {\n if (_themeFallbacksRegistered || typeof document === `undefined`)\n return;\n _themeFallbacksRegistered = true;\n const styleEl = document.createElement(`style`);\n styleEl.textContent = _themeFallbacksCss.cssText;\n document.head.append(styleEl);\n}\n\n_registerThemeFallbacksOnce();\n\n/**\n * Spread this into any component whose styles reference theme variables.\n * It is an empty stylesheet — the actual `@property` rules are registered\n * once at the document level as a side effect of importing this module — so\n * this exists only to keep the familiar `static styles = [themeFallbacks, ...]`\n * pattern working across all consuming components.\n */\nexport const themeFallbacks = css``;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,MAAM,qBAAqB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgX9B,IAAI,4BAA4B;AAEhC,SAAS,8BAAoC;CAC3C,IAAI,6BAA6B,OAAO,aAAa,aACnD;CACF,4BAA4B;CAC5B,MAAM,UAAU,SAAS,cAAc,OAAO;CAC9C,QAAQ,cAAc,mBAAmB;CACzC,SAAS,KAAK,OAAO,OAAO;AAC9B;AAEA,4BAA4B;;;;;;;;AAS5B,MAAa,iBAAiB,GAAG"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { r as IDataProvider } from "./data-provider-BAn_-oR1.js";
|
|
2
|
-
import { l as ListSelectionMode } from "./types-
|
|
2
|
+
import { l as ListSelectionMode } from "./list-selection-types-DSuRNWpx.js";
|
|
3
3
|
import "./panel.js";
|
|
4
4
|
import { LitElement, PropertyValues, nothing } from "lit";
|
|
5
5
|
import { CommandId } from "@clinth/ui-commands";
|
|
@@ -118,4 +118,4 @@ interface GroupedItemListerElement<T> {
|
|
|
118
118
|
}
|
|
119
119
|
//#endregion
|
|
120
120
|
export { IGroupedSubComponent as a, SubComponentActivateEvent as c, SubComponentItemClickEvent as d, SubComponentSelectDetail as f, SubComponentTickleEvent as h, GroupedSelectEvent as i, SubComponentFactory as l, SubComponentTickleDetail as m, GroupedItemListerElementEventMap as n, IGroupedSubComponentEventMap as o, SubComponentSelectEvent as p, GroupedSelectDetail as r, SubComponentActivateDetail as s, GroupedItemListerElement as t, SubComponentItemClickDetail as u };
|
|
121
|
-
//# sourceMappingURL=grouped-item-lister-
|
|
121
|
+
//# sourceMappingURL=grouped-item-lister-DnWB-eFT.d.ts.map
|
package/dist/{grouped-item-lister-_pMDwIo1.d.ts.map → grouped-item-lister-DnWB-eFT.d.ts.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grouped-item-lister-
|
|
1
|
+
{"version":3,"file":"grouped-item-lister-DnWB-eFT.d.ts","names":[],"sources":["../src/grouped-item-lister/types.ts","../src/grouped-item-lister/grouped-item-lister.ts"],"mappings":";;;;;;;;;;KAWY,yBAAyB;WAC1B,UAAU,YAAY;WACtB,UAAU,YAAY;;;;;;KAOrB,2BAA2B;WAC5B,MAAM;;;;;;KAOL,4BAA4B;WAC7B,MAAM;;;;;;KAOL,yBAAyB;WAC1B,MAAM;;KAGL,wBAAwB,KAAK,YAAY,yBAAyB;KAClE,0BAA0B,KAAK,YAAY,2BAA2B;KACtE,2BAA2B,KAAK,YAAY,4BAA4B;KACxE,wBAAwB,KAAK,YAAY,yBAAyB;UAE7D,6BAA6B;EAC5C,UAAU,wBAAwB;EAClC,YAAY,0BAA0B;EACtC,cAAc,2BAA2B;EACzC,UAAU,wBAAwB;;;;;;;;UAanB,qBAAqB,WAAW;;EAE/C,WAAW,gBAAgB;;EAG3B;;WAGS,eAAe,YAAY;;EAGpC,eAAe;;;;;EAMf,WAAW,WAAW,WAAW,OAAO;EAExC,oBAAoB,gBAAgB,6BAA6B,IAC/D,MAAM,GACN,WAAW,OAAO,6BAA6B,GAAG,aAClD,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB;;;;;;KAQZ,oBAAoB,MAAM,iCAAiC,cAAc,qBAAqB;;;;;;KAW9F,oBAAoB;WACrB,UAAU,YAAY;WACtB;;KAGC,mBAAmB,KAAK,YAAY,oBAAoB;UAEnD,iCAAiC;EAChD,kBAAkB,mBAAmB;;;;cC9E1B,yBAAyB,qBAAqB;;EACb;EAG5C;MAgBI,aAAa,MAAM;MAInB,QAAQ,SAAS,MAAM;MAKvB,WAAW,oBAAoB;MAI/B,QAAQ,OAAO,oBAAoB;MAQnC,YAAY,oBAAoB;MAIhC,SAAS,OAAO,oBAAoB;;MAWpC,iBAAiB,YAAY;;;;;EAcjC,SAAS,WAAW,WAAW,OAAO;YAUnB;EAIV;EAKA;YAKU,QAAQ,SAAS;YAQjB,iBAAM,wBAAA;;QAmJnB;YACI;IACR,4BAA4B;;;UAIf,yBAAyB;EACxC,oBAAoB,gBAAgB,iCAAiC,IACnE,MAAM,GACN,WAAW,MAAM,yBAAyB,IAAI,OAAO,iCAAiC,GAAG,aACzF,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { a as IGroupedSubComponent, c as SubComponentActivateEvent, d as SubComponentItemClickEvent, f as SubComponentSelectDetail, h as SubComponentTickleEvent, i as GroupedSelectEvent, l as SubComponentFactory, m as SubComponentTickleDetail, n as GroupedItemListerElementEventMap, o as IGroupedSubComponentEventMap, p as SubComponentSelectEvent, r as GroupedSelectDetail, s as SubComponentActivateDetail, t as GroupedItemListerElement, u as SubComponentItemClickDetail } from "./grouped-item-lister-
|
|
1
|
+
import { a as IGroupedSubComponent, c as SubComponentActivateEvent, d as SubComponentItemClickEvent, f as SubComponentSelectDetail, h as SubComponentTickleEvent, i as GroupedSelectEvent, l as SubComponentFactory, m as SubComponentTickleDetail, n as GroupedItemListerElementEventMap, o as IGroupedSubComponentEventMap, p as SubComponentSelectEvent, r as GroupedSelectDetail, s as SubComponentActivateDetail, t as GroupedItemListerElement, u as SubComponentItemClickDetail } from "./grouped-item-lister-DnWB-eFT.js";
|
|
2
2
|
export { GroupedItemListerElement, type GroupedItemListerElementEventMap, type GroupedSelectDetail, type GroupedSelectEvent, type IGroupedSubComponent, type IGroupedSubComponentEventMap, type SubComponentActivateDetail, type SubComponentActivateEvent, type SubComponentFactory, type SubComponentItemClickDetail, type SubComponentItemClickEvent, type SubComponentSelectDetail, type SubComponentSelectEvent, type SubComponentTickleDetail, type SubComponentTickleEvent };
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
|
|
2
2
|
import { LitElement, css, html } from "lit";
|
|
3
3
|
import { property, state } from "lit/decorators.js";
|
|
4
|
+
import { styleMap } from "lit/directives/style-map.js";
|
|
4
5
|
import { Colour } from "@ixfx/visual";
|
|
5
6
|
import { repeat } from "lit/directives/repeat.js";
|
|
6
|
-
import { styleMap } from "lit/directives/style-map.js";
|
|
7
7
|
//#region src/hex/colour.ts
|
|
8
8
|
const WHITESPACE_BYTES = /* @__PURE__ */ new Set([
|
|
9
9
|
9,
|
|
@@ -1142,4 +1142,4 @@ IxfxHexEditorElement = __decorate([safeCustomElement(`ixfx-hex-editor`)], IxfxHe
|
|
|
1142
1142
|
//#endregion
|
|
1143
1143
|
export { IxfxHexEditorElement as t };
|
|
1144
1144
|
|
|
1145
|
-
//# sourceMappingURL=hex-editor-
|
|
1145
|
+
//# sourceMappingURL=hex-editor-BiRfwTz1.js.map
|