wcs-core 4.0.2 → 4.1.0

package/dist/types/components.d.ts

@@ -23,6 +23,8 @@ import { RadioGroupChangeEventDetail, RadioGroupMode } from "./components/radio-
 import { RadioChosedEvent } from "./components/radio/radio-interface";
 import { SelectChangeEventDetail, WcsSelectSize } from "./components/select/select-interface";
 import { SelectOptionChosedEvent } from "./components/select-option/select-option-interface";
+import { WcsSkeletonAnimation } from "./components/skeleton/skeleton-interface";
+import { CssTypes } from "./shared-types";
 import { WcsSpinnerMode } from "./components/spinner/spinner-interface";
 import { SwitchChangeEventDetail, SwitchLabelAlignment } from "./components/switch/switch-interface";
 import { WcsTabChangeEvent, WcsTabsAlignment } from "./components/tabs/tabs-interface";
@@ -46,6 +48,8 @@ export { RadioGroupChangeEventDetail, RadioGroupMode } from "./components/radio-
 export { RadioChosedEvent } from "./components/radio/radio-interface";
 export { SelectChangeEventDetail, WcsSelectSize } from "./components/select/select-interface";
 export { SelectOptionChosedEvent } from "./components/select-option/select-option-interface";
+export { WcsSkeletonAnimation } from "./components/skeleton/skeleton-interface";
+export { CssTypes } from "./shared-types";
 export { WcsSpinnerMode } from "./components/spinner/spinner-interface";
 export { SwitchChangeEventDetail, SwitchLabelAlignment } from "./components/switch/switch-interface";
 export { WcsTabChangeEvent, WcsTabsAlignment } from "./components/tabs/tabs-interface";
@@ -106,6 +110,12 @@ export namespace Components {
     }
     /**
      * Button component, can also be a link when specifying href.
+     * ## Click event
+     * The WCS button relies on the native click event to pass a user click to your app.
+     * For now, it's not possible for us to prevent the click event to be fired when the button's disabled attribute is true.
+     * This means you'll receive click events on a disabled wcs button.
+     * If you're using the button with a library like Angular or React, they have internal mechanisms to prevent this behavior. Your callbacks will therefore not be called.
+     * To fix this problem, we plan to provide a wcsClick event in addition to the native click for applications developed without frameworks.
      */
     interface WcsButton {
         /**
@@ -225,9 +235,9 @@ export namespace Components {
          */
         "step": number;
         /**
-          * Allow to change currentValue programmatically
+          * The current value of the counter.
          */
-        "value"?: number;
+        "value": number;
     }
     interface WcsDivider {
     }
@@ -325,44 +335,87 @@ export namespace Components {
          */
         "text": string;
     }
+    /**
+     * The grid component is a complex component used as an HTML table to display collections of data.
+     * @cssprop --wcs-grid-highlight-color - Color for selected rows
+     * @cssprop --wcs-grid-column-border-left - Left border of all grid headers
+     */
     interface WcsGrid {
+        /**
+          * Contains the data to display in the table from a js object
+         */
         "data": any[];
         /**
-          * Flag to display spinner during data loading
+          * Flag to display a spinner during data loading
          */
         "loading": boolean;
         /**
-          * Name of the object's key that will be used to display the cells whose keyValue attribute matches to the object's value for this key.
+          * Name of the object's key that will be used to display the cells whose `keyValue` attribute matches to the object's value for this key.
          */
         "rowIdPath": string;
         /**
-          * Set the selected items
+          * Set the selected items (rows)
          */
         "selectedItems": any | any[];
         /**
-          * Used to manage grid's row selection
+          * Used to manage grid's row selection.   "none": no row can be selected.   "multiple": several rows can be selected.   "single": one row only can be selected.
          */
         "selectionConfig": WcsGridSelectionConfig;
         /**
-          * True to manage sort and pagination with a backend server, default: false
+          * Manage sort and pagination with a backend server when set to `true`
          */
         "serverMode": boolean;
+        /**
+          * Automatically set by the component to reference the wcs-grid-pagination HTML element by its id.
+         */
         "wcsGridPaginationId": string;
     }
+    /**
+     * The grid column is a subcomponent of `wcs-grid` that represents a column of the table.
+     * @cssprop --wcs-grid-column-border-left - Border separator between column names
+     * @csspart [path]-column - CSS part for each column for styling. e.g: first_name-column, email-column
+     */
     interface WcsGridColumn {
+        /**
+          * Set to true if using a `wcs-custom-cell` linked to it.
+         */
         "customCells": boolean;
+        /**
+          * Customizable formatter function to render the cell differently.
+         */
         "formatter": WcsCellFormatter;
+        /**
+          * Flag to hide the column.
+         */
         "hidden": boolean;
+        /**
+          * The name of the column displayed on the table (e.g: First Name, Last Name, Email, ...)
+         */
         "name": string;
+        /**
+          * Represents the name of the field from the `data` object (e.g: first_name, last_name, email, ...)
+         */
         "path": string;
+        /**
+          * Make the column sortable.
+         */
         "sort": boolean;
+        /**
+          * Customizable sort function to change the comparison of values.
+         */
         "sortFn": WcsSortFn;
+        /**
+          * Defines if the column sort is ascending or descending.   `none` = the column is not sorted.
+         */
         "sortOrder": WcsSortOrder;
         /**
-          * Set the column <th> element width
+          * Set the column `<th>` element width.
          */
         "width": string;
     }
+    /**
+     * The grid custom cell is a subcomponent of `wcs-grid`.
+     */
     interface WcsGridCustomCell {
         /**
           * ID of the column for which to render the cell
@@ -373,11 +426,29 @@ export namespace Components {
          */
         "rowId": any;
     }
+    /**
+     * The grid pagination is a subcomponent of `wcs-grid`, slotted in `grid-pagination` under the `<table>` element.
+     */
     interface WcsGridPagination {
+        /**
+          * Set the available page sizes in the pagination dropdown on the left.
+         */
         "availablePageSizes": number[];
+        /**
+          * The current page of the pagination. First page starts at index 0.
+         */
         "currentPage": number;
+        /**
+          * Total elements in the grid.   - **Grid in `Server mode`** : You have to set `itemsCount` = your total data length.   - **Grid not in Server mode** : Do not set it manually : itemsCount is set and updated every pagination refresh.
+         */
         "itemsCount": number;
+        /**
+          * Max number of pages.   - **Grid in `Server mode`** : You have to set `pageCount` = `itemsCount` divided by `pageSize`.   - **Grid not in Server mode** : Do not set it manually : pageCount is set and updated every pagination refresh.
+         */
         "pageCount": number;
+        /**
+          * Maximum number of elements shown per page.   Default is the first value of `availablePageSizes`.
+         */
         "pageSize": number;
     }
     interface WcsHeader {
@@ -754,6 +825,54 @@ export namespace Components {
          */
         "value"?: any;
     }
+    /**
+     * Use a skeleton circle as a placeholder round images, illustrations or components
+     */
+    interface WcsSkeletonCircle {
+        /**
+          * Specifies the animation of the skeleton
+         */
+        "animation": WcsSkeletonAnimation;
+        /**
+          * Specifies the radius of the circle in px
+         */
+        "radius": number;
+    }
+    /**
+     * Use a skeleton rectangle as a placeholder for large images or square-shaped components
+     * @cssprop --wcs-skeleton-border-radius - Controls the border-radius of the 'rounded' skeleton rectangle (default 0.5rem)
+     */
+    interface WcsSkeletonRectangle {
+        /**
+          * Specifies the animation of the skeleton
+         */
+        "animation": WcsSkeletonAnimation;
+        /**
+          * Specifies the height of the skeleton (can be any valid CSS value)
+         */
+        "height": CssTypes.Height;
+        /**
+          * Adds a border radius on the skeleton if true
+         */
+        "rounded": boolean;
+        /**
+          * Specifies the width of the skeleton (can be any valid CSS value)
+         */
+        "width": CssTypes.Width;
+    }
+    /**
+     * Use a skeleton text as a placeholder for titles or paragraphs.
+     */
+    interface WcsSkeletonText {
+        /**
+          * Specifies the animation of the skeleton
+         */
+        "animation": WcsSkeletonAnimation;
+        /**
+          * Specifies the line height of the text skeleton
+         */
+        "height": 'h1' | 'h2' | 'h3' | 'caption' | 'body';
+    }
     interface WcsSpinner {
         /**
           * Indicates the spinner display mode. Accepted values: `border` or `growing`
@@ -1124,6 +1243,12 @@ declare global {
     };
     /**
      * Button component, can also be a link when specifying href.
+     * ## Click event
+     * The WCS button relies on the native click event to pass a user click to your app.
+     * For now, it's not possible for us to prevent the click event to be fired when the button's disabled attribute is true.
+     * This means you'll receive click events on a disabled wcs button.
+     * If you're using the button with a library like Angular or React, they have internal mechanisms to prevent this behavior. Your callbacks will therefore not be called.
+     * To fix this problem, we plan to provide a wcsClick event in addition to the native click for applications developed without frameworks.
      */
     interface HTMLWcsButtonElement extends Components.WcsButton, HTMLStencilElement {
     }
@@ -1265,24 +1390,40 @@ declare global {
         prototype: HTMLWcsGalacticMenuElement;
         new (): HTMLWcsGalacticMenuElement;
     };
+    /**
+     * The grid component is a complex component used as an HTML table to display collections of data.
+     * @cssprop --wcs-grid-highlight-color - Color for selected rows
+     * @cssprop --wcs-grid-column-border-left - Left border of all grid headers
+     */
     interface HTMLWcsGridElement extends Components.WcsGrid, HTMLStencilElement {
     }
     var HTMLWcsGridElement: {
         prototype: HTMLWcsGridElement;
         new (): HTMLWcsGridElement;
     };
+    /**
+     * The grid column is a subcomponent of `wcs-grid` that represents a column of the table.
+     * @cssprop --wcs-grid-column-border-left - Border separator between column names
+     * @csspart [path]-column - CSS part for each column for styling. e.g: first_name-column, email-column
+     */
     interface HTMLWcsGridColumnElement extends Components.WcsGridColumn, HTMLStencilElement {
     }
     var HTMLWcsGridColumnElement: {
         prototype: HTMLWcsGridColumnElement;
         new (): HTMLWcsGridColumnElement;
     };
+    /**
+     * The grid custom cell is a subcomponent of `wcs-grid`.
+     */
     interface HTMLWcsGridCustomCellElement extends Components.WcsGridCustomCell, HTMLStencilElement {
     }
     var HTMLWcsGridCustomCellElement: {
         prototype: HTMLWcsGridCustomCellElement;
         new (): HTMLWcsGridCustomCellElement;
     };
+    /**
+     * The grid pagination is a subcomponent of `wcs-grid`, slotted in `grid-pagination` under the `<table>` element.
+     */
     interface HTMLWcsGridPaginationElement extends Components.WcsGridPagination, HTMLStencilElement {
     }
     var HTMLWcsGridPaginationElement: {
@@ -1440,6 +1581,34 @@ declare global {
         prototype: HTMLWcsSelectOptionElement;
         new (): HTMLWcsSelectOptionElement;
     };
+    /**
+     * Use a skeleton circle as a placeholder round images, illustrations or components
+     */
+    interface HTMLWcsSkeletonCircleElement extends Components.WcsSkeletonCircle, HTMLStencilElement {
+    }
+    var HTMLWcsSkeletonCircleElement: {
+        prototype: HTMLWcsSkeletonCircleElement;
+        new (): HTMLWcsSkeletonCircleElement;
+    };
+    /**
+     * Use a skeleton rectangle as a placeholder for large images or square-shaped components
+     * @cssprop --wcs-skeleton-border-radius - Controls the border-radius of the 'rounded' skeleton rectangle (default 0.5rem)
+     */
+    interface HTMLWcsSkeletonRectangleElement extends Components.WcsSkeletonRectangle, HTMLStencilElement {
+    }
+    var HTMLWcsSkeletonRectangleElement: {
+        prototype: HTMLWcsSkeletonRectangleElement;
+        new (): HTMLWcsSkeletonRectangleElement;
+    };
+    /**
+     * Use a skeleton text as a placeholder for titles or paragraphs.
+     */
+    interface HTMLWcsSkeletonTextElement extends Components.WcsSkeletonText, HTMLStencilElement {
+    }
+    var HTMLWcsSkeletonTextElement: {
+        prototype: HTMLWcsSkeletonTextElement;
+        new (): HTMLWcsSkeletonTextElement;
+    };
     interface HTMLWcsSpinnerElement extends Components.WcsSpinner, HTMLStencilElement {
     }
     var HTMLWcsSpinnerElement: {
@@ -1554,6 +1723,9 @@ declare global {
         "wcs-radio-group": HTMLWcsRadioGroupElement;
         "wcs-select": HTMLWcsSelectElement;
         "wcs-select-option": HTMLWcsSelectOptionElement;
+        "wcs-skeleton-circle": HTMLWcsSkeletonCircleElement;
+        "wcs-skeleton-rectangle": HTMLWcsSkeletonRectangleElement;
+        "wcs-skeleton-text": HTMLWcsSkeletonTextElement;
         "wcs-spinner": HTMLWcsSpinnerElement;
         "wcs-switch": HTMLWcsSwitchElement;
         "wcs-tab": HTMLWcsTabElement;
@@ -1617,6 +1789,12 @@ declare namespace LocalJSX {
     }
     /**
      * Button component, can also be a link when specifying href.
+     * ## Click event
+     * The WCS button relies on the native click event to pass a user click to your app.
+     * For now, it's not possible for us to prevent the click event to be fired when the button's disabled attribute is true.
+     * This means you'll receive click events on a disabled wcs button.
+     * If you're using the button with a library like Angular or React, they have internal mechanisms to prevent this behavior. Your callbacks will therefore not be called.
+     * To fix this problem, we plan to provide a wcsClick event in addition to the native click for applications developed without frameworks.
      */
     interface WcsButton {
         /**
@@ -1739,9 +1917,9 @@ declare namespace LocalJSX {
          */
         "step"?: number;
         /**
-          * Allow to change currentValue programmatically
+          * The current value of the counter.
          */
-        "value"?: number;
+        "value": number;
     }
     interface WcsDivider {
     }
@@ -1844,10 +2022,18 @@ declare namespace LocalJSX {
          */
         "text"?: string;
     }
+    /**
+     * The grid component is a complex component used as an HTML table to display collections of data.
+     * @cssprop --wcs-grid-highlight-color - Color for selected rows
+     * @cssprop --wcs-grid-column-border-left - Left border of all grid headers
+     */
     interface WcsGrid {
+        /**
+          * Contains the data to display in the table from a js object
+         */
         "data"?: any[];
         /**
-          * Flag to display spinner during data loading
+          * Flag to display a spinner during data loading
          */
         "loading"?: boolean;
         /**
@@ -1859,39 +2045,80 @@ declare namespace LocalJSX {
          */
         "onWcsGridSelectionChange"?: (event: WcsGridCustomEvent<WcsGridRowSelectedEventDetails>) => void;
         /**
-          * Name of the object's key that will be used to display the cells whose keyValue attribute matches to the object's value for this key.
+          * Name of the object's key that will be used to display the cells whose `keyValue` attribute matches to the object's value for this key.
          */
         "rowIdPath"?: string;
         /**
-          * Set the selected items
+          * Set the selected items (rows)
          */
         "selectedItems"?: any | any[];
         /**
-          * Used to manage grid's row selection
+          * Used to manage grid's row selection.   "none": no row can be selected.   "multiple": several rows can be selected.   "single": one row only can be selected.
          */
         "selectionConfig"?: WcsGridSelectionConfig;
         /**
-          * True to manage sort and pagination with a backend server, default: false
+          * Manage sort and pagination with a backend server when set to `true`
          */
         "serverMode"?: boolean;
+        /**
+          * Automatically set by the component to reference the wcs-grid-pagination HTML element by its id.
+         */
         "wcsGridPaginationId"?: string;
     }
+    /**
+     * The grid column is a subcomponent of `wcs-grid` that represents a column of the table.
+     * @cssprop --wcs-grid-column-border-left - Border separator between column names
+     * @csspart [path]-column - CSS part for each column for styling. e.g: first_name-column, email-column
+     */
     interface WcsGridColumn {
+        /**
+          * Set to true if using a `wcs-custom-cell` linked to it.
+         */
         "customCells"?: boolean;
+        /**
+          * Customizable formatter function to render the cell differently.
+         */
         "formatter"?: WcsCellFormatter;
+        /**
+          * Flag to hide the column.
+         */
         "hidden"?: boolean;
+        /**
+          * The name of the column displayed on the table (e.g: First Name, Last Name, Email, ...)
+         */
         "name"?: string;
+        /**
+          * Event emitted if the column is dynamically switching visibility.
+         */
         "onWcsHiddenChange"?: (event: WcsGridColumnCustomEvent<boolean>) => void;
+        /**
+          * Event emitted when the sort of the column is changed.
+         */
         "onWcsSortChange"?: (event: WcsGridColumnCustomEvent<WcsGridColumnSortChangeEventDetails>) => void;
+        /**
+          * Represents the name of the field from the `data` object (e.g: first_name, last_name, email, ...)
+         */
         "path"?: string;
+        /**
+          * Make the column sortable.
+         */
         "sort"?: boolean;
+        /**
+          * Customizable sort function to change the comparison of values.
+         */
         "sortFn"?: WcsSortFn;
+        /**
+          * Defines if the column sort is ascending or descending.   `none` = the column is not sorted.
+         */
         "sortOrder"?: WcsSortOrder;
         /**
-          * Set the column <th> element width
+          * Set the column `<th>` element width.
          */
         "width"?: string;
     }
+    /**
+     * The grid custom cell is a subcomponent of `wcs-grid`.
+     */
     interface WcsGridCustomCell {
         /**
           * ID of the column for which to render the cell
@@ -1902,12 +2129,33 @@ declare namespace LocalJSX {
          */
         "rowId"?: any;
     }
+    /**
+     * The grid pagination is a subcomponent of `wcs-grid`, slotted in `grid-pagination` under the `<table>` element.
+     */
     interface WcsGridPagination {
+        /**
+          * Set the available page sizes in the pagination dropdown on the left.
+         */
         "availablePageSizes"?: number[];
+        /**
+          * The current page of the pagination. First page starts at index 0.
+         */
         "currentPage"?: number;
+        /**
+          * Total elements in the grid.   - **Grid in `Server mode`** : You have to set `itemsCount` = your total data length.   - **Grid not in Server mode** : Do not set it manually : itemsCount is set and updated every pagination refresh.
+         */
         "itemsCount"?: number;
+        /**
+          * Event emitted when the pagination changes.
+         */
         "onWcsGridPaginationChange"?: (event: WcsGridPaginationCustomEvent<WcsGridPaginationChangeEventDetails>) => void;
+        /**
+          * Max number of pages.   - **Grid in `Server mode`** : You have to set `pageCount` = `itemsCount` divided by `pageSize`.   - **Grid not in Server mode** : Do not set it manually : pageCount is set and updated every pagination refresh.
+         */
         "pageCount"?: number;
+        /**
+          * Maximum number of elements shown per page.   Default is the first value of `availablePageSizes`.
+         */
         "pageSize"?: number;
     }
     interface WcsHeader {
@@ -2295,6 +2543,54 @@ declare namespace LocalJSX {
          */
         "value"?: any;
     }
+    /**
+     * Use a skeleton circle as a placeholder round images, illustrations or components
+     */
+    interface WcsSkeletonCircle {
+        /**
+          * Specifies the animation of the skeleton
+         */
+        "animation"?: WcsSkeletonAnimation;
+        /**
+          * Specifies the radius of the circle in px
+         */
+        "radius"?: number;
+    }
+    /**
+     * Use a skeleton rectangle as a placeholder for large images or square-shaped components
+     * @cssprop --wcs-skeleton-border-radius - Controls the border-radius of the 'rounded' skeleton rectangle (default 0.5rem)
+     */
+    interface WcsSkeletonRectangle {
+        /**
+          * Specifies the animation of the skeleton
+         */
+        "animation"?: WcsSkeletonAnimation;
+        /**
+          * Specifies the height of the skeleton (can be any valid CSS value)
+         */
+        "height"?: CssTypes.Height;
+        /**
+          * Adds a border radius on the skeleton if true
+         */
+        "rounded"?: boolean;
+        /**
+          * Specifies the width of the skeleton (can be any valid CSS value)
+         */
+        "width"?: CssTypes.Width;
+    }
+    /**
+     * Use a skeleton text as a placeholder for titles or paragraphs.
+     */
+    interface WcsSkeletonText {
+        /**
+          * Specifies the animation of the skeleton
+         */
+        "animation"?: WcsSkeletonAnimation;
+        /**
+          * Specifies the line height of the text skeleton
+         */
+        "height"?: 'h1' | 'h2' | 'h3' | 'caption' | 'body';
+    }
     interface WcsSpinner {
         /**
           * Indicates the spinner display mode. Accepted values: `border` or `growing`
@@ -2583,6 +2879,9 @@ declare namespace LocalJSX {
         "wcs-radio-group": WcsRadioGroup;
         "wcs-select": WcsSelect;
         "wcs-select-option": WcsSelectOption;
+        "wcs-skeleton-circle": WcsSkeletonCircle;
+        "wcs-skeleton-rectangle": WcsSkeletonRectangle;
+        "wcs-skeleton-text": WcsSkeletonText;
         "wcs-spinner": WcsSpinner;
         "wcs-switch": WcsSwitch;
         "wcs-tab": WcsTab;
@@ -2604,6 +2903,12 @@ declare module "@stencil/core" {
             "wcs-badge": LocalJSX.WcsBadge & JSXBase.HTMLAttributes<HTMLWcsBadgeElement>;
             /**
              * Button component, can also be a link when specifying href.
+             * ## Click event
+             * The WCS button relies on the native click event to pass a user click to your app.
+             * For now, it's not possible for us to prevent the click event to be fired when the button's disabled attribute is true.
+             * This means you'll receive click events on a disabled wcs button.
+             * If you're using the button with a library like Angular or React, they have internal mechanisms to prevent this behavior. Your callbacks will therefore not be called.
+             * To fix this problem, we plan to provide a wcsClick event in addition to the native click for applications developed without frameworks.
              */
             "wcs-button": LocalJSX.WcsButton & JSXBase.HTMLAttributes<HTMLWcsButtonElement>;
             "wcs-card": LocalJSX.WcsCard & JSXBase.HTMLAttributes<HTMLWcsCardElement>;
@@ -2635,9 +2940,25 @@ declare module "@stencil/core" {
             "wcs-form-field": LocalJSX.WcsFormField & JSXBase.HTMLAttributes<HTMLWcsFormFieldElement>;
             "wcs-galactic": LocalJSX.WcsGalactic & JSXBase.HTMLAttributes<HTMLWcsGalacticElement>;
             "wcs-galactic-menu": LocalJSX.WcsGalacticMenu & JSXBase.HTMLAttributes<HTMLWcsGalacticMenuElement>;
+            /**
+             * The grid component is a complex component used as an HTML table to display collections of data.
+             * @cssprop --wcs-grid-highlight-color - Color for selected rows
+             * @cssprop --wcs-grid-column-border-left - Left border of all grid headers
+             */
             "wcs-grid": LocalJSX.WcsGrid & JSXBase.HTMLAttributes<HTMLWcsGridElement>;
+            /**
+             * The grid column is a subcomponent of `wcs-grid` that represents a column of the table.
+             * @cssprop --wcs-grid-column-border-left - Border separator between column names
+             * @csspart [path]-column - CSS part for each column for styling. e.g: first_name-column, email-column
+             */
             "wcs-grid-column": LocalJSX.WcsGridColumn & JSXBase.HTMLAttributes<HTMLWcsGridColumnElement>;
+            /**
+             * The grid custom cell is a subcomponent of `wcs-grid`.
+             */
             "wcs-grid-custom-cell": LocalJSX.WcsGridCustomCell & JSXBase.HTMLAttributes<HTMLWcsGridCustomCellElement>;
+            /**
+             * The grid pagination is a subcomponent of `wcs-grid`, slotted in `grid-pagination` under the `<table>` element.
+             */
             "wcs-grid-pagination": LocalJSX.WcsGridPagination & JSXBase.HTMLAttributes<HTMLWcsGridPaginationElement>;
             "wcs-header": LocalJSX.WcsHeader & JSXBase.HTMLAttributes<HTMLWcsHeaderElement>;
             "wcs-hint": LocalJSX.WcsHint & JSXBase.HTMLAttributes<HTMLWcsHintElement>;
@@ -2690,6 +3011,19 @@ declare module "@stencil/core" {
              * Select option component, use in conjunction with wcs-select.
              */
             "wcs-select-option": LocalJSX.WcsSelectOption & JSXBase.HTMLAttributes<HTMLWcsSelectOptionElement>;
+            /**
+             * Use a skeleton circle as a placeholder round images, illustrations or components
+             */
+            "wcs-skeleton-circle": LocalJSX.WcsSkeletonCircle & JSXBase.HTMLAttributes<HTMLWcsSkeletonCircleElement>;
+            /**
+             * Use a skeleton rectangle as a placeholder for large images or square-shaped components
+             * @cssprop --wcs-skeleton-border-radius - Controls the border-radius of the 'rounded' skeleton rectangle (default 0.5rem)
+             */
+            "wcs-skeleton-rectangle": LocalJSX.WcsSkeletonRectangle & JSXBase.HTMLAttributes<HTMLWcsSkeletonRectangleElement>;
+            /**
+             * Use a skeleton text as a placeholder for titles or paragraphs.
+             */
+            "wcs-skeleton-text": LocalJSX.WcsSkeletonText & JSXBase.HTMLAttributes<HTMLWcsSkeletonTextElement>;
             "wcs-spinner": LocalJSX.WcsSpinner & JSXBase.HTMLAttributes<HTMLWcsSpinnerElement>;
             "wcs-switch": LocalJSX.WcsSwitch & JSXBase.HTMLAttributes<HTMLWcsSwitchElement>;
             /**

package/dist/types/shared-types.d.ts

@@ -8,3 +8,25 @@
  * xs = 24 px
  */
 export type WcsSize = 'xs' | 's' | 'm' | 'l' | 'xl';
+/***********************/
+/***********************/
+/**
+ * Namespace containing types for representing all available CSS properties.
+ * @namespace CssTypes
+ */
+export declare namespace CssTypes {
+  type Height = CssUnits.LengthOrPercentage | CssUnits.Keyword | CssUnits.Global;
+  type Width = CssUnits.LengthOrPercentage | CssUnits.Keyword | CssUnits.Global;
+}
+/**
+ * Namespace containing types for representing CSS length units, percentages, keywords, and global values.
+ * @namespace CssUnits
+ */
+export declare namespace CssUnits {
+  type LengthUnits = 'ch' | 'em' | 'rem' | 'px' | 'vh' | 'vw';
+  type Length = `${number}${LengthUnits}`;
+  type Percentage = `${number}%`;
+  type LengthOrPercentage = CssUnits.Length | CssUnits.Percentage;
+  type Keyword = 'auto' | 'min-content' | 'max-content' | 'fit-content' | `fit-content(${CssUnits.LengthOrPercentage}`;
+  type Global = 'unset' | 'initial' | 'inherit' | 'revert' | 'revert-layer';
+}

package/dist/wcs/p-15058c29.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,f as r,h as n,H as i,g as o}from"./p-a2df3a49.js";import{G as s}from"./p-475ac7c5.js";import{i as a,b as c,a as u,S as f,c as l,g as h,e as d,d as v,f as b,h as g,M as p,o as w,k as j,r as m,j as y,s as C,l as A,m as S,U as x,n as O,p as k,q as U,t as I,u as R,v as E,w as F}from"./p-8181f8cd.js";function D(t){switch(t){case"asc":return 1;case"desc":return-1}}var G;var M=new Uint8Array(16);function P(){if(!G){G=typeof crypto!=="undefined"&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto)||typeof msCrypto!=="undefined"&&typeof msCrypto.getRandomValues==="function"&&msCrypto.getRandomValues.bind(msCrypto);if(!G){throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported")}}return G(M)}const B=/^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;function H(t){return typeof t==="string"&&B.test(t)}var T=[];for(var W=0;W<256;++W){T.push((W+256).toString(16).substr(1))}function $(t){var e=arguments.length>1&&arguments[1]!==undefined?arguments[1]:0;var r=(T[t[e+0]]+T[t[e+1]]+T[t[e+2]]+T[t[e+3]]+"-"+T[t[e+4]]+T[t[e+5]]+"-"+T[t[e+6]]+T[t[e+7]]+"-"+T[t[e+8]]+T[t[e+9]]+"-"+T[t[e+10]]+T[t[e+11]]+T[t[e+12]]+T[t[e+13]]+T[t[e+14]]+T[t[e+15]]).toLowerCase();if(!H(r)){throw TypeError("Stringified UUID is invalid")}return r}function _(t,e,r){t=t||{};var n=t.random||(t.rng||P)();n[6]=n[6]&15|64;n[8]=n[8]&63|128;if(e){r=r||0;for(var i=0;i<16;++i){e[r+i]=n[i]}return e}return $(n)}var V="[object Symbol]";function N(t){return typeof t=="symbol"||a(t)&&c(t)==V}function q(t,e){var r=-1,n=t==null?0:t.length,i=Array(n);while(++r<n){i[r]=e(t[r],r,t)}return i}var L=1/0;var z=f?f.prototype:undefined,J=z?z.toString:undefined;function K(t){if(typeof t=="string"){return t}if(u(t)){return q(t,K)+""}if(N(t)){return J?J.call(t):""}var e=t+"";return e=="0"&&1/t==-L?"-0":e}var Q=Object.create;var X=function(){function t(){}return function(e){if(!l(e)){return{}}if(Q){return Q(e)}t.prototype=e;var r=new t;t.prototype=undefined;return r}}();function Y(t,e){var r=-1,n=t.length;e||(e=Array(n));while(++r<n){e[r]=t[r]}return e}var Z=function(){try{var t=h(Object,"defineProperty");t({},"",{});return t}catch(t){}}();function tt(t,e){var r=-1,n=t==null?0:t.length;while(++r<n){if(e(t[r],r,t)===false){break}}return t}function et(t,e,r){if(e=="__proto__"&&Z){Z(t,e,{configurable:true,enumerable:true,value:r,writable:true})}else{t[e]=r}}var rt=Object.prototype;var nt=rt.hasOwnProperty;function it(t,e,r){var n=t[e];if(!(nt.call(t,e)&&d(n,r))||r===undefined&&!(e in t)){et(t,e,r)}}function ot(t,e,r,n){var i=!r;r||(r={});var o=-1,s=e.length;while(++o<s){var a=e[o];var c=n?n(r[a],t[a],a,r,t):undefined;if(c===undefined){c=t[a]}if(i){et(r,a,c)}else{it(r,a,c)}}return r}function st(t){var e=[];if(t!=null){for(var r in Object(t)){e.push(r)}}return e}var at=Object.prototype;var ct=at.hasOwnProperty;function ut(t){if(!l(t)){return st(t)}var e=v(t),r=[];for(var n in t){if(!(n=="constructor"&&(e||!ct.call(t,n)))){r.push(n)}}return r}function ft(t){return b(t)?g(t,true):ut(t)}var lt=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,ht=/^\w*$/;function dt(t,e){if(u(t)){return false}var r=typeof t;if(r=="number"||r=="symbol"||r=="boolean"||t==null||N(t)){return true}return ht.test(t)||!lt.test(t)||e!=null&&t in Object(e)}var vt="Expected a function";function bt(t,e){if(typeof t!="function"||e!=null&&typeof e!="function"){throw new TypeError(vt)}var r=function(){var n=arguments,i=e?e.apply(this,n):n[0],o=r.cache;if(o.has(i)){return o.get(i)}var s=t.apply(this,n);r.cache=o.set(i,s)||o;return s};r.cache=new(bt.Cache||p);return r}bt.Cache=p;var gt=500;function pt(t){var e=bt(t,(function(t){if(r.size===gt){r.clear()}return t}));var r=e.cache;return e}var wt=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g;var jt=/\\(\\)?/g;var mt=pt((function(t){var e=[];if(t.charCodeAt(0)===46){e.push("")}t.replace(wt,(function(t,r,n,i){e.push(n?i.replace(jt,"$1"):r||t)}));return e}));function yt(t){return t==null?"":K(t)}function Ct(t,e){if(u(t)){return t}return dt(t,e)?[t]:mt(yt(t))}var At=1/0;function St(t){if(typeof t=="string"||N(t)){return t}var e=t+"";return e=="0"&&1/t==-At?"-0":e}function xt(t,e){e=Ct(e,t);var r=0,n=e.length;while(t!=null&&r<n){t=t[St(e[r++])]}return r&&r==n?t:undefined}function Ot(t,e,r){var n=t==null?undefined:xt(t,e);return n===undefined?r:n}var kt=w(Object.getPrototypeOf,Object);function Ut(t,e){return t&&ot(e,j(e),t)}function It(t,e){return t&&ot(e,ft(e),t)}var Rt=typeof exports=="object"&&exports&&!exports.nodeType&&exports;var Et=Rt&&typeof module=="object"&&module&&!module.nodeType&&module;var Ft=Et&&Et.exports===Rt;var Dt=Ft?m.Buffer:undefined,Gt=Dt?Dt.allocUnsafe:undefined;function Mt(t,e){if(e){return t.slice()}var r=t.length,n=Gt?Gt(r):new t.constructor(r);t.copy(n);return n}function Pt(t,e){return ot(t,y(t),e)}var Bt=Object.getOwnPropertySymbols;var Ht=!Bt?C:function(t){var e=[];while(t){A(e,y(t));t=kt(t)}return e};function Tt(t,e){return ot(t,Ht(t),e)}function Wt(t){return S(t,ft,Ht)}var $t=Object.prototype;var _t=$t.hasOwnProperty;function Vt(t){var e=t.length,r=new t.constructor(e);if(e&&typeof t[0]=="string"&&_t.call(t,"index")){r.index=t.index;r.input=t.input}return r}function Nt(t){var e=new t.constructor(t.byteLength);new x(e).set(new x(t));return e}function qt(t,e){var r=e?Nt(t.buffer):t.buffer;return new t.constructor(r,t.byteOffset,t.byteLength)}var Lt=/\w*$/;function zt(t){var e=new t.constructor(t.source,Lt.exec(t));e.lastIndex=t.lastIndex;return e}var Jt=f?f.prototype:undefined,Kt=Jt?Jt.valueOf:undefined;function Qt(t){return Kt?Object(Kt.call(t)):{}}function Xt(t,e){var r=e?Nt(t.buffer):t.buffer;return new t.constructor(r,t.byteOffset,t.length)}var Yt="[object Boolean]",Zt="[object Date]",te="[object Map]",ee="[object Number]",re="[object RegExp]",ne="[object Set]",ie="[object String]",oe="[object Symbol]";var se="[object ArrayBuffer]",ae="[object DataView]",ce="[object Float32Array]",ue="[object Float64Array]",fe="[object Int8Array]",le="[object Int16Array]",he="[object Int32Array]",de="[object Uint8Array]",ve="[object Uint8ClampedArray]",be="[object Uint16Array]",ge="[object Uint32Array]";function pe(t,e,r){var n=t.constructor;switch(e){case se:return Nt(t);case Yt:case Zt:return new n(+t);case ae:return qt(t,r);case ce:case ue:case fe:case le:case he:case de:case ve:case be:case ge:return Xt(t,r);case te:return new n;case ee:case ie:return new n(t);case re:return zt(t);case ne:return new n;case oe:return Qt(t)}}function we(t){return typeof t.constructor=="function"&&!v(t)?X(kt(t)):{}}var je="[object Map]";function me(t){return a(t)&&O(t)==je}var ye=U&&U.isMap;var Ce=ye?k(ye):me;var Ae="[object Set]";function Se(t){return a(t)&&O(t)==Ae}var xe=U&&U.isSet;var Oe=xe?k(xe):Se;var ke=1,Ue=2,Ie=4;var Re="[object Arguments]",Ee="[object Array]",Fe="[object Boolean]",De="[object Date]",Ge="[object Error]",Me="[object Function]",Pe="[object GeneratorFunction]",Be="[object Map]",He="[object Number]",Te="[object Object]",We="[object RegExp]",$e="[object Set]",_e="[object String]",Ve="[object Symbol]",Ne="[object WeakMap]";var qe="[object ArrayBuffer]",Le="[object DataView]",ze="[object Float32Array]",Je="[object Float64Array]",Ke="[object Int8Array]",Qe="[object Int16Array]",Xe="[object Int32Array]",Ye="[object Uint8Array]",Ze="[object Uint8ClampedArray]",tr="[object Uint16Array]",er="[object Uint32Array]";var rr={};rr[Re]=rr[Ee]=rr[qe]=rr[Le]=rr[Fe]=rr[De]=rr[ze]=rr[Je]=rr[Ke]=rr[Qe]=rr[Xe]=rr[Be]=rr[He]=rr[Te]=rr[We]=rr[$e]=rr[_e]=rr[Ve]=rr[Ye]=rr[Ze]=rr[tr]=rr[er]=true;rr[Ge]=rr[Me]=rr[Ne]=false;function nr(t,e,r,n,i,o){var s,a=e&ke,c=e&Ue,f=e&Ie;if(r){s=i?r(t,n,i,o):r(t)}if(s!==undefined){return s}if(!l(t)){return t}var h=u(t);if(h){s=Vt(t);if(!a){return Y(t,s)}}else{var d=O(t),v=d==Me||d==Pe;if(I(t)){return Mt(t,a)}if(d==Te||d==Re||v&&!i){s=c||v?{}:we(t);if(!a){return c?Tt(t,It(s,t)):Pt(t,Ut(s,t))}}else{if(!rr[d]){return i?t:{}}s=pe(t,d,a)}}o||(o=new R);var b=o.get(t);if(b){return b}o.set(t,s);if(Oe(t)){t.forEach((function(n){s.add(nr(n,e,r,n,t,o))}))}else if(Ce(t)){t.forEach((function(n,i){s.set(i,nr(n,e,r,i,t,o))}))}var g=f?c?Wt:E:c?ft:j;var p=h?undefined:g(t);tt(p||t,(function(n,i){if(p){i=n;n=t[i]}it(s,i,nr(n,e,r,i,t,o))}));return s}var ir=1,or=4;function sr(t){return nr(t,ir|or)}const ar=":host{display:block;--wcs-grid-highlight-color:var(--wcs-light)}:host th{background-color:var(--wcs-light)}:host th:not(:first-child){border-left:solid 1px var(--wcs-text-light)}:host ::slotted([slot=grid-column]:first-child){--wcs-grid-column-border-left:none}:host table{width:100%;border-spacing:0}:host td{color:var(--wcs-gray-light);margin:0;padding:calc(var(--wcs-padding) / 2) var(--wcs-padding)}:host tr:not(:last-child) td{border-bottom:solid 1px var(--wcs-text-light)}:host .wcs-grid-selection-column{padding:calc(var(--wcs-padding) / 2) var(--wcs-padding);width:40px}:host tr.selected{background-color:var(--wcs-grid-highlight-color)}:host .loading{text-align:center}:host([selection]) ::slotted([slot=grid-column]:first-child){--wcs-grid-column-border-left:solid 1px var(--wcs-text-light) !important}";const cr=class{constructor(r){t(this,r);this.wcsGridSelectionChange=e(this,"wcsGridSelectionChange",7);this.wcsGridAllSelectionChange=e(this,"wcsGridAllSelectionChange",7);this.serverMode=false;this.data=undefined;this.loading=undefined;this.selectionConfig="none";this.selectedItems=[];this.wcsGridPaginationId=undefined;this.rowIdPath=undefined;this.columns=undefined;this.paginationEl=undefined;this.rows=[]}onDataChange(t){this.updateGridRows(t);this.refreshSort(false)}onSelectedItemsPropertyChange(t){this.updateSelectionWithValues(t)}onHiddenColumnChange(){r(this)}updateSelectionWithValues(t){if(this.selectionConfig==="single"){this.rows.map((t=>t.selected=false));for(const e of this.rows){if(F(e.data,t)){e.selected=true;break}}}else if(this.selectionConfig==="multiple"){this.rows.map((t=>t.selected=false));for(const e of this.rows){if(t.find((t=>F(t,e.data)))){e.selected=true}}}this.rows=sr(this.rows)}wcsGridRowToWcsGridRowData(t){return{selected:t.selected,page:t.page,data:t.data}}updateGridRows(t){const e=[];if(t&&this.columns){for(let r=0;r<t.length;r++){const n={uuid:_(),data:t[r],selected:false,cells:[]};for(const e of this.columns){n.cells.push({content:Ot(t[r],e.path),column:e,formatter:e.formatter})}e.push(n)}this.rows=e;this.updatePageIndex()}}componentDidLoad(){this.columns=this.getGridColumnsFromTemplate();this.paginationEl=this.wcsGridPaginationId?document.getElementById(this.wcsGridPaginationId):this.getGridPaginationsFromTemplate()[0];this.updateGridRows(this.data);if(this.selectedItems){this.updateSelectionWithValues(this.selectedItems)}this.refreshSort(true)}refreshSort(t){if(this.columns){const[e,...r]=this.columns.filter((t=>t.sortOrder!=="none"));if(e&&!this.serverMode){this.sortBy(e)}t&&this.disableSortOrderForColumns(r)}}disableSortOrderForColumns(t){t===null||t===void 0?void 0:t.forEach((t=>t.sortOrder="none"))}getGridColumnsFromTemplate(){const t=this.el.shadowRoot.querySelector('slot[name="grid-column"]');return t.assignedElements()}getGridPaginationsFromTemplate(){const t=this.el.shadowRoot.querySelector('slot[name="grid-pagination"]');return t.assignedElements()}sortChangeEventHandler(t){if(t.detail.order==="none")return;this.disableSortOrderForColumns(this.columns.filter((e=>e!==t.detail.column)));if(this.serverMode)return;this.sortBy(t.detail.column);this.updatePageIndex()}sortBy(t){if(t.sortFn){this.rows=sr(this.rows).sort(((e,r)=>t.sortFn(e.data,r.data,t)*D(t.sortOrder)))}else{this.rows=sr(this.rows).sort(((e,r)=>{const n=t.path;return(Ot(e.data,n)<Ot(r.data,n)?-1:Ot(e.data,n)>Ot(r.data,n)?1:0)*D(t.sortOrder)}))}}updatePageIndex(){if(!this.serverMode&&this.paginationEl){this.paginationEl.itemsCount=this.data.length;this.paginationEl.pageCount=Math.ceil(this.data.length/this.paginationEl.pageSize);if(this.paginationEl.pageCount<=1){this.paginationEl.currentPage=s.INDEX_FIRST_PAGE}else if(this.paginationEl.pageCount>0&&this.paginationEl.currentPage+1>this.paginationEl.pageCount){this.paginationEl.currentPage=this.paginationEl.pageCount-1}const t=sr(this.rows);t.forEach(((t,e)=>t.page=Math.floor(e/this.paginationEl.pageSize)));this.rows=[...t]}}paginationChangeEventHandler(){this.onPaginationChange()}paginationChangeEventHandlerOutside(t){if(this.wcsGridPaginationId&&this.wcsGridPaginationId===t.target.id){this.onPaginationChange()}}onPaginationChange(){if(this.serverMode)return;this.updatePageIndex()}onRowSelection(t){if(this.selectionConfig==="single"){this.rows.filter((e=>e.uuid!==t.uuid)).map((t=>t.selected=false))}t.selected=!t.selected;if(this.selectionConfig!=="single"||t.selected){this.wcsGridSelectionChange.emit({row:this.wcsGridRowToWcsGridRowData(t)})}this.rows=sr(this.rows)}selectAllRows(){const t=this.getRowsForCurrentPage();const e=!this.allRowsAreSelected();t.map((t=>t.selected=e));this.wcsGridAllSelectionChange.emit({rows:e?t.map((t=>this.wcsGridRowToWcsGridRowData(t))):[]});this.rows=sr(this.rows)}allRowsAreSelected(){const t=this.getRowsForCurrentPage();return t.length>0&&t.filter((t=>t.selected)).length===t.length}getRowsForCurrentPage(){if(this.paginationEl){return this.rows.filter((t=>t.page===this.paginationEl.currentPage))}return this.rows}renderSelectionColumn(t){switch(this.selectionConfig){case"none":return;case"single":return n("td",null,n("wcs-radio",{checked:t.selected,onClick:this.onRowSelection.bind(this,t)}));case"multiple":return n("td",null,n("wcs-checkbox",{checked:t.selected,onWcsChange:this.onRowSelection.bind(this,t)}))}}getCellContent(t,e){if(e.formatter){return e.formatter(n,e.column,this.wcsGridRowToWcsGridRowData(t))}return e.content}totalColumnCount(){if(!this.columns){return 0}return this.columns.length+(this.selectionConfig==="none"?0:1)}render(){var t;return n(i,null,n("table",null,n("thead",null,this.selectionConfig==="none"?"":n("th",{class:"wcs-grid-selection-column"},this.selectionConfig==="single"?"":n("wcs-checkbox",{checked:this.allRowsAreSelected(),onWcsChange:this.selectAllRows.bind(this)})),n("slot",{name:"grid-column"})),n("tbody",null,this.loading?n("tr",null,n("td",{colSpan:this.totalColumnCount(),class:"loading"},n("wcs-spinner",null))):(t=this.rows)===null||t===void 0?void 0:t.filter((t=>this.serverMode||!this.paginationEl||t.page===this.paginationEl.currentPage)).map((t=>this.renderRow(t))))),n("slot",{name:"grid-pagination"}))}renderRow(t){var e;return n("tr",{class:t.selected?"selected":""},this.renderSelectionColumn(t),(e=t.cells)===null||e===void 0?void 0:e.map((e=>{if(e.column.hidden){return}return e.column.customCells?n("td",null,n("slot",{name:e.column.id+"-"+t.data[this.rowIdPath]})):n("td",{part:e.column.path+"-column"},this.getCellContent(t,e))})))}get el(){return o(this)}static get watchers(){return{data:["onDataChange"],selectedItems:["onSelectedItemsPropertyChange"]}}};cr.style=ar;export{cr as wcs_grid};
+//# sourceMappingURL=p-15058c29.entry.js.map