@kubex/zinc 1.1.161 → 1.1.162

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@kubex/zinc",
-  "version": "1.1.161",
+  "version": "1.1.162",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -15,28 +15,6 @@
           "events": [],
           "js": { "properties": [], "events": [] }
         },
-        {
-          "name": "zn-action-bar",
-          "description": "Short summary of the component's intended use.\n\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [
-            { "name": "", "description": "The default slot." },
-            { "name": "example", "description": "An example slot." }
-          ],
-          "events": [
-            { "name": "zn-event-name", "description": "Emitted as an example." }
-          ],
-          "js": {
-            "properties": [],
-            "events": [
-              {
-                "name": "zn-event-name",
-                "description": "Emitted as an example."
-              }
-            ]
-          }
-        },
         {
           "name": "zn-alert",
           "description": "Short summary of the component's intended use.\n\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -105,6 +83,28 @@
             ]
           }
         },
+        {
+          "name": "zn-action-bar",
+          "description": "Short summary of the component's intended use.\n\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [
+            { "name": "", "description": "The default slot." },
+            { "name": "example", "description": "An example slot." }
+          ],
+          "events": [
+            { "name": "zn-event-name", "description": "Emitted as an example." }
+          ],
+          "js": {
+            "properties": [],
+            "events": [
+              {
+                "name": "zn-event-name",
+                "description": "Emitted as an example."
+              }
+            ]
+          }
+        },
         {
           "name": "zn-animated-button",
           "description": "\n\n---\n\n\n### **Methods:**\n - **purchase(): _void_** - Programmatically trigger the purchase flow\n- **setSuccess(): _void_** - Set the button to success state manually\n- **setFailure(message): _void_** - Set the button to failure state manually with optional error message\n- **reset(): _void_** - Reset the button to idle state",
@@ -1312,7 +1312,7 @@
         },
         {
           "name": "zn-checkbox",
-          "description": "Short summary of the component's intended use.\n\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the checkbox loses focus.\n- **zn-change** - Emitted when the checked state changes.\n- **zn-focus** - Emitted when the checkbox gains focus.\n- **zn-input** - Emitted when the checkbox receives input.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n\n### **Slots:**\n - _default_ - The checkbox's label.\n- **image** - Replaces the built-in image used by contained checkboxes.\n- **description** - A description of the checkbox's label. Serves as help text for a checkbox item. Alternatively, you can use the `description` attribute.\n- **selected-content** - Use to nest rich content (like an input) inside a selected checkbox item. Use only with the contained style.\n\n### **CSS Properties:**\n - **--zn-selection-card-image-width** - Width of the built-in card image. _(default: undefined)_\n- **--zn-selection-card-image-height** - Height of the built-in card image. _(default: undefined)_\n- **--zn-selection-card-min-height** - Minimum height of a contained checkbox with an image. _(default: undefined)_\n- **--zn-selection-card-content-min-width** - Width the card text keeps before it wraps below the image. _(default: undefined)_\n- **--zn-selection-card-title-font-size** - Font size of a selection card title. _(default: undefined)_\n- **--zn-selection-card-padding** - Equal inset around the contents of a selection card. _(default: undefined)_\n- **--zn-selection-card-gap** - Space between the image, title, and indicator gutter. _(default: undefined)_\n- **--zn-selection-card-control-offset** - Distance between a positioned control and the card edge. _(default: undefined)_\n- **--zn-selection-card-border-radius** - Corner radius of a contained container. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the checkbox's checked state.\n- **control--checked** - Matches the control part when the checkbox is checked.\n- **control--indeterminate** - Matches the control part when the checkbox is indeterminate.\n- **checked-icon** - The checked icon, an `<zn-icon>` element.\n- **unchecked-icon** - The unchecked icon, an `<zn-icon>` element.\n- **indeterminate-icon** - The indeterminate icon, an `<zn-icon>` element.\n- **image-container** - The wrapper around the built-in image or image slot.\n- **image** - The built-in image.\n- **card-title** - The title inside a selection card.\n- **label** - The container that wraps the checkbox's label.\n- **description** - The container that wraps the checkbox's description.\n- **selected-content** - The container that wraps optional content that appears when a checkbox is checked.",
+          "description": "Short summary of the component's intended use.\n\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the checkbox loses focus.\n- **zn-change** - Emitted when the checked state changes.\n- **zn-focus** - Emitted when the checkbox gains focus.\n- **zn-input** - Emitted when the checkbox receives input.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n\n### **Slots:**\n - _default_ - The checkbox's label.\n- **image** - Replaces the built-in image used by contained checkboxes.\n- **description** - A description of the checkbox's label. Serves as help text for a checkbox item. Alternatively, you can use the `description` attribute.\n- **selected-content** - Use to nest rich content (like an input) inside a selected checkbox item. Use only with the contained style.\n\n### **CSS Properties:**\n - **--zn-selection-card-image-width** - Width of the built-in card image. _(default: undefined)_\n- **--zn-selection-card-image-height** - Height of the built-in card image. _(default: undefined)_\n- **--zn-selection-card-min-height** - Minimum height of a contained checkbox with an image. _(default: undefined)_\n- **--zn-selection-card-content-min-width** - Width the card text keeps before it wraps below the image. _(default: undefined)_\n- **--zn-selection-card-title-font-size** - Font size of a selection card title. _(default: undefined)_\n- **--zn-selection-card-padding** - Equal inset around the contents of a selection card. _(default: undefined)_\n- **--zn-selection-card-gap** - Space between the image, title, and indicator gutter. _(default: undefined)_\n- **--zn-selection-card-control-offset** - Distance between a positioned control and the card edge. _(default: undefined)_\n- **--zn-selection-card-border-radius** - Corner radius of a contained container. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **control** - The square container that wraps the checkbox's checked state.\n- **control--checked** - Matches the control part when the checkbox is checked.\n- **control--indeterminate** - Matches the control part when the checkbox is indeterminate.\n- **checked-icon** - The checked icon, an `<zn-icon>` element.\n- **unchecked-icon** - The unchecked icon, an `<zn-icon>` element.\n- **indeterminate-icon** - The indeterminate icon, an `<svg>` element.\n- **image-container** - The wrapper around the built-in image or image slot.\n- **image** - The built-in image.\n- **card-title** - The title inside a selection card.\n- **label** - The container that wraps the checkbox's label.\n- **description** - The container that wraps the checkbox's description.\n- **selected-content** - The container that wraps optional content that appears when a checkbox is checked.",
           "doc-url": "",
           "attributes": [
             { "name": "title", "value": { "type": "string", "default": "''" } },
@@ -2692,7 +2692,7 @@
         },
         {
           "name": "zn-data-table",
-          "description": "Short summary of the component's intended use.\n\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n- **search** - Slot for search component, in the header's right-hand group.\n- **sort** - Slot for sort component, in the header's right-hand group.\n- **filter** - Slot for filter component, in the header's right-hand group.\n- **filter-top** - Slot for a top-level filter component, rendered above the table's panel.\n- **delete-action** - Slot for delete action button, shown beside the caption once rows are selected.\n- **modify-action** - Slot for modify action button, shown beside the caption once rows are selected.\n- **create-action** - Slot for create action button, at the end of the header's right-hand group.\n- **inputs** - Slot for additional input controls.\n- **empty-state** - Slot for custom empty state.\n- **no-results** - Slot for a custom no-results state, shown when a search on a no-initial-load table returns no rows.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+          "description": "Short summary of the component's intended use.\n\n---\n\n\n### **Methods:**\n - **selectAll()** - Selects every row on the page, or clears the selection when every row is already selected.\n\n### **Slots:**\n - _default_ - The default slot.\n- **search** - Slot for search component, in the header's right-hand group.\n- **sort** - Slot for sort component, in the header's right-hand group.\n- **filter** - Slot for filter component, in the header's right-hand group.\n- **filter-top** - Slot for a top-level filter component, rendered above the table's panel.\n- **delete-action** - Slot for delete action button, shown in the header once rows are selected.\n- **modify-action** - Slot for modify action button, shown in the header once rows are selected.\n- **actions** - `zn-button` or `zn-confirm` elements listed in a header menu, enabled once rows are selected.\n- **create-action** - Slot for create action button, at the end of the header's right-hand group.\n- **inputs** - Slot for additional input controls.\n- **empty-state** - Slot for custom empty state.\n- **no-results** - Slot for a custom no-results state, shown when a search on a no-initial-load table returns no rows.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
           "doc-url": "",
           "attributes": [
             { "name": "data-uri", "value": { "type": "string" } },
@@ -2761,7 +2761,6 @@
               "name": "empty-state-icon",
               "value": { "type": "string", "default": "\"data_alert\"" }
             },
-            { "name": "hide-checkboxes", "value": { "type": "boolean" } },
             { "name": "filters", "value": { "type": "[]", "default": "[]" } },
             {
               "name": "method",
@@ -2814,11 +2813,15 @@
             },
             {
               "name": "delete-action",
-              "description": "Slot for delete action button, shown beside the caption once rows are selected."
+              "description": "Slot for delete action button, shown in the header once rows are selected."
             },
             {
               "name": "modify-action",
-              "description": "Slot for modify action button, shown beside the caption once rows are selected."
+              "description": "Slot for modify action button, shown in the header once rows are selected."
+            },
+            {
+              "name": "actions",
+              "description": "`zn-button` or `zn-confirm` elements listed in a header menu, enabled once rows are selected."
             },
             {
               "name": "create-action",
@@ -2865,7 +2868,6 @@
               { "name": "caption", "type": "string" },
               { "name": "emptyStateCaption", "type": "string" },
               { "name": "emptyStateIcon", "type": "string" },
-              { "name": "hideCheckboxes", "type": "boolean" },
               { "name": "filters", "type": "[]" },
               { "name": "method", "type": "'GET' | 'POST'" },
               { "name": "noInitialLoad", "type": "boolean" },
@@ -2882,7 +2884,6 @@
               { "name": "groupBy", "type": "string" },
               { "name": "groups", "type": "string" },
               { "name": "itemsPerPage", "type": "number" },
-              { "name": "selectAllButton", "type": "ZnButton" },
               { "name": "requestParams", "type": "Record<string, any>" },
               { "name": "filterClearListener" },
               { "name": "filterChangeListener" },

package/dist/zn.d.ts

@@ -977,6 +977,7 @@ declare module "components/tooltip/tooltip.component" {
         handleDisabledChange(): void;
         show(): Promise<void>;
         hide(): void;
+        private handlePopupClick;
         render(): import("lit-html").TemplateResult<1>;
     }
 }
@@ -4080,6 +4081,7 @@ declare module "components/data-table/data-table.component" {
     export enum ActionSlots {
         delete = "delete-action",
         modify = "modify-action",
+        actions = "actions",
         create = "create-action",
         filter = "filter",
         filter_top = "filter-top",
@@ -4140,8 +4142,9 @@ declare module "components/data-table/data-table.component" {
      * @slot sort - Slot for sort component, in the header's right-hand group.
      * @slot filter - Slot for filter component, in the header's right-hand group.
      * @slot filter-top - Slot for a top-level filter component, rendered above the table's panel.
-     * @slot delete-action - Slot for delete action button, shown beside the caption once rows are selected.
-     * @slot modify-action - Slot for modify action button, shown beside the caption once rows are selected.
+     * @slot delete-action - Slot for delete action button, shown in the header once rows are selected.
+     * @slot modify-action - Slot for modify action button, shown in the header once rows are selected.
+     * @slot actions - `zn-button` or `zn-confirm` elements listed in a header menu, enabled once rows are selected.
      * @slot create-action - Slot for create action button, at the end of the header's right-hand group.
      * @slot inputs - Slot for additional input controls.
      * @slot empty-state - Slot for custom empty state.
@@ -4191,7 +4194,6 @@ declare module "components/data-table/data-table.component" {
         caption: string;
         emptyStateCaption: string;
         emptyStateIcon: string;
-        hideCheckboxes: boolean;
         filters: [];
         method: 'GET' | 'POST';
         noInitialLoad: boolean;
@@ -4209,7 +4211,6 @@ declare module "components/data-table/data-table.component" {
         groupBy: string;
         groups: string;
         itemsPerPage: number;
-        selectAllButton: ZnButton;
         private _initialLoad;
         private _hasLoadedData;
         private _lastLoadHadRows;
@@ -4286,6 +4287,7 @@ declare module "components/data-table/data-table.component" {
         private renderErrorAlert;
         humanize(str: string): string;
         renderTableData(groups: RowGroup[], error?: ResponseError): TemplateResult<1>;
+        private tableContent;
         getTableHeader(): TemplateResult<1>;
         private getHeaderControls;
         private hasRows;
@@ -4303,30 +4305,42 @@ declare module "components/data-table/data-table.component" {
         private getPageRange;
         getPagination(): TemplateResult<1> | null;
         getActions(): TemplateResult<1>[];
+        private getActionsMenu;
+        private actionTrigger;
+        private actionLabel;
+        private runAction;
         goToPage(page: number): void;
         goToFirstPage(): void;
         goToPreviousPage(): void;
         goToNextPage(): void;
         goToLastPage(): void;
         updateRowsPerPage(event: Event): void;
-        selectAll(event: Event): void;
+        /** Selects every row on the page, or clears the selection when every row is already selected. */
+        selectAll(): void;
         selectRow(e: Event): void;
-        clearSelectedRows(event: Event): void;
+        private toggleRowSelection;
+        clearSelectedRows(): void;
         updateSort(key: string): () => void;
         renderCell(data: Cell, row?: Row, header?: HeaderConfig): TemplateResult | ZincElement;
         private updateActionKeys;
         private getTableSortIcon;
         private renderCellHeader;
+        private sortState;
+        private handleSortKeyDown;
         private renderCellBody;
         private hasHiddenColumns;
         private renderExpanderCell;
         private renderDetailsRow;
         private toggleRowExpansion;
         private isRowSelected;
+        private pruneSelectedRows;
+        private isSelectable;
+        private renderSelectAllCheckbox;
+        private renderRowCheckbox;
+        private handleCheckboxCellClick;
         private getRows;
         private getSelectedKeys;
         private updateKeys;
-        private updateSelectAll;
         private updateModifyKeys;
         private updateDeleteKeys;
         private extractComparable;
@@ -7309,7 +7323,7 @@ declare module "components/checkbox/checkbox.component" {
      * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.
      * @csspart checked-icon - The checked icon, an `<zn-icon>` element.
      * @csspart unchecked-icon - The unchecked icon, an `<zn-icon>` element.
-     * @csspart indeterminate-icon - The indeterminate icon, an `<zn-icon>` element.
+     * @csspart indeterminate-icon - The indeterminate icon, an `<svg>` element.
      * @csspart image-container - The wrapper around the built-in image or image slot.
      * @csspart image - The built-in image.
      * @csspart card-title - The title inside a selection card.