@dereekb/dbx-components-mcp 14.12.0 → 14.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dbx-components-mcp.js +3 -3
- package/generated/dereekb-dbx-web.css-utilities.mcp.generated.json +170 -99
- package/generated/dereekb-dbx-web.tokens.mcp.generated.json +138 -5
- package/generated/dereekb-dbx-web.ui-components.mcp.generated.json +1 -1
- package/generated/dereekb-demo.dbx-docs-ui-examples.mcp.generated.json +52 -0
- package/package.json +3 -3
package/dbx-components-mcp.js
CHANGED
|
@@ -10,7 +10,7 @@ var __export = (target, all) => {
|
|
|
10
10
|
// packages/dbx-components-mcp/package.json
|
|
11
11
|
var package_default = {
|
|
12
12
|
name: "@dereekb/dbx-components-mcp",
|
|
13
|
-
version: "14.
|
|
13
|
+
version: "14.13.0",
|
|
14
14
|
sideEffects: false,
|
|
15
15
|
type: "module",
|
|
16
16
|
bin: {
|
|
@@ -22,8 +22,8 @@ var package_default = {
|
|
|
22
22
|
"ts-morph": "^21.0.0"
|
|
23
23
|
},
|
|
24
24
|
peerDependencies: {
|
|
25
|
-
"@dereekb/dbx-cli": "14.
|
|
26
|
-
"@dereekb/util": "14.
|
|
25
|
+
"@dereekb/dbx-cli": "14.13.0",
|
|
26
|
+
"@dereekb/util": "14.13.0"
|
|
27
27
|
}
|
|
28
28
|
};
|
|
29
29
|
|
|
@@ -1203,7 +1203,7 @@
|
|
|
1203
1203
|
"source": "@dereekb/dbx-web",
|
|
1204
1204
|
"module": "@dereekb/dbx-web",
|
|
1205
1205
|
"file": "src/lib/layout/text/_text.scss",
|
|
1206
|
-
"line":
|
|
1206
|
+
"line": 460,
|
|
1207
1207
|
"declarations": [
|
|
1208
1208
|
{
|
|
1209
1209
|
"property": "font-size",
|
|
@@ -1272,7 +1272,7 @@
|
|
|
1272
1272
|
"source": "@dereekb/dbx-web",
|
|
1273
1273
|
"module": "@dereekb/dbx-web",
|
|
1274
1274
|
"file": "src/lib/layout/text/_text.scss",
|
|
1275
|
-
"line":
|
|
1275
|
+
"line": 530,
|
|
1276
1276
|
"declarations": [
|
|
1277
1277
|
{
|
|
1278
1278
|
"property": "margin",
|
|
@@ -1291,7 +1291,7 @@
|
|
|
1291
1291
|
"source": "@dereekb/dbx-web",
|
|
1292
1292
|
"module": "@dereekb/dbx-web",
|
|
1293
1293
|
"file": "src/lib/layout/text/_text.scss",
|
|
1294
|
-
"line":
|
|
1294
|
+
"line": 491,
|
|
1295
1295
|
"declarations": [
|
|
1296
1296
|
{
|
|
1297
1297
|
"property": "margin-right",
|
|
@@ -1852,7 +1852,7 @@
|
|
|
1852
1852
|
"source": "@dereekb/dbx-web",
|
|
1853
1853
|
"module": "@dereekb/dbx-web",
|
|
1854
1854
|
"file": "src/lib/layout/text/_text.scss",
|
|
1855
|
-
"line":
|
|
1855
|
+
"line": 167,
|
|
1856
1856
|
"declarations": [
|
|
1857
1857
|
{
|
|
1858
1858
|
"property": "display",
|
|
@@ -1876,6 +1876,129 @@
|
|
|
1876
1876
|
"--dbx-padding-1"
|
|
1877
1877
|
]
|
|
1878
1878
|
},
|
|
1879
|
+
{
|
|
1880
|
+
"slug": "detail-block-tile",
|
|
1881
|
+
"selector": ".dbx-detail-block-tile",
|
|
1882
|
+
"source": "@dereekb/dbx-web",
|
|
1883
|
+
"module": "@dereekb/dbx-web",
|
|
1884
|
+
"file": "src/lib/layout/text/_text.scss",
|
|
1885
|
+
"line": 209,
|
|
1886
|
+
"declarations": [
|
|
1887
|
+
{
|
|
1888
|
+
"property": "position",
|
|
1889
|
+
"value": "relative"
|
|
1890
|
+
},
|
|
1891
|
+
{
|
|
1892
|
+
"property": "min-height",
|
|
1893
|
+
"value": "var(--dbx-detail-block-tile-size, #{$dbx-detail-block-tile-size})"
|
|
1894
|
+
},
|
|
1895
|
+
{
|
|
1896
|
+
"property": "padding-left",
|
|
1897
|
+
"value": "calc(var(--dbx-detail-block-tile-size, #{$dbx-detail-block-tile-size}) + var(--dbx-detail-block-tile-gap, var(--dbx-padding-3)))"
|
|
1898
|
+
},
|
|
1899
|
+
{
|
|
1900
|
+
"property": "padding-bottom",
|
|
1901
|
+
"value": "var(--dbx-detail-block-tile-padding-bottom, var(--dbx-padding-4))"
|
|
1902
|
+
},
|
|
1903
|
+
{
|
|
1904
|
+
"property": "font-size",
|
|
1905
|
+
"value": "$dbx-detail-block-tile-font-size"
|
|
1906
|
+
},
|
|
1907
|
+
{
|
|
1908
|
+
"property": "line-height",
|
|
1909
|
+
"value": "$dbx-detail-block-tile-line-height"
|
|
1910
|
+
},
|
|
1911
|
+
{
|
|
1912
|
+
"property": "color",
|
|
1913
|
+
"value": "var(--dbx-detail-block-tile-text-color, var(--mat-sys-on-surface))"
|
|
1914
|
+
}
|
|
1915
|
+
],
|
|
1916
|
+
"role": "layout",
|
|
1917
|
+
"intent": "tile-styled detail block — add to a `<dbx-detail-block>` to draw its icon in a round tile beside the content, show the header as a small uppercase label, and show the `[header]` slot and body content as full-strength text below it. Pair with `.dbx-detail-block-tile-value` / `.dbx-detail-block-tile-hint` for the bold value and muted secondary lines, and with `[dbxColor]` (plus `[dbxColorTone]` for a tonal tile) to color the tile and label. Customize via the `--dbx-detail-block-tile-*` CSS variables.",
|
|
1918
|
+
"seeAlso": [
|
|
1919
|
+
"detail-block-tile-value",
|
|
1920
|
+
"detail-block-tile-hint",
|
|
1921
|
+
"icon-tile"
|
|
1922
|
+
],
|
|
1923
|
+
"parent": "detail-block",
|
|
1924
|
+
"tokensRead": [
|
|
1925
|
+
"--dbx-detail-block-tile-background",
|
|
1926
|
+
"--dbx-detail-block-tile-gap",
|
|
1927
|
+
"--dbx-detail-block-tile-icon-color",
|
|
1928
|
+
"--dbx-detail-block-tile-icon-size",
|
|
1929
|
+
"--dbx-detail-block-tile-label-color",
|
|
1930
|
+
"--dbx-detail-block-tile-padding-bottom",
|
|
1931
|
+
"--dbx-detail-block-tile-shape",
|
|
1932
|
+
"--dbx-detail-block-tile-size",
|
|
1933
|
+
"--dbx-detail-block-tile-text-color",
|
|
1934
|
+
"--dbx-padding-3",
|
|
1935
|
+
"--dbx-padding-4",
|
|
1936
|
+
"--mat-sys-on-surface",
|
|
1937
|
+
"--mat-sys-on-surface-variant",
|
|
1938
|
+
"--mat-sys-outline",
|
|
1939
|
+
"--mat-sys-surface-container-high"
|
|
1940
|
+
]
|
|
1941
|
+
},
|
|
1942
|
+
{
|
|
1943
|
+
"slug": "detail-block-tile-hint",
|
|
1944
|
+
"selector": ".dbx-detail-block-tile-hint",
|
|
1945
|
+
"source": "@dereekb/dbx-web",
|
|
1946
|
+
"module": "@dereekb/dbx-web",
|
|
1947
|
+
"file": "src/lib/layout/text/_text.scss",
|
|
1948
|
+
"line": 304,
|
|
1949
|
+
"declarations": [
|
|
1950
|
+
{
|
|
1951
|
+
"property": "display",
|
|
1952
|
+
"value": "block"
|
|
1953
|
+
},
|
|
1954
|
+
{
|
|
1955
|
+
"property": "font-size",
|
|
1956
|
+
"value": "$dbx-detail-block-tile-hint-font-size"
|
|
1957
|
+
},
|
|
1958
|
+
{
|
|
1959
|
+
"property": "line-height",
|
|
1960
|
+
"value": "$dbx-detail-block-tile-hint-line-height"
|
|
1961
|
+
},
|
|
1962
|
+
{
|
|
1963
|
+
"property": "color",
|
|
1964
|
+
"value": "var(--dbx-detail-block-tile-hint-color, var(--mat-sys-on-surface-variant))"
|
|
1965
|
+
}
|
|
1966
|
+
],
|
|
1967
|
+
"role": "text",
|
|
1968
|
+
"intent": "muted secondary line inside a `.dbx-detail-block-tile` — smaller supporting text under the value (an address, a day count, a timezone)",
|
|
1969
|
+
"seeAlso": [
|
|
1970
|
+
"detail-block-tile-value"
|
|
1971
|
+
],
|
|
1972
|
+
"parent": "detail-block-tile",
|
|
1973
|
+
"tokensRead": [
|
|
1974
|
+
"--dbx-detail-block-tile-hint-color",
|
|
1975
|
+
"--mat-sys-on-surface-variant"
|
|
1976
|
+
]
|
|
1977
|
+
},
|
|
1978
|
+
{
|
|
1979
|
+
"slug": "detail-block-tile-value",
|
|
1980
|
+
"selector": ".dbx-detail-block-tile-value",
|
|
1981
|
+
"source": "@dereekb/dbx-web",
|
|
1982
|
+
"module": "@dereekb/dbx-web",
|
|
1983
|
+
"file": "src/lib/layout/text/_text.scss",
|
|
1984
|
+
"line": 294,
|
|
1985
|
+
"declarations": [
|
|
1986
|
+
{
|
|
1987
|
+
"property": "display",
|
|
1988
|
+
"value": "block"
|
|
1989
|
+
},
|
|
1990
|
+
{
|
|
1991
|
+
"property": "font-weight",
|
|
1992
|
+
"value": "$dbx-detail-block-tile-value-font-weight"
|
|
1993
|
+
}
|
|
1994
|
+
],
|
|
1995
|
+
"role": "text",
|
|
1996
|
+
"intent": "bold value line inside a `.dbx-detail-block-tile` — the headline fact under the label (a date range, a time span, a name)",
|
|
1997
|
+
"seeAlso": [
|
|
1998
|
+
"detail-block-tile-hint"
|
|
1999
|
+
],
|
|
2000
|
+
"parent": "detail-block-tile"
|
|
2001
|
+
},
|
|
1879
2002
|
{
|
|
1880
2003
|
"slug": "dialog-content",
|
|
1881
2004
|
"selector": ".dbx-dialog-content",
|
|
@@ -1908,7 +2031,7 @@
|
|
|
1908
2031
|
"source": "@dereekb/dbx-web",
|
|
1909
2032
|
"module": "@dereekb/dbx-web",
|
|
1910
2033
|
"file": "src/lib/layout/text/_text.scss",
|
|
1911
|
-
"line":
|
|
2034
|
+
"line": 478,
|
|
1912
2035
|
"declarations": [
|
|
1913
2036
|
{
|
|
1914
2037
|
"property": "display",
|
|
@@ -1982,7 +2105,7 @@
|
|
|
1982
2105
|
"source": "@dereekb/dbx-web",
|
|
1983
2106
|
"module": "@dereekb/dbx-web",
|
|
1984
2107
|
"file": "src/lib/layout/text/_text.scss",
|
|
1985
|
-
"line":
|
|
2108
|
+
"line": 581,
|
|
1986
2109
|
"declarations": [
|
|
1987
2110
|
{
|
|
1988
2111
|
"property": "opacity",
|
|
@@ -2297,7 +2420,7 @@
|
|
|
2297
2420
|
"source": "@dereekb/dbx-web",
|
|
2298
2421
|
"module": "@dereekb/dbx-web",
|
|
2299
2422
|
"file": "src/lib/layout/text/_text.scss",
|
|
2300
|
-
"line":
|
|
2423
|
+
"line": 449,
|
|
2301
2424
|
"declarations": [
|
|
2302
2425
|
{
|
|
2303
2426
|
"property": "font-size",
|
|
@@ -2376,7 +2499,7 @@
|
|
|
2376
2499
|
"source": "@dereekb/dbx-web",
|
|
2377
2500
|
"module": "@dereekb/dbx-web",
|
|
2378
2501
|
"file": "src/lib/layout/text/_text.scss",
|
|
2379
|
-
"line":
|
|
2502
|
+
"line": 572,
|
|
2380
2503
|
"declarations": [
|
|
2381
2504
|
{
|
|
2382
2505
|
"property": "opacity",
|
|
@@ -2416,7 +2539,7 @@
|
|
|
2416
2539
|
"source": "@dereekb/dbx-web",
|
|
2417
2540
|
"module": "@dereekb/dbx-web",
|
|
2418
2541
|
"file": "src/lib/layout/text/_text.scss",
|
|
2419
|
-
"line":
|
|
2542
|
+
"line": 441,
|
|
2420
2543
|
"declarations": [
|
|
2421
2544
|
{
|
|
2422
2545
|
"property": "margin-right",
|
|
@@ -2436,64 +2559,12 @@
|
|
|
2436
2559
|
"source": "@dereekb/dbx-web",
|
|
2437
2560
|
"module": "@dereekb/dbx-web",
|
|
2438
2561
|
"file": "src/lib/layout/text/_text.scss",
|
|
2439
|
-
"line":
|
|
2440
|
-
"declarations": [
|
|
2441
|
-
{
|
|
2442
|
-
"property": "display",
|
|
2443
|
-
"value": "flex"
|
|
2444
|
-
},
|
|
2445
|
-
{
|
|
2446
|
-
"property": "align-items",
|
|
2447
|
-
"value": "center"
|
|
2448
|
-
},
|
|
2449
|
-
{
|
|
2450
|
-
"property": "justify-content",
|
|
2451
|
-
"value": "center"
|
|
2452
|
-
},
|
|
2453
|
-
{
|
|
2454
|
-
"property": "border-radius",
|
|
2455
|
-
"value": "var(--dbx-icon-tile-border-radius, var(--mat-sys-corner-medium, 12px))"
|
|
2456
|
-
},
|
|
2457
|
-
{
|
|
2458
|
-
"property": "padding",
|
|
2459
|
-
"value": "var(--dbx-icon-tile-padding, 8px)"
|
|
2460
|
-
},
|
|
2461
|
-
{
|
|
2462
|
-
"property": "width",
|
|
2463
|
-
"value": "var(--dbx-icon-tile-width)"
|
|
2464
|
-
},
|
|
2465
|
-
{
|
|
2466
|
-
"property": "height",
|
|
2467
|
-
"value": "var(--dbx-icon-tile-height)"
|
|
2468
|
-
},
|
|
2469
|
-
{
|
|
2470
|
-
"property": "min-width",
|
|
2471
|
-
"value": "var(--dbx-icon-tile-min-width)"
|
|
2472
|
-
},
|
|
2473
|
-
{
|
|
2474
|
-
"property": "font-size",
|
|
2475
|
-
"value": "var(--dbx-icon-tile-font-size)"
|
|
2476
|
-
},
|
|
2477
|
-
{
|
|
2478
|
-
"property": "font-weight",
|
|
2479
|
-
"value": "var(--dbx-icon-tile-font-weight)"
|
|
2480
|
-
}
|
|
2481
|
-
],
|
|
2562
|
+
"line": 347,
|
|
2563
|
+
"declarations": [],
|
|
2482
2564
|
"role": "layout",
|
|
2483
2565
|
"intent": "rounded, padded icon container — the visible body of `<dbx-icon-tile>` / `[dbxIconTile]`. Customize via the `--dbx-icon-tile-*` CSS variables.",
|
|
2484
2566
|
"component": "DbxIconTileComponent",
|
|
2485
|
-
"scope": "component-class"
|
|
2486
|
-
"tokensRead": [
|
|
2487
|
-
"--dbx-icon-tile-border-radius",
|
|
2488
|
-
"--dbx-icon-tile-font-size",
|
|
2489
|
-
"--dbx-icon-tile-font-weight",
|
|
2490
|
-
"--dbx-icon-tile-height",
|
|
2491
|
-
"--dbx-icon-tile-icon-size",
|
|
2492
|
-
"--dbx-icon-tile-min-width",
|
|
2493
|
-
"--dbx-icon-tile-padding",
|
|
2494
|
-
"--dbx-icon-tile-width",
|
|
2495
|
-
"--mat-sys-corner-medium"
|
|
2496
|
-
]
|
|
2567
|
+
"scope": "component-class"
|
|
2497
2568
|
},
|
|
2498
2569
|
{
|
|
2499
2570
|
"slug": "icon-tile-round",
|
|
@@ -2501,7 +2572,7 @@
|
|
|
2501
2572
|
"source": "@dereekb/dbx-web",
|
|
2502
2573
|
"module": "@dereekb/dbx-web",
|
|
2503
2574
|
"file": "src/lib/layout/text/_text.scss",
|
|
2504
|
-
"line":
|
|
2575
|
+
"line": 373,
|
|
2505
2576
|
"declarations": [
|
|
2506
2577
|
{
|
|
2507
2578
|
"property": "border-radius",
|
|
@@ -2541,7 +2612,7 @@
|
|
|
2541
2612
|
"source": "@dereekb/dbx-web",
|
|
2542
2613
|
"module": "@dereekb/dbx-web",
|
|
2543
2614
|
"file": "src/lib/layout/text/_text.scss",
|
|
2544
|
-
"line":
|
|
2615
|
+
"line": 109,
|
|
2545
2616
|
"declarations": [
|
|
2546
2617
|
{
|
|
2547
2618
|
"property": "height",
|
|
@@ -2584,7 +2655,7 @@
|
|
|
2584
2655
|
"source": "@dereekb/dbx-web",
|
|
2585
2656
|
"module": "@dereekb/dbx-web",
|
|
2586
2657
|
"file": "src/lib/layout/text/_text.scss",
|
|
2587
|
-
"line":
|
|
2658
|
+
"line": 589,
|
|
2588
2659
|
"declarations": [
|
|
2589
2660
|
{
|
|
2590
2661
|
"property": "opacity",
|
|
@@ -2605,7 +2676,7 @@
|
|
|
2605
2676
|
"source": "@dereekb/dbx-web",
|
|
2606
2677
|
"module": "@dereekb/dbx-web",
|
|
2607
2678
|
"file": "src/lib/layout/text/_text.scss",
|
|
2608
|
-
"line":
|
|
2679
|
+
"line": 121,
|
|
2609
2680
|
"declarations": [
|
|
2610
2681
|
{
|
|
2611
2682
|
"property": "display",
|
|
@@ -2631,7 +2702,7 @@
|
|
|
2631
2702
|
"source": "@dereekb/dbx-web",
|
|
2632
2703
|
"module": "@dereekb/dbx-web",
|
|
2633
2704
|
"file": "src/lib/layout/text/_text.scss",
|
|
2634
|
-
"line":
|
|
2705
|
+
"line": 74,
|
|
2635
2706
|
"declarations": [
|
|
2636
2707
|
{
|
|
2637
2708
|
"property": "padding-bottom",
|
|
@@ -3210,7 +3281,7 @@
|
|
|
3210
3281
|
"source": "@dereekb/dbx-web",
|
|
3211
3282
|
"module": "@dereekb/dbx-web",
|
|
3212
3283
|
"file": "src/lib/layout/text/_text.scss",
|
|
3213
|
-
"line":
|
|
3284
|
+
"line": 775,
|
|
3214
3285
|
"declarations": [
|
|
3215
3286
|
{
|
|
3216
3287
|
"property": "text-transform",
|
|
@@ -3229,7 +3300,7 @@
|
|
|
3229
3300
|
"source": "@dereekb/dbx-web",
|
|
3230
3301
|
"module": "@dereekb/dbx-web",
|
|
3231
3302
|
"file": "src/lib/layout/text/_text.scss",
|
|
3232
|
-
"line":
|
|
3303
|
+
"line": 549,
|
|
3233
3304
|
"declarations": [
|
|
3234
3305
|
{
|
|
3235
3306
|
"property": "line-break",
|
|
@@ -3280,7 +3351,7 @@
|
|
|
3280
3351
|
"source": "@dereekb/dbx-web",
|
|
3281
3352
|
"module": "@dereekb/dbx-web",
|
|
3282
3353
|
"file": "src/lib/layout/text/_text.scss",
|
|
3283
|
-
"line":
|
|
3354
|
+
"line": 600,
|
|
3284
3355
|
"declarations": [
|
|
3285
3356
|
{
|
|
3286
3357
|
"property": "opacity",
|
|
@@ -3300,7 +3371,7 @@
|
|
|
3300
3371
|
"source": "@dereekb/dbx-web",
|
|
3301
3372
|
"module": "@dereekb/dbx-web",
|
|
3302
3373
|
"file": "src/lib/layout/text/_text.scss",
|
|
3303
|
-
"line":
|
|
3374
|
+
"line": 619,
|
|
3304
3375
|
"declarations": [
|
|
3305
3376
|
{
|
|
3306
3377
|
"property": "white-space",
|
|
@@ -3316,7 +3387,7 @@
|
|
|
3316
3387
|
"source": "@dereekb/dbx-web",
|
|
3317
3388
|
"module": "@dereekb/dbx-web",
|
|
3318
3389
|
"file": "src/lib/layout/text/_text.scss",
|
|
3319
|
-
"line":
|
|
3390
|
+
"line": 607,
|
|
3320
3391
|
"declarations": [
|
|
3321
3392
|
{
|
|
3322
3393
|
"property": "color",
|
|
@@ -3511,7 +3582,7 @@
|
|
|
3511
3582
|
"source": "@dereekb/dbx-web",
|
|
3512
3583
|
"module": "@dereekb/dbx-web",
|
|
3513
3584
|
"file": "src/lib/layout/text/_text.scss",
|
|
3514
|
-
"line":
|
|
3585
|
+
"line": 65,
|
|
3515
3586
|
"declarations": [
|
|
3516
3587
|
{
|
|
3517
3588
|
"property": "font-size",
|
|
@@ -3547,7 +3618,7 @@
|
|
|
3547
3618
|
"source": "@dereekb/dbx-web",
|
|
3548
3619
|
"module": "@dereekb/dbx-web",
|
|
3549
3620
|
"file": "src/lib/layout/text/_text.scss",
|
|
3550
|
-
"line":
|
|
3621
|
+
"line": 317,
|
|
3551
3622
|
"declarations": [
|
|
3552
3623
|
{
|
|
3553
3624
|
"property": "display",
|
|
@@ -3589,7 +3660,7 @@
|
|
|
3589
3660
|
"source": "@dereekb/dbx-web",
|
|
3590
3661
|
"module": "@dereekb/dbx-web",
|
|
3591
3662
|
"file": "src/lib/layout/text/_text.scss",
|
|
3592
|
-
"line":
|
|
3663
|
+
"line": 387,
|
|
3593
3664
|
"declarations": [
|
|
3594
3665
|
{
|
|
3595
3666
|
"property": "--dbx-icon-tile-padding",
|
|
@@ -3656,7 +3727,7 @@
|
|
|
3656
3727
|
"source": "@dereekb/dbx-web",
|
|
3657
3728
|
"module": "@dereekb/dbx-web",
|
|
3658
3729
|
"file": "src/lib/layout/text/_text.scss",
|
|
3659
|
-
"line":
|
|
3730
|
+
"line": 722,
|
|
3660
3731
|
"declarations": [
|
|
3661
3732
|
{
|
|
3662
3733
|
"property": "font",
|
|
@@ -3675,7 +3746,7 @@
|
|
|
3675
3746
|
"source": "@dereekb/dbx-web",
|
|
3676
3747
|
"module": "@dereekb/dbx-web",
|
|
3677
3748
|
"file": "src/lib/layout/text/_text.scss",
|
|
3678
|
-
"line":
|
|
3749
|
+
"line": 729,
|
|
3679
3750
|
"declarations": [
|
|
3680
3751
|
{
|
|
3681
3752
|
"property": "font",
|
|
@@ -3694,7 +3765,7 @@
|
|
|
3694
3765
|
"source": "@dereekb/dbx-web",
|
|
3695
3766
|
"module": "@dereekb/dbx-web",
|
|
3696
3767
|
"file": "src/lib/layout/text/_text.scss",
|
|
3697
|
-
"line":
|
|
3768
|
+
"line": 736,
|
|
3698
3769
|
"declarations": [
|
|
3699
3770
|
{
|
|
3700
3771
|
"property": "font",
|
|
@@ -3713,7 +3784,7 @@
|
|
|
3713
3784
|
"source": "@dereekb/dbx-web",
|
|
3714
3785
|
"module": "@dereekb/dbx-web",
|
|
3715
3786
|
"file": "src/lib/layout/text/_text.scss",
|
|
3716
|
-
"line":
|
|
3787
|
+
"line": 81,
|
|
3717
3788
|
"declarations": [
|
|
3718
3789
|
{
|
|
3719
3790
|
"property": "text-align",
|
|
@@ -3729,7 +3800,7 @@
|
|
|
3729
3800
|
"source": "@dereekb/dbx-web",
|
|
3730
3801
|
"module": "@dereekb/dbx-web",
|
|
3731
3802
|
"file": "src/lib/layout/text/_text.scss",
|
|
3732
|
-
"line":
|
|
3803
|
+
"line": 659,
|
|
3733
3804
|
"declarations": [
|
|
3734
3805
|
{
|
|
3735
3806
|
"property": "font",
|
|
@@ -3748,7 +3819,7 @@
|
|
|
3748
3819
|
"source": "@dereekb/dbx-web",
|
|
3749
3820
|
"module": "@dereekb/dbx-web",
|
|
3750
3821
|
"file": "src/lib/layout/text/_text.scss",
|
|
3751
|
-
"line":
|
|
3822
|
+
"line": 666,
|
|
3752
3823
|
"declarations": [
|
|
3753
3824
|
{
|
|
3754
3825
|
"property": "font",
|
|
@@ -3767,7 +3838,7 @@
|
|
|
3767
3838
|
"source": "@dereekb/dbx-web",
|
|
3768
3839
|
"module": "@dereekb/dbx-web",
|
|
3769
3840
|
"file": "src/lib/layout/text/_text.scss",
|
|
3770
|
-
"line":
|
|
3841
|
+
"line": 673,
|
|
3771
3842
|
"declarations": [
|
|
3772
3843
|
{
|
|
3773
3844
|
"property": "font",
|
|
@@ -3786,7 +3857,7 @@
|
|
|
3786
3857
|
"source": "@dereekb/dbx-web",
|
|
3787
3858
|
"module": "@dereekb/dbx-web",
|
|
3788
3859
|
"file": "src/lib/layout/text/_text.scss",
|
|
3789
|
-
"line":
|
|
3860
|
+
"line": 680,
|
|
3790
3861
|
"declarations": [
|
|
3791
3862
|
{
|
|
3792
3863
|
"property": "font",
|
|
@@ -3805,7 +3876,7 @@
|
|
|
3805
3876
|
"source": "@dereekb/dbx-web",
|
|
3806
3877
|
"module": "@dereekb/dbx-web",
|
|
3807
3878
|
"file": "src/lib/layout/text/_text.scss",
|
|
3808
|
-
"line":
|
|
3879
|
+
"line": 687,
|
|
3809
3880
|
"declarations": [
|
|
3810
3881
|
{
|
|
3811
3882
|
"property": "font",
|
|
@@ -3824,7 +3895,7 @@
|
|
|
3824
3895
|
"source": "@dereekb/dbx-web",
|
|
3825
3896
|
"module": "@dereekb/dbx-web",
|
|
3826
3897
|
"file": "src/lib/layout/text/_text.scss",
|
|
3827
|
-
"line":
|
|
3898
|
+
"line": 694,
|
|
3828
3899
|
"declarations": [
|
|
3829
3900
|
{
|
|
3830
3901
|
"property": "font",
|
|
@@ -3843,7 +3914,7 @@
|
|
|
3843
3914
|
"source": "@dereekb/dbx-web",
|
|
3844
3915
|
"module": "@dereekb/dbx-web",
|
|
3845
3916
|
"file": "src/lib/layout/text/_text.scss",
|
|
3846
|
-
"line":
|
|
3917
|
+
"line": 743,
|
|
3847
3918
|
"declarations": [
|
|
3848
3919
|
{
|
|
3849
3920
|
"property": "font",
|
|
@@ -3862,7 +3933,7 @@
|
|
|
3862
3933
|
"source": "@dereekb/dbx-web",
|
|
3863
3934
|
"module": "@dereekb/dbx-web",
|
|
3864
3935
|
"file": "src/lib/layout/text/_text.scss",
|
|
3865
|
-
"line":
|
|
3936
|
+
"line": 751,
|
|
3866
3937
|
"declarations": [
|
|
3867
3938
|
{
|
|
3868
3939
|
"property": "font",
|
|
@@ -3885,7 +3956,7 @@
|
|
|
3885
3956
|
"source": "@dereekb/dbx-web",
|
|
3886
3957
|
"module": "@dereekb/dbx-web",
|
|
3887
3958
|
"file": "src/lib/layout/text/_text.scss",
|
|
3888
|
-
"line":
|
|
3959
|
+
"line": 758,
|
|
3889
3960
|
"declarations": [
|
|
3890
3961
|
{
|
|
3891
3962
|
"property": "font",
|
|
@@ -3904,7 +3975,7 @@
|
|
|
3904
3975
|
"source": "@dereekb/dbx-web",
|
|
3905
3976
|
"module": "@dereekb/dbx-web",
|
|
3906
3977
|
"file": "src/lib/layout/text/_text.scss",
|
|
3907
|
-
"line":
|
|
3978
|
+
"line": 418,
|
|
3908
3979
|
"declarations": [
|
|
3909
3980
|
{
|
|
3910
3981
|
"property": "white-space",
|
|
@@ -3931,7 +4002,7 @@
|
|
|
3931
4002
|
"source": "@dereekb/dbx-web",
|
|
3932
4003
|
"module": "@dereekb/dbx-web",
|
|
3933
4004
|
"file": "src/lib/layout/text/_text.scss",
|
|
3934
|
-
"line":
|
|
4005
|
+
"line": 701,
|
|
3935
4006
|
"declarations": [
|
|
3936
4007
|
{
|
|
3937
4008
|
"property": "font",
|
|
@@ -3950,7 +4021,7 @@
|
|
|
3950
4021
|
"source": "@dereekb/dbx-web",
|
|
3951
4022
|
"module": "@dereekb/dbx-web",
|
|
3952
4023
|
"file": "src/lib/layout/text/_text.scss",
|
|
3953
|
-
"line":
|
|
4024
|
+
"line": 708,
|
|
3954
4025
|
"declarations": [
|
|
3955
4026
|
{
|
|
3956
4027
|
"property": "font",
|
|
@@ -3969,7 +4040,7 @@
|
|
|
3969
4040
|
"source": "@dereekb/dbx-web",
|
|
3970
4041
|
"module": "@dereekb/dbx-web",
|
|
3971
4042
|
"file": "src/lib/layout/text/_text.scss",
|
|
3972
|
-
"line":
|
|
4043
|
+
"line": 715,
|
|
3973
4044
|
"declarations": [
|
|
3974
4045
|
{
|
|
3975
4046
|
"property": "font",
|
|
@@ -3988,7 +4059,7 @@
|
|
|
3988
4059
|
"source": "@dereekb/dbx-web",
|
|
3989
4060
|
"module": "@dereekb/dbx-web",
|
|
3990
4061
|
"file": "src/lib/layout/text/_text.scss",
|
|
3991
|
-
"line":
|
|
4062
|
+
"line": 433,
|
|
3992
4063
|
"declarations": [],
|
|
3993
4064
|
"role": "text",
|
|
3994
4065
|
"intent": "single-line truncation with ellipsis on any block-level element",
|
|
@@ -4003,7 +4074,7 @@
|
|
|
4003
4074
|
"source": "@dereekb/dbx-web",
|
|
4004
4075
|
"module": "@dereekb/dbx-web",
|
|
4005
4076
|
"file": "src/lib/layout/text/_text.scss",
|
|
4006
|
-
"line":
|
|
4077
|
+
"line": 785,
|
|
4007
4078
|
"declarations": [
|
|
4008
4079
|
{
|
|
4009
4080
|
"property": "letter-spacing",
|
|
@@ -4087,7 +4158,7 @@
|
|
|
4087
4158
|
"source": "@dereekb/dbx-web",
|
|
4088
4159
|
"module": "@dereekb/dbx-web",
|
|
4089
4160
|
"file": "src/lib/layout/text/_text.scss",
|
|
4090
|
-
"line":
|
|
4161
|
+
"line": 89,
|
|
4091
4162
|
"declarations": [
|
|
4092
4163
|
{
|
|
4093
4164
|
"property": "text-decoration",
|
|
@@ -4103,7 +4174,7 @@
|
|
|
4103
4174
|
"source": "@dereekb/dbx-web",
|
|
4104
4175
|
"module": "@dereekb/dbx-web",
|
|
4105
4176
|
"file": "src/lib/layout/text/_text.scss",
|
|
4106
|
-
"line":
|
|
4177
|
+
"line": 767,
|
|
4107
4178
|
"declarations": [
|
|
4108
4179
|
{
|
|
4109
4180
|
"property": "text-transform",
|
|
@@ -4123,7 +4194,7 @@
|
|
|
4123
4194
|
"source": "@dereekb/dbx-web",
|
|
4124
4195
|
"module": "@dereekb/dbx-web",
|
|
4125
4196
|
"file": "src/lib/layout/text/_text.scss",
|
|
4126
|
-
"line":
|
|
4197
|
+
"line": 541,
|
|
4127
4198
|
"declarations": [
|
|
4128
4199
|
{
|
|
4129
4200
|
"property": "white-space",
|
|
@@ -1110,6 +1110,139 @@
|
|
|
1110
1110
|
},
|
|
1111
1111
|
"componentScope": "text"
|
|
1112
1112
|
},
|
|
1113
|
+
{
|
|
1114
|
+
"cssVariable": "--dbx-detail-block-tile-background",
|
|
1115
|
+
"source": "dbx-web",
|
|
1116
|
+
"role": "misc",
|
|
1117
|
+
"intents": [
|
|
1118
|
+
"detail block tile background"
|
|
1119
|
+
],
|
|
1120
|
+
"description": "Component-scoped override point (`text`) read in `packages/dbx-web/src/lib/layout/text/_text.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `var(--mat-sys-surface-container-high)`.",
|
|
1121
|
+
"defaults": {
|
|
1122
|
+
"light": "var(--mat-sys-surface-container-high)"
|
|
1123
|
+
},
|
|
1124
|
+
"componentScope": "text"
|
|
1125
|
+
},
|
|
1126
|
+
{
|
|
1127
|
+
"cssVariable": "--dbx-detail-block-tile-gap",
|
|
1128
|
+
"source": "dbx-web",
|
|
1129
|
+
"role": "spacing",
|
|
1130
|
+
"intents": [
|
|
1131
|
+
"detail block tile gap",
|
|
1132
|
+
"detail block tile gap spacing"
|
|
1133
|
+
],
|
|
1134
|
+
"description": "Component-scoped override point (`text`) read in `packages/dbx-web/src/lib/layout/text/_text.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `var(--dbx-padding-3)`.",
|
|
1135
|
+
"defaults": {
|
|
1136
|
+
"light": "var(--dbx-padding-3)"
|
|
1137
|
+
},
|
|
1138
|
+
"componentScope": "text"
|
|
1139
|
+
},
|
|
1140
|
+
{
|
|
1141
|
+
"cssVariable": "--dbx-detail-block-tile-hint-color",
|
|
1142
|
+
"source": "dbx-web",
|
|
1143
|
+
"role": "color",
|
|
1144
|
+
"intents": [
|
|
1145
|
+
"detail block tile hint color"
|
|
1146
|
+
],
|
|
1147
|
+
"description": "Component-scoped override point (`text`) read in `packages/dbx-web/src/lib/layout/text/_text.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `var(--mat-sys-on-surface-variant)`.",
|
|
1148
|
+
"defaults": {
|
|
1149
|
+
"light": "var(--mat-sys-on-surface-variant)"
|
|
1150
|
+
},
|
|
1151
|
+
"componentScope": "text"
|
|
1152
|
+
},
|
|
1153
|
+
{
|
|
1154
|
+
"cssVariable": "--dbx-detail-block-tile-icon-color",
|
|
1155
|
+
"source": "dbx-web",
|
|
1156
|
+
"role": "text-color",
|
|
1157
|
+
"intents": [
|
|
1158
|
+
"detail block tile icon color",
|
|
1159
|
+
"detail block tile icon color text"
|
|
1160
|
+
],
|
|
1161
|
+
"description": "Component-scoped override point (`text`) read in `packages/dbx-web/src/lib/layout/text/_text.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `var(--mat-sys-on-surface-variant)`.",
|
|
1162
|
+
"defaults": {
|
|
1163
|
+
"light": "var(--mat-sys-on-surface-variant)"
|
|
1164
|
+
},
|
|
1165
|
+
"componentScope": "text"
|
|
1166
|
+
},
|
|
1167
|
+
{
|
|
1168
|
+
"cssVariable": "--dbx-detail-block-tile-icon-size",
|
|
1169
|
+
"source": "dbx-web",
|
|
1170
|
+
"role": "size",
|
|
1171
|
+
"intents": [
|
|
1172
|
+
"detail block tile icon size"
|
|
1173
|
+
],
|
|
1174
|
+
"description": "Component-scoped override point (`text`) read in `packages/dbx-web/src/lib/layout/text/_text.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `16px`.",
|
|
1175
|
+
"defaults": {
|
|
1176
|
+
"light": "16px"
|
|
1177
|
+
},
|
|
1178
|
+
"componentScope": "text"
|
|
1179
|
+
},
|
|
1180
|
+
{
|
|
1181
|
+
"cssVariable": "--dbx-detail-block-tile-label-color",
|
|
1182
|
+
"source": "dbx-web",
|
|
1183
|
+
"role": "color",
|
|
1184
|
+
"intents": [
|
|
1185
|
+
"detail block tile label color"
|
|
1186
|
+
],
|
|
1187
|
+
"description": "Component-scoped token (`text`) declared in `packages/dbx-web/src/lib/layout/text/_text.scss`. Add a sassdoc `///` block above the declaration for richer guidance.",
|
|
1188
|
+
"defaults": {
|
|
1189
|
+
"light": "var(#{theming.$dbx-bg-color-var})"
|
|
1190
|
+
},
|
|
1191
|
+
"componentScope": "text"
|
|
1192
|
+
},
|
|
1193
|
+
{
|
|
1194
|
+
"cssVariable": "--dbx-detail-block-tile-padding-bottom",
|
|
1195
|
+
"source": "dbx-web",
|
|
1196
|
+
"role": "spacing",
|
|
1197
|
+
"intents": [
|
|
1198
|
+
"detail block tile padding bottom",
|
|
1199
|
+
"detail block tile padding bottom spacing"
|
|
1200
|
+
],
|
|
1201
|
+
"description": "Component-scoped override point (`text`) read in `packages/dbx-web/src/lib/layout/text/_text.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `var(--dbx-padding-4)`.",
|
|
1202
|
+
"defaults": {
|
|
1203
|
+
"light": "var(--dbx-padding-4)"
|
|
1204
|
+
},
|
|
1205
|
+
"componentScope": "text"
|
|
1206
|
+
},
|
|
1207
|
+
{
|
|
1208
|
+
"cssVariable": "--dbx-detail-block-tile-shape",
|
|
1209
|
+
"source": "dbx-web",
|
|
1210
|
+
"role": "misc",
|
|
1211
|
+
"intents": [
|
|
1212
|
+
"detail block tile shape"
|
|
1213
|
+
],
|
|
1214
|
+
"description": "Component-scoped override point (`text`) read in `packages/dbx-web/src/lib/layout/text/_text.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `50%`.",
|
|
1215
|
+
"defaults": {
|
|
1216
|
+
"light": "50%"
|
|
1217
|
+
},
|
|
1218
|
+
"componentScope": "text"
|
|
1219
|
+
},
|
|
1220
|
+
{
|
|
1221
|
+
"cssVariable": "--dbx-detail-block-tile-size",
|
|
1222
|
+
"source": "dbx-web",
|
|
1223
|
+
"role": "size",
|
|
1224
|
+
"intents": [
|
|
1225
|
+
"detail block tile size"
|
|
1226
|
+
],
|
|
1227
|
+
"description": "Component-scoped override point (`text`) read in `packages/dbx-web/src/lib/layout/text/_text.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `28px`.",
|
|
1228
|
+
"defaults": {
|
|
1229
|
+
"light": "28px"
|
|
1230
|
+
},
|
|
1231
|
+
"componentScope": "text"
|
|
1232
|
+
},
|
|
1233
|
+
{
|
|
1234
|
+
"cssVariable": "--dbx-detail-block-tile-text-color",
|
|
1235
|
+
"source": "dbx-web",
|
|
1236
|
+
"role": "color",
|
|
1237
|
+
"intents": [
|
|
1238
|
+
"detail block tile text color"
|
|
1239
|
+
],
|
|
1240
|
+
"description": "Component-scoped override point (`text`) read in `packages/dbx-web/src/lib/layout/text/_text.scss` — set it (from an app, or via the owning dbx directive where one exists) to override; unset, it falls back to `var(--mat-sys-on-surface)`.",
|
|
1241
|
+
"defaults": {
|
|
1242
|
+
"light": "var(--mat-sys-on-surface)"
|
|
1243
|
+
},
|
|
1244
|
+
"componentScope": "text"
|
|
1245
|
+
},
|
|
1113
1246
|
{
|
|
1114
1247
|
"cssVariable": "--dbx-dialog-content-padding",
|
|
1115
1248
|
"source": "dbx-web",
|
|
@@ -1286,7 +1419,7 @@
|
|
|
1286
1419
|
],
|
|
1287
1420
|
"description": "Component-scoped token (`text`) declared in `packages/dbx-web/src/lib/layout/text/_text.scss`. Add a sassdoc `///` block above the declaration for richer guidance.",
|
|
1288
1421
|
"defaults": {
|
|
1289
|
-
"light": "var(--dbx-
|
|
1422
|
+
"light": "var(--dbx-detail-block-tile-shape, 50%)"
|
|
1290
1423
|
},
|
|
1291
1424
|
"componentScope": "text"
|
|
1292
1425
|
},
|
|
@@ -1299,7 +1432,7 @@
|
|
|
1299
1432
|
],
|
|
1300
1433
|
"description": "Component-scoped token (`text`) declared in `packages/dbx-web/src/lib/layout/text/_text.scss`. Add a sassdoc `///` block above the declaration for richer guidance.",
|
|
1301
1434
|
"defaults": {
|
|
1302
|
-
"light": "var(--dbx-
|
|
1435
|
+
"light": "var(--dbx-detail-block-tile-icon-size, 16px)"
|
|
1303
1436
|
},
|
|
1304
1437
|
"componentScope": "text"
|
|
1305
1438
|
},
|
|
@@ -1325,7 +1458,7 @@
|
|
|
1325
1458
|
],
|
|
1326
1459
|
"description": "Component-scoped token (`text`) declared in `packages/dbx-web/src/lib/layout/text/_text.scss`. Add a sassdoc `///` block above the declaration for richer guidance.",
|
|
1327
1460
|
"defaults": {
|
|
1328
|
-
"light": "var(--dbx-
|
|
1461
|
+
"light": "var(--dbx-detail-block-tile-size, 28px)"
|
|
1329
1462
|
},
|
|
1330
1463
|
"componentScope": "text"
|
|
1331
1464
|
},
|
|
@@ -1352,7 +1485,7 @@
|
|
|
1352
1485
|
],
|
|
1353
1486
|
"description": "Component-scoped token (`text`) declared in `packages/dbx-web/src/lib/layout/text/_text.scss`. Add a sassdoc `///` block above the declaration for richer guidance.",
|
|
1354
1487
|
"defaults": {
|
|
1355
|
-
"light": "var(--dbx-
|
|
1488
|
+
"light": "var(--dbx-detail-block-tile-size, 28px)"
|
|
1356
1489
|
},
|
|
1357
1490
|
"componentScope": "text"
|
|
1358
1491
|
},
|
|
@@ -1379,7 +1512,7 @@
|
|
|
1379
1512
|
],
|
|
1380
1513
|
"description": "Component-scoped token (`text`) declared in `packages/dbx-web/src/lib/layout/text/_text.scss`. Add a sassdoc `///` block above the declaration for richer guidance.",
|
|
1381
1514
|
"defaults": {
|
|
1382
|
-
"light": "var(--dbx-
|
|
1515
|
+
"light": "var(--dbx-detail-block-tile-size, 28px)"
|
|
1383
1516
|
},
|
|
1384
1517
|
"componentScope": "text"
|
|
1385
1518
|
},
|
|
@@ -2277,7 +2277,7 @@
|
|
|
2277
2277
|
"selector": "dbx-detail-block",
|
|
2278
2278
|
"className": "DbxDetailBlockComponent",
|
|
2279
2279
|
"module": "@dereekb/dbx-web",
|
|
2280
|
-
"description": "A structured content block with a header row (icon + label) and a detail content area below.\n\nUse the `[header]` content slot for extra header-level content and default content for the detail area.",
|
|
2280
|
+
"description": "A structured content block with a header row (icon + label) and a detail content area below.\n\nUse the `[header]` content slot for extra header-level content and default content for the detail area.\n\nThe component provides the structure only. Add the `dbx-detail-block-tile` class for the tile styling: the icon in a\nround tile beside the content, an uppercase label, and `dbx-detail-block-tile-value` / `dbx-detail-block-tile-hint`\nlines for the value and its supporting text.",
|
|
2281
2281
|
"inputs": [
|
|
2282
2282
|
{
|
|
2283
2283
|
"name": "icon",
|
|
@@ -404,6 +404,58 @@
|
|
|
404
404
|
}
|
|
405
405
|
]
|
|
406
406
|
},
|
|
407
|
+
{
|
|
408
|
+
"slug": "list-detail-item-grouped-todo",
|
|
409
|
+
"category": "list",
|
|
410
|
+
"summary": "Grouped To Do list: .dbx-list-detail-item rows split into titled sections by dbxListTitleGroup, urgent rows set apart by a colored icon tile instead of a background, no hover effects, the built-in chevron, content-derived row keys so changed text re-renders, and an empty state.",
|
|
411
|
+
"header": ".dbx-list-detail-item Grouped To Do List",
|
|
412
|
+
"className": "DocListDetailItemGroupedTodoExampleComponent",
|
|
413
|
+
"selector": "doc-list-detail-item-grouped-todo-example",
|
|
414
|
+
"module": "apps/demo",
|
|
415
|
+
"appRef": "apps/demo",
|
|
416
|
+
"hint": "The To Do recipe split into titled sections, with urgent rows marked by their icon tile color and no hover effects.",
|
|
417
|
+
"relatedSlugs": [
|
|
418
|
+
"dbx-list",
|
|
419
|
+
"dbx-list-detail-item",
|
|
420
|
+
"dbx-list-no-hover-effects",
|
|
421
|
+
"dbx-list-title-group-header",
|
|
422
|
+
"dbx-list-empty-content",
|
|
423
|
+
"dbx-chip",
|
|
424
|
+
"dbx-icon-tile",
|
|
425
|
+
"dbx-color"
|
|
426
|
+
],
|
|
427
|
+
"info": "<p>\n The same row recipe as the To Do list above, grouped by\n <code>[dbxListTitleGroup]</code>\n . The delegate maps each item to its section with\n <code>groupValueForItem</code>\n , gives each section its title with\n <code>dataForGroupValue</code>\n , and orders the sections with\n <code>sortGroupsByData</code>\n . The default\n <code>dbx-list-title-group-header</code>\n renders each title.\n</p>\n<p>\n The rows carry no background. An \"Action needed\" row is set apart by its tonal\n <code>dbx-icon-tile</code>\n alone: the expired waiver's tile is\n <code>warn</code>\n and the rest are\n <code>notice</code>\n , while the \"Suggestions\" rows keep a grey tile.\n</p>\n<p>\n The wrapper host adds\n <code>dbx-list-no-hover-effects</code>\n , so hovering a row doesn't add a state layer. The whole row stays the click target, and the view's\n <code>metaConfig</code>\n chevron is the only trailing affordance.\n</p>\n<p>\n The view keys each row by its content (id, title, detail and chip) instead of its id. An item component keeps the item it was created with while its key stays the same, so an id-only key would leave the old text on screen when a count changes. Use\n <strong>Finish a course</strong>\n to watch the \"Courses in progress\" row update, then disappear.\n</p>\n<p>\n Last clicked:\n <code>{{ clickedIdSignal() ?? '(none)' }}</code>\n</p>",
|
|
428
|
+
"snippet": "<div class=\"dbx-button-wrap-group dbx-mb3\">\n <button mat-stroked-button (click)=\"finishCourse()\" [disabled]=\"coursesInProgressSignal() === 0\">Finish a course</button>\n <button mat-stroked-button (click)=\"reset()\">Reset</button>\n <button mat-stroked-button (click)=\"showEmptySignal.set(!showEmptySignal())\">{{ showEmptySignal() ? 'Show to dos' : 'All caught up' }}</button>\n</div>\n<mat-card appearance=\"outlined\" style=\"max-width: 560px\">\n <mat-card-content>\n <h3 class=\"dbx-text-headline-small dbx-m0\">To Do</h3>\n @if (countLabelSignal(); as countLabel) {\n <p class=\"dbx-hint dbx-mb3\">{{ countLabel }}</p>\n }\n <doc-todo-group-item-list [dbxListTitleGroup]=\"groupDelegate\" [state]=\"stateSignal()\">\n <dbx-list-empty-content empty>\n <div class=\"dbx-flex-column dbx-flex-center dbx-text-center dbx-pv4\">\n <dbx-icon-tile class=\"dbx-mb3\" icon=\"task_alt\" [round]=\"true\" dbxColor=\"primary\" [dbxColorTone]=\"18\"></dbx-icon-tile>\n <div class=\"dbx-text-title-medium\">You're all caught up</div>\n <div class=\"dbx-hint\">No action items right now. We'll let you know if something needs your attention.</div>\n </div>\n </dbx-list-empty-content>\n </doc-todo-group-item-list>\n </mat-card-content>\n</mat-card>",
|
|
429
|
+
"uses": [
|
|
430
|
+
{
|
|
431
|
+
"kind": "component",
|
|
432
|
+
"className": "DocTodoGroupItemListComponent",
|
|
433
|
+
"role": "list",
|
|
434
|
+
"selector": "doc-todo-group-item-list",
|
|
435
|
+
"classSource": "@Component({\n selector: 'doc-todo-group-item-list',\n template: DEFAULT_LIST_WRAPPER_COMPONENT_CONFIGURATION_TEMPLATE,\n imports: [DbxListWrapperComponentImportsModule],\n host: {\n class: 'dbx-list-auto-height dbx-list-no-hover-effects'\n }\n})\nexport class DocTodoGroupItemListComponent extends AbstractDbxSelectionListWrapperDirective<TodoGroupItemValue> {\n constructor() {\n super({\n componentClass: DocTodoGroupItemListViewComponent,\n defaultSelectionMode: 'view'\n });\n }\n}"
|
|
436
|
+
},
|
|
437
|
+
{
|
|
438
|
+
"kind": "component",
|
|
439
|
+
"className": "DocTodoGroupItemListViewComponent",
|
|
440
|
+
"role": "view",
|
|
441
|
+
"selector": "doc-todo-group-item-list-view",
|
|
442
|
+
"classSource": "@Component({\n selector: 'doc-todo-group-item-list-view',\n template: DEFAULT_DBX_SELECTION_VALUE_LIST_COMPONENT_CONFIGURATION_TEMPLATE,\n imports: [DbxSelectionValueListViewComponentImportsModule],\n providers: provideDbxListView(DocTodoGroupItemListViewComponent),\n host: {\n class: 'dbx-list-item-p0'\n }\n})\nexport class DocTodoGroupItemListViewComponent extends AbstractDbxSelectionListViewDirective<TodoGroupItemValue> {\n // An item component keeps the item it was created with while its key stays the same, so key each row by its content:\n // a changed detail line (e.g. the course count) then renders a fresh row. Drop `icon` (the template paints its own\n // tile); keep `anchor` so the whole row is the click target.\n readonly config: DbxSelectionValueListViewConfig<TodoGroupItemValueWithSelection> = {\n componentClass: DocTodoGroupItemListViewItemComponent,\n metaConfig: DbxListViewMetaIconComponent.metaConfig('chevron_right'),\n mapValuesToItemValues: (values) => of(values.map((value) => ({ ...value, key: [value.id, value.title, value.detail, value.chip?.text].join('|'), itemValue: value, icon: undefined })))\n };\n}"
|
|
443
|
+
},
|
|
444
|
+
{
|
|
445
|
+
"kind": "component",
|
|
446
|
+
"className": "DocTodoGroupItemListViewItemComponent",
|
|
447
|
+
"role": "item",
|
|
448
|
+
"selector": "doc-todo-group-item-list-view-item",
|
|
449
|
+
"classSource": "@Component({\n selector: 'doc-todo-group-item-list-view-item',\n template: `\n <div class=\"dbx-list-detail-item\">\n <dbx-icon-tile class=\"item-leading\" [icon]=\"icon\" [round]=\"true\" [dbxColor]=\"tileColor\" [dbxColorTone]=\"18\"></dbx-icon-tile>\n <div class=\"item-content\">\n <span class=\"item-title\">{{ title }}</span>\n <span class=\"item-line\">{{ detail }}</span>\n @if (chip; as chip) {\n <span class=\"item-line dbx-pt1\">\n <dbx-chip [color]=\"chip.color\" [small]=\"true\">{{ chip.text }}</dbx-chip>\n </span>\n }\n </div>\n </div>\n `,\n imports: [DbxChipDirective, DbxColorDirective, DbxIconTileComponent]\n})\nexport class DocTodoGroupItemListViewItemComponent extends AbstractDbxValueListViewItemComponent<TodoGroupItemValue> {\n get icon(): string {\n return this.itemValue.icon;\n }\n\n get title(): string {\n return this.itemValue.title;\n }\n\n get detail(): string {\n return this.itemValue.detail;\n }\n\n get chip(): Maybe<TodoItemChip> {\n return this.itemValue.chip;\n }\n\n /**\n * Tile color of the row: an \"Action needed\" row's own color (notice by default), otherwise grey.\n *\n * @returns The row's tile color.\n */\n get tileColor(): DbxThemeColor {\n return this.itemValue.group === 'action_needed' ? (this.itemValue.color ?? 'notice') : 'grey';\n }\n}"
|
|
450
|
+
},
|
|
451
|
+
{
|
|
452
|
+
"kind": "interface",
|
|
453
|
+
"className": "TodoGroupItemValue",
|
|
454
|
+
"role": "data",
|
|
455
|
+
"classSource": "export interface TodoGroupItemValue {\n readonly id: string;\n readonly group: TodoGroupItemGroup;\n readonly icon: string;\n readonly title: string;\n readonly detail: string;\n /**\n * Tile color of an `action_needed` row. Defaults to notice.\n */\n readonly color?: Maybe<DbxThemeColor>;\n readonly chip?: Maybe<TodoItemChip>;\n /**\n * Whole-row click target.\n */\n readonly anchor: ClickableAnchor;\n}"
|
|
456
|
+
}
|
|
457
|
+
]
|
|
458
|
+
},
|
|
407
459
|
{
|
|
408
460
|
"slug": "list-progress-with-button",
|
|
409
461
|
"category": "list",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dereekb/dbx-components-mcp",
|
|
3
|
-
"version": "14.
|
|
3
|
+
"version": "14.13.0",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"bin": {
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"ts-morph": "^21.0.0"
|
|
13
13
|
},
|
|
14
14
|
"peerDependencies": {
|
|
15
|
-
"@dereekb/dbx-cli": "14.
|
|
16
|
-
"@dereekb/util": "14.
|
|
15
|
+
"@dereekb/dbx-cli": "14.13.0",
|
|
16
|
+
"@dereekb/util": "14.13.0"
|
|
17
17
|
}
|
|
18
18
|
}
|