@aquera/nile-elements 1.8.2 → 1.8.3
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 +3 -0
- package/dist/index.js +76 -32
- package/dist/nile-detail/nile-detail.cjs.js +1 -1
- package/dist/nile-detail/nile-detail.cjs.js.map +1 -1
- package/dist/nile-detail/nile-detail.css.cjs.js +1 -1
- package/dist/nile-detail/nile-detail.css.cjs.js.map +1 -1
- package/dist/nile-detail/nile-detail.css.esm.js +37 -1
- package/dist/nile-detail/nile-detail.esm.js +17 -9
- package/dist/nile-detail/nile-detail.utils.cjs.js +1 -1
- package/dist/nile-detail/nile-detail.utils.cjs.js.map +1 -1
- package/dist/nile-detail/nile-detail.utils.esm.js +1 -1
- package/dist/src/nile-detail/nile-detail.css.js +37 -1
- package/dist/src/nile-detail/nile-detail.css.js.map +1 -1
- package/dist/src/nile-detail/nile-detail.d.ts +15 -0
- package/dist/src/nile-detail/nile-detail.js +85 -4
- package/dist/src/nile-detail/nile-detail.js.map +1 -1
- package/dist/src/nile-detail/nile-detail.utils.d.ts +1 -0
- package/dist/src/nile-detail/nile-detail.utils.js +34 -4
- package/dist/src/nile-detail/nile-detail.utils.js.map +1 -1
- package/dist/src/version.js +1 -1
- package/dist/src/version.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-detail/nile-detail.css.ts +37 -1
- package/src/nile-detail/nile-detail.ts +87 -3
- package/src/nile-detail/nile-detail.utils.ts +34 -4
- package/vscode-html-custom-data.json +10 -1
|
@@ -153,6 +153,41 @@ export const styles = css `
|
|
|
153
153
|
padding: 0;
|
|
154
154
|
}
|
|
155
155
|
|
|
156
|
+
/* ── Preview state ──────────────────────────────────────────────────────── */
|
|
157
|
+
|
|
158
|
+
.detail__body--preview {
|
|
159
|
+
position: relative;
|
|
160
|
+
cursor: pointer;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.detail__body--preview::after {
|
|
164
|
+
content: '';
|
|
165
|
+
position: absolute;
|
|
166
|
+
left: 0;
|
|
167
|
+
right: 0;
|
|
168
|
+
bottom: 0;
|
|
169
|
+
height: var(--nile-detail-preview-fade-height, 40px);
|
|
170
|
+
background: linear-gradient(
|
|
171
|
+
to bottom,
|
|
172
|
+
transparent,
|
|
173
|
+
var(--nile-colors-white-base, var(--ng-colors-bg-primary))
|
|
174
|
+
);
|
|
175
|
+
pointer-events: none;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.detail__body--preview:focus {
|
|
179
|
+
outline: none;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.detail__body--preview:focus-visible {
|
|
183
|
+
outline: solid 3px var(--nile-colors-blue-500, var(--ng-colors-fg-brand-primary-600));
|
|
184
|
+
outline-offset: -3px;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.detail--disabled .detail__body--preview {
|
|
188
|
+
cursor: not-allowed;
|
|
189
|
+
}
|
|
190
|
+
|
|
156
191
|
/* ── Selection variant ──────────────────────────────────────────────────── */
|
|
157
192
|
|
|
158
193
|
.detail__selection-label {
|
|
@@ -409,7 +444,8 @@ export const styles = css `
|
|
|
409
444
|
var(--nile-spacing-3xl, var(--ng-spacing-3xl));
|
|
410
445
|
}
|
|
411
446
|
|
|
412
|
-
.detail--light.detail--open .detail__header
|
|
447
|
+
.detail--light.detail--open .detail__header,
|
|
448
|
+
.detail--light.detail--preview .detail__header {
|
|
413
449
|
border-bottom: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
|
|
414
450
|
}
|
|
415
451
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-detail.css.js","sourceRoot":"","sources":["../../../src/nile-detail/nile-detail.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkaxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n box-sizing: border-box;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none;\n }\n\n :host {\n display: block;\n width: 100%;\n }\n\n .detail {\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n border-radius: var(--nile-radius-md, var(--ng-radius-xl));\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-xs));\n overflow: hidden;\n width: 100%;\n line-height: var(--nile-line-height-inherit, var(--ng-line-height-text-sm));\n font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n }\n\n .detail--disabled {\n opacity: var(--nile-opacity-50, var(--ng-opacity-50));\n }\n\n .detail__header {\n display: flex;\n gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n align-items: center;\n border-radius: inherit;\n padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary));\n font-size: var(--nile-type-scale-4, var(--ng-spacing-xl));\n font-weight: var(--nile-font-weight-semibold, var(--ng-font-weight-semibold));\n color: var(--nile-colors-neutral-900, var(--ng-colors-text-primary));\n user-select: none;\n cursor: pointer;\n list-style: none;\n }\n\n .detail__header::-webkit-details-marker {\n display: none;\n }\n\n .detail__header::marker {\n content: '';\n }\n\n .detail__header--icon-left {\n flex-direction: row-reverse;\n }\n\n .detail__header:focus {\n outline: none;\n }\n\n .detail__header:focus-visible {\n outline: solid 3px var(--nile-colors-blue-500, var(--ng-colors-fg-brand-primary-600));\n outline-offset: calc(1px + 1px);\n }\n\n .detail--disabled .detail__header {\n cursor: not-allowed;\n }\n\n .detail--disabled .detail__header:focus-visible {\n outline: none;\n box-shadow: none;\n }\n\n .detail__label {\n width: 100%;\n display: flex;\n flex-direction: column;\n }\n\n .detail__header-actions {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n }\n\n .detail__prefix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n }\n\n .detail__suffix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n }\n\n .detail__heading-text {\n font-weight: var(--nile-font-weight-semibold, var(--ng-font-weight-semibold));\n font-family: var(--nile-font-family-medium, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-4, var(--ng-spacing-xl));\n }\n\n .detail__description {\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary));\n margin-top: 2px;\n }\n\n .detail__summary-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n transition: 250ms transform ease;\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary));\n transform: rotate(90deg);\n }\n\n .detail--open .detail__summary-icon {\n transform: rotate(-90deg);\n }\n\n .detail__body {\n overflow: hidden;\n }\n\n .detail__body[hidden] {\n display: none;\n }\n\n .detail__content {\n display: block;\n padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .detail__content--empty {\n display: none;\n padding: 0;\n }\n\n /* ── Selection variant ──────────────────────────────────────────────────── */\n\n .detail__selection-label {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n flex: 1;\n min-width: 0;\n }\n\n .detail__select-all {\n flex: 0 0 auto;\n }\n\n .detail__selection-title {\n display: flex;\n flex-direction: column;\n line-height: 1.3;\n min-width: 0;\n }\n\n .detail__selection-count {\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary));\n margin-top: 2px;\n }\n\n .detail__selection-content {\n padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .detail__selection-toolbar {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n margin-bottom: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n .detail__selection-search {\n flex: 1;\n min-width: 0;\n }\n\n .detail__selection-search-slot {\n display: flex;\n flex: 1;\n min-width: 0;\n }\n\n .detail__selection-search-slot::slotted(*) {\n flex: 1;\n min-width: 0;\n }\n\n .detail__selected-toggle {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n }\n\n .detail__selection-actions {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n flex: 0 0 auto;\n }\n\n .detail__selection-grid {\n display: grid;\n grid-auto-flow: column;\n gap: 8px 24px;\n overflow-x: auto;\n overflow-y: hidden;\n padding: 4px 4px 8px;\n scroll-snap-type: x proximity;\n }\n\n .detail__selection-grid--virtual {\n display: block;\n position: relative;\n width: 100%;\n contain: layout paint;\n }\n\n .detail__selection-grid--virtual.detail__selection-grid--vertical {\n overflow-x: hidden;\n overflow-y: auto;\n scroll-snap-type: y proximity;\n }\n\n .detail__selection-grid--virtual.detail__selection-grid--vertical::-webkit-scrollbar {\n width: 8px;\n height: 0;\n }\n\n .detail__selection-grid--virtual.detail__selection-grid--both {\n overflow: auto;\n scroll-snap-type: none;\n }\n\n .detail__selection-grid--virtual.detail__selection-grid--both::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n }\n\n .detail__selection-grid--virtual .detail__selection-track {\n position: relative;\n }\n\n .detail__selection-tooltip--virtual {\n box-sizing: border-box;\n padding-right: 24px;\n }\n\n .detail__selection-grid > nile-checkbox,\n .detail__selection-grid > .detail__selection-tooltip {\n scroll-snap-align: start;\n min-width: 0;\n display: block;\n max-width: 100%;\n overflow: visible;\n padding-left: 4px;\n }\n\n .detail__selection-checkbox {\n display: block;\n width: 100%;\n min-width: 0;\n }\n\n .detail__selection-checkbox::part(base) {\n display: flex;\n width: 100%;\n min-width: 0;\n align-items: center;\n }\n\n .detail__selection-checkbox::part(label) {\n flex: 1 1 auto;\n min-width: 0;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .detail__selection-checkbox--disabled {\n opacity: 0.5;\n pointer-events: none;\n }\n\n .detail__selection-text {\n display: inline-flex;\n flex-direction: column;\n min-width: 0;\n flex: 1 1 auto;\n line-height: 1.25;\n }\n\n .detail__selection-item-label {\n display: block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .detail__selection-desc {\n display: block;\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary));\n margin-top: 2px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .detail__selection-prefix,\n .detail__selection-suffix {\n display: inline-flex;\n align-items: center;\n flex: 0 0 auto;\n margin: 0 6px;\n color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary));\n }\n\n .detail__selection-prefix { margin-left: 0; }\n .detail__selection-suffix { margin-right: 0; }\n\n .detail__selection-placeholder {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 4px 8px;\n box-sizing: border-box;\n opacity: 0.6;\n }\n\n .detail__selection-placeholder-bar {\n width: 16px;\n height: 16px;\n border-radius: 4px;\n background: linear-gradient(\n 90deg,\n rgba(0,0,0,0.06) 0%,\n rgba(0,0,0,0.12) 50%,\n rgba(0,0,0,0.06) 100%\n );\n background-size: 200% 100%;\n animation: nile-detail-shimmer 1.4s linear infinite;\n flex: 0 0 auto;\n }\n\n .detail__selection-placeholder-label {\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary));\n background: linear-gradient(\n 90deg,\n rgba(0,0,0,0.06) 0%,\n rgba(0,0,0,0.12) 50%,\n rgba(0,0,0,0.06) 100%\n );\n background-size: 200% 100%;\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n animation: nile-detail-shimmer 1.4s linear infinite;\n }\n\n @keyframes nile-detail-shimmer {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n }\n\n .detail__selection-grid::-webkit-scrollbar {\n height: 8px;\n }\n\n .detail__selection-grid::-webkit-scrollbar-thumb {\n background: rgba(0, 0, 0, 0.2);\n border-radius: 4px;\n }\n\n /* ── Light variant ──────────────────────────────────────────────────────── */\n\n .detail--light .detail__header {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n padding: var(--nile-spacing-xl, var(--ng-spacing-xl))\n var(--nile-spacing-3xl, var(--ng-spacing-3xl));\n }\n\n .detail--light.detail--open .detail__header {\n border-bottom: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n }\n\n .detail--light .detail__content,\n .detail--light .detail__selection-content {\n padding: var(--nile-spacing-3xl, var(--ng-spacing-3xl));\n }\n`;\n\nexport default [styles];\n"]}
|
|
1
|
+
{"version":3,"file":"nile-detail.css.js","sourceRoot":"","sources":["../../../src/nile-detail/nile-detail.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAscxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n box-sizing: border-box;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none;\n }\n\n :host {\n display: block;\n width: 100%;\n }\n\n .detail {\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n border-radius: var(--nile-radius-md, var(--ng-radius-xl));\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-xs));\n overflow: hidden;\n width: 100%;\n line-height: var(--nile-line-height-inherit, var(--ng-line-height-text-sm));\n font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n }\n\n .detail--disabled {\n opacity: var(--nile-opacity-50, var(--ng-opacity-50));\n }\n\n .detail__header {\n display: flex;\n gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n align-items: center;\n border-radius: inherit;\n padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary));\n font-size: var(--nile-type-scale-4, var(--ng-spacing-xl));\n font-weight: var(--nile-font-weight-semibold, var(--ng-font-weight-semibold));\n color: var(--nile-colors-neutral-900, var(--ng-colors-text-primary));\n user-select: none;\n cursor: pointer;\n list-style: none;\n }\n\n .detail__header::-webkit-details-marker {\n display: none;\n }\n\n .detail__header::marker {\n content: '';\n }\n\n .detail__header--icon-left {\n flex-direction: row-reverse;\n }\n\n .detail__header:focus {\n outline: none;\n }\n\n .detail__header:focus-visible {\n outline: solid 3px var(--nile-colors-blue-500, var(--ng-colors-fg-brand-primary-600));\n outline-offset: calc(1px + 1px);\n }\n\n .detail--disabled .detail__header {\n cursor: not-allowed;\n }\n\n .detail--disabled .detail__header:focus-visible {\n outline: none;\n box-shadow: none;\n }\n\n .detail__label {\n width: 100%;\n display: flex;\n flex-direction: column;\n }\n\n .detail__header-actions {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n }\n\n .detail__prefix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n }\n\n .detail__suffix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n }\n\n .detail__heading-text {\n font-weight: var(--nile-font-weight-semibold, var(--ng-font-weight-semibold));\n font-family: var(--nile-font-family-medium, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-4, var(--ng-spacing-xl));\n }\n\n .detail__description {\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary));\n margin-top: 2px;\n }\n\n .detail__summary-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n transition: 250ms transform ease;\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary));\n transform: rotate(90deg);\n }\n\n .detail--open .detail__summary-icon {\n transform: rotate(-90deg);\n }\n\n .detail__body {\n overflow: hidden;\n }\n\n .detail__body[hidden] {\n display: none;\n }\n\n .detail__content {\n display: block;\n padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .detail__content--empty {\n display: none;\n padding: 0;\n }\n\n /* ── Preview state ──────────────────────────────────────────────────────── */\n\n .detail__body--preview {\n position: relative;\n cursor: pointer;\n }\n\n .detail__body--preview::after {\n content: '';\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n height: var(--nile-detail-preview-fade-height, 40px);\n background: linear-gradient(\n to bottom,\n transparent,\n var(--nile-colors-white-base, var(--ng-colors-bg-primary))\n );\n pointer-events: none;\n }\n\n .detail__body--preview:focus {\n outline: none;\n }\n\n .detail__body--preview:focus-visible {\n outline: solid 3px var(--nile-colors-blue-500, var(--ng-colors-fg-brand-primary-600));\n outline-offset: -3px;\n }\n\n .detail--disabled .detail__body--preview {\n cursor: not-allowed;\n }\n\n /* ── Selection variant ──────────────────────────────────────────────────── */\n\n .detail__selection-label {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n flex: 1;\n min-width: 0;\n }\n\n .detail__select-all {\n flex: 0 0 auto;\n }\n\n .detail__selection-title {\n display: flex;\n flex-direction: column;\n line-height: 1.3;\n min-width: 0;\n }\n\n .detail__selection-count {\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary));\n margin-top: 2px;\n }\n\n .detail__selection-content {\n padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n }\n\n .detail__selection-toolbar {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n margin-bottom: var(--nile-spacing-lg, var(--ng-spacing-lg));\n }\n\n .detail__selection-search {\n flex: 1;\n min-width: 0;\n }\n\n .detail__selection-search-slot {\n display: flex;\n flex: 1;\n min-width: 0;\n }\n\n .detail__selection-search-slot::slotted(*) {\n flex: 1;\n min-width: 0;\n }\n\n .detail__selected-toggle {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n }\n\n .detail__selection-actions {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n flex: 0 0 auto;\n }\n\n .detail__selection-grid {\n display: grid;\n grid-auto-flow: column;\n gap: 8px 24px;\n overflow-x: auto;\n overflow-y: hidden;\n padding: 4px 4px 8px;\n scroll-snap-type: x proximity;\n }\n\n .detail__selection-grid--virtual {\n display: block;\n position: relative;\n width: 100%;\n contain: layout paint;\n }\n\n .detail__selection-grid--virtual.detail__selection-grid--vertical {\n overflow-x: hidden;\n overflow-y: auto;\n scroll-snap-type: y proximity;\n }\n\n .detail__selection-grid--virtual.detail__selection-grid--vertical::-webkit-scrollbar {\n width: 8px;\n height: 0;\n }\n\n .detail__selection-grid--virtual.detail__selection-grid--both {\n overflow: auto;\n scroll-snap-type: none;\n }\n\n .detail__selection-grid--virtual.detail__selection-grid--both::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n }\n\n .detail__selection-grid--virtual .detail__selection-track {\n position: relative;\n }\n\n .detail__selection-tooltip--virtual {\n box-sizing: border-box;\n padding-right: 24px;\n }\n\n .detail__selection-grid > nile-checkbox,\n .detail__selection-grid > .detail__selection-tooltip {\n scroll-snap-align: start;\n min-width: 0;\n display: block;\n max-width: 100%;\n overflow: visible;\n padding-left: 4px;\n }\n\n .detail__selection-checkbox {\n display: block;\n width: 100%;\n min-width: 0;\n }\n\n .detail__selection-checkbox::part(base) {\n display: flex;\n width: 100%;\n min-width: 0;\n align-items: center;\n }\n\n .detail__selection-checkbox::part(label) {\n flex: 1 1 auto;\n min-width: 0;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .detail__selection-checkbox--disabled {\n opacity: 0.5;\n pointer-events: none;\n }\n\n .detail__selection-text {\n display: inline-flex;\n flex-direction: column;\n min-width: 0;\n flex: 1 1 auto;\n line-height: 1.25;\n }\n\n .detail__selection-item-label {\n display: block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .detail__selection-desc {\n display: block;\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary));\n margin-top: 2px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .detail__selection-prefix,\n .detail__selection-suffix {\n display: inline-flex;\n align-items: center;\n flex: 0 0 auto;\n margin: 0 6px;\n color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary));\n }\n\n .detail__selection-prefix { margin-left: 0; }\n .detail__selection-suffix { margin-right: 0; }\n\n .detail__selection-placeholder {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 4px 8px;\n box-sizing: border-box;\n opacity: 0.6;\n }\n\n .detail__selection-placeholder-bar {\n width: 16px;\n height: 16px;\n border-radius: 4px;\n background: linear-gradient(\n 90deg,\n rgba(0,0,0,0.06) 0%,\n rgba(0,0,0,0.12) 50%,\n rgba(0,0,0,0.06) 100%\n );\n background-size: 200% 100%;\n animation: nile-detail-shimmer 1.4s linear infinite;\n flex: 0 0 auto;\n }\n\n .detail__selection-placeholder-label {\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary));\n background: linear-gradient(\n 90deg,\n rgba(0,0,0,0.06) 0%,\n rgba(0,0,0,0.12) 50%,\n rgba(0,0,0,0.06) 100%\n );\n background-size: 200% 100%;\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n animation: nile-detail-shimmer 1.4s linear infinite;\n }\n\n @keyframes nile-detail-shimmer {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n }\n\n .detail__selection-grid::-webkit-scrollbar {\n height: 8px;\n }\n\n .detail__selection-grid::-webkit-scrollbar-thumb {\n background: rgba(0, 0, 0, 0.2);\n border-radius: 4px;\n }\n\n /* ── Light variant ──────────────────────────────────────────────────────── */\n\n .detail--light .detail__header {\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n padding: var(--nile-spacing-xl, var(--ng-spacing-xl))\n var(--nile-spacing-3xl, var(--ng-spacing-3xl));\n }\n\n .detail--light.detail--open .detail__header,\n .detail--light.detail--preview .detail__header {\n border-bottom: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n }\n\n .detail--light .detail__content,\n .detail--light .detail__selection-content {\n padding: var(--nile-spacing-3xl, var(--ng-spacing-3xl));\n }\n`;\n\nexport default [styles];\n"]}
|
|
@@ -68,6 +68,8 @@ export interface NileDetailSelectionConfig {
|
|
|
68
68
|
showAll?: string;
|
|
69
69
|
};
|
|
70
70
|
showSelectedToggle?: boolean;
|
|
71
|
+
preview?: boolean;
|
|
72
|
+
previewPercentage?: number;
|
|
71
73
|
open?: boolean;
|
|
72
74
|
disabled?: boolean;
|
|
73
75
|
}
|
|
@@ -81,6 +83,10 @@ export declare class NileDetail extends NileElement {
|
|
|
81
83
|
description: string;
|
|
82
84
|
expandIconPlacement: 'left' | 'right';
|
|
83
85
|
disabled: boolean;
|
|
86
|
+
/** When set, the closed state shows a preview of the body content instead of hiding it. */
|
|
87
|
+
preview: boolean;
|
|
88
|
+
/** Percentage (0–100) of the content height shown while previewing. */
|
|
89
|
+
previewPercentage: number;
|
|
84
90
|
variant: NileDetailVariant;
|
|
85
91
|
items: SelectionItem[];
|
|
86
92
|
selected: string[];
|
|
@@ -125,6 +131,10 @@ export declare class NileDetail extends NileElement {
|
|
|
125
131
|
private get _isSelectionVariant();
|
|
126
132
|
/** True for any variant that applies the light styling. */
|
|
127
133
|
private get _isLightVariant();
|
|
134
|
+
/** True when preview mode is on with a usable percentage. */
|
|
135
|
+
private get _previewEnabled();
|
|
136
|
+
/** True when the closed state should currently render the preview. */
|
|
137
|
+
private get _isPreviewActive();
|
|
128
138
|
private get _isInfiniteMode();
|
|
129
139
|
private _effectiveTotalCount;
|
|
130
140
|
private _getItemAt;
|
|
@@ -173,6 +183,11 @@ export declare class NileDetail extends NileElement {
|
|
|
173
183
|
private _handleSummaryClick;
|
|
174
184
|
private _handleSummaryKeyDown;
|
|
175
185
|
handleOpenChange(): Promise<void>;
|
|
186
|
+
handlePreviewChange(): void;
|
|
187
|
+
/** Measures the content and clamps the body to the configured preview height. */
|
|
188
|
+
private _applyPreviewHeight;
|
|
189
|
+
private _handlePreviewClick;
|
|
190
|
+
private _handlePreviewKeyDown;
|
|
176
191
|
show(): Promise<unknown>;
|
|
177
192
|
hide(): Promise<unknown>;
|
|
178
193
|
private get _summaryLabel();
|
|
@@ -6,7 +6,7 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
|
|
|
6
6
|
import { styles } from './nile-detail.css';
|
|
7
7
|
import NileElement from '../internal/nile-element';
|
|
8
8
|
import { watch } from '../internal/watch';
|
|
9
|
-
import { animateShow, animateHide, showDetail, hideDetail, handleSummaryClick, handleSummaryKeyDown, } from './nile-detail.utils';
|
|
9
|
+
import { animateShow, animateHide, showDetail, hideDetail, handleSummaryClick, handleSummaryKeyDown, getPreviewHeight, } from './nile-detail.utils';
|
|
10
10
|
import '../nile-checkbox/index';
|
|
11
11
|
import '../nile-input/index';
|
|
12
12
|
import '../nile-link/index';
|
|
@@ -22,6 +22,10 @@ let NileDetail = class NileDetail extends NileElement {
|
|
|
22
22
|
this.description = '';
|
|
23
23
|
this.expandIconPlacement = 'right';
|
|
24
24
|
this.disabled = false;
|
|
25
|
+
/** When set, the closed state shows a preview of the body content instead of hiding it. */
|
|
26
|
+
this.preview = false;
|
|
27
|
+
/** Percentage (0–100) of the content height shown while previewing. */
|
|
28
|
+
this.previewPercentage = 30;
|
|
25
29
|
this.variant = 'default';
|
|
26
30
|
this.items = [];
|
|
27
31
|
this.selected = [];
|
|
@@ -67,6 +71,14 @@ let NileDetail = class NileDetail extends NileElement {
|
|
|
67
71
|
get _isLightVariant() {
|
|
68
72
|
return this.variant === 'light' || this.variant === 'select-light';
|
|
69
73
|
}
|
|
74
|
+
/** True when preview mode is on with a usable percentage. */
|
|
75
|
+
get _previewEnabled() {
|
|
76
|
+
return this.preview && Math.min(100, Math.max(0, this.previewPercentage)) > 0;
|
|
77
|
+
}
|
|
78
|
+
/** True when the closed state should currently render the preview. */
|
|
79
|
+
get _isPreviewActive() {
|
|
80
|
+
return this._previewEnabled && !this.open;
|
|
81
|
+
}
|
|
70
82
|
get _isInfiniteMode() {
|
|
71
83
|
return (this._isSelectionVariant &&
|
|
72
84
|
typeof this.fetchPage === 'function' &&
|
|
@@ -153,9 +165,12 @@ let NileDetail = class NileDetail extends NileElement {
|
|
|
153
165
|
return Number.isFinite(parsed) && parsed > 0 ? parsed : 220;
|
|
154
166
|
}
|
|
155
167
|
firstUpdated() {
|
|
156
|
-
this._detailOpen = this.open;
|
|
157
|
-
this.body.hidden = !this.open;
|
|
168
|
+
this._detailOpen = this.open || this._isPreviewActive;
|
|
169
|
+
this.body.hidden = !this.open && !this._isPreviewActive;
|
|
158
170
|
this.body.style.height = this.open ? 'auto' : '0';
|
|
171
|
+
if (this._isPreviewActive) {
|
|
172
|
+
this._applyPreviewHeight();
|
|
173
|
+
}
|
|
159
174
|
this._syncSelectedFromProperty();
|
|
160
175
|
if (this._restoreDefaults === null) {
|
|
161
176
|
this._restoreDefaults = [...this._selectedSet];
|
|
@@ -400,6 +415,10 @@ let NileDetail = class NileDetail extends NileElement {
|
|
|
400
415
|
}
|
|
401
416
|
if (c.showSelectedToggle !== undefined)
|
|
402
417
|
this.showSelectedToggle = c.showSelectedToggle;
|
|
418
|
+
if (c.preview !== undefined)
|
|
419
|
+
this.preview = c.preview;
|
|
420
|
+
if (c.previewPercentage !== undefined)
|
|
421
|
+
this.previewPercentage = c.previewPercentage;
|
|
403
422
|
}
|
|
404
423
|
_syncSelectedFromProperty() {
|
|
405
424
|
this._selectedSet = new Set(this.selected || []);
|
|
@@ -582,6 +601,9 @@ let NileDetail = class NileDetail extends NileElement {
|
|
|
582
601
|
return !!(node.textContent && node.textContent.trim());
|
|
583
602
|
return false;
|
|
584
603
|
});
|
|
604
|
+
if (this._isPreviewActive) {
|
|
605
|
+
this._applyPreviewHeight();
|
|
606
|
+
}
|
|
585
607
|
}
|
|
586
608
|
_stopHeaderToggle(event) {
|
|
587
609
|
event.stopPropagation();
|
|
@@ -600,9 +622,47 @@ let NileDetail = class NileDetail extends NileElement {
|
|
|
600
622
|
}
|
|
601
623
|
else {
|
|
602
624
|
await animateHide(this);
|
|
625
|
+
// In preview mode the details element stays open so the preview remains visible.
|
|
626
|
+
this._detailOpen = this._previewEnabled;
|
|
627
|
+
}
|
|
628
|
+
}
|
|
629
|
+
handlePreviewChange() {
|
|
630
|
+
if (this.open) {
|
|
631
|
+
return;
|
|
632
|
+
}
|
|
633
|
+
if (this._previewEnabled) {
|
|
634
|
+
this._detailOpen = true;
|
|
635
|
+
this._applyPreviewHeight();
|
|
636
|
+
}
|
|
637
|
+
else {
|
|
638
|
+
this.body.hidden = true;
|
|
639
|
+
this.body.style.height = '0';
|
|
603
640
|
this._detailOpen = false;
|
|
604
641
|
}
|
|
605
642
|
}
|
|
643
|
+
/** Measures the content and clamps the body to the configured preview height. */
|
|
644
|
+
async _applyPreviewHeight() {
|
|
645
|
+
await this.updateComplete;
|
|
646
|
+
if (!this._isPreviewActive || !this.body) {
|
|
647
|
+
return;
|
|
648
|
+
}
|
|
649
|
+
this.body.hidden = false;
|
|
650
|
+
this.body.style.height = `${getPreviewHeight(this)}px`;
|
|
651
|
+
}
|
|
652
|
+
_handlePreviewClick() {
|
|
653
|
+
if (this._isPreviewActive && !this.disabled) {
|
|
654
|
+
showDetail(this);
|
|
655
|
+
}
|
|
656
|
+
}
|
|
657
|
+
_handlePreviewKeyDown(event) {
|
|
658
|
+
if (!this._isPreviewActive || this.disabled) {
|
|
659
|
+
return;
|
|
660
|
+
}
|
|
661
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
662
|
+
event.preventDefault();
|
|
663
|
+
showDetail(this);
|
|
664
|
+
}
|
|
665
|
+
}
|
|
606
666
|
async show() {
|
|
607
667
|
return showDetail(this);
|
|
608
668
|
}
|
|
@@ -847,6 +907,7 @@ let NileDetail = class NileDetail extends NileElement {
|
|
|
847
907
|
'detail--disabled': this.disabled,
|
|
848
908
|
'detail--selection': isSelection,
|
|
849
909
|
'detail--light': this._isLightVariant,
|
|
910
|
+
'detail--preview': this._isPreviewActive,
|
|
850
911
|
})}
|
|
851
912
|
>
|
|
852
913
|
<summary
|
|
@@ -892,7 +953,18 @@ let NileDetail = class NileDetail extends NileElement {
|
|
|
892
953
|
|
|
893
954
|
</summary>
|
|
894
955
|
|
|
895
|
-
<div
|
|
956
|
+
<div
|
|
957
|
+
part="content"
|
|
958
|
+
class=${classMap({
|
|
959
|
+
'detail__body': true,
|
|
960
|
+
'detail__body--preview': this._isPreviewActive,
|
|
961
|
+
})}
|
|
962
|
+
role=${this._isPreviewActive ? 'button' : nothing}
|
|
963
|
+
tabindex=${this._isPreviewActive && !this.disabled ? '0' : nothing}
|
|
964
|
+
aria-label=${this._isPreviewActive ? 'Expand to view full content' : nothing}
|
|
965
|
+
@click=${this._handlePreviewClick}
|
|
966
|
+
@keydown=${this._handlePreviewKeyDown}
|
|
967
|
+
>
|
|
896
968
|
${isSelection
|
|
897
969
|
? html `<div part="selection-content" class="detail__selection-content">${this._renderSelectionBody()}</div>`
|
|
898
970
|
: ''}
|
|
@@ -934,6 +1006,12 @@ __decorate([
|
|
|
934
1006
|
__decorate([
|
|
935
1007
|
property({ attribute: true, type: Boolean, reflect: true })
|
|
936
1008
|
], NileDetail.prototype, "disabled", void 0);
|
|
1009
|
+
__decorate([
|
|
1010
|
+
property({ attribute: true, type: Boolean, reflect: true })
|
|
1011
|
+
], NileDetail.prototype, "preview", void 0);
|
|
1012
|
+
__decorate([
|
|
1013
|
+
property({ attribute: 'preview-percentage', type: Number, reflect: true })
|
|
1014
|
+
], NileDetail.prototype, "previewPercentage", void 0);
|
|
937
1015
|
__decorate([
|
|
938
1016
|
property({ attribute: true, type: String, reflect: true })
|
|
939
1017
|
], NileDetail.prototype, "variant", void 0);
|
|
@@ -1042,6 +1120,9 @@ __decorate([
|
|
|
1042
1120
|
__decorate([
|
|
1043
1121
|
watch('open', { waitUntilFirstUpdate: true })
|
|
1044
1122
|
], NileDetail.prototype, "handleOpenChange", null);
|
|
1123
|
+
__decorate([
|
|
1124
|
+
watch(['preview', 'previewPercentage'], { waitUntilFirstUpdate: true })
|
|
1125
|
+
], NileDetail.prototype, "handlePreviewChange", null);
|
|
1045
1126
|
NileDetail = __decorate([
|
|
1046
1127
|
customElement('nile-detail')
|
|
1047
1128
|
], NileDetail);
|