@evotecit/canopyx 0.3.11 → 0.3.15
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/CanopyX.Html/Assets/canopyx-calendar-edit.js +36 -18
- package/CanopyX.Html/Assets/canopyx-calendar-ics.js +7 -5
- package/CanopyX.Html/Assets/canopyx-calendar.css +124 -116
- package/CanopyX.Html/Assets/canopyx-calendar.js +74 -54
- package/CanopyX.Html/Assets/canopyx-cell-range.css +8 -8
- package/CanopyX.Html/Assets/canopyx-cell-range.js +1 -1
- package/CanopyX.Html/Assets/canopyx-changes.css +113 -113
- package/CanopyX.Html/Assets/canopyx-changes.js +7 -10
- package/CanopyX.Html/Assets/canopyx-column-groups.css +5 -5
- package/CanopyX.Html/Assets/canopyx-column-groups.js +1 -1
- package/CanopyX.Html/Assets/canopyx-data.js +2 -2
- package/CanopyX.Html/Assets/canopyx-detail-rows.css +9 -9
- package/CanopyX.Html/Assets/canopyx-detail-rows.js +2 -2
- package/CanopyX.Html/Assets/canopyx-editing.css +18 -18
- package/CanopyX.Html/Assets/canopyx-editing.js +1 -1
- package/CanopyX.Html/Assets/canopyx-enhance.js +2 -2
- package/CanopyX.Html/Assets/canopyx-export.js +8 -4
- package/CanopyX.Html/Assets/canopyx-facets.css +33 -33
- package/CanopyX.Html/Assets/canopyx-facets.js +10 -11
- package/CanopyX.Html/Assets/canopyx-filter-editor.css +57 -57
- package/CanopyX.Html/Assets/canopyx-filter-editor.js +15 -11
- package/CanopyX.Html/Assets/canopyx-flow-checks.css +11 -11
- package/CanopyX.Html/Assets/canopyx-flow-checks.js +1 -1
- package/CanopyX.Html/Assets/canopyx-flow-command.css +7 -7
- package/CanopyX.Html/Assets/canopyx-flow-command.js +1 -1
- package/CanopyX.Html/Assets/canopyx-flow-dialog.css +7 -7
- package/CanopyX.Html/Assets/canopyx-flow-dialog.js +1 -1
- package/CanopyX.Html/Assets/canopyx-flow-drafts.css +7 -7
- package/CanopyX.Html/Assets/canopyx-flow-drafts.js +1 -1
- package/CanopyX.Html/Assets/canopyx-flow-entry.css +17 -76
- package/CanopyX.Html/Assets/canopyx-flow-entry.js +9 -3
- package/CanopyX.Html/Assets/canopyx-flow-host.css +4 -4
- package/CanopyX.Html/Assets/canopyx-flow-host.js +1 -1
- package/CanopyX.Html/Assets/canopyx-flow-module.mjs +9 -3
- package/CanopyX.Html/Assets/canopyx-flow-pick.css +4 -4
- package/CanopyX.Html/Assets/canopyx-flow-pick.js +1 -1
- package/CanopyX.Html/Assets/canopyx-flow-preview.css +6 -6
- package/CanopyX.Html/Assets/canopyx-flow-preview.js +1 -1
- package/CanopyX.Html/Assets/canopyx-flow-records.css +3 -3
- package/CanopyX.Html/Assets/canopyx-flow-records.js +1 -1
- package/CanopyX.Html/Assets/canopyx-flow-tasks.css +17 -17
- package/CanopyX.Html/Assets/canopyx-flow-tasks.js +1 -1
- package/CanopyX.Html/Assets/canopyx-flow.css +79 -79
- package/CanopyX.Html/Assets/canopyx-flow.js +1 -1
- package/CanopyX.Html/Assets/canopyx-format-editor.css +23 -23
- package/CanopyX.Html/Assets/canopyx-format-editor.js +2 -3
- package/CanopyX.Html/Assets/canopyx-formatting.css +17 -17
- package/CanopyX.Html/Assets/canopyx-formatting.js +5 -5
- package/CanopyX.Html/Assets/canopyx-forms.css +5 -5
- package/CanopyX.Html/Assets/canopyx-forms.js +1 -1
- package/CanopyX.Html/Assets/canopyx-grid-module.mjs +134 -77
- package/CanopyX.Html/Assets/canopyx-grid-options.css +10 -0
- package/CanopyX.Html/Assets/canopyx-grid-options.js +47 -0
- package/CanopyX.Html/Assets/canopyx-grid.css +199 -261
- package/CanopyX.Html/Assets/canopyx-grid.js +134 -77
- package/CanopyX.Html/Assets/canopyx-grouping.css +17 -17
- package/CanopyX.Html/Assets/canopyx-grouping.js +12 -9
- package/CanopyX.Html/Assets/canopyx-highlight.css +14 -14
- package/CanopyX.Html/Assets/canopyx-highlight.js +2 -2
- package/CanopyX.Html/Assets/canopyx-interactive.css +94 -155
- package/CanopyX.Html/Assets/canopyx-interactive.js +58 -24
- package/CanopyX.Html/Assets/canopyx-labels-de.js +5 -0
- package/CanopyX.Html/Assets/canopyx-labels-es.js +5 -0
- package/CanopyX.Html/Assets/canopyx-labels-fr.js +5 -0
- package/CanopyX.Html/Assets/canopyx-labels-it.js +5 -0
- package/CanopyX.Html/Assets/canopyx-labels-pl.js +5 -0
- package/CanopyX.Html/Assets/canopyx-layouts.css +17 -17
- package/CanopyX.Html/Assets/canopyx-layouts.js +4 -12
- package/CanopyX.Html/Assets/canopyx-link.css +7 -7
- package/CanopyX.Html/Assets/canopyx-link.js +1 -1
- package/CanopyX.Html/Assets/canopyx-live.css +9 -9
- package/CanopyX.Html/Assets/canopyx-live.js +2 -2
- package/CanopyX.Html/Assets/canopyx-matrix.css +74 -74
- package/CanopyX.Html/Assets/canopyx-matrix.js +3 -4
- package/CanopyX.Html/Assets/canopyx-module.mjs +58 -24
- package/CanopyX.Html/Assets/canopyx-pager.css +2 -2
- package/CanopyX.Html/Assets/canopyx-pager.js +1 -1
- package/CanopyX.Html/Assets/canopyx-presenters.js +11 -0
- package/CanopyX.Html/Assets/canopyx-record-panel.css +49 -49
- package/CanopyX.Html/Assets/canopyx-record-panel.js +13 -11
- package/CanopyX.Html/Assets/canopyx-reporting-module.mjs +142 -84
- package/CanopyX.Html/Assets/canopyx-reporting.css +214 -276
- package/CanopyX.Html/Assets/canopyx-reporting.js +142 -84
- package/CanopyX.Html/Assets/canopyx-timeline.css +28 -28
- package/CanopyX.Html/Assets/canopyx-timeline.js +11 -10
- package/CanopyX.Html/Assets/canopyx-tree-tools.css +47 -46
- package/CanopyX.Html/Assets/canopyx-tree-tools.js +5 -4
- package/CanopyX.Html/Assets/canopyx.css +81 -142
- package/CanopyX.Html/Assets/canopyx.js +58 -24
- package/JavaScript/calendar.d.ts +15 -0
- package/JavaScript/grid.d.ts +29 -4
- package/JavaScript/hosts.d.ts +11 -0
- package/JavaScript/locales/de.mjs +5 -0
- package/JavaScript/locales/es.mjs +5 -0
- package/JavaScript/locales/fr.mjs +5 -0
- package/JavaScript/locales/it.mjs +5 -0
- package/JavaScript/locales/pl.mjs +5 -0
- package/JavaScript/plugins.d.ts +4 -0
- package/JavaScript/protocol.d.ts +14 -1
- package/JavaScript/records.d.ts +2 -0
- package/README.md +6 -2
- package/package.json +7 -1
|
@@ -1,47 +1,47 @@
|
|
|
1
1
|
/* Flow part: steps,fields,the review page and the result,in the grid's tokens,density and type (docs/flow.md#layouts). */
|
|
2
2
|
.cx-flow{--cx-flow-pad:var(--cx-size-20px);--cx-flow-gap:var(--cx-size-16px);--cx-flow-control:var(--cx-size-34px);
|
|
3
|
-
--cx-size-220px:220px;--cx-size-720px:720px;container-type:inline-size;position:relative;color:var(--
|
|
3
|
+
--cx-size-220px:220px;--cx-size-720px:720px;container-type:inline-size;position:relative;color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));border:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));font:var(--cx-size-14px)/1.45 var(--hfx-font-sans,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif);}
|
|
4
4
|
.cx-flow[data-cx-density="compact"]{--cx-flow-pad:var(--cx-size-14px);--cx-flow-gap:var(--cx-size-12px);--cx-flow-control:var(--cx-size-30px);}
|
|
5
5
|
.cx-flow[data-cx-density="comfortable"]{--cx-flow-pad:var(--cx-size-24px);--cx-flow-gap:var(--cx-size-20px);--cx-flow-control:var(--cx-size-38px);}
|
|
6
6
|
.cx-flow :where(h2,h3,h4,p,ul,ol,dl,dd){margin:0;}
|
|
7
7
|
.cx-flow [hidden]{display:none !important;}
|
|
8
|
-
.cx-flow-head{padding:var(--cx-size-14px) var(--cx-flow-pad);border-bottom:var(--cx-size-1px) solid var(--
|
|
8
|
+
.cx-flow-head{padding:var(--cx-size-14px) var(--cx-flow-pad);border-bottom:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
|
|
9
9
|
.cx-flow-title{font-size:var(--cx-size-17px);font-weight:600;line-height:1.3;}
|
|
10
|
-
.cx-flow-desc{margin-top:var(--cx-size-4px);font-size:var(--cx-size-13px);color:var(--
|
|
10
|
+
.cx-flow-desc{margin-top:var(--cx-size-4px);font-size:var(--cx-size-13px);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
|
|
11
11
|
.cx-flow-marks{list-style:none;padding:0;}
|
|
12
|
-
.cx-flow-mark-btn{display:flex;align-items:center;gap:var(--cx-size-10px);width:100%;min-height:var(--cx-size-44px);padding:var(--cx-size-6px) var(--cx-size-8px);border:0;border-radius:var(--
|
|
13
|
-
.cx-flow-mark-btn:hover{background:var(--
|
|
12
|
+
.cx-flow-mark-btn{display:flex;align-items:center;gap:var(--cx-size-10px);width:100%;min-height:var(--cx-size-44px);padding:var(--cx-size-6px) var(--cx-size-8px);border:0;border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));background:transparent;color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font:inherit;text-align:start;cursor:pointer;}
|
|
13
|
+
.cx-flow-mark-btn:hover{background:var(--hfx-color-hover,light-dark(#f5f5f5,#232529));}
|
|
14
14
|
.cx-flow-mark-btn[aria-disabled="true"]{cursor:default;}
|
|
15
15
|
.cx-flow-mark-btn[aria-disabled="true"]:hover{background:transparent;}
|
|
16
|
-
.cx-flow-mark-btn:focus-visible,.cx-flow :is(.cx-flow-btn,.cx-flow-link,.cx-flow-icon-btn):focus-visible{outline:var(--
|
|
17
|
-
.cx-flow-num{flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--cx-size-24px);height:var(--cx-size-24px);border:var(--cx-size-1px) solid var(--
|
|
18
|
-
background:var(--
|
|
16
|
+
.cx-flow-mark-btn:focus-visible,.cx-flow :is(.cx-flow-btn,.cx-flow-link,.cx-flow-icon-btn):focus-visible{outline:var(--hfx-focus-width,2px) solid var(--hfx-color-focus-ring,light-dark(#02726a,#37c9b8));outline-offset:var(--hfx-focus-offset,2px);}
|
|
17
|
+
.cx-flow-num{flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--cx-size-24px);height:var(--cx-size-24px);border:var(--cx-size-1px) solid var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));border-radius:50%;
|
|
18
|
+
background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));font-size:var(--cx-size-12d5px);font-weight:600;font-variant-numeric:tabular-nums;color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
|
|
19
19
|
.cx-flow-mark-text{display:flex;flex-direction:column;min-width:0;}
|
|
20
20
|
.cx-flow-mark-title{font-size:var(--cx-size-13d5px);line-height:1.3;overflow-wrap:anywhere;}
|
|
21
|
-
.cx-flow-mark-state{font-size:var(--cx-size-12px);color:var(--
|
|
22
|
-
.cx-flow-mark[data-cx-state="current"] .cx-flow-num{background:var(--
|
|
23
|
-
.cx-flow-mark[data-cx-state="current"] .cx-flow-mark-title{color:var(--
|
|
24
|
-
.cx-flow-mark[data-cx-state="complete"] .cx-flow-mark-title{color:var(--
|
|
25
|
-
.cx-flow-mark[data-cx-state="complete"] .cx-flow-num{color:var(--
|
|
26
|
-
.cx-flow-mark[data-cx-state="error"] .cx-flow-num{color:var(--
|
|
27
|
-
.cx-flow-mark[data-cx-state="error"] :is(.cx-flow-mark-title,.cx-flow-mark-state){color:var(--
|
|
21
|
+
.cx-flow-mark-state{font-size:var(--cx-size-12px);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
|
|
22
|
+
.cx-flow-mark[data-cx-state="current"] .cx-flow-num{background:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));border-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));color:var(--hfx-color-accent-contrast,light-dark(#ffffff,#0c0d10));}
|
|
23
|
+
.cx-flow-mark[data-cx-state="current"] .cx-flow-mark-title{color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));font-weight:600;}
|
|
24
|
+
.cx-flow-mark[data-cx-state="complete"] .cx-flow-mark-title{color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));}
|
|
25
|
+
.cx-flow-mark[data-cx-state="complete"] .cx-flow-num{color:var(--hfx-color-status-good-fg,light-dark(#177345,#4cc78a));border-color:color-mix(in srgb,var(--hfx-color-status-good-fg,light-dark(#177345,#4cc78a)) 45%,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));}
|
|
26
|
+
.cx-flow-mark[data-cx-state="error"] .cx-flow-num{color:var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));border-color:var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));background:var(--hfx-color-status-bad-bg,light-dark(#f9e4e4,#3c272a));}
|
|
27
|
+
.cx-flow-mark[data-cx-state="error"] :is(.cx-flow-mark-title,.cx-flow-mark-state){color:var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));}
|
|
28
28
|
.cx-flow-mark[data-cx-state="locked"]{opacity:.72;}
|
|
29
|
-
.cx-flow-horizontal > .cx-flow-rail{padding:var(--cx-size-8px) calc(var(--cx-flow-pad) - var(--cx-size-8px));border-bottom:var(--cx-size-1px) solid var(--
|
|
29
|
+
.cx-flow-horizontal > .cx-flow-rail{padding:var(--cx-size-8px) calc(var(--cx-flow-pad) - var(--cx-size-8px));border-bottom:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));background:var(--hfx-color-surface-sunken,light-dark(#f7f8f9,#111317));overflow-x:auto;scrollbar-width:thin;}
|
|
30
30
|
.cx-flow-horizontal .cx-flow-marks{display:flex;align-items:center;gap:var(--cx-size-4px);min-width:max-content;}
|
|
31
31
|
.cx-flow-horizontal .cx-flow-mark{display:flex;align-items:center;gap:var(--cx-size-4px);}
|
|
32
|
-
.cx-flow-horizontal .cx-flow-mark + .cx-flow-mark::before{content:"";flex:none;width:var(--cx-size-24px);border-top:var(--cx-size-1px) solid var(--
|
|
32
|
+
.cx-flow-horizontal .cx-flow-mark + .cx-flow-mark::before{content:"";flex:none;width:var(--cx-size-24px);border-top:var(--cx-size-1px) solid var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));}
|
|
33
33
|
.cx-flow-horizontal .cx-flow-mark-btn{width:auto;min-height:var(--cx-size-36px);}
|
|
34
34
|
.cx-flow-horizontal .cx-flow-mark-title{white-space:nowrap;}
|
|
35
35
|
.cx-flow-horizontal .cx-flow-mark-state:not(.cx-sr-only){display:none;}
|
|
36
36
|
.cx-flow-horizontal .cx-flow-mark[data-cx-state="error"] .cx-flow-mark-state{display:block;}
|
|
37
37
|
.cx-flow-vertical{display:grid;grid-template-columns:minmax(var(--cx-size-180px),var(--cx-size-240px)) minmax(0,1fr);}
|
|
38
|
-
.cx-flow-vertical > .cx-flow-rail{padding:var(--cx-size-12px) var(--cx-size-8px);border-inline-end:var(--cx-size-1px) solid var(--
|
|
38
|
+
.cx-flow-vertical > .cx-flow-rail{padding:var(--cx-size-12px) var(--cx-size-8px);border-inline-end:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));background:var(--hfx-color-surface-sunken,light-dark(#f7f8f9,#111317));border-end-start-radius:var(--cx-size-8px);}
|
|
39
39
|
.cx-flow-vertical .cx-flow-marks{display:flex;flex-direction:column;gap:var(--cx-size-2px);}
|
|
40
40
|
.cx-flow-vertical .cx-flow-mark-btn{align-items:flex-start;}
|
|
41
|
-
.cx-flow-vertical .cx-flow-mark-btn[aria-current="step"]{background:var(--
|
|
41
|
+
.cx-flow-vertical .cx-flow-mark-btn[aria-current="step"]{background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));box-shadow:inset 0 0 0 var(--cx-size-1px) var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
|
|
42
42
|
.cx-flow-single > .cx-flow-rail{display:none;}
|
|
43
43
|
.cx-flow-single .cx-flow-actions{border-end-start-radius:var(--cx-size-8px);}
|
|
44
|
-
.cx-flow-stack .cx-flow-mark{border-bottom:var(--cx-size-1px) solid var(--
|
|
44
|
+
.cx-flow-stack .cx-flow-mark{border-bottom:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
|
|
45
45
|
.cx-flow-stack .cx-flow-mark:last-child{border-bottom:0;}
|
|
46
46
|
.cx-flow-stack .cx-flow-mark-btn{padding:var(--cx-size-8px) var(--cx-flow-pad);border-radius:0;}
|
|
47
47
|
.cx-flow-stack .cx-flow-mark[data-cx-state="current"] > .cx-flow-mark-btn{padding-bottom:var(--cx-size-2px);}
|
|
@@ -52,83 +52,83 @@ background:var(--cx-surface);font-size:var(--cx-size-12d5px);font-weight:600;fon
|
|
|
52
52
|
.cx-flow-stage{padding:var(--cx-size-20px) var(--cx-flow-pad) var(--cx-size-8px);}
|
|
53
53
|
.cx-flow-step{max-width:var(--cx-size-720px);}
|
|
54
54
|
.cx-flow-step-title{font-size:var(--cx-size-16px);font-weight:600;line-height:1.3;outline:none;}
|
|
55
|
-
.cx-flow-step-desc{margin-top:var(--cx-size-4px);color:var(--
|
|
55
|
+
.cx-flow-step-desc{margin-top:var(--cx-size-4px);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-size:var(--cx-size-13d5px);}
|
|
56
56
|
.cx-flow-step > :is(.cx-flow-block,.cx-flow-section,.cx-flow-summary,.cx-flow-banner,.cx-flow-answer-banner,.cx-flow-review-tools,.cx-flow-review-lists,.cx-flow-declaration,.cx-flow-panel-text,.cx-flow-answers,.cx-flow-links,.cx-flow-bar){margin-top:var(--cx-flow-gap);}
|
|
57
|
-
.cx-flow-section{padding-top:var(--cx-size-4px);border-top:var(--cx-size-1px) solid var(--
|
|
58
|
-
.cx-flow-section-title{padding-top:var(--cx-size-10px);font-size:var(--cx-size-11d5px);font-weight:700;letter-spacing:var(--cx-size-d06em);text-transform:uppercase;color:var(--
|
|
59
|
-
.cx-flow-section-desc{margin-top:var(--cx-size-2px);font-size:var(--cx-size-13px);color:var(--
|
|
57
|
+
.cx-flow-section{padding-top:var(--cx-size-4px);border-top:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
|
|
58
|
+
.cx-flow-section-title{padding-top:var(--cx-size-10px);font-size:var(--cx-size-11d5px);font-weight:700;letter-spacing:var(--cx-size-d06em);text-transform:uppercase;color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
|
|
59
|
+
.cx-flow-section-desc{margin-top:var(--cx-size-2px);font-size:var(--cx-size-13px);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
|
|
60
60
|
.cx-flow-section > .cx-flow-grid{margin-top:var(--cx-size-12px);}
|
|
61
61
|
.cx-flow-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cx-flow-gap) var(--cx-size-16px);}
|
|
62
62
|
.cx-flow-field{grid-column:1 / -1;min-width:0;}
|
|
63
63
|
.cx-flow-field.cx-flow-half{grid-column:auto;}
|
|
64
64
|
@container (max-width:520px){.cx-flow-field.cx-flow-half{grid-column:1 / -1;}}
|
|
65
|
-
.cx-flow-label{display:block;font-weight:600;font-size:var(--cx-size-13d5px);color:var(--
|
|
66
|
-
.cx-flow-optional{font-weight:400;color:var(--
|
|
67
|
-
.cx-flow-help{margin-top:var(--cx-size-2px);font-size:var(--cx-size-13px);color:var(--
|
|
65
|
+
.cx-flow-label{display:block;font-weight:600;font-size:var(--cx-size-13d5px);color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));}
|
|
66
|
+
.cx-flow-optional{font-weight:400;color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
|
|
67
|
+
.cx-flow-help{margin-top:var(--cx-size-2px);font-size:var(--cx-size-13px);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
|
|
68
68
|
.cx-flow-control{margin-top:var(--cx-size-6px);}
|
|
69
|
-
.cx-flow-error{margin-top:var(--cx-size-4px);font-size:var(--cx-size-13px);color:var(--
|
|
69
|
+
.cx-flow-error{margin-top:var(--cx-size-4px);font-size:var(--cx-size-13px);color:var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));}
|
|
70
70
|
.cx-flow .cx-flow-input{box-sizing:border-box;width:100%;max-width:var(--cx-size-440px);min-height:var(--cx-flow-control);height:var(--cx-flow-control);margin:0;padding:0 var(--cx-size-10px);
|
|
71
|
-
font:inherit;color:var(--
|
|
71
|
+
font:inherit;color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));border:var(--cx-size-1px) solid var(--hfx-color-border-control,light-dark(#8a8f98,#6e737c));border-radius:var(--hfx-radius-sm,4px);color-scheme:inherit;}
|
|
72
72
|
.cx-flow-half .cx-flow-input{max-width:100%;}
|
|
73
|
-
.cx-flow .cx-flow-input::placeholder{color:color-mix(in srgb,var(--
|
|
74
|
-
.cx-flow .cx-flow-input:focus-visible{outline:none;border-color:var(--
|
|
75
|
-
.cx-flow .cx-flow-input[aria-invalid="true"],.cx-flow :not(.cx-flow-list)[aria-invalid="true"] .cx-flow-input{border-color:var(--
|
|
76
|
-
.cx-flow .cx-flow-input:read-only:not(select){background:var(--
|
|
73
|
+
.cx-flow .cx-flow-input::placeholder{color:color-mix(in srgb,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)) 60%,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));font-style:italic;opacity:1;}
|
|
74
|
+
.cx-flow .cx-flow-input:focus-visible{outline:none;border-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));box-shadow:0 0 0 var(--cx-size-2px) var(--hfx-color-accent-subtle,light-dark(#e7f1f1,#1b3435));}
|
|
75
|
+
.cx-flow .cx-flow-input[aria-invalid="true"],.cx-flow :not(.cx-flow-list)[aria-invalid="true"] .cx-flow-input{border-color:var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));}
|
|
76
|
+
.cx-flow .cx-flow-input:read-only:not(select){background:var(--hfx-color-surface-sunken,light-dark(#f7f8f9,#111317));color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));}
|
|
77
77
|
.cx-flow .cx-flow-textarea{height:auto;max-width:100%;padding:var(--cx-size-8px) var(--cx-size-10px);resize:vertical;}
|
|
78
78
|
.cx-flow .cx-flow-type-number .cx-flow-input{max-width:var(--cx-size-180px);text-align:end;font-variant-numeric:tabular-nums;}
|
|
79
79
|
.cx-flow .cx-editor-combo{display:block;max-width:var(--cx-size-440px);}
|
|
80
80
|
.cx-flow-toggle{display:flex;align-items:center;gap:var(--cx-size-10px);margin-top:0;}
|
|
81
81
|
.cx-flow-toggle .cx-flow-label{font-weight:500;}
|
|
82
|
-
.cx-flow .cx-flow-toggle input{appearance:none;flex:none;position:relative;width:var(--cx-size-36px);height:var(--cx-size-20px);min-height:0;margin:0;padding:0;border:var(--cx-size-1px) solid var(--
|
|
83
|
-
.cx-flow .cx-flow-toggle input::after{content:"";position:absolute;inset-block-start:var(--cx-size-2px);inset-inline-start:var(--cx-size-2px);width:var(--cx-size-14px);height:var(--cx-size-14px);border-radius:50%;background:var(--
|
|
84
|
-
.cx-flow .cx-flow-toggle input:checked{background:var(--
|
|
85
|
-
.cx-flow .cx-flow-toggle input:checked::after{inset-inline-start:calc(100% - var(--cx-size-16px));background:var(--
|
|
86
|
-
.cx-flow .cx-flow-toggle input:focus-visible{outline:var(--
|
|
82
|
+
.cx-flow .cx-flow-toggle input{appearance:none;flex:none;position:relative;width:var(--cx-size-36px);height:var(--cx-size-20px);min-height:0;margin:0;padding:0;border:var(--cx-size-1px) solid var(--hfx-color-border-control,light-dark(#8a8f98,#6e737c));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));background:var(--hfx-color-surface-sunken,light-dark(#f7f8f9,#111317));cursor:pointer;box-shadow:none;}
|
|
83
|
+
.cx-flow .cx-flow-toggle input::after{content:"";position:absolute;inset-block-start:var(--cx-size-2px);inset-inline-start:var(--cx-size-2px);width:var(--cx-size-14px);height:var(--cx-size-14px);border-radius:50%;background:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
|
|
84
|
+
.cx-flow .cx-flow-toggle input:checked{background:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));border-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
|
|
85
|
+
.cx-flow .cx-flow-toggle input:checked::after{inset-inline-start:calc(100% - var(--cx-size-16px));background:var(--hfx-color-accent-contrast,light-dark(#ffffff,#0c0d10));}
|
|
86
|
+
.cx-flow .cx-flow-toggle input:focus-visible{outline:var(--hfx-focus-width,2px) solid var(--hfx-color-focus-ring,light-dark(#02726a,#37c9b8));outline-offset:var(--hfx-focus-offset,2px);}
|
|
87
87
|
.cx-flow-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--cx-size-220px)),1fr));gap:var(--cx-size-8px);}
|
|
88
|
-
.cx-flow-card{position:relative;display:flex;align-items:flex-start;gap:var(--cx-size-10px);padding:var(--cx-size-10px) var(--cx-size-12px);border:var(--cx-size-1px) solid var(--
|
|
89
|
-
.cx-flow-card:hover{background:var(--
|
|
90
|
-
.cx-flow-card:has(input:checked){border-color:var(--
|
|
91
|
-
.cx-flow-card:has(input:focus-visible){outline:var(--
|
|
88
|
+
.cx-flow-card{position:relative;display:flex;align-items:flex-start;gap:var(--cx-size-10px);padding:var(--cx-size-10px) var(--cx-size-12px);border:var(--cx-size-1px) solid var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));cursor:pointer;}
|
|
89
|
+
.cx-flow-card:hover{background:var(--hfx-color-hover,light-dark(#f5f5f5,#232529));}
|
|
90
|
+
.cx-flow-card:has(input:checked){border-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));box-shadow:inset 0 0 0 var(--cx-size-1px) var(--hfx-color-accent,light-dark(#11776f,#37c9b8));background:color-mix(in srgb,var(--hfx-color-accent,light-dark(#11776f,#37c9b8)) 5%,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));}
|
|
91
|
+
.cx-flow-card:has(input:focus-visible){outline:var(--hfx-focus-width,2px) solid var(--hfx-color-focus-ring,light-dark(#02726a,#37c9b8));outline-offset:var(--hfx-focus-offset,2px);}
|
|
92
92
|
.cx-flow-card .cx-flow-choice-input{position:absolute;opacity:0;width:var(--cx-size-1px);height:var(--cx-size-1px);margin:0;}
|
|
93
93
|
.cx-flow-card-body{display:flex;flex-direction:column;gap:var(--cx-size-2px);flex:1;min-width:0;}
|
|
94
94
|
.cx-flow-card-title{font-weight:600;}
|
|
95
|
-
.cx-flow-card-desc{font-size:var(--cx-size-13px);color:var(--
|
|
96
|
-
.cx-flow-card-reason{font-size:var(--cx-size-13px);color:var(--
|
|
97
|
-
.cx-flow-card-check{flex:none;width:var(--cx-size-18px);height:var(--cx-size-18px);margin-top:var(--cx-size-1px);border:var(--cx-size-1px) solid var(--
|
|
98
|
-
.cx-flow-card:has(input:checked) .cx-flow-card-check{border-color:var(--
|
|
95
|
+
.cx-flow-card-desc{font-size:var(--cx-size-13px);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
|
|
96
|
+
.cx-flow-card-reason{font-size:var(--cx-size-13px);color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));font-style:italic;}
|
|
97
|
+
.cx-flow-card-check{flex:none;width:var(--cx-size-18px);height:var(--cx-size-18px);margin-top:var(--cx-size-1px);border:var(--cx-size-1px) solid var(--hfx-color-border-control,light-dark(#8a8f98,#6e737c));border-radius:50%;}
|
|
98
|
+
.cx-flow-card:has(input:checked) .cx-flow-card-check{border-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));background:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));box-shadow:inset 0 0 0 var(--cx-size-4px) var(--hfx-color-surface,light-dark(#ffffff,#16181c));}
|
|
99
99
|
.cx-flow-card.cx-flow-disabled,.cx-flow-radio.cx-flow-disabled{cursor:default;opacity:.62;}
|
|
100
|
-
.cx-flow-card.cx-flow-disabled:hover{background:var(--
|
|
101
|
-
.cx-flow-badge{display:inline-block;padding:0 var(--cx-size-6px);border-radius:var(--
|
|
100
|
+
.cx-flow-card.cx-flow-disabled:hover{background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));}
|
|
101
|
+
.cx-flow-badge{display:inline-block;padding:0 var(--cx-size-6px);border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));background:var(--hfx-color-surface-sunken,light-dark(#f7f8f9,#111317));border:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));font-size:var(--cx-size-11d5px);font-weight:600;color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));vertical-align:1px;}
|
|
102
102
|
.cx-flow-radios,.cx-flow-multi-list{display:flex;flex-direction:column;gap:var(--cx-size-2px);}
|
|
103
103
|
:is(.cx-flow-radio,.cx-flow-check){display:flex;flex-wrap:wrap;align-items:center;gap:var(--cx-size-2px) var(--cx-size-8px);min-height:var(--cx-size-28px);cursor:pointer;}
|
|
104
|
-
:is(.cx-flow-radio,.cx-flow-check) input{flex:none;width:var(--cx-size-16px);height:var(--cx-size-16px);margin:0;accent-color:var(--
|
|
104
|
+
:is(.cx-flow-radio,.cx-flow-check) input{flex:none;width:var(--cx-size-16px);height:var(--cx-size-16px);margin:0;accent-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
|
|
105
105
|
.cx-flow-radio .cx-flow-card-body{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:var(--cx-size-2px) var(--cx-size-8px);}
|
|
106
106
|
.cx-flow-radio .cx-flow-card-title{font-weight:400;}
|
|
107
107
|
.cx-flow-check > .cx-flow-card-desc{flex-basis:100%;padding-inline-start:var(--cx-size-24px);}
|
|
108
108
|
@container (min-width:560px){.cx-flow-multi-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--cx-size-16px);}}
|
|
109
|
-
.cx-flow-multi-group{grid-column:1 / -1;margin-top:var(--cx-size-6px);font-size:var(--cx-size-11d5px);font-weight:700;letter-spacing:var(--cx-size-d06em);text-transform:uppercase;color:var(--
|
|
109
|
+
.cx-flow-multi-group{grid-column:1 / -1;margin-top:var(--cx-size-6px);font-size:var(--cx-size-11d5px);font-weight:700;letter-spacing:var(--cx-size-d06em);text-transform:uppercase;color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
|
|
110
110
|
.cx-flow-multi-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cx-size-4px) var(--cx-size-14px);margin-top:var(--cx-size-6px);font-size:var(--cx-size-13px);}
|
|
111
|
-
.cx-flow-count{color:var(--
|
|
111
|
+
.cx-flow-count{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-size:var(--cx-size-13px);}
|
|
112
112
|
.cx-flow-list-items{display:flex;flex-direction:column;gap:var(--cx-size-6px);list-style:none;padding:0;}
|
|
113
113
|
.cx-flow-list-item{display:flex;gap:var(--cx-size-6px);max-width:var(--cx-size-440px);}
|
|
114
114
|
.cx-flow-list-item .cx-flow-input{flex:1;}
|
|
115
|
-
.cx-flow-icon-btn{flex:none;width:var(--cx-flow-control);height:var(--cx-flow-control);border:var(--cx-size-1px) solid var(--
|
|
116
|
-
.cx-flow-icon-btn:hover{background:var(--
|
|
115
|
+
.cx-flow-icon-btn{flex:none;width:var(--cx-flow-control);height:var(--cx-flow-control);border:var(--cx-size-1px) solid var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));border-radius:var(--hfx-radius-sm,4px);background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font:inherit;font-size:var(--cx-size-17px);line-height:1;cursor:pointer;}
|
|
116
|
+
.cx-flow-icon-btn:hover{background:var(--hfx-color-hover,light-dark(#f5f5f5,#232529));color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));}
|
|
117
117
|
.cx-flow-list-add{margin-top:var(--cx-size-8px);}
|
|
118
118
|
.cx-flow-secret,.cx-flow-duration{display:flex;gap:var(--cx-size-6px);max-width:var(--cx-size-440px);}
|
|
119
119
|
.cx-flow-secret .cx-flow-input{flex:1;}
|
|
120
120
|
.cx-flow .cx-flow-duration .cx-flow-amount{width:var(--cx-size-92px);max-width:var(--cx-size-92px);text-align:end;font-variant-numeric:tabular-nums;}
|
|
121
121
|
.cx-flow .cx-flow-duration .cx-flow-unit{width:auto;max-width:var(--cx-size-180px);}
|
|
122
|
-
.cx-flow-hint{color:var(--
|
|
123
|
-
.cx-flow-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--cx-size-6px);height:var(--cx-flow-control);min-height:var(--cx-flow-control);padding:0 var(--cx-size-14px);border:var(--cx-size-1px) solid var(--
|
|
124
|
-
border-radius:var(--
|
|
125
|
-
.cx-flow-btn:hover{background:var(--
|
|
122
|
+
.cx-flow-hint{color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));}
|
|
123
|
+
.cx-flow-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--cx-size-6px);height:var(--cx-flow-control);min-height:var(--cx-flow-control);padding:0 var(--cx-size-14px);border:var(--cx-size-1px) solid var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));
|
|
124
|
+
border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));font:500 var(--cx-size-14px) var(--hfx-font-sans,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif);white-space:nowrap;cursor:pointer;}
|
|
125
|
+
.cx-flow-btn:hover{background:var(--hfx-color-hover,light-dark(#f5f5f5,#232529));}
|
|
126
126
|
.cx-flow-btn:disabled{opacity:.5;cursor:default;}
|
|
127
|
-
.cx-flow-btn.cx-primary{background:var(--
|
|
128
|
-
.cx-flow-btn.cx-primary:hover:not(:disabled){background:color-mix(in srgb,var(--
|
|
129
|
-
.cx-flow-link{padding:0;border:0;background:none;color:var(--
|
|
127
|
+
.cx-flow-btn.cx-primary{background:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));border-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));color:var(--hfx-color-accent-contrast,light-dark(#ffffff,#0c0d10));font-weight:600;}
|
|
128
|
+
.cx-flow-btn.cx-primary:hover:not(:disabled){background:color-mix(in srgb,var(--hfx-color-accent,light-dark(#11776f,#37c9b8)) 88%,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));}
|
|
129
|
+
.cx-flow-link{padding:0;border:0;background:none;color:var(--hfx-color-accent-text,light-dark(#02726a,#37c9b8));font:inherit;text-align:start;text-decoration:underline;text-underline-offset:var(--cx-size-2px);cursor:pointer;}
|
|
130
130
|
.cx-flow-link:hover{text-decoration-thickness:var(--cx-size-2px);}
|
|
131
|
-
.cx-flow-actions{position:sticky;bottom:0;z-index:1;display:flex;align-items:center;gap:var(--cx-size-8px);padding:var(--cx-size-12px) var(--cx-flow-pad);border-top:var(--cx-size-1px) solid var(--
|
|
131
|
+
.cx-flow-actions{position:sticky;bottom:0;z-index:1;display:flex;align-items:center;gap:var(--cx-size-8px);padding:var(--cx-size-12px) var(--cx-flow-pad);border-top:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));border-end-end-radius:var(--cx-size-8px);}
|
|
132
132
|
.cx-flow-actions[hidden]{display:none;}
|
|
133
133
|
.cx-flow-spacer{flex:1;}
|
|
134
134
|
.cx-flow-stack .cx-flow-actions{position:static;border-radius:0;}
|
|
@@ -136,40 +136,40 @@ border-radius:var(--cx-radius);background:var(--cx-surface);color:var(--cx-text)
|
|
|
136
136
|
.cx-flow.cx-flow-narrow .cx-flow-input:not(textarea,[type="checkbox"]){min-height:var(--cx-size-44px);height:var(--cx-size-44px);}
|
|
137
137
|
.cx-flow-narrow .cx-flow-icon-btn{width:var(--cx-size-44px);}
|
|
138
138
|
.cx-flow-narrow .cx-flow-next{flex:1;}
|
|
139
|
-
.cx-flow-summary,.cx-flow-banner,.cx-flow-answer-banner{padding:var(--cx-size-10px) var(--cx-size-14px);border-radius:var(--
|
|
140
|
-
.cx-flow-summary,.cx-flow-problems{border-inline-start-color:var(--
|
|
141
|
-
.cx-flow-ready{border-inline-start-color:var(--
|
|
139
|
+
.cx-flow-summary,.cx-flow-banner,.cx-flow-answer-banner{padding:var(--cx-size-10px) var(--cx-size-14px);border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));border-inline-start:var(--cx-size-3px) solid var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));background:var(--hfx-color-surface-sunken,light-dark(#f7f8f9,#111317));outline:none;}
|
|
140
|
+
.cx-flow-summary,.cx-flow-problems{border-inline-start-color:var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));background:var(--hfx-color-status-bad-bg,light-dark(#f9e4e4,#3c272a));}
|
|
141
|
+
.cx-flow-ready{border-inline-start-color:var(--hfx-color-status-good-fg,light-dark(#177345,#4cc78a));background:var(--hfx-color-status-good-bg,light-dark(#e2f0e9,#1f362f));}
|
|
142
142
|
.cx-flow-summary-title,.cx-flow-banner-title{font-weight:600;}
|
|
143
143
|
.cx-flow-summary ul,.cx-flow-banner-list{margin-top:var(--cx-size-4px);padding-inline-start:var(--cx-size-18px);}
|
|
144
|
-
.cx-flow-summary .cx-flow-link,.cx-flow-problems .cx-flow-link{color:var(--
|
|
145
|
-
.cx-flow-banner-warn{margin-top:var(--cx-size-4px);color:var(--
|
|
146
|
-
.cx-flow-warning{color:var(--
|
|
144
|
+
.cx-flow-summary .cx-flow-link,.cx-flow-problems .cx-flow-link{color:var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));}
|
|
145
|
+
.cx-flow-banner-warn{margin-top:var(--cx-size-4px);color:var(--hfx-color-status-warn-fg,light-dark(#8c5c05,#eeb640));font-weight:600;}
|
|
146
|
+
.cx-flow-warning{color:var(--hfx-color-status-warn-fg,light-dark(#8c5c05,#eeb640));}
|
|
147
147
|
.cx-flow-answer-banner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cx-size-8px) var(--cx-size-12px);}
|
|
148
148
|
.cx-flow-answer-banner .cx-flow-btn{margin-inline-start:auto;}
|
|
149
149
|
.cx-flow-review-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cx-size-6px) var(--cx-size-16px);}
|
|
150
150
|
.cx-flow-switch{display:inline-flex;align-items:center;gap:var(--cx-size-8px);min-height:var(--cx-size-28px);cursor:pointer;}
|
|
151
|
-
.cx-flow-switch input{width:var(--cx-size-16px);height:var(--cx-size-16px);margin:0;accent-color:var(--
|
|
151
|
+
.cx-flow-switch input{width:var(--cx-size-16px);height:var(--cx-size-16px);margin:0;accent-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
|
|
152
152
|
.cx-flow-review-group + .cx-flow-review-group{margin-top:var(--cx-size-20px);}
|
|
153
|
-
.cx-flow-review-title{padding-bottom:var(--cx-size-6px);border-bottom:var(--cx-size-1px) solid var(--
|
|
153
|
+
.cx-flow-review-title{padding-bottom:var(--cx-size-6px);border-bottom:var(--cx-size-1px) solid var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));font-size:var(--cx-size-14px);font-weight:600;}
|
|
154
154
|
.cx-flow-answers{display:flex;flex-direction:column;}
|
|
155
|
-
.cx-flow-answer{display:grid;grid-template-columns:minmax(var(--cx-size-140px),36%) minmax(0,1fr) auto;gap:var(--cx-size-4px) var(--cx-size-16px);padding:var(--cx-size-8px) 0;border-bottom:var(--cx-size-1px) solid var(--
|
|
156
|
-
.cx-flow-answer dt{color:var(--
|
|
155
|
+
.cx-flow-answer{display:grid;grid-template-columns:minmax(var(--cx-size-140px),36%) minmax(0,1fr) auto;gap:var(--cx-size-4px) var(--cx-size-16px);padding:var(--cx-size-8px) 0;border-bottom:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
|
|
156
|
+
.cx-flow-answer dt{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-size:var(--cx-size-13d5px);}
|
|
157
157
|
.cx-flow-answer-value{display:flex;flex-direction:column;gap:var(--cx-size-2px);min-width:0;overflow-wrap:anywhere;white-space:pre-line;}
|
|
158
|
-
.cx-flow-empty{color:var(--
|
|
159
|
-
.cx-flow-was{font-size:var(--cx-size-13px);color:var(--
|
|
158
|
+
.cx-flow-empty{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
|
|
159
|
+
.cx-flow-was{font-size:var(--cx-size-13px);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
|
|
160
160
|
.cx-flow-changed .cx-flow-now{font-weight:600;}
|
|
161
161
|
.cx-flow-answer-action{text-align:end;}
|
|
162
162
|
@container (max-width:520px){.cx-flow-answer{grid-template-columns:minmax(0,1fr) auto;}.cx-flow-answer dt{grid-column:1 / -1;}}
|
|
163
|
-
.cx-flow-declaration{padding:var(--cx-size-10px) 0 0;border-top:var(--cx-size-1px) solid var(--
|
|
164
|
-
.cx-flow-none{color:var(--
|
|
163
|
+
.cx-flow-declaration{padding:var(--cx-size-10px) 0 0;border-top:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));font-size:var(--cx-size-13d5px);}
|
|
164
|
+
.cx-flow-none{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
|
|
165
165
|
.cx-flow-panel .cx-flow-step-title{display:flex;align-items:center;gap:var(--cx-size-10px);}
|
|
166
|
-
.cx-flow-panel-mark{display:inline-flex;align-items:center;justify-content:center;width:var(--cx-size-28px);height:var(--cx-size-28px);border-radius:50%;background:var(--
|
|
167
|
-
.cx-flow-progress .cx-flow-panel-mark{background:var(--
|
|
168
|
-
.cx-flow-result-value{display:inline-block;max-width:100%;padding:var(--cx-size-4px) var(--cx-size-8px);border-radius:var(--
|
|
166
|
+
.cx-flow-panel-mark{display:inline-flex;align-items:center;justify-content:center;width:var(--cx-size-28px);height:var(--cx-size-28px);border-radius:50%;background:var(--hfx-color-status-good-bg,light-dark(#e2f0e9,#1f362f));color:var(--hfx-color-status-good-fg,light-dark(#177345,#4cc78a));font-size:var(--cx-size-14px);}
|
|
167
|
+
.cx-flow-progress .cx-flow-panel-mark{background:var(--hfx-color-accent-subtle,light-dark(#e7f1f1,#1b3435));color:var(--hfx-color-accent-text,light-dark(#02726a,#37c9b8));}
|
|
168
|
+
.cx-flow-result-value{display:inline-block;max-width:100%;padding:var(--cx-size-4px) var(--cx-size-8px);border-radius:var(--hfx-radius-sm,4px);background:var(--hfx-color-surface-sunken,light-dark(#f7f8f9,#111317));font-family:var(--hfx-font-mono,"Cascadia Mono","Cascadia Code",Consolas,"SFMono-Regular",Menlo,monospace);font-size:var(--cx-size-13px);overflow-wrap:anywhere;white-space:normal;}
|
|
169
169
|
.cx-flow-once .cx-flow-answer-value{align-items:flex-start;gap:var(--cx-size-6px);}
|
|
170
170
|
.cx-flow-links{display:flex;flex-direction:column;gap:var(--cx-size-4px);padding-inline-start:var(--cx-size-18px);}
|
|
171
171
|
.cx-flow-panel-actions{position:static;margin-top:var(--cx-flow-gap);padding-inline:0;border-top:0;}
|
|
172
|
-
progress.cx-flow-bar{display:block;width:100%;max-width:var(--cx-size-440px);height:var(--cx-size-8px);accent-color:var(--
|
|
172
|
+
progress.cx-flow-bar{display:block;width:100%;max-width:var(--cx-size-440px);height:var(--cx-size-8px);accent-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
|
|
173
173
|
@media (forced-colors:active){
|
|
174
174
|
.cx-flow-mark[data-cx-state="current"] .cx-flow-num{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight;}
|
|
175
175
|
.cx-flow-card:has(input:checked){outline:var(--cx-size-2px) solid Highlight;}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(global){"use strict";const installed=new WeakSet();const part={version:"
|
|
1
|
+
(function(global){"use strict";const installed=new WeakSet();const part={version:"e7dea789e4893860",requires:["forms"],install(context){if(installed.has(context.FLOW_IMPL))return;const{FLOW_IMPL,FORMS_IMPL,h,setText,fill,plural,foldText,boundedPattern,numberFormat,gridFreeze}=context;const{editParseNumber,EDIT_EDITORS,formRuleSpec,formCheck,FORM_LABELS}=FORMS_IMPL;const FLOW_LABELS={flowSteps:"Steps",flowStepOf:"Step {current} of {count}",flowStepAnnounce:"Step {current} of {count}, {title}",flowNext:"Next",flowBack:"Back",flowSubmit:"Submit",flowSubmitting:"Submitting…",flowReviewTitle:"Check your answers",flowChange:"Change",flowChangeField:"Change {field}",flowNotProvided:"Not provided",flowOptional:"(optional)",flowStepOptional:"Optional",flowStepComplete:"Complete",flowStepCurrent:"Current step",flowStepErrors:"Errors: {count}",flowStepLocked:"Complete the earlier steps first",flowStepNotStarted:"Not started",flowErrorSummary:"Fix these before you continue",flowReady:"Ready to submit",flowNotReady:"Errors to fix: {count}",flowWarnings:"Warnings: {count}",flowChangesOnly:"Show changes only",flowNoChanges:"No answers have changed.",flowWas:"Was: {value}",flowChangedCount:"Changed answers: {count}",flowSecretSet:"Set",flowSecretKept:"Unchanged",flowSecretNotSet:"Not set",flowSecretHint:"A value is saved. Leave blank to keep it.",flowSecretShow:"Show",flowSecretHide:"Hide",flowSecretReveal:"Show {field}",flowOn:"On",flowOff:"Off",flowAdd:"Add",flowAddItem:"Add to {field}",flowRemoveItem:"Remove {item}",flowItemLabel:"{field}, item {index}",flowSelectAll:"Select all",flowSelectNone:"Clear",flowSelectedCount:"{count} of {total} selected",flowUnit:"Unit",flowUnitSeconds:"seconds",flowUnitMinutes:"minutes",flowUnitHours:"hours",flowUnitDays:"days",flowSeconds:"[one]{count} second[other]{count} seconds",flowMinutes:"[one]{count} minute[other]{count} minutes",flowHours:"[one]{count} hour[other]{count} hours",flowDays:"[one]{count} day[other]{count} days",flowDurationInvalid:"{field} must be a whole number.",flowItemsMin:"{field} needs at least {min}.",flowItemsMax:"{field} allows at most {max}.",flowItemEmail:"“{item}” is not an email address.",flowItemHost:"“{item}” is not a host name.",flowItemIp:"“{item}” is not an IP address.",flowItemCidr:"“{item}” is not a network range.",flowItemUrl:"“{item}” is not a web address.",flowItemPattern:"“{item}” does not have the expected format.",flowSaved:"Saved",flowAccepted:"In progress",flowProgress:"{done} of {total}",flowConflict:"These settings changed while you were editing them.",flowReload:"Reload current settings",flowNotSubmitted:"The answers were not submitted.",flowNoHost:"No host received the answers.",flowStartAgain:"Start another",flowCopy:"Copy",flowCopied:"Copied",flowSavedIt:"I have saved it",flowShownOnce:"Shown only once. Copy it now."};function flowLabels(...sources){const labels={...FORM_LABELS,...FLOW_LABELS};for(const source of sources){if(source==null)continue;if(!flowIs(source))flowFail("labels must be an object of strings");for(const[name,text]of Object.entries(source)){if(!Object.hasOwn(labels,name))continue;if(typeof text!=="string"||!/\S/.test(text)) flowFail("label '" + name + "' must be a string with visible text");
|
|
2
2
|
labels[name]=text}}
|
|
3
3
|
return Object.freeze(labels)}
|
|
4
4
|
const FLOW_NAME=/^[A-Za-z][A-Za-z0-9_-]{0,63}$/;
|
|
@@ -1,61 +1,61 @@
|
|
|
1
|
-
.cx-format-editor{width:calc(100% - var(--cx-size-32px));max-width:var(--cx-size-720px,720px);max-height:var(--cx-size-85vh);padding:0;border:var(--cx-size-1px) solid var(--
|
|
1
|
+
.cx-format-editor{width:calc(100% - var(--cx-size-32px));max-width:var(--cx-size-720px,720px);max-height:var(--cx-size-85vh);padding:0;border:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));box-shadow:var(--hfx-elevation-2,0 1px 2px rgba(22,24,28,.05),0 6px 18px -10px rgba(22,24,28,.18));flex-direction:column;overflow:hidden;}
|
|
2
2
|
.cx-format-editor[open]{display:flex;}
|
|
3
3
|
body .cx-host.cx-grid-overlay.cx-format-editor{height:fit-content;}
|
|
4
|
-
.cx-format-editor::backdrop{background:
|
|
5
|
-
.cx-format-editor .cx-drawer-h{display:flex;align-items:center;gap:var(--cx-size-12px);padding:var(--cx-size-12px) var(--cx-size-16px);border-bottom:var(--cx-size-1px) solid var(--
|
|
4
|
+
.cx-format-editor::backdrop{background:var(--hfx-color-overlay,light-dark(rgba(22,24,28,0.42),rgba(0,0,0,0.66)));}
|
|
5
|
+
.cx-format-editor .cx-drawer-h{display:flex;align-items:center;gap:var(--cx-size-12px);padding:var(--cx-size-12px) var(--cx-size-16px);border-bottom:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
|
|
6
6
|
.cx-format-editor .cx-drawer-h h4{margin:0;flex:1;font-size:var(--cx-size-17px);}
|
|
7
7
|
.cx-format-body{flex:0 1 auto;min-height:0;overflow:auto;padding:var(--cx-size-14px) var(--cx-size-16px);}
|
|
8
8
|
.cx-format-editor > .cx-grid-control-error{margin:0;padding:0 var(--cx-size-16px) var(--cx-size-8px);}
|
|
9
9
|
.cx-format-editor > .cx-pop-f{gap:var(--cx-size-12px);flex-wrap:wrap;}
|
|
10
10
|
.cx-format-editor .cx-pop-f > .cx-format-legend-switch{margin-right:auto;font-size:var(--cx-size-13px);}
|
|
11
|
-
.cx-format-editor .cx-pop-f > .cx-link{border:0;background:transparent;color:var(--
|
|
12
|
-
.cx-format-editor .cx-muted{color:var(--
|
|
11
|
+
.cx-format-editor .cx-pop-f > .cx-link{border:0;background:transparent;color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));font-weight:600;}
|
|
12
|
+
.cx-format-editor .cx-muted{color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
|
|
13
13
|
.cx-format-rules{list-style:none;margin:0;padding:0;display:grid;gap:var(--cx-size-2px);}
|
|
14
|
-
.cx-format-item{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:var(--cx-size-10px);padding:var(--cx-size-6px) var(--cx-size-4px);border-bottom:var(--cx-size-1px) solid var(--
|
|
15
|
-
.cx-format-item input[type="checkbox"]{width:var(--cx-size-16px);height:var(--cx-size-16px);margin:0;accent-color:var(--
|
|
14
|
+
.cx-format-item{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:var(--cx-size-10px);padding:var(--cx-size-6px) var(--cx-size-4px);border-bottom:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
|
|
15
|
+
.cx-format-item input[type="checkbox"]{width:var(--cx-size-16px);height:var(--cx-size-16px);margin:0;accent-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));}
|
|
16
16
|
.cx-format-item-text{display:grid;min-width:0;}
|
|
17
17
|
.cx-format-item-text > *{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
18
18
|
.cx-format-item-text .cx-muted{font-size:var(--cx-size-12d5px);}
|
|
19
19
|
.cx-format-actions{display:flex;gap:var(--cx-size-4px);}
|
|
20
|
-
.cx-format-editor .cx-button.icon{width:var(--
|
|
20
|
+
.cx-format-editor .cx-button.icon{width:var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));min-width:var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));padding:0;display:inline-grid;place-items:center;}
|
|
21
21
|
.cx-format-editor .cx-button:disabled{opacity:.45;cursor:default;}
|
|
22
|
-
.cx-format-editor .cx-format-swatch{position:relative;isolation:isolate;display:inline-grid;place-items:center;min-width:var(--cx-size-24px);height:var(--cx-size-20px);border-radius:var(--
|
|
23
|
-
.cx-format-editor .cx-format-swatch.cx-fmt-fill{background:color-mix(in srgb,var(--cx-fmt) 13%,var(--
|
|
22
|
+
.cx-format-editor .cx-format-swatch{position:relative;isolation:isolate;display:inline-grid;place-items:center;min-width:var(--cx-size-24px);height:var(--cx-size-20px);border-radius:var(--hfx-radius-sm,4px);border:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));font-size:var(--cx-size-12px);color:var(--cx-fmt,var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc)));}
|
|
23
|
+
.cx-format-editor .cx-format-swatch.cx-fmt-fill{background:color-mix(in srgb,var(--cx-fmt) 13%,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));border-color:color-mix(in srgb,var(--cx-fmt) 35%,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));}
|
|
24
24
|
.cx-format-editor .cx-format-swatch.cx-fmt-gradient{width:var(--cx-size-36px);background:var(--cx-fmt-scale);opacity:.6;}
|
|
25
25
|
.cx-format-editor .cx-format-swatch.cx-fmt-barred{width:var(--cx-size-36px);padding:0 var(--cx-size-3px);}
|
|
26
26
|
.cx-format-editor .cx-format-swatch .cx-fmt-bar{width:100%;max-width:none;}
|
|
27
27
|
.cx-format-form.cx-fb{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cx-size-12px) var(--cx-size-16px);max-width:none;}
|
|
28
|
-
.cx-format-editor .cx-format-field{display:grid;align-items:start;gap:var(--cx-size-4px);min-width:0;font-size:var(--cx-size-13px);color:var(--
|
|
29
|
-
.cx-format-field > .cx-input{color:var(--
|
|
28
|
+
.cx-format-editor .cx-format-field{display:grid;align-items:start;gap:var(--cx-size-4px);min-width:0;font-size:var(--cx-size-13px);color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));}
|
|
29
|
+
.cx-format-field > .cx-input{color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));font-size:var(--cx-size-14px);}
|
|
30
30
|
.cx-format-form > :is(.cx-format-kinds,.cx-format-columns,.cx-format-when,.cx-format-conditions,.cx-format-style){grid-column:1/-1;}
|
|
31
31
|
.cx-format-kind{justify-self:start;max-width:100%;flex-wrap:wrap;}
|
|
32
32
|
.cx-format-editor .cx-fb .cx-format-kind button{text-transform:none;}
|
|
33
33
|
.cx-format-editor h4:focus{outline:none;}
|
|
34
|
-
.cx-format-columns{display:flex;flex-wrap:wrap;gap:var(--cx-size-6px) var(--cx-size-16px);margin:0;padding:var(--cx-size-8px) var(--cx-size-10px);border:var(--cx-size-1px) solid var(--
|
|
35
|
-
.cx-format-columns legend{padding:0 var(--cx-size-4px);color:var(--
|
|
34
|
+
.cx-format-columns{display:flex;flex-wrap:wrap;gap:var(--cx-size-6px) var(--cx-size-16px);margin:0;padding:var(--cx-size-8px) var(--cx-size-10px);border:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));font-size:var(--cx-size-13px);}
|
|
35
|
+
.cx-format-columns legend{padding:0 var(--cx-size-4px);color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));}
|
|
36
36
|
.cx-format-editor .cx-format-when{display:flex;align-items:center;gap:var(--cx-size-8px);font-weight:600;}
|
|
37
|
-
.cx-format-conditions{display:grid;gap:var(--cx-size-8px);padding:var(--cx-size-10px);border:var(--cx-size-1px) solid var(--
|
|
37
|
+
.cx-format-conditions{display:grid;gap:var(--cx-size-8px);padding:var(--cx-size-10px);border:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));}
|
|
38
38
|
.cx-format-style{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--cx-size-140px),1fr));gap:var(--cx-size-10px) var(--cx-size-12px);align-items:end;}
|
|
39
39
|
.cx-format-bands{grid-column:1/-1;display:grid;gap:var(--cx-size-8px);}
|
|
40
|
-
.cx-format-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr) var(--
|
|
41
|
-
.cx-format-above{align-self:center;font-size:var(--cx-size-13px);color:var(--
|
|
42
|
-
.cx-format-style > .cx-link{justify-self:start;border:0;background:transparent;color:var(--
|
|
40
|
+
.cx-format-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr) var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));gap:var(--cx-size-8px);align-items:end;}
|
|
41
|
+
.cx-format-above{align-self:center;font-size:var(--cx-size-13px);color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));}
|
|
42
|
+
.cx-format-style > .cx-link{justify-self:start;border:0;background:transparent;color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));font-weight:600;}
|
|
43
43
|
.cx-format-editor .cx-fb .cx-grid-filter.cx-cond{grid-template-columns:var(--cx-size-56px) minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.2fr) auto var(--cx-size-32px);}
|
|
44
44
|
.cx-format-editor .cx-fb .cx-grid-filter .cx-condition-column{grid-column:2;grid-row:1;}
|
|
45
45
|
.cx-format-editor .cx-fb .cx-grid-filter .cx-condition-operator{grid-column:3;grid-row:1;}
|
|
46
46
|
.cx-format-editor .cx-fb .cx-grid-filter .cx-condition-value{grid-column:4;grid-row:1;}
|
|
47
47
|
.cx-format-editor .cx-fb .cx-grid-filter .cx-condition-upper{grid-column:4;grid-row:2;}
|
|
48
48
|
.cx-format-editor .cx-fb .cx-grid-filter .cx-condition-type{grid-column:2;grid-row:2;}
|
|
49
|
-
.cx-format-editor .cx-fb .cx-grid-filter > .cx-format-case{grid-column:5;grid-row:1;width:var(--
|
|
50
|
-
.cx-format-editor .cx-fb .cx-grid-filter > .cx-format-case[aria-pressed="true"]{border-color:var(--
|
|
49
|
+
.cx-format-editor .cx-fb .cx-grid-filter > .cx-format-case{grid-column:5;grid-row:1;width:var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));padding:0;font-weight:700;}
|
|
50
|
+
.cx-format-editor .cx-fb .cx-grid-filter > .cx-format-case[aria-pressed="true"]{border-color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));background:var(--hfx-color-accent-subtle,light-dark(#e7f1f1,#1b3435));color:var(--hfx-color-accent-text,light-dark(#02726a,#37c9b8));}
|
|
51
51
|
.cx-format-editor .cx-fb .cx-grid-filter > button.icon{grid-column:6;grid-row:1;}
|
|
52
|
-
.cx-format-editor .cx-fb .cx-adds .cx-link{border:0;background:transparent;color:var(--
|
|
53
|
-
.cx-format-editor .cx-fb .cx-cond .w{line-height:var(--
|
|
52
|
+
.cx-format-editor .cx-fb .cx-adds .cx-link{border:0;background:transparent;color:var(--hfx-color-accent,light-dark(#11776f,#37c9b8));font-weight:600;padding:0;}
|
|
53
|
+
.cx-format-editor .cx-fb .cx-cond .w{line-height:var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));}
|
|
54
54
|
body .cx-host.cx-format-editor.cx-phone{inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;border-radius:0;}
|
|
55
55
|
.cx-format-editor.cx-phone .cx-format-form.cx-fb{grid-template-columns:minmax(0,1fr);}
|
|
56
56
|
.cx-format-editor.cx-phone .cx-format-kind{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-self:stretch;}
|
|
57
57
|
.cx-format-editor.cx-phone .cx-fb .cx-format-kind button:nth-child(3){border-left:0;}
|
|
58
|
-
.cx-format-editor.cx-phone .cx-fb .cx-format-kind button:nth-child(n+3){border-top:var(--cx-size-1px) solid var(--
|
|
58
|
+
.cx-format-editor.cx-phone .cx-fb .cx-format-kind button:nth-child(n+3){border-top:var(--cx-size-1px) solid var(--hfx-color-border-strong,light-dark(#cdd0d5,#363a42));}
|
|
59
59
|
.cx-format-editor.cx-phone :is(.cx-input,.cx-button,select,input:not([type="checkbox"])){min-height:var(--cx-size-44px);}
|
|
60
60
|
.cx-format-editor.cx-phone .cx-button.icon{width:var(--cx-size-44px);min-width:var(--cx-size-44px);}
|
|
61
61
|
.cx-format-editor.cx-phone .cx-format-item{grid-template-columns:auto auto minmax(0,1fr);row-gap:var(--cx-size-6px);}
|
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
(function(global){"use strict";const installed=new WeakSet();const part={version:"
|
|
2
|
-
function formatIconButton(label,icon,run){const button=gridDecorateButton(gridButton("",run),icon==="edit"?"more":icon,true);if(icon==="edit")button.querySelector("svg").replaceWith(svgIcon('<path d="M4 20h4L19 9l-4-4L4 16zM13.5 6.5l4 4"/>'));button.classList.add("icon");button.setAttribute("aria-label",label);button.title=label;return button}
|
|
1
|
+
(function(global){"use strict";const installed=new WeakSet();const part={version:"b8c229ddfc1f218b",requires:["filter-editor","formatting"],install(context){if(installed.has(context.DataGrid.prototype))return;const{DataGrid,h,setText,fill,gridButton,gridOption,gridDateInputMoment,gridInputLabel,gridIcon,gridDecorateButton,announceMenu,formatCompile,formatToneVar,formatError,FORMAT_ICONS,FORMAT_TONE_ICONS,FORMAT_OPERATORS,svgIcon,overlayTheme}=context;const FORMAT_EDITOR_LABELS={formatRule:"Rule {number}",formatAddRule:"Add rule",formatEditRule:"Edit {rule}",formatDeleteRule:"Delete {rule}",formatMoveUp:"Move {rule} up",formatMoveDown:"Move {rule} down",formatEnableRule:"Apply {rule}",formatNoRules:"No formatting rules.",formatName:"Name",formatDescription:"Screen reader description",formatOnlyRowsWhere:"Only rows where",formatEveryRow:"Every row",formatNone:"None",formatApplyTo:"Apply to",formatTargetCell:"Cell",formatTargetRow:"Whole row",formatTargetColumns:"Chosen columns",formatStyle:"Style",formatHighlight:"Highlight",formatDataBar:"Data bar",formatColorScale:"Colour scale",formatBands:"Threshold bands",formatTone:"Tone",formatEmphasis:"Emphasis",formatFill:"Fill",formatTextOnly:"Text colour",formatStrong:"Bold fill",formatIcon:"Icon",formatNoIcon:"No icon",formatAutomatic:"Automatic",formatBadge:"Badge",formatCue:"Text cue",formatLowest:"Lowest",formatMidpoint:"Midpoint",formatHighest:"Highest",formatAddBand:"+ Band",formatRemoveBand:"Remove band",formatSave:"Save rule",formatCancel:"Cancel",formatShowLegend:"Show legend",formatInvalid:"Complete the rule before saving.",formatMatchCase:"Match case",formatToneDanger:"Danger",formatToneWarning:"Warning",formatToneSuccess:"Success",formatToneInfo:"Info",formatToneNeutral:"Neutral",formatToneMuted:"Muted",formatNotContains:"does not contain",formatEndsWith:"ends with",formatNotIn:"is none of",formatBetween:"between",formatLike:"matches wildcard",formatMatches:"matches pattern",formatOlderThan:"older than (days)",formatWithinLast:"within the last (days)",formatNotLike:"does not match wildcard",formatNotMatches:"does not match pattern",formatBetweenExclusive:"between (exclusive)"};function formatIconButton(label,icon,run){const button=gridDecorateButton(gridButton("",run),icon==="edit"?"more":icon,true);if(icon==="edit")button.querySelector("svg").replaceWith(svgIcon('<path d="M4 20h4L19 9l-4-4L4 16zM13.5 6.5l4 4"/>'));button.classList.add("icon");button.setAttribute("aria-label",label);button.title=label;return button}
|
|
3
2
|
function formatPreview(style){const swatch=h("span","cx-format-swatch"),stops=style.scale?style.scale.stops.map(stop=>stop.tone):style.bands?style.bands.map(band=>band.tone):null;swatch.setAttribute("aria-hidden","true");if(stops){swatch.classList.add("cx-fmt-gradient");swatch.style.setProperty("--cx-fmt-scale","linear-gradient(90deg,"+stops.map(formatToneVar).join(",")+ ")")}
|
|
4
3
|
else if(style.bar){swatch.classList.add("cx-fmt-barred");const bar=h("span","cx-fmt-bar");bar.style.setProperty("--cx-fmt-w","70%");bar.style.setProperty("--cx-fmt",formatToneVar(style.bar.tone||"info"));swatch.appendChild(bar)}
|
|
5
4
|
else if(style.tone){swatch.classList.add("cx-fmt-fill");swatch.style.setProperty("--cx-fmt",formatToneVar(style.tone));const name=!style.icon||style.icon==="auto"?FORMAT_TONE_ICONS[style.tone]||"dot":style.icon;if(name!=="none")setText(swatch,FORMAT_ICONS[name]||name)}else if(style.badge)setText(swatch,style.badge.slice(0,2));return swatch}
|
|
6
5
|
Object.assign(DataGrid.prototype,{showFormatEditor(){this.formatEditor?.close();if(!this.formatLabels.formatAddRule){const own={};for(const name of Object.keys(FORMAT_EDITOR_LABELS))own[name]=Object.hasOwn(this.labels,name)?this.labels[name]:FORMAT_EDITOR_LABELS[name];this.formatLabels={...this.formatLabels,...own}}
|
|
7
|
-
const labels=this.formatLabels,returnFocus=document.activeElement,phone=this.host.clientWidth<=640;const dialog=h("dialog","cx-host cx-grid-overlay cx-format-editor"),head=h("div","cx-drawer-h"),title=h("h4"),body=h("div","cx-format-body"),status=h("p","cx-grid-control-error"),foot=h("div","cx-pop-f");
|
|
6
|
+
const labels=this.formatLabels,returnFocus=document.activeElement,phone=this.host.clientWidth<=640;const dialog=h("dialog","cx-host cx-grid-overlay cx-format-editor"),head=h("div","cx-drawer-h"),title=h("h4"),body=h("div","cx-format-body"),status=h("p","cx-grid-control-error"),foot=h("div","cx-pop-f");overlayTheme(this.host,dialog);dialog.classList.toggle("cx-phone",phone);title.id=this.id+"-format-title";title.tabIndex=-1;setText(title,labels.formatRules);dialog.setAttribute("aria-labelledby",title.id);status.setAttribute("role","status");head.append(title,formatIconButton(labels.formatCancel,"close",()=>dialog.close()));dialog.append(head,body,status,foot);document.body.appendChild(dialog);this.formatEditor=dialog;const editor={dialog,body,foot,status,title,rules:JSON.parse(JSON.stringify(this.getFormatRules()))};editor.apply=()=>this.setFormatRules(editor.rules).then(()=>{setText(status,"");return true},error=>{setText(status,error.message);return false});editor.list=focus=>this.renderFormatList(editor,focus);dialog.addEventListener("keydown",event=>{if(event.key==="Escape"){event.preventDefault();event.stopPropagation();if(editor.back)editor.back();else dialog.close()}});dialog.addEventListener("close",()=>{dialog.remove();if(this.formatEditor===dialog)this.formatEditor=null;if(!this.destroyed)(returnFocus?.isConnected&&returnFocus.checkVisibility?.()?returnFocus:this.grid).focus({preventScroll:true})},{once:true});const owner=new AbortController();this.lifetime.signal.addEventListener("abort",()=>dialog.close(),{once:true,signal:owner.signal});dialog.addEventListener("close",()=>owner.abort(),{once:true});announceMenu(dialog);dialog.showModal();editor.list();title.focus({preventScroll:true});return dialog},renderFormatList(editor,focus){const labels=this.formatLabels,{body,foot,rules}=editor,name=(rule,index)=>rule.label||fill(labels.formatRule,{number:index+1});editor.back=null;setText(editor.title,labels.formatRules);body.replaceChildren();foot.replaceChildren();const list=h("ol","cx-format-rules");list.setAttribute("aria-label",labels.formatRules);const change=(mutate,next)=>{mutate();editor.apply().then(ok=>{if(!ok)editor.rules=JSON.parse(JSON.stringify(this.getFormatRules()));editor.list(next)})};rules.forEach((rule,index)=>{const item=h("li","cx-format-item"),toggle=h("input"),text=h("span","cx-format-item-text"),title=h("b"),summary=h("span","cx-muted"),actions=h("span","cx-format-actions");const label=name(rule,index);toggle.type="checkbox";toggle.checked=rule.enabled!==false;toggle.setAttribute("aria-label",fill(labels.formatEnableRule,{rule:label}));toggle.addEventListener("change",()=>change(()=>{if(toggle.checked)delete rule.enabled;else rule.enabled=false},"toggle:"+index));setText(title,label);setText(summary,this.formatSummary(rule));text.append(title,summary);const move=(by,key)=>()=>change(()=>rules.splice(index+by,0,rules.splice(index,1)[0]),key+":" +(index+by));const up=formatIconButton(fill(labels.formatMoveUp,{rule:label}),"up",move(-1,"up")),down=formatIconButton(fill(labels.formatMoveDown,{rule:label}),"down",move(1,"down"));up.disabled=index===0;down.disabled=index===rules.length-1;const edit=formatIconButton(fill(labels.formatEditRule,{rule:label}),"edit",()=>this.renderFormatRule(editor,index));edit.dataset.cxFocus="edit:"+index;const remove=formatIconButton(fill(labels.formatDeleteRule,{rule:label}),"close",()=>change(()=>rules.splice(index,1),"add"));toggle.dataset.cxFocus="toggle:"+index;up.dataset.cxFocus="up:"+index;down.dataset.cxFocus="down:"+index;actions.append(up,down,edit,remove);item.append(toggle,formatPreview(rule.style||{}),text,actions);list.appendChild(item)});if(rules.length)body.appendChild(list);else{const empty=h("p","cx-muted");setText(empty,labels.formatNoRules);body.appendChild(empty)}
|
|
8
7
|
const add=gridButton(labels.formatAddRule,()=>this.renderFormatRule(editor,-1));add.classList.add("cx-link");add.dataset.cxFocus="add";add.disabled=rules.length>=64;const legend=h("input"),legendLabel=gridInputLabel(labels.formatShowLegend,legend);legend.type="checkbox";legend.checked=!!this.formatLegendShown;legendLabel.classList.add("cx-format-legend-switch");legend.addEventListener("change",()=>this.setFormatLegend(legend.checked));const done=gridButton(this.labels.gridDone,()=>editor.dialog.close());foot.append(add,legendLabel,done);const target=focus&&editor.dialog.querySelector('[data-cx-focus="'+focus+'"]');if(target&&!target.disabled)target.focus({preventScroll:true});else if(focus)add.focus({preventScroll:true})},formatSummary(rule){const labels=this.formatLabels,title=id=>this.columns.find(column=>column.id===id)?.title||id,style=rule.style||{};const target=rule.target==="row"?labels.formatTargetRow:rule.target==="columns"?(rule.columns||[]).map(title).join(", "):labels.formatTargetCell+" · "+title(rule.column);const kind=style.bar?labels.formatDataBar:style.scale?labels.formatColorScale:style.bands?labels.formatBands:labels.formatHighlight;return[target,kind,rule.when?null:labels.formatEveryRow].filter(Boolean).join(" · ")}});const FORMAT_TONES=["danger","warning","success","info","neutral","muted"];function formatField(text,control,className){const label=control.tagName==="DIV"?h("div"):gridInputLabel(text,control);if(control.tagName==="DIV"){const heading=h("span");setText(heading,text);heading.setAttribute("aria-hidden","true");label.append(heading,control)}
|
|
9
8
|
label.classList.add("cx-format-field");if(className)label.classList.add(className);if(control.tagName==="SELECT"||control.tagName==="INPUT"&&control.type!=="checkbox")control.classList.add("cx-input");return label}
|
|
10
9
|
function formatSelect(options,value){const select=h("select");for(const[key,text]of options)select.appendChild(gridOption(key,text));if(value!==undefined&&options.some(option=>option[0]===value))select.value=value;return select}
|
|
@@ -1,30 +1,30 @@
|
|
|
1
|
-
.cx-data-grid .cx-row .cx-cell.cx-fmt-fill,.cx-data-grid .cx-row .cx-cell.cx-fmt-strong{background-color:color-mix(in srgb,var(--cx-fmt) 13%,var(--
|
|
1
|
+
.cx-data-grid .cx-row .cx-cell.cx-fmt-fill,.cx-data-grid .cx-row .cx-cell.cx-fmt-strong{background-color:color-mix(in srgb,var(--cx-fmt) 13%,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));color:color-mix(in srgb,var(--cx-fmt) 82%,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));}
|
|
2
2
|
.cx-data-grid .cx-row .cx-cell.cx-fmt-strong{font-weight:600;}
|
|
3
|
-
.cx-data-grid .cx-row .cx-cell.cx-fmt-text{color:color-mix(in srgb,var(--cx-fmt) 82%,var(--
|
|
4
|
-
.cx-data-grid .cx-row .cx-cell.cx-fmt-scale{background-color:color-mix(in srgb,var(--cx-fmt-scale) 18%,var(--
|
|
5
|
-
.cx-data-grid .cx-row.cx-fmt-row,.cx-data-grid .cx-row.cx-fmt-row [data-cx-pin]{background:color-mix(in srgb,var(--cx-fmt) 8%,var(--
|
|
6
|
-
.cx-data-grid .cx-row.cx-fmt-row:hover,.cx-data-grid .cx-row.cx-fmt-row:hover [data-cx-pin]{background:color-mix(in srgb,var(--cx-fmt) 12%,var(--
|
|
7
|
-
.cx-data-grid .cx-row.cx-fmt-row[aria-selected="true"],.cx-data-grid .cx-row.cx-fmt-row[aria-selected="true"] [data-cx-pin]{background:var(--
|
|
3
|
+
.cx-data-grid .cx-row .cx-cell.cx-fmt-text{color:color-mix(in srgb,var(--cx-fmt) 82%,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));}
|
|
4
|
+
.cx-data-grid .cx-row .cx-cell.cx-fmt-scale{background-color:color-mix(in srgb,var(--cx-fmt-scale) 18%,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));}
|
|
5
|
+
.cx-data-grid .cx-row.cx-fmt-row,.cx-data-grid .cx-row.cx-fmt-row [data-cx-pin]{background:color-mix(in srgb,var(--cx-fmt) 8%,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));}
|
|
6
|
+
.cx-data-grid .cx-row.cx-fmt-row:hover,.cx-data-grid .cx-row.cx-fmt-row:hover [data-cx-pin]{background:color-mix(in srgb,var(--cx-fmt) 12%,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));}
|
|
7
|
+
.cx-data-grid .cx-row.cx-fmt-row[aria-selected="true"],.cx-data-grid .cx-row.cx-fmt-row[aria-selected="true"] [data-cx-pin]{background:var(--hfx-color-accent-subtle,light-dark(#e7f1f1,#1b3435));}
|
|
8
8
|
.cx-data-grid .cx-row.cx-fmt-row > .cx-cell:first-child{box-shadow:inset var(--cx-size-3px) 0 0 var(--cx-fmt);}
|
|
9
|
-
.cx-fmt-bar{flex:1 1 var(--cx-size-24px);min-width:var(--cx-size-24px);max-width:var(--cx-size-180px);height:var(--cx-size-8px);border-radius:var(--
|
|
10
|
-
.cx-fmt-bar::before{content:"";display:block;width:var(--cx-fmt-w);height:100%;border-radius:inherit;background:color-mix(in srgb,var(--cx-fmt) 78%,var(--
|
|
9
|
+
.cx-fmt-bar{flex:1 1 var(--cx-size-24px);min-width:var(--cx-size-24px);max-width:var(--cx-size-180px);height:var(--cx-size-8px);border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));overflow:hidden;background:color-mix(in srgb,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)) 9%,transparent);pointer-events:none;}
|
|
10
|
+
.cx-fmt-bar::before{content:"";display:block;width:var(--cx-fmt-w);height:100%;border-radius:inherit;background:color-mix(in srgb,var(--cx-fmt) 78%,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));}
|
|
11
11
|
.cx-fmt-novalue > .cx-text{position:absolute;width:var(--cx-size-1px);height:var(--cx-size-1px);overflow:hidden;clip:rect(0 0 0 0);}
|
|
12
12
|
.cx-fmt-icon{flex:none;color:var(--cx-fmt,currentColor);font-weight:700;line-height:1;}
|
|
13
13
|
.cx-fmt-badge{flex:none;}
|
|
14
|
-
.cx-fmt-cue{flex:none;color:var(--
|
|
14
|
+
.cx-fmt-cue{flex:none;color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));font-size:var(--cx-size-12d5px);}
|
|
15
15
|
.cx-data-grid .cx-hidden-fields.cx-fmt-flag{color:var(--cx-fmt);font-weight:700;text-decoration:underline var(--cx-size-2px) var(--cx-fmt);text-underline-offset:var(--cx-size-3px);}
|
|
16
|
-
.cx-drawer dd:is(.cx-fmt-fill,.cx-fmt-strong,.cx-fmt-scale){display:flex;flex-wrap:wrap;align-items:center;gap:var(--cx-size-6px);margin:var(--cx-size-neg-2px) 0;padding:var(--cx-size-2px) var(--cx-size-6px);border-radius:var(--
|
|
17
|
-
.cx-drawer dd.cx-fmt-fill,.cx-drawer dd.cx-fmt-strong{background:color-mix(in srgb,var(--cx-fmt) 13%,var(--
|
|
16
|
+
.cx-drawer dd:is(.cx-fmt-fill,.cx-fmt-strong,.cx-fmt-scale){display:flex;flex-wrap:wrap;align-items:center;gap:var(--cx-size-6px);margin:var(--cx-size-neg-2px) 0;padding:var(--cx-size-2px) var(--cx-size-6px);border-radius:var(--hfx-radius-sm,4px);}
|
|
17
|
+
.cx-drawer dd.cx-fmt-fill,.cx-drawer dd.cx-fmt-strong{background:color-mix(in srgb,var(--cx-fmt) 13%,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));color:color-mix(in srgb,var(--cx-fmt) 82%,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));}
|
|
18
18
|
.cx-drawer dd.cx-fmt-strong{font-weight:600;}
|
|
19
|
-
.cx-drawer dd.cx-fmt-text{color:color-mix(in srgb,var(--cx-fmt) 82%,var(--
|
|
20
|
-
.cx-drawer dd.cx-fmt-scale{background:color-mix(in srgb,var(--cx-fmt-scale) 18%,var(--
|
|
19
|
+
.cx-drawer dd.cx-fmt-text{color:color-mix(in srgb,var(--cx-fmt) 82%,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));}
|
|
20
|
+
.cx-drawer dd.cx-fmt-scale{background:color-mix(in srgb,var(--cx-fmt-scale) 18%,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));}
|
|
21
21
|
.cx-drawer dd:has(> .cx-fmt-icon,> .cx-fmt-cue,> .cx-fmt-badge,> .cx-fmt-bar){display:flex;flex-wrap:wrap;align-items:center;gap:var(--cx-size-6px);}
|
|
22
|
-
.cx-drawer .cx-drawer-h.cx-fmt-accent{box-shadow:inset var(--cx-size-3px) 0 0 var(--cx-fmt);background:color-mix(in srgb,var(--cx-fmt) 8%,var(--
|
|
22
|
+
.cx-drawer .cx-drawer-h.cx-fmt-accent{box-shadow:inset var(--cx-size-3px) 0 0 var(--cx-fmt);background:color-mix(in srgb,var(--cx-fmt) 8%,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));}
|
|
23
23
|
.cx-drawer .cx-drawer-h > .cx-fmt-icon{margin-top:var(--cx-size-4px);font-size:var(--cx-size-17px);}
|
|
24
|
-
.cx-format-legend{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:var(--cx-size-6px) var(--cx-size-16px);margin:0 0 var(--cx-size-8px);padding:0;list-style:none;font-size:var(--cx-size-12d5px);color:var(--
|
|
24
|
+
.cx-format-legend{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:var(--cx-size-6px) var(--cx-size-16px);margin:0 0 var(--cx-size-8px);padding:0;list-style:none;font-size:var(--cx-size-12d5px);color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));}
|
|
25
25
|
.cx-format-key{display:inline-flex;align-items:center;gap:var(--cx-size-6px);min-width:0;}
|
|
26
|
-
.cx-format-swatch{position:relative;isolation:isolate;display:inline-grid;place-items:center;flex:none;min-width:var(--cx-size-18px);height:var(--cx-size-18px);border-radius:var(--
|
|
27
|
-
.cx-format-swatch.cx-fmt-fill,.cx-format-swatch.cx-fmt-strong,.cx-format-swatch.cx-fmt-text{background:color-mix(in srgb,var(--cx-fmt) 13%,var(--
|
|
26
|
+
.cx-format-swatch{position:relative;isolation:isolate;display:inline-grid;place-items:center;flex:none;min-width:var(--cx-size-18px);height:var(--cx-size-18px);border-radius:var(--hfx-radius-sm,4px);border:var(--cx-size-1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));font-size:var(--cx-size-11px);}
|
|
27
|
+
.cx-format-swatch.cx-fmt-fill,.cx-format-swatch.cx-fmt-strong,.cx-format-swatch.cx-fmt-text{background:color-mix(in srgb,var(--cx-fmt) 13%,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));border-color:color-mix(in srgb,var(--cx-fmt) 35%,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));}
|
|
28
28
|
.cx-format-swatch.cx-fmt-gradient{width:var(--cx-size-36px);background:var(--cx-fmt-scale);opacity:.55;}
|
|
29
29
|
.cx-format-swatch.cx-fmt-barred{width:var(--cx-size-36px);padding:0 var(--cx-size-3px);}
|
|
30
30
|
.cx-format-swatch .cx-fmt-bar{width:100%;max-width:none;}
|