wcs-core 4.1.0 → 4.2.0

package/dist/types/components.d.ts

@@ -18,7 +18,7 @@ import { HorizontalStepClickEvent, HorizontalStepConfig, HorizontalStepperMode }
 import { AutocompleteTypes, InputChangeEventDetail, TextFieldTypes, WcsInputSize } from "./components/input/input-interface";
 import { MaterialIconFamily, MaterialIconSize } from "./components/mat-icon/mat-icon-interface";
 import { ModalSize } from "./components/modal/modal-interface";
-import { WcsNativeSelectSize } from "./components/native-select/native-select.component";
+import { WcsNativeSelectSize } from "./components/native-select/native-select";
 import { RadioGroupChangeEventDetail, RadioGroupMode } from "./components/radio-group/radio-group-interface";
 import { RadioChosedEvent } from "./components/radio/radio-interface";
 import { SelectChangeEventDetail, WcsSelectSize } from "./components/select/select-interface";
@@ -43,7 +43,7 @@ export { HorizontalStepClickEvent, HorizontalStepConfig, HorizontalStepperMode }
 export { AutocompleteTypes, InputChangeEventDetail, TextFieldTypes, WcsInputSize } from "./components/input/input-interface";
 export { MaterialIconFamily, MaterialIconSize } from "./components/mat-icon/mat-icon-interface";
 export { ModalSize } from "./components/modal/modal-interface";
-export { WcsNativeSelectSize } from "./components/native-select/native-select.component";
+export { WcsNativeSelectSize } from "./components/native-select/native-select";
 export { RadioGroupChangeEventDetail, RadioGroupMode } from "./components/radio-group/radio-group-interface";
 export { RadioChosedEvent } from "./components/radio/radio-interface";
 export { SelectChangeEventDetail, WcsSelectSize } from "./components/select/select-interface";
@@ -592,7 +592,7 @@ export namespace Components {
          */
         "setBlur": () => Promise<void>;
         /**
-          * @deprecated use the native focus method instead  Sets focus on the native `input` in `wcs-input`. Use this method instead of the global `input.focus()`.
+          * @deprecated use the native focus method instead   Sets focus on the native `input` in `wcs-input`.
          */
         "setFocus": () => Promise<void>;
         /**
@@ -674,12 +674,16 @@ export namespace Components {
         "withoutBackdrop": boolean;
     }
     /**
-     * The `wcs-native-select` component is designed to accept a native <select> element as a slotted child. This choice
-     * allows developers to bind the <select> element using the framework of their choice, without the need to re-expose all the
-     * properties of the <select> and <option> elements in this component.
-     * The component wraps the native <select> element and provides custom styles and behavior, while preserving the native
+     * The `wcs-native-select` component is designed to accept a native `<select>` element as a slotted child. This choice
+     * allows developers to bind the `<select>` element using the framework of their choice, without the need to re-expose all the
+     * properties of the `<select>` and `<option>` elements in this component.
+     * The component wraps the native `<select>` element and provides custom styles and behavior, while preserving the native
      * functionality and accessibility.
-     * Example usage:
+     * ### ✅ Guidance
+     * - To have a placeholder, you must have an option as child which has `selected` attribute and `disabled`
+     * attribute. You can add the `hidden` attribute to don't show the placeholder option in the options overlay.
+     * ### Example usage
+     * ```html
      * <wcs-native-select>
      *   <select>
      *     <option value="option1">Option 1</option>
@@ -687,12 +691,21 @@ export namespace Components {
      *     <option value="option3">Option 3</option>
      *   </select>
      * </wcs-native-select>
+     * ```
+     * ### Note
+     * - We did not find a way to detect when the select is reset, if you want to apply the placeholder style when the
+     * select is reset, you have to call the `updateStyles()` method manually.
+     * - It is strongly recommended to use select-native when you don't have to support the multi-selection feature
      */
     interface WcsNativeSelect {
         /**
           * The `size` property controls the size of the slotted `select` element by adjusting its padding. There are two possible size options: - 'm': medium size - 'l': large size  The default value is 'm'.
          */
         "size": WcsNativeSelectSize;
+        /**
+          * Use this method to force the component to update its styles. It can be useful when the select is reset (with a placeholder).
+         */
+        "updateStyles": () => Promise<void>;
     }
     interface WcsNav {
     }
@@ -739,6 +752,7 @@ export namespace Components {
         "disabled": boolean;
         "label": string;
         "mode": RadioGroupMode;
+        "name": string;
         "value": any | any[] | undefined | null;
     }
     interface WcsRadioGroup {
@@ -920,6 +934,10 @@ export namespace Components {
           * Tab headers alignment.
          */
         "align": WcsTabsAlignment;
+        /**
+          * Description is used to provide aria-label for the tabs container which has `role="tablist"`.
+         */
+        "description": string;
         /**
           * Determines if tabs header should have a border at the bottom
          */
@@ -1028,7 +1046,7 @@ export namespace Components {
          */
         "setBlur": () => Promise<void>;
         /**
-          * Sets focus on the native `textarea` in `wcs-textarea`. Use this method instead of the global `textarea.focus()`.
+          * @deprecated use the native focus method instead   Sets focus on the native `textarea` in `wcs-textarea`.
          */
         "setFocus": () => Promise<void>;
         /**
@@ -1500,12 +1518,16 @@ declare global {
         new (): HTMLWcsModalElement;
     };
     /**
-     * The `wcs-native-select` component is designed to accept a native <select> element as a slotted child. This choice
-     * allows developers to bind the <select> element using the framework of their choice, without the need to re-expose all the
-     * properties of the <select> and <option> elements in this component.
-     * The component wraps the native <select> element and provides custom styles and behavior, while preserving the native
+     * The `wcs-native-select` component is designed to accept a native `<select>` element as a slotted child. This choice
+     * allows developers to bind the `<select>` element using the framework of their choice, without the need to re-expose all the
+     * properties of the `<select>` and `<option>` elements in this component.
+     * The component wraps the native `<select>` element and provides custom styles and behavior, while preserving the native
      * functionality and accessibility.
-     * Example usage:
+     * ### ✅ Guidance
+     * - To have a placeholder, you must have an option as child which has `selected` attribute and `disabled`
+     * attribute. You can add the `hidden` attribute to don't show the placeholder option in the options overlay.
+     * ### Example usage
+     * ```html
      * <wcs-native-select>
      *   <select>
      *     <option value="option1">Option 1</option>
@@ -1513,6 +1535,11 @@ declare global {
      *     <option value="option3">Option 3</option>
      *   </select>
      * </wcs-native-select>
+     * ```
+     * ### Note
+     * - We did not find a way to detect when the select is reset, if you want to apply the placeholder style when the
+     * select is reset, you have to call the `updateStyles()` method manually.
+     * - It is strongly recommended to use select-native when you don't have to support the multi-selection feature
      */
     interface HTMLWcsNativeSelectElement extends Components.WcsNativeSelect, HTMLStencilElement {
     }
@@ -2387,12 +2414,16 @@ declare namespace LocalJSX {
         "withoutBackdrop"?: boolean;
     }
     /**
-     * The `wcs-native-select` component is designed to accept a native <select> element as a slotted child. This choice
-     * allows developers to bind the <select> element using the framework of their choice, without the need to re-expose all the
-     * properties of the <select> and <option> elements in this component.
-     * The component wraps the native <select> element and provides custom styles and behavior, while preserving the native
+     * The `wcs-native-select` component is designed to accept a native `<select>` element as a slotted child. This choice
+     * allows developers to bind the `<select>` element using the framework of their choice, without the need to re-expose all the
+     * properties of the `<select>` and `<option>` elements in this component.
+     * The component wraps the native `<select>` element and provides custom styles and behavior, while preserving the native
      * functionality and accessibility.
-     * Example usage:
+     * ### ✅ Guidance
+     * - To have a placeholder, you must have an option as child which has `selected` attribute and `disabled`
+     * attribute. You can add the `hidden` attribute to don't show the placeholder option in the options overlay.
+     * ### Example usage
+     * ```html
      * <wcs-native-select>
      *   <select>
      *     <option value="option1">Option 1</option>
@@ -2400,6 +2431,11 @@ declare namespace LocalJSX {
      *     <option value="option3">Option 3</option>
      *   </select>
      * </wcs-native-select>
+     * ```
+     * ### Note
+     * - We did not find a way to detect when the select is reset, if you want to apply the placeholder style when the
+     * select is reset, you have to call the `updateStyles()` method manually.
+     * - It is strongly recommended to use select-native when you don't have to support the multi-selection feature
      */
     interface WcsNativeSelect {
         /**
@@ -2452,6 +2488,7 @@ declare namespace LocalJSX {
         "disabled"?: boolean;
         "label"?: string;
         "mode"?: RadioGroupMode;
+        "name"?: string;
         "onWcsRadioClick"?: (event: WcsRadioCustomEvent<RadioChosedEvent>) => void;
         "value"?: any | any[] | undefined | null;
     }
@@ -2648,6 +2685,10 @@ declare namespace LocalJSX {
           * Tab headers alignment.
          */
         "align"?: WcsTabsAlignment;
+        /**
+          * Description is used to provide aria-label for the tabs container which has `role="tablist"`.
+         */
+        "description"?: string;
         /**
           * Determines if tabs header should have a border at the bottom
          */
@@ -2975,12 +3016,16 @@ declare module "@stencil/core" {
             "wcs-mat-icon": LocalJSX.WcsMatIcon & JSXBase.HTMLAttributes<HTMLWcsMatIconElement>;
             "wcs-modal": LocalJSX.WcsModal & JSXBase.HTMLAttributes<HTMLWcsModalElement>;
             /**
-             * The `wcs-native-select` component is designed to accept a native <select> element as a slotted child. This choice
-             * allows developers to bind the <select> element using the framework of their choice, without the need to re-expose all the
-             * properties of the <select> and <option> elements in this component.
-             * The component wraps the native <select> element and provides custom styles and behavior, while preserving the native
+             * The `wcs-native-select` component is designed to accept a native `<select>` element as a slotted child. This choice
+             * allows developers to bind the `<select>` element using the framework of their choice, without the need to re-expose all the
+             * properties of the `<select>` and `<option>` elements in this component.
+             * The component wraps the native `<select>` element and provides custom styles and behavior, while preserving the native
              * functionality and accessibility.
-             * Example usage:
+             * ### ✅ Guidance
+             * - To have a placeholder, you must have an option as child which has `selected` attribute and `disabled`
+             * attribute. You can add the `hidden` attribute to don't show the placeholder option in the options overlay.
+             * ### Example usage
+             * ```html
              * <wcs-native-select>
              *   <select>
              *     <option value="option1">Option 1</option>
@@ -2988,6 +3033,11 @@ declare module "@stencil/core" {
              *     <option value="option3">Option 3</option>
              *   </select>
              * </wcs-native-select>
+             * ```
+             * ### Note
+             * - We did not find a way to detect when the select is reset, if you want to apply the placeholder style when the
+             * select is reset, you have to call the `updateStyles()` method manually.
+             * - It is strongly recommended to use select-native when you don't have to support the multi-selection feature
              */
             "wcs-native-select": LocalJSX.WcsNativeSelect & JSXBase.HTMLAttributes<HTMLWcsNativeSelectElement>;
             "wcs-nav": LocalJSX.WcsNav & JSXBase.HTMLAttributes<HTMLWcsNavElement>;

package/dist/types/utils/accessibility.d.ts

@@ -1 +1,3 @@
 export declare function isElementFocused(element: HTMLElement): boolean;
+export declare const wcsFocusableElements: string[];
+export declare function isFocusable(element: any): boolean;

package/dist/wcs/p-0f8db386.js

@@ -0,0 +1,2 @@
+function e(e){return e===document.activeElement}const t=["wcs-select","wcs-select-option","wcs-dropdown","wcs-dropdown-item","wcs-nav-item","wcs-button","wcs-input","wcs-textarea","wcs-checkbox","wcs-radio","wcs-switch","wcs-tab","wcs-counter"];function r(e){if(parseInt(e.getAttribute("tabindex"))<0){return false}if(e.disabled){return false}const r=e.getBoundingClientRect();if(r.bottom===0&&r.top===0&&r.left===0&&r.right===0&&r.height===0&&r.width===0&&r.x===0&&r.y===0){return false}if(e.style.display==="none"||e.style.visibility==="hidden"||e.style.opacity===0){return false}if(e.getAttribute("role")==="button"){return true}if(t.includes(e.tagName.toLowerCase())){return true}switch(e.nodeName){case"A":return!!e.href&&e.rel!=="ignore";case"INPUT":return e.type!=="hidden";case"BUTTON":case"SELECT":case"TEXTAREA":return true;default:return false}}export{r as a,e as i};
+//# sourceMappingURL=p-0f8db386.js.map

package/dist/wcs/p-0f8db386.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["isElementFocused","element","document","activeElement","wcsFocusableElements","isFocusable","parseInt","getAttribute","disabled","boundingRect","getBoundingClientRect","bottom","top","left","right","height","width","x","y","style","display","visibility","opacity","includes","tagName","toLowerCase","nodeName","href","rel","type"],"sources":["./src/utils/accessibility.ts"],"sourcesContent":["export function isElementFocused(element: HTMLElement) {\n    return element === document.activeElement;\n}\n\nexport const wcsFocusableElements = [\n    'wcs-select',\n    'wcs-select-option',\n    'wcs-dropdown',\n    'wcs-dropdown-item',\n    'wcs-nav-item',\n    'wcs-button',\n    'wcs-input',\n    'wcs-textarea',\n    'wcs-checkbox',\n    'wcs-radio',\n    'wcs-switch',\n    'wcs-tab',\n    'wcs-counter',\n];\n\nexport function isFocusable(element: any) {\n    if (parseInt(element.getAttribute('tabindex')) < 0) {\n        return false;\n    }\n    if (element.disabled) {\n        return false;\n    }\n    const boundingRect = element.getBoundingClientRect();\n    if (\n        boundingRect.bottom === 0 &&\n        boundingRect.top === 0 &&\n        boundingRect.left === 0 &&\n        boundingRect.right === 0 &&\n        boundingRect.height === 0 &&\n        boundingRect.width === 0 &&\n        boundingRect.x === 0 &&\n        boundingRect.y === 0\n    ) {\n        return false;\n    }\n    if (\n        element.style.display === 'none' ||\n        element.style.visibility === 'hidden' ||\n        element.style.opacity === 0\n    ) {\n        return false;\n    }\n    if (element.getAttribute('role') === 'button') {\n        return true;\n    }\n\n    if (wcsFocusableElements.includes(element.tagName.toLowerCase())) {\n        return true;\n    }\n\n    // To identify other native focus elements.\n    switch (element.nodeName) {\n        case 'A':\n            return !!element.href && element.rel !== 'ignore';\n        case 'INPUT':\n            return element.type !== 'hidden';\n        case 'BUTTON':\n        case 'SELECT':\n        case 'TEXTAREA':\n            return true;\n        default:\n            return false;\n    }\n}\n"],"mappings":"SAAgBA,EAAiBC,GAC7B,OAAOA,IAAYC,SAASC,aAChC,CAEO,MAAMC,EAAuB,CAChC,aACA,oBACA,eACA,oBACA,eACA,aACA,YACA,eACA,eACA,YACA,aACA,UACA,e,SAGYC,EAAYJ,GACxB,GAAIK,SAASL,EAAQM,aAAa,aAAe,EAAG,CAChD,OAAO,K,CAEX,GAAIN,EAAQO,SAAU,CAClB,OAAO,K,CAEX,MAAMC,EAAeR,EAAQS,wBAC7B,GACID,EAAaE,SAAW,GACxBF,EAAaG,MAAQ,GACrBH,EAAaI,OAAS,GACtBJ,EAAaK,QAAU,GACvBL,EAAaM,SAAW,GACxBN,EAAaO,QAAU,GACvBP,EAAaQ,IAAM,GACnBR,EAAaS,IAAM,EACrB,CACE,OAAO,K,CAEX,GACIjB,EAAQkB,MAAMC,UAAY,QAC1BnB,EAAQkB,MAAME,aAAe,UAC7BpB,EAAQkB,MAAMG,UAAY,EAC5B,CACE,OAAO,K,CAEX,GAAIrB,EAAQM,aAAa,UAAY,SAAU,CAC3C,OAAO,I,CAGX,GAAIH,EAAqBmB,SAAStB,EAAQuB,QAAQC,eAAgB,CAC9D,OAAO,I,CAIX,OAAQxB,EAAQyB,UACZ,IAAK,IACD,QAASzB,EAAQ0B,MAAQ1B,EAAQ2B,MAAQ,SAC7C,IAAK,QACD,OAAO3B,EAAQ4B,OAAS,SAC5B,IAAK,SACL,IAAK,SACL,IAAK,WACD,OAAO,KACX,QACI,OAAO,MAEnB,Q"}

package/dist/wcs/{p-4b4d53e2.entry.js → p-1f8c73eb.entry.js}

@@ -1,2 +1,2 @@
-import{r as o,c as s,h as r,H as t}from"./p-a2df3a49.js";import{i,a as c}from"./p-12ac2547.js";const n="wcs-dropdown-item{display:block;padding:0 var(--wcs-padding);font-weight:500;cursor:pointer;height:42px;line-height:42px}wcs-dropdown-item:hover,wcs-dropdown-item:focus{color:var(--wcs-primary);background-color:var(--wcs-light)}";const a=class{constructor(r){o(this,r);this.wcsDropdownItemClick=s(this,"wcsDropdownItemClick",7)}onMouseDown(o){this.wcsDropdownItemClick.emit()}onKeyDown(o){if(i(o)||c(o)){this.wcsDropdownItemClick.emit()}}render(){return r(t,{slot:"item",tabindex:"0"},r("slot",null))}};a.style=n;export{a as wcs_dropdown_item};
-//# sourceMappingURL=p-4b4d53e2.entry.js.map
+import{r as o,c as s,h as r,H as t}from"./p-a2df3a49.js";import{i,a as c}from"./p-3dc6b507.js";const n="wcs-dropdown-item{display:block;padding:0 var(--wcs-padding);font-weight:500;cursor:pointer;height:42px;line-height:42px}wcs-dropdown-item:hover,wcs-dropdown-item:focus{color:var(--wcs-primary);background-color:var(--wcs-light)}";const a=class{constructor(r){o(this,r);this.wcsDropdownItemClick=s(this,"wcsDropdownItemClick",7)}onMouseDown(o){this.wcsDropdownItemClick.emit()}onKeyDown(o){if(i(o)||c(o)){this.wcsDropdownItemClick.emit()}}render(){return r(t,{slot:"item",tabindex:"0"},r("slot",null))}};a.style=n;export{a as wcs_dropdown_item};
+//# sourceMappingURL=p-1f8c73eb.entry.js.map

package/dist/wcs/{p-554ca93c.entry.js → p-2185bf8b.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as t,g as i}from"./p-a2df3a49.js";import{a as o}from"./p-12ac2547.js";const a="wcs-nav-item{display:block;cursor:pointer}wcs-nav-item a{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;text-align:center;background-color:transparent;border:none;text-decoration:none;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;height:5rem;font-size:0.75rem;color:var(--wcs-contrast)}wcs-nav-item a:not(.active){border-bottom:1px solid rgba(255, 255, 255, 0.2)}@media (max-width: 1199px){wcs-nav-item a{display:flex;flex:1;height:3.25rem;font-size:0.625rem;color:var(--wcs-text-medium)}}wcs-nav-item a:focus{outline:none}@media (max-width: 1199px){wcs-nav-item:focus-within{outline:2px dashed var(--wcs-primary);outline-offset:1px;border-radius:0.1rem}}@media (min-width: 1200px){wcs-nav-item:focus-within{outline:2px dashed var(--wcs-white);outline-offset:-2px;border-radius:0.1rem}}wcs-nav-item i{margin-bottom:0.5rem;display:inline-block}@media (max-width: 1199px){wcs-nav-item i{margin-bottom:0.25rem;display:inline-block}}@media (min-width: 1200px){wcs-nav-item[slot=bottom] a{border-top:1px solid rgba(255, 255, 255, 0.2);border-bottom:none}}.wcs-nav-item-text{font-weight:500}.active,wcs-nav-item:hover,wcs-nav-item:focus-within{background-blend-mode:multiply;background-color:rgba(0, 0, 0, 0.15);}@media (max-width: 1199px){.active,wcs-nav-item:hover,wcs-nav-item:focus-within{background-color:unset}.active a,wcs-nav-item:hover a,wcs-nav-item:focus-within a{color:var(--wcs-primary)}}";const n=class{constructor(t){e(this,t);this.text="";this.href=undefined}onKeyDown(e){if(o(e)){this.el.click()}}render(){return t("a",{href:this.href,class:"wcs-nav-item-container"},t("slot",null),t("span",{class:"wcs-nav-item-text"},this.text))}get el(){return i(this)}};n.style=a;export{n as wcs_nav_item};
-//# sourceMappingURL=p-554ca93c.entry.js.map
+import{r as e,h as t,g as i}from"./p-a2df3a49.js";import{a as o}from"./p-3dc6b507.js";const a="wcs-nav-item{display:block;cursor:pointer}wcs-nav-item a{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;text-align:center;background-color:transparent;border:none;text-decoration:none;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;height:5rem;font-size:0.75rem;color:var(--wcs-contrast)}wcs-nav-item a:not(.active){border-bottom:1px solid rgba(255, 255, 255, 0.2)}@media (max-width: 1199px){wcs-nav-item a{display:flex;flex:1;height:3.25rem;font-size:0.625rem;color:var(--wcs-text-medium)}}wcs-nav-item a:focus{outline:none}@media (max-width: 1199px){wcs-nav-item:focus-within{outline:2px dashed var(--wcs-primary);outline-offset:1px;border-radius:0.1rem}}@media (min-width: 1200px){wcs-nav-item:focus-within{outline:2px dashed var(--wcs-white);outline-offset:-2px;border-radius:0.1rem}}wcs-nav-item i{margin-bottom:0.5rem;display:inline-block}@media (max-width: 1199px){wcs-nav-item i{margin-bottom:0.25rem;display:inline-block}}@media (min-width: 1200px){wcs-nav-item[slot=bottom] a{border-top:1px solid rgba(255, 255, 255, 0.2);border-bottom:none}}.wcs-nav-item-text{font-weight:500}.active,wcs-nav-item:hover,wcs-nav-item:focus-within{background-blend-mode:multiply;background-color:rgba(0, 0, 0, 0.15);}@media (max-width: 1199px){.active,wcs-nav-item:hover,wcs-nav-item:focus-within{background-color:unset}.active a,wcs-nav-item:hover a,wcs-nav-item:focus-within a{color:var(--wcs-primary)}}";const n=class{constructor(t){e(this,t);this.text="";this.href=undefined}onKeyDown(e){if(o(e)){this.el.click()}}render(){return t("a",{href:this.href,class:"wcs-nav-item-container"},t("slot",null),t("span",{class:"wcs-nav-item-text"},this.text))}get el(){return i(this)}};n.style=a;export{n as wcs_nav_item};
+//# sourceMappingURL=p-2185bf8b.entry.js.map

package/dist/wcs/{p-22480bd8.entry.js → p-2f63d6c5.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as t,H as s,g as a}from"./p-a2df3a49.js";import{S as r}from"./p-d6c3e615.js";const i=":host{box-sizing:border-box}::slotted(select){box-sizing:border-box;-moz-appearance:none !important;-webkit-appearance:none !important;appearance:none !important;--wcs-select-native-ligther-percentage:40;--wcs-select-native-border-radius:var(--wcs-border-radius);--wcs-select-native-background-color:var(--wcs-light);--wcs-select-native-placeholder-color:var(--wcs-text-medium);--wcs-select-native-value-color:var(--wcs-primary);--wcs-select-native-border-color:transparent;--wcs-select-native-overlay-max-height:360px;--wcs-select-native-border-width:2px;background-color:var(--wcs-select-native-background-color);color:var(--wcs-select-native-color);border-radius:var(--wcs-border-radius);border:none;outline:none;user-select:none;cursor:pointer;line-height:1.5;font-size:1rem;max-width:100%;flex-grow:1;padding-right:calc(var(--wcs-base-margin) * 2 + 24px);padding-left:calc(var(--wcs-base-margin) * 2)}::slotted(select:disabled){cursor:not-allowed;color:var(--wcs-text-disabled)}:host([data-disabled]) .select-wrapper .arrow-container .arrow{fill:var(--wcs-text-medium)}:host([data-size=m]) ::slotted(select){height:var(--wcs-size-m)}:host([data-size=l]) ::slotted(select){height:var(--wcs-size-l)}::slotted(select:focus){background-clip:padding-box;box-shadow:inset 0 0 0 var(--wcs-select-native-border-width) var(--wcs-primary);background-color:var(--wcs-white)}.select-wrapper{position:relative;display:flex;flex-wrap:nowrap}svg{flex-shrink:0}.arrow{fill:var(--wcs-primary)}.arrow-container{pointer-events:none;display:flex;align-items:center;vertical-align:center;position:absolute;top:0;bottom:0;right:calc(var(--wcs-padding) - 1px);margin:auto 0}";const o=class{constructor(t){e(this,t);this.SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST=["disabled"];this.size="m";this.expanded=false;this.disabled=undefined}componentWillLoad(){this.selectElement=this.el.querySelector("select");if(!this.selectElement)throw new Error("wcs-native-select must be used with a native slotted select, please refer to the documentation.");this.onSelectedOptionChange();this.selectElement.addEventListener("change",(()=>{this.onSelectedOptionChange()}));this.observer=new MutationObserver((e=>{const t=e.filter((e=>this.SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST.includes(e.attributeName))).length>0;if(t){this.updateHostAttributeWithSlottedSelect()}}));this.updateHostAttributeWithSlottedSelect();this.observer.observe(this.selectElement,{attributes:true})}onSelectedOptionChange(){if(this.isPlaceholderOptionSelected()){this.applyPlaceholderStylesOnNativeSlottedSelectElement()}else{this.applySelectedOptionStylesOnNativeSlottedSelectElement()}}isPlaceholderOptionSelected(){var e;return((e=Array.from(this.selectElement.options).filter((e=>e.selected))[0])===null||e===void 0?void 0:e.disabled)==true}applySelectedOptionStylesOnNativeSlottedSelectElement(){this.selectElement.style.color="var(--wcs-primary)";this.selectElement.style.fontStyle="normal";this.selectElement.style.fontWeight="500";Array.from(this.selectElement.options).forEach((e=>{e.style.fontStyle="normal";if(!e.disabled){e.style.color="black"}}))}applyPlaceholderStylesOnNativeSlottedSelectElement(){this.selectElement.style.color="var(--wcs-text-medium)";this.selectElement.style.fontWeight="400";this.selectElement.style.fontStyle="italic";Array.from(this.selectElement.options).forEach((e=>{e.style.fontStyle="normal";if(!e.disabled){e.style.color="black"}}))}updateHostAttributeWithSlottedSelect(){var e;this.disabled=(e=this.selectElement)===null||e===void 0?void 0:e.hasAttribute("disabled")}disconnectedCallback(){var e,t;(e=this.observer)===null||e===void 0?void 0:e.disconnect();(t=this.selectElement)===null||t===void 0?void 0:t.removeEventListener("change",(()=>{this.onSelectedOptionChange()}))}render(){return t(s,{class:`${this.expanded?"expanded":""}`,"data-disabled":this.disabled,"data-size":this.size},t("div",{class:"select-wrapper"},t("slot",null),t("div",{class:"arrow-container"},t(r,{up:this.expanded}))))}get el(){return a(this)}};o.style=i;export{o as wcs_native_select};
-//# sourceMappingURL=p-22480bd8.entry.js.map
+import{r as e,h as t,H as s,g as a}from"./p-a2df3a49.js";import{S as i}from"./p-d6c3e615.js";const r=":host{box-sizing:border-box}::slotted(select){box-sizing:border-box;-moz-appearance:none !important;-webkit-appearance:none !important;appearance:none !important;--wcs-select-native-ligther-percentage:40;--wcs-select-native-border-radius:var(--wcs-border-radius);--wcs-select-native-background-color:var(--wcs-light);--wcs-select-native-placeholder-color:var(--wcs-text-medium);--wcs-select-native-value-color:var(--wcs-primary);--wcs-select-native-border-color:transparent;--wcs-select-native-overlay-max-height:360px;--wcs-select-native-border-width:2px;background-color:var(--wcs-select-native-background-color);color:var(--wcs-select-native-color);border-radius:var(--wcs-border-radius);border:none;outline:none;user-select:none;cursor:pointer;line-height:1.5;font-size:1rem;max-width:100%;flex-grow:1;padding-right:calc(var(--wcs-base-margin) * 2 + 24px);padding-left:calc(var(--wcs-base-margin) * 2)}::slotted(select:disabled){cursor:not-allowed;color:var(--wcs-text-disabled)}:host([data-disabled]) .select-wrapper .arrow-container .arrow{fill:var(--wcs-text-medium)}:host([data-size=m]) ::slotted(select){height:var(--wcs-size-m)}:host([data-size=l]) ::slotted(select){height:var(--wcs-size-l)}::slotted(select:focus){background-clip:padding-box;box-shadow:inset 0 0 0 var(--wcs-select-native-border-width) var(--wcs-primary);background-color:var(--wcs-white)}.select-wrapper{position:relative;display:flex;flex-wrap:nowrap}svg{flex-shrink:0}.arrow{fill:var(--wcs-primary)}.arrow-container{pointer-events:none;display:flex;align-items:center;vertical-align:center;position:absolute;top:0;bottom:0;right:calc(var(--wcs-padding) - 1px);margin:auto 0}";const o=class{constructor(t){e(this,t);this.SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST=["disabled"];this.size="m";this.expanded=false;this.disabled=undefined}componentWillLoad(){this.selectElement=this.el.querySelector("select");if(!this.selectElement)throw new Error("wcs-native-select must be used with a native slotted select, please refer to the documentation.");this.onSelectedOptionChange();this.selectElement.addEventListener("change",(()=>{this.onSelectedOptionChange()}));this.observer=new MutationObserver((e=>{const t=e.filter((e=>this.SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST.includes(e.attributeName))).length>0;if(t){this.updateHostAttributeWithSlottedSelect()}if(e.filter((e=>e.attributeName==="class")).length>0){this._updateStyles()}}));this.updateHostAttributeWithSlottedSelect();this.observer.observe(this.selectElement,{attributes:true})}onSelectedOptionChange(){this._updateStyles()}_updateStyles(){if(this.isPlaceholderOptionSelected()){this.applyPlaceholderStylesOnNativeSlottedSelectElement()}else{this.applySelectedOptionStylesOnNativeSlottedSelectElement()}}isPlaceholderOptionSelected(){var e;return((e=Array.from(this.selectElement.options).filter((e=>e.selected))[0])===null||e===void 0?void 0:e.disabled)==true}applySelectedOptionStylesOnNativeSlottedSelectElement(){this.selectElement.style.color="var(--wcs-primary)";this.selectElement.style.fontStyle="normal";this.selectElement.style.fontWeight="500";Array.from(this.selectElement.options).forEach((e=>{e.style.fontStyle="normal";if(!e.disabled){e.style.color="black"}}))}applyPlaceholderStylesOnNativeSlottedSelectElement(){this.selectElement.style.color="var(--wcs-text-medium)";this.selectElement.style.fontWeight="400";this.selectElement.style.fontStyle="italic";Array.from(this.selectElement.options).forEach((e=>{e.style.fontStyle="normal";if(!e.disabled){e.style.color="black"}}))}updateHostAttributeWithSlottedSelect(){var e;this.disabled=(e=this.selectElement)===null||e===void 0?void 0:e.hasAttribute("disabled")}disconnectedCallback(){var e,t;(e=this.observer)===null||e===void 0?void 0:e.disconnect();(t=this.selectElement)===null||t===void 0?void 0:t.removeEventListener("change",(()=>{this.onSelectedOptionChange()}))}async updateStyles(){this._updateStyles()}render(){return t(s,{class:`${this.expanded?"expanded":""}`,"data-disabled":this.disabled,"data-size":this.size},t("div",{class:"select-wrapper"},t("slot",null),t("div",{class:"arrow-container"},t(i,{up:this.expanded}))))}get el(){return a(this)}};o.style=r;export{o as wcs_native_select};
+//# sourceMappingURL=p-2f63d6c5.entry.js.map

package/dist/wcs/p-2f63d6c5.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["nativeSelectCss","NativeSelect","this","SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST","componentWillLoad","selectElement","el","querySelector","Error","onSelectedOptionChange","addEventListener","observer","MutationObserver","mutations","hasSpiedAttrMutation","filter","m","includes","attributeName","length","updateHostAttributeWithSlottedSelect","_updateStyles","observe","attributes","isPlaceholderOptionSelected","applyPlaceholderStylesOnNativeSlottedSelectElement","applySelectedOptionStylesOnNativeSlottedSelectElement","_a","Array","from","options","o","selected","disabled","style","color","fontStyle","fontWeight","forEach","option","hasAttribute","disconnectedCallback","disconnect","_b","removeEventListener","async","render","h","Host","class","expanded","size","SelectArrow","up"],"sources":["./src/components/native-select/native-select.scss?tag=wcs-native-select&encapsulation=shadow","./src/components/native-select/native-select.tsx"],"sourcesContent":["// TODO: voir pour mettre en commun avec le style du composant personnalisée\n@import '../../style/focus-outline.scss';\n\n:host {\n    box-sizing: border-box;\n}\n\n::slotted(select) {\n    box-sizing: border-box;\n    -moz-appearance:none !important;\n    -webkit-appearance: none !important;\n    appearance: none !important;\n\n    --wcs-select-native-ligther-percentage: 40;\n    --wcs-select-native-border-radius: var(--wcs-border-radius);\n    --wcs-select-native-background-color: var(--wcs-light);\n    --wcs-select-native-placeholder-color: var(--wcs-text-medium);\n    --wcs-select-native-value-color: var(--wcs-primary);\n    --wcs-select-native-border-color: transparent;\n    --wcs-select-native-overlay-max-height: 360px;\n    --wcs-select-native-border-width: 2px;\n\n    background-color: var(--wcs-select-native-background-color);\n\n    color: var(--wcs-select-native-color);\n\n    border-radius: var(--wcs-border-radius);\n    border: none;\n\n    outline: none;\n    user-select: none;\n    cursor: pointer;\n    line-height: 1.5;\n    font-size: 1rem;\n\n    max-width: 100%;\n    flex-grow: 1;\n    padding-right: calc((var(--wcs-base-margin) * 2) + 24px);\n    padding-left: calc(var(--wcs-base-margin) * 2);\n}\n\n::slotted(select:disabled) {\n    cursor: not-allowed;\n    color: var(--wcs-text-disabled);\n}\n\n:host([data-disabled]) {\n    .select-wrapper {\n        .arrow-container {\n            .arrow {\n                fill: var(--wcs-text-medium);\n            }\n        }\n    }\n}\n\n:host([data-size=m])  {\n    ::slotted(select) {\n        height: var(--wcs-size-m);\n    }\n}\n\n:host([data-size=l]) {\n    ::slotted(select) {\n        height: var(--wcs-size-l);\n    }\n}\n\n::slotted(select:focus) {\n    background-clip: padding-box;\n    box-shadow: inset 0 0 0 var(--wcs-select-native-border-width) var(--wcs-primary);\n    background-color: var(--wcs-white);\n}\n\n.select-wrapper {\n    position: relative;\n\n    display: flex;\n    flex-wrap: nowrap;\n}\n\n// So the arrow on the right doesn't shrink when text overflows.\nsvg {\n    flex-shrink: 0;\n}\n\n.arrow {\n    fill: var(--wcs-primary);\n}\n\n.arrow-container {\n    pointer-events: none;\n    display: flex;\n    align-items: center;\n    vertical-align: center;\n\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: calc(var(--wcs-padding) - 1px);\n    margin: auto 0;\n}\n","import { Component, h, ComponentInterface, State, Prop, Host, Element, Method } from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport { WcsSize } from \"../../shared-types\";\n\nexport type WcsNativeSelectSize = Extract<WcsSize, 'l' | 'm'>; // todo: move into common file with custom select\n\n/**\n * The `wcs-native-select` component is designed to accept a native `<select>` element as a slotted child. This choice\n * allows developers to bind the `<select>` element using the framework of their choice, without the need to re-expose all the\n * properties of the `<select>` and `<option>` elements in this component.\n *\n * The component wraps the native `<select>` element and provides custom styles and behavior, while preserving the native\n * functionality and accessibility.\n *\n * ### ✅ Guidance\n *\n * - To have a placeholder, you must have an option as child which has `selected` attribute and `disabled`\n * attribute. You can add the `hidden` attribute to don't show the placeholder option in the options overlay.\n *\n * ### Example usage\n *\n * ```html\n * <wcs-native-select>\n *   <select>\n *     <option value=\"option1\">Option 1</option>\n *     <option value=\"option2\">Option 2</option>\n *     <option value=\"option3\">Option 3</option>\n *   </select>\n * </wcs-native-select>\n * ```\n *\n * ### Note\n * - We did not find a way to detect when the select is reset, if you want to apply the placeholder style when the\n * select is reset, you have to call the `updateStyles()` method manually.\n * - It is strongly recommended to use select-native when you don't have to support the multi-selection feature\n */\n@Component({\n    tag: 'wcs-native-select',\n    styleUrl: 'native-select.scss',\n    shadow: true\n})\nexport class NativeSelect implements ComponentInterface {\n    /**\n     * The `size` property controls the size of the slotted `select` element by adjusting its padding.\n     * There are two possible size options:\n     * - 'm': medium size\n     * - 'l': large size\n     *\n     * The default value is 'm'.\n     */\n    @Prop({reflect: true}) size: WcsNativeSelectSize = 'm';\n\n    @Element() private el!: HTMLWcsNativeSelectElement;\n\n    @State() private expanded: boolean = false;\n    @State() private disabled: boolean;\n\n    private selectElement: HTMLSelectElement;\n    private observer: MutationObserver;\n\n\n    private readonly SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST = ['disabled'];\n\n    componentWillLoad() {\n        this.selectElement = this.el.querySelector('select');\n        if (!this.selectElement) throw new Error(\"wcs-native-select must be used with a native slotted select, please refer to the documentation.\");\n\n        this.onSelectedOptionChange();\n\n        /**\n         * We use an event listener to apply the default style to the select when user chose an active option\n         */\n        this.selectElement.addEventListener('change', () => {\n            this.onSelectedOptionChange();\n        });\n\n        this.observer = new MutationObserver(mutations => {\n            const hasSpiedAttrMutation = mutations.filter(m => this.SLOTTED_SELECT_TRACKED_ATTRIBUTES_LIST.includes(m.attributeName)).length > 0;\n            if (hasSpiedAttrMutation) {\n                this.updateHostAttributeWithSlottedSelect();\n            }\n\n            // A workaround to detect when the select is reset by using a class change on the select element. For example\n            // angular add/remove ng-pristine and ng-dirty classes on the form controls when the form is reset.\n            // Not the best solution but it works since we cannot detect the reset event on the native select element.\n            if (mutations.filter(m => m.attributeName === 'class').length > 0) {\n                this._updateStyles();\n            }\n        });\n        this.updateHostAttributeWithSlottedSelect();\n        this.observer.observe(this.selectElement, {attributes: true});\n    }\n\n    private onSelectedOptionChange(): void {\n        this._updateStyles();\n    }\n\n    private _updateStyles() {\n        if (this.isPlaceholderOptionSelected()) {\n            this.applyPlaceholderStylesOnNativeSlottedSelectElement();\n        } else {\n            this.applySelectedOptionStylesOnNativeSlottedSelectElement();\n        }\n    }\n\n    private isPlaceholderOptionSelected() {\n        return Array.from(this.selectElement.options).filter(o => o.selected)[0]?.disabled == true;\n    }\n\n    /**\n     * This method should always unset all styles modified by the `applyPlaceholderStylesOnNativeSlottedSelectElement()`\n     * @private\n     */\n    private applySelectedOptionStylesOnNativeSlottedSelectElement() {\n        this.selectElement.style.color = \"var(--wcs-primary)\";\n        this.selectElement.style.fontStyle = 'normal';\n        this.selectElement.style.fontWeight = '500';\n        Array.from(this.selectElement.options).forEach(option => {\n            option.style.fontStyle = 'normal';\n            if (!option.disabled) {\n                option.style.color = \"black\";\n            }\n        });\n    }\n\n    /**\n     * This method apply styles when the placeholder is shown.\n     *\n     * We use javascript because we cannot achieve that behaviour in pure css when the native select is not required\n     * @private\n     */\n    private applyPlaceholderStylesOnNativeSlottedSelectElement() {\n        this.selectElement.style.color = \"var(--wcs-text-medium)\";\n        this.selectElement.style.fontWeight = '400';\n        this.selectElement.style.fontStyle = 'italic';\n        Array.from(this.selectElement.options).forEach(option => {\n            option.style.fontStyle = 'normal';\n            if (!option.disabled) {\n                option.style.color = \"black\";\n            }\n        });\n    }\n\n    private updateHostAttributeWithSlottedSelect() {\n        this.disabled = this.selectElement?.hasAttribute('disabled');\n    }\n\n    disconnectedCallback() {\n        this.observer?.disconnect();\n        this.selectElement?.removeEventListener(\"change\", () => {\n            this.onSelectedOptionChange();\n        });\n    }\n\n    /**\n     * Use this method to force the component to update its styles. It can be useful when the select is reset (with a placeholder).\n     */\n    @Method()\n    async updateStyles() {\n        // Note : we try to automatically detect if the select is reset with the onreset event and with a mutation\n        // observer on the select element. But it seems that the onreset event is not fired when the select is reset.\n        // and the mutation observer is not fired when the select is reset with the reset() method on the form.\n        // So we have to let the user call this method manually when he reset the select.\n        this._updateStyles();\n    }\n\n    render() {\n        return (\n            <Host class={`${this.expanded ? 'expanded' : ''}`} data-disabled={this.disabled} data-size={this.size}>\n                <div class=\"select-wrapper\">\n                    <slot></slot>\n                    <div class=\"arrow-container\">\n                        <SelectArrow up={this.expanded}></SelectArrow>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n"],"mappings":"6FAAA,MAAMA,EAAkB,2nD,MCyCXC,EAAY,M,yBAoBJC,KAAAC,uCAAyC,CAAC,Y,UAXR,I,cAId,M,wBASrCC,oBACIF,KAAKG,cAAgBH,KAAKI,GAAGC,cAAc,UAC3C,IAAKL,KAAKG,cAAe,MAAM,IAAIG,MAAM,mGAEzCN,KAAKO,yBAKLP,KAAKG,cAAcK,iBAAiB,UAAU,KAC1CR,KAAKO,wBAAwB,IAGjCP,KAAKS,SAAW,IAAIC,kBAAiBC,IACjC,MAAMC,EAAuBD,EAAUE,QAAOC,GAAKd,KAAKC,uCAAuCc,SAASD,EAAEE,iBAAgBC,OAAS,EACnI,GAAIL,EAAsB,CACtBZ,KAAKkB,sC,CAMT,GAAIP,EAAUE,QAAOC,GAAKA,EAAEE,gBAAkB,UAASC,OAAS,EAAG,CAC/DjB,KAAKmB,e,KAGbnB,KAAKkB,uCACLlB,KAAKS,SAASW,QAAQpB,KAAKG,cAAe,CAACkB,WAAY,M,CAGnDd,yBACJP,KAAKmB,e,CAGDA,gBACJ,GAAInB,KAAKsB,8BAA+B,CACpCtB,KAAKuB,oD,KACF,CACHvB,KAAKwB,uD,EAILF,8B,MACJ,QAAOG,EAAAC,MAAMC,KAAK3B,KAAKG,cAAcyB,SAASf,QAAOgB,GAAKA,EAAEC,WAAU,MAAE,MAAAL,SAAA,SAAAA,EAAEM,WAAY,I,CAOlFP,wDACJxB,KAAKG,cAAc6B,MAAMC,MAAQ,qBACjCjC,KAAKG,cAAc6B,MAAME,UAAY,SACrClC,KAAKG,cAAc6B,MAAMG,WAAa,MACtCT,MAAMC,KAAK3B,KAAKG,cAAcyB,SAASQ,SAAQC,IAC3CA,EAAOL,MAAME,UAAY,SACzB,IAAKG,EAAON,SAAU,CAClBM,EAAOL,MAAMC,MAAQ,O,KAWzBV,qDACJvB,KAAKG,cAAc6B,MAAMC,MAAQ,yBACjCjC,KAAKG,cAAc6B,MAAMG,WAAa,MACtCnC,KAAKG,cAAc6B,MAAME,UAAY,SACrCR,MAAMC,KAAK3B,KAAKG,cAAcyB,SAASQ,SAAQC,IAC3CA,EAAOL,MAAME,UAAY,SACzB,IAAKG,EAAON,SAAU,CAClBM,EAAOL,MAAMC,MAAQ,O,KAKzBf,uC,MACJlB,KAAK+B,UAAWN,EAAAzB,KAAKG,iBAAa,MAAAsB,SAAA,SAAAA,EAAEa,aAAa,W,CAGrDC,uB,SACId,EAAAzB,KAAKS,YAAQ,MAAAgB,SAAA,SAAAA,EAAEe,cACfC,EAAAzC,KAAKG,iBAAa,MAAAsC,SAAA,SAAAA,EAAEC,oBAAoB,UAAU,KAC9C1C,KAAKO,wBAAwB,G,CAQrCoC,qBAKI3C,KAAKmB,e,CAGTyB,SACI,OACIC,EAACC,EAAI,CAACC,MAAO,GAAG/C,KAAKgD,SAAW,WAAa,KAAI,gBAAiBhD,KAAK+B,SAAQ,YAAa/B,KAAKiD,MAC7FJ,EAAA,OAAKE,MAAM,kBACPF,EAAA,aACAA,EAAA,OAAKE,MAAM,mBACPF,EAACK,EAAW,CAACC,GAAInD,KAAKgD,a"}

package/dist/wcs/p-39821dd2.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as s,h as o,H as i,g as a}from"./p-a2df3a49.js";import{a as e,i as n}from"./p-0f8db386.js";import{m as d}from"./p-3dc6b507.js";const l="wcs-modal{z-index:999;position:fixed;top:0;bottom:0;left:0;right:0;display:none;background:rgba(0, 0, 0, 0.4)}wcs-modal[show]{display:flex;height:100vh;width:100vw;align-items:center;justify-content:center}wcs-modal[without-backdrop]{background-color:unset}wcs-modal[without-backdrop] .wcs-modal-container{border:solid 1px var(--wcs-text-light)}.wcs-modal-container{max-height:var(--wcs-modal-max-height, 80%);background-color:#fff;display:grid;grid-template-columns:100%;grid-template-rows:auto 1fr auto;box-sizing:border-box;pointer-events:auto;background-clip:padding-box;border:0 solid rgba(0, 0, 0, 0.2);border-radius:0.4375rem;z-index:20000;padding:1.375rem 1.875rem 1.875rem 1.875rem}.wcs-modal-container[data-size=s]{width:288px}.wcs-modal-container[data-size=m]{width:480px}.wcs-modal-container[data-size=l]{width:864px}.wcs-modal-container[data-size=xl]{width:1200px}.wcs-modal-header{margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}.wcs-modal-header h5{font-size:24px;font-weight:400;margin:0}.wcs-modal-content{font-weight:400;font-size:16px;overflow-y:auto}.wcs-modal-actions{margin-top:20px;display:flex;justify-content:flex-end}";const c=class{constructor(o){t(this,o);this.wcsDialogClosed=s(this,"wcsDialogClosed",7);this.modalId=r++;this.showAttributeChangedMarker=false;this.withoutBackdrop=false;this.show=false;this.showCloseButton=false;this.size="m";this.hideActions=false}componentDidLoad(){this.updateFocusableElements()}componentDidRender(){var t;this.updateFocusableElements();if(this.showAttributeChangedMarker){this.showAttributeChangedMarker=false;(t=this.firstFocusableElement)===null||t===void 0?void 0:t.focus()}}onShowChange(){if(this.show){this.showAttributeChangedMarker=true}}updateFocusableElements(){const t=Array.from(this.el.querySelectorAll("*")).filter((t=>e(t)));this.firstFocusableElement=t.length>0&&t[0];this.lastFocusableElement=t.length>0&&t[t.length-1]}close(){if(this.show){this.show=false;this.wcsDialogClosed.emit()}}onKeyDown(t){if(this.show&&this.showCloseButton&&t.key==="Escape"){this.close()}if(this.show){const s=this.firstFocusableElement;const o=this.lastFocusableElement;if(d(t)){if(t.shiftKey&&n(s)){t.preventDefault();o.focus()}else if(!t.shiftKey&&n(o)){t.preventDefault();s.focus()}}}}onCloseButtonClick(t){this.close()}handleSlotContentChange(){this.updateFocusableElements()}render(){const t=`wcs-modal-title-${this.modalId}`;return o(i,null,o("div",{class:"wcs-modal-container","data-size":this.size,"aria-modal":true,role:"dialog","aria-labelledby":t},o("div",{class:"wcs-modal-header"},o("h5",{id:t},o("slot",{name:"header"})),this.showCloseButton&&o("wcs-button",{shape:"round",mode:"clear",class:"wcs-dark",onClick:t=>this.onCloseButtonClick(t)},o("wcs-mat-icon",{icon:"close"}))),o("div",{class:"wcs-modal-content"},o("slot",{onSlotchange:()=>this.handleSlotContentChange()})),!this.hideActions&&o("div",{class:"wcs-modal-actions"},o("slot",{name:"actions"}))))}get el(){return a(this)}static get watchers(){return{show:["onShowChange"]}}};let r=0;c.style=l;export{c as wcs_modal};
+//# sourceMappingURL=p-39821dd2.entry.js.map

package/dist/wcs/p-39821dd2.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["modalCss","Modal","this","modalId","modalIds","showAttributeChangedMarker","componentDidLoad","updateFocusableElements","componentDidRender","_a","firstFocusableElement","focus","onShowChange","show","focusableElements","Array","from","el","querySelectorAll","filter","element","isFocusable","length","lastFocusableElement","close","wcsDialogClosed","emit","onKeyDown","event","showCloseButton","key","firstElement","lastElement","isTabKey","shiftKey","isElementFocused","preventDefault","onCloseButtonClick","_","handleSlotContentChange","render","modalTitleId","h","Host","class","size","role","id","name","shape","mode","onClick","$event","icon","onSlotchange","hideActions"],"sources":["./src/components/modal/modal.scss?tag=wcs-modal","./src/components/modal/modal.tsx"],"sourcesContent":["wcs-modal {\n    z-index: 999;\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    display: none;\n    background: rgba(0, 0, 0, 0.4);\n}\n\nwcs-modal[show] {\n    display: flex;\n    height: 100vh;\n    width: 100vw;\n    align-items: center;\n    justify-content: center;\n}\n\n/**\nBackdrop\n */\nwcs-modal[without-backdrop] {\n    background-color: unset;\n\n    .wcs-modal-container {\n        border: solid 1px var(--wcs-text-light);\n    }\n}\n\n/**\nModal window\n */\n.wcs-modal-container {\n    max-height: var(--wcs-modal-max-height, 80%);\n    background-color: #fff;\n    display: grid;\n    grid-template-columns: 100%;\n    grid-template-rows: auto 1fr auto;\n    box-sizing: border-box;\n    pointer-events: auto;\n    background-clip: padding-box;\n    border: 0 solid rgba(0, 0, 0, 0.2);\n    border-radius: 0.4375rem;\n    z-index: 20000;\n    padding: 1.375rem 1.875rem 1.875rem 1.875rem;\n}\n\n.wcs-modal-container[data-size=s] {\n    width: 288px;\n}\n\n.wcs-modal-container[data-size=m] {\n    width: 480px;\n}\n\n.wcs-modal-container[data-size=l] {\n    width: 864px;\n}\n\n.wcs-modal-container[data-size=xl] {\n    width: 1200px;\n}\n\n.wcs-modal-header {\n    h5 {\n        font-size: 24px;\n        font-weight: 400;\n        margin: 0;\n    }\n\n    margin-bottom: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.wcs-modal-content {\n    font-weight: 400;\n    font-size: 16px;\n    overflow-y: auto;\n}\n\n.wcs-modal-actions {\n    margin-top: 20px;\n    display: flex;\n    justify-content: flex-end;\n}\n","import {\n    Element,\n    Component,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Prop,\n    ComponentInterface, \n    Watch\n} from '@stencil/core';\nimport { ModalSize } from './modal-interface';\nimport { isElementFocused, isFocusable } from \"../../utils/accessibility\";\nimport { isTabKey } from \"../../utils/helpers\";\n\n@Component({\n    tag: 'wcs-modal',\n    styleUrl: 'modal.scss',\n    shadow: false,\n})\nexport class Modal implements ComponentInterface {\n    @Element() el: HTMLElement;\n\n    /**\n     * Specifies whether the component should display a backdrop on the entire page\n     */\n    @Prop({reflect: true}) withoutBackdrop: boolean = false;\n\n    /**\n     * Displays the modal\n     */\n    @Prop({reflect: true}) show: boolean = false;\n\n    /**\n     * Triggered when the user leaves the dialog with the closing button.\n     */\n    @Event() wcsDialogClosed: EventEmitter<void>;\n\n    /**\n     * Specifies whether the component should display a close button.\n     * if false, it won't close the modal when the escape key is pressed.\n     */\n    @Prop({reflect: true}) showCloseButton: boolean = false;\n\n    /**\n     * There are multiple sizes for modals. The default size is medium (m), however other sizes are available. Select the\n     * size best suited for the content and screen size displaying the modal. Remember to test responsiveness.\n     */\n    @Prop() size: ModalSize = 'm';\n\n    /**\n     * Specifies whether the component should hide the actions slot or not\n     */\n    @Prop({reflect: true}) hideActions: boolean = false;\n\n    /**\n     * Give an unique id\n     * @private\n     */\n    private modalId: number = modalIds++;\n\n    private firstFocusableElement: HTMLElement;\n    private lastFocusableElement: HTMLElement;\n    /**\n     * This attribute is used to determine whether the show attribute has changed since the last rendering. \n     * This allows us to call the focus method on the first element of the modal when the show attribute changes to true. \n     * This call is made in the componentDidRender method\n     * @private\n     */\n    private showAttributeChangedMarker: boolean = false;\n\n    componentDidLoad() {\n        this.updateFocusableElements();\n    }\n\n    componentDidRender() {\n        this.updateFocusableElements();\n        if (this.showAttributeChangedMarker) {\n            this.showAttributeChangedMarker = false;\n            this.firstFocusableElement?.focus();\n        }\n    }\n    \n    @Watch(\"show\")\n    onShowChange() {\n        if(this.show) {\n            this.showAttributeChangedMarker = true;\n        }\n    }\n\n    private updateFocusableElements() {\n        const focusableElements = Array.from(this.el.querySelectorAll('*'))\n            .filter(element => isFocusable(element));\n\n        this.firstFocusableElement = focusableElements.length > 0 && focusableElements[0] as HTMLElement;\n        this.lastFocusableElement = focusableElements.length > 0 && focusableElements[focusableElements.length - 1] as HTMLElement;\n    }\n    \n    private close() {\n        // If the modal isn't shown, we don't do anything\n        if (this.show) {\n            this.show = false;\n            this.wcsDialogClosed.emit();\n        }\n    }\n\n    @Listen('keydown', {target: 'document'})\n    onKeyDown(event: KeyboardEvent) {\n        if (this.show && this.showCloseButton && event.key === 'Escape') {\n            this.close();\n        }\n\n        if (this.show) {\n            const firstElement = this.firstFocusableElement;\n            const lastElement = this.lastFocusableElement;\n\n            if (isTabKey(event)) {\n                if (event.shiftKey && isElementFocused(firstElement)) {\n                    event.preventDefault();\n                    lastElement.focus();\n                } else if (!event.shiftKey && isElementFocused(lastElement)) {\n                    event.preventDefault();\n                    firstElement.focus();\n                }\n            }\n        }\n    }\n\n    private onCloseButtonClick(_: MouseEvent) {\n        this.close();\n    }\n\n    private handleSlotContentChange() {\n        this.updateFocusableElements();\n    }\n\n    render() {\n        const modalTitleId = `wcs-modal-title-${this.modalId}`;\n        return (\n            <Host>\n                <div class=\"wcs-modal-container\"\n                     data-size={this.size}\n                     aria-modal={true}\n                     role={\"dialog\"}\n                     aria-labelledby={modalTitleId}\n                >\n                    <div class=\"wcs-modal-header\">\n                        <h5 id={modalTitleId}>\n                            <slot name=\"header\"></slot>\n                        </h5>\n                        {this.showCloseButton && (\n                            <wcs-button shape=\"round\" mode=\"clear\" class=\"wcs-dark\"\n                                        onClick={($event) => this.onCloseButtonClick($event)}>\n                                <wcs-mat-icon icon=\"close\"></wcs-mat-icon>\n                            </wcs-button>)\n                        }\n\n                    </div>\n                    <div class=\"wcs-modal-content\">\n                        <slot onSlotchange={() => this.handleSlotContentChange()}></slot>\n                    </div>\n                    {!this.hideActions && (\n                        <div class=\"wcs-modal-actions\">\n                            <slot name=\"actions\"></slot>\n                        </div>)\n                    }\n                </div>\n            </Host>\n        );\n    }\n}\n\nlet modalIds = 0;\n"],"mappings":"+IAAA,MAAMA,EAAW,0pC,MCqBJC,EAAK,M,0EAuCNC,KAAAC,QAAkBC,IAUlBF,KAAAG,2BAAsC,M,qBA3CI,M,UAKX,M,qBAWW,M,UAMxB,I,iBAKoB,K,CAkB9CC,mBACIJ,KAAKK,yB,CAGTC,qB,MACIN,KAAKK,0BACL,GAAIL,KAAKG,2BAA4B,CACjCH,KAAKG,2BAA6B,OAClCI,EAAAP,KAAKQ,yBAAqB,MAAAD,SAAA,SAAAA,EAAEE,O,EAKpCC,eACI,GAAGV,KAAKW,KAAM,CACVX,KAAKG,2BAA6B,I,EAIlCE,0BACJ,MAAMO,EAAoBC,MAAMC,KAAKd,KAAKe,GAAGC,iBAAiB,MACzDC,QAAOC,GAAWC,EAAYD,KAEnClB,KAAKQ,sBAAwBI,EAAkBQ,OAAS,GAAKR,EAAkB,GAC/EZ,KAAKqB,qBAAuBT,EAAkBQ,OAAS,GAAKR,EAAkBA,EAAkBQ,OAAS,E,CAGrGE,QAEJ,GAAItB,KAAKW,KAAM,CACXX,KAAKW,KAAO,MACZX,KAAKuB,gBAAgBC,M,EAK7BC,UAAUC,GACN,GAAI1B,KAAKW,MAAQX,KAAK2B,iBAAmBD,EAAME,MAAQ,SAAU,CAC7D5B,KAAKsB,O,CAGT,GAAItB,KAAKW,KAAM,CACX,MAAMkB,EAAe7B,KAAKQ,sBAC1B,MAAMsB,EAAc9B,KAAKqB,qBAEzB,GAAIU,EAASL,GAAQ,CACjB,GAAIA,EAAMM,UAAYC,EAAiBJ,GAAe,CAClDH,EAAMQ,iBACNJ,EAAYrB,O,MACT,IAAKiB,EAAMM,UAAYC,EAAiBH,GAAc,CACzDJ,EAAMQ,iBACNL,EAAapB,O,IAMrB0B,mBAAmBC,GACvBpC,KAAKsB,O,CAGDe,0BACJrC,KAAKK,yB,CAGTiC,SACI,MAAMC,EAAe,mBAAmBvC,KAAKC,UAC7C,OACIuC,EAACC,EAAI,KACDD,EAAA,OAAKE,MAAM,sBAAqB,YAChB1C,KAAK2C,KAAI,aACR,KACZC,KAAM,SAAQ,kBACGL,GAElBC,EAAA,OAAKE,MAAM,oBACPF,EAAA,MAAIK,GAAIN,GACJC,EAAA,QAAMM,KAAK,YAEd9C,KAAK2B,iBACFa,EAAA,cAAYO,MAAM,QAAQC,KAAK,QAAQN,MAAM,WACjCO,QAAUC,GAAWlD,KAAKmC,mBAAmBe,IACrDV,EAAA,gBAAcW,KAAK,YAK/BX,EAAA,OAAKE,MAAM,qBACPF,EAAA,QAAMY,aAAc,IAAMpD,KAAKqC,8BAEjCrC,KAAKqD,aACHb,EAAA,OAAKE,MAAM,qBACPF,EAAA,QAAMM,KAAK,c,+EASvC,IAAI5C,EAAW,E"}

package/dist/wcs/{p-84afb8af.entry.js → p-3b1fc676.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as t,H as o,g as i}from"./p-a2df3a49.js";import{r as s}from"./p-1a170e8d.js";import{i as n,a,b as l}from"./p-12ac2547.js";const r=':host{display:block;position:relative;height:75px;border-bottom:solid 1px var(--wcs-text-light)}:host .container{padding:0 var(--wcs-padding);height:100%;display:flex;align-items:center;flex-direction:row;justify-content:space-between}:host .container-left{display:flex;height:100%;align-items:center;flex-direction:row}:host .container-right{display:flex;align-items:center}:host .app-name{font-weight:400;font-size:1.5rem;line-height:1.25;color:var(--wcs-gray)}:host .menu-bar{display:none}:host ::slotted(a){padding-top:calc(1.5 * var(--wcs-base-margin));padding-bottom:calc(1.5 * var(--wcs-base-margin));padding-left:calc(3 * var(--wcs-base-margin));display:flex;align-items:center;height:100%;font-size:16px;cursor:pointer;font-weight:500;color:var(--wcs-gray);text-decoration:none}:host ::slotted(a):after{font-family:icons;padding-left:var(--wcs-base-margin);font-size:0.6rem;content:"\\f107";line-height:1;box-sizing:border-box}:host ::slotted(a:focus-visible){outline:2px dashed var(--wcs-primary);outline-offset:0.1rem;border-radius:2px}@supports not selector(::slotted(a:focus-visible)){:host ::slotted(a:focus-within){outline:2px dashed var(--wcs-primary);outline-offset:0.1rem;border-radius:2px}}:host #mobile-menu-icon{height:24px;padding-left:calc(2 * var(--wcs-base-margin));margin-left:var(--wcs-base-margin);border-left:solid 1px var(--wcs-text-light)}:host #mobile-menu-icon:focus{outline:none}:host #mobile-menu-icon:focus-visible::after{outline:2px dashed var(--wcs-primary);outline-offset:4px;border-radius:0.1rem}@supports not selector(#mobile-menu-icon:focus-visible::after){:host #mobile-menu-icon:focus::after{outline:2px dashed var(--wcs-primary);outline-offset:4px;border-radius:0.1rem}}:host #mobile-menu-icon:after{font-family:icons;font-size:24px;cursor:pointer;content:"\\f198";line-height:1;box-sizing:border-box}:host #mobile-menu-icon[data-mobile-open]:after{content:"\\f129"}:host .mobile-overlay{display:none}:host .mobile-overlay[data-mobile-open]{padding-top:calc(2 * var(--wcs-base-margin));padding-bottom:calc(2 * var(--wcs-base-margin));position:relative;top:0;left:0;right:0;display:block;z-index:9999;background-color:var(--wcs-white)}@media screen and (min-width: 576px){:host .container{margin:0 auto;max-width:var(--wcs-com-content-max-width)}:host .menu-bar{display:flex;align-items:center;height:100%;margin-left:50px}:host .menu-bar ::slotted(*:not(:first-child)){margin-left:40px}:host .menu-bar ::slotted(a:focus-visible){outline:2px dashed var(--wcs-primary);outline-offset:0.1rem;border-radius:2px}@supports not selector(::slotted(a:focus-visible)){:host .menu-bar ::slotted(a:focus-within){outline:2px dashed var(--wcs-primary);outline-offset:0.1rem;border-radius:2px}}:host #mobile-menu-icon{display:none}:host .mobile-overlay{display:none !important}:host ::slotted(a){padding-top:unset;padding-bottom:unset;padding-left:unset}}';const c="WCS-COM-NAV-SUBMENU";const d=class{constructor(t){e(this,t);this.hasAlreadyRegisteredClickHandlerOnSlottedLink=false;this.appName=undefined;this.mobileMenuOpen=false;this.currentActiveSizing=undefined}mobileMenuIconClick(){this.mobileMenuOpen=!this.mobileMenuOpen}disconnectedCallback(){var e;(e=this.resizeObserver)===null||e===void 0?void 0:e.disconnect()}componentWillLoad(){this.resizeObserver=new ResizeObserver((e=>{const t=e[0].contentRect;const o=t.right-t.width;const i=t.left;if(t.width<576-(i+o)){this.currentActiveSizing="mobile"}else{this.currentActiveSizing="desktop"}}));this.resizeObserver.observe(document.body);const e=this.el.querySelectorAll(":scope > wcs-com-nav-submenu:not([slot]), :scope > a:not([slot])");s(e,c)}componentDidRender(){this.registerHandlerToCloseMobileMenuOnClickOnSlottedLinkTag()}registerHandlerToCloseMobileMenuOnClickOnSlottedLinkTag(){if(this.hasAlreadyRegisteredClickHandlerOnSlottedLink)return;const e=this.el.shadowRoot.querySelector("slot:not([name])");if(e){this.hasAlreadyRegisteredClickHandlerOnSlottedLink=true;e.assignedElements().filter((e=>e.tagName==="A")).forEach((e=>{e.addEventListener("click",(e=>{this.mobileMenuOpen=false}))}))}}onClickOnFinalAction(){this.mobileMenuOpen=false}onClickOnFinalActionCat(){this.mobileMenuOpen=false}render(){return t(o,null,t("div",{class:"container"},t("div",{class:"container-left"},t("div",{class:"app-name"},this.appName,t("slot",{name:"app-name"})),t("div",{class:"menu-bar"},this.currentActiveSizing==="desktop"?t("slot",null):null)),t("div",{class:"container-right"},t("slot",{name:"actions"}),t("span",{id:"mobile-menu-icon",tabindex:0,"data-mobile-open":this.mobileMenuOpen,onClick:()=>this.mobileMenuIconClick(),onKeyDown:e=>this.mobileMenuIconOnKeyDown(e)}))),t("div",{class:"mobile-overlay","data-mobile-open":this.mobileMenuOpen},this.currentActiveSizing==="mobile"?t("slot",null):null))}mobileMenuIconOnKeyDown(e){if(n(e)||a(e)){this.mobileMenuIconClick()}}exitMobileMenuOnKeyDown(e){if(l(e)){this.mobileMenuOpen=false}}get el(){return i(this)}};d.style=r;export{d as wcs_com_nav};
-//# sourceMappingURL=p-84afb8af.entry.js.map
+import{r as e,h as t,H as o,g as i}from"./p-a2df3a49.js";import{r as s}from"./p-1a170e8d.js";import{i as n,a,b as l}from"./p-3dc6b507.js";const r=':host{display:block;position:relative;height:75px;border-bottom:solid 1px var(--wcs-text-light)}:host .container{padding:0 var(--wcs-padding);height:100%;display:flex;align-items:center;flex-direction:row;justify-content:space-between}:host .container-left{display:flex;height:100%;align-items:center;flex-direction:row}:host .container-right{display:flex;align-items:center}:host .app-name{font-weight:400;font-size:1.5rem;line-height:1.25;color:var(--wcs-gray)}:host .menu-bar{display:none}:host ::slotted(a){padding-top:calc(1.5 * var(--wcs-base-margin));padding-bottom:calc(1.5 * var(--wcs-base-margin));padding-left:calc(3 * var(--wcs-base-margin));display:flex;align-items:center;height:100%;font-size:16px;cursor:pointer;font-weight:500;color:var(--wcs-gray);text-decoration:none}:host ::slotted(a):after{font-family:icons;padding-left:var(--wcs-base-margin);font-size:0.6rem;content:"\\f107";line-height:1;box-sizing:border-box}:host ::slotted(a:focus-visible){outline:2px dashed var(--wcs-primary);outline-offset:0.1rem;border-radius:2px}@supports not selector(::slotted(a:focus-visible)){:host ::slotted(a:focus-within){outline:2px dashed var(--wcs-primary);outline-offset:0.1rem;border-radius:2px}}:host #mobile-menu-icon{height:24px;padding-left:calc(2 * var(--wcs-base-margin));margin-left:var(--wcs-base-margin);border-left:solid 1px var(--wcs-text-light)}:host #mobile-menu-icon:focus{outline:none}:host #mobile-menu-icon:focus-visible::after{outline:2px dashed var(--wcs-primary);outline-offset:4px;border-radius:0.1rem}@supports not selector(#mobile-menu-icon:focus-visible::after){:host #mobile-menu-icon:focus::after{outline:2px dashed var(--wcs-primary);outline-offset:4px;border-radius:0.1rem}}:host #mobile-menu-icon:after{font-family:icons;font-size:24px;cursor:pointer;content:"\\f198";line-height:1;box-sizing:border-box}:host #mobile-menu-icon[data-mobile-open]:after{content:"\\f129"}:host .mobile-overlay{display:none}:host .mobile-overlay[data-mobile-open]{padding-top:calc(2 * var(--wcs-base-margin));padding-bottom:calc(2 * var(--wcs-base-margin));position:relative;top:0;left:0;right:0;display:block;z-index:9999;background-color:var(--wcs-white)}@media screen and (min-width: 576px){:host .container{margin:0 auto;max-width:var(--wcs-com-content-max-width)}:host .menu-bar{display:flex;align-items:center;height:100%;margin-left:50px}:host .menu-bar ::slotted(*:not(:first-child)){margin-left:40px}:host .menu-bar ::slotted(a:focus-visible){outline:2px dashed var(--wcs-primary);outline-offset:0.1rem;border-radius:2px}@supports not selector(::slotted(a:focus-visible)){:host .menu-bar ::slotted(a:focus-within){outline:2px dashed var(--wcs-primary);outline-offset:0.1rem;border-radius:2px}}:host #mobile-menu-icon{display:none}:host .mobile-overlay{display:none !important}:host ::slotted(a){padding-top:unset;padding-bottom:unset;padding-left:unset}}';const c="WCS-COM-NAV-SUBMENU";const d=class{constructor(t){e(this,t);this.hasAlreadyRegisteredClickHandlerOnSlottedLink=false;this.appName=undefined;this.mobileMenuOpen=false;this.currentActiveSizing=undefined}mobileMenuIconClick(){this.mobileMenuOpen=!this.mobileMenuOpen}disconnectedCallback(){var e;(e=this.resizeObserver)===null||e===void 0?void 0:e.disconnect()}componentWillLoad(){this.resizeObserver=new ResizeObserver((e=>{const t=e[0].contentRect;const o=t.right-t.width;const i=t.left;if(t.width<576-(i+o)){this.currentActiveSizing="mobile"}else{this.currentActiveSizing="desktop"}}));this.resizeObserver.observe(document.body);const e=this.el.querySelectorAll(":scope > wcs-com-nav-submenu:not([slot]), :scope > a:not([slot])");s(e,c)}componentDidRender(){this.registerHandlerToCloseMobileMenuOnClickOnSlottedLinkTag()}registerHandlerToCloseMobileMenuOnClickOnSlottedLinkTag(){if(this.hasAlreadyRegisteredClickHandlerOnSlottedLink)return;const e=this.el.shadowRoot.querySelector("slot:not([name])");if(e){this.hasAlreadyRegisteredClickHandlerOnSlottedLink=true;e.assignedElements().filter((e=>e.tagName==="A")).forEach((e=>{e.addEventListener("click",(e=>{this.mobileMenuOpen=false}))}))}}onClickOnFinalAction(){this.mobileMenuOpen=false}onClickOnFinalActionCat(){this.mobileMenuOpen=false}render(){return t(o,null,t("div",{class:"container"},t("div",{class:"container-left"},t("div",{class:"app-name"},this.appName,t("slot",{name:"app-name"})),t("div",{class:"menu-bar"},this.currentActiveSizing==="desktop"?t("slot",null):null)),t("div",{class:"container-right"},t("slot",{name:"actions"}),t("span",{id:"mobile-menu-icon",tabindex:0,"data-mobile-open":this.mobileMenuOpen,onClick:()=>this.mobileMenuIconClick(),onKeyDown:e=>this.mobileMenuIconOnKeyDown(e)}))),t("div",{class:"mobile-overlay","data-mobile-open":this.mobileMenuOpen},this.currentActiveSizing==="mobile"?t("slot",null):null))}mobileMenuIconOnKeyDown(e){if(n(e)||a(e)){this.mobileMenuIconClick()}}exitMobileMenuOnKeyDown(e){if(l(e)){this.mobileMenuOpen=false}}get el(){return i(this)}};d.style=r;export{d as wcs_com_nav};
+//# sourceMappingURL=p-3b1fc676.entry.js.map

package/dist/wcs/{p-12ac2547.js → p-3dc6b507.js}

@@ -1,2 +1,2 @@
-function n(n){return"clientWidth"in n&&"clientHeight"in n}function t(n){return!!n.shadowRoot&&!!n.attachShadow}const r=(n,t)=>{const r=n._original||n;return{_original:n,emit:e(r.emit.bind(r),t)}};const e=(n,t=0)=>{let r;return(...e)=>{clearTimeout(r);r=setTimeout(n,t,...e)}};const o=(n,t=[])=>{const r={};t.forEach((t=>{if(n.hasAttribute(t)){const e=n.getAttribute(t);if(e!==null){r[t]=n.getAttribute(t)}n.removeAttribute(t)}}));return r};const u=n=>{const t=n.closest("wcs-form-field");if(t){return t.querySelector("wcs-label")}return null};const i=n=>{if(typeof __zone_symbol__requestAnimationFrame==="function"){return __zone_symbol__requestAnimationFrame(n)}if(typeof requestAnimationFrame==="function"){return requestAnimationFrame(n)}return setTimeout(n)};const s=(n,t)=>n.x>=t.getBoundingClientRect().x&&n.x<=t.getBoundingClientRect().x+t.getBoundingClientRect().width&&n.y>=t.getBoundingClientRect().y&&n.y<=t.getBoundingClientRect().y+t.getBoundingClientRect().height;const a=(n,t)=>n.target instanceof Node&&t.contains(n.target);function c(n){return n+"-"+Math.random().toString(36)}function f(n){return n.code==="ArrowUp"}function m(n){return n.code==="ArrowDown"}function l(n){return n.code==="Escape"}function w(n){return n.code==="Space"}function _(n){return n.key==="Enter"}function A(n){return n.code==="Home"}function p(n){return n.code==="End"}function g(n){return n.key==="ArrowUp"}function b(n){return n.key==="ArrowDown"}function d(n){return n.key==="ArrowLeft"}function h(n){return n.key==="ArrowRight"}function q(n){return n.key==="PageDown"}function y(n){return n.key==="PageUp"}function F(n){return n.key==="Tab"}export{_ as a,l as b,f as c,m as d,A as e,p as f,a as g,s as h,w as i,r as j,o as k,u as l,c as m,b as n,h as o,g as p,d as q,i as r,q as s,y as t,F as u,n as v,t as w};
-//# sourceMappingURL=p-12ac2547.js.map
+function n(n){return"clientWidth"in n&&"clientHeight"in n}function t(n){return!!n.shadowRoot&&!!n.attachShadow}const r=(n,t)=>{const r=n._original||n;return{_original:n,emit:e(r.emit.bind(r),t)}};const e=(n,t=0)=>{let r;return(...e)=>{clearTimeout(r);r=setTimeout(n,t,...e)}};const o=(n,t=[])=>{const r={};t.forEach((t=>{if(n.hasAttribute(t)){const e=n.getAttribute(t);if(e!==null){r[t]=n.getAttribute(t)}n.removeAttribute(t)}}));return r};const u=n=>{const t=n.closest("wcs-form-field");if(t){return t.querySelector("wcs-label")}return null};const i=n=>{if(typeof __zone_symbol__requestAnimationFrame==="function"){return __zone_symbol__requestAnimationFrame(n)}if(typeof requestAnimationFrame==="function"){return requestAnimationFrame(n)}return setTimeout(n)};const s=(n,t)=>n.x>=t.getBoundingClientRect().x&&n.x<=t.getBoundingClientRect().x+t.getBoundingClientRect().width&&n.y>=t.getBoundingClientRect().y&&n.y<=t.getBoundingClientRect().y+t.getBoundingClientRect().height;const a=(n,t)=>n.target instanceof Node&&t.contains(n.target);function c(n){return n+"-"+Math.random().toString(36)}function f(n){return n.code==="ArrowUp"}function m(n){return n.code==="ArrowDown"}function l(n){return n.code==="Escape"}function w(n){return n.code==="Space"}function _(n){return n.key==="Enter"}function A(n){return n.code==="Home"}function p(n){return n.code==="End"}function g(n){return n.key==="ArrowUp"}function b(n){return n.key==="ArrowDown"}function d(n){return n.key==="ArrowLeft"}function h(n){return n.key==="ArrowRight"}function q(n){return n.key==="PageDown"}function y(n){return n.key==="PageUp"}function F(n){return n.key==="Tab"}export{_ as a,l as b,f as c,m as d,A as e,p as f,a as g,s as h,w as i,r as j,o as k,u as l,F as m,b as n,g as o,d as p,h as q,i as r,c as s,q as t,y as u,n as v,t as w};
+//# sourceMappingURL=p-3dc6b507.js.map

package/dist/wcs/p-4ffe4539.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as o,H as s,g as i}from"./p-a2df3a49.js";import{S as e}from"./p-d6c3e615.js";import{g as r,d as n,c as a,b as p}from"./p-3dc6b507.js";import{i as d}from"./p-0f8db386.js";import{c}from"./p-314d3097.js";const h=':host{display:flex}wcs-button{--wcs-button-padding:8px 10px 8px 16px !important}:host([no-arrow]) wcs-button{--wcs-button-padding:8px 16px 8px 16px !important}:host([shape=small]) wcs-button{--wcs-button-padding:2px 10px 2px 16px !important}:host([shape=small][no-arrow]) wcs-button{--wcs-button-padding:2px 16px 2px 16px !important}.wcs-button-content-wrapper{display:flex}.popover{display:none;border:1px solid #d7d7d7;border-radius:var(--wcs-border-radius);background-color:var(--wcs-white);z-index:9999}.show{display:block}.container{border-radius:inherit;overflow:hidden;padding:calc(var(--wcs-padding) / 2) 0;background-color:var(--wcs-white)}#arrow,#arrow::before{position:absolute;width:8px;height:8px;background:inherit;border:solid 1px #d7d7d7}#arrow{visibility:hidden;z-index:-1}#arrow::before{visibility:visible;content:"";transform:rotate(45deg)}.popover[data-popper-placement^=top]>#arrow{bottom:-5px}.popover[data-popper-placement^=bottom]>#arrow{top:-6px}.popover[data-popper-placement^=left]>#arrow{right:-4px}.popover[data-popper-placement^=right]>#arrow{left:-6px}';const l=class{constructor(o){t(this,o);this.noArrow=false;this.mode="stroked";this.shape="normal";this.disabled=false;this.placement="bottom-end";this.expanded=false}placementChange(){this.popper.setOptions(Object.assign(Object.assign({},this.popper.state.options),{placement:this.placement})).then((t=>this.popper.update()))}componentDidLoad(){const t=this.el.shadowRoot.querySelector("wcs-button");const o=t.shadowRoot.querySelector("button");this.buttonTextColor=window.getComputedStyle(o).color;const s=this.el.shadowRoot.querySelector(".popover");this.popper=c(t,s,{placement:this.placement,modifiers:[{name:"offset",options:{offset:[0,8]}}]});if(!this.noArrow){this.el.shadowRoot.querySelector(".arrow").style.fill=this.buttonTextColor}this.fixForFirefoxBelow63()}fixForFirefoxBelow63(){const t=this.el.querySelectorAll("wcs-dropdown-item");const o=this.el.querySelector(".container");if(t.length>0&&o){t.forEach((t=>{this.el.removeChild(t);o.appendChild(t)}))}}onButtonClick(t){this.expanded=!this.expanded}onWindowClickEvent(t){const o=r(t,this.el);if(this.expanded&&!o){this.expanded=false}}dropdownItemClick(t){this.expanded=false}onKeyDown(t){if(this.expanded&&(n(t)||a(t))){t.preventDefault();const o=Array.from(this.el.querySelectorAll("wcs-dropdown-item"));const s=o.findIndex((t=>d(t)));if(s===-1&&n(t)){this.focusFirstItemIfPresent(o)}else{this.moveFocusedItemByDirection(o,s,n(t)?"down":"up")}}if(this.expanded&&p(t)){this.closeOverlayAndFocusButton()}}focusFirstItemIfPresent(t){if(t[0]){t[0].focus()}}moveFocusedItemByDirection(t,o,s){const i=t[o+(s==="down"?1:-1)];if(i){i.focus()}}closeOverlayAndFocusButton(){this.expanded=!this.expanded;const t=this.el.shadowRoot.querySelector("wcs-button");t.focus()}componentDidRender(){if(this.popper){this.popper.update()}if(!this.noArrow){this.el.shadowRoot.querySelector(".arrow").style.fill=this.buttonTextColor}}render(){return o(s,null,o("wcs-button",{mode:this.mode,shape:this.shape,disabled:this.disabled,onClick:t=>this.onButtonClick(t)},o("div",{class:"wcs-button-content-wrapper"},o("slot",{name:"placeholder"}),this.noArrow?null:o(e,{up:this.expanded}))),o("div",{class:(this.expanded?"show ":"")+"popover"},o("div",{id:"arrow","data-popper-arrow":true}),o("div",{class:"container"},o("slot",{name:"item"}))))}static get delegatesFocus(){return true}get el(){return i(this)}static get watchers(){return{placement:["placementChange"]}}};l.style=h;export{l as wcs_dropdown};
+//# sourceMappingURL=p-4ffe4539.entry.js.map

package/dist/wcs/p-4ffe4539.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dropdownCss","Dropdown","placementChange","this","popper","setOptions","Object","assign","state","options","placement","then","_","update","componentDidLoad","wcsButtonElement","el","shadowRoot","querySelector","buttonWrapper","buttonTextColor","window","getComputedStyle","color","popoverDiv","createPopper","modifiers","name","offset","noArrow","style","fill","fixForFirefoxBelow63","items","querySelectorAll","container","length","forEach","i","removeChild","appendChild","onButtonClick","expanded","onWindowClickEvent","event","clickedOnDropdownOrChildren","clickTargetIsElementOrChildren","dropdownItemClick","onKeyDown","evt","isKeydown","isKeyup","preventDefault","Array","from","currentFocusedItemIndex","findIndex","item","isElementFocused","focusFirstItemIfPresent","moveFocusedItemByDirection","isEscapeKey","closeOverlayAndFocusButton","focus","direction","itemToFocus","wcsButton","componentDidRender","render","h","Host","mode","shape","disabled","onClick","$event","class","SelectArrow","up","id"],"sources":["./src/components/dropdown/dropdown.scss?tag=wcs-dropdown&encapsulation=shadow","./src/components/dropdown/dropdown.tsx"],"sourcesContent":[":host {\n    display: flex;\n}\n\nwcs-button {\n    --wcs-button-padding: 8px 10px 8px 16px !important;\n}\n:host([no-arrow]) {\n    wcs-button {\n        --wcs-button-padding: 8px 16px 8px 16px !important;\n    }\n}\n\n\n:host([shape=small]) {\n    wcs-button {\n        --wcs-button-padding: 2px 10px 2px 16px !important;\n    }\n}\n\n:host([shape=small][no-arrow]) {\n    wcs-button {\n        --wcs-button-padding: 2px 16px 2px 16px !important;\n    }\n}\n\n.wcs-button-content-wrapper {\n    display: flex;\n}\n\n.popover {\n    display: none;\n    border: 1px solid #d7d7d7;\n    border-radius: var(--wcs-border-radius);\n    background-color: var(--wcs-white);\n    z-index: 9999;\n}\n\n.show {\n    display: block;\n}\n\n// XXX: So that item hover background does not overflow\n.container {\n    border-radius: inherit;\n    overflow: hidden;\n    padding: calc(var(--wcs-padding) / 2) 0;\n    background-color: var(--wcs-white);\n}\n\n#arrow,\n#arrow::before {\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background: inherit;\n    border: solid 1px #d7d7d7;\n}\n\n#arrow {\n    visibility: hidden;\n    z-index: -1;\n}\n\n#arrow::before {\n    visibility: visible;\n    content: '';\n    transform: rotate(45deg);\n}\n\n.popover[data-popper-placement^='top'] > #arrow {\n    bottom: -5px;\n}\n\n.popover[data-popper-placement^='bottom'] > #arrow {\n    top: -6px;\n}\n\n.popover[data-popper-placement^='left'] > #arrow {\n    right: -4px;\n}\n\n.popover[data-popper-placement^='right'] > #arrow {\n    left: -6px;\n}\n","import {\n    Component,\n    ComponentInterface, Element,\n    h, Host, Listen, Prop, State, Watch\n} from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport { WcsButtonMode, WcsButtonShape } from '../button/button-interface';\nimport { createPopper, Instance } from '@popperjs/core';\nimport { WcsDropdownPlacement } from './dropdown-interface';\nimport { clickTargetIsElementOrChildren, isEscapeKey, isKeydown, isKeyup } from '../../utils/helpers';\nimport { isElementFocused } from \"../../utils/accessibility\";\n\n\n@Component({\n    tag: 'wcs-dropdown',\n    styleUrl: 'dropdown.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Dropdown implements ComponentInterface {\n    @Element() private el: HTMLWcsDropdownElement;\n\n    /** Hides the arrow in the button */\n    @Prop() noArrow: boolean = false;\n\n    /** Dropdown's button mode */\n    @Prop() mode: WcsButtonMode = 'stroked';\n\n    /** Dropdown's button shape */\n    @Prop() shape: WcsButtonShape = 'normal';\n\n    /** Specifies whether the dropdown button is clickable or not */\n    @Prop() disabled: boolean = false;\n\n    /** placement of the dropdown's popover */\n    @Prop() placement: WcsDropdownPlacement = 'bottom-end';\n\n    @State() private expanded = false;\n\n\n    private popper: Instance;\n\n    private buttonTextColor: string;\n\n    @Watch('placement')\n    protected placementChange() {\n        this.popper.setOptions({\n            ...this.popper.state.options,\n            placement: this.placement\n        }).then(_ => this.popper.update());\n    }\n\n    componentDidLoad() {\n        const wcsButtonElement = this.el.shadowRoot.querySelector('wcs-button');\n        const buttonWrapper = wcsButtonElement.shadowRoot.querySelector('button');\n        this.buttonTextColor = window.getComputedStyle(buttonWrapper).color;\n        const popoverDiv = this.el.shadowRoot.querySelector('.popover') as HTMLElement;\n\n\n        this.popper = createPopper(wcsButtonElement, popoverDiv, {\n            placement: this.placement,\n            modifiers: [\n                {\n                    name: 'offset',\n                    options: {\n                        offset: [0, 8]\n                    }\n                }\n            ]\n        });\n\n        if (!this.noArrow) {\n            (this.el.shadowRoot.querySelector('.arrow') as HTMLElement).style.fill = this.buttonTextColor;\n        }\n        this.fixForFirefoxBelow63();\n    }\n\n    private fixForFirefoxBelow63() {\n        // If the items appear out of the slot we place them back\n        const items = this.el.querySelectorAll('wcs-dropdown-item');\n        const container = this.el.querySelector('.container');\n        if (items.length > 0 && container) {\n            items.forEach(i => {\n                this.el.removeChild(i);\n                container.appendChild(i);\n            });\n        }\n    }\n\n    private onButtonClick(_: MouseEvent): void {\n        this.expanded = !this.expanded;\n    }\n\n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent) {\n        const clickedOnDropdownOrChildren = clickTargetIsElementOrChildren(event, this.el);\n        if (this.expanded && !clickedOnDropdownOrChildren) {\n            this.expanded = false;\n        }\n    }\n\n    @Listen('wcsDropdownItemClick')\n    dropdownItemClick(_: CustomEvent<void>) {\n        this.expanded = false;\n    }\n\n    @Listen('keydown')\n    onKeyDown(evt: KeyboardEvent): void {\n        if (this.expanded && (isKeydown(evt) || isKeyup(evt))) {\n            // If the user presses an arrow key (up or down), the browser is prevented from scrolling through\n            evt.preventDefault();\n            const items = Array.from(this.el.querySelectorAll('wcs-dropdown-item'));\n            const currentFocusedItemIndex = items.findIndex(item => isElementFocused(item));\n            // If the dropdown is expended by the user, but no item is focused and the keydown is pressed\n            if (currentFocusedItemIndex === -1 && isKeydown(evt)) {\n                this.focusFirstItemIfPresent(items);\n            } else {\n                this.moveFocusedItemByDirection(items, currentFocusedItemIndex, isKeydown(evt) ? 'down' : 'up');\n            }\n        }\n        if (this.expanded && isEscapeKey(evt)) {\n            this.closeOverlayAndFocusButton();\n        }\n    }\n\n\n    private focusFirstItemIfPresent<T extends HTMLElement>(items: T[]) {\n        if (items[0]) {\n            items[0].focus();\n        }\n    }\n\n    private moveFocusedItemByDirection<T extends HTMLElement>(items: T[], currentFocusedItemIndex: number, direction: 'up' | 'down') {\n        const itemToFocus = items[(currentFocusedItemIndex) + (direction === 'down' ? 1 : -1)];\n        if (itemToFocus) {\n            itemToFocus.focus();\n        }\n    }\n\n    private closeOverlayAndFocusButton() {\n        this.expanded = !this.expanded;\n        const wcsButton = this.el.shadowRoot.querySelector('wcs-button') as HTMLWcsButtonElement;\n        wcsButton.focus();\n    }\n\n    componentDidRender() {\n        if (this.popper) {\n            this.popper.update();\n        }\n        if (!this.noArrow) {\n            (this.el.shadowRoot.querySelector('.arrow') as HTMLElement).style.fill = this.buttonTextColor;\n        }\n    }\n\n    render() {\n        return (\n            <Host>\n                <wcs-button mode={this.mode} shape={this.shape} disabled={this.disabled}\n                            onClick={($event) => this.onButtonClick($event)}>\n                    <div class=\"wcs-button-content-wrapper\">\n                        <slot name=\"placeholder\"/>\n                        {this.noArrow ? null : (<SelectArrow up={this.expanded}/>)}\n                    </div>\n                </wcs-button>\n                <div class={(this.expanded ? 'show ' : '') + 'popover'}>\n                    <div id=\"arrow\" data-popper-arrow/>\n                    <div class=\"container\">\n                        <slot name=\"item\"/>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n\n"],"mappings":"yNAAA,MAAMA,EAAc,8jC,MCoBPC,EAAQ,M,sCAIU,M,UAGG,U,WAGE,S,cAGJ,M,eAGc,a,cAEd,K,CAQlBC,kBACNC,KAAKC,OAAOC,WAAUC,OAAAC,OAAAD,OAAAC,OAAA,GACfJ,KAAKC,OAAOI,MAAMC,SAAO,CAC5BC,UAAWP,KAAKO,aACjBC,MAAKC,GAAKT,KAAKC,OAAOS,U,CAG7BC,mBACI,MAAMC,EAAmBZ,KAAKa,GAAGC,WAAWC,cAAc,cAC1D,MAAMC,EAAgBJ,EAAiBE,WAAWC,cAAc,UAChEf,KAAKiB,gBAAkBC,OAAOC,iBAAiBH,GAAeI,MAC9D,MAAMC,EAAarB,KAAKa,GAAGC,WAAWC,cAAc,YAGpDf,KAAKC,OAASqB,EAAaV,EAAkBS,EAAY,CACrDd,UAAWP,KAAKO,UAChBgB,UAAW,CACP,CACIC,KAAM,SACNlB,QAAS,CACLmB,OAAQ,CAAC,EAAG,QAM5B,IAAKzB,KAAK0B,QAAS,CACd1B,KAAKa,GAAGC,WAAWC,cAAc,UAA0BY,MAAMC,KAAO5B,KAAKiB,e,CAElFjB,KAAK6B,sB,CAGDA,uBAEJ,MAAMC,EAAQ9B,KAAKa,GAAGkB,iBAAiB,qBACvC,MAAMC,EAAYhC,KAAKa,GAAGE,cAAc,cACxC,GAAIe,EAAMG,OAAS,GAAKD,EAAW,CAC/BF,EAAMI,SAAQC,IACVnC,KAAKa,GAAGuB,YAAYD,GACpBH,EAAUK,YAAYF,EAAE,G,EAK5BG,cAAc7B,GAClBT,KAAKuC,UAAYvC,KAAKuC,Q,CAI1BC,mBAAmBC,GACf,MAAMC,EAA8BC,EAA+BF,EAAOzC,KAAKa,IAC/E,GAAIb,KAAKuC,WAAaG,EAA6B,CAC/C1C,KAAKuC,SAAW,K,EAKxBK,kBAAkBnC,GACdT,KAAKuC,SAAW,K,CAIpBM,UAAUC,GACN,GAAI9C,KAAKuC,WAAaQ,EAAUD,IAAQE,EAAQF,IAAO,CAEnDA,EAAIG,iBACJ,MAAMnB,EAAQoB,MAAMC,KAAKnD,KAAKa,GAAGkB,iBAAiB,sBAClD,MAAMqB,EAA0BtB,EAAMuB,WAAUC,GAAQC,EAAiBD,KAEzE,GAAIF,KAA6B,GAAKL,EAAUD,GAAM,CAClD9C,KAAKwD,wBAAwB1B,E,KAC1B,CACH9B,KAAKyD,2BAA2B3B,EAAOsB,EAAyBL,EAAUD,GAAO,OAAS,K,EAGlG,GAAI9C,KAAKuC,UAAYmB,EAAYZ,GAAM,CACnC9C,KAAK2D,4B,EAKLH,wBAA+C1B,GACnD,GAAIA,EAAM,GAAI,CACVA,EAAM,GAAG8B,O,EAITH,2BAAkD3B,EAAYsB,EAAiCS,GACnG,MAAMC,EAAchC,EAAM,GAA6B+B,IAAc,OAAS,GAAK,IACnF,GAAIC,EAAa,CACbA,EAAYF,O,EAIZD,6BACJ3D,KAAKuC,UAAYvC,KAAKuC,SACtB,MAAMwB,EAAY/D,KAAKa,GAAGC,WAAWC,cAAc,cACnDgD,EAAUH,O,CAGdI,qBACI,GAAIhE,KAAKC,OAAQ,CACbD,KAAKC,OAAOS,Q,CAEhB,IAAKV,KAAK0B,QAAS,CACd1B,KAAKa,GAAGC,WAAWC,cAAc,UAA0BY,MAAMC,KAAO5B,KAAKiB,e,EAItFgD,SACI,OACIC,EAACC,EAAI,KACDD,EAAA,cAAYE,KAAMpE,KAAKoE,KAAMC,MAAOrE,KAAKqE,MAAOC,SAAUtE,KAAKsE,SACnDC,QAAUC,GAAWxE,KAAKsC,cAAckC,IAChDN,EAAA,OAAKO,MAAM,8BACPP,EAAA,QAAM1C,KAAK,gBACVxB,KAAK0B,QAAU,KAAQwC,EAACQ,EAAW,CAACC,GAAI3E,KAAKuC,aAGtD2B,EAAA,OAAKO,OAAQzE,KAAKuC,SAAW,QAAU,IAAM,WACzC2B,EAAA,OAAKU,GAAG,QAAO,2BACfV,EAAA,OAAKO,MAAM,aACPP,EAAA,QAAM1C,KAAK,W"}

package/dist/wcs/p-61cab06f.entry.js

@@ -0,0 +1,2 @@
+import{r as s,c as t,h as a,H as o}from"./p-a2df3a49.js";const e=class{constructor(a){s(this,a);this.tabLoaded=t(this,"tabLoaded",7);this.header=undefined;this.itemKey=undefined}componentDidLoad(){this.tabLoaded.emit()}render(){return a(o,{slot:"wcs-tab",role:"tabpanel"},a("slot",null))}};export{e as wcs_tab};
+//# sourceMappingURL=p-61cab06f.entry.js.map

package/dist/wcs/p-61cab06f.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Tab","componentDidLoad","this","tabLoaded","emit","render","h","Host","slot","role"],"sources":["./src/components/tab/tab.tsx"],"sourcesContent":["import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Tab content component.\n * Use this component to specify the content of a component.\n */\n@Component({\n    tag: 'wcs-tab',\n    shadow: true,\n})\nexport class Tab {\n    /**\n     * The header you want to be displayed for this tab.\n     */\n    @Prop({ reflect: true }) header: string;\n\n    @Prop() itemKey: any;\n\n    // TODO: See if there is a solution that doesn't pollute the API.\n    /**\n     * Do not use, meant for internal use only.\n     * @inner\n     * @ignore\n     */\n    @Event()\n    tabLoaded!: EventEmitter<void>;\n\n    componentDidLoad() {\n        this.tabLoaded.emit();\n    }\n\n    render() {\n        return (\n            <Host slot=\"wcs-tab\" role={\"tabpanel\"}>\n                <slot></slot>\n            </Host>\n        );\n    }\n}\n"],"mappings":"+DAUaA,EAAG,M,2GAiBZC,mBACIC,KAAKC,UAAUC,M,CAGnBC,SACI,OACIC,EAACC,EAAI,CAACC,KAAK,UAAUC,KAAM,YACvBH,EAAA,a"}

package/dist/wcs/{p-15058c29.entry.js → p-6de70331.entry.js}

@@ -1,2 +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
+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 R,t as U,u as I,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 W=/^(?:[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 B(t){return typeof t==="string"&&W.test(t)}var H=[];for(var T=0;T<256;++T){H.push((T+256).toString(16).substr(1))}function $(t){var e=arguments.length>1&&arguments[1]!==undefined?arguments[1]:0;var r=(H[t[e+0]]+H[t[e+1]]+H[t[e+2]]+H[t[e+3]]+"-"+H[t[e+4]]+H[t[e+5]]+"-"+H[t[e+6]]+H[t[e+7]]+"-"+H[t[e+8]]+H[t[e+9]]+"-"+H[t[e+10]]+H[t[e+11]]+H[t[e+12]]+H[t[e+13]]+H[t[e+14]]+H[t[e+15]]).toLowerCase();if(!B(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 Rt(t,e){return t&&ot(e,j(e),t)}function Ut(t,e){return t&&ot(e,ft(e),t)}var It=typeof exports=="object"&&exports&&!exports.nodeType&&exports;var Et=It&&typeof module=="object"&&module&&!module.nodeType&&module;var Ft=Et&&Et.exports===It;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 Wt=Object.getOwnPropertySymbols;var Bt=!Wt?C:function(t){var e=[];while(t){A(e,y(t));t=kt(t)}return e};function Ht(t,e){return ot(t,Bt(t),e)}function Tt(t){return S(t,ft,Bt)}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=R&&R.isMap;var Ce=ye?k(ye):me;var Ae="[object Set]";function Se(t){return a(t)&&O(t)==Ae}var xe=R&&R.isSet;var Oe=xe?k(xe):Se;var ke=1,Re=2,Ue=4;var Ie="[object Arguments]",Ee="[object Array]",Fe="[object Boolean]",De="[object Date]",Ge="[object Error]",Me="[object Function]",Pe="[object GeneratorFunction]",We="[object Map]",Be="[object Number]",He="[object Object]",Te="[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[Ie]=rr[Ee]=rr[qe]=rr[Le]=rr[Fe]=rr[De]=rr[ze]=rr[Je]=rr[Ke]=rr[Qe]=rr[Xe]=rr[We]=rr[Be]=rr[He]=rr[Te]=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&Re,f=e&Ue;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(U(t)){return Mt(t,a)}if(d==He||d==Ie||v&&!i){s=c||v?{}:we(t);if(!a){return c?Ht(t,Ut(s,t)):Pt(t,Rt(s,t))}}else{if(!rr[d]){return i?t:{}}s=pe(t,d,a)}}o||(o=new I);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?Tt: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,onWcsRadioClick: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-6de70331.entry.js.map