@fieldia/grid 0.12.0 → 0.13.1

package/src/lib/styles.mjs

@@ -6,6 +6,13 @@ export const GRID_CSS = /* css */ `
 .fd-grid-lines .ag-grid-scrolling-rows.ag-layout-auto-height { min-height: 40px; }
 /* AG Grid keeps room for a sideways scroll bar it has marked invisible; give the room back until it is needed. */
 .fd-grid-lines .ag-body-horizontal-scroll.ag-invisible { display: none; }
+/* When the lines scroll sideways the bar sits under them, never over the last line (AG Grid lays it over, as if no
+   browser drew a bar there: Chrome on Windows and Linux does, and cut a note's last words in half). */
+/* In the flow, AG Grid's own offset (above a totals row, for a bar it lays over) would lift it over the totals: dropped. */
+.fd-grid-lines .ag-body-horizontal-scroll { position: relative; inset-block: auto !important; }
+/* A line's handle and buttons are held at its ends without a rule beside them: the lines read as one table. */
+/* AG Grid's own rule outranks any selector of ours, so this one insists. */
+.fd-grid-lines :is(.ag-grid-container-wrapper, .ag-pinned-left-header, .ag-pinned-right-header, .ag-cell-last-left-pinned, .ag-cell-first-right-pinned) { border-inline-color: transparent !important; }
 /* Lists that open from a cell leave the table: the body keeps the rounded corners instead of the frame. */
 .fd-grid-lines .ag-root-wrapper { overflow: visible; }
 .fd-grid-lines .ag-root-wrapper-body { overflow: hidden; border-radius: inherit; }
@@ -19,7 +26,7 @@ export const GRID_CSS = /* css */ `
 .fd-grid-lines .fd-tone-muted { --fd-line-tone: var(--fd-muted); --fd-line-tone-soft: color-mix(in srgb, var(--fd-muted) 16%, transparent); }
 .fd-grid-lines :is(.ag-row[class*="fd-tone-"] .ag-cell, .ag-cell[class*="fd-tone-"]) { color: var(--fd-line-tone); }
 .fd-grid-lines :is(.fd-line-bold .ag-cell, .ag-cell.fd-cell-bold) { font-weight: 600; }
-.fd-grid-badge { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12px; line-height: 20px; font-weight: 500; color: var(--fd-muted); background: color-mix(in srgb, var(--fd-muted) 14%, transparent); }
+.fd-grid-badge { display: inline-block; max-width: 100%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; padding: 1px 9px; border-radius: 999px; font-size: 12px; line-height: 20px; font-weight: 500; color: var(--fd-muted); background: color-mix(in srgb, var(--fd-muted) 14%, transparent); }
 .fd-grid-badge[data-tone] { color: var(--fd-line-tone); background: var(--fd-line-tone-soft); }
 .fd-grid-badge[data-tone="info"] { --fd-line-tone: var(--fd-info); --fd-line-tone-soft: var(--fd-info-soft); }
 .fd-grid-badge[data-tone="success"] { --fd-line-tone: var(--fd-success); --fd-line-tone-soft: var(--fd-success-soft); }
@@ -88,16 +95,26 @@ button.fd-line-card-title { color: var(--fd-accent); }
 .ag-cell-wrapper > .fd-grid-editor { flex: 1 1 auto; min-width: 0; align-self: stretch; }
 .fd-grid-editor > * { flex: 1; min-width: 0; }
 .fd-grid-editor .fd-input { border: 0; box-shadow: none; background: transparent; padding-inline: 0; min-height: 0; }
+/* An input keeps a line's height of its own, not the cell's tall line, so it sits inside its row. */
+.fd-grid-editor input.fd-input { line-height: 20px; }
+/* A value too long for the room inside the padding takes the padding too. */
+.fd-grid-editor.fd-grid-editor-tight { padding-inline: 4px; }
+/* A date over its cell: as wide as its day and time need, never cut. */
+.ag-popup-editor .fd-grid-editor:is([data-type="date"], [data-type="datetime"]) { width: max-content; }
+.ag-popup-editor .fd-grid-editor:is([data-type="date"], [data-type="datetime"]) .fd-input { width: auto; }
+/* A paragraph over its cell: several lines, scrolling once it is long. */
+.ag-popup-editor .fd-grid-editor[data-type="text"] { height: auto; align-items: stretch; padding-block: 6px; }
+.ag-popup-editor .fd-grid-editor[data-type="text"] textarea { min-height: 84px; max-height: 240px; overflow-y: auto; resize: vertical; line-height: 20px; padding-block: 2px; }
 .fd-grid-editor .fd-combo-input { padding-inline-end: 24px; }
 /* The cell's frame already marks the edit; outrank the underline skin's focus line. */
 .fd-form .fd-grid-lines .fd-grid-editor .fd-input:focus { box-shadow: none; }
+/* A wrapping header breaks between its words, never inside one (its column has room for the longest). */
+.fd-grid-lines .ag-header-cell-text { word-break: normal; overflow-wrap: normal; }
 /* A popup editor (links) covers its cell exactly and looks like one being edited in place. */
 .ag-popup-editor .fd-grid-editor {
   background: var(--ag-background-color); border: var(--ag-cell-editing-border); border-radius: var(--ag-border-radius);
   box-shadow: var(--ag-cell-editing-shadow);
 }
-/* Its list is as wide as its choices need, never narrower than the cell. */
-.fd-grid-lines > .fd-grid-floating-list { position: absolute; inset-inline-end: auto; width: max-content; max-width: min(420px, 90vw); z-index: 30; }
 .fd-grid-editor .fd-listbox { inset-inline-end: auto; width: max-content; min-width: 100%; max-width: min(420px, 90vw); }
 /* A section heads the lines below it; a note is a remark between them, every line of it shown. */
 .fd-grid-lines .fd-grid-section { background: var(--fd-page); }
@@ -110,6 +127,10 @@ button.fd-line-card-title { color: var(--fd-accent); }
 .fd-grid-editor[data-type="integer"] input, .fd-grid-editor[data-type="float"] input, .fd-grid-editor[data-type="monetary"] input { text-align: end; }
 /* An analytic distribution's lines, opened from its cell: room round them, each share clear of its % sign. */
 .ag-popup-editor .fd-grid-editor[data-type="json"] { height: auto; align-items: stretch; padding: 8px 12px; }
+.ag-popup-editor .fd-grid-editor[data-type="many2many"] { height: auto; padding-block: 6px; }
+/* A tags box in a whole line open at once: its tags and its search on their own lines, the line grown to hold them. */
+.fd-grid-editor.fd-grid-editor-grows { height: auto; min-height: 100%; align-items: flex-start; padding-block: 4px; }
+.fd-grid-editor .fd-chip { white-space: nowrap; }
 .fd-grid-editor .fd-distribution .fd-share { padding-inline-end: calc(var(--fd-pad-x, 10px) + 2ch); }
 .fd-grid-distribution { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 `;

package/src/lib/styles.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.mjs","sourceRoot":"","sources":["../../../../../libs/grid/src/lib/styles.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,MAAM,CAAC,MAAM,QAAQ,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiHjC,CAAC;AAEF,MAAM,QAAQ,GAAG,qBAAqB,CAAC;AAEvC,MAAM,UAAU,iBAAiB,CAAC,QAAkB;IAClD,IAAI,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC;QAAE,OAAO;IAC9C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,GAAG,QAAQ,CAAC;IACpB,KAAK,CAAC,WAAW,GAAG,QAAQ,CAAC;IAC7B,CAAC,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AAC5D,CAAC"}
+{"version":3,"file":"styles.mjs","sourceRoot":"","sources":["../../../../../libs/grid/src/lib/styles.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,MAAM,CAAC,MAAM,QAAQ,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsIjC,CAAC;AAEF,MAAM,QAAQ,GAAG,qBAAqB,CAAC;AAEvC,MAAM,UAAU,iBAAiB,CAAC,QAAkB;IAClD,IAAI,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC;QAAE,OAAO;IAC9C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,GAAG,QAAQ,CAAC;IACpB,KAAK,CAAC,WAAW,GAAG,QAAQ,CAAC;IAC7B,CAAC,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AAC5D,CAAC"}