@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

package/dist/collection/components/co-data-table/co-data-table.js

@@ -43,6 +43,10 @@ export class CoDataTable {
         this.resizingColumn = null;
         this.resizeStartX = 0;
         this.resizeStartWidth = 0;
+        // Swallows the click the browser synthesizes right after a resize drag ends.
+        // The resize handle lives inside the sortable <th>, so without this a resize
+        // would bubble to the header's onClick and trigger a sort (+ a full refetch).
+        this.suppressNextSort = false;
     }
     /* ─── WATCHERS ──────────────────────────────────────────── */
     parseColumns() {
@@ -84,14 +88,22 @@ export class CoDataTable {
     }
     /* ─── SORT HANDLERS ─────────────────────────────────────── */
     handleSort(field) {
+        // Ignore the click synthesized by a resize drag that ended on this <th>.
+        if (this.suppressNextSort) {
+            this.suppressNextSort = false;
+            return;
+        }
+        // Standalone 3-state cycle: asc → desc → unsorted ('').
+        // (Controlled consumers like suite-v2 ignore `order` and drive sortField/
+        // sortOrder via props, so their own policy wins regardless of this.)
         let order;
         if (this.sortField === field) {
-            order = this.sortOrder === 'asc' ? 'desc' : 'asc';
+            order = this.sortOrder === 'asc' ? 'desc' : this.sortOrder === 'desc' ? '' : 'asc';
         }
         else {
             order = 'asc';
         }
-        this.sortField = field;
+        this.sortField = order === '' ? '' : field;
         this.sortOrder = order;
         this.coSort.emit({ field, order });
     }
@@ -138,6 +150,9 @@ export class CoDataTable {
             if (this.resizingColumn) {
                 const width = this.columnWidths.get(this.resizingColumn) || 150;
                 this.coColumnResize.emit({ field: this.resizingColumn, width });
+                // The browser will synthesize a click on the <th> when the drag ends
+                // inside it — suppress the sort it would otherwise trigger.
+                this.suppressNextSort = true;
             }
             this.resizingColumn = null;
             document.removeEventListener('mousemove', onMouseMove);
@@ -229,6 +244,18 @@ export class CoDataTable {
     renderColgroup() {
         return (h("colgroup", null, this.selectable && h("col", { style: { width: '48px' } }), this.parsedColumns.map(col => (h("col", { style: { width: `${this.getColumnWidth(col)}px`, minWidth: `${col.minWidth || 80}px` } })))));
     }
+    renderSortIcon(col) {
+        if (!col.sortable)
+            return null;
+        const isActive = this.sortField === col.field && this.sortOrder !== '';
+        const iconName = !isActive
+            ? 'caret-up-down'
+            : (this.sortOrder === 'asc' ? 'caret-up' : 'caret-down');
+        return (h("span", { class: {
+                'co-data-table__sort-icon': true,
+                'co-data-table__sort-icon--active': isActive,
+            } }, h("co-icon", { name: iconName, size: 16, weight: isActive ? 'fill' : 'regular' })));
+    }
     renderHeader() {
         return (h("thead", { class: "co-data-table__head" }, h("tr", { class: "co-data-table__header-row" }, this.selectable && (h("th", { class: "co-data-table__th co-data-table__th--checkbox co-data-table__th--sticky", style: { left: '0px' } }, h("co-checkbox", { size: "small", checked: this.isAllSelected(), indeterminate: this.isSomeSelected(), onCoChange: () => this.handleSelectAll() }))), this.parsedColumns.map((col, i) => (h("th", { class: {
                 'co-data-table__th': true,
@@ -236,16 +263,15 @@ export class CoDataTable {
                 'co-data-table__th--sortable': !!col.sortable,
                 'co-data-table__th--sorted': this.sortField === col.field,
                 [`co-data-table__th--align-${col.align || 'left'}`]: true,
-            }, style: this.getColumnStyle(col), onClick: () => col.sortable && this.handleSort(col.field) }, h("span", { class: "co-data-table__th-content" }, h("span", { class: {
+            }, style: this.getColumnStyle(col), "aria-sort": col.sortable && this.sortField === col.field && this.sortOrder !== ''
+                ? (this.sortOrder === 'asc' ? 'ascending' : 'descending')
+                : undefined }, h("span", { class: "co-data-table__th-content" }, h("span", { class: {
                 'co-data-table__pin-icon': true,
                 'co-data-table__pin-icon--active': !!col.sticky,
-            }, title: col.sticky ? 'Unpin column' : 'Pin column', onClick: (e) => this.handleColumnPin(col.field, e) }, h("co-icon", { name: "push-pin", size: 14, weight: col.sticky ? 'fill' : 'regular' })), h("span", { class: "co-data-table__th-label" }, col.label), col.sortable && (h("span", { class: {
-                'co-data-table__sort-icon': true,
-                'co-data-table__sort-icon--active': this.sortField === col.field,
-            } }, h("co-icon", { name: "caret-up-down", size: 16, weight: this.sortField === col.field ? 'fill' : 'regular' })))), this.resizable && i < this.parsedColumns.length - 1 && (h("span", { class: {
+            }, title: col.sticky ? 'Unpin column' : 'Pin column', onClick: (e) => this.handleColumnPin(col.field, e) }, h("co-icon", { name: "push-pin", size: 14, weight: col.sticky ? 'fill' : 'regular' })), col.sortable ? (h("button", { type: "button", class: "co-data-table__sort-button", "aria-label": `Sort by ${col.label}`, onClick: () => this.handleSort(col.field) }, h("span", { class: "co-data-table__th-label" }, col.label), this.renderSortIcon(col))) : (h("span", { class: "co-data-table__th-label" }, col.label))), this.resizable && i < this.parsedColumns.length - 1 && (h("span", { class: {
                 'co-data-table__resize-handle': true,
                 'co-data-table__resize-handle--active': this.resizingColumn === col.field,
-            }, onMouseDown: (e) => this.handleResizeStart(col.field, e) }))))))));
+            }, onMouseDown: (e) => this.handleResizeStart(col.field, e), onClick: (e) => e.stopPropagation() }))))))));
     }
     renderBody() {
         if (this.loading) {
@@ -265,12 +291,12 @@ export class CoDataTable {
         return (h("div", { class: "co-data-table__empty", part: "empty" }, h("div", { class: "co-data-table__empty-icon" }, h("co-icon", { name: this.emptyIcon, size: 32, weight: "regular" })), this.emptyTitle && (h("h3", { class: "co-data-table__empty-title" }, this.emptyTitle)), this.emptyMessage && (h("p", { class: "co-data-table__empty-message" }, this.emptyMessage)), h("div", { class: "co-data-table__empty-action" }, h("slot", { name: "empty-action" }))));
     }
     render() {
-        return (h("div", { key: '98c9ac2234b00d8c69095f9d9bcd4633d79265a8', class: {
+        return (h("div", { key: 'ca97ff4e2b3fb28ff64e49654c35e3081e43b036', class: {
                 'co-data-table': true,
                 'co-data-table--resizing': this.resizingColumn !== null,
                 'co-data-table--loading': this.loading,
                 'co-data-table--empty': !this.loading && this.parsedRows.length === 0,
-            } }, h("div", { key: '0e40f9c3b536d58cabe9e61d2beb425337e3391a', class: "co-data-table__scroll" }, h("table", { key: '96ee1fce70ab168c2ba40b6e748c0c11cbcccd89', class: "co-data-table__table", style: { width: `${this.getTableWidth()}px`, minWidth: '100%' } }, this.renderColgroup(), this.renderHeader(), this.renderBody())), this.renderEmpty()));
+            } }, h("div", { key: '9ffdd459a8b46f4c019309412cf85fe7e12f803d', class: "co-data-table__scroll" }, h("table", { key: 'f621aaba41690f6fe6060b0641817908d5c3ae92', class: "co-data-table__table", style: { width: `${this.getTableWidth()}px`, minWidth: '100%' } }, this.renderColgroup(), this.renderHeader(), this.renderBody())), this.renderEmpty()));
     }
     static get is() { return "co-data-table"; }
     static get originalStyleUrls() {
@@ -576,8 +602,8 @@ export class CoDataTable {
                     "text": "Emitted when a column sort is requested"
                 },
                 "complexType": {
-                    "original": "{ field: string; order: 'asc' | 'desc' }",
-                    "resolved": "{ field: string; order: \"desc\" | \"asc\"; }",
+                    "original": "{ field: string; order: 'asc' | 'desc' | '' }",
+                    "resolved": "{ field: string; order: \"\" | \"desc\" | \"asc\"; }",
                     "references": {}
                 }
             }, {

package/dist/collection/components/co-data-table-pagination/co-data-table-pagination.js

@@ -84,17 +84,17 @@ export class CoDataTablePagination {
     }
     render() {
         const pages = this.getVisiblePages();
-        return (h("div", { key: '2de92b803c40dcb254fbcdd56406319af502cfa8', class: "co-pagination", part: "pagination" }, h("div", { key: 'db02175a70f85fbf79689fca100b3c261e9c37a3', class: "co-pagination__section" }, h("span", { key: '83ccd386d1d1385bd2106b4443fd572b1eda021c', class: "co-pagination__label" }, this.jumpToPageLabel), h("input", { key: 'b2f723e6fc0eeeaeb4f6db431cf68bb941eb7538', type: "text", class: "co-pagination__jump-input", value: this.jumpToValue || String(this.page), onInput: (e) => {
+        return (h("div", { key: 'ae314d39c78125c7a0b237d30b6d298c5c699a75', class: "co-pagination", part: "pagination" }, h("div", { key: 'eff8732e235bfcbb6578a144377736f6a5c05d91', class: "co-pagination__section" }, h("span", { key: 'e4a5b980aaae92eec46b5e090e7b87745938fe81', class: "co-pagination__label" }, this.jumpToPageLabel), h("input", { key: '012b0613c8cfce667687ca27ad434b6271845900', type: "text", class: "co-pagination__jump-input", value: this.jumpToValue || String(this.page), onInput: (e) => {
                 this.jumpToValue = e.target.value;
             }, onKeyDown: (e) => this.handleJumpToPage(e), onFocus: (e) => {
                 e.target.select();
-            }, part: "jump-input" })), h("div", { key: '977949923862d497b8de2d46dfda536d67b6f981', class: "co-pagination__section co-pagination__section--page-size" }, h("div", { key: 'c5f0467475206e731c6d429fb6cd80245b37ad74', class: "co-pagination__page-size-trigger", onClick: () => { this.showPageSizeDropdown = !this.showPageSizeDropdown; } }, h("span", { key: '08c37fe8cd7f9e9b13b3cfc4200096f51f19c916', class: "co-pagination__page-size-value" }, this.pageSize), h("span", { key: '117deb7ddce63482ff930341834ecbda51870c91', class: "co-pagination__label" }, this.perPageLabel), h("co-icon", { key: '2a9c4d04d50a60fa496429120d80e7f95c393164', name: "caret-down", size: 14 })), this.showPageSizeDropdown && (h("div", { key: '548972a8057b098129693caac38d964221662b64', class: "co-pagination__page-size-dropdown", part: "dropdown" }, this.parsedPageSizes.map(size => (h("button", { class: {
+            }, part: "jump-input" })), h("div", { key: '76016cea5933b9b057256e4c54717925b95396e4', class: "co-pagination__section co-pagination__section--page-size" }, h("div", { key: 'ec1ac8b20b71a01483ef6f33170ccea9dc60baf2', class: "co-pagination__page-size-trigger", onClick: () => { this.showPageSizeDropdown = !this.showPageSizeDropdown; } }, h("span", { key: '3db2891ead65d088b2a9a19868c00576fc3d212b', class: "co-pagination__page-size-value" }, this.pageSize), h("span", { key: '2be8c9861d4509df5b695b5c07e25cc346b77628', class: "co-pagination__label" }, this.perPageLabel), h("co-icon", { key: '91ba0332b4eb496b3de3fe271d78686aad429d71', name: "caret-down", size: 14 })), this.showPageSizeDropdown && (h("div", { key: '4a7f2a17c52d71762c3a9b15e8ed55aa78b894a8', class: "co-pagination__page-size-dropdown", part: "dropdown" }, this.parsedPageSizes.map(size => (h("button", { class: {
                 'co-pagination__page-size-option': true,
                 'co-pagination__page-size-option--active': size === this.pageSize,
-            }, onClick: () => this.changePageSize(size) }, size)))))), h("div", { key: '595f8ef3df42c7a38bd2f59c3402bc99a9b23727', class: "co-pagination__spacer" }), h("div", { key: 'b2ffe70a449adf2ce1c5376447dddbdb8ef0f5b3', class: "co-pagination__section" }, h("span", { key: 'd6c3808153534e9bd58e51492ea03c55b7315a05', class: "co-pagination__count" }, this.totalCount.toLocaleString(), " ", this.recordsLabel)), h("div", { key: 'ee2814865e862e9f99d829dcd7ec212774c8b5df', class: "co-pagination__section co-pagination__nav" }, h("button", { key: 'e991cf8e2a4907181e30dd7ce9f27bcc97325424', class: "co-pagination__nav-btn", disabled: this.page <= 1, onClick: () => this.goToPage(this.page - 1), part: "prev-btn" }, this.previousLabel), pages.map(p => p === '...' ? (h("span", { class: "co-pagination__ellipsis" }, "\u2026")) : (h("button", { class: {
+            }, onClick: () => this.changePageSize(size) }, size)))))), h("div", { key: 'e8e81ef1186485963908cd923fab0f5974e4cbf3', class: "co-pagination__spacer" }), h("div", { key: '04fd583b0fff46d13d8abe384cb7896d2c4b8799', class: "co-pagination__section" }, h("span", { key: '69bf9e0a8fd0e9f3b5fe06c9951300323fce42bf', class: "co-pagination__count" }, this.totalCount.toLocaleString(), " ", this.recordsLabel)), h("div", { key: 'a90b8a8b5cdd5cfc945fb0fa00d50b44b4ab88b7', class: "co-pagination__section co-pagination__nav" }, h("button", { key: '6b14f2a16c691a202bf81cc1fff8f505f5ce0f29', class: "co-pagination__nav-btn", disabled: this.page <= 1, onClick: () => this.goToPage(this.page - 1), part: "prev-btn" }, this.previousLabel), pages.map(p => p === '...' ? (h("span", { class: "co-pagination__ellipsis" }, "\u2026")) : (h("button", { class: {
                 'co-pagination__page-btn': true,
                 'co-pagination__page-btn--active': p === this.page,
-            }, onClick: () => this.goToPage(p) }, p))), h("button", { key: '8fe3515dccf9375904a5875f571948e1aacd86f7', class: "co-pagination__nav-btn", disabled: this.page >= this.totalPages, onClick: () => this.goToPage(this.page + 1), part: "next-btn" }, this.nextLabel))));
+            }, onClick: () => this.goToPage(p) }, p))), h("button", { key: '9b3cdab026b566275248734a8db218d70a81b082', class: "co-pagination__nav-btn", disabled: this.page >= this.totalPages, onClick: () => this.goToPage(this.page + 1), part: "next-btn" }, this.nextLabel))));
     }
     static get is() { return "co-data-table-pagination"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/co-date-field/co-date-field.css

@@ -0,0 +1,245 @@
+/* ============================================================
+   co-date-field — mirrors co-input's Text Field styling so date
+   fields are visually identical to the rest of the form controls.
+   ============================================================ */
+
+:host {
+  display: block;
+  font-family: var(--co-font-family-primary);
+  font-size: var(--co-font-size-14);
+  letter-spacing: var(--co-font-letter-spacing-body);
+  line-height: 1;
+}
+
+.co-date-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--co-spacing-sm2);
+}
+
+/* ---- Labels ---- */
+.co-date-field__labels {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--co-spacing-xs);
+  gap: var(--co-spacing-sm2);
+}
+
+.co-date-field__label {
+  color: var(--co-semantic-text-secondary);
+  font-size: var(--co-font-size-14);
+  font-weight: 400;
+  letter-spacing: var(--co-font-letter-spacing-body);
+  line-height: 1;
+  white-space: nowrap;
+  cursor: default;
+}
+
+/* ---- Field row + field ---- */
+.co-date-field__field-row {
+  display: flex;
+  align-items: stretch;
+}
+
+/* Size variants (mirror co-input/co-select: s 28 / sm 32 / md 40 / lg 48) */
+.co-date-field--s .co-date-field__field { min-height: 28px; padding: var(--co-spacing-xxs) var(--co-spacing-sm); }
+.co-date-field--sm .co-date-field__field { min-height: 32px; padding: var(--co-spacing-xs) var(--co-spacing-sm); }
+.co-date-field--lg .co-date-field__field { min-height: 48px; padding: var(--co-spacing-sm) var(--co-spacing-lg); }
+/* The inner input-wrapper's own min-height+padding (24px+4px) would otherwise
+   add ~4px and overshoot the field's min-height — flatten it for s/sm. */
+.co-date-field--s .co-date-field__input-wrapper,
+.co-date-field--sm .co-date-field__input-wrapper { min-height: 0; padding: 0; }
+
+.co-date-field__field {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-sm2);
+  padding: var(--co-spacing-sm2) var(--co-spacing-md);
+  background: color-mix(in srgb, var(--co-semantic-surface-secondary) 55%, transparent);
+  -webkit-backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
+  backdrop-filter: blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));
+  border: 1px solid var(--co-semantic-border-subtle);
+  border-radius: var(--co-border-radius-xs);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  min-height: 40px;
+  box-sizing: border-box;
+  overflow: hidden;
+  flex: 1;
+  min-width: 0;
+}
+
+.co-date-field__icon {
+  flex-shrink: 0;
+  color: var(--co-semantic-text-muted);
+  display: flex;
+  align-items: center;
+}
+
+.co-date-field__input-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  min-height: 24px;
+  padding: var(--co-spacing-xxs) 0;
+}
+
+.co-date-field__native {
+  width: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: 400;
+  letter-spacing: inherit;
+  line-height: 1;
+  color: var(--co-semantic-text-default);
+  padding: 0;
+  margin: 0;
+}
+
+.co-date-field__native::placeholder {
+  color: var(--co-semantic-text-muted);
+}
+
+/* ---- Clear button ---- */
+.co-date-field__clear {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--co-semantic-text-muted);
+  transition: color 0.15s ease;
+}
+
+.co-date-field__clear--hidden {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.co-date-field__clear:hover {
+  color: var(--co-semantic-text-default);
+}
+
+/* ---- Helper text ---- */
+.co-date-field__helper {
+  display: flex;
+  align-items: center;
+  gap: var(--co-spacing-xs);
+  padding: 0 var(--co-spacing-xs);
+}
+
+.co-date-field__helper-icon {
+  flex-shrink: 0;
+  color: var(--co-semantic-text-muted);
+  display: flex;
+  align-items: center;
+}
+
+.co-date-field__helper-text {
+  color: var(--co-semantic-text-muted);
+  font-size: var(--co-font-size-14);
+  font-weight: 400;
+  line-height: 1;
+  letter-spacing: var(--co-font-letter-spacing-body);
+}
+
+/* ============================================================
+   States
+   ============================================================ */
+.co-date-field--focused .co-date-field__field {
+  border-color: var(--co-semantic-border-focus);
+  box-shadow: 0 0 0 2px var(--co-semantic-border-focus-ring);
+}
+
+.co-date-field--disabled .co-date-field__labels .co-date-field__label {
+  color: var(--co-semantic-text-disabled);
+}
+
+.co-date-field--disabled .co-date-field__field {
+  background: var(--co-semantic-surface-disabled);
+  border-color: transparent;
+  cursor: not-allowed;
+}
+
+.co-date-field--disabled .co-date-field__native {
+  color: var(--co-semantic-text-disabled);
+  cursor: not-allowed;
+}
+
+.co-date-field--disabled .co-date-field__native::placeholder {
+  color: var(--co-semantic-text-disabled);
+}
+
+.co-date-field--disabled .co-date-field__icon {
+  color: var(--co-semantic-text-disabled);
+}
+
+/* ---- Invalid (mirrors co-input error) ---- */
+.co-date-field--invalid .co-date-field__field {
+  border-color: var(--co-semantic-status-error);
+}
+
+.co-date-field--invalid.co-date-field--focused .co-date-field__field {
+  border-color: var(--co-semantic-status-error);
+  box-shadow: 0 0 0 2px rgba(170, 46, 27, 0.12);
+}
+
+.co-date-field__helper--error .co-date-field__helper-icon,
+.co-date-field__helper--error .co-date-field__helper-text {
+  color: var(--co-semantic-status-error);
+}
+
+/* ── Horizontal layout: label left; control + helper stacked right ──
+   Set --co-field-label-width on a container to align labels across fields. */
+:host([layout='horizontal']) .co-date-field {
+  display: grid;
+  grid-template-columns: var(--co-field-label-width, max-content) 1fr;
+  align-items: start;
+  column-gap: var(--co-spacing-md);
+  row-gap: var(--co-spacing-sm2);
+}
+
+:host([layout='horizontal']) .co-date-field__labels {
+  grid-column: 1;
+  grid-row: 1;
+  padding-top: var(--co-spacing-sm2);
+  min-width: 0;
+}
+
+:host([layout='horizontal']) .co-date-field__label {
+  white-space: normal;
+}
+
+:host([layout='horizontal']) .co-date-field > :not(.co-date-field__labels) {
+  grid-column: 2;
+  min-width: 0;
+}
+
+.co-field-required {
+  margin-left: 2px;
+  color: var(--co-color-status-error);
+}
+
+.co-field-required__caption {
+  margin-left: 4px;
+  color: var(--co-semantic-text-muted);
+  font-size: var(--co-font-size-12);
+  font-weight: 400;
+}
+
+.co-field-required__caption::before {
+  content: var(--co-field-required-text, ' (required)');
+}
+
+@supports not (background: color-mix(in srgb, red, transparent)) {
+  .co-date-field__field { background: var(--co-semantic-surface-secondary); }
+}