@kubex/zinc 1.0.7 → 1.0.8

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.0.7",
+  "version": "1.0.8",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -132,7 +132,7 @@
         },
         {
           "name": "zn-button",
-          "description": "Buttons represent actions that are available to the user.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the button loses focus.\n- **zn-focus** - Emitted when the button gains focus.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Slots:**\n - _default_ - The button's label.\n- **prefix** - A presentational prefix icon or similar element.\n- **suffix** - A presentational suffix icon or similar element.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **prefix** - The container that wraps the prefix.\n- **label** - The button's label.\n- **suffix** - The container that wraps the suffix.\n- **caret** - The button's caret icon, an `<zn-icon>` element.\n- **spinner** - The spinner that shows when the button is in the loading state.",
+          "description": "Buttons represent actions that are available to the user.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the button loses focus.\n- **zn-focus** - Emitted when the button gains focus.\n- **zn-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Slots:**\n - _default_ - The button's label.\n- **prefix** - A presentational prefix icon or similar element.\n- **suffix** - A presentational suffix icon or similar element.\n- **cancel** - Slot for custom cancel button/content when autoClick is active.\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **prefix** - The container that wraps the prefix.\n- **label** - The button's label.\n- **suffix** - The container that wraps the suffix.\n- **caret** - The button's caret icon, an `<zn-icon>` element.\n- **spinner** - The spinner that shows when the button is in the loading state.",
           "doc-url": "",
           "attributes": [
             {
@@ -231,7 +231,30 @@
               "name": "rel",
               "value": { "type": "string", "default": "'noreferrer noopener'" }
             },
-            { "name": "tooltip", "value": { "type": "string" } }
+            { "name": "tooltip", "value": { "type": "string" } },
+            {
+              "name": "auto-click",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "auto-click-delay",
+              "value": { "type": "number", "default": "2000" }
+            },
+            {
+              "name": "loading-text",
+              "value": { "type": "string", "default": "'Loading...'" }
+            },
+            {
+              "name": "loading-text-position",
+              "value": {
+                "type": "'left' | 'right' | 'center' | string",
+                "default": "'center'"
+              }
+            },
+            {
+              "name": "loading",
+              "value": { "type": "boolean", "default": "false" }
+            }
           ],
           "slots": [
             { "name": "", "description": "The button's label." },
@@ -242,6 +265,10 @@
             {
               "name": "suffix",
               "description": "A presentational suffix icon or similar element."
+            },
+            {
+              "name": "cancel",
+              "description": "Slot for custom cancel button/content when autoClick is active."
             }
           ],
           "events": [
@@ -261,6 +288,7 @@
           "js": {
             "properties": [
               { "name": "button", "type": "HTMLButtonElement" },
+              { "name": "countdownContainer", "type": "HTMLElement[]" },
               {
                 "name": "color",
                 "type": "'default' | 'secondary' | 'error' | 'info' | 'success' | 'warning' |\n    'transparent' | 'star'"
@@ -307,6 +335,14 @@
               { "name": "dataTarget", "type": "'modal' | 'slide' | string" },
               { "name": "rel", "type": "string" },
               { "name": "tooltip", "type": "string" },
+              { "name": "autoClick", "type": "boolean" },
+              { "name": "autoClickDelay", "type": "number" },
+              { "name": "loadingText", "type": "string" },
+              {
+                "name": "loadingTextPosition",
+                "type": "'left' | 'right' | 'center' | string"
+              },
+              { "name": "loading", "type": "boolean" },
               { "name": "validity" },
               { "name": "validationMessage" },
               { "name": "handleClick" }
@@ -1195,6 +1231,10 @@
               "name": "outbound",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "no-collapse",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "short",
               "value": { "type": "boolean", "default": "false" }
@@ -1211,6 +1251,7 @@
               { "name": "sender", "type": "string" },
               { "name": "avatar", "type": "string" },
               { "name": "outbound", "type": "boolean" },
+              { "name": "noCollapse", "type": "boolean" },
               { "name": "short", "type": "boolean" },
               { "name": "defaultDisplay", "type": "'text' | 'html'" },
               { "name": "htmlNodes", "type": "Node[]" },
@@ -1503,10 +1544,7 @@
               "name": "empty-state-icon",
               "value": { "type": "string", "default": "\"data_alert\"" }
             },
-            {
-              "name": "hide-checkboxes",
-              "value": { "type": "boolean", "default": "true" }
-            },
+            { "name": "hide-checkboxes", "value": { "type": "boolean" } },
             { "name": "filters", "value": { "type": "[]", "default": "[]" } },
             {
               "name": "method",
@@ -1515,7 +1553,12 @@
             {
               "name": "no-initial-load",
               "value": { "type": "boolean", "default": "false" }
-            }
+            },
+            {
+              "name": "group-by",
+              "value": { "type": "string", "default": "''" }
+            },
+            { "name": "groups", "value": { "type": "string", "default": "''" } }
           ],
           "slots": [
             { "name": "", "description": "The default slot." },
@@ -1547,6 +1590,9 @@
               { "name": "filters", "type": "[]" },
               { "name": "method", "type": "'GET' | 'POST'" },
               { "name": "noInitialLoad", "type": "boolean" },
+              { "name": "groupBy", "type": "string" },
+              { "name": "groups", "type": "string" },
+              { "name": "selectAllButton", "type": "ZnButton" },
               { "name": "requestParams", "type": "Record<string, any>" },
               { "name": "changeEventListener" }
             ],
@@ -2622,6 +2668,7 @@
               "value": { "type": "boolean", "default": "false" }
             },
             { "name": "caption", "value": { "type": "string" } },
+            { "name": "icon", "value": { "type": "string" } },
             { "name": "description", "value": { "type": "string" } },
             {
               "name": "navigation",
@@ -2645,6 +2692,7 @@
               { "name": "entityIdShow", "type": "boolean" },
               { "name": "transparent", "type": "boolean" },
               { "name": "caption", "type": "string" },
+              { "name": "icon", "type": "string" },
               { "name": "description", "type": "string" },
               { "name": "navigation", "type": "array" },
               { "name": "fullWidth", "type": "boolean" },
@@ -3705,7 +3753,11 @@
               "value": { "type": "string", "default": "''" }
             },
             { "name": "date", "value": { "type": "string", "default": "''" } },
-            { "name": "body", "value": { "type": "string", "default": "''" } }
+            { "name": "body", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "collapse-at-lines",
+              "value": { "type": "number", "default": "3" }
+            }
           ],
           "slots": [
             { "name": "caption", "description": "The note's caption." },
@@ -3720,7 +3772,8 @@
               { "name": "color", "type": "typeof colors[number]" },
               { "name": "caption", "type": "string" },
               { "name": "date", "type": "string" },
-              { "name": "body", "type": "string" }
+              { "name": "body", "type": "string" },
+              { "name": "collapseAtLines", "type": "number" }
             ],
             "events": [
               {
@@ -3783,7 +3836,9 @@
           "name": "zn-order-table",
           "description": "Short summary of the component's intended use.\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": [{ "name": "data", "value": { "type": "Object" } }],
+          "attributes": [
+            { "name": "data", "value": { "type": "OrderTableData" } }
+          ],
           "slots": [
             { "name": "", "description": "The default slot." },
             { "name": "example", "description": "An example slot." }
@@ -3792,7 +3847,10 @@
             { "name": "zn-event-name", "description": "Emitted as an example." }
           ],
           "js": {
-            "properties": [{ "name": "data", "type": "Object" }],
+            "properties": [
+              { "name": "data", "type": "OrderTableData" },
+              { "name": "resizeEventHandler" }
+            ],
             "events": [
               {
                 "name": "zn-event-name",
@@ -3951,6 +4009,7 @@
           "attributes": [
             { "name": "basis-px", "value": { "type": "number" } },
             { "name": "caption", "value": { "type": "string" } },
+            { "name": "icon", "value": { "type": "string" } },
             { "name": "description", "value": { "type": "string" } },
             { "name": "tabbed", "value": { "type": "boolean" } },
             { "name": "cosmic", "value": { "type": "boolean" } },
@@ -3970,6 +4029,7 @@
             "properties": [
               { "name": "basis", "type": "number" },
               { "name": "caption", "type": "string" },
+              { "name": "icon", "type": "string" },
               { "name": "description", "type": "string" },
               { "name": "tabbed", "type": "boolean" },
               { "name": "cosmic", "type": "boolean" },
@@ -4709,6 +4769,13 @@
               "name": "disabled",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "size",
+              "value": {
+                "type": "'small' | 'medium' | 'large'",
+                "default": "'medium'"
+              }
+            },
             {
               "name": "getSymbol",
               "value": { "type": "(value: number) => string" }
@@ -4731,6 +4798,7 @@
               { "name": "precision", "type": "number" },
               { "name": "readonly", "type": "boolean" },
               { "name": "disabled", "type": "boolean" },
+              { "name": "size", "type": "'small' | 'medium' | 'large'" },
               { "name": "getSymbol", "type": "(value: number) => string" },
               {
                 "name": "validity",

package/dist/zn.d.ts

@@ -1058,6 +1058,7 @@ declare module "components/button/button.component" {
      * @slot - The button's label.
      * @slot prefix - A presentational prefix icon or similar element.
      * @slot suffix - A presentational suffix icon or similar element.
+     * @slot cancel - Slot for custom cancel button/content when autoClick is active.
      *
      * @csspart base - The component's base wrapper.
      * @csspart prefix - The container that wraps the prefix.
@@ -1074,7 +1075,10 @@ declare module "components/button/button.component" {
         };
         private readonly formControlController;
         private readonly hasSlotController;
+        private _autoClickTimeout;
+        private _loadingState;
         button: HTMLButtonElement;
+        countdownContainer: HTMLElement[];
         color: 'default' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'transparent' | 'star';
         size: 'content' | 'x-small' | 'small' | 'medium' | 'large';
         text: boolean;
@@ -1106,9 +1110,16 @@ declare module "components/button/button.component" {
         dataTarget: 'modal' | 'slide' | string;
         rel: string;
         tooltip: string;
+        autoClick: boolean;
+        autoClickDelay: number;
+        loadingText: string;
+        loadingTextPosition: 'left' | 'right' | 'center' | string;
+        loading: boolean;
         get validity(): ValidityState;
         get validationMessage(): string;
         firstUpdated(): void;
+        disconnectedCallback(): void;
+        protected updated(changedProps: Map<string, any>): void;
         checkValidity(): boolean;
         getForm(): HTMLFormElement | null;
         reportValidity(): boolean;
@@ -1116,6 +1127,9 @@ declare module "components/button/button.component" {
         handleClick: () => void;
         private _isLink;
         private _isButton;
+        setupAutoClick(): void;
+        updateCountdownText(): void;
+        teardownAutoClick(): void;
         protected render(): unknown;
     }
 }
@@ -2625,6 +2639,9 @@ declare module "components/data-table/data-table.component" {
         filters: [];
         method: 'GET' | 'POST';
         noInitialLoad: boolean;
+        groupBy: string;
+        groups: string;
+        selectAllButton: ZnButton;
         private _initialLoad;
         private _lastTableContent;
         private resizeObserver;
@@ -2646,6 +2663,8 @@ declare module "components/data-table/data-table.component" {
         changeEventListener: (e: ZnFilterChangeEvent) => void;
         emptyState(): TemplateResult<1>;
         renderTable(data: Response): TemplateResult<1>;
+        humanize(str: string): string;
+        renderTableData(data: any): TemplateResult<1>;
         getTableHeader(): TemplateResult<1>;
         getTableFooter(): TemplateResult<1>;
         getRowsSelected(): TemplateResult<1> | null;
@@ -2670,6 +2689,7 @@ declare module "components/data-table/data-table.component" {
         private getRows;
         private getSelectedKeys;
         private updateKeys;
+        private updateSelectAll;
         private updateModifyKeys;
         private updateDeleteKeys;
         private extractComparable;
@@ -2823,6 +2843,13 @@ declare module "components/note/note.component" {
         caption: string;
         date: string;
         body: string;
+        collapseAtLines: number;
+        private expanded;
+        private _isOverflowing;
+        private _toggleExpand;
+        private _measureOverflow;
+        protected firstUpdated(): void;
+        protected updated(): void;
         protected render(): unknown;
     }
 }
@@ -3118,6 +3145,7 @@ declare module "components/header/header.component" {
         entityIdShow: boolean;
         transparent: boolean;
         caption: string;
+        icon: string;
         description: string;
         navigation: never[];
         fullWidth: boolean;
@@ -3448,6 +3476,7 @@ declare module "components/panel/panel.component" {
         private readonly hasSlotController;
         basis: number;
         caption: string;
+        icon: string;
         description: string;
         tabbed: boolean;
         cosmic: boolean;
@@ -3963,6 +3992,24 @@ declare module "components/progress-bar/index" {
 declare module "components/order-table/order-table.component" {
     import { type CSSResultGroup } from 'lit';
     import ZincElement from "internal/zinc-element";
+    interface OrderTableData {
+        headers: string[];
+        items: {
+            caption?: string;
+            summary?: string;
+            data: string[];
+            sub?: {
+                caption?: string;
+                summary?: string;
+                data: string[];
+            }[];
+        }[];
+        tax?: string;
+        discount?: string;
+        total?: string;
+        paid?: string;
+        remaining?: string;
+    }
     /**
      * @summary Short summary of the component's intended use.
      * @documentation https://zinc.style/components/order-table
@@ -3982,11 +4029,12 @@ declare module "components/order-table/order-table.component" {
      */
     export default class ZnOrderTable extends ZincElement {
         static styles: CSSResultGroup;
-        data: Object;
+        data: OrderTableData;
         private isMobile;
         private modifiedData;
-        constructor();
         connectedCallback(): void;
+        disconnectedCallback(): void;
+        resizeEventHandler: () => void;
         render(): import("lit").TemplateResult<1>;
         getHeaders(): import("lit").TemplateResult<1>;
         getRows(): import("lit").TemplateResult<1>;
@@ -5300,6 +5348,7 @@ declare module "components/rating/rating.component" {
         precision: number;
         readonly: boolean;
         disabled: boolean;
+        size: 'small' | 'medium' | 'large';
         getSymbol: (value: number) => string;
         /** Gets the validity state object */
         get validity(): ValidityState;
@@ -6210,8 +6259,8 @@ declare module "components/split-button/index" {
     }
 }
 declare module "components/content-block/content-block.component" {
-    import ZincElement from "internal/zinc-element";
     import type { PropertyValues } from 'lit';
+    import ZincElement from "internal/zinc-element";
     interface TextRow {
         lines: string[];
         type: 'reply' | 'text';
@@ -6228,6 +6277,7 @@ declare module "components/content-block/content-block.component" {
         sender: string;
         avatar: string;
         outbound: boolean;
+        noCollapse: boolean;
         short: boolean;
         defaultDisplay: 'text' | 'html';
         htmlNodes: Node[];