@nldd/design-system 0.8.55 → 0.8.57
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/README.md +15 -0
- package/dist/components/actions/button/button.d.ts +13 -4
- package/dist/components/actions/button/button.d.ts.map +1 -1
- package/dist/components/actions/button/button.js +23 -3
- package/dist/components/actions/button/button.js.map +1 -1
- package/dist/components/actions/button/button.styles.d.ts.map +1 -1
- package/dist/components/actions/button/button.styles.js +269 -87
- package/dist/components/actions/button/button.styles.js.map +1 -1
- package/dist/components/actions/button/button.template.d.ts.map +1 -1
- package/dist/components/actions/button/button.template.js +33 -17
- package/dist/components/actions/button/button.template.js.map +1 -1
- package/dist/components/actions/button-bar/button-bar.d.ts +2 -2
- package/dist/components/actions/button-bar/button-bar.d.ts.map +1 -1
- package/dist/components/actions/button-bar/button-bar.js +3 -1
- package/dist/components/actions/button-bar/button-bar.js.map +1 -1
- package/dist/components/actions/button-bar/button-bar.styles.d.ts.map +1 -1
- package/dist/components/actions/button-bar/button-bar.styles.js +28 -4
- package/dist/components/actions/button-bar/button-bar.styles.js.map +1 -1
- package/dist/components/actions/icon-button/icon-button.d.ts +14 -4
- package/dist/components/actions/icon-button/icon-button.d.ts.map +1 -1
- package/dist/components/actions/icon-button/icon-button.js +23 -3
- package/dist/components/actions/icon-button/icon-button.js.map +1 -1
- package/dist/components/actions/icon-button/icon-button.styles.d.ts.map +1 -1
- package/dist/components/actions/icon-button/icon-button.styles.js +127 -63
- package/dist/components/actions/icon-button/icon-button.styles.js.map +1 -1
- package/dist/components/actions/icon-button/icon-button.template.d.ts.map +1 -1
- package/dist/components/actions/icon-button/icon-button.template.js +4 -2
- package/dist/components/actions/icon-button/icon-button.template.js.map +1 -1
- package/dist/components/actions/menu/menu.d.ts +9 -0
- package/dist/components/actions/menu/menu.d.ts.map +1 -1
- package/dist/components/actions/menu/menu.js +27 -2
- package/dist/components/actions/menu/menu.js.map +1 -1
- package/dist/components/actions/split-button/split-button.d.ts +30 -20
- package/dist/components/actions/split-button/split-button.d.ts.map +1 -1
- package/dist/components/actions/split-button/split-button.js +73 -49
- package/dist/components/actions/split-button/split-button.js.map +1 -1
- package/dist/components/actions/split-button/split-button.styles.d.ts.map +1 -1
- package/dist/components/actions/split-button/split-button.styles.js +39 -3
- package/dist/components/actions/split-button/split-button.styles.js.map +1 -1
- package/dist/components/actions/split-button/split-button.template.d.ts.map +1 -1
- package/dist/components/actions/split-button/split-button.template.js +6 -1
- package/dist/components/actions/split-button/split-button.template.js.map +1 -1
- package/dist/components/actions/toolbar/toolbar.d.ts +91 -14
- package/dist/components/actions/toolbar/toolbar.d.ts.map +1 -1
- package/dist/components/actions/toolbar/toolbar.js +299 -103
- package/dist/components/actions/toolbar/toolbar.js.map +1 -1
- package/dist/components/actions/toolbar/toolbar.styles.d.ts +2 -0
- package/dist/components/actions/toolbar/toolbar.styles.d.ts.map +1 -1
- package/dist/components/actions/toolbar/toolbar.styles.js +109 -41
- package/dist/components/actions/toolbar/toolbar.styles.js.map +1 -1
- package/dist/components/actions/toolbar/toolbar.template.d.ts +7 -4
- package/dist/components/actions/toolbar/toolbar.template.d.ts.map +1 -1
- package/dist/components/actions/toolbar/toolbar.template.js +22 -69
- package/dist/components/actions/toolbar/toolbar.template.js.map +1 -1
- package/dist/components/components.js +1 -1
- package/dist/components/content/code-viewer/code-viewer.styles.d.ts.map +1 -1
- package/dist/components/content/code-viewer/code-viewer.styles.js +4 -0
- package/dist/components/content/code-viewer/code-viewer.styles.js.map +1 -1
- package/dist/components/content/icon/icon-aliases.d.ts.map +1 -1
- package/dist/components/content/icon/icon-aliases.js +48 -2
- package/dist/components/content/icon/icon-aliases.js.map +1 -1
- package/dist/components/content/icon/icon-registry.d.ts.map +1 -1
- package/dist/components/content/icon/icon-registry.js +37 -2
- package/dist/components/content/icon/icon-registry.js.map +1 -1
- package/dist/components/content/image/image.d.ts +1 -1
- package/dist/components/content/image/image.d.ts.map +1 -1
- package/dist/components/content/image/image.i18n.d.ts +1 -1
- package/dist/components/content/image/image.i18n.js +1 -1
- package/dist/components/content/image/image.i18n.js.map +1 -1
- package/dist/components/content/image/image.js +7 -2
- package/dist/components/content/image/image.js.map +1 -1
- package/dist/components/content/image/image.styles.d.ts.map +1 -1
- package/dist/components/content/image/image.styles.js +21 -30
- package/dist/components/content/image/image.styles.js.map +1 -1
- package/dist/components/content/image/image.template.d.ts.map +1 -1
- package/dist/components/content/image/image.template.js +4 -11
- package/dist/components/content/image/image.template.js.map +1 -1
- package/dist/components/content/image/lqip-encoder-element.js +1 -1
- package/dist/components/{index-C3JellW2.js → index-DHU98C6V.js} +1561 -783
- package/dist/components/inputs/combo-box/combo-box.styles.js +1 -1
- package/dist/components/inputs/dropdown/dropdown.styles.d.ts.map +1 -1
- package/dist/components/inputs/dropdown/dropdown.styles.js +31 -18
- package/dist/components/inputs/dropdown/dropdown.styles.js.map +1 -1
- package/dist/components/inputs/multi-line-text-field/multi-line-text-field.styles.js +1 -1
- package/dist/components/inputs/password-field/password-field.styles.js +1 -1
- package/dist/components/inputs/search-field/search-field.styles.js +1 -1
- package/dist/components/inputs/segmented-control/segmented-control.d.ts +5 -4
- package/dist/components/inputs/segmented-control/segmented-control.d.ts.map +1 -1
- package/dist/components/inputs/segmented-control/segmented-control.js +4 -3
- package/dist/components/inputs/segmented-control/segmented-control.js.map +1 -1
- package/dist/components/inputs/segmented-control/segmented-control.styles.d.ts.map +1 -1
- package/dist/components/inputs/segmented-control/segmented-control.styles.js +59 -9
- package/dist/components/inputs/segmented-control/segmented-control.styles.js.map +1 -1
- package/dist/components/inputs/segmented-control/segmented-control.template.js +3 -3
- package/dist/components/inputs/segmented-control/segmented-control.template.js.map +1 -1
- package/dist/components/inputs/stepper/stepper.styles.d.ts.map +1 -1
- package/dist/components/inputs/stepper/stepper.styles.js +16 -5
- package/dist/components/inputs/stepper/stepper.styles.js.map +1 -1
- package/dist/components/inputs/stepper/stepper.template.d.ts.map +1 -1
- package/dist/components/inputs/stepper/stepper.template.js +2 -0
- package/dist/components/inputs/stepper/stepper.template.js.map +1 -1
- package/dist/components/inputs/text-field/text-field.styles.js +1 -1
- package/dist/components/inputs/toggle-button/toggle-button.d.ts +4 -3
- package/dist/components/inputs/toggle-button/toggle-button.d.ts.map +1 -1
- package/dist/components/inputs/toggle-button/toggle-button.js +3 -2
- package/dist/components/inputs/toggle-button/toggle-button.js.map +1 -1
- package/dist/components/inputs/toggle-button/toggle-button.styles.d.ts.map +1 -1
- package/dist/components/inputs/toggle-button/toggle-button.styles.js +53 -17
- package/dist/components/inputs/toggle-button/toggle-button.styles.js.map +1 -1
- package/dist/components/inputs/toggle-button/toggle-button.template.d.ts.map +1 -1
- package/dist/components/inputs/toggle-button/toggle-button.template.js +3 -4
- package/dist/components/inputs/toggle-button/toggle-button.template.js.map +1 -1
- package/dist/components/inputs/token/token.styles.d.ts.map +1 -1
- package/dist/components/inputs/token/token.styles.js +24 -7
- package/dist/components/inputs/token/token.styles.js.map +1 -1
- package/dist/components/inputs/token/token.template.d.ts.map +1 -1
- package/dist/components/inputs/token/token.template.js +1 -0
- package/dist/components/inputs/token/token.template.js.map +1 -1
- package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.d.ts +1 -1
- package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.d.ts.map +1 -1
- package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.js +0 -5
- package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.js.map +1 -1
- package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.d.ts +1 -0
- package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.d.ts.map +1 -1
- package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.styles.d.ts.map +1 -1
- package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.styles.js +5 -0
- package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.styles.js.map +1 -1
- package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.template.d.ts +1 -1
- package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.template.d.ts.map +1 -1
- package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.template.js +7 -3
- package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.template.js.map +1 -1
- package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.d.ts +1 -0
- package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.d.ts.map +1 -1
- package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.styles.d.ts.map +1 -1
- package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.styles.js +5 -0
- package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.styles.js.map +1 -1
- package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.template.d.ts +1 -1
- package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.template.d.ts.map +1 -1
- package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.template.js +7 -3
- package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.template.js.map +1 -1
- package/dist/components/layout/page-sections/simple-section/simple-section.d.ts +1 -1
- package/dist/components/layout/page-sections/simple-section/simple-section.d.ts.map +1 -1
- package/dist/components/layout/page-sections/simple-section/simple-section.js +0 -5
- package/dist/components/layout/page-sections/simple-section/simple-section.js.map +1 -1
- package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.d.ts +1 -0
- package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.d.ts.map +1 -1
- package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.styles.d.ts.map +1 -1
- package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.styles.js +5 -0
- package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.styles.js.map +1 -1
- package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.template.d.ts +1 -1
- package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.template.d.ts.map +1 -1
- package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.template.js +7 -3
- package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.template.js.map +1 -1
- package/dist/components/lists-and-tables/table/table.styles.d.ts.map +1 -1
- package/dist/components/lists-and-tables/table/table.styles.js +7 -0
- package/dist/components/lists-and-tables/table/table.styles.js.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.d.ts +2 -22
- package/dist/components/navigation/breadcrumbs/breadcrumbs.d.ts.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.i18n.d.ts +0 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.i18n.d.ts.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.i18n.js +0 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.i18n.js.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.js +2 -52
- package/dist/components/navigation/breadcrumbs/breadcrumbs.js.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.styles.d.ts.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.styles.js +1 -47
- package/dist/components/navigation/breadcrumbs/breadcrumbs.styles.js.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.template.d.ts.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.template.js +1 -17
- package/dist/components/navigation/breadcrumbs/breadcrumbs.template.js.map +1 -1
- package/dist/components/navigation/document-tab-bar/document-tab-bar.styles.d.ts.map +1 -1
- package/dist/components/navigation/document-tab-bar/document-tab-bar.styles.js +39 -19
- package/dist/components/navigation/document-tab-bar/document-tab-bar.styles.js.map +1 -1
- package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.d.ts.map +1 -1
- package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.js +4 -0
- package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.js.map +1 -1
- package/dist/components/navigation/pagination/pagination.styles.d.ts.map +1 -1
- package/dist/components/navigation/pagination/pagination.styles.js +35 -15
- package/dist/components/navigation/pagination/pagination.styles.js.map +1 -1
- package/dist/components/navigation/pagination/pagination.template.d.ts.map +1 -1
- package/dist/components/navigation/pagination/pagination.template.js +2 -0
- package/dist/components/navigation/pagination/pagination.template.js.map +1 -1
- package/dist/components/navigation/tab-bar/tab-bar.d.ts +11 -4
- package/dist/components/navigation/tab-bar/tab-bar.d.ts.map +1 -1
- package/dist/components/navigation/tab-bar/tab-bar.js +17 -2
- package/dist/components/navigation/tab-bar/tab-bar.js.map +1 -1
- package/dist/components/navigation/tab-bar/tab-bar.styles.d.ts.map +1 -1
- package/dist/components/navigation/tab-bar/tab-bar.styles.js +74 -18
- package/dist/components/navigation/tab-bar/tab-bar.styles.js.map +1 -1
- package/dist/components/navigation/tab-bar/tab-bar.template.d.ts.map +1 -1
- package/dist/components/navigation/tab-bar/tab-bar.template.js +4 -1
- package/dist/components/navigation/tab-bar/tab-bar.template.js.map +1 -1
- package/dist/components/{prism-python-QiimuE8j.js → prism-python-9EoInm_N.js} +1 -1
- package/dist/components/{prism-rust-D4vfxUpk.js → prism-rust-Chzr6sBk.js} +1 -1
- package/dist/components/{prism-typescript-Dy2F4cF2.js → prism-typescript-DPJmu--x.js} +1 -1
- package/dist/components/status-and-feedback/inline-dialog/inline-dialog.styles.js +2 -2
- package/dist/css/rich-text.css +6 -1
- package/dist/css/settings.css +139 -35
- package/dist/utilities/page-section-mixin.d.ts +1 -0
- package/dist/utilities/page-section-mixin.d.ts.map +1 -1
- package/dist/utilities/page-section-mixin.js +9 -0
- package/dist/utilities/page-section-mixin.js.map +1 -1
- package/package.json +1 -1
|
@@ -9,7 +9,9 @@ export const splitButtonStyles = css `
|
|
|
9
9
|
--_corner-radius: var(--semantics-controls-md-corner-radius);
|
|
10
10
|
--_background-color: var(--semantics-buttons-neutral-tinted-background-color);
|
|
11
11
|
--_divider-color: var(--semantics-buttons-neutral-tinted-divider-color);
|
|
12
|
+
--_highlight-border-color: var(--semantics-buttons-neutral-tinted-highlight-border-color);
|
|
12
13
|
--_divider-length: var(--semantics-buttons-md-divider-length);
|
|
14
|
+
--_width: auto;
|
|
13
15
|
|
|
14
16
|
${inheritedTextReset}
|
|
15
17
|
display: inline-flex;
|
|
@@ -17,14 +19,19 @@ export const splitButtonStyles = css `
|
|
|
17
19
|
-webkit-tap-highlight-color: transparent;
|
|
18
20
|
}
|
|
19
21
|
|
|
22
|
+
:host([size="xs"]) {
|
|
23
|
+
--_corner-radius: var(--semantics-controls-xs-corner-radius);
|
|
24
|
+
--_divider-length: var(--semantics-buttons-xs-divider-length);
|
|
25
|
+
}
|
|
26
|
+
|
|
20
27
|
:host([size="sm"]) {
|
|
21
28
|
--_corner-radius: var(--semantics-controls-sm-corner-radius);
|
|
22
29
|
--_divider-length: var(--semantics-buttons-sm-divider-length);
|
|
23
30
|
}
|
|
24
31
|
|
|
25
|
-
:host([size="
|
|
26
|
-
--_corner-radius: var(--semantics-controls-
|
|
27
|
-
--_divider-length: var(--semantics-buttons-
|
|
32
|
+
:host([size="lg"]) {
|
|
33
|
+
--_corner-radius: var(--semantics-controls-lg-corner-radius);
|
|
34
|
+
--_divider-length: var(--semantics-buttons-lg-divider-length);
|
|
28
35
|
}
|
|
29
36
|
|
|
30
37
|
/* ## Accent Filled (Primary) */
|
|
@@ -33,6 +40,18 @@ export const splitButtonStyles = css `
|
|
|
33
40
|
:host([variant="primary"]) {
|
|
34
41
|
--_background-color: var(--semantics-buttons-accent-filled-background-color);
|
|
35
42
|
--_divider-color: var(--semantics-buttons-accent-filled-divider-color);
|
|
43
|
+
--_highlight-border-color: var(--semantics-buttons-accent-filled-highlight-border-color);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
:host([variant="neutral-base"]) {
|
|
47
|
+
--_background-color: var(--semantics-buttons-neutral-base-background-color);
|
|
48
|
+
--_divider-color: var(--semantics-buttons-neutral-base-divider-color);
|
|
49
|
+
--_highlight-border-color: var(--semantics-buttons-neutral-base-highlight-border-color);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
:host([width="full"]) {
|
|
53
|
+
display: block;
|
|
54
|
+
width: 100%;
|
|
36
55
|
}
|
|
37
56
|
|
|
38
57
|
:host([hidden]) {
|
|
@@ -54,12 +73,24 @@ export const splitButtonStyles = css `
|
|
|
54
73
|
|
|
55
74
|
.split-button {
|
|
56
75
|
display: inline-flex;
|
|
76
|
+
position: relative;
|
|
77
|
+
width: var(--_width);
|
|
78
|
+
min-width: fit-content;
|
|
57
79
|
border-radius: var(--_corner-radius);
|
|
58
80
|
background-color: var(--_background-color);
|
|
59
81
|
flex-direction: row;
|
|
60
82
|
align-items: center;
|
|
61
83
|
}
|
|
62
84
|
|
|
85
|
+
.split-button::after {
|
|
86
|
+
content: '';
|
|
87
|
+
position: absolute;
|
|
88
|
+
inset: 0;
|
|
89
|
+
border-radius: inherit;
|
|
90
|
+
box-shadow: inset 0 0 0 var(--primitives-border-width-thin) var(--_highlight-border-color);
|
|
91
|
+
pointer-events: none;
|
|
92
|
+
}
|
|
93
|
+
|
|
63
94
|
|
|
64
95
|
/* # Elements */
|
|
65
96
|
|
|
@@ -70,6 +101,11 @@ export const splitButtonStyles = css `
|
|
|
70
101
|
flex-shrink: 0;
|
|
71
102
|
}
|
|
72
103
|
|
|
104
|
+
.split-button__popup-button {
|
|
105
|
+
display: flex;
|
|
106
|
+
flex-shrink: 0;
|
|
107
|
+
}
|
|
108
|
+
|
|
73
109
|
nldd-button:focus-within,
|
|
74
110
|
nldd-icon-button:focus-within {
|
|
75
111
|
position: relative;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"split-button.styles.js","sourceRoot":"","sources":["../../../../src/components/actions/split-button/split-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"split-button.styles.js","sourceRoot":"","sources":["../../../../src/components/actions/split-button/split-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;IAahC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkGrB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"split-button.template.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/split-button/split-button.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD,wBAAgB,QAAQ,CAAC,IAAI,EAAE,eAAe,
|
|
1
|
+
{"version":3,"file":"split-button.template.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/split-button/split-button.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD,wBAAgB,QAAQ,CAAC,IAAI,EAAE,eAAe,wCAiC7C"}
|
|
@@ -7,6 +7,9 @@ export function template() {
|
|
|
7
7
|
size=${this.size}
|
|
8
8
|
text=${this.text}
|
|
9
9
|
start-icon=${this.icon || nothing}
|
|
10
|
+
horizontal-alignment="left"
|
|
11
|
+
width="full"
|
|
12
|
+
no-highlight-border
|
|
10
13
|
?disabled=${this.disabled}
|
|
11
14
|
@click=${this._handleActionClick}
|
|
12
15
|
></nldd-button>
|
|
@@ -18,6 +21,8 @@ export function template() {
|
|
|
18
21
|
icon="chevron-down-small"
|
|
19
22
|
text=${this._t('components.split-button.menu-action')}
|
|
20
23
|
tooltip-timing="never"
|
|
24
|
+
no-highlight-border
|
|
25
|
+
hide-lg-text
|
|
21
26
|
?disabled=${this.disabled}
|
|
22
27
|
?expanded=${this._menuIsOpen}
|
|
23
28
|
popup-type="menu"
|
|
@@ -25,7 +30,7 @@ export function template() {
|
|
|
25
30
|
></nldd-icon-button>
|
|
26
31
|
</div>
|
|
27
32
|
</div>
|
|
28
|
-
<
|
|
33
|
+
<slot @slotchange=${this._handleSlotChange}></slot>
|
|
29
34
|
`;
|
|
30
35
|
}
|
|
31
36
|
//# sourceMappingURL=split-button.template.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"split-button.template.js","sourceRoot":"","sources":["../../../../src/components/actions/split-button/split-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGpC,MAAM,UAAU,QAAQ;IACvB,OAAO,IAAI,CAAA;;;cAGE,IAAI,CAAC,OAAO;WACf,IAAI,CAAC,IAAI;WACT,IAAI,CAAC,IAAI;iBACH,IAAI,CAAC,IAAI,IAAI,OAAO
|
|
1
|
+
{"version":3,"file":"split-button.template.js","sourceRoot":"","sources":["../../../../src/components/actions/split-button/split-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGpC,MAAM,UAAU,QAAQ;IACvB,OAAO,IAAI,CAAA;;;cAGE,IAAI,CAAC,OAAO;WACf,IAAI,CAAC,IAAI;WACT,IAAI,CAAC,IAAI;iBACH,IAAI,CAAC,IAAI,IAAI,OAAO;;;;gBAIrB,IAAI,CAAC,QAAQ;aAChB,IAAI,CAAC,kBAAkB;;;;;eAKrB,IAAI,CAAC,OAAO;YACf,IAAI,CAAC,IAAI;;YAET,IAAI,CAAC,EAAE,CAAC,qCAAqC,CAAC;;;;iBAIzC,IAAI,CAAC,QAAQ;iBACb,IAAI,CAAC,WAAW;;cAEnB,IAAI,CAAC,gBAAgB;;;;sBAIb,IAAI,CAAC,iBAAiB;EAC1C,CAAC;AACH,CAAC"}
|
|
@@ -2,29 +2,76 @@
|
|
|
2
2
|
* Nederlandse Digitale Dienst Toolbar Component (Lit + TypeScript)
|
|
3
3
|
*
|
|
4
4
|
* @element nldd-toolbar
|
|
5
|
-
* @attr {string} size - Toolbar size, propagated to all child controls: 'sm' | 'md' (default: 'md')
|
|
5
|
+
* @attr {string} size - Toolbar size, propagated to all child controls: 'sm' | 'md' | 'lg' (default: 'md'). At 'lg' the overflow button (and lg-capable children like nldd-icon-button) stack their label below the icon.
|
|
6
6
|
* @attr {boolean} show-item-labels - When true, shows a text label below each toolbar item and the overflow button
|
|
7
7
|
* @attr {string} label - Accessible label for the toolbar. Only needed when multiple toolbars appear on the same page
|
|
8
8
|
*
|
|
9
9
|
* @slot start - nldd-toolbar-item and nldd-toolbar-title elements placed at the start
|
|
10
10
|
* @slot center - nldd-toolbar-item and nldd-toolbar-title elements placed at the center
|
|
11
11
|
* @slot end - nldd-toolbar-item and nldd-toolbar-title elements placed at the end
|
|
12
|
-
* @slot overflow - nldd-menu-item and nldd-menu-
|
|
12
|
+
* @slot overflow - nldd-menu-item, nldd-menu-divider and nldd-menu-group elements always shown in the overflow menu
|
|
13
|
+
*
|
|
14
|
+
* ---
|
|
15
|
+
*
|
|
16
|
+
* @element nldd-toolbar-item
|
|
17
|
+
* @attr {string} width - Fluid width: a percentage (e.g. '40%') or any CSS length (e.g. '240px'). Setting it (or min-width or max-width) makes the item fluid so it grows to fill the available space.
|
|
18
|
+
* @attr {string} min-width - Minimum (fluid) width as a CSS length (e.g. '240px'). Setting it also makes the item fluid.
|
|
19
|
+
* @attr {string} max-width - Maximum (fluid) width as a CSS length (e.g. '480px'). Setting it also makes the item fluid.
|
|
20
|
+
* @attr {string} label - Text label shown below the item when the toolbar has show-item-labels.
|
|
21
|
+
* @attr {number} priority - Overflow order: items with a lower priority move into the overflow menu first (default 0). Items sharing a priority overflow together, regardless of position.
|
|
22
|
+
* @attr {boolean} fluid - Set by nldd-toolbar, not a consumer attribute: marks an item that grows or shrinks to fill space. Toggled synchronously during measurement, so it can appear or disappear between layout frames — do not style against it. It is not reflected as a JS property — read it with hasAttribute('fluid').
|
|
23
|
+
* @attr {boolean} solo-fluid - Set by nldd-toolbar, not a consumer attribute: the sole fluid item, allowed to shrink below its content. Same synchronous-toggle and property-read caveats as fluid.
|
|
24
|
+
* @attr {boolean} hidden - Set by nldd-toolbar, not a consumer attribute, when the item moves into the overflow menu. Same synchronous-toggle caveat.
|
|
25
|
+
*
|
|
26
|
+
* @slot - The control shown in the toolbar (e.g. nldd-icon-button)
|
|
27
|
+
* @slot overflow - nldd-menu-item / nldd-menu-divider / nldd-menu-group children, shown in the overflow menu when this item overflows
|
|
28
|
+
*
|
|
29
|
+
* ---
|
|
30
|
+
*
|
|
31
|
+
* @element nldd-toolbar-title
|
|
32
|
+
* @attr {string} text - Title text.
|
|
33
|
+
* @attr {string} supporting-text - Secondary supporting text shown below the title.
|
|
34
|
+
* @attr {string} align - Text alignment: 'left' | 'center' (default: 'left').
|
|
35
|
+
* @attr {string} width - Preferred (fluid) width as a CSS length or percentage; the title grows toward it and shrinks to min-width.
|
|
36
|
+
* @attr {string} min-width - Minimum width as a CSS length (e.g. '200px', default '200px').
|
|
37
|
+
* @attr {string} max-width - Maximum width as a CSS length (e.g. '480px').
|
|
13
38
|
*/
|
|
14
39
|
import { LitElement } from 'lit';
|
|
40
|
+
import { type ToolbarChild } from './toolbar.template.js';
|
|
15
41
|
import type { NLDDToolbarTranslations } from './toolbar.i18n.js';
|
|
16
|
-
type Size = 'sm' | 'md';
|
|
42
|
+
type Size = 'sm' | 'md' | 'lg';
|
|
43
|
+
type TitleAlign = 'left' | 'center';
|
|
44
|
+
export declare class NLDDToolbarItem extends LitElement {
|
|
45
|
+
static styles: import("lit").CSSResult;
|
|
46
|
+
width: string;
|
|
47
|
+
minWidth: string;
|
|
48
|
+
maxWidth: string;
|
|
49
|
+
label: string;
|
|
50
|
+
priority: number;
|
|
51
|
+
/** Set by nldd-toolbar; not part of the public API. @internal */
|
|
52
|
+
size: Size;
|
|
53
|
+
/** Set by nldd-toolbar; not part of the public API. @internal */
|
|
54
|
+
showItemLabels: boolean;
|
|
55
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
56
|
+
}
|
|
57
|
+
export declare class NLDDToolbarTitle extends LitElement {
|
|
58
|
+
static styles: import("lit").CSSResult;
|
|
59
|
+
text: string;
|
|
60
|
+
supportingText: string;
|
|
61
|
+
align: TitleAlign;
|
|
62
|
+
width: string;
|
|
63
|
+
minWidth: string;
|
|
64
|
+
maxWidth: string;
|
|
65
|
+
/** Set by nldd-toolbar; not part of the public API. @internal */
|
|
66
|
+
size: Size;
|
|
67
|
+
willUpdate(changedProperties: Map<string, unknown>): void;
|
|
68
|
+
private _reflectSizeVar;
|
|
69
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
70
|
+
}
|
|
17
71
|
export declare class NLDDToolbar extends LitElement {
|
|
18
72
|
static styles: import("lit").CSSResult;
|
|
19
|
-
/** Controls the size of toolbar items. Propagated automatically to all child controls. */
|
|
20
73
|
size: Size;
|
|
21
|
-
/** When true, shows a text label below each toolbar item and the overflow button. */
|
|
22
74
|
showItemLabels: boolean;
|
|
23
|
-
/**
|
|
24
|
-
* Accessible label for the toolbar, exposed as `aria-label` on the `role="toolbar"` container.
|
|
25
|
-
* Only needed when multiple toolbars appear on the same page so screen readers can distinguish them.
|
|
26
|
-
* @example `<nldd-toolbar label="Formatting">`
|
|
27
|
-
*/
|
|
28
75
|
label: string;
|
|
29
76
|
translations: Partial<NLDDToolbarTranslations>;
|
|
30
77
|
_t(key: keyof NLDDToolbarTranslations): string;
|
|
@@ -60,25 +107,55 @@ export declare class NLDDToolbar extends LitElement {
|
|
|
60
107
|
* Consumers should avoid adding extra listeners directly on overflow `nldd-menu-item` elements.
|
|
61
108
|
*/
|
|
62
109
|
private _syncMenuItems;
|
|
63
|
-
|
|
110
|
+
/**
|
|
111
|
+
* Syncs declarative state onto the slotted item and title hosts: size,
|
|
112
|
+
* show-item-labels, the base fluid flag and the fluid width custom
|
|
113
|
+
* properties. The parent owns layout decisions; each host owns its own box
|
|
114
|
+
* and rendering. Attributes are set directly (not via reactive properties)
|
|
115
|
+
* so the host box reflows synchronously before the next measurement.
|
|
116
|
+
*/
|
|
117
|
+
private _syncHosts;
|
|
64
118
|
private _getPrioritizedItems;
|
|
119
|
+
private _allHostChildren;
|
|
120
|
+
private _hostFor;
|
|
65
121
|
private _measureItemWidths;
|
|
66
122
|
private _computeAreaWidth;
|
|
67
123
|
private _computeSpacerZeros;
|
|
68
124
|
private _updateAreaVars;
|
|
69
125
|
private _measureAndUpdate;
|
|
70
126
|
private _measureOverflow;
|
|
127
|
+
/**
|
|
128
|
+
* Promotes a lone remaining fluid item — or a lone title when no items are
|
|
129
|
+
* visible — to the solo-fluid state so it grows to fill the row. In
|
|
130
|
+
* center-only mode the center-fill wrapper already grows the items, so item
|
|
131
|
+
* promotion is skipped there (matching the previous template behaviour).
|
|
132
|
+
*/
|
|
133
|
+
private _promoteSoloFluid;
|
|
71
134
|
private _buildChildrenForSlot;
|
|
72
135
|
private _buildPinnedOverflowItems;
|
|
73
|
-
private _restoreSlots;
|
|
74
136
|
private _buildChildren;
|
|
75
137
|
render(): import("lit-html").TemplateResult<1>;
|
|
76
138
|
}
|
|
139
|
+
/** A toolbar child narrowed to an item; the overflow grouping operates on these. */
|
|
140
|
+
type OverflowItem = Extract<ToolbarChild, {
|
|
141
|
+
type: 'item';
|
|
142
|
+
}>;
|
|
143
|
+
/** Items bucketed into overflow groups (each inner array overflows together). */
|
|
144
|
+
type OverflowGroups = OverflowItem[][];
|
|
145
|
+
/**
|
|
146
|
+
* Groups prioritized items for overflow. Items with an explicit priority that
|
|
147
|
+
* share a value form one group and overflow together regardless of their
|
|
148
|
+
* position; items without a priority attribute each form their own group
|
|
149
|
+
* (they overflow individually).
|
|
150
|
+
*
|
|
151
|
+
* @internal Exported for unit tests only; not part of the public API.
|
|
152
|
+
*/
|
|
153
|
+
export declare function groupForOverflow(items: OverflowItem[]): OverflowGroups;
|
|
77
154
|
declare global {
|
|
78
155
|
interface HTMLElementTagNameMap {
|
|
79
156
|
'nldd-toolbar': NLDDToolbar;
|
|
80
|
-
'nldd-toolbar-item':
|
|
81
|
-
'nldd-toolbar-title':
|
|
157
|
+
'nldd-toolbar-item': NLDDToolbarItem;
|
|
158
|
+
'nldd-toolbar-title': NLDDToolbarTitle;
|
|
82
159
|
}
|
|
83
160
|
}
|
|
84
161
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/toolbar/toolbar.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/toolbar/toolbar.ts"],"names":[],"mappings":"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"}
|