@ixfx/components 0.4.3 → 0.4.4
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 +395 -1176
- package/bundle/index.d.ts.map +1 -1
- package/bundle/index.js +7699 -20648
- package/bundle/index.js.map +1 -1
- package/dist/ac-text.d.ts +12 -7
- package/dist/ac-text.d.ts.map +1 -1
- package/dist/ac-text.js +2 -3
- package/dist/ac-text.js.map +1 -1
- package/dist/{button-C3fLMKUv.js → button-DxYee1ZH.js} +2 -2
- package/dist/{button-C3fLMKUv.js.map → button-DxYee1ZH.js.map} +1 -1
- package/dist/button.d.ts +1 -2
- package/dist/button.d.ts.map +1 -1
- package/dist/button.js +1 -2
- package/dist/checkbox.d.ts +0 -1
- package/dist/checkbox.d.ts.map +1 -1
- package/dist/checkbox.js +1 -1
- package/dist/checkbox.js.map +1 -1
- package/dist/{colour-picker-0sgAha1T.js → colour-picker-BacNRabo.js} +14 -16
- package/dist/colour-picker-BacNRabo.js.map +1 -0
- package/dist/colour-picker.d.ts +1 -1
- package/dist/colour-picker.js +1 -1
- package/dist/crumbs.d.ts +5 -2
- package/dist/crumbs.d.ts.map +1 -1
- package/dist/crumbs.js +45 -20
- package/dist/crumbs.js.map +1 -1
- package/dist/data-display.d.ts +1 -2
- package/dist/data-display.d.ts.map +1 -1
- package/dist/data-display.js +25 -23
- package/dist/data-display.js.map +1 -1
- package/dist/{data-provider-DgI909FP.js → data-provider-35TyWclX.js} +2 -2
- package/dist/data-provider-35TyWclX.js.map +1 -0
- package/dist/{decorate-DdjvVHS-.js → decorate-VRK8rslU.js} +2 -2
- package/dist/{decorate-DdjvVHS-.js.map → decorate-VRK8rslU.js.map} +1 -1
- package/dist/editable-label.d.ts +1 -2
- package/dist/editable-label.d.ts.map +1 -1
- package/dist/editable-label.js +1 -1
- package/dist/editable-label.js.map +1 -1
- package/dist/{hex-editor-WZrjRtvL.js → hex-editor-Bk6rxhfg.js} +9 -11
- package/dist/hex-editor-Bk6rxhfg.js.map +1 -0
- package/dist/{hex-editor-CMIxtNgT.d.ts → hex-editor-Caq8vNQk.d.ts} +2 -3
- package/dist/hex-editor-Caq8vNQk.d.ts.map +1 -0
- package/dist/hex.d.ts +1 -1
- package/dist/hex.js +1 -1
- package/dist/highlight-B-eQrhhb.js.map +1 -1
- package/dist/{icon-Ndo40kNO.js → icon-B22XVlCt.js} +6 -4
- package/dist/{icon-Ndo40kNO.js.map → icon-B22XVlCt.js.map} +1 -1
- package/dist/{icon-Bd5BiU4b.d.ts → icon-DpA9x2Ve.d.ts} +2 -3
- package/dist/icon-DpA9x2Ve.d.ts.map +1 -0
- package/dist/icons.d.ts +2 -2
- package/dist/icons.js +1 -1
- package/dist/{incr-search-CeERfijK.js → incr-search-2pz21xtR.js} +9 -6
- package/dist/incr-search-2pz21xtR.js.map +1 -0
- package/dist/incr-search.d.ts +1 -1
- package/dist/incr-search.js +1 -1
- package/dist/{index-CowKi2mo.d.ts → index-BeuCXtiO.d.ts} +3 -4
- package/dist/index-BeuCXtiO.d.ts.map +1 -0
- package/dist/{index-D87kRcEs.d.ts → index-BtGFYfaK.d.ts} +2 -1
- package/dist/index-BtGFYfaK.d.ts.map +1 -0
- package/dist/{index-s_IhSnwc.d.ts → index-CoqtMSd9.d.ts} +6 -4
- package/dist/index-CoqtMSd9.d.ts.map +1 -0
- package/dist/{index-9fGVAg1d.d.ts → index-Cxwxtj6g.d.ts} +3 -3
- package/dist/index-Cxwxtj6g.d.ts.map +1 -0
- package/dist/index-D_ftz_IT.d.ts +184 -0
- package/dist/index-D_ftz_IT.d.ts.map +1 -0
- package/dist/{index-_RTQSKHi.d.ts → index-DfEkTGvT.d.ts} +11 -11
- package/dist/index-DfEkTGvT.d.ts.map +1 -0
- package/dist/index.d.ts +44 -29
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +304 -3075
- package/dist/index.js.map +1 -1
- package/dist/keyboard-B5xD7Fz-.js +36 -0
- package/dist/keyboard-B5xD7Fz-.js.map +1 -0
- package/dist/{labelled-input-base-ORb1rGq6.d.ts → labelled-input-base-DiTme1JO.d.ts} +1 -2
- package/dist/labelled-input-base-DiTme1JO.d.ts.map +1 -0
- package/dist/{labelled-input-base-9K_w3oLj.js → labelled-input-base-hoKGwyKT.js} +2 -2
- package/dist/{labelled-input-base-9K_w3oLj.js.map → labelled-input-base-hoKGwyKT.js.map} +1 -1
- package/dist/labelled-radial-input.d.ts +5 -4
- package/dist/labelled-radial-input.d.ts.map +1 -1
- package/dist/labelled-radial-input.js +7 -3
- package/dist/labelled-radial-input.js.map +1 -1
- package/dist/labelled-range-input.d.ts +1 -1
- package/dist/labelled-range-input.js +27 -3
- package/dist/labelled-range-input.js.map +1 -1
- package/dist/led.d.ts +1 -2
- package/dist/led.d.ts.map +1 -1
- package/dist/led.js +1 -1
- package/dist/led.js.map +1 -1
- package/dist/{menu-vjoiHZ13.js → menu-g6yd7ddN.js} +8 -9
- package/dist/menu-g6yd7ddN.js.map +1 -0
- package/dist/{menu-item-COx-Azgj.d.ts → menu-item-DSyf9f_L.d.ts} +4 -4
- package/dist/menu-item-DSyf9f_L.d.ts.map +1 -0
- package/dist/{menu-item-BrIuORYD.js → menu-item-NUKwJ4s5.js} +3 -4
- package/dist/{menu-item-BrIuORYD.js.map → menu-item-NUKwJ4s5.js.map} +1 -1
- package/dist/menu.d.ts +2 -2
- package/dist/menu.js +2 -2
- package/dist/miller.d.ts +8 -5
- package/dist/miller.d.ts.map +1 -1
- package/dist/miller.js +22 -24
- package/dist/miller.js.map +1 -1
- package/dist/narrowed-text.d.ts +7 -3
- package/dist/narrowed-text.d.ts.map +1 -1
- package/dist/narrowed-text.js +73 -47
- package/dist/narrowed-text.js.map +1 -1
- package/dist/panel.d.ts +1 -1
- package/dist/panel.d.ts.map +1 -1
- package/dist/panel.js +2 -2
- package/dist/panel.js.map +1 -1
- package/dist/plots.d.ts +2 -2
- package/dist/plots.js +1 -1
- package/dist/polar-pad.d.ts +15 -3
- package/dist/polar-pad.d.ts.map +1 -1
- package/dist/polar-pad.js +64 -11
- package/dist/polar-pad.js.map +1 -1
- package/dist/{radial-input-CpQPs1Mp.d.ts → radial-input-DXMN55Nz.d.ts} +6 -4
- package/dist/radial-input-DXMN55Nz.d.ts.map +1 -0
- package/dist/{radial-input-DZ7eQCcM.js → radial-input-DxCrt_NE.js} +41 -19
- package/dist/radial-input-DxCrt_NE.js.map +1 -0
- package/dist/radial-input.d.ts +1 -1
- package/dist/radial-input.js +1 -1
- package/dist/range-input.d.ts +15 -4
- package/dist/range-input.d.ts.map +1 -1
- package/dist/range-input.js +23 -2
- package/dist/range-input.js.map +1 -1
- package/dist/range.d.ts +15 -4
- package/dist/range.d.ts.map +1 -1
- package/dist/range.js +23 -2
- package/dist/range.js.map +1 -1
- package/dist/selecthorizontal.d.ts +1 -2
- package/dist/selecthorizontal.d.ts.map +1 -1
- package/dist/selecthorizontal.js +1 -1
- package/dist/selecthorizontal.js.map +1 -1
- package/dist/slider-input-DFpG23bS.js +1592 -0
- package/dist/slider-input-DFpG23bS.js.map +1 -0
- package/dist/slider-input-XppH3vcy.d.ts +160 -0
- package/dist/slider-input-XppH3vcy.d.ts.map +1 -0
- package/dist/slider-input.d.ts +2 -0
- package/dist/slider-input.js +2 -0
- package/dist/snap-container.d.ts +1 -2
- package/dist/snap-container.d.ts.map +1 -1
- package/dist/snap-container.js +6 -5
- package/dist/snap-container.js.map +1 -1
- package/dist/split-layout.d.ts +1 -2
- package/dist/split-layout.d.ts.map +1 -1
- package/dist/split-layout.js +6 -4
- package/dist/split-layout.js.map +1 -1
- package/dist/swipe.d.ts +12 -2
- package/dist/swipe.d.ts.map +1 -1
- package/dist/swipe.js +22 -3
- package/dist/swipe.js.map +1 -1
- package/dist/{tab-list-DLzb-m-I.d.ts → tab-list-BohmbvqF.d.ts} +14 -5
- package/dist/tab-list-BohmbvqF.d.ts.map +1 -0
- package/dist/tab-list-DzknpdSo.js +592 -0
- package/dist/tab-list-DzknpdSo.js.map +1 -0
- package/dist/tabs.d.ts +2 -2
- package/dist/tabs.js +1 -208
- package/dist/{tickled-controller-BjYCzGrU.d.ts → tickled-controller-BF2Ea0DE.d.ts} +2 -31
- package/dist/tickled-controller-BF2Ea0DE.d.ts.map +1 -0
- package/dist/tickled-styles-fNDdqf6l.js.map +1 -1
- package/dist/{timeline-2OFtN4Ta.js → timeline-B2fgDL4U.js} +37 -1438
- package/dist/timeline-B2fgDL4U.js.map +1 -0
- package/dist/timeline.d.ts +1 -1
- package/dist/timeline.js +1 -1
- package/dist/{tooltip-RGVIwHrZ.d.ts → tooltip-BlvBUQxx.d.ts} +3 -3
- package/dist/tooltip-BlvBUQxx.d.ts.map +1 -0
- package/dist/{tree-D84RUgFC.js → tree-BnvzhsAw.js} +8 -9
- package/dist/tree-BnvzhsAw.js.map +1 -0
- package/dist/{tree-component-BaCSPWg1.d.ts → tree-component-DCmmKZ4j.d.ts} +8 -124
- package/dist/tree-component-DCmmKZ4j.d.ts.map +1 -0
- package/dist/tree.d.ts +10 -4
- package/dist/tree.d.ts.map +1 -1
- package/dist/tree.js +1 -1
- package/dist/types-DO3gt5vg.d.ts +130 -0
- package/dist/types-DO3gt5vg.d.ts.map +1 -0
- package/dist/wheel-nudge-BlSCe_hD.js +86 -0
- package/dist/wheel-nudge-BlSCe_hD.js.map +1 -0
- package/dist/wheel-nudge-DGrNzWuE.d.ts +29 -0
- package/dist/wheel-nudge-DGrNzWuE.d.ts.map +1 -0
- package/dist/{xy-axis-BeWRMmbo.d.ts → xy-axis-5KhVTNoX.d.ts} +30 -7
- package/dist/xy-axis-5KhVTNoX.d.ts.map +1 -0
- package/dist/xy-axis-CxHC8z5E.js +1849 -0
- package/dist/xy-axis-CxHC8z5E.js.map +1 -0
- package/dist/xy-pad.d.ts +13 -2
- package/dist/xy-pad.d.ts.map +1 -1
- package/dist/xy-pad.js +47 -6
- package/dist/xy-pad.js.map +1 -1
- package/docs-user/radial-input.md +2 -2
- package/package.json +21 -20
- package/dist/colour-C3MQIjFJ-vRCdr8W-.js +0 -3732
- package/dist/colour-C3MQIjFJ-vRCdr8W-.js.map +0 -1
- package/dist/colour-picker-0sgAha1T.js.map +0 -1
- package/dist/data-provider-DgI909FP.js.map +0 -1
- package/dist/dist-CA13FvMn.js +0 -980
- package/dist/dist-CA13FvMn.js.map +0 -1
- package/dist/hex-editor-CMIxtNgT.d.ts.map +0 -1
- package/dist/hex-editor-WZrjRtvL.js.map +0 -1
- package/dist/icon-Bd5BiU4b.d.ts.map +0 -1
- package/dist/incr-search-CeERfijK.js.map +0 -1
- package/dist/index-9fGVAg1d.d.ts.map +0 -1
- package/dist/index-CowKi2mo.d.ts.map +0 -1
- package/dist/index-D87kRcEs.d.ts.map +0 -1
- package/dist/index-DgXpCg_G.d.ts +0 -1244
- package/dist/index-DgXpCg_G.d.ts.map +0 -1
- package/dist/index-_RTQSKHi.d.ts.map +0 -1
- package/dist/index-s_IhSnwc.d.ts.map +0 -1
- package/dist/keyboard-CimiEskD.js +0 -20
- package/dist/keyboard-CimiEskD.js.map +0 -1
- package/dist/labelled-input-base-ORb1rGq6.d.ts.map +0 -1
- package/dist/menu-item-COx-Azgj.d.ts.map +0 -1
- package/dist/menu-vjoiHZ13.js.map +0 -1
- package/dist/radial-input-CpQPs1Mp.d.ts.map +0 -1
- package/dist/radial-input-DZ7eQCcM.js.map +0 -1
- package/dist/tab-list-DLzb-m-I.d.ts.map +0 -1
- package/dist/tabs.js.map +0 -1
- package/dist/tickled-controller-BjYCzGrU.d.ts.map +0 -1
- package/dist/timeline-2OFtN4Ta.js.map +0 -1
- package/dist/tooltip-RGVIwHrZ.d.ts.map +0 -1
- package/dist/tree-D84RUgFC.js.map +0 -1
- package/dist/tree-component-BaCSPWg1.d.ts.map +0 -1
- package/dist/types-DSfbtHs3.d.ts +0 -8
- package/dist/types-DSfbtHs3.d.ts.map +0 -1
- package/dist/xy-axis-BeWRMmbo.d.ts.map +0 -1
- package/dist/xy-axis-no0OL_O1.js +0 -7893
- package/dist/xy-axis-no0OL_O1.js.map +0 -1
- /package/bundle/{chunk-D7D4PA-g.js → rolldown-runtime-D7D4PA-g.js} +0 -0
- /package/dist/{chunk-D7D4PA-g.js → rolldown-runtime-D7D4PA-g.js} +0 -0
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Resolve the effective keyboard nudge step for a single numeric axis.
|
|
3
|
+
*
|
|
4
|
+
* Priority: stops (quantised grid) > explicit step > percentage of range.
|
|
5
|
+
*
|
|
6
|
+
* @param range max - min for the axis
|
|
7
|
+
* @param stops number of quantised divisions (undefined or ≤1 = ignored)
|
|
8
|
+
* @param step explicit absolute step size (undefined = ignored)
|
|
9
|
+
* @param defaultFraction fraction of range used when neither stops nor step is set (default 0.1 = 10%)
|
|
10
|
+
*/
|
|
11
|
+
function resolveStep(range, stops, step, defaultFraction = .1) {
|
|
12
|
+
if (stops !== void 0 && stops > 1) return range / stops;
|
|
13
|
+
if (step !== void 0) return step;
|
|
14
|
+
return range * defaultFraction;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* Resolve the effective nudge step after applying the Shift-key fine divisor.
|
|
18
|
+
*
|
|
19
|
+
* Convenience wrapper around `resolveStep` that combines step resolution with
|
|
20
|
+
* the Shift modifier. Hold Shift to nudge by 1/`KEY_STEP_DIVISOR` of the
|
|
21
|
+
* resolved step.
|
|
22
|
+
*
|
|
23
|
+
* @param range max - min for the axis
|
|
24
|
+
* @param stops number of quantised divisions (undefined or ≤1 = ignored)
|
|
25
|
+
* @param step explicit absolute step size (undefined = ignored)
|
|
26
|
+
* @param shiftKey whether the Shift modifier is held
|
|
27
|
+
* @param defaultFraction fraction of range used when neither stops nor step is set (default 0.1 = 10%)
|
|
28
|
+
*/
|
|
29
|
+
function resolveAxisStep(range, stops, step, shiftKey, defaultFraction = .1) {
|
|
30
|
+
const divisor = shiftKey ? 10 : 1;
|
|
31
|
+
return resolveStep(range, stops, step, defaultFraction) / divisor;
|
|
32
|
+
}
|
|
33
|
+
//#endregion
|
|
34
|
+
export { resolveAxisStep as t };
|
|
35
|
+
|
|
36
|
+
//# sourceMappingURL=keyboard-B5xD7Fz-.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"keyboard-B5xD7Fz-.js","names":[],"sources":["../src/keyboard.ts"],"sourcesContent":["/**\n * Keyboard interaction constants\n */\nexport const KEY_STEP_DIVISOR = 10;\n\n/**\n * Resolve the effective keyboard nudge step for a single numeric axis.\n *\n * Priority: stops (quantised grid) > explicit step > percentage of range.\n *\n * @param range max - min for the axis\n * @param stops number of quantised divisions (undefined or ≤1 = ignored)\n * @param step explicit absolute step size (undefined = ignored)\n * @param defaultFraction fraction of range used when neither stops nor step is set (default 0.1 = 10%)\n */\nexport function resolveStep(\n range: number,\n stops: number | undefined,\n step: number | undefined,\n defaultFraction = 0.1,\n): number {\n if (stops !== undefined && stops > 1)\n return range / stops;\n if (step !== undefined)\n return step;\n return range * defaultFraction;\n}\n\n/**\n * Resolve the effective nudge step after applying the Shift-key fine divisor.\n *\n * Convenience wrapper around `resolveStep` that combines step resolution with\n * the Shift modifier. Hold Shift to nudge by 1/`KEY_STEP_DIVISOR` of the\n * resolved step.\n *\n * @param range max - min for the axis\n * @param stops number of quantised divisions (undefined or ≤1 = ignored)\n * @param step explicit absolute step size (undefined = ignored)\n * @param shiftKey whether the Shift modifier is held\n * @param defaultFraction fraction of range used when neither stops nor step is set (default 0.1 = 10%)\n */\nexport function resolveAxisStep(\n range: number,\n stops: number | undefined,\n step: number | undefined,\n shiftKey: boolean,\n defaultFraction = 0.1,\n): number {\n const divisor = shiftKey ? KEY_STEP_DIVISOR : 1;\n return resolveStep(range, stops, step, defaultFraction) / divisor;\n}\n"],"mappings":";;;;;;;;;;AAeA,SAAgB,YACd,OACA,OACA,MACA,kBAAkB,IACV;CACR,IAAI,UAAU,KAAA,KAAa,QAAQ,GACjC,OAAO,QAAQ;CACjB,IAAI,SAAS,KAAA,GACX,OAAO;CACT,OAAO,QAAQ;AACjB;;;;;;;;;;;;;;AAeA,SAAgB,gBACd,OACA,OACA,MACA,UACA,kBAAkB,IACV;CACR,MAAM,UAAU,WAAA,KAA8B;CAC9C,OAAO,YAAY,OAAO,OAAO,MAAM,eAAe,IAAI;AAC5D"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { LitElement, nothing } from "lit";
|
|
2
|
-
|
|
3
2
|
//#region src/mixins/labelled-input-base.d.ts
|
|
4
3
|
declare abstract class LabelledInputBase extends LitElement {
|
|
5
4
|
label: string;
|
|
@@ -39,4 +38,4 @@ declare abstract class LabelledInputBase extends LitElement {
|
|
|
39
38
|
}
|
|
40
39
|
//#endregion
|
|
41
40
|
export { LabelledInputBase as t };
|
|
42
|
-
//# sourceMappingURL=labelled-input-base-
|
|
41
|
+
//# sourceMappingURL=labelled-input-base-DiTme1JO.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"labelled-input-base-DiTme1JO.d.ts","names":[],"sources":["../src/mixins/labelled-input-base.ts"],"mappings":";;uBAIsB,0BAA0B;EAClC;EAEgB;EACA;EACA;EACA;EACA;EAC+B;EAEI;EACC;EAEjB;YAE5B;YACA;YACA,cAAc;UAEzB;UACA;oBAEU;MAEd,cAAc;MAId,UAAU,SAAS;gBAIT;EAIL;EAMA;YAMC,cAAc,SAAS;YAcvB,sBAAuB,GAAG;IAAc;;YAWxC,qBAAsB,GAAG;IAAc;;YAavC,qBAAsB,GAAG;IAAc;;YAYvC,WAAW;YAYX,gCAAqB,wBAAA;EAuBtB,QAAQ,mBAAmB"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { t as __decorate } from "./decorate-
|
|
1
|
+
import { t as __decorate } from "./decorate-VRK8rslU.js";
|
|
2
2
|
import { LitElement, html, nothing } from "lit";
|
|
3
3
|
import { property, state } from "lit/decorators.js";
|
|
4
4
|
//#region src/mixins/labelled-input-util.ts
|
|
@@ -152,4 +152,4 @@ __decorate([state()], LabelledInputBase.prototype, "_formatter", void 0);
|
|
|
152
152
|
//#endregion
|
|
153
153
|
export { LabelledInputBase as t };
|
|
154
154
|
|
|
155
|
-
//# sourceMappingURL=labelled-input-base-
|
|
155
|
+
//# sourceMappingURL=labelled-input-base-hoKGwyKT.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"labelled-input-base-
|
|
1
|
+
{"version":3,"file":"labelled-input-base-hoKGwyKT.js","names":[],"sources":["../src/mixins/labelled-input-util.ts","../src/mixins/labelled-input-base.ts"],"sourcesContent":["export function clamp(value: number, min: number, max: number): number {\n return Math.min(Math.max(value, min), max);\n}\n\nexport function applyValue(\n el: Element | null,\n value: number,\n): void {\n if (el == null) {\n return;\n }\n (el as any).value = value;\n}\n","import { html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { applyValue } from './labelled-input-util.js';\n\nexport abstract class LabelledInputBase extends LitElement {\n @property() label = ``;\n\n @property({ type: Number }) min = 0;\n @property({ type: Number }) max = 1;\n @property({ type: Number }) value = 0;\n @property({ type: Number }) step = 0.01;\n @property({ type: Number }) precision = 0;\n @property({ type: Number, attribute: `drag-sensitivity` }) dragSensitivity = 1;\n\n @property({ type: Number, attribute: `mini-width-threshold` }) miniWidthThreshold = 120;\n @property({ type: Number, attribute: `mini-height-threshold` }) miniHeightThreshold = 45;\n\n @property({ attribute: `display-text-logic` }) displayTextLogic: `hidden` | `show` | `override` | `transient` = `transient`;\n\n @state() protected _isMini = false;\n @state() protected _isDragging = false;\n @state() protected _formatter?: (value: string) => string;\n\n private _debounceTimer: number | undefined = undefined;\n private _resizeObserver?: ResizeObserver;\n\n abstract readonly inputSelector: string;\n\n get formatter(): (value: string) => string {\n return this._formatter ?? ((v: string) => v);\n }\n\n set formatter(value: ((value: string) => string) | undefined) {\n this._formatter = value;\n }\n\n protected get hasCustomFormatter(): boolean {\n return this._formatter !== undefined;\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n this._resizeObserver = new ResizeObserver(entries => this._handleResize(entries));\n this._resizeObserver.observe(this);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._resizeObserver?.disconnect();\n this._resizeObserver = undefined;\n }\n\n protected _handleResize(entries: ResizeObserverEntry[]): void {\n const { width, height } = entries[0].contentRect;\n const miniOverride = getComputedStyle(this).getPropertyValue(`--mini`).trim();\n if (miniOverride === `1`) {\n this._isMini = true;\n return;\n }\n if (miniOverride === `0`) {\n this._isMini = false;\n return;\n }\n this._isMini = width < this.miniWidthThreshold || height < this.miniHeightThreshold;\n }\n\n protected _handleNumberChange = (e: CustomEvent<{ value: string }>): void => {\n const newValue = Number.parseFloat(e.detail.value);\n this.value = newValue;\n this._syncValue(newValue);\n this.dispatchEvent(new CustomEvent(`change`, {\n detail: { value: e.detail.value },\n bubbles: true,\n composed: true,\n }));\n };\n\n protected _handleInputChange = (e: CustomEvent<{ value: number }>): void => {\n this.value = e.detail.value;\n clearTimeout(this._debounceTimer);\n this._debounceTimer = window.setTimeout(() => {\n this._isDragging = false;\n }, 300);\n this.dispatchEvent(new CustomEvent(`change`, {\n detail: { value: String(e.detail.value) },\n bubbles: true,\n composed: true,\n }));\n };\n\n protected _handleSliderInput = (e: CustomEvent<{ value: number }>): void => {\n console.log(`[LABELLED-INPUT] _handleSliderInput called`, { value: e.detail.value, composedPath: e.composedPath() });\n this.value = e.detail.value;\n this._isDragging = true;\n clearTimeout(this._debounceTimer);\n this.dispatchEvent(new CustomEvent(`input`, {\n detail: { value: e.detail.value },\n bubbles: true,\n composed: true,\n }));\n };\n\n protected _syncValue(v: number): void {\n const input = this.renderRoot?.querySelector(this.inputSelector);\n if (input) {\n applyValue(input, v);\n }\n const editableNumber = this.renderRoot?.querySelector(`ixfx-editable-number`);\n if (editableNumber) {\n applyValue(editableNumber, v);\n (editableNumber as any)._requestDisplayUpdate?.();\n }\n }\n\n protected _renderEditableNumber() {\n if (this._isMini) {\n return nothing;\n }\n return html`\n <ixfx-editable-number\n class=\"number\"\n mode=\"label\"\n no-drag\n .value=${String(this.value)}\n .min=${this.min}\n .max=${this.max}\n .step=${this.step}\n .dragSensitivity=${this.dragSensitivity}\n .precision=${this.precision}\n .displayText=${this.label}\n .displayTextLogic=${this._isDragging ? `hidden` : this.displayTextLogic}\n .formatter=${this._formatter}\n @change=${this._handleNumberChange}\n ></ixfx-editable-number>\n `;\n }\n\n override updated(changedProperties: Map<string, unknown>): void {\n super.updated(changedProperties);\n if (changedProperties.has(`value`)) {\n this._syncValue(this.value);\n }\n }\n}\n"],"mappings":"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"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import { t as LabelledInputBase } from "./labelled-input-base-
|
|
2
|
-
import { i as MarkerStyle, l as ValueMode } from "./radial-input-
|
|
1
|
+
import { t as LabelledInputBase } from "./labelled-input-base-DiTme1JO.js";
|
|
2
|
+
import { i as MarkerStyle, l as ValueMode } from "./radial-input-DXMN55Nz.js";
|
|
3
3
|
import { CSSResultGroup, nothing } from "lit";
|
|
4
|
-
|
|
5
4
|
//#region src/labelled-radial-input/labelled-radial-input.d.ts
|
|
6
5
|
declare class LabelledRadialInput extends LabelledInputBase {
|
|
7
6
|
readonly inputSelector = "ixfx-radial-input";
|
|
@@ -15,6 +14,8 @@ declare class LabelledRadialInput extends LabelledInputBase {
|
|
|
15
14
|
tooltip: boolean;
|
|
16
15
|
flip: boolean;
|
|
17
16
|
aspectRatioThreshold: number;
|
|
17
|
+
/** Pass-through: enables wheel-on-hover for the inner dial and editable-number. */
|
|
18
|
+
lighttouch: boolean;
|
|
18
19
|
private _isWide;
|
|
19
20
|
private _getEffectivePrecision;
|
|
20
21
|
protected _handleResize(entries: ResizeObserverEntry[]): void;
|
|
@@ -27,7 +28,7 @@ declare global {
|
|
|
27
28
|
interface HTMLElementTagNameMap {
|
|
28
29
|
'ixfx-labelled-radial-input': LabelledRadialInput;
|
|
29
30
|
}
|
|
30
|
-
}
|
|
31
|
+
}
|
|
31
32
|
//#endregion
|
|
32
33
|
export { LabelledRadialInput };
|
|
33
34
|
//# sourceMappingURL=labelled-radial-input.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"labelled-radial-input.d.ts","names":[],"sources":["../src/labelled-radial-input/labelled-radial-input.ts"],"mappings":"
|
|
1
|
+
{"version":3,"file":"labelled-radial-input.d.ts","names":[],"sources":["../src/labelled-radial-input/labelled-radial-input.ts"],"mappings":";;;;cA0Da,4BAA4B;WAC9B;EAGA;EACA;EAEmB;EACA;EAC2B,aAAa;EACvC;EACwB,WAAW;EACnC;EACA;EAEoC;;EAGpC;UAEZ;UAIT;YAeW,cAAc,SAAS;YAMvB,gCAAqB,wBAAA;EA0B/B,wBAAM;UA6BP;SAYD,QAAQ;;QA0ET;YACI;IACR,8BAA8B"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { t as themeFallbacks } from "./fallbacks-pNMOMx38.js";
|
|
2
|
-
import { n as safeCustomElement, t as __decorate } from "./decorate-
|
|
3
|
-
import { t as LabelledInputBase } from "./labelled-input-base-
|
|
4
|
-
import "./radial-input-
|
|
2
|
+
import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
|
|
3
|
+
import { t as LabelledInputBase } from "./labelled-input-base-hoKGwyKT.js";
|
|
4
|
+
import "./radial-input-DxCrt_NE.js";
|
|
5
5
|
import { css, html, nothing } from "lit";
|
|
6
6
|
import { property, state } from "lit/decorators.js";
|
|
7
7
|
//#region src/labelled-radial-input/labelled-radial-input.ts
|
|
@@ -19,6 +19,7 @@ let LabelledRadialInput = class LabelledRadialInput extends LabelledInputBase {
|
|
|
19
19
|
this.tooltip = false;
|
|
20
20
|
this.flip = false;
|
|
21
21
|
this.aspectRatioThreshold = 1.5;
|
|
22
|
+
this.lighttouch = false;
|
|
22
23
|
this._isWide = false;
|
|
23
24
|
}
|
|
24
25
|
_getEffectivePrecision() {
|
|
@@ -42,6 +43,7 @@ let LabelledRadialInput = class LabelledRadialInput extends LabelledInputBase {
|
|
|
42
43
|
class="number"
|
|
43
44
|
mode="label"
|
|
44
45
|
no-drag
|
|
46
|
+
?lighttouch=${this.lighttouch}
|
|
45
47
|
.value=${String(this.value)}
|
|
46
48
|
.min=${this.min}
|
|
47
49
|
.max=${this.max}
|
|
@@ -64,6 +66,7 @@ let LabelledRadialInput = class LabelledRadialInput extends LabelledInputBase {
|
|
|
64
66
|
${this._renderEditableNumber()}
|
|
65
67
|
<ixfx-radial-input
|
|
66
68
|
class="dial"
|
|
69
|
+
?lighttouch=${this.lighttouch}
|
|
67
70
|
.value=${this.value}
|
|
68
71
|
.min=${this.min}
|
|
69
72
|
.max=${this.max}
|
|
@@ -181,6 +184,7 @@ __decorate([property({
|
|
|
181
184
|
type: Number,
|
|
182
185
|
attribute: `aspect-ratio-threshold`
|
|
183
186
|
})], LabelledRadialInput.prototype, "aspectRatioThreshold", void 0);
|
|
187
|
+
__decorate([property({ type: Boolean })], LabelledRadialInput.prototype, "lighttouch", void 0);
|
|
184
188
|
__decorate([state()], LabelledRadialInput.prototype, "_isWide", void 0);
|
|
185
189
|
LabelledRadialInput = __decorate([safeCustomElement(`ixfx-labelled-radial-input`)], LabelledRadialInput);
|
|
186
190
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"labelled-radial-input.js","names":["customElement"],"sources":["../src/labelled-radial-input/labelled-radial-input.ts"],"sourcesContent":["/**\n * <ixfx-labelled-radial-input> — labelled radial input combining ixfx-editable-number and ixfx-radial-input.\n *\n * Layout is driven by container queries on the component's own aspect ratio (width / height):\n * - width / height >= 1.5 (wide) → horizontal layout (label to the left of dial)\n * - width / height < 1.5 (tall/square) → vertical layout (label above dial)\n *\n * Mini mode: hides ixfx-editable-number, shows only the dial with tooltip forced on.\n * Triggered when width < --mini-width-threshold (default 120px)\n * OR height < --mini-height-threshold (default 45px).\n * Force on/off with CSS variable: --mini: 1 (always mini) | 0 (never mini).\n *\n * Override layout entirely with --flow: row | column.\n *\n * CSS variables (passes through to ixfx-radial-input):\n * --dial-border-width, --dial-border-color, --dial-fill, --radius\n * --marker-color, --marker-thickness, --marker-length, --marker-offset\n * --marker-border-width, --marker-border-color\n * --midpoint-color, --midpoint-thickness, --midpoint-length, --midpoint-offset\n * --lane-width, --lane-color, --lane-border-width, --lane-offset, --lane-dasharray\n * --wedge-fill, --wedge-fill-opacity, --wedge-border-width, --wedge-border-color\n *\n * Properties:\n * label Label text content\n * min / max / value / step Range bounds and current value\n * drag-sensitivity Steps per pixel of drag (default: 1)\n * precision Decimal places (default: 0)\n * radius Dial size, 10-50 range (default: 45)\n * flatten How much circle to hide, 0-1 (default: 0.3)\n * markerStyle 'needle' | 'dot' | 'none' (default: 'needle')\n * wedge Show filled wedge sector (default: false)\n * valueMode 'range' | 'bipolar' | 'unipolar' (default: 'range')\n * aspectRatioThreshold Width/height ratio to trigger horizontal layout (default: 1.5)\n * mini-width-threshold Width (in pixels) below which mini mode activates (default: 120)\n * mini-height-threshold Height (in pixels) below which mini mode activates (default: 45)\n * tooltip Boolean — show dial tooltip\n * flip Boolean — place label after dial (bottom in vertical, right in horizontal)\n * display-text-logic 'hidden' | 'show' | 'override' | 'transient'\n * formatter Function (value: string) => string — formats value for display\n *\n * Events:\n * change — CustomEvent<{ value: string }>, bubbles + composed\n * Fired when value changes via dial or editable-number commit\n * input — CustomEvent<{ value: number }>, bubbles + composed\n * Fired on every dial interaction\n */\nimport type { CSSResultGroup } from 'lit';\nimport type { MarkerStyle, ValueMode } from '../radial-input/types.js';\nimport { css, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { LabelledInputBase } from '../mixins/labelled-input-base.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\nimport '../radial-input/radial-input.js';\n\n@customElement(`ixfx-labelled-radial-input`)\nexport class LabelledRadialInput extends LabelledInputBase {\n readonly inputSelector = `ixfx-radial-input`;\n\n // Override LabelledInputBase defaults (max=1, step=0.01) to match ixfx-radial-input defaults\n override max = 100;\n override step = 1;\n\n @property({ type: Number }) radius = 45;\n @property({ type: Number }) flatten = 0.3;\n @property({ type: String, attribute: `marker-style` }) markerStyle: MarkerStyle = `needle`;\n @property({ type: Boolean }) wedge = false;\n @property({ type: String, attribute: `value-mode` }) valueMode: ValueMode = `range`;\n @property({ type: Boolean }) tooltip = false;\n @property({ type: Boolean }) flip = false;\n\n @property({ type: Number, attribute: `aspect-ratio-threshold` }) aspectRatioThreshold = 1.5;\n\n @state() private _isWide = false;\n\n // Returns effective precision: uses explicit value if set, otherwise computes based on step or range.\n // Prefers step-derived precision, falls back to range-based heuristic.\n private _getEffectivePrecision(): number {\n if (this.hasAttribute(`precision`)) {\n return this.precision;\n }\n // If step is set, derive precision from it (e.g., step=0.5 → precision=1, step=1 → precision=0)\n if (this.step !== undefined) {\n const stepStr = String(this.step);\n const decimalPart = stepStr.split(`.`)[1];\n return decimalPart ? decimalPart.length : 0;\n }\n // Fallback: range > 10 → precision 0 (integers), range <= 10 → precision 2\n const range = this.max - this.min;\n return range > 10 ? 0 : 2;\n }\n\n protected override _handleResize(entries: ResizeObserverEntry[]): void {\n super._handleResize(entries);\n const { width, height } = entries[0].contentRect;\n this._isWide = height > 0 && (width / height) >= this.aspectRatioThreshold;\n }\n\n protected override _renderEditableNumber() {\n if (this._isMini) {\n return nothing;\n }\n const labelMinWidth = Math.max(this.label?.length ?? 0, 3) + 1;\n return html`\n <ixfx-editable-number\n class=\"number\"\n mode=\"label\"\n no-drag\n .value=${String(this.value)}\n .min=${this.min}\n .max=${this.max}\n .step=${this.step}\n .dragSensitivity=${this.dragSensitivity}\n .precision=${this._getEffectivePrecision()}\n .displayText=${this.label}\n .displayTextLogic=${this._isDragging ? `hidden` : this.displayTextLogic}\n .formatter=${this._formatter}\n style=\"--label-min-width: var(--label-width, ${labelMinWidth}ch); --label-align: center;\"\n @change=${this._handleNumberChange}\n ></ixfx-editable-number>\n `;\n }\n\n override render() {\n const showTooltip = this.tooltip || this._isMini;\n const tooltipValue = this._getTooltipValue();\n\n return html`\n <div class=\"wrap ${this._isMini ? `mini` : ``} ${this._isWide ? `wide` : ``} ${this.flip ? `flip` : ``}\">\n ${this._renderEditableNumber()}\n <ixfx-radial-input\n class=\"dial\"\n .value=${this.value}\n .min=${this.min}\n .max=${this.max}\n .step=${this.step}\n .radius=${this.radius}\n .flatten=${this.flatten}\n .markerStyle=${this.markerStyle}\n ?wedge=${this.wedge}\n .valueMode=${this.valueMode}\n data-tooltip-anchor=\"top\"\n data-tooltip=${tooltipValue}\n data-tooltip-live=${showTooltip ? `input` : nothing}\n @input=${this._handleSliderInput}\n @change=${this._handleInputChange}\n ></ixfx-radial-input>\n </div>\n `;\n }\n\n private _getTooltipValue(): string {\n const range = this.max - this.min;\n const numValue = Number(this.value);\n if (this.min === 0 && this.max === 1) {\n return `${Math.round(numValue * 100)}%`;\n }\n if (range > 10) {\n return String(Math.floor(numValue));\n }\n return numValue.toFixed(2);\n }\n\n static styles: CSSResultGroup = [themeFallbacks, css`\n :host {\n display: block;\n min-height: var(--min-height, 60px);\n min-width: var(--min-width, 60px);\n width: var(--width, auto);\n height: var(--height, auto);\n }\n\n :host(:focus-within) {\n outline: 2px solid var(--accent);\n outline-offset: 2px;\n }\n\n .wrap {\n display: flex;\n width: 100%;\n height: 100%;\n align-items: center;\n justify-content: center;\n flex-direction: var(--flow, column);\n }\n\n ixfx-editable-number {\n flex-shrink: 0;\n --label-align: center;\n width: 100%;\n }\n\n ixfx-radial-input {\n flex-shrink: 1;\n min-height: 0;\n min-width: 0;\n max-width: 100%;\n --radial-input-svg-focus-outline: none;\n --radial-input-svg-focus-outline-offset: 0;\n --prominence-tickled-opacity: 1;\n --prominence-tickled-saturate: 1;\n }\n\n /* Wide layout (aspect ratio >= threshold): label to the left of dial */\n .wrap.wide {\n flex-direction: var(--flow, row);\n justify-content: space-evenly;\n }\n\n .wrap.wide ixfx-editable-number {\n --label-align: left;\n width: var(--label-width, 5ch);\n }\n\n .wrap.wide ixfx-radial-input {\n height: auto;\n max-width: none;\n }\n\n /* Flip: label after dial (bottom in column, right in row) */\n .wrap.flip ixfx-editable-number {\n order: 1;\n }\n\n /* Mini mode: dial fills the component */\n .wrap.mini {\n justify-content: center;\n gap: 0;\n }\n\n .wrap.mini ixfx-radial-input {\n width: 100%;\n height: 100%;\n }\n `];\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ixfx-labelled-radial-input': LabelledRadialInput;\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"labelled-radial-input.js","names":["customElement"],"sources":["../src/labelled-radial-input/labelled-radial-input.ts"],"sourcesContent":["/**\n * <ixfx-labelled-radial-input> — labelled radial input combining ixfx-editable-number and ixfx-radial-input.\n *\n * Layout is driven by container queries on the component's own aspect ratio (width / height):\n * - width / height >= 1.5 (wide) → horizontal layout (label to the left of dial)\n * - width / height < 1.5 (tall/square) → vertical layout (label above dial)\n *\n * Mini mode: hides ixfx-editable-number, shows only the dial with tooltip forced on.\n * Triggered when width < --mini-width-threshold (default 120px)\n * OR height < --mini-height-threshold (default 45px).\n * Force on/off with CSS variable: --mini: 1 (always mini) | 0 (never mini).\n *\n * Override layout entirely with --flow: row | column.\n *\n * CSS variables (passes through to ixfx-radial-input):\n * --dial-border-width, --dial-border-color, --dial-fill, --radius\n * --marker-color, --marker-thickness, --marker-length, --marker-offset\n * --marker-border-width, --marker-border-color\n * --midpoint-color, --midpoint-thickness, --midpoint-length, --midpoint-offset\n * --lane-width, --lane-color, --lane-border-width, --lane-offset, --lane-dasharray\n * --wedge-fill, --wedge-fill-opacity, --wedge-border-width, --wedge-border-color\n *\n * Properties:\n * label Label text content\n * min / max / value / step Range bounds and current value\n * drag-sensitivity Steps per pixel of drag (default: 1)\n * precision Decimal places (default: 0)\n * radius Dial size, 10-50 range (default: 45)\n * flatten How much circle to hide, 0-1 (default: 0.3)\n * markerStyle 'needle' | 'dot' | 'none' (default: 'needle')\n * wedge Show filled wedge sector (default: false)\n * valueMode 'range' | 'bipolar' | 'unipolar' (default: 'range')\n * aspectRatioThreshold Width/height ratio to trigger horizontal layout (default: 1.5)\n * mini-width-threshold Width (in pixels) below which mini mode activates (default: 120)\n * mini-height-threshold Height (in pixels) below which mini mode activates (default: 45)\n * tooltip Boolean — show dial tooltip\n * flip Boolean — place label after dial (bottom in vertical, right in horizontal)\n * display-text-logic 'hidden' | 'show' | 'override' | 'transient'\n * formatter Function (value: string) => string — formats value for display\n * lighttouch Boolean — passed through to the inner dial and editable-number so wheel\n * adjusts the value on hover instead of requiring focus on either\n *\n * Events:\n * change — CustomEvent<{ value: string }>, bubbles + composed\n * Fired when value changes via dial or editable-number commit\n * input — CustomEvent<{ value: number }>, bubbles + composed\n * Fired on every dial interaction\n */\nimport type { CSSResultGroup } from 'lit';\nimport type { MarkerStyle, ValueMode } from '../radial-input/types.js';\nimport { css, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { LabelledInputBase } from '../mixins/labelled-input-base.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\nimport '../radial-input/radial-input.js';\n\n@customElement(`ixfx-labelled-radial-input`)\nexport class LabelledRadialInput extends LabelledInputBase {\n readonly inputSelector = `ixfx-radial-input`;\n\n // Override LabelledInputBase defaults (max=1, step=0.01) to match ixfx-radial-input defaults\n override max = 100;\n override step = 1;\n\n @property({ type: Number }) radius = 45;\n @property({ type: Number }) flatten = 0.3;\n @property({ type: String, attribute: `marker-style` }) markerStyle: MarkerStyle = `needle`;\n @property({ type: Boolean }) wedge = false;\n @property({ type: String, attribute: `value-mode` }) valueMode: ValueMode = `range`;\n @property({ type: Boolean }) tooltip = false;\n @property({ type: Boolean }) flip = false;\n\n @property({ type: Number, attribute: `aspect-ratio-threshold` }) aspectRatioThreshold = 1.5;\n\n /** Pass-through: enables wheel-on-hover for the inner dial and editable-number. */\n @property({ type: Boolean }) lighttouch = false;\n\n @state() private _isWide = false;\n\n // Returns effective precision: uses explicit value if set, otherwise computes based on step or range.\n // Prefers step-derived precision, falls back to range-based heuristic.\n private _getEffectivePrecision(): number {\n if (this.hasAttribute(`precision`)) {\n return this.precision;\n }\n // If step is set, derive precision from it (e.g., step=0.5 → precision=1, step=1 → precision=0)\n if (this.step !== undefined) {\n const stepStr = String(this.step);\n const decimalPart = stepStr.split(`.`)[1];\n return decimalPart ? decimalPart.length : 0;\n }\n // Fallback: range > 10 → precision 0 (integers), range <= 10 → precision 2\n const range = this.max - this.min;\n return range > 10 ? 0 : 2;\n }\n\n protected override _handleResize(entries: ResizeObserverEntry[]): void {\n super._handleResize(entries);\n const { width, height } = entries[0].contentRect;\n this._isWide = height > 0 && (width / height) >= this.aspectRatioThreshold;\n }\n\n protected override _renderEditableNumber() {\n if (this._isMini) {\n return nothing;\n }\n const labelMinWidth = Math.max(this.label?.length ?? 0, 3) + 1;\n return html`\n <ixfx-editable-number\n class=\"number\"\n mode=\"label\"\n no-drag\n ?lighttouch=${this.lighttouch}\n .value=${String(this.value)}\n .min=${this.min}\n .max=${this.max}\n .step=${this.step}\n .dragSensitivity=${this.dragSensitivity}\n .precision=${this._getEffectivePrecision()}\n .displayText=${this.label}\n .displayTextLogic=${this._isDragging ? `hidden` : this.displayTextLogic}\n .formatter=${this._formatter}\n style=\"--label-min-width: var(--label-width, ${labelMinWidth}ch); --label-align: center;\"\n @change=${this._handleNumberChange}\n ></ixfx-editable-number>\n `;\n }\n\n override render() {\n const showTooltip = this.tooltip || this._isMini;\n const tooltipValue = this._getTooltipValue();\n\n return html`\n <div class=\"wrap ${this._isMini ? `mini` : ``} ${this._isWide ? `wide` : ``} ${this.flip ? `flip` : ``}\">\n ${this._renderEditableNumber()}\n <ixfx-radial-input\n class=\"dial\"\n ?lighttouch=${this.lighttouch}\n .value=${this.value}\n .min=${this.min}\n .max=${this.max}\n .step=${this.step}\n .radius=${this.radius}\n .flatten=${this.flatten}\n .markerStyle=${this.markerStyle}\n ?wedge=${this.wedge}\n .valueMode=${this.valueMode}\n data-tooltip-anchor=\"top\"\n data-tooltip=${tooltipValue}\n data-tooltip-live=${showTooltip ? `input` : nothing}\n @input=${this._handleSliderInput}\n @change=${this._handleInputChange}\n ></ixfx-radial-input>\n </div>\n `;\n }\n\n private _getTooltipValue(): string {\n const range = this.max - this.min;\n const numValue = Number(this.value);\n if (this.min === 0 && this.max === 1) {\n return `${Math.round(numValue * 100)}%`;\n }\n if (range > 10) {\n return String(Math.floor(numValue));\n }\n return numValue.toFixed(2);\n }\n\n static styles: CSSResultGroup = [themeFallbacks, css`\n :host {\n display: block;\n min-height: var(--min-height, 60px);\n min-width: var(--min-width, 60px);\n width: var(--width, auto);\n height: var(--height, auto);\n }\n\n :host(:focus-within) {\n outline: 2px solid var(--accent);\n outline-offset: 2px;\n }\n\n .wrap {\n display: flex;\n width: 100%;\n height: 100%;\n align-items: center;\n justify-content: center;\n flex-direction: var(--flow, column);\n }\n\n ixfx-editable-number {\n flex-shrink: 0;\n --label-align: center;\n width: 100%;\n }\n\n ixfx-radial-input {\n flex-shrink: 1;\n min-height: 0;\n min-width: 0;\n max-width: 100%;\n --radial-input-svg-focus-outline: none;\n --radial-input-svg-focus-outline-offset: 0;\n --prominence-tickled-opacity: 1;\n --prominence-tickled-saturate: 1;\n }\n\n /* Wide layout (aspect ratio >= threshold): label to the left of dial */\n .wrap.wide {\n flex-direction: var(--flow, row);\n justify-content: space-evenly;\n }\n\n .wrap.wide ixfx-editable-number {\n --label-align: left;\n width: var(--label-width, 5ch);\n }\n\n .wrap.wide ixfx-radial-input {\n height: auto;\n max-width: none;\n }\n\n /* Flip: label after dial (bottom in column, right in row) */\n .wrap.flip ixfx-editable-number {\n order: 1;\n }\n\n /* Mini mode: dial fills the component */\n .wrap.mini {\n justify-content: center;\n gap: 0;\n }\n\n .wrap.mini ixfx-radial-input {\n width: 100%;\n height: 100%;\n }\n `];\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ixfx-labelled-radial-input': LabelledRadialInput;\n }\n}\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as LabelledRangeInput } from "./index-
|
|
1
|
+
import { t as LabelledRangeInput } from "./index-CoqtMSd9.js";
|
|
2
2
|
export { LabelledRangeInput };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { n as safeCustomElement, t as __decorate } from "./decorate-
|
|
2
|
-
import { t as LabelledInputBase } from "./labelled-input-base-
|
|
1
|
+
import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
|
|
2
|
+
import { t as LabelledInputBase } from "./labelled-input-base-hoKGwyKT.js";
|
|
3
3
|
import { css, html } from "lit";
|
|
4
4
|
import { property } from "lit/decorators.js";
|
|
5
5
|
//#region src/labelled-range-input/labelled-range-input.ts
|
|
@@ -11,16 +11,39 @@ let LabelledRangeInput = class LabelledRangeInput extends LabelledInputBase {
|
|
|
11
11
|
this.tooltip = false;
|
|
12
12
|
this.noTooltip = false;
|
|
13
13
|
this.tooltipOrientation = `top`;
|
|
14
|
+
this.lighttouch = false;
|
|
14
15
|
this.switchHeight = 80;
|
|
15
16
|
}
|
|
17
|
+
_renderEditableNumber() {
|
|
18
|
+
if (this._isMini) return html``;
|
|
19
|
+
return html`
|
|
20
|
+
<ixfx-editable-number
|
|
21
|
+
class="number"
|
|
22
|
+
mode="label"
|
|
23
|
+
no-drag
|
|
24
|
+
?lighttouch=${this.lighttouch}
|
|
25
|
+
.value=${String(this.value)}
|
|
26
|
+
.min=${this.min}
|
|
27
|
+
.max=${this.max}
|
|
28
|
+
.step=${this.step}
|
|
29
|
+
.dragSensitivity=${this.dragSensitivity}
|
|
30
|
+
.precision=${this.precision}
|
|
31
|
+
.displayText=${this.label}
|
|
32
|
+
.displayTextLogic=${this._isDragging ? `hidden` : this.displayTextLogic}
|
|
33
|
+
.formatter=${this._formatter}
|
|
34
|
+
@change=${this._handleNumberChange}
|
|
35
|
+
></ixfx-editable-number>
|
|
36
|
+
`;
|
|
37
|
+
}
|
|
16
38
|
render() {
|
|
17
39
|
const sliderLabelFormatter = this._formatter ? (raw) => this._formatter(String(raw)) : void 0;
|
|
18
40
|
const showTooltip = !this.noTooltip && (this.tooltip || this._isMini);
|
|
19
41
|
return html`
|
|
20
42
|
<div class="wrap ${this._isMini ? `mini` : ``}">
|
|
21
|
-
${
|
|
43
|
+
${this._renderEditableNumber()}
|
|
22
44
|
<ixfx-range-input
|
|
23
45
|
class="slider"
|
|
46
|
+
?lighttouch=${this.lighttouch}
|
|
24
47
|
.value=${this.value}
|
|
25
48
|
.min=${this.min}
|
|
26
49
|
.max=${this.max}
|
|
@@ -121,6 +144,7 @@ __decorate([property({
|
|
|
121
144
|
type: String,
|
|
122
145
|
attribute: `tooltip-orientation`
|
|
123
146
|
})], LabelledRangeInput.prototype, "tooltipOrientation", void 0);
|
|
147
|
+
__decorate([property({ type: Boolean })], LabelledRangeInput.prototype, "lighttouch", void 0);
|
|
124
148
|
__decorate([property({
|
|
125
149
|
type: Number,
|
|
126
150
|
attribute: `switch-height`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"labelled-range-input.js","names":["customElement"],"sources":["../src/labelled-range-input/labelled-range-input.ts"],"sourcesContent":["/**\n * <ixfx-labelled-range-input> — labelled range input combining ixfx-editable-number and ixfx-range-input.\n *\n * Layout is driven by container queries on the component's own height:\n * - height >= 80px → vertical (label above slider) — the default with height: 100px\n * - height < 80px → horizontal (label beside slider)\n *\n * Mini mode: hides ixfx-editable-number, shows only the slider with tooltip forced on.\n * Triggered when width < --mini-width-threshold (default 120px)\n * OR height < --mini-height-threshold (default 45px).\n * Force on/off with CSS variable: --mini: 1 (always mini) | 0 (never mini).\n *\n * Override layout entirely with --flow: row | column (bypasses the container query).\n * Override height with --height (e.g. --height: 100% to fill a constrained container).\n * Override the editable-number width (horizontal layout only) with --label-width (e.g. 4em).\n *\n * CSS variables (passes through to child components):\n *\n * From ixfx-editable-number:\n * --label-font-size (default: var(--text-m))\n * --label-font-family (default: var(--font-family))\n * --label-color (default: var(--surface-2-text))\n * --label-muted-color (default: var(--surface-muted-text))\n * --label-padding (default: var(--space-xs) var(--space-s))\n * --label-radius (default: var(--radius-s))\n * --label-align (default: center)\n *\n * From ixfx-range-input:\n * --track-thickness (default: 1.5em)\n * --thumb-color (default: var(--surface-2-text))\n * --thumb-color-active (default: var(--accent))\n * --thumb-size (default: var(--track-thickness))\n * --thumb-thickness (default: 2em)\n * --thumb-radius (default: 0)\n * --thumb-border (default: none)\n * --thumb-shadow (default: none)\n * --background-track (default: var(--surface-4))\n * --background-track-hover (default: --background-track)\n * --background-track-value (default: var(--surface-6))\n * --background-track-value-hover (default: var(--accent))\n * --background-track-value-active (default: var(--accent))\n *\n * Properties:\n * label Label text content\n * min / max / value / step Range bounds and current value\n * drag-sensitivity Steps per pixel of drag (default: 1)\n * precision Decimal places (default: 0)\n * orientation 'horizontal' | 'vertical' (slider orientation)\n * tooltip Boolean — show slider tooltip\n * tooltip-orientation 'top' | 'right'\n * switch-height Height threshold for vertical↔horizontal switch (default: 80)\n * mini-width-threshold Width (in pixels) below which mini mode activates (default: 120)\n * mini-height-threshold Height (in pixels) below which mini mode activates (default: 45)\n * display-text-logic 'hidden' | 'show' | 'override' | 'transient'\n * formatter Function (value: string) => string — formats value for display and tooltip\n *\n * Events:\n * change — CustomEvent<{ value: string }>, bubbles + composed\n * Fired when value changes via slider or editable-number commit\n * input — CustomEvent<{ value: number }>, bubbles + composed\n * Fired on every slider move\n */\nimport type { CSSResultGroup } from 'lit';\nimport { css, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { LabelledInputBase } from '../mixins/labelled-input-base.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\n@customElement(`ixfx-labelled-range-input`)\nexport class LabelledRangeInput extends LabelledInputBase {\n readonly inputSelector = `ixfx-range-input`;\n\n @property({ type: String }) orientation: `horizontal` | `vertical` = `horizontal`;\n @property({ type: Boolean }) tooltip = false;\n @property({ type: Boolean, attribute: `no-tooltip` }) noTooltip = false;\n @property({ type: String, attribute: `tooltip-orientation` }) tooltipOrientation: `top` | `right` = `top`;\n\n @property({ type: Number, attribute: `switch-height` }) switchHeight = 80;\n\n override render() {\n const sliderLabelFormatter = this._formatter\n ? (raw: number) => this._formatter!(String(raw))\n : undefined;\n const showTooltip = !this.noTooltip && (this.tooltip || this._isMini);\n\n return html`\n <div class=\"wrap ${this._isMini ? `mini` : ``}\">\n ${
|
|
1
|
+
{"version":3,"file":"labelled-range-input.js","names":["customElement"],"sources":["../src/labelled-range-input/labelled-range-input.ts"],"sourcesContent":["/**\n * <ixfx-labelled-range-input> — labelled range input combining ixfx-editable-number and ixfx-range-input.\n *\n * Layout is driven by container queries on the component's own height:\n * - height >= 80px → vertical (label above slider) — the default with height: 100px\n * - height < 80px → horizontal (label beside slider)\n *\n * Mini mode: hides ixfx-editable-number, shows only the slider with tooltip forced on.\n * Triggered when width < --mini-width-threshold (default 120px)\n * OR height < --mini-height-threshold (default 45px).\n * Force on/off with CSS variable: --mini: 1 (always mini) | 0 (never mini).\n *\n * Override layout entirely with --flow: row | column (bypasses the container query).\n * Override height with --height (e.g. --height: 100% to fill a constrained container).\n * Override the editable-number width (horizontal layout only) with --label-width (e.g. 4em).\n *\n * CSS variables (passes through to child components):\n *\n * From ixfx-editable-number:\n * --label-font-size (default: var(--text-m))\n * --label-font-family (default: var(--font-family))\n * --label-color (default: var(--surface-2-text))\n * --label-muted-color (default: var(--surface-muted-text))\n * --label-padding (default: var(--space-xs) var(--space-s))\n * --label-radius (default: var(--radius-s))\n * --label-align (default: center)\n *\n * From ixfx-range-input:\n * --track-thickness (default: 1.5em)\n * --thumb-color (default: var(--surface-2-text))\n * --thumb-color-active (default: var(--accent))\n * --thumb-size (default: var(--track-thickness))\n * --thumb-thickness (default: 2em)\n * --thumb-radius (default: 0)\n * --thumb-border (default: none)\n * --thumb-shadow (default: none)\n * --background-track (default: var(--surface-4))\n * --background-track-hover (default: --background-track)\n * --background-track-value (default: var(--surface-6))\n * --background-track-value-hover (default: var(--accent))\n * --background-track-value-active (default: var(--accent))\n *\n * Properties:\n * label Label text content\n * min / max / value / step Range bounds and current value\n * drag-sensitivity Steps per pixel of drag (default: 1)\n * precision Decimal places (default: 0)\n * orientation 'horizontal' | 'vertical' (slider orientation)\n * tooltip Boolean — show slider tooltip\n * tooltip-orientation 'top' | 'right'\n * switch-height Height threshold for vertical↔horizontal switch (default: 80)\n * mini-width-threshold Width (in pixels) below which mini mode activates (default: 120)\n * mini-height-threshold Height (in pixels) below which mini mode activates (default: 45)\n * display-text-logic 'hidden' | 'show' | 'override' | 'transient'\n * formatter Function (value: string) => string — formats value for display and tooltip\n * lighttouch Boolean — passed through to the inner slider and editable-number so wheel\n * adjusts the value on hover instead of requiring focus on either\n *\n * Events:\n * change — CustomEvent<{ value: string }>, bubbles + composed\n * Fired when value changes via slider or editable-number commit\n * input — CustomEvent<{ value: number }>, bubbles + composed\n * Fired on every slider move\n */\nimport type { CSSResultGroup } from 'lit';\nimport { css, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { LabelledInputBase } from '../mixins/labelled-input-base.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\n@customElement(`ixfx-labelled-range-input`)\nexport class LabelledRangeInput extends LabelledInputBase {\n readonly inputSelector = `ixfx-range-input`;\n\n @property({ type: String }) orientation: `horizontal` | `vertical` = `horizontal`;\n @property({ type: Boolean }) tooltip = false;\n @property({ type: Boolean, attribute: `no-tooltip` }) noTooltip = false;\n @property({ type: String, attribute: `tooltip-orientation` }) tooltipOrientation: `top` | `right` = `top`;\n /** Pass-through: enables wheel-on-hover for the inner slider and editable-number. */\n @property({ type: Boolean }) lighttouch = false;\n\n @property({ type: Number, attribute: `switch-height` }) switchHeight = 80;\n\n protected override _renderEditableNumber() {\n // Override base implementation to pass lighttouch through to the inner\n // editable-number. Mirrors the props forwarded in LabelledInputBase.\n if (this._isMini) {\n // Mini mode: no editable-number rendered at all (matches base behaviour).\n return html``;\n }\n return html`\n <ixfx-editable-number\n class=\"number\"\n mode=\"label\"\n no-drag\n ?lighttouch=${this.lighttouch}\n .value=${String(this.value)}\n .min=${this.min}\n .max=${this.max}\n .step=${this.step}\n .dragSensitivity=${this.dragSensitivity}\n .precision=${this.precision}\n .displayText=${this.label}\n .displayTextLogic=${this._isDragging ? `hidden` : this.displayTextLogic}\n .formatter=${this._formatter}\n @change=${this._handleNumberChange}\n ></ixfx-editable-number>\n `;\n }\n\n override render() {\n const sliderLabelFormatter = this._formatter\n ? (raw: number) => this._formatter!(String(raw))\n : undefined;\n const showTooltip = !this.noTooltip && (this.tooltip || this._isMini);\n\n return html`\n <div class=\"wrap ${this._isMini ? `mini` : ``}\">\n ${this._renderEditableNumber()}\n <ixfx-range-input\n class=\"slider\"\n ?lighttouch=${this.lighttouch}\n .value=${this.value}\n .min=${this.min}\n .max=${this.max}\n .step=${this.step}\n .orientation=${this.orientation}\n ?tooltip=${showTooltip}\n .tooltipOrientation=${this.tooltipOrientation}\n .labelFormatter=${sliderLabelFormatter}\n @input=${this._handleSliderInput}\n @change=${this._handleInputChange}\n ></ixfx-range-input>\n </div>\n `;\n }\n\n static styles: CSSResultGroup = css`\n :host {\n display: block;\n container-type: size;\n min-height: var(--min-height, 20px);\n min-width: var(--min-width, 50px);\n width: var(--width, auto);\n height: var(--height, 50px);\n }\n\n .wrap {\n display: flex;\n width: 100%;\n height: 100%;\n gap: var(--space-s, 4px);\n align-items: center;\n }\n\n ixfx-editable-number {\n flex-shrink: 0;\n }\n\n ixfx-range-input {\n flex: 1;\n min-width: 0;\n }\n\n /* Default (compact): horizontal — label beside slider */\n .wrap {\n flex-direction: var(--flow, row);\n justify-content: flex-start;\n align-items: center;\n }\n\n ixfx-editable-number {\n --label-align: left;\n width: var(--label-width, 5ch);\n --label-min-width: var(--label-width, 5ch);\n /* Block fill/background variables from reaching editable-number */\n --fill-color: initial;\n --fill-opacity: initial;\n --fill-image: initial;\n }\n\n /* Vertically-stacked layout: when container has enough height */\n @container (height >= 45px) {\n .wrap {\n flex-direction: var(--flow, column);\n justify-content: flex-start;\n align-items: center;\n }\n\n ixfx-editable-number {\n --label-align: center;\n align-self: center;\n width: 100%;\n }\n\n ixfx-range-input {\n width: 100%;\n }\n }\n\n /* Mini mode: slider fills the full component */\n .wrap.mini {\n gap: 0;\n }\n\n .wrap.mini ixfx-range-input {\n width: 100%;\n height: 100%;\n }\n `;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ixfx-labelled-range-input': LabelledRangeInput;\n }\n}\n"],"mappings":";;;;;AAuEO,IAAM,qBAAN,MAAM,2BAA2B,kBAAkB;;;EAC/B,KAAA,gBAAA;EAE4C,KAAA,cAAA;EAC9B,KAAA,UAAA;EAC2B,KAAA,YAAA;EACkC,KAAA,qBAAA;EAE1D,KAAA,aAAA;EAE6B,KAAA,eAAA;;CAEvE,wBAA2C;EAGzC,IAAI,KAAK,SAEP,OAAO,IAAI;EAEb,OAAO,IAAI;;;;;sBAKO,KAAK,WAAW;iBACrB,OAAO,KAAK,KAAK,EAAE;eACrB,KAAK,IAAI;eACT,KAAK,IAAI;gBACR,KAAK,KAAK;2BACC,KAAK,gBAAgB;qBAC3B,KAAK,UAAU;uBACb,KAAK,MAAM;4BACN,KAAK,cAAc,WAAW,KAAK,iBAAiB;qBAC3D,KAAK,WAAW;kBACnB,KAAK,oBAAoB;;;CAGzC;CAEA,SAAkB;EAChB,MAAM,uBAAuB,KAAK,cAC7B,QAAgB,KAAK,WAAY,OAAO,GAAG,CAAC,IAC7C,KAAA;EACJ,MAAM,cAAc,CAAC,KAAK,cAAc,KAAK,WAAW,KAAK;EAE7D,OAAO,IAAI;yBACU,KAAK,UAAU,SAAS,GAAG;UAC1C,KAAK,sBAAsB,EAAE;;;wBAGf,KAAK,WAAW;mBACrB,KAAK,MAAM;iBACb,KAAK,IAAI;iBACT,KAAK,IAAI;kBACR,KAAK,KAAK;yBACH,KAAK,YAAY;qBACrB,YAAY;gCACD,KAAK,mBAAmB;4BAC5B,qBAAqB;mBAC9B,KAAK,mBAAmB;oBACvB,KAAK,mBAAmB;;;;CAI1C;;EAEgC,KAAA,SAAA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyErC;AAxIG,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,mBAAA,WAAA,eAAA,KAAA,CAAA;AACzB,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,mBAAA,WAAA,WAAA,KAAA,CAAA;AAC1B,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;AAAa,CAAC,CAAA,GAAA,mBAAA,WAAA,aAAA,KAAA,CAAA;AACnD,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAsB,CAAC,CAAA,GAAA,mBAAA,WAAA,sBAAA,KAAA,CAAA;AAE3D,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,mBAAA,WAAA,cAAA,KAAA,CAAA;AAE1B,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAgB,CAAC,CAAA,GAAA,mBAAA,WAAA,gBAAA,KAAA,CAAA;AAXvDA,qBAAAA,WAAAA,CAAAA,kBAAc,2BAA2B,CAAA,GAAA,kBAAA"}
|
package/dist/led.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { LitElement } from "lit";
|
|
2
|
-
|
|
3
2
|
//#region src/led/led.d.ts
|
|
4
3
|
declare class LedElement extends LitElement {
|
|
5
4
|
#private;
|
|
@@ -18,7 +17,7 @@ declare global {
|
|
|
18
17
|
interface HTMLElementTagNameMap {
|
|
19
18
|
"ixfx-led": LedElement;
|
|
20
19
|
}
|
|
21
|
-
}
|
|
20
|
+
}
|
|
22
21
|
//#endregion
|
|
23
22
|
export { LedElement };
|
|
24
23
|
//# sourceMappingURL=led.d.ts.map
|
package/dist/led.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"led.d.ts","names":[],"sources":["../src/led/led.ts"],"mappings":"
|
|
1
|
+
{"version":3,"file":"led.d.ts","names":[],"sources":["../src/led/led.ts"],"mappings":";;cAKa,mBAAmB;;EAE9B;EAGA;EAGA;EAGA;EAGA;EAIA,WAAW,mBAAmB;EAe9B,QAAQ,mBAAmB;EAM3B;YAwBU,wBAAM;SAIT,sBAAM;;QAqBP;YACI;IACR,YAAY"}
|
package/dist/led.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { n as safeCustomElement, t as __decorate } from "./decorate-
|
|
1
|
+
import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
|
|
2
2
|
import { LitElement, css, html } from "lit";
|
|
3
3
|
import { property } from "lit/decorators.js";
|
|
4
4
|
//#region src/led/led.ts
|
package/dist/led.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"led.js","names":["#updateBlinking","#stopBlinking","#blinkInterval","customElement"],"sources":["../src/led/led.ts"],"sourcesContent":["import { css, html, LitElement } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { safeCustomElement as customElement } from \"../util/custom-elements.js\";\n\n@customElement(`ixfx-led`)\nexport class LedElement extends LitElement {\n @property({ type: Number })\n value = 0;\n\n @property({ type: Boolean, attribute: `lit`, reflect: true })\n lit = false;\n\n @property({ type: String })\n color = `oklch(50% 0.15 25)`;\n\n @property({ type: Boolean, attribute: `blinking`, reflect: true })\n blinking = false;\n\n @property({ type: Number, attribute: `rate` })\n rate = 500;\n\n #blinkInterval: number | undefined;\n\n willUpdate(changedProperties: Map<string, unknown>) {\n if (changedProperties.has(`value`)) {\n this.style.setProperty(`--value`, String(this.value));\n }\n\n if (changedProperties.has(`blinking`) || changedProperties.has(`rate`)) {\n this.#updateBlinking();\n }\n\n if (changedProperties.has(`rate`)) {\n const transitionMs = this.rate < 300 ? this.rate * 0.5 : 150;\n this.style.setProperty(`--transition-duration`, `${transitionMs}ms`);\n }\n }\n\n updated(changedProperties: Map<string, unknown>) {\n if (changedProperties.has(`lit`)) {\n this.value = this.lit ? 1 : 0;\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.#stopBlinking();\n }\n\n #updateBlinking() {\n if (this.blinking && this.rate > 0) {\n this.#stopBlinking();\n this.#blinkInterval = window.setInterval(() => {\n this.value = this.value === 0 ? 1 : 0;\n }, this.rate);\n } else {\n this.#stopBlinking();\n this.value = 0;\n }\n }\n\n #stopBlinking() {\n if (this.#blinkInterval !== undefined) {\n clearInterval(this.#blinkInterval);\n this.#blinkInterval = undefined;\n }\n }\n\n protected render() {\n return html`<div part=\"circle\"></div>`;\n }\n\n static styles = css`\n :host {\n --_size: var(--size, 1ex);\n display: inline-block;\n min-width: 1ex;\n min-height: 1ex;\n width: var(--_size);\n height: var(--_size);\n vertical-align: middle;\n }\n\n div {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background: color-mix(in oklch, var(--colour, oklch(50% 0.15 25)), white calc((1 - var(--value, 0)) * 50%));\n transition: background var(--transition-duration, 150ms) ease-out;\n }\n `;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"ixfx-led\": LedElement;\n }\n}\n"],"mappings":";;;;AAKO,
|
|
1
|
+
{"version":3,"file":"led.js","names":["#updateBlinking","#stopBlinking","#blinkInterval","customElement"],"sources":["../src/led/led.ts"],"sourcesContent":["import { css, html, LitElement } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { safeCustomElement as customElement } from \"../util/custom-elements.js\";\n\n@customElement(`ixfx-led`)\nexport class LedElement extends LitElement {\n @property({ type: Number })\n value = 0;\n\n @property({ type: Boolean, attribute: `lit`, reflect: true })\n lit = false;\n\n @property({ type: String })\n color = `oklch(50% 0.15 25)`;\n\n @property({ type: Boolean, attribute: `blinking`, reflect: true })\n blinking = false;\n\n @property({ type: Number, attribute: `rate` })\n rate = 500;\n\n #blinkInterval: number | undefined;\n\n willUpdate(changedProperties: Map<string, unknown>) {\n if (changedProperties.has(`value`)) {\n this.style.setProperty(`--value`, String(this.value));\n }\n\n if (changedProperties.has(`blinking`) || changedProperties.has(`rate`)) {\n this.#updateBlinking();\n }\n\n if (changedProperties.has(`rate`)) {\n const transitionMs = this.rate < 300 ? this.rate * 0.5 : 150;\n this.style.setProperty(`--transition-duration`, `${transitionMs}ms`);\n }\n }\n\n updated(changedProperties: Map<string, unknown>) {\n if (changedProperties.has(`lit`)) {\n this.value = this.lit ? 1 : 0;\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.#stopBlinking();\n }\n\n #updateBlinking() {\n if (this.blinking && this.rate > 0) {\n this.#stopBlinking();\n this.#blinkInterval = window.setInterval(() => {\n this.value = this.value === 0 ? 1 : 0;\n }, this.rate);\n } else {\n this.#stopBlinking();\n this.value = 0;\n }\n }\n\n #stopBlinking() {\n if (this.#blinkInterval !== undefined) {\n clearInterval(this.#blinkInterval);\n this.#blinkInterval = undefined;\n }\n }\n\n protected render() {\n return html`<div part=\"circle\"></div>`;\n }\n\n static styles = css`\n :host {\n --_size: var(--size, 1ex);\n display: inline-block;\n min-width: 1ex;\n min-height: 1ex;\n width: var(--_size);\n height: var(--_size);\n vertical-align: middle;\n }\n\n div {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background: color-mix(in oklch, var(--colour, oklch(50% 0.15 25)), white calc((1 - var(--value, 0)) * 50%));\n transition: background var(--transition-duration, 150ms) ease-out;\n }\n `;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"ixfx-led\": LedElement;\n }\n}\n"],"mappings":";;;;AAKO,IAAM,aAAN,MAAM,mBAAmB,WAAW;;;EAEjC,KAAA,QAAA;EAGF,KAAA,MAAA;EAGE,KAAA,QAAA;EAGG,KAAA,WAAA;EAGJ,KAAA,OAAA;;CAEP;CAEA,WAAW,mBAAyC;EAClD,IAAI,kBAAkB,IAAI,OAAO,GAC/B,KAAK,MAAM,YAAY,WAAW,OAAO,KAAK,KAAK,CAAC;EAGtD,IAAI,kBAAkB,IAAI,UAAU,KAAK,kBAAkB,IAAI,MAAM,GACnE,KAAKA,gBAAgB;EAGvB,IAAI,kBAAkB,IAAI,MAAM,GAAG;GACjC,MAAM,eAAe,KAAK,OAAO,MAAM,KAAK,OAAO,KAAM;GACzD,KAAK,MAAM,YAAY,yBAAyB,GAAG,aAAa,GAAG;EACrE;CACF;CAEA,QAAQ,mBAAyC;EAC/C,IAAI,kBAAkB,IAAI,KAAK,GAC7B,KAAK,QAAQ,KAAK,MAAM,IAAI;CAEhC;CAEA,uBAAuB;EACrB,MAAM,qBAAqB;EAC3B,KAAKC,cAAc;CACrB;CAEA,kBAAkB;EAChB,IAAI,KAAK,YAAY,KAAK,OAAO,GAAG;GAClC,KAAKA,cAAc;GACnB,KAAKC,iBAAiB,OAAO,kBAAkB;IAC7C,KAAK,QAAQ,KAAK,UAAU,IAAI,IAAI;GACtC,GAAG,KAAK,IAAI;EACd,OAAO;GACL,KAAKD,cAAc;GACnB,KAAK,QAAQ;EACf;CACF;CAEA,gBAAgB;EACd,IAAI,KAAKC,mBAAmB,KAAA,GAAW;GACrC,cAAc,KAAKA,cAAc;GACjC,KAAKA,iBAAiB,KAAA;EACxB;CACF;CAEA,SAAmB;EACjB,OAAO,IAAI;CACb;;EAEgB,KAAA,SAAA,GAAG;;;;;;;;;;;;;;;;;;;;AAmBrB;AArFG,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,WAAA,WAAA,SAAA,KAAA,CAAA;AAGzB,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;CAAO,SAAS;AAAK,CAAC,CAAA,GAAA,WAAA,WAAA,OAAA,KAAA,CAAA;AAG3D,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,WAAA,WAAA,SAAA,KAAA,CAAA;AAGzB,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;CAAY,SAAS;AAAK,CAAC,CAAA,GAAA,WAAA,WAAA,YAAA,KAAA,CAAA;AAGhE,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAO,CAAC,CAAA,GAAA,WAAA,WAAA,QAAA,KAAA,CAAA;AAd9CC,aAAAA,WAAAA,CAAAA,kBAAc,UAAU,CAAA,GAAA,UAAA"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { t as __exportAll } from "./
|
|
1
|
+
import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
|
|
2
2
|
import { t as tickledItemStyles } from "./tickled-styles-fNDdqf6l.js";
|
|
3
3
|
import { t as themeFallbacks } from "./fallbacks-pNMOMx38.js";
|
|
4
|
-
import { n as safeCustomElement, t as __decorate } from "./decorate-
|
|
5
|
-
import "./icon-
|
|
4
|
+
import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
|
|
5
|
+
import "./icon-B22XVlCt.js";
|
|
6
6
|
import "./interaction-D6efrBLo.js";
|
|
7
|
-
import { n as MenuTrigger, r as MenuContainer, t as MenuItem } from "./menu-item-
|
|
7
|
+
import { n as MenuTrigger, r as MenuContainer, t as MenuItem } from "./menu-item-NUKwJ4s5.js";
|
|
8
8
|
import { LitElement, css, html, nothing } from "lit";
|
|
9
9
|
import { property, query, state } from "lit/decorators.js";
|
|
10
10
|
//#region src/menu/menu-bar.ts
|
|
@@ -329,13 +329,13 @@ let MenuSubTrigger = class MenuSubTrigger extends LitElement {
|
|
|
329
329
|
if (!this._submenuPopover?.popover) return;
|
|
330
330
|
try {
|
|
331
331
|
this._submenuPopover.showPopover();
|
|
332
|
-
} catch
|
|
332
|
+
} catch {}
|
|
333
333
|
}
|
|
334
334
|
_hideSubmenu() {
|
|
335
335
|
if (!this._submenuPopover?.popover) return;
|
|
336
336
|
try {
|
|
337
337
|
this._submenuPopover.hidePopover();
|
|
338
|
-
} catch
|
|
338
|
+
} catch {}
|
|
339
339
|
}
|
|
340
340
|
_cancelHide() {
|
|
341
341
|
if (this._hideTimeout) {
|
|
@@ -407,7 +407,6 @@ let MenuSubTrigger = class MenuSubTrigger extends LitElement {
|
|
|
407
407
|
e.preventDefault();
|
|
408
408
|
e.stopPropagation();
|
|
409
409
|
this._hideSubmenu();
|
|
410
|
-
break;
|
|
411
410
|
}
|
|
412
411
|
}
|
|
413
412
|
static {
|
|
@@ -626,7 +625,7 @@ function buildMenuHeaderEl(label) {
|
|
|
626
625
|
return el;
|
|
627
626
|
}
|
|
628
627
|
function buildMenuSubTriggerEl(node, options) {
|
|
629
|
-
const {
|
|
628
|
+
const { registry, keyboardManager } = options;
|
|
630
629
|
const el = document.createElement(`ixfx-menu-sub-trigger`);
|
|
631
630
|
el.setAttribute(`label`, node.item.label);
|
|
632
631
|
if (registry) el.registry = registry;
|
|
@@ -823,4 +822,4 @@ var menu_exports = /* @__PURE__ */ __exportAll({
|
|
|
823
822
|
//#endregion
|
|
824
823
|
export { menuFromTreeToElements as a, MenuSubTrigger as c, MenuBar as d, menuFromTree as i, MenuCommandController as l, MenuRadioGroup as n, MenuHeader as o, MenuRadioItem as r, MenuSeparator as s, menu_exports as t, MenuCheckItem as u };
|
|
825
824
|
|
|
826
|
-
//# sourceMappingURL=menu-
|
|
825
|
+
//# sourceMappingURL=menu-g6yd7ddN.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"menu-g6yd7ddN.js","names":["customElement","customElement","customElement","customElement","customElement","customElement","customElement"],"sources":["../src/menu/menu-bar.ts","../src/menu/menu-check-item.ts","../src/menu/menu-command-controller.ts","../src/menu/menu-sub-trigger.ts","../src/menu/menu-separator.ts","../src/menu/menu-header.ts","../src/menu/menu-from-tree.ts","../src/menu/menu-radio-item.ts","../src/menu/menu-radio-group.ts","../src/menu/index.ts"],"sourcesContent":["import type { MenuTrigger } from './menu-trigger.js';\nimport { css, html, LitElement } from 'lit';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\nimport './menu-trigger.js';\n\n@customElement(`ixfx-menu-bar`)\nexport class MenuBar extends LitElement {\n private _openTrigger: MenuTrigger | null = null;\n private _inputMode: `keyboard` | `mouse` = `mouse`;\n\n connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener(`menu-trigger-open`, this._handleTriggerOpen as EventListener);\n this.addEventListener(`menu-trigger-close`, this._handleTriggerClose as EventListener);\n this.addEventListener(`focusin`, this._handleFocusIn as EventListener);\n this.addEventListener(`keydown`, this._handleKeydown);\n this.addEventListener(`pointermove`, this._handlePointerMove);\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener(`menu-trigger-open`, this._handleTriggerOpen as EventListener);\n this.removeEventListener(`menu-trigger-close`, this._handleTriggerClose as EventListener);\n this.removeEventListener(`focusin`, this._handleFocusIn as EventListener);\n this.removeEventListener(`keydown`, this._handleKeydown);\n this.removeEventListener(`pointermove`, this._handlePointerMove);\n }\n\n private _setInputMode(mode: `keyboard` | `mouse`): void {\n if (this._inputMode === mode)\n return;\n this._inputMode = mode;\n this.setAttribute(`data-input-mode`, mode);\n }\n\n private _handlePointerMove = (): void => {\n this._setInputMode(`mouse`);\n };\n\n private _getTriggers(): MenuTrigger[] {\n return [...this.children].filter(\n el => el.tagName === `IXFX-MENU-TRIGGER`,\n ) as MenuTrigger[];\n }\n\n private _handleTriggerOpen = (e: Event): void => {\n this._openTrigger = e.target as MenuTrigger;\n };\n\n private _handleTriggerClose = (e: Event): void => {\n if (e.target === this._openTrigger) {\n this._openTrigger = null;\n }\n };\n\n // When focus moves to a trigger button while another menu is open, switch menus.\n // focusin is composed, so e.target is retargeted to the ixfx-menu-trigger host.\n private _handleFocusIn = (e: FocusEvent): void => {\n const triggers = this._getTriggers();\n const trigger = triggers.find(t => t === e.target);\n if (!trigger || !this._openTrigger || trigger === this._openTrigger)\n return;\n this._openTrigger.closeMenu();\n trigger.openMenu();\n };\n\n private _handleKeydown = (e: KeyboardEvent): void => {\n if (e.key !== `ArrowLeft` && e.key !== `ArrowRight`)\n return;\n\n const triggers = this._getTriggers();\n if (triggers.length === 0)\n return;\n\n // When a menu is open, navigate from the open trigger.\n // When no menu is open, navigate from the focused trigger button\n // (e.target is retargeted to ixfx-menu-trigger when focus is on its inner button).\n const current = this._openTrigger ?? triggers.find(t => t === e.target);\n if (!current)\n return;\n\n const idx = triggers.indexOf(current);\n if (idx === -1)\n return;\n\n e.preventDefault();\n e.stopPropagation();\n this._setInputMode(`keyboard`);\n\n const dir = e.key === `ArrowRight` ? 1 : -1;\n const next = triggers[(idx + dir + triggers.length) % triggers.length];\n\n if (this._openTrigger) {\n this._openTrigger.closeMenu();\n next.openMenu();\n } else {\n next.focusTrigger();\n }\n };\n\n static styles = css`\n :host {\n display: flex;\n align-items: center;\n }\n\n /* Keyboard mode: suppress hover highlight on trigger buttons */\n :host([data-input-mode=\"keyboard\"]) {\n --_trigger-hover-bg: transparent;\n --_trigger-hover-opacity: 0.6;\n }\n `;\n\n render() {\n return html`<slot role=\"menubar\"></slot>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ixfx-menu-bar': MenuBar;\n }\n}\n","import type { CommandRegistry, KeyboardManager } from '@clinth/ui-commands';\nimport { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { tickledItemStyles } from '../interaction/index.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\nimport '../icons/icon.js';\n\nexport type MenuCheckItemCommandDetail = {\n readonly command: string;\n readonly checked: boolean;\n readonly args: string;\n};\n\nexport type MenuCheckItemCommandEvent = CustomEvent<MenuCheckItemCommandDetail>;\n\n@customElement(`ixfx-menu-check-item`)\nexport class MenuCheckItem extends LitElement {\n @property({ type: String }) command = ``;\n @property({ type: String, attribute: `command-args` }) commandArgs = ``;\n @property({ type: String }) label = ``;\n @property({ type: Boolean }) checked = false;\n @property({ type: Boolean }) disabled = false;\n @property({ type: String, attribute: `icon-name` }) iconName = ``;\n @property({ attribute: false }) registry?: CommandRegistry<unknown>;\n @property({ attribute: false }) keyboardManager?: KeyboardManager;\n\n private handleClick(): void {\n if (this.disabled)\n return;\n\n this.checked = !this.checked;\n this.dispatchEvent(new CustomEvent<MenuCheckItemCommandDetail>(`command`, {\n detail: { command: this.command, checked: this.checked, args: this.commandArgs },\n bubbles: true,\n composed: true,\n }));\n }\n\n private _resolvedLabel(): string {\n if (this.label)\n return this.label;\n if (this.registry && this.command) {\n return this.registry.get(this.command)?.label ?? ``;\n }\n return ``;\n }\n\n private _resolvedIcon(): string | null {\n if (this.iconName)\n return this.iconName;\n if (this.registry && this.command) {\n return this.registry.get(this.command)?.icon ?? null;\n }\n return null;\n }\n\n willUpdate(changedProperties: Map<string, unknown>): void {\n super.willUpdate(changedProperties);\n const resolvedIcon = this._resolvedIcon();\n if (resolvedIcon && !this.iconName) {\n this.setAttribute(`data-icon-section`, ``);\n } else if (!resolvedIcon && !this.iconName) {\n this.removeAttribute(`data-icon-section`);\n }\n }\n\n updated(changedProperties: Map<string, unknown>): void {\n super.updated(changedProperties);\n }\n\n private _getShortcut(): string | null {\n if (!this.keyboardManager || !this.command)\n return null;\n const bindings = (this.keyboardManager as any).getBindings?.() ?? [];\n const binding = bindings.find((b: any) => b.commandId === this.command);\n if (!binding)\n return null;\n const mods = Array.from(binding.modifiers ?? [], (m: string) =>\n ({ ctrl: `⌃`, shift: `⇧`, alt: `⌥`, meta: `⌘` })[m] ?? m);\n const key = binding.key?.length === 1 ? binding.key.toUpperCase() : binding.key;\n return [...mods, key].join(``);\n }\n\n static override styles = [themeFallbacks, tickledItemStyles, css`\n :host {\n display: block;\n }\n\n .item {\n display: flex;\n padding: 6px var(--space-m);\n font-size: var(--text-m);\n }\n\n :host(:focus) {\n outline: none;\n }\n\n .item.disabled {\n opacity: var(--disabled-opacity);\n cursor: default;\n }\n\n .item.disabled:hover {\n background: transparent;\n }\n\n .check {\n width: 16px;\n margin-right: var(--space-s);\n font-size: var(--text-m);\n color: var(--accent);\n }\n\n .icon-slot {\n width: 0;\n overflow: hidden;\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n :host([icon-name]) .icon-slot,\n :host([data-icon-section]) .icon-slot {\n width: 1em;\n height: 1em;\n margin-right: var(--space-s);\n }\n\n .label {\n flex: 1;\n }\n\n .shortcut {\n margin-left: var(--space-l);\n color: var(--surface-muted-text);\n font-size: var(--text-s);\n }\n `];\n\n render() {\n const shortcut = this._getShortcut();\n const resolvedIcon = this._resolvedIcon();\n return html`\n <div \n class=\"item ${this.disabled ? `disabled` : ``}\"\n @click=${this.handleClick}\n tabindex=\"${this.disabled ? -1 : 0}\"\n role=\"menuitemcheckbox\"\n aria-checked=\"${this.checked}\"\n >\n <span class=\"check\">${this.checked ? `✓` : ``}</span>\n <span class=\"icon-slot\">${resolvedIcon ? html`<ixfx-icon name=\"${resolvedIcon}\"></ixfx-icon>` : null}</span>\n <span class=\"label\">${this._resolvedLabel()}</span>\n ${shortcut ? html`<span class=\"shortcut\">${shortcut}</span>` : null}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ixfx-menu-check-item': MenuCheckItem;\n }\n}\n","import type { CommandRegistry } from '@clinth/ui-commands';\n\nexport class MenuCommandController {\n private registry: CommandRegistry<unknown>;\n private target: EventTarget;\n private boundHandler: (e: Event) => void;\n\n constructor(options: { registry: CommandRegistry<unknown>; target?: EventTarget }) {\n this.registry = options.registry;\n this.target = options.target ?? document;\n this.boundHandler = this.handleCommand.bind(this);\n }\n\n start(): void {\n this.target.addEventListener(`command`, this.boundHandler);\n }\n\n stop(): void {\n this.target.removeEventListener(`command`, this.boundHandler);\n }\n\n private handleCommand(e: Event): void {\n const target = e.target as any;\n const command = target?.command;\n if (!command)\n return;\n\n const args = target?.commandArgs ?? ``;\n this.registry.invoke(command, { args });\n }\n}\n","import type { CommandRegistry, KeyboardManager } from '@clinth/ui-commands';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { tickledItemStyles } from '../interaction/index.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\nimport '../icons/icon.js';\n\n@customElement(`ixfx-menu-sub-trigger`)\nexport class MenuSubTrigger extends LitElement {\n @property({ type: String }) command = ``;\n @property({ type: String, attribute: `command-args` }) commandArgs = ``;\n @property({ type: String }) label = ``;\n @property({ type: Boolean }) disabled = false;\n @property({ type: String, attribute: `icon-name` }) iconName = ``;\n @property({ attribute: false }) registry?: CommandRegistry<unknown>;\n @property({ attribute: false }) keyboardManager?: KeyboardManager;\n\n @state() private _hasSubmenu = false;\n @query(`slot[name=\"submenu\"]`) private _slot!: HTMLSlotElement;\n @query(`.submenu-popover`) private _submenuPopover!: HTMLElement;\n @query(`.item`) private _itemEl!: HTMLElement;\n\n private static _count = 0;\n private _anchorName = `--mst-${MenuSubTrigger._count++}`;\n private _hoverTimeout: number | null = null;\n private _hideTimeout: number | null = null;\n\n connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener(`keydown`, this._handleKeydown);\n }\n\n firstUpdated(): void {\n this.style.setProperty(`--anchor-name`, this._anchorName);\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener(`keydown`, this._handleKeydown);\n if (this._hoverTimeout) {\n clearTimeout(this._hoverTimeout);\n }\n if (this._hideTimeout) {\n clearTimeout(this._hideTimeout);\n }\n }\n\n private _propagateContext(): void {\n const items = this._slot?.assignedElements({ flatten: true }) ?? [];\n for (const el of items) {\n if (`registry` in el)\n (el as any).registry = this.registry;\n if (`keyboardManager` in el)\n (el as any).keyboardManager = this.keyboardManager;\n }\n }\n\n override updated(changedProperties: Map<string, unknown>): void {\n if (changedProperties.has(`registry`) || changedProperties.has(`keyboardManager`)) {\n this._propagateContext();\n }\n }\n\n willUpdate(changedProperties: Map<string, unknown>): void {\n super.willUpdate(changedProperties);\n const resolvedIcon = this._resolvedIcon();\n if (resolvedIcon && !this.iconName) {\n this.setAttribute(`data-icon-section`, ``);\n } else if (!resolvedIcon && !this.iconName) {\n this.removeAttribute(`data-icon-section`);\n }\n }\n\n private _resolvedIcon(): string | null {\n if (this.iconName)\n return this.iconName;\n if (this.registry && this.command) {\n return this.registry.get(this.command)?.icon ?? null;\n }\n return null;\n }\n\n private _handleSlotChange(): void {\n this._hasSubmenu = this._slot?.assignedElements().length > 0;\n this._propagateContext();\n }\n\n private _showSubmenu(): void {\n if (!this._submenuPopover?.popover)\n return;\n try {\n (this._submenuPopover as any).showPopover();\n } catch { /* ignore */ }\n }\n\n private _hideSubmenu(): void {\n if (!this._submenuPopover?.popover)\n return;\n try {\n (this._submenuPopover as any).hidePopover();\n } catch { /* ignore */ }\n }\n\n private _cancelHide(): void {\n if (this._hideTimeout) {\n clearTimeout(this._hideTimeout);\n this._hideTimeout = null;\n }\n }\n\n private _scheduleHide(): void {\n this._cancelHide();\n this._hideTimeout = window.setTimeout(() => {\n this._hideSubmenu();\n this._hideTimeout = null;\n }, 100);\n }\n\n private _handleMouseEnter(): void {\n if (this.disabled || !this._hasSubmenu)\n return;\n this._cancelHide();\n if (this._hoverTimeout) {\n clearTimeout(this._hoverTimeout);\n }\n this._hoverTimeout = window.setTimeout(() => {\n this._showSubmenu();\n }, 150);\n }\n\n private _handleMouseLeave(): void {\n if (this._hoverTimeout) {\n clearTimeout(this._hoverTimeout);\n this._hoverTimeout = null;\n }\n this._scheduleHide();\n }\n\n private _handleSubmenuMouseEnter(): void {\n this._cancelHide();\n }\n\n private _handleSubmenuMouseLeave(): void {\n this._scheduleHide();\n }\n\n private _handleClick(): void {\n if (this.disabled || !this.command)\n return;\n\n this.dispatchEvent(new CustomEvent(`command`, {\n detail: { command: this.command, args: this.commandArgs },\n bubbles: true,\n composed: true,\n }));\n }\n\n private _handleKeydown(e: KeyboardEvent): void {\n if (this.disabled)\n return;\n\n switch (e.key) {\n case `ArrowRight`:\n case `Enter`:\n case ` `:\n e.preventDefault();\n e.stopPropagation();\n if (this._hasSubmenu) {\n this._showSubmenu();\n requestAnimationFrame(() => {\n const container = this._slot?.assignedElements({ flatten: true })\n .find(el => el.tagName === `IXFX-MENU-CONTAINER`) as (HTMLElement & { focusFirst: () => void }) | undefined;\n container?.focusFirst();\n });\n }\n break;\n case `ArrowLeft`:\n e.preventDefault();\n e.stopPropagation();\n this._hideSubmenu();\n this._itemEl?.focus();\n break;\n case `Escape`:\n e.preventDefault();\n e.stopPropagation();\n this._hideSubmenu();\n break;\n }\n }\n\n static override styles = [themeFallbacks, tickledItemStyles, css`\n :host {\n display: block;\n }\n\n .item {\n anchor-name: var(--anchor-name);\n display: flex;\n padding: 6px var(--space-m);\n font-size: var(--text-m);\n }\n\n .submenu-popover {\n position: fixed;\n position-anchor: var(--anchor-name);\n inset: auto;\n top: anchor(top);\n left: anchor(right);\n margin: 0;\n padding: 0;\n border: none;\n background: transparent;\n /* UA stylesheet sets overflow:auto on [popover], which clips the box-shadow\n of the inner ixfx-menu-container child. Override to let the shadow render. */\n overflow: visible;\n position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;\n }\n\n :host(:focus) {\n outline: none;\n }\n\n .item.disabled {\n opacity: var(--disabled-opacity);\n cursor: default;\n }\n\n .item.disabled:hover {\n background: transparent;\n }\n\n .icon-slot {\n width: 0;\n overflow: hidden;\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n :host([icon-name]) .icon-slot,\n :host([data-icon-section]) .icon-slot {\n width: 1em;\n height: 1em;\n margin-right: var(--space-s);\n }\n\n .label {\n flex: 1;\n }\n\n .arrow {\n color: var(--surface-muted-text);\n margin-left: var(--space-m);\n }\n `];\n\n render() {\n const resolvedIcon = this._resolvedIcon();\n return html`\n <div\n class=\"item ${this.disabled ? `disabled` : ``}\"\n @click=${this._handleClick}\n @mouseenter=${this._handleMouseEnter}\n @mouseleave=${this._handleMouseLeave}\n tabindex=\"${this.disabled ? -1 : 0}\"\n role=\"menuitem\"\n aria-haspopup=\"true\"\n aria-expanded=\"false\"\n >\n <span class=\"icon-slot\">${resolvedIcon ? html`<ixfx-icon name=\"${resolvedIcon}\"></ixfx-icon>` : null}</span>\n <span class=\"label\"><slot></slot>${this.label}</span>\n <span class=\"arrow\">${this._hasSubmenu ? html`<ixfx-icon name=\"chevron-right\"></ixfx-icon>` : nothing}</span>\n </div>\n <div class=\"submenu-popover\" popover=\"auto\"\n @mouseenter=${this._handleSubmenuMouseEnter}\n @mouseleave=${this._handleSubmenuMouseLeave}\n >\n <slot name=\"submenu\" @slotchange=${this._handleSlotChange}></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ixfx-menu-sub-trigger': MenuSubTrigger;\n }\n}\n","import { css, html, LitElement } from 'lit';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\n@customElement(`ixfx-menu-separator`)\nexport class MenuSeparator extends LitElement {\n static styles = [themeFallbacks, css`\n :host {\n display: block;\n margin: var(--space-xs) 0;\n }\n\n .separator {\n height: 1px;\n background: var(--surface-4);\n }\n `];\n\n render() {\n return html`<div class=\"separator\"></div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ixfx-menu-separator': MenuSeparator;\n }\n}\n","import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\n@customElement(`ixfx-menu-header`)\nexport class MenuHeader extends LitElement {\n @property({ type: String }) label = ``;\n\n static styles = [themeFallbacks, css`\n :host {\n display: block;\n padding: 6px var(--space-m) var(--space-xs);\n font-size: var(--text-s);\n font-weight: var(--font-weight-bold);\n text-transform: uppercase;\n color: var(--surface-muted-text);\n letter-spacing: 0.5px;\n }\n `];\n\n render() {\n return html`<div>${this.label}</div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ixfx-menu-header': MenuHeader;\n }\n}\n","import type { CommandRegistry, KeyboardManager } from '@clinth/ui-commands';\nimport type { TemplateResult } from 'lit';\nimport type { TreeNode } from '../tree/types.js';\nimport type { MenuTriggerCommandDetail } from './menu-trigger.js';\nimport { html, nothing } from 'lit';\nimport './menu-container.js';\nimport './menu-item.js';\nimport './menu-sub-trigger.js';\nimport './menu-separator.js';\nimport './menu-header.js';\n\nexport type MenuFromTreeOptions = {\n onCommand?: (detail: MenuTriggerCommandDetail) => void;\n registry?: CommandRegistry<unknown>;\n keyboardManager?: KeyboardManager;\n};\n\nfunction isLeaf(node: TreeNode): boolean {\n return node.children === undefined || node.children.length === 0;\n}\n\nexport function menuFromTree(\n nodes: TreeNode[],\n options: MenuFromTreeOptions = {},\n): TemplateResult {\n const { onCommand, registry, keyboardManager } = options;\n\n return html`${nodes.map((node) => {\n const label = node.item.label;\n\n if (label === `-`) {\n return html`<ixfx-menu-separator></ixfx-menu-separator>`;\n }\n\n if (label.startsWith(`# `)) {\n return html`<ixfx-menu-header label=\"${label.slice(2)}\"></ixfx-menu-header>`;\n }\n\n if (!isLeaf(node)) {\n const submenu = menuFromTree(node.children!, options);\n return html`\n <ixfx-menu-sub-trigger label=\"${label}\">\n <ixfx-menu-container\n slot=\"submenu\"\n .registry=${registry ?? nothing}\n .keyboardManager=${keyboardManager ?? nothing}\n >${submenu}</ixfx-menu-container>\n </ixfx-menu-sub-trigger>\n `;\n }\n\n return html`\n <ixfx-menu-item\n command=\"${node.item.key}\"\n label=\"${label}\"\n icon-name=\"${node.item.icon ?? nothing}\"\n @command=${onCommand ? (e: CustomEvent) => onCommand(e.detail) : nothing}\n ></ixfx-menu-item>\n `;\n })}`;\n}\n\nfunction buildMenuItemEl(\n node: TreeNode,\n options: MenuFromTreeOptions,\n): HTMLElement {\n const { onCommand, registry } = options;\n const label = node.item.label;\n\n const el = document.createElement(`ixfx-menu-item`);\n el.setAttribute(`command`, node.item.key);\n el.setAttribute(`label`, label);\n if (node.item.icon) {\n el.setAttribute(`icon-name`, node.item.icon);\n }\n if (onCommand) {\n el.addEventListener(`command`, e => onCommand((e as CustomEvent).detail));\n }\n if (registry) {\n (el as any).registry = registry;\n }\n return el;\n}\n\nfunction buildMenuSeparatorEl(): HTMLElement {\n return document.createElement(`ixfx-menu-separator`);\n}\n\nfunction buildMenuHeaderEl(label: string): HTMLElement {\n const el = document.createElement(`ixfx-menu-header`);\n el.setAttribute(`label`, label);\n return el;\n}\n\nfunction buildMenuSubTriggerEl(\n node: TreeNode,\n options: MenuFromTreeOptions,\n): HTMLElement {\n const { registry, keyboardManager } = options;\n\n const el = document.createElement(`ixfx-menu-sub-trigger`);\n el.setAttribute(`label`, node.item.label);\n if (registry)\n (el as any).registry = registry;\n if (keyboardManager)\n (el as any).keyboardManager = keyboardManager;\n\n const container = document.createElement(`ixfx-menu-container`);\n container.setAttribute(`slot`, `submenu`);\n if (registry)\n (container as any).registry = registry;\n if (keyboardManager)\n (container as any).keyboardManager = keyboardManager;\n\n const childEls = menuFromTreeToElements(node.children!, options);\n for (const child of childEls) {\n container.appendChild(child);\n }\n\n el.appendChild(container);\n return el;\n}\n\nexport function menuFromTreeToElements(\n nodes: TreeNode[],\n options: MenuFromTreeOptions = {},\n): HTMLElement[] {\n return nodes.map((node) => {\n const label = node.item.label;\n\n if (label === `-`) {\n return buildMenuSeparatorEl();\n }\n\n if (label.startsWith(`# `)) {\n return buildMenuHeaderEl(label.slice(2));\n }\n\n if (!isLeaf(node)) {\n return buildMenuSubTriggerEl(node, options);\n }\n\n return buildMenuItemEl(node, options);\n });\n}\n","import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { tickledItemStyles } from '../interaction/index.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\nimport '../icons/icon.js';\n\nexport type MenuRadioItemSelectDetail = {\n readonly value: string;\n};\n\nexport type MenuRadioItemSelectEvent = CustomEvent<MenuRadioItemSelectDetail>;\n\n@customElement(`ixfx-menu-radio-item`)\nexport class MenuRadioItem extends LitElement {\n @property({ type: String }) value = ``;\n @property({ type: String }) label = ``;\n @property({ type: Boolean }) disabled = false;\n @property({ type: String }) groupValue = ``;\n @property({ type: String, attribute: `icon-name` }) iconName = ``;\n\n private handleClick(): void {\n if (this.disabled)\n return;\n\n this.dispatchEvent(new CustomEvent<MenuRadioItemSelectDetail>(`radio-select`, {\n detail: { value: this.value },\n bubbles: true,\n composed: true,\n }));\n }\n\n static override styles = [themeFallbacks, tickledItemStyles, css`\n :host {\n display: block;\n }\n\n .item {\n display: flex;\n padding: 6px var(--space-m);\n font-size: var(--text-m);\n }\n\n :host(:focus) {\n outline: none;\n }\n\n .item.disabled {\n opacity: var(--disabled-opacity);\n cursor: default;\n }\n\n .item.disabled:hover {\n background: transparent;\n }\n\n .radio {\n width: 16px;\n margin-right: var(--space-s);\n font-size: var(--text-m);\n color: var(--accent);\n }\n\n .icon-slot {\n width: 0;\n overflow: hidden;\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n :host([icon-name]) .icon-slot,\n :host([data-icon-section]) .icon-slot {\n width: 1em;\n height: 1em;\n margin-right: var(--space-s);\n }\n\n .label {\n flex: 1;\n }\n `];\n\n render() {\n const isSelected = this.groupValue === this.value;\n\n return html`\n <div \n class=\"item ${this.disabled ? `disabled` : ``}\"\n @click=${this.handleClick}\n tabindex=\"${this.disabled ? -1 : 0}\"\n role=\"menuitemradio\"\n aria-checked=\"${isSelected}\"\n >\n <span class=\"radio\">${isSelected ? `●` : ``}</span>\n <span class=\"icon-slot\">${this.iconName ? html`<ixfx-icon name=\"${this.iconName}\"></ixfx-icon>` : null}</span>\n <span class=\"label\">${this.label}</span>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ixfx-menu-radio-item': MenuRadioItem;\n }\n}\n","import { css, html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\nimport './menu-radio-item.js';\n\nexport type MenuRadioGroupChangeDetail = {\n readonly name: string;\n readonly value: string;\n};\n\nexport type MenuRadioGroupChangeEvent = CustomEvent<MenuRadioGroupChangeDetail>;\n\n@customElement(`ixfx-menu-radio-group`)\nexport class MenuRadioGroup extends LitElement {\n @property({ type: String }) name = ``;\n @property({ type: String }) value = ``;\n\n @state() private slottedElements: Element[] = [];\n\n private handleSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this.slottedElements = slot.assignedElements();\n this.updateSlottedValues();\n }\n\n private updateSlottedValues(): void {\n for (const el of this.slottedElements) {\n (el as any).groupValue = this.value;\n }\n }\n\n private handleRadioSelect(e: CustomEvent): void {\n this.value = e.detail.value;\n this.dispatchEvent(new CustomEvent<MenuRadioGroupChangeDetail>(`radio-change`, {\n detail: {\n name: this.name,\n value: this.value,\n },\n bubbles: true,\n composed: true,\n }));\n }\n\n updated(changedProperties: Map<string, unknown>): void {\n if (changedProperties.has(`value`)) {\n this.updateSlottedValues();\n }\n }\n\n static styles = css`\n :host {\n display: block;\n }\n\n ::slotted(menu-radio-item) {\n display: block;\n }\n `;\n\n render() {\n return html`\n <slot @slotchange=${this.handleSlotChange} @radio-select=${this.handleRadioSelect}></slot>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ixfx-menu-radio-group': MenuRadioGroup;\n }\n}\n","export { MenuBar } from './menu-bar.js';\nexport { MenuCheckItem } from './menu-check-item.js';\nexport { MenuCommandController } from './menu-command-controller.js';\nexport { MenuContainer } from './menu-container.js';\nexport { menuFromTree, menuFromTreeToElements } from './menu-from-tree.js';\nexport type { MenuFromTreeOptions } from './menu-from-tree.js';\nexport { MenuHeader } from './menu-header.js';\nexport { MenuItem } from './menu-item.js';\nexport { MenuRadioGroup } from './menu-radio-group.js';\nexport { MenuRadioItem } from './menu-radio-item.js';\nexport { MenuSeparator } from './menu-separator.js';\nexport { MenuSubTrigger } from './menu-sub-trigger.js';\nexport { MenuTrigger } from './menu-trigger.js';\n"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import "./icon-DpA9x2Ve.js";
|
|
1
2
|
import { LitElement } from "lit";
|
|
2
3
|
import { CommandRegistry, KeyboardManager } from "@clinth/ui-commands";
|
|
3
|
-
|
|
4
4
|
//#region src/menu/menu-container.d.ts
|
|
5
5
|
declare class MenuContainer extends LitElement {
|
|
6
6
|
anchor?: string;
|
|
@@ -34,7 +34,7 @@ declare global {
|
|
|
34
34
|
interface HTMLElementTagNameMap {
|
|
35
35
|
'ixfx-menu-container': MenuContainer;
|
|
36
36
|
}
|
|
37
|
-
}
|
|
37
|
+
}
|
|
38
38
|
//#endregion
|
|
39
39
|
//#region src/menu/menu-trigger.d.ts
|
|
40
40
|
type MenuMode = `trigger` | `dropdown` | `context`;
|
|
@@ -121,7 +121,7 @@ declare global {
|
|
|
121
121
|
interface HTMLElementTagNameMap {
|
|
122
122
|
'ixfx-menu-item': MenuItem;
|
|
123
123
|
}
|
|
124
|
-
}
|
|
124
|
+
}
|
|
125
125
|
//#endregion
|
|
126
126
|
export { MenuContainer as i, MenuTrigger as n, MenuTriggerCommandDetail as r, MenuItem as t };
|
|
127
|
-
//# sourceMappingURL=menu-item-
|
|
127
|
+
//# sourceMappingURL=menu-item-DSyf9f_L.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"menu-item-DSyf9f_L.d.ts","names":[],"sources":["../src/menu/menu-container.ts","../src/menu/menu-trigger.ts","../src/menu/menu-item.ts"],"mappings":";;;;cASa,sBAAsB;EACgB;EACjB,WAAW;EACX,kBAAkB;UACvB;UAGnB;SAwBD,sBAAM;UA4BL;UAkDA;EAYC,QAAQ,mBAAmB;;;;EASpC,WAAW,SAAS,IAAI;EAOxB,wBAAM;UAaE;;;;;UAoCA;UAiCA;EA0BR;UAIQ;UAQA;UAUA;UAqDA;;QAqCF;YACI;IACR,uBAAuB;;;;;KCxWtB;KACA;KAEO;WACD;WACA;WACA;;cAME,oBAAoB;EACH,MAAM;EACN;EACI,WAAW;EACX,kBAAkB;EACtB,WAAW;UAEtB;UACA;UACA;UAEc;UACN;iBAEV;UAEP;UACA;EAER;EAOA;EAQA;EAkBA,QAAQ,mBAAmB;UAMnB;UAYA;UAWA;UAOA;MAKJ;EAIJ;EAIA;EAIA;UAIQ;UAgBA;UAQA;UAYA;UAUA;UAYA;UAOA;UAeA;UAeA;UAkBA;SAiBD,sBAAM;EAmEb,wBAAM;;QAwBA;YACI;IACR,qBAAqB;;;;;cChVZ,iBAAiB;EACA;EAC2B;EAC3B;EACC;EACuB;EACpB,WAAW;EACX,kBAAkB;EAClB,iBAAiB;UAEhC;UACM;UAEf;EAER;UAOQ;UAKA;UAWA;UAQA;UAUA;UAUA;UAWA;UASA;EASR,WAAW,mBAAmB;EAU9B,QAAQ,mBAAmB;UAInB;SAaQ,sBAAM;EAkEtB,wBAAM;;QAwBA;YACI;IACR,kBAAkB"}
|