wcs-core 4.0.2 → 4.1.0

package/dist/collection/components/skeleton-text/skeleton-text.js

@@ -0,0 +1,71 @@
+import { h } from "@stencil/core";
+/**
+ * Use a skeleton text as a placeholder for titles or paragraphs.
+ */
+export class SkeletonText {
+  constructor() {
+    this.animation = 'glide';
+    this.height = 'body';
+  }
+  render() {
+    return h("span", { "aria-hidden": "true" });
+  }
+  static get is() { return "wcs-skeleton-text"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["skeleton-text.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["skeleton-text.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "animation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "WcsSkeletonAnimation",
+          "resolved": "\"glide\" | \"none\" | \"pulse\"",
+          "references": {
+            "WcsSkeletonAnimation": {
+              "location": "import",
+              "path": "../skeleton/skeleton-interface"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the animation of the skeleton"
+        },
+        "attribute": "animation",
+        "reflect": true,
+        "defaultValue": "'glide'"
+      },
+      "height": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'h1' | 'h2' | 'h3' | 'caption' | 'body'",
+          "resolved": "\"body\" | \"caption\" | \"h1\" | \"h2\" | \"h3\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the line height of the text skeleton"
+        },
+        "attribute": "height",
+        "reflect": false,
+        "defaultValue": "'body'"
+      }
+    };
+  }
+}
+//# sourceMappingURL=skeleton-text.js.map

package/dist/collection/components/skeleton-text/skeleton-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-text.js","sourceRoot":"","sources":["../../../src/components/skeleton-text/skeleton-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGvE;;GAEG;AAMH,MAAM,OAAO,YAAY;;qBAKoC,OAAO;kBAKN,MAAM;;EAEhE,MAAM;IACF,OAAO,2BAAkB,MAAM,GAAQ,CAAC;EAC5C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEJ","sourcesContent":["import { Component, ComponentInterface, h, Prop } from \"@stencil/core\";\nimport { WcsSkeletonAnimation } from \"../skeleton/skeleton-interface\";\n\n/**\n * Use a skeleton text as a placeholder for titles or paragraphs.\n */\n@Component({\n    tag: 'wcs-skeleton-text',\n    styleUrl: 'skeleton-text.scss',\n    shadow: true\n})\nexport class SkeletonText implements ComponentInterface {\n\n    /**\n     * Specifies the animation of the skeleton\n     */\n    @Prop({reflect: true}) animation: WcsSkeletonAnimation = 'glide';\n\n    /**\n     * Specifies the line height of the text skeleton\n     */\n    @Prop() height: 'h1' | 'h2' | 'h3' | 'caption' | 'body' = 'body';\n\n    render() {\n        return <span aria-hidden=\"true\"></span>;\n    }\n\n}\n"]}

package/dist/collection/shared-types.js.map

@@ -1 +1 @@
-{"version":3,"file":"shared-types.js","sourceRoot":"","sources":["../src/shared-types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Meant to be extracted with TS and used in each component differently, depending on the use case.\n * Global size guideline (with basis at 8px) :\n * xl = 56 px\n * l = 48 px\n * m = 40 px (default)\n * s = 32 px\n * xs = 24 px\n */\nexport type WcsSize = 'xs' | 's' | 'm' | 'l' | 'xl';\n"]}
+{"version":3,"file":"shared-types.js","sourceRoot":"","sources":["../src/shared-types.ts"],"names":[],"mappings":"AAAA,oDAAoD","sourcesContent":["/* eslint-disable @typescript-eslint/no-namespace */\n\n// This file contains global types shared between all stencil components\n\n/**\n * Meant to be extracted with TS and used in each component differently, depending on the use case.\n * Global size guideline (with basis at 8px) :\n * xl = 56 px\n * l = 48 px\n * m = 40 px (default)\n * s = 32 px\n * xs = 24 px\n */\nexport type WcsSize = 'xs' | 's' | 'm' | 'l' | 'xl';\n\n/***********************/\n/*      CSS TYPES      */\n/***********************/\n\n/**\n * Namespace containing types for representing all available CSS properties.\n * @namespace CssTypes\n */\nexport namespace CssTypes {\n    export type Height = CssUnits.LengthOrPercentage | CssUnits.Keyword | CssUnits.Global;\n    export type Width = CssUnits.LengthOrPercentage | CssUnits.Keyword | CssUnits.Global;\n}\n\n/**\n * Namespace containing types for representing CSS length units, percentages, keywords, and global values.\n * @namespace CssUnits\n */\nexport namespace CssUnits {\n    export type LengthUnits = 'ch' | 'em' | 'rem' | 'px' | 'vh' | 'vw';\n    export type Length = `${number}${LengthUnits}`;\n    export type Percentage = `${number}%`;\n    export type LengthOrPercentage = CssUnits.Length | CssUnits.Percentage;\n    export type Keyword = 'auto' | 'min-content' | 'max-content' | 'fit-content' | `fit-content(${CssUnits.LengthOrPercentage}`;\n    export type Global = 'unset' | 'initial' | 'inherit' | 'revert' | 'revert-layer';\n}\n\n\n"]}

package/dist/esm/grid-pagination-41354861.js.map

@@ -1 +1 @@
-{"file":"grid-pagination-41354861.js","mappings":"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","names":[],"sources":["./src/components/grid-pagination/grid-pagination-arrow.tsx","./src/components/grid-pagination/grid-pagination.scss?tag=wcs-grid-pagination&encapsulation=shadow","./src/components/grid-pagination/grid-pagination.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\ninterface GridPaginationArrowProps {\n    active: boolean;\n    order: 'next' | 'previous';\n    double?: boolean;\n}\n\nexport const GridPaginationArrow: FunctionalComponent<GridPaginationArrowProps> = ({ active, order, double = false }) => (\n    <svg style={{ marginLeft: 'auto', cursor: 'pointer' }} xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\">\n        <style type=\"text/css\">{`\n            .arrow-group {\n                transform-origin: 50% 51%;\n                transition: transform 175ms ease-in-out;\n            }\n            .arrow {\n                transition: fill 175ms ease-in-out;\n                fill: var(--wcs-text-light);\n            }\n            .second-arrow {\n                transform: translateY(-8px);\n            }\n            .next {\n                transform: rotate(90deg);\n            }\n            .previous {\n                transform: rotate(-90deg);\n            }\n            .active {\n                fill: var(--wcs-primary);\n            }\n        `}</style>\n        <g fill=\"none\" class={order + ' arrow-group'}>\n            <path class={(active ? 'active' : '') + ' arrow'} d=\"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z\" />\n            <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n        </g>\n        {\n            double ?\n                <g fill=\"none\" class={order + ' arrow-group'}>\n                    <path class={(active ? 'active' : '') + ' arrow second-arrow'} d=\"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z\" />\n                    <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n                </g>\n                : ''\n        }\n    </svg>\n);\n",":host {\n    display: block;\n    border-style: solid none none;\n    border-width: 1px;\n    border-color: var(--wcs-text-light);\n}\n\n.container {\n    display: grid;\n    grid-template-columns: auto auto auto;\n    justify-content: space-between;\n    color: var(--wcs-text-medium);\n}\n\n.available-page-sizes {\n    width: auto;\n}\n\n.page-management, .page-size, .items-count {\n    display: flex;\n    align-items: center;\n}\n\n.pagination-arrow {\n    display: flex;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Event, EventEmitter,\n    h,\n    Host,\n    Prop\n} from '@stencil/core';\nimport {\n    WcsGridPaginationChangeEventDetails\n} from '../grid/grid-interface';\nimport { SelectChangeEventDetail } from '../select/select-interface';\nimport { GridPaginationArrow } from './grid-pagination-arrow';\n\n@Component({\n    tag: 'wcs-grid-pagination',\n    styleUrl: 'grid-pagination.scss',\n    shadow: true\n})\nexport class GridPagination implements ComponentInterface {\n    static readonly INDEX_FIRST_PAGE: number = 0;\n    @Prop() availablePageSizes: number[] = [10, 20, 50];\n    @Prop() currentPage: number = GridPagination.INDEX_FIRST_PAGE;\n    @Prop() pageSize: number = this.availablePageSizes[0];\n    @Prop() itemsCount: number = 0;\n    @Prop() pageCount: number = 1;\n    @Event() wcsGridPaginationChange!: EventEmitter<WcsGridPaginationChangeEventDetails>;\n\n    private lastPage(): void {\n        this.currentPage = this.pageCount - 1;\n        this.emitPaginationChange();\n    }\n\n    private nextPage(): void {\n        if (this.canGoToNextPage()) {\n            this.currentPage++;\n            this.emitPaginationChange();\n        }\n    }\n\n    private canGoToNextPage(): boolean {\n        return this.currentPage + 1 < this.pageCount;\n    }\n\n    private previousPage(): void {\n        if (this.canGoToPreviousPage()) {\n            this.currentPage--;\n            this.emitPaginationChange();\n        }\n    }\n\n    private canGoToPreviousPage(): boolean {\n        return this.currentPage > 0;\n    }\n\n    private firstPage(): void {\n        this.currentPage = 0;\n        this.emitPaginationChange();\n    }\n\n    private onChangePagesize(event: CustomEvent<SelectChangeEventDetail>): void {\n        this.pageSize = event.detail.value;\n        if (this.currentPage + 1 > this.pageSize) {\n            this.currentPage = 0;\n        }\n        this.emitPaginationChange();\n    }\n\n    private emitPaginationChange(): void {\n        this.wcsGridPaginationChange.emit({\n            pagination: {\n                currentPage: this.currentPage,\n                pageSize: this.pageSize,\n                itemsCount: this.itemsCount,\n                pageCount: this.pageCount\n            }\n        });\n    }\n\n    render(): any {\n        return (<Host slot=\"grid-pagination\">\n            <div class=\"container\">\n                <div class=\"page-size\">\n                    <wcs-select placeholder=\"Eléments par page\" class=\"available-page-sizes\" value={this.pageSize} onWcsChange={this.onChangePagesize.bind(this)}>\n                        {\n                            this.availablePageSizes.map((pageSize) =>\n                                <wcs-select-option value={pageSize}>{pageSize}</wcs-select-option>\n                            )\n                        }\n                    </wcs-select>\n                    <span>&nbsp;éléments par page</span>\n                </div>\n\n                <div class=\"items-count\">\n                    <span>{this.itemsCount} éléments</span>\n                </div>\n\n                <div class=\"page-management\">\n                    <span class=\"pagination-arrow\" onClick={this.firstPage.bind(this)}>\n                        <GridPaginationArrow active={this.canGoToPreviousPage()} order=\"previous\" double></GridPaginationArrow>\n                    </span>\n                    <span class=\"pagination-arrow\" onClick={this.previousPage.bind(this)}>\n                        <GridPaginationArrow active={this.canGoToPreviousPage()} order=\"previous\"></GridPaginationArrow>\n                    </span>\n\n                    <span>{this.currentPage + 1} / {this.pageCount}</span>\n\n                    <span class=\"pagination-arrow\" onClick={this.nextPage.bind(this)}>\n                        <GridPaginationArrow active={this.canGoToNextPage()} order=\"next\"></GridPaginationArrow>\n                    </span>\n                    <span class=\"pagination-arrow\" onClick={this.lastPage.bind(this)}>\n                        <GridPaginationArrow active={this.canGoToNextPage()} order=\"next\" double></GridPaginationArrow>\n                    </span>\n                </div>\n            </div>\n        </Host>)\n    }\n}\n"],"version":3}
+{"file":"grid-pagination-41354861.js","mappings":"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","names":[],"sources":["./src/components/grid-pagination/grid-pagination-arrow.tsx","./src/components/grid-pagination/grid-pagination.scss?tag=wcs-grid-pagination&encapsulation=shadow","./src/components/grid-pagination/grid-pagination.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\ninterface GridPaginationArrowProps {\n    active: boolean;\n    order: 'next' | 'previous';\n    double?: boolean;\n}\n\nexport const GridPaginationArrow: FunctionalComponent<GridPaginationArrowProps> = ({ active, order, double = false }) => (\n    <svg style={{ marginLeft: 'auto', cursor: 'pointer' }} xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\">\n        <style type=\"text/css\">{`\n            .arrow-group {\n                transform-origin: 50% 51%;\n                transition: transform 175ms ease-in-out;\n            }\n            .arrow {\n                transition: fill 175ms ease-in-out;\n                fill: var(--wcs-text-light);\n            }\n            .second-arrow {\n                transform: translateY(-8px);\n            }\n            .next {\n                transform: rotate(90deg);\n            }\n            .previous {\n                transform: rotate(-90deg);\n            }\n            .active {\n                fill: var(--wcs-primary);\n            }\n        `}</style>\n        <g fill=\"none\" class={order + ' arrow-group'}>\n            <path class={(active ? 'active' : '') + ' arrow'} d=\"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z\" />\n            <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n        </g>\n        {\n            double ?\n                <g fill=\"none\" class={order + ' arrow-group'}>\n                    <path class={(active ? 'active' : '') + ' arrow second-arrow'} d=\"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z\" />\n                    <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n                </g>\n                : ''\n        }\n    </svg>\n);\n",":host {\n    display: block;\n    border-style: solid none none;\n    border-width: 1px;\n    border-color: var(--wcs-text-light);\n}\n\n.container {\n    display: grid;\n    grid-template-columns: auto auto auto;\n    justify-content: space-between;\n    color: var(--wcs-text-medium);\n}\n\n.available-page-sizes {\n    width: auto;\n}\n\n.page-management, .page-size, .items-count {\n    display: flex;\n    align-items: center;\n}\n\n.pagination-arrow {\n    display: flex;\n}\n","import {\n    Component,\n    ComponentInterface,\n    Event, EventEmitter,\n    h,\n    Host,\n    Prop\n} from '@stencil/core';\nimport {\n    WcsGridPaginationChangeEventDetails\n} from '../grid/grid-interface';\nimport { SelectChangeEventDetail } from '../select/select-interface';\nimport { GridPaginationArrow } from './grid-pagination-arrow';\n\n/**\n * The grid pagination is a subcomponent of `wcs-grid`, slotted in `grid-pagination` under the `<table>` element.\n */\n@Component({\n    tag: 'wcs-grid-pagination',\n    styleUrl: 'grid-pagination.scss',\n    shadow: true\n})\nexport class GridPagination implements ComponentInterface {\n    static readonly INDEX_FIRST_PAGE: number = 0;\n    /**\n     * Set the available page sizes in the pagination dropdown on the left.\n     */\n    @Prop() availablePageSizes: number[] = [10, 20, 50];\n    /**\n     * The current page of the pagination. First page starts at index 0.\n     */\n    @Prop() currentPage: number = GridPagination.INDEX_FIRST_PAGE;\n    /**\n     * Maximum number of elements shown per page.  \n     * Default is the first value of `availablePageSizes`.\n     */\n    @Prop() pageSize: number = this.availablePageSizes[0];\n    /**\n     * Total elements in the grid.  \n     * - **Grid in `Server mode`** : You have to set `itemsCount` = your total data length.  \n     * - **Grid not in Server mode** : Do not set it manually : itemsCount is set and updated every pagination refresh.\n     */\n    @Prop() itemsCount: number = 0;\n    /**\n     * Max number of pages.  \n     * - **Grid in `Server mode`** : You have to set `pageCount` = `itemsCount` divided by `pageSize`.  \n     * - **Grid not in Server mode** : Do not set it manually : pageCount is set and updated every pagination refresh.\n     */\n    @Prop() pageCount: number = 1;\n    /**\n     * Event emitted when the pagination changes.\n     */\n    @Event() wcsGridPaginationChange!: EventEmitter<WcsGridPaginationChangeEventDetails>;\n\n    private lastPage(): void {\n        this.currentPage = this.pageCount - 1;\n        this.emitPaginationChange();\n    }\n\n    private nextPage(): void {\n        if (this.canGoToNextPage()) {\n            this.currentPage++;\n            this.emitPaginationChange();\n        }\n    }\n\n    private canGoToNextPage(): boolean {\n        return this.currentPage + 1 < this.pageCount;\n    }\n\n    private previousPage(): void {\n        if (this.canGoToPreviousPage()) {\n            this.currentPage--;\n            this.emitPaginationChange();\n        }\n    }\n\n    private canGoToPreviousPage(): boolean {\n        return this.currentPage > 0;\n    }\n\n    private firstPage(): void {\n        this.currentPage = 0;\n        this.emitPaginationChange();\n    }\n\n    private onChangePagesize(event: CustomEvent<SelectChangeEventDetail>): void {\n        this.pageSize = event.detail.value;\n        if (this.currentPage + 1 > this.pageSize) {\n            this.currentPage = 0;\n        }\n        this.emitPaginationChange();\n    }\n\n    private emitPaginationChange(): void {\n        this.wcsGridPaginationChange.emit({\n            pagination: {\n                currentPage: this.currentPage,\n                pageSize: this.pageSize,\n                itemsCount: this.itemsCount,\n                pageCount: this.pageCount\n            }\n        });\n    }\n\n    render(): any {\n        return (<Host slot=\"grid-pagination\">\n            <div class=\"container\">\n                <div class=\"page-size\">\n                    <wcs-select placeholder=\"Eléments par page\" class=\"available-page-sizes\" value={this.pageSize} onWcsChange={this.onChangePagesize.bind(this)}>\n                        {\n                            this.availablePageSizes.map((pageSize) =>\n                                <wcs-select-option value={pageSize}>{pageSize}</wcs-select-option>\n                            )\n                        }\n                    </wcs-select>\n                    <span>&nbsp;éléments par page</span>\n                </div>\n\n                <div class=\"items-count\">\n                    <span>{this.itemsCount} éléments</span>\n                </div>\n\n                <div class=\"page-management\">\n                    <span class=\"pagination-arrow\" onClick={this.firstPage.bind(this)}>\n                        <GridPaginationArrow active={this.canGoToPreviousPage()} order=\"previous\" double></GridPaginationArrow>\n                    </span>\n                    <span class=\"pagination-arrow\" onClick={this.previousPage.bind(this)}>\n                        <GridPaginationArrow active={this.canGoToPreviousPage()} order=\"previous\"></GridPaginationArrow>\n                    </span>\n\n                    <span>{this.currentPage + 1} / {this.pageCount}</span>\n\n                    <span class=\"pagination-arrow\" onClick={this.nextPage.bind(this)}>\n                        <GridPaginationArrow active={this.canGoToNextPage()} order=\"next\"></GridPaginationArrow>\n                    </span>\n                    <span class=\"pagination-arrow\" onClick={this.lastPage.bind(this)}>\n                        <GridPaginationArrow active={this.canGoToNextPage()} order=\"next\" double></GridPaginationArrow>\n                    </span>\n                </div>\n            </div>\n        </Host>)\n    }\n}\n"],"version":3}