wcs-core 4.0.2 → 4.1.0

package/dist/esm/wcs-skeleton-circle.entry.js

@@ -0,0 +1,19 @@
+import { r as registerInstance, h, H as Host } from './index-dc4d96d4.js';
+
+const skeletonCircleCss = ":host{display:block;position:relative;overflow:hidden}:host span{display:flex;flex:1 1 auto;height:100%;width:100%;min-height:1rem;background:#ededed;background:linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.15) 37%, rgba(0, 0, 0, 0.06) 63%);background-size:400% 100%}:host([animation=glide]) span{animation:glide 1.5s ease-in-out 0.5s infinite}:host([animation=pulse]){animation:pulse 1.5s ease-in-out 0.5s infinite}@keyframes glide{from{background-position:100% 50%}to{background-position:0 50%}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}:host{aspect-ratio:1/1;border-radius:999rem}";
+
+const SkeletonCircle = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.animation = 'glide';
+    this.radius = 50;
+  }
+  render() {
+    return (h(Host, { style: { width: `${this.radius}px`, height: `${this.radius}px` } }, h("span", { "aria-hidden": "true" })));
+  }
+};
+SkeletonCircle.style = skeletonCircleCss;
+
+export { SkeletonCircle as wcs_skeleton_circle };
+
+//# sourceMappingURL=wcs-skeleton-circle.entry.js.map

package/dist/esm/wcs-skeleton-circle.entry.js.map

@@ -0,0 +1 @@
+{"file":"wcs-skeleton-circle.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,+mBAA+mB;;MCW5nB,cAAc;;;qBAKkC,OAAO;kBAKxB,EAAE;;EAE1C,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,KAAK,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI,EAAC,IAChE,2BAAkB,MAAM,GAAQ,CAC7B,EACT;GACL;;;;;;","names":[],"sources":["./src/components/skeleton-circle/skeleton-circle.scss?tag=wcs-skeleton-circle&encapsulation=shadow","./src/components/skeleton-circle/skeleton-circle.tsx"],"sourcesContent":["@import \"../skeleton/skeleton.scss\";\n\n:host {\n    aspect-ratio: 1/1;\n    border-radius: 999rem;\n}\n","import { Component, ComponentInterface, h, Host, Prop } from \"@stencil/core\";\nimport { WcsSkeletonAnimation } from \"../skeleton/skeleton-interface\";\n\n/**\n * Use a skeleton circle as a placeholder round images, illustrations or components\n */\n@Component({\n    tag: 'wcs-skeleton-circle',\n    styleUrl: 'skeleton-circle.scss',\n    shadow: true\n})\nexport class SkeletonCircle implements ComponentInterface {\n\n    /**\n     * Specifies the animation of the skeleton\n     */\n    @Prop({reflect: true}) animation: WcsSkeletonAnimation = 'glide';\n\n    /**\n     * Specifies the radius of the circle in px\n     */\n    @Prop({reflect: true}) radius: number = 50;\n\n    render() {\n        return (\n            <Host style={{width: `${this.radius}px`, height: `${this.radius}px`}}>\n                <span aria-hidden=\"true\"></span>\n            </Host>\n        );\n    }\n\n}\n"],"version":3}

package/dist/esm/wcs-skeleton-rectangle.entry.js

@@ -0,0 +1,21 @@
+import { r as registerInstance, h, H as Host } from './index-dc4d96d4.js';
+
+const skeletonRectangleCss = ":host{display:block;position:relative;overflow:hidden}:host span{display:flex;flex:1 1 auto;height:100%;width:100%;min-height:1rem;background:#ededed;background:linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.15) 37%, rgba(0, 0, 0, 0.06) 63%);background-size:400% 100%}:host([animation=glide]) span{animation:glide 1.5s ease-in-out 0.5s infinite}:host([animation=pulse]){animation:pulse 1.5s ease-in-out 0.5s infinite}@keyframes glide{from{background-position:100% 50%}to{background-position:0 50%}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}:host{--wcs-skeleton-border-radius:0rem}:host span{border-radius:var(--wcs-skeleton-border-radius)}:host([rounded]){--wcs-skeleton-border-radius:0.5rem}";
+
+const SkeletonRectangle = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.animation = 'glide';
+    this.rounded = false;
+    this.height = 'auto';
+    this.width = 'auto';
+  }
+  render() {
+    return (h(Host, { style: { height: this.height, width: this.width } }, h("span", null)));
+  }
+};
+SkeletonRectangle.style = skeletonRectangleCss;
+
+export { SkeletonRectangle as wcs_skeleton_rectangle };
+
+//# sourceMappingURL=wcs-skeleton-rectangle.entry.js.map

package/dist/esm/wcs-skeleton-rectangle.entry.js.map

@@ -0,0 +1 @@
+{"file":"wcs-skeleton-rectangle.entry.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,2tBAA2tB;;MCc3uB,iBAAiB;;;qBAK+B,OAAO;mBAKtB,KAAK;kBAKE,MAAM;iBAKR,MAAM;;EAErD,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,IACjD,eAAa,CACV,EACT;GACL;;;;;;","names":[],"sources":["./src/components/skeleton-rectangle/skeleton-rectangle.scss?tag=wcs-skeleton-rectangle&encapsulation=shadow","./src/components/skeleton-rectangle/skeleton-rectangle.tsx"],"sourcesContent":["@import \"../skeleton/skeleton.scss\";\n\n:host {\n    --wcs-skeleton-border-radius: 0rem;\n\n    span {\n        border-radius: var(--wcs-skeleton-border-radius);\n    }\n}\n\n:host([rounded]) {\n    --wcs-skeleton-border-radius: 0.5rem;\n}\n","import { Component, ComponentInterface, h, Host, Prop } from \"@stencil/core\";\nimport { WcsSkeletonAnimation } from \"../skeleton/skeleton-interface\";\nimport { CssTypes } from \"../../shared-types\";\n\n/**\n * Use a skeleton rectangle as a placeholder for large images or square-shaped components\n *\n * @cssprop --wcs-skeleton-border-radius - Controls the border-radius of the 'rounded' skeleton rectangle (default 0.5rem)\n */\n@Component({\n    tag: 'wcs-skeleton-rectangle',\n    styleUrl: 'skeleton-rectangle.scss',\n    shadow: true\n})\nexport class SkeletonRectangle implements ComponentInterface {\n\n    /**\n     * Specifies the animation of the skeleton\n     */\n    @Prop({reflect: true}) animation: WcsSkeletonAnimation = 'glide';\n\n    /**\n     * Adds a border radius on the skeleton if true\n     */\n    @Prop({reflect: true}) rounded: boolean = false;\n    \n    /**\n     * Specifies the height of the skeleton (can be any valid CSS value)\n     */\n    @Prop({reflect: true}) height: CssTypes.Height = 'auto';\n    \n    /**\n     * Specifies the width of the skeleton (can be any valid CSS value)\n     */\n    @Prop({reflect: true}) width: CssTypes.Width = 'auto';\n\n    render() {\n        return (\n            <Host style={{height: this.height, width: this.width}}>\n                <span></span>\n            </Host>\n        );\n    }\n\n}\n"],"version":3}

package/dist/esm/wcs-skeleton-text.entry.js

@@ -0,0 +1,19 @@
+import { r as registerInstance, h } from './index-dc4d96d4.js';
+
+const skeletonTextCss = ":host{display:block;position:relative;overflow:hidden}:host span{display:flex;flex:1 1 auto;height:100%;width:100%;min-height:1rem;background:#ededed;background:linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.15) 37%, rgba(0, 0, 0, 0.06) 63%);background-size:400% 100%}:host([animation=glide]) span{animation:glide 1.5s ease-in-out 0.5s infinite}:host([animation=pulse]){animation:pulse 1.5s ease-in-out 0.5s infinite}@keyframes glide{from{background-position:100% 50%}to{background-position:0 50%}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}:host([height=h1]){height:42px}:host([height=h2]){height:36px}:host([height=h3]){height:30px}:host([height=caption]){height:24px}:host([height=body]){height:16px}";
+
+const SkeletonText = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.animation = 'glide';
+    this.height = 'body';
+  }
+  render() {
+    return h("span", { "aria-hidden": "true" });
+  }
+};
+SkeletonText.style = skeletonTextCss;
+
+export { SkeletonText as wcs_skeleton_text };
+
+//# sourceMappingURL=wcs-skeleton-text.entry.js.map

package/dist/esm/wcs-skeleton-text.entry.js.map

@@ -0,0 +1 @@
+{"file":"wcs-skeleton-text.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,quBAAquB;;MCWhvB,YAAY;;;qBAKoC,OAAO;kBAKN,MAAM;;EAEhE,MAAM;IACF,OAAO,2BAAkB,MAAM,GAAQ,CAAC;GAC3C;;;;;;","names":[],"sources":["./src/components/skeleton-text/skeleton-text.scss?tag=wcs-skeleton-text&encapsulation=shadow","./src/components/skeleton-text/skeleton-text.tsx"],"sourcesContent":["@import \"../skeleton/skeleton.scss\";\n\n:host([height=h1]) {\n    height: 42px;\n}\n\n:host([height=h2]) {\n    height: 36px;\n}\n\n:host([height=h3]) {\n    height: 30px;\n}\n\n:host([height=caption]) {\n    height: 24px;\n}\n\n:host([height=body]) {\n    height: 16px;\n}\n\n","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"],"version":3}

package/dist/esm/wcs.js

@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["wcs-editable-field",[[1,"wcs-editable-field",{"type":[1],"label":[1],"readonly":[4],"value":[1032],"validateFn":[16],"formatFn":[16],"errorMsg":[1,"error-msg"],"size":[513],"currentState":[32],"isError":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-horizontal-stepper",[[1,"wcs-horizontal-stepper",{"currentStep":[1026,"current-step"],"steps":[16],"mode":[1],"checkOnComplete":[4,"check-on-complete"],"internalCurrentStep":[32],"previous":[64],"next":[64]}]]],["wcs-counter",[[1,"wcs-counter",{"size":[513],"label":[1],"min":[1026],"max":[1026],"step":[1026],"value":[1026],"currentValue":[32],"displayedValue":[32]}]]],["wcs-grid",[[1,"wcs-grid",{"serverMode":[4,"server-mode"],"data":[16],"loading":[4],"selectionConfig":[1,"selection-config"],"selectedItems":[8,"selected-items"],"wcsGridPaginationId":[1,"wcs-grid-pagination-id"],"rowIdPath":[1,"row-id-path"],"columns":[32],"paginationEl":[32],"rows":[32]},[[0,"wcsHiddenChange","onHiddenColumnChange"],[0,"wcsSortChange","sortChangeEventHandler"],[0,"wcsGridPaginationChange","paginationChangeEventHandler"],[8,"wcsGridPaginationChange","paginationChangeEventHandlerOutside"]]]]],["wcs-grid-pagination",[[1,"wcs-grid-pagination",{"availablePageSizes":[16],"currentPage":[2,"current-page"],"pageSize":[2,"page-size"],"itemsCount":[2,"items-count"],"pageCount":[2,"page-count"]}]]],["wcs-modal",[[4,"wcs-modal",{"withoutBackdrop":[516,"without-backdrop"],"show":[516],"showCloseButton":[516,"show-close-button"],"size":[1],"hideActions":[516,"hide-actions"]},[[4,"keydown","onKeyDown"]]]]],["wcs-dropdown",[[1,"wcs-dropdown",{"noArrow":[4,"no-arrow"],"mode":[1],"shape":[1],"disabled":[4],"placement":[1],"expanded":[32]},[[8,"click","onWindowClickEvent"],[0,"wcsDropdownItemClick","dropdownItemClick"],[0,"keydown","onKeyDown"]]]]],["wcs-galactic-menu",[[1,"wcs-galactic-menu",{"text":[1],"showPopoverMenu":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-input",[[17,"wcs-input",{"fireFocusEvents":[4,"fire-focus-events"],"accept":[1],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"clearInput":[4,"clear-input"],"clearOnEdit":[4,"clear-on-edit"],"debounce":[2],"prefixLabel":[1,"prefix-label"],"suffixLabel":[1,"suffix-label"],"disabled":[4],"enterkeyhint":[1],"size":[513],"icon":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"state":[513],"step":[1],"type":[1],"value":[1032],"hasFocus":[32],"passwordReveal":[32],"setFocus":[64],"setBlur":[64],"getInputElement":[64]}]]],["wcs-textarea",[[1,"wcs-textarea",{"fireFocusEvents":[4,"fire-focus-events"],"autocapitalize":[1],"autofocus":[4],"clearOnEdit":[1028,"clear-on-edit"],"debounce":[2],"disabled":[4],"icon":[1],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"state":[513],"cols":[2],"rows":[2],"wrap":[1],"autoGrow":[4,"auto-grow"],"value":[1025],"resize":[513],"hasFocus":[32],"fitContent":[64],"setFocus":[64],"setBlur":[64],"getInputElement":[64]}]]],["wcs-accordion",[[1,"wcs-accordion",{"hideActionText":[516,"hide-action-text"],"highlight":[516],"groupContentWithHeader":[516,"group-content-with-header"]},[[0,"wcsOpenChange","wcsOpenChangeHandler"]]]]],["wcs-accordion-content",[[1,"wcs-accordion-content"]]],["wcs-accordion-header",[[1,"wcs-accordion-header"]]],["wcs-accordion-panel",[[1,"wcs-accordion-panel",{"open":[1540],"hideActionText":[516,"hide-action-text"],"highlight":[516],"groupContentWithHeader":[516,"group-content-with-header"],"close":[64]}]]],["wcs-action-bar",[[1,"wcs-action-bar",{"gutter":[4],"hasTabs":[32]}]]],["wcs-app",[[1,"wcs-app"]]],["wcs-badge",[[1,"wcs-badge",{"shape":[1],"color":[1]}]]],["wcs-card",[[1,"wcs-card",{"mode":[1537]}]]],["wcs-card-body",[[1,"wcs-card-body"]]],["wcs-com-nav",[[1,"wcs-com-nav",{"appName":[1,"app-name"],"mobileMenuOpen":[32],"currentActiveSizing":[32]},[[0,"wcsClickOnFinalAction","onClickOnFinalAction"],[0,"wcsCategoryItemClicked","onClickOnFinalActionCat"]]]]],["wcs-com-nav-category",[[1,"wcs-com-nav-category",{"label":[1],"categoryOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsCategoryOpened","onSubmenuOpened"]]]]],["wcs-com-nav-submenu",[[1,"wcs-com-nav-submenu",{"label":[1],"panelTitle":[1,"panel-title"],"panelDescription":[1,"panel-description"],"menuOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsSubmenuOpened","onSubmenuOpened"],[8,"keydown","onEscapeKeyDown"],[0,"wcsCategoryItemClicked","wcsCategoryItemClickedHandler"]]]]],["wcs-divider",[[1,"wcs-divider"]]],["wcs-dropdown-divider",[[1,"wcs-dropdown-divider"]]],["wcs-dropdown-header",[[1,"wcs-dropdown-header"]]],["wcs-dropdown-item",[[4,"wcs-dropdown-item",null,[[1,"mousedown","onMouseDown"],[0,"keydown","onKeyDown"]]]]],["wcs-field",[[1,"wcs-field"]]],["wcs-field-content",[[1,"wcs-field-content"]]],["wcs-field-label",[[1,"wcs-field-label"]]],["wcs-footer",[[1,"wcs-footer"]]],["wcs-galactic",[[1,"wcs-galactic",{"text":[1],"show":[32]}]]],["wcs-grid-column",[[1,"wcs-grid-column",{"path":[1],"name":[1],"sort":[4],"sortFn":[16],"formatter":[16],"sortOrder":[1025,"sort-order"],"width":[1],"customCells":[4,"custom-cells"],"hidden":[4]}]]],["wcs-grid-custom-cell",[[1,"wcs-grid-custom-cell",{"columnId":[1,"column-id"],"rowId":[8,"row-id"]}]]],["wcs-header",[[1,"wcs-header"]]],["wcs-hint",[[1,"wcs-hint",{"small":[1540]}]]],["wcs-icon",[[0,"wcs-icon",{"icon":[1],"size":[1]}]]],["wcs-label",[[1,"wcs-label",{"required":[516]}]]],["wcs-list-item",[[1,"wcs-list-item",{"activated":[1028]}]]],["wcs-list-item-properties",[[1,"wcs-list-item-properties"]]],["wcs-list-item-property",[[1,"wcs-list-item-property"]]],["wcs-native-select",[[1,"wcs-native-select",{"size":[513],"expanded":[32],"disabled":[32]}]]],["wcs-nav",[[1,"wcs-nav"]]],["wcs-nav-item",[[4,"wcs-nav-item",{"text":[513],"href":[513]},[[0,"keydown","onKeyDown"]]]]],["wcs-progress-radial",[[1,"wcs-progress-radial",{"size":[2],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio-group",[[1,"wcs-radio-group",{"value":[8],"name":[520],"mode":[513]},[[0,"wcsRadioClick","selectedOptionChanged"]]]]],["wcs-switch",[[1,"wcs-switch",{"name":[1],"checked":[516],"labelAlignment":[513,"label-alignment"],"disabled":[4]}]]],["wcs-tab",[[1,"wcs-tab",{"header":[513],"itemKey":[8,"item-key"]}]]],["wcs-tabs",[[1,"wcs-tabs",{"align":[513],"selectedIndex":[2,"selected-index"],"selectedKey":[8,"selected-key"],"headersOnly":[4,"headers-only"],"gutter":[4],"headers":[32],"currentActiveTabIndex":[32]},[[0,"tabLoaded","onTabLoaded"]]]]],["wcs-tooltip",[[1,"wcs-tooltip",{"for":[1],"position":[513],"interactive":[4],"maxWidth":[8,"max-width"],"delay":[2],"duration":[2],"trigger":[1],"theme":[1],"content":[1],"appendTo":[1,"append-to"],"hide":[64],"show":[64],"disable":[64],"enable":[64]}]]],["wcs-progress-bar",[[1,"wcs-progress-bar",{"small":[4],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio",[[1,"wcs-radio",{"mode":[513],"value":[1544],"label":[1537],"checked":[1540],"disabled":[1028]},[[0,"keydown","onKeyDown"]]]]],["wcs-select_2",[[4,"wcs-select-option",{"disabled":[1540],"selected":[1540],"value":[8],"chipColor":[1,"chip-color"],"chipBackgroundColor":[1,"chip-background-color"],"multiple":[1540]},[[1,"mousedown","onMouseDown"],[0,"keydown","handleKeydown"]]],[1,"wcs-select",{"size":[513],"value":[1032],"placeholder":[1537],"disabled":[1028],"multiple":[516],"chips":[516],"name":[1],"compareWith":[16],"expanded":[32],"hasLoaded":[32],"displayText":[32],"focused":[32],"overlayDirection":[32],"open":[64],"close":[64]},[[1,"mousedown","onMouseDown"],[8,"click","onWindowClickEvent"],[0,"keydown","onKeyDown"],[0,"wcsSelectOptionClick","selectedOptionChanged"]]]]],["wcs-error_2",[[1,"wcs-error"],[1,"wcs-form-field",{"isError":[1540,"is-error"],"hasPrefix":[32],"hasSuffix":[32],"spiedElement":[32]}]]],["wcs-checkbox",[[1,"wcs-checkbox",{"name":[1],"indeterminate":[1540],"checked":[1540],"labelAlignment":[1537,"label-alignment"],"disabled":[4]}]]],["wcs-button",[[17,"wcs-button",{"type":[1025],"href":[1],"target":[1],"disabled":[516],"ripple":[4],"size":[513],"shape":[513],"mode":[513],"loading":[1028]},[[0,"click","onClick"]]]]],["wcs-mat-icon",[[1,"wcs-mat-icon",{"icon":[1],"size":[1],"family":[1]}]]],["wcs-spinner",[[1,"wcs-spinner",{"mode":[513]}]]]], options);
+  return bootstrapLazy([["wcs-editable-field",[[1,"wcs-editable-field",{"type":[1],"label":[1],"readonly":[4],"value":[1032],"validateFn":[16],"formatFn":[16],"errorMsg":[1,"error-msg"],"size":[513],"currentState":[32],"isError":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-horizontal-stepper",[[1,"wcs-horizontal-stepper",{"currentStep":[1026,"current-step"],"steps":[16],"mode":[1],"checkOnComplete":[4,"check-on-complete"],"internalCurrentStep":[32],"previous":[64],"next":[64]}]]],["wcs-counter",[[1,"wcs-counter",{"size":[513],"label":[1],"min":[1026],"max":[1026],"step":[1026],"value":[1026],"displayedValue":[32]}]]],["wcs-grid",[[1,"wcs-grid",{"serverMode":[4,"server-mode"],"data":[16],"loading":[4],"selectionConfig":[1,"selection-config"],"selectedItems":[8,"selected-items"],"wcsGridPaginationId":[1,"wcs-grid-pagination-id"],"rowIdPath":[1,"row-id-path"],"columns":[32],"paginationEl":[32],"rows":[32]},[[0,"wcsHiddenChange","onHiddenColumnChange"],[0,"wcsSortChange","sortChangeEventHandler"],[0,"wcsGridPaginationChange","paginationChangeEventHandler"],[8,"wcsGridPaginationChange","paginationChangeEventHandlerOutside"]]]]],["wcs-grid-pagination",[[1,"wcs-grid-pagination",{"availablePageSizes":[16],"currentPage":[2,"current-page"],"pageSize":[2,"page-size"],"itemsCount":[2,"items-count"],"pageCount":[2,"page-count"]}]]],["wcs-modal",[[4,"wcs-modal",{"withoutBackdrop":[516,"without-backdrop"],"show":[516],"showCloseButton":[516,"show-close-button"],"size":[1],"hideActions":[516,"hide-actions"]},[[4,"keydown","onKeyDown"]]]]],["wcs-dropdown",[[1,"wcs-dropdown",{"noArrow":[4,"no-arrow"],"mode":[1],"shape":[1],"disabled":[4],"placement":[1],"expanded":[32]},[[8,"click","onWindowClickEvent"],[0,"wcsDropdownItemClick","dropdownItemClick"],[0,"keydown","onKeyDown"]]]]],["wcs-galactic-menu",[[1,"wcs-galactic-menu",{"text":[1],"showPopoverMenu":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-input",[[17,"wcs-input",{"fireFocusEvents":[4,"fire-focus-events"],"accept":[1],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"clearInput":[4,"clear-input"],"clearOnEdit":[4,"clear-on-edit"],"debounce":[2],"prefixLabel":[1,"prefix-label"],"suffixLabel":[1,"suffix-label"],"disabled":[4],"enterkeyhint":[1],"size":[513],"icon":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"state":[513],"step":[1],"type":[1],"value":[1032],"hasFocus":[32],"passwordReveal":[32],"setFocus":[64],"setBlur":[64],"getInputElement":[64]}]]],["wcs-textarea",[[1,"wcs-textarea",{"fireFocusEvents":[4,"fire-focus-events"],"autocapitalize":[1],"autofocus":[4],"clearOnEdit":[1028,"clear-on-edit"],"debounce":[2],"disabled":[4],"icon":[1],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"state":[513],"cols":[2],"rows":[2],"wrap":[1],"autoGrow":[4,"auto-grow"],"value":[1025],"resize":[513],"hasFocus":[32],"fitContent":[64],"setFocus":[64],"setBlur":[64],"getInputElement":[64]}]]],["wcs-accordion",[[1,"wcs-accordion",{"hideActionText":[516,"hide-action-text"],"highlight":[516],"groupContentWithHeader":[516,"group-content-with-header"]},[[0,"wcsOpenChange","wcsOpenChangeHandler"]]]]],["wcs-accordion-content",[[1,"wcs-accordion-content"]]],["wcs-accordion-header",[[1,"wcs-accordion-header"]]],["wcs-accordion-panel",[[1,"wcs-accordion-panel",{"open":[1540],"hideActionText":[516,"hide-action-text"],"highlight":[516],"groupContentWithHeader":[516,"group-content-with-header"],"close":[64]}]]],["wcs-action-bar",[[1,"wcs-action-bar",{"gutter":[4],"hasTabs":[32]}]]],["wcs-app",[[1,"wcs-app"]]],["wcs-badge",[[1,"wcs-badge",{"shape":[1],"color":[1]}]]],["wcs-card",[[1,"wcs-card",{"mode":[1537]}]]],["wcs-card-body",[[1,"wcs-card-body"]]],["wcs-com-nav",[[1,"wcs-com-nav",{"appName":[1,"app-name"],"mobileMenuOpen":[32],"currentActiveSizing":[32]},[[0,"wcsClickOnFinalAction","onClickOnFinalAction"],[0,"wcsCategoryItemClicked","onClickOnFinalActionCat"],[8,"keydown","exitMobileMenuOnKeyDown"]]]]],["wcs-com-nav-category",[[1,"wcs-com-nav-category",{"label":[1],"categoryOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsCategoryOpened","onSubmenuOpened"]]]]],["wcs-com-nav-submenu",[[1,"wcs-com-nav-submenu",{"label":[1],"panelTitle":[1,"panel-title"],"panelDescription":[1,"panel-description"],"menuOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsSubmenuOpened","onSubmenuOpened"],[8,"keydown","onEscapeKeyDown"],[0,"wcsCategoryItemClicked","wcsCategoryItemClickedHandler"]]]]],["wcs-divider",[[1,"wcs-divider"]]],["wcs-dropdown-divider",[[1,"wcs-dropdown-divider"]]],["wcs-dropdown-header",[[1,"wcs-dropdown-header"]]],["wcs-dropdown-item",[[4,"wcs-dropdown-item",null,[[1,"mousedown","onMouseDown"],[0,"keydown","onKeyDown"]]]]],["wcs-field",[[1,"wcs-field"]]],["wcs-field-content",[[1,"wcs-field-content"]]],["wcs-field-label",[[1,"wcs-field-label"]]],["wcs-footer",[[1,"wcs-footer"]]],["wcs-galactic",[[1,"wcs-galactic",{"text":[1],"show":[32]}]]],["wcs-grid-column",[[1,"wcs-grid-column",{"path":[1],"name":[1],"sort":[4],"sortFn":[16],"formatter":[16],"sortOrder":[1025,"sort-order"],"width":[1],"customCells":[4,"custom-cells"],"hidden":[4]}]]],["wcs-grid-custom-cell",[[1,"wcs-grid-custom-cell",{"columnId":[1,"column-id"],"rowId":[8,"row-id"]}]]],["wcs-header",[[1,"wcs-header"]]],["wcs-hint",[[1,"wcs-hint",{"small":[1540]}]]],["wcs-icon",[[0,"wcs-icon",{"icon":[1],"size":[1]}]]],["wcs-label",[[1,"wcs-label",{"required":[516]}]]],["wcs-list-item",[[1,"wcs-list-item",{"activated":[1028]}]]],["wcs-list-item-properties",[[1,"wcs-list-item-properties"]]],["wcs-list-item-property",[[1,"wcs-list-item-property"]]],["wcs-native-select",[[1,"wcs-native-select",{"size":[513],"expanded":[32],"disabled":[32]}]]],["wcs-nav",[[1,"wcs-nav"]]],["wcs-nav-item",[[4,"wcs-nav-item",{"text":[513],"href":[513]},[[0,"keydown","onKeyDown"]]]]],["wcs-progress-radial",[[1,"wcs-progress-radial",{"size":[2],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio-group",[[1,"wcs-radio-group",{"value":[8],"name":[520],"mode":[513]},[[0,"wcsRadioClick","selectedOptionChanged"]]]]],["wcs-skeleton-circle",[[1,"wcs-skeleton-circle",{"animation":[513],"radius":[514]}]]],["wcs-skeleton-rectangle",[[1,"wcs-skeleton-rectangle",{"animation":[513],"rounded":[516],"height":[513],"width":[513]}]]],["wcs-skeleton-text",[[1,"wcs-skeleton-text",{"animation":[513],"height":[1]}]]],["wcs-switch",[[1,"wcs-switch",{"name":[1],"checked":[516],"labelAlignment":[513,"label-alignment"],"disabled":[4]}]]],["wcs-tab",[[1,"wcs-tab",{"header":[513],"itemKey":[8,"item-key"]}]]],["wcs-tabs",[[1,"wcs-tabs",{"align":[513],"selectedIndex":[2,"selected-index"],"selectedKey":[8,"selected-key"],"headersOnly":[4,"headers-only"],"gutter":[4],"headers":[32],"currentActiveTabIndex":[32]},[[0,"tabLoaded","onTabLoaded"]]]]],["wcs-tooltip",[[1,"wcs-tooltip",{"for":[1],"position":[513],"interactive":[4],"maxWidth":[8,"max-width"],"delay":[2],"duration":[2],"trigger":[1],"theme":[1],"content":[1],"appendTo":[1,"append-to"],"hide":[64],"show":[64],"disable":[64],"enable":[64]}]]],["wcs-progress-bar",[[1,"wcs-progress-bar",{"small":[4],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio",[[1,"wcs-radio",{"mode":[513],"value":[1544],"label":[1537],"checked":[1540],"disabled":[1028]},[[0,"keydown","onKeyDown"]]]]],["wcs-select_2",[[4,"wcs-select-option",{"disabled":[1540],"selected":[1540],"value":[8],"chipColor":[1,"chip-color"],"chipBackgroundColor":[1,"chip-background-color"],"multiple":[1540]},[[1,"mousedown","onMouseDown"],[0,"keydown","handleKeydown"]]],[1,"wcs-select",{"size":[513],"value":[1032],"placeholder":[1537],"disabled":[1028],"multiple":[516],"chips":[516],"name":[1],"compareWith":[16],"expanded":[32],"hasLoaded":[32],"displayText":[32],"focused":[32],"overlayDirection":[32],"open":[64],"close":[64]},[[1,"mousedown","onMouseDown"],[8,"click","onWindowClickEvent"],[0,"keydown","onKeyDown"],[0,"wcsSelectOptionClick","selectedOptionChanged"]]]]],["wcs-error_2",[[1,"wcs-error"],[1,"wcs-form-field",{"isError":[1540,"is-error"],"hasPrefix":[32],"hasSuffix":[32],"spiedElement":[32]}]]],["wcs-checkbox",[[1,"wcs-checkbox",{"name":[1],"indeterminate":[1540],"checked":[1540],"labelAlignment":[1537,"label-alignment"],"disabled":[4]}]]],["wcs-button",[[17,"wcs-button",{"type":[1025],"href":[1],"target":[1],"disabled":[516],"ripple":[4],"size":[513],"shape":[513],"mode":[513],"loading":[1028]},[[0,"click","onClick"]]]]],["wcs-mat-icon",[[1,"wcs-mat-icon",{"icon":[1],"size":[1],"family":[1]}]]],["wcs-spinner",[[1,"wcs-spinner",{"mode":[513]}]]]], options);
 });
 
 //# sourceMappingURL=wcs.js.map

package/dist/types/components/button/button.d.ts

@@ -2,6 +2,14 @@ import { ComponentInterface } from '../../stencil-public-runtime';
 import { WcsButtonMode, WcsButtonShape, WcsButtonSize, WcsButtonType } from './button-interface';
 /**
  * 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.
  */
 export declare class Button implements ComponentInterface {
   private el;
@@ -44,6 +52,10 @@ export declare class Button implements ComponentInterface {
    * Flag to display spinner until the end of action
    */
   loading: boolean;
+  /**
+   * Native event click is emit event if we decide to stop propagation of it
+   * @param ev
+   */
   onClick(ev: Event): void;
   componentWillLoad(): Promise<void> | void;
   componentDidLoad(): void;

package/dist/types/components/com-nav/com-nav.d.ts

@@ -15,4 +15,15 @@ export declare class ComNav implements ComponentInterface {
   onClickOnFinalAction(): void;
   onClickOnFinalActionCat(): void;
   render(): any;
+  /**
+   * Handle the keydown event on the mobile menu icon. Open the menu if the user press space or enter.
+   * @param evt The keydown event.
+   * @private
+   */
+  private mobileMenuIconOnKeyDown;
+  /**
+   * Close the mobile menu if the user press escape.
+   * @param evt keydown event on window target.
+   */
+  exitMobileMenuOnKeyDown(evt: KeyboardEvent): void;
 }

package/dist/types/components/counter/counter.d.ts

@@ -33,32 +33,30 @@ export declare class Counter implements ComponentInterface {
    * Emitted when the value of the counter has changed.
    */
   wcsChange: EventEmitter<CounterChangeEventDetail>;
-  /**
-   * Allow to change currentValue programmatically
-   */
-  value?: number;
   /**
    * The current value of the counter.
    */
-  private currentValue;
+  value: number;
   /**
    * Only for animation and display purpose
    */
   private displayedValue;
+  private animateRunning;
   /**
    * Emitted when the counter loses focus.
    */
   wcsBlur: EventEmitter<FocusEvent>;
   componentWillLoad(): void;
-  /**
-   * Value change programmatically => update currentValue and displayedValue
-   */
-  valueChanged(): void;
   /**
    * Current value change => handle event and interval
    */
-  currentValueChanged(newVal: any, oldVal: any): void;
+  valueChange(newVal: any, oldVal: any): void;
+  private handleValueChange;
+  private updateDisplayValueIfNoAnimationRunning;
+  private ensureValueIsNotOutOfMinMax;
+  private setMinimumIfValueIsUndefinedOrNull;
   onKeyDown(_event: KeyboardEvent): void;
+  private notifyChange;
   private getCounterContainer;
   private handleDecrement;
   private handleIncrement;

package/dist/types/components/grid/grid.d.ts

@@ -1,27 +1,44 @@
 import { ComponentDidLoad, ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import { WcsGridAllRowSelectedEventDetails, WcsGridColumnSortChangeEventDetails, WcsGridPaginationChangeEventDetails, WcsGridRow, WcsGridRowSelectedEventDetails, WcsGridSelectionConfig } from './grid-interface';
+/**
+ * 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
+ * @slot grid-column - The slot containing the column of the grid in the `<thead>`
+ * @slot grid-pagination - The slot containing the pagination of the grid below the `<table>`
+ */
 export declare class Grid implements ComponentInterface, ComponentDidLoad {
   private el;
   /**
-   * 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;
+  /**
+   * 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;
   /**
-   * 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;
   /**
-   * Set the selected items
+   * Set the selected items (rows)
    */
   selectedItems: any | any[];
+  /**
+   * Automatically set by the component to reference the wcs-grid-pagination HTML element by its id.
+   */
   wcsGridPaginationId: string;
   /**
-   * Name of the object's key that will be used to display the cells whose keyValue attribute matches to the
+   * 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;

package/dist/types/components/grid-column/grid-column.d.ts

@@ -1,20 +1,56 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import { WcsCellFormatter, WcsGridColumnSortChangeEventDetails, WcsSortFn, WcsSortOrder } from '../grid/grid-interface';
+/**
+ * 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
+ */
 export declare class GridColumn implements ComponentInterface {
   private el;
+  /**
+   * Represents the name of the field from the `data` object (e.g: first_name, last_name, email, ...)
+   */
   path: string;
+  /**
+   * The name of the column displayed on the table (e.g: First Name, Last Name, Email, ...)
+   */
   name: string;
+  /**
+   * Make the column sortable.
+   */
   sort: boolean;
+  /**
+   * Customizable sort function to change the comparison of values.
+   */
   sortFn: WcsSortFn;
+  /**
+   * Customizable formatter function to render the cell differently.
+   */
   formatter: WcsCellFormatter;
+  /**
+   * 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;
+  /**
+   * Set to true if using a `wcs-custom-cell` linked to it.
+   */
   customCells: boolean;
+  /**
+   * Flag to hide the column.
+   */
   hidden: boolean;
+  /**
+   * Event emitted when the sort of the column is changed.
+   */
   wcsSortChange: EventEmitter<WcsGridColumnSortChangeEventDetails>;
+  /**
+   * Event emitted if the column is dynamically switching visibility.
+   */
   wcsHiddenChange: EventEmitter<boolean>;
   parseMyObjectProp(newValue: boolean): void;
   sortOrderChange(_: WcsSortOrder): void;

package/dist/types/components/grid-custom-cell/grid-custom-cell.d.ts

@@ -1,4 +1,7 @@
 import { ComponentInterface } from '../../stencil-public-runtime';
+/**
+ * The grid custom cell is a subcomponent of `wcs-grid`.
+ */
 export declare class GridCustomCell implements ComponentInterface {
   /**
    * ID of the column for which to render the cell

package/dist/types/components/grid-pagination/grid-pagination.d.ts

@@ -1,12 +1,38 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import { WcsGridPaginationChangeEventDetails } from '../grid/grid-interface';
+/**
+ * The grid pagination is a subcomponent of `wcs-grid`, slotted in `grid-pagination` under the `<table>` element.
+ */
 export declare class GridPagination implements ComponentInterface {
   static readonly INDEX_FIRST_PAGE: number;
+  /**
+   * 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;
+  /**
+   * Maximum number of elements shown per page.
+   * Default is the first value of `availablePageSizes`.
+   */
   pageSize: 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;
+  /**
+   * Event emitted when the pagination changes.
+   */
   wcsGridPaginationChange: EventEmitter<WcsGridPaginationChangeEventDetails>;
   private lastPage;
   private nextPage;

package/dist/types/components/skeleton/skeleton-interface.d.ts

@@ -0,0 +1 @@
+export type WcsSkeletonAnimation = 'none' | 'glide' | 'pulse';

package/dist/types/components/skeleton-circle/skeleton-circle.d.ts

@@ -0,0 +1,16 @@
+import { ComponentInterface } from "../../stencil-public-runtime";
+import { WcsSkeletonAnimation } from "../skeleton/skeleton-interface";
+/**
+ * Use a skeleton circle as a placeholder round images, illustrations or components
+ */
+export declare class SkeletonCircle implements ComponentInterface {
+  /**
+   * Specifies the animation of the skeleton
+   */
+  animation: WcsSkeletonAnimation;
+  /**
+   * Specifies the radius of the circle in px
+   */
+  radius: number;
+  render(): any;
+}

package/dist/types/components/skeleton-rectangle/skeleton-rectangle.d.ts

@@ -0,0 +1,27 @@
+import { ComponentInterface } from "../../stencil-public-runtime";
+import { WcsSkeletonAnimation } from "../skeleton/skeleton-interface";
+import { CssTypes } from "../../shared-types";
+/**
+ * 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)
+ */
+export declare class SkeletonRectangle implements ComponentInterface {
+  /**
+   * Specifies the animation of the skeleton
+   */
+  animation: WcsSkeletonAnimation;
+  /**
+   * Adds a border radius on the skeleton if true
+   */
+  rounded: boolean;
+  /**
+   * Specifies the height of the skeleton (can be any valid CSS value)
+   */
+  height: CssTypes.Height;
+  /**
+   * Specifies the width of the skeleton (can be any valid CSS value)
+   */
+  width: CssTypes.Width;
+  render(): any;
+}

package/dist/types/components/skeleton-text/skeleton-text.d.ts

@@ -0,0 +1,16 @@
+import { ComponentInterface } from "../../stencil-public-runtime";
+import { WcsSkeletonAnimation } from "../skeleton/skeleton-interface";
+/**
+ * Use a skeleton text as a placeholder for titles or paragraphs.
+ */
+export declare class SkeletonText implements ComponentInterface {
+  /**
+   * Specifies the animation of the skeleton
+   */
+  animation: WcsSkeletonAnimation;
+  /**
+   * Specifies the line height of the text skeleton
+   */
+  height: 'h1' | 'h2' | 'h3' | 'caption' | 'body';
+  render(): any;
+}